refactor(DeepResearch): extract node details to NodeDetail.vue
This commit is contained in:
AnotiaWang
@ -4,7 +4,6 @@
|
|||||||
type PartialProcessedSearchResult,
|
type PartialProcessedSearchResult,
|
||||||
type ResearchStep,
|
type ResearchStep,
|
||||||
} from '~/lib/deep-research'
|
} from '~/lib/deep-research'
|
||||||
import { marked } from 'marked'
|
|
||||||
import {
|
import {
|
||||||
feedbackInjectionKey,
|
feedbackInjectionKey,
|
||||||
formInjectionKey,
|
formInjectionKey,
|
||||||
@ -12,6 +11,7 @@
|
|||||||
} from '~/constants/injection-keys'
|
} from '~/constants/injection-keys'
|
||||||
import Flow from './SearchFlow.vue'
|
import Flow from './SearchFlow.vue'
|
||||||
import SearchFlow from './SearchFlow.vue'
|
import SearchFlow from './SearchFlow.vue'
|
||||||
|
import NodeDetail from './NodeDetail.vue'
|
||||||
import { isChildNode, isParentNode, isRootNode } from '~/utils/tree-node'
|
import { isChildNode, isParentNode, isRootNode } from '~/utils/tree-node'
|
||||||
|
|
||||||
export type DeepResearchNodeStatus = Exclude<ResearchStep['type'], 'complete'>
|
export type DeepResearchNodeStatus = Exclude<ResearchStep['type'], 'complete'>
|
||||||
@ -319,112 +319,12 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="overflow-y-auto">
|
<SearchFlow
|
||||||
<SearchFlow
|
ref="flowRef"
|
||||||
ref="flowRef"
|
:selected-node-id="selectedNodeId"
|
||||||
:selected-node-id="selectedNodeId"
|
@node-click="selectNode"
|
||||||
@node-click="selectNode"
|
/>
|
||||||
/>
|
<NodeDetail v-if="selectedNode" :node="selectedNode" @retry="retryNode" />
|
||||||
</div>
|
|
||||||
<div v-if="selectedNode" class="p-4">
|
|
||||||
<USeparator :label="$t('webBrowsing.nodeDetails')" />
|
|
||||||
<UAlert
|
|
||||||
v-if="selectedNode.error"
|
|
||||||
class="my-2"
|
|
||||||
:title="$t('webBrowsing.nodeFailed')"
|
|
||||||
:description="selectedNode.error"
|
|
||||||
color="error"
|
|
||||||
variant="soft"
|
|
||||||
:duration="8000"
|
|
||||||
:actions="[{
|
|
||||||
label: $t('webBrowsing.retry'),
|
|
||||||
color: 'secondary',
|
|
||||||
onClick: () => retryNode(selectedNode!.id),
|
|
||||||
}]"
|
|
||||||
/>
|
|
||||||
<h2 class="text-xl font-bold my-2">
|
|
||||||
{{ selectedNode.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(selectedNode.id)">
|
|
||||||
{{ t('webBrowsing.startNode.description') }}
|
|
||||||
</p>
|
|
||||||
<p
|
|
||||||
v-if="selectedNode.researchGoal"
|
|
||||||
class="prose max-w-none dark:prose-invert"
|
|
||||||
v-html="marked(selectedNode.researchGoal, { gfm: true })"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Visited URLs -->
|
|
||||||
<h3 class="text-lg font-semibold mt-2">
|
|
||||||
{{ t('webBrowsing.visitedUrls') }}
|
|
||||||
</h3>
|
|
||||||
<ul
|
|
||||||
v-if="selectedNode.searchResults?.length"
|
|
||||||
class="list-disc list-inside"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
v-for="(item, index) in selectedNode.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="selectedNode.generateLearningsReasoning"
|
|
||||||
v-model="selectedNode.generateLearningsReasoning"
|
|
||||||
class="my-2"
|
|
||||||
:loading="
|
|
||||||
selectedNode.status === 'processing_serach_result_reasoning' ||
|
|
||||||
selectedNode.status === 'processing_serach_result'
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
v-for="(learning, index) in selectedNode.learnings"
|
|
||||||
class="prose max-w-none dark:prose-invert"
|
|
||||||
:key="index"
|
|
||||||
v-html="marked(`- ${learning}`, { gfm: true })"
|
|
||||||
/>
|
|
||||||
<span v-if="!selectedNode.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="selectedNode.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="selectedNode.generateQueriesReasoning"
|
|
||||||
v-model="selectedNode.generateQueriesReasoning"
|
|
||||||
:loading="
|
|
||||||
selectedNode.status === 'generating_query_reasoning' ||
|
|
||||||
selectedNode.status === 'generating_query'
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</UCard>
|
</UCard>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
114
components/DeepResearch/NodeDetail.vue
Normal file
114
components/DeepResearch/NodeDetail.vue
Normal file
@ -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>
|
||||||
Reference in New Issue
Block a user