refactor(DeepResearch): extract node details to NodeDetail.vue

components/DeepResearch/NodeDetail.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+  import { marked } from 'marked'
+
+  import type { DeepResearchNode } from './DeepResearch.vue'
+
+  defineProps<{
+    node: DeepResearchNode
+  }>()
+
+  defineEmits<{
+    (e: 'retry', nodeId: string): void
+  }>()
+</script>
+
+<template>
+  <div class="p-4">
+    <USeparator :label="$t('webBrowsing.nodeDetails')" />
+    <UAlert
+      v-if="node.error"
+      class="my-2"
+      :title="$t('webBrowsing.nodeFailed')"
+      :description="node.error"
+      color="error"
+      variant="soft"
+      :duration="8000"
+      :actions="[
+        {
+          label: $t('webBrowsing.retry'),
+          color: 'secondary',
+          onClick: () => $emit('retry', node.id),
+        },
+      ]"
+    />
+    <h2 class="text-xl font-bold my-2">
+      {{ node.label ?? $t('webBrowsing.generating') }}
+    </h2>
+
+    <!-- Research goal -->
+    <h3 class="text-lg font-semibold mt-2">
+      {{ $t('webBrowsing.researchGoal') }}
+    </h3>
+    <!-- Root node has no additional information -->
+    <p v-if="isRootNode(node.id)">
+      {{ $t('webBrowsing.startNode.description') }}
+    </p>
+    <p
+      v-if="node.researchGoal"
+      class="prose max-w-none dark:prose-invert"
+      v-html="marked(node.researchGoal, { gfm: true })"
+    />
+
+    <!-- Visited URLs -->
+    <h3 class="text-lg font-semibold mt-2">
+      {{ $t('webBrowsing.visitedUrls') }}
+    </h3>
+    <ul v-if="node.searchResults?.length" class="list-disc list-inside">
+      <li
+        v-for="(item, index) in node.searchResults"
+        class="whitespace-pre-wrap break-all"
+        :key="index"
+      >
+        <UButton
+          class="!p-0 contents"
+          variant="link"
+          :href="item.url"
+          target="_blank"
+        >
+          {{ item.title || item.url }}
+        </UButton>
+      </li>
+    </ul>
+    <span v-else> - </span>
+
+    <!-- Learnings -->
+    <h3 class="text-lg font-semibold mt-2">
+      {{ $t('webBrowsing.learnings') }}
+    </h3>
+
+    <ReasoningAccordion
+      v-if="node.generateLearningsReasoning"
+      v-model="node.generateLearningsReasoning"
+      class="my-2"
+      :loading="
+        node.status === 'processing_serach_result_reasoning' ||
+        node.status === 'processing_serach_result'
+      "
+    />
+    <p
+      v-for="(learning, index) in node.learnings"
+      class="prose max-w-none dark:prose-invert"
+      :key="index"
+      v-html="marked(`- ${learning}`, { gfm: true })"
+    />
+    <span v-if="!node.learnings?.length"> - </span>
+
+    <!-- Follow up questions -->
+    <!-- Only show if there is reasoning content. Otherwise the follow-ups are basically just child nodes. -->
+    <template v-if="node.generateQueriesReasoning">
+      <h3 class="text-lg font-semibold my-2">
+        {{ $t('webBrowsing.followUpQuestions') }}
+      </h3>
+
+      <!-- Set loading default to true, because currently don't know how to handle it otherwise -->
+      <ReasoningAccordion
+        v-if="node.generateQueriesReasoning"
+        v-model="node.generateQueriesReasoning"
+        :loading="
+          node.status === 'generating_query_reasoning' ||
+          node.status === 'generating_query'
+        "
+      />
+    </template>
+  </div>
+</template>