feat: respond in user's language, style fixes and research depth fixes

components/DeepResearch.vue

@@ -8,7 +8,7 @@
   import type { TreeNode } from './Tree.vue'
   import { marked } from 'marked'
 
-  const { t } = useI18n()
+  const { t, locale } = useI18n()
   const emit = defineEmits<{
     (e: 'complete', results: ResearchResult): void
   }>()
@@ -150,6 +150,7 @@
         query,
         maxDepth: depth,
         breadth,
+        language: t('language', {}, { locale: locale.value }),
         onProgress: handleResearchProgress,
       })
     } catch (error) {
@@ -181,7 +182,7 @@
       </div>
       <div v-if="selectedNode" class="p-4">
         <USeparator :label="t('webBrowsing.nodeDetails')" />
-        <h2 class="text-xl font-bold mt-2">{{ selectedNode.label }}</h2>
+        <h2 class="text-xl font-bold my-2">{{ selectedNode.label }}</h2>
 
         <!-- Root node has no additional information -->
         <p v-if="selectedNode.id === '0'">
@@ -191,15 +192,23 @@
           <h3 class="text-lg font-semibold mt-2">
             {{ t('webBrowsing.researchGoal') }}
           </h3>
-          <p class="whitespace-pre-wrap">{{ selectedNode.researchGoal }}</p>
+          <p
+            v-if="selectedNode.researchGoal"
+            class="prose max-w-none"
+            v-html="marked(selectedNode.researchGoal, { gfm: true })"
+          />
 
           <h3 class="text-lg font-semibold mt-2">
             {{ t('webBrowsing.visitedUrls') }}
           </h3>
           <ul class="list-disc list-inside">
-            <li v-for="(url, index) in selectedNode.visitedUrls" :key="index">
+            <li
+              v-for="(url, index) in selectedNode.visitedUrls"
+              class="whitespace-pre-wrap break-all"
+              :key="index"
+            >
               <UButton
-                class="!p-0 break-all whitespace-pre-wrap"
+                class="!p-0 contents"
                 variant="link"
                 :href="url"
                 target="_blank"
@@ -212,13 +221,12 @@
           <h3 class="text-lg font-semibold mt-2">
             {{ t('webBrowsing.learnings') }}
           </h3>
-          <ul class="list-disc list-inside">
-            <li
-              v-for="(learning, index) in selectedNode.learnings"
-              :key="index"
-              v-html="marked(learning)"
-            ></li>
-          </ul>
+          <p
+            v-for="(learning, index) in selectedNode.learnings"
+            class="prose max-w-none"
+            :key="index"
+            v-html="marked(`- ${learning}`, { gfm: true })"
+          />
         </template>
       </div>
     </div>

components/ResearchFeedback.vue

@@ -14,7 +14,7 @@
     (e: 'submit', feedback: ResearchFeedbackResult[]): void
   }>()
 
-  const { t } = useI18n()
+  const { t, locale } = useI18n()
   const feedback = ref<ResearchFeedbackResult[]>([])
 
   const isLoading = ref(false)
@@ -37,6 +37,7 @@
       for await (const f of generateFeedback({
         query,
         numQuestions,
+        language: t('language', {}, { locale: locale.value }),
       })) {
         const questions = f.questions!.filter((s) => typeof s === 'string')
         // Incrementally update modelValue

components/Tree.vue

@@ -27,14 +27,19 @@
   const icon = computed(() => {
     const result = { name: '', pulse: false }
     if (!props.node.status) return result
+
     switch (props.node.status) {
       case 'generating_query':
         result.name = 'i-lucide-clipboard-list'
         result.pulse = true
         break
       case 'generated_query':
-        result.name = 'i-lucide-pause'
-        break
+        // FIXME: 因为 deepResearch 有并发限制，这个 case 是为了明确区分状态。
+        // 但是目前进入这个状态之后再进入 searching 状态，图标不会更新成 search，不知道原因
+        // 暂时禁用了这个 case
+        // result.name = 'i-lucide-pause'
+        // result.pulse = true
+        // break
       case 'searching':
         result.name = 'i-lucide-search'
         result.pulse = true
@@ -70,7 +75,7 @@
     >
       {{ node.label }}
     </UButton>
-    <ol v-if="node.children.length > 0" class="flex flex-col gap-x-2">
+    <ol v-if="node.children.length > 0" class="flex flex-col gap-y-2">
       <li v-for="node in node.children" :key="node.id">
         <Tree
           class="ml-2"