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">
+          <p
-            <li
+            v-for="(learning, index) in selectedNode.learnings"
-              v-for="(learning, index) in selectedNode.learnings"
+            class="prose max-w-none"
-              :key="index"
+            :key="index"
-              v-html="marked(learning)"
+            v-html="marked(`- ${learning}`, { gfm: true })"
-            ></li>
+          />
-          </ul>
         </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'
+        // FIXME: 因为 deepResearch 有并发限制，这个 case 是为了明确区分状态。
-        break
+        // 但是目前进入这个状态之后再进入 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"

lib/deep-research.ts

@@ -4,7 +4,7 @@ import { z } from 'zod'
 import { parseStreamingJson, type DeepPartial } from '~/utils/json'
 
 import { trimPrompt } from './ai/providers'
-import { systemPrompt } from './prompt'
+import { languagePrompt, systemPrompt } from './prompt'
 import zodToJsonSchema from 'zod-to-json-schema'
 import { type TavilySearchResponse } from '@tavily/core'
 import { useTavily } from '~/composables/useTavily'
@@ -18,6 +18,7 @@ export type ResearchResult = {
 export interface WriteFinalReportParams {
   prompt: string
   learnings: string[]
+  language: string
 }
 // useRuntimeConfig()
 // Used for streaming response
@@ -71,8 +72,10 @@ export function generateSearchQueries({
   query,
   numQueries = 3,
   learnings,
+  language,
 }: {
   query: string
+  language: string
   numQueries?: number
   // optional, if provided, the research will continue from the last learning
   learnings?: string[]
@@ -101,6 +104,7 @@ export function generateSearchQueries({
         )}`
       : '',
     `You MUST respond in JSON with the following schema: ${jsonSchema}`,
+    languagePrompt(language),
   ].join('\n\n')
   return streamText({
     model: useAiModel(),
@@ -118,9 +122,11 @@ function processSearchResult({
   result,
   numLearnings = 3,
   numFollowUpQuestions = 3,
+  language,
 }: {
   query: string
   result: TavilySearchResponse
+  language: string
   numLearnings?: number
   numFollowUpQuestions?: number
 }) {
@@ -135,15 +141,17 @@ function processSearchResult({
       ),
   })
   const jsonSchema = JSON.stringify(zodToJsonSchema(schema))
-  const contents = result.results.map((item) => item.content).filter(Boolean).map(
+  const contents = result.results
-    (content) => trimPrompt(content, 25_000),
+    .map((item) => item.content)
-  )
+    .filter(Boolean)
+    .map((content) => trimPrompt(content, 25_000))
   const prompt = [
     `Given the following contents from a SERP search for the query <query>${query}</query>, generate a list of learnings from the contents. Return a maximum of ${numLearnings} learnings, but feel free to return less if the contents are clear. Make sure each learning is unique and not similar to each other. The learnings should be concise and to the point, as detailed and information dense as possible. Make sure to include any entities like people, places, companies, products, things, etc in the learnings, as well as any exact metrics, numbers, or dates. The learnings will be used to research the topic further.`,
     `<contents>${contents
       .map((content) => `<content>\n${content}\n</content>`)
       .join('\n')}</contents>`,
     `You MUST respond in JSON with the following schema: ${jsonSchema}`,
+    languagePrompt(language),
   ].join('\n\n')
 
   return streamText({
@@ -157,6 +165,7 @@ function processSearchResult({
 export function writeFinalReport({
   prompt,
   learnings,
+  language,
 }: WriteFinalReportParams) {
   const learningsString = trimPrompt(
     learnings
@@ -169,7 +178,8 @@ export function writeFinalReport({
     `<prompt>${prompt}</prompt>`,
     `Here are all the learnings from previous research:`,
     `<learnings>\n${learningsString}\n</learnings>`,
-    `Write the report in Markdown.`,
+    `Write the report using Markdown.`,
+    languagePrompt(language),
     `## Deep Research Report`,
   ].join('\n\n')
 
@@ -188,6 +198,7 @@ export async function deepResearch({
   query,
   breadth,
   maxDepth,
+  language,
   learnings = [],
   visitedUrls = [],
   onProgress,
@@ -197,6 +208,7 @@ export async function deepResearch({
   query: string
   breadth: number
   maxDepth: number
+  language: string
   learnings?: string[]
   visitedUrls?: string[]
   onProgress: (step: ResearchStep) => void
@@ -208,6 +220,7 @@ export async function deepResearch({
       query,
       learnings,
       numQueries: breadth,
+      language,
     })
     const limit = pLimit(ConcurrencyLimit)
 
@@ -242,22 +255,18 @@ export async function deepResearch({
     const results = await Promise.all(
       searchQueries.map((searchQuery, i) =>
         limit(async () => {
-          if (!searchQuery?.query)
+          if (!searchQuery?.query) {
             return {
               learnings: [],
               visitedUrls: [],
             }
+          }
           onProgress({
             type: 'searching',
             query: searchQuery.query,
             nodeId: childNodeId(nodeId, i),
           })
           try {
-            // const result = await firecrawl.search(searchQuery.query, {
-            //   timeout: 15000,
-            //   limit: 5,
-            //   scrapeOptions: { formats: ['markdown'] },
-            // });
             const result = await useTavily().search(searchQuery.query, {
               maxResults: 5,
             })
@@ -266,7 +275,9 @@ export async function deepResearch({
             )
 
             // Collect URLs from this search
-            const newUrls = result.results.map((item) => item.url).filter(Boolean)
+            const newUrls = result.results
+              .map((item) => item.url)
+              .filter(Boolean)
             onProgress({
               type: 'search_complete',
               urls: newUrls,
@@ -279,6 +290,7 @@ export async function deepResearch({
               query: searchQuery.query,
               result,
               numFollowUpQuestions: nextBreadth,
+              language,
             })
             let searchResult: PartialSearchResult = {}
 
@@ -317,7 +329,7 @@ export async function deepResearch({
             })
 
             if (
-              nextDepth < maxDepth &&
+              nextDepth <= maxDepth &&
               searchResult.followUpQuestions?.length
             ) {
               console.warn(
@@ -340,6 +352,7 @@ export async function deepResearch({
                 onProgress,
                 currentDepth: nextDepth,
                 nodeId: childNodeId(nodeId, i),
+                language,
               })
             } else {
               return {

lib/feedback.ts

@@ -2,7 +2,7 @@ import { streamText } from 'ai'
 import { z } from 'zod'
 import { zodToJsonSchema } from 'zod-to-json-schema'
 
-import { systemPrompt } from './prompt'
+import { languagePrompt, systemPrompt } from './prompt'
 import { useAiModel } from '~/composables/useAiProvider'
 
 type PartialFeedback = DeepPartial<z.infer<typeof feedbackTypeSchema>>
@@ -13,9 +13,11 @@ export const feedbackTypeSchema = z.object({
 
 export function generateFeedback({
   query,
+  language,
   numQuestions = 3,
 }: {
   query: string
+  language: string
   numQuestions?: number
 }) {
   const schema = z.object({
@@ -27,6 +29,7 @@ export function generateFeedback({
   const prompt = [
     `Given the following query from the user, ask ${numQuestions} follow up questions to clarify the research direction. Return a maximum of ${numQuestions} questions, but feel free to return less if the original query is clear: <query>${query}</query>`,
     `You MUST respond in JSON with the following schema: ${jsonSchema}`,
+    languagePrompt(language),
   ].join('\n\n')
 
   const stream = streamText({

lib/prompt.ts

@@ -13,3 +13,18 @@ export const systemPrompt = () => {
   - Consider new technologies and contrarian ideas, not just the conventional wisdom.
   - You may use high levels of speculation or prediction, just flag it for me.`
 }
+
+/**
+ * Construct the language requirement prompt for LLMs.
+ * Placing this at the end of the prompt makes it easier for the LLM to pay attention to.
+ * @param language the language of the prompt, e.g. `English`
+ */
+export const languagePrompt = (language: string) => {
+  let languagePrompt = `- Respond in ${language}.`
+
+  if (language === '中文') {
+    languagePrompt +=
+      ' Add appropriate spaces between Chinese and Latin characters / numbers to improve readability.'
+  }
+  return languagePrompt
+}

pages/index.vue

@@ -54,7 +54,7 @@
   import type { ResearchFeedbackResult } from '~/components/ResearchFeedback.vue'
   import type { ResearchResult } from '~/lib/deep-research'
 
-  const { t } = useI18n()
+  const { t, locale } = useI18n()
   const { config } = useConfigStore()
   const toast = useToast()
 
@@ -113,6 +113,7 @@ ${feedback.value
       prompt: getCombinedQuery(),
       learnings: researchResult.value?.learnings ?? [],
       visitedUrls: researchResult.value?.visitedUrls ?? [],
+      language: t('language', {}, { locale: locale.value }),
     })
   }
 </script>

utils/json.ts

@@ -37,15 +37,15 @@ export async function* parseStreamingJson<T extends z.ZodType>(
   let isParseSuccessful = false
 
   for await (const chunk of textStream) {
-    rawText = removeJsonMarkdown(rawText + chunk)
+    rawText += chunk
-    const parsed = parsePartialJson(rawText)
+    const parsed = parsePartialJson(removeJsonMarkdown(rawText))
 
     isParseSuccessful =
       parsed.state === 'repaired-parse' || parsed.state === 'successful-parse'
     if (isParseSuccessful && isValid(parsed.value as any)) {
       yield parsed.value as DeepPartial<z.infer<T>>
     } else {
-      console.dir(parsed, { depth: null, colors: true })
+      console.debug(`Failed to parse JSON:`, rawText)
     }
   }