From e971a61bd3cf89d13af35f1d6560960d4177ad91 Mon Sep 17 00:00:00 2001
From: AnotiaWang <anotia0202@gmail.com>
Date: Tue, 11 Feb 2025 19:26:45 +0800
Subject: [PATCH] chore: cleanup unused `ResearchStep` params

---
 components/DeepResearch.vue | 53 +++++++++++++++++++------------------
 components/Tree.vue         | 23 +++++++++-------
 lib/deep-research.ts        | 46 ++++++++++++--------------------
 3 files changed, 57 insertions(+), 65 deletions(-)

diff --git a/components/DeepResearch.vue b/components/DeepResearch.vue
index 5050284..71cfcc9 100644
--- a/components/DeepResearch.vue
+++ b/components/DeepResearch.vue
@@ -3,13 +3,11 @@
   import type { TreeNode } from './Tree.vue'
 
   const tree = ref<TreeNode>({
-    id: 'root',
+    id: '0',
     label: 'Start',
     children: [],
-    depth: 0,
-    breadth: 0,
   })
-  const hoveredNode = ref<TreeNode | null>(null)
+  const selectedNode = ref<TreeNode | null>(null)
   const searchResults = ref<Record<string, PartialSearchResult>>({})
 
   const modelValue = computed(() => Object.values(searchResults.value))
@@ -32,9 +30,6 @@
         if (!node) {
           console.error('Creating new node', {
             nodeId,
-            depth: step.depth,
-            breadth: step.breadth,
-            index: step.nodeIndex,
           })
           // 创建新节点
           node = {
@@ -43,12 +38,10 @@
             researchGoal: 'Generating research goal...',
             learnings: [],
             children: [],
-            depth: step.depth,
-            breadth: step.breadth,
-            index: step.nodeIndex,
           }
+          const parentNodeId = getParentNodeId(nodeId)
           // 如果是根节点的直接子节点
-          if (step.depth === 1) {
+          if (parentNodeId === '0') {
             tree.value.children.push(node)
           } else {
             // 找到父节点并添加
@@ -81,6 +74,7 @@
 
       case 'search_complete': {
         if (node) {
+          node.visitedUrls = step.urls
           // node.label = `Found ${step.urls.length} results for: ${node.query}`
         }
         break
@@ -90,7 +84,6 @@
         if (node) {
           node.learnings = step.result.learnings || []
           node.followUpQuestions = step.result.followUpQuestions || []
-          // node.label = `Processing results: ${node.query}`
         }
         break
       }
@@ -98,7 +91,6 @@
       case 'processed_search_result': {
         if (node) {
           node.learnings = step.result.learnings
-          // node.label = `Completed: ${node.query}`
           searchResults.value[nodeId] = step.result
         }
         break
@@ -144,9 +136,7 @@
   ) {
     console.log('startResearch', query, depth, breadth, feedback)
     tree.value.children = []
-    tree.value.depth = depth
-    tree.value.breadth = breadth
-    hoveredNode.value = null
+    selectedNode.value = null
     searchResults.value = {}
     try {
       const combinedQuery = `
@@ -178,18 +168,29 @@ ${feedback.map((qa) => `Q: ${qa.assistantQuestion}\nA: ${qa.userAnswer}`).join('
     </template>
     <div class="flex flex-col">
       <div class="overflow-y-auto">
-        <Tree :node="tree" @select="hoveredNode = $event" />
+        <Tree :node="tree" :selected-node="selectedNode" @select="selectedNode = $event" />
       </div>
-      <div v-if="hoveredNode" class="p-4">
-        <h2 class="text-xl font-bold">{{ hoveredNode.label }}</h2>
-        <h3 class="text-lg font-semibold mt-2">Research Goal:</h3>
-        <p>{{ hoveredNode.researchGoal }}</p>
-        <div v-if="hoveredNode.learnings">
-          <h3 class="text-lg font-semibold mt-2">Learnings:</h3>
-          <ul>
-            <li v-for="(learning, index) in hoveredNode.learnings" :key="index">{{ learning }}</li>
+      <div v-if="selectedNode" class="p-4">
+        <h2 class="text-xl font-bold">{{ 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>
+        <template v-else>
+          <h3 class="text-lg font-semibold mt-2">Research Goal:</h3>
+          <p>{{ selectedNode.researchGoal }}</p>
+
+          <h3 class="text-lg font-semibold mt-2">Visited URLs:</h3>
+          <ul class="list-disc list-inside">
+            <li v-for="(url, index) in selectedNode.visitedUrls" :key="index">
+              <ULink :href="url" target="_blank">{{ url }}</ULink>
+            </li>
           </ul>
-        </div>
+
+          <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>
+          </ul>
+        </template>
       </div>
     </div>
   </UCard>
diff --git a/components/Tree.vue b/components/Tree.vue
index 4859007..ff36025 100644
--- a/components/Tree.vue
+++ b/components/Tree.vue
@@ -10,18 +10,14 @@
     researchGoal?: string
     learnings?: string[]
     followUpQuestions?: string[]
+    visitedUrls?: string[]
     status?: TreeNodeStatus
     children: TreeNode[]
-    /** Current depth of the node */
-    depth: number
-    /** Maximum breadth at the current depth */
-    breadth: number
-    /** Index of the node among its siblings */
-    index?: number
   }
 
   const props = defineProps<{
     node: TreeNode
+    selectedNode: TreeNode | null
   }>()
 
   const emit = defineEmits<{
@@ -64,12 +60,19 @@
 <template>
   <div class="flex items-center gap-1">
     <UIcon name="i-lucide-circle-dot" />
-    <UButton :class="icon.pulse && 'animate-pulse'" :icon="icon.name" size="sm" color="info" @click="emit('select', node)">{{
-      node.label
-    }}</UButton>
+    <UButton
+      :class="icon.pulse && 'animate-pulse'"
+      :icon="icon.name"
+      size="sm"
+      :color="selectedNode?.id === node.id ? 'primary' : 'info'"
+      :variant="selectedNode?.id === node.id ? 'soft' : 'outline'"
+      @click="emit('select', node)"
+    >
+      {{ node.label }}
+    </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" @select="emit('select', $event)" />
+        <Tree class="ml-2" :node="node" :selected-node @select="emit('select', $event)" />
       </li>
     </ol>
   </div>
diff --git a/lib/deep-research.ts b/lib/deep-research.ts
index 4876a02..924ed4d 100644
--- a/lib/deep-research.ts
+++ b/lib/deep-research.ts
@@ -16,13 +16,13 @@ export type SearchResult = z.infer<typeof searchResultTypeSchema>;
 export type PartialSearchResult = DeepPartial<SearchResult>;
 
 export type ResearchStep =
-  | { type: 'generating_query'; result: PartialSearchQuery; depth: number; breadth: number; nodeIndex: number; nodeId: string }
-  | { type: 'generated_query'; query: string; result: PartialSearchQuery; depth: number; breadth: number; nodeIndex: number; nodeId: string }
-  | { type: 'searching'; query: string; depth: number; breadth: number; nodeIndex: number; nodeId: string }
-  | { type: 'search_complete'; query: string; urls: string[]; depth: number; breadth: number; nodeIndex: number; nodeId: string }
-  | { type: 'processing_serach_result'; query: string; result: PartialSearchResult; depth: number; breadth: number; nodeIndex: number; nodeId: string }
-  | { type: 'processed_search_result'; query: string; result: SearchResult; depth: number; breadth: number; nodeIndex: number; nodeId: string }
-  | { type: 'error'; message: string; depth: number; nodeId: string }
+  | { type: 'generating_query'; result: PartialSearchQuery; nodeId: string }
+  | { type: 'generated_query'; query: string; result: PartialSearchQuery; nodeId: string }
+  | { type: 'searching'; query: string; nodeId: string }
+  | { type: 'search_complete'; urls: string[]; nodeId: string }
+  | { type: 'processing_serach_result'; query: string; result: PartialSearchResult; nodeId: string }
+  | { type: 'processed_search_result'; query: string; result: SearchResult; nodeId: string }
+  | { type: 'error'; message: string; nodeId: string }
   | { type: 'complete' };
 
 // increase this if you have higher API rate limits
@@ -104,7 +104,6 @@ function processSearchResult({
   numFollowUpQuestions = 3,
 }: {
   query: string;
-  // result: SearchResponse;
   result: TavilySearchResponse
   numLearnings?: number;
   numFollowUpQuestions?: number;
@@ -214,9 +213,6 @@ export async function deepResearch({
           onProgress({
             type: 'generating_query',
             result: searchQueries[i],
-            depth: currentDepth,
-            breadth,
-            nodeIndex: i,
             nodeId: childNodeId(nodeId, i)
           });
         }
@@ -229,24 +225,18 @@ export async function deepResearch({
         type: 'generated_query',
         query,
         result: searchQueries[i],
-        depth: currentDepth,
-        breadth,
-        nodeIndex: i,
         nodeId: childNodeId(nodeId, i)
       });
     }
 
     await Promise.all(
-      searchQueries.map((searchQuery, nodeIndex) =>
+      searchQueries.map((searchQuery, i) =>
         limit(async () => {
           if (!searchQuery?.query) return
           onProgress({
             type: 'searching',
             query: searchQuery.query,
-            depth: currentDepth,
-            breadth,
-            nodeIndex,
-            nodeId: childNodeId(nodeId, nodeIndex)
+            nodeId: childNodeId(nodeId, i)
           })
           try {
             // const result = await firecrawl.search(searchQuery.query, {
@@ -261,6 +251,11 @@ export async function deepResearch({
 
             // Collect URLs from this search
             const newUrls = compact(result.results.map(item => item.url));
+            onProgress({
+              type: 'search_complete',
+              urls: newUrls,
+              nodeId: childNodeId(nodeId, i),
+            })
             // Breadth for the next search is half of the current breadth
             const nextBreadth = Math.ceil(breadth / 2);
 
@@ -280,11 +275,8 @@ export async function deepResearch({
               onProgress({
                 type: 'processing_serach_result',
                 result: parsedLearnings,
-                depth: currentDepth,
-                breadth: breadth,
                 query: searchQuery.query,
-                nodeIndex: nodeIndex,
-                nodeId: childNodeId(nodeId, nodeIndex)
+                nodeId: childNodeId(nodeId, i)
               });
             }
             console.log(`Processed search result for ${searchQuery.query}`, searchResult);
@@ -298,11 +290,8 @@ export async function deepResearch({
                 learnings: allLearnings,
                 followUpQuestions: searchResult.followUpQuestions ?? [],
               },
-              depth: currentDepth,
-              breadth,
               query: searchQuery.query,
-              nodeIndex: nodeIndex,
-              nodeId: childNodeId(nodeId, nodeIndex)
+              nodeId: childNodeId(nodeId, i)
             })
 
             if (nextDepth < maxDepth && searchResult.followUpQuestions?.length) {
@@ -323,7 +312,7 @@ export async function deepResearch({
                 visitedUrls: allUrls,
                 onProgress,
                 currentDepth: nextDepth,
-                nodeId: childNodeId(nodeId, nodeIndex),
+                nodeId: childNodeId(nodeId, i),
               });
             } else {
               return {
@@ -342,7 +331,6 @@ export async function deepResearch({
     onProgress({
       type: 'error',
       message: error?.message ?? 'Something went wrong',
-      depth: currentDepth,
       nodeId,
     })
   }