style: prettier format

components/ColorModeButton.vue

@@ -19,6 +19,10 @@
 
 <template>
   <div>
-    <UButton :icon="preference === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'" color="primary" @click="toggleColorMode" />
+    <UButton
+      :icon="preference === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'"
+      color="primary"
+      @click="toggleColorMode"
+    />
   </div>
 </template>

components/DeepResearch.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-  import { deepResearch, type PartialSearchResult, type ResearchResult, type ResearchStep } from '~/lib/deep-research'
+  import {
+    deepResearch,
+    type PartialSearchResult,
+    type ResearchResult,
+    type ResearchStep,
+  } from '~/lib/deep-research'
   import type { TreeNode } from './Tree.vue'
 
   const emit = defineEmits<{
@@ -44,7 +49,10 @@
             tree.value.children.push(node)
           } else {
             // 找到父节点并添加
-            const parentNode = findNode(tree.value, getParentNodeId(step.nodeId))
+            const parentNode = findNode(
+              tree.value,
+              getParentNodeId(step.nodeId),
+            )
             if (parentNode) {
               parentNode.children.push(node)
             }
@@ -160,7 +168,8 @@
     <template #header>
       <h2 class="font-bold">3. Web Browsing</h2>
       <p class="text-sm text-gray-500">
-        The AI will then search the web based on our research goal, and iterate until the depth is reached.
+        The AI will then search the web based on our research goal, and iterate
+        until the depth is reached.
         <br />
         Click a child node to view details.
       </p>
@@ -174,7 +183,9 @@
         <h2 class="text-xl font-bold mt-2">{{ selectedNode.label }}</h2>
 
         <!-- Root node has no additional information -->
-        <p v-if="selectedNode.id === '0'"> This is the beginning of your deep research journey! </p>
+        <p v-if="selectedNode.id === '0'">
+          This is the beginning of your deep research journey!
+        </p>
         <template v-else>
           <h3 class="text-lg font-semibold mt-2">Research Goal:</h3>
           <p>{{ selectedNode.researchGoal }}</p>
@@ -188,7 +199,11 @@
 
           <h3 class="text-lg font-semibold mt-2">Learnings:</h3>
           <ul class="list-disc list-inside">
-            <li v-for="(learning, index) in selectedNode.learnings" :key="index">{{ learning }}</li>
+            <li
+              v-for="(learning, index) in selectedNode.learnings"
+              :key="index"
+              >{{ learning }}</li
+            >
           </ul>
         </template>
       </div>

components/ResearchFeedback.vue

@@ -74,7 +74,10 @@
   <UCard>
     <template #header>
       <h2 class="font-bold">2. Model Feedback</h2>
-      <p class="text-sm text-gray-500"> The AI will ask you some follow up questions to help you clarify the research direction. </p>
+      <p class="text-sm text-gray-500">
+        The AI will ask you some follow up questions to help you clarify the
+        research direction.
+      </p>
     </template>
 
     <div class="flex flex-col gap-2">
@@ -82,7 +85,11 @@
       <div v-if="!feedback.length && !error">Waiting for model feedback...</div>
       <template v-else>
         <div v-if="error" class="text-red-500">{{ error }}</div>
-        <div v-for="(feedback, index) in feedback" class="flex flex-col gap-2" :key="index">
+        <div
+          v-for="(feedback, index) in feedback"
+          class="flex flex-col gap-2"
+          :key="index"
+        >
           Assistant: {{ feedback.assistantQuestion }}
           <UInput v-model="feedback.userAnswer" />
         </div>

components/ResearchForm.vue

@@ -21,7 +21,9 @@
     numQuestions: 3,
   })
 
-  const isSubmitButtonDisabled = computed(() => !form.query || !form.breadth || !form.depth || !form.numQuestions)
+  const isSubmitButtonDisabled = computed(
+    () => !form.query || !form.breadth || !form.depth || !form.numQuestions,
+  )
 
   function handleSubmit() {
     emit('submit', {
@@ -41,29 +43,63 @@
     </template>
     <div class="flex flex-col gap-2">
       <UFormField label="Research Topic" required>
-        <UTextarea class="w-full" v-model="form.query" :rows="3" placeholder="Enter whatever you want to research..." required />
+        <UTextarea
+          class="w-full"
+          v-model="form.query"
+          :rows="3"
+          placeholder="Enter whatever you want to research..."
+          required
+        />
       </UFormField>
 
       <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <UFormField label="Number of Questions" required>
           <template #help> Number of questions for you to clarify. </template>
-          <UInput v-model="form.numQuestions" class="w-full" type="number" :min="1" :max="5" :step="1" />
+          <UInput
+            v-model="form.numQuestions"
+            class="w-full"
+            type="number"
+            :min="1"
+            :max="5"
+            :step="1"
+          />
         </UFormField>
 
         <UFormField label="Depth" required>
           <template #help> How deep you want to dig. </template>
-          <UInput v-model="form.depth" class="w-full" type="number" :min="1" :max="5" :step="1" />
+          <UInput
+            v-model="form.depth"
+            class="w-full"
+            type="number"
+            :min="1"
+            :max="5"
+            :step="1"
+          />
         </UFormField>
 
         <UFormField label="Breadth" required>
           <template #help> Number of searches in each depth. </template>
-          <UInput v-model="form.breadth" class="w-full" type="number" :min="1" :max="5" :step="1" />
+          <UInput
+            v-model="form.breadth"
+            class="w-full"
+            type="number"
+            :min="1"
+            :max="5"
+            :step="1"
+          />
         </UFormField>
       </div>
     </div>
 
     <template #footer>
-      <UButton type="submit" color="primary" :loading="isLoadingFeedback" :disabled="isSubmitButtonDisabled" block @click="handleSubmit">
+      <UButton
+        type="submit"
+        color="primary"
+        :loading="isLoadingFeedback"
+        :disabled="isSubmitButtonDisabled"
+        block
+        @click="handleSubmit"
+      >
         {{ isLoadingFeedback ? 'Researching...' : 'Start Research' }}
       </UButton>
     </template>

components/ResearchReport.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
   import { marked } from 'marked'
-  import { writeFinalReport, type WriteFinalReportParams } from '~/lib/deep-research'
+  import {
+    writeFinalReport,
+    type WriteFinalReportParams,
+  } from '~/lib/deep-research'
 
   interface CustomReportParams extends WriteFinalReportParams {
     visitedUrls: string[]
@@ -10,8 +13,12 @@
   const loading = ref(false)
   const loadingExportPdf = ref(false)
   const reportContent = ref('')
-  const reportHtml = computed(() => marked(reportContent.value, { gfm: true, silent: true }))
-  const isExportButtonDisabled = computed(() => !reportContent.value || loading.value || loadingExportPdf.value)
+  const reportHtml = computed(() =>
+    marked(reportContent.value, { gfm: true, silent: true }),
+  )
+  const isExportButtonDisabled = computed(
+    () => !reportContent.value || loading.value || loadingExportPdf.value,
+  )
 
   async function generateReport(params: CustomReportParams) {
     loading.value = true
@@ -113,7 +120,9 @@
     />
     <template v-else>
       <div v-if="error" class="text-red-500">{{ error }}</div>
-      <div v-else>{{ loading ? 'Generating report...' : 'Waiting for report..' }}.</div>
+      <div v-else
+        >{{ loading ? 'Generating report...' : 'Waiting for report..' }}.</div
+      >
     </template>
   </UCard>
 </template>

components/Tree.vue

@@ -72,7 +72,12 @@
     </UButton>
     <ol v-if="node.children.length > 0" class="space-y-2">
       <li v-for="node in node.children" :key="node.id">
-        <Tree class="ml-2" :node="node" :selected-node @select="emit('select', $event)" />
+        <Tree
+          class="ml-2"
+          :node="node"
+          :selected-node
+          @select="emit('select', $event)"
+        />
       </li>
     </ol>
   </div>