feat: generate research report

pages/index.vue

@@ -2,11 +2,14 @@
   <div>
     <UContainer>
       <div class="max-w-4xl mx-auto py-8 space-y-4">
-        <h1 class="text-3xl font-bold text-center mb-2"> Deep Research Assistant </h1>
-        <ColorModeButton></ColorModeButton>
+        <div class="flex items-center justify-between">
+          <h1 class="text-3xl font-bold text-center mb-2"> Deep Research Assistant </h1>
+          <ColorModeButton />
+        </div>
         <ResearchForm @submit="generateFeedback" />
-        <ResearchFeedback v-model="result.feedback" ref="feedbackRef" @submit="startDeepSearch" />
-        <DeepResearch ref="deepResearchRef" class="mb-8" />
+        <ResearchFeedback ref="feedbackRef" @submit="startDeepSearch" />
+        <DeepResearch ref="deepResearchRef" @complete="generateReport" class="mb-8" />
+        <ResearchReport ref="reportRef" />
       </div>
     </UContainer>
   </div>
@@ -15,44 +18,48 @@
 <script setup lang="ts">
   import type ResearchFeedback from '~/components/ResearchFeedback.vue'
   import type DeepResearch from '~/components/DeepResearch.vue'
+  import type ResearchReport from '~/components/ResearchReport.vue'
   import type { ResearchInputData } from '~/components/ResearchForm.vue'
   import type { ResearchFeedbackResult } from '~/components/ResearchFeedback.vue'
-
-  interface DeepResearchResult {
-    feedback: Array<ResearchFeedbackResult>
-  }
+  import type { ResearchResult } from '~/lib/deep-research'
 
   useHead({
-    title: 'Deep Research Assistant - AI 深度研究助手',
-    meta: [
-      {
-        name: 'description',
-        content: '基于 AI 的深度研究助手，可以对任何主题进行迭代式深入研究',
-      },
-    ],
-  })
-
-  const inputData = ref<ResearchInputData>()
-  const result = ref<DeepResearchResult>({
-    feedback: [],
-  })
-  const searchTree = ref({
-    root: null,
-    currentDepth: 0,
-    maxDepth: 0,
-    maxBreadth: 0,
+    title: 'Deep Research Web UI',
   })
 
   const feedbackRef = ref<InstanceType<typeof ResearchFeedback>>()
   const deepResearchRef = ref<InstanceType<typeof DeepResearch>>()
+  const reportRef = ref<InstanceType<typeof ResearchReport>>()
+
+  const inputData = ref<ResearchInputData>()
+  const feedback = ref<ResearchFeedbackResult[]>([])
+  const researchResult = ref<ResearchResult>()
+
+  function getCombinedQuery() {
+    return `
+Initial Query: ${inputData.value?.query}
+Follow-up Questions and Answers:
+${feedback.value.map((qa) => `Q: ${qa.assistantQuestion}\nA: ${qa.userAnswer}`).join('\n')}
+    `
+  }
 
   async function generateFeedback(data: ResearchInputData) {
     inputData.value = data
     feedbackRef.value?.getFeedback(data.query, data.numQuestions)
   }
 
-  async function startDeepSearch() {
+  async function startDeepSearch(_feedback: ResearchFeedbackResult[]) {
     if (!inputData.value) return
-    deepResearchRef.value?.startResearch(inputData.value.query, inputData.value.breadth, inputData.value.depth, result.value.feedback)
+    feedback.value = _feedback
+    deepResearchRef.value?.startResearch(getCombinedQuery(), inputData.value.breadth, inputData.value.depth)
+  }
+
+  async function generateReport(_researchResult: ResearchResult) {
+    researchResult.value = _researchResult
+    reportRef.value?.generateReport({
+      prompt: getCombinedQuery(),
+      learnings: researchResult.value?.learnings ?? [],
+      visitedUrls: researchResult.value?.visitedUrls ?? [],
+    })
   }
 </script>