refactor: use Nuxt 4 directory structure
This commit is contained in:
AnotiaWang
419
app/components/DeepResearch/DeepResearch.vue
Normal file
419
app/components/DeepResearch/DeepResearch.vue
Normal file
@ -0,0 +1,419 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
deepResearch,
|
||||
type PartialProcessedSearchResult,
|
||||
type ProcessedSearchResult,
|
||||
type ResearchStep,
|
||||
} from '~~/lib/deep-research'
|
||||
import {
|
||||
feedbackInjectionKey,
|
||||
formInjectionKey,
|
||||
researchResultInjectionKey,
|
||||
} from '~/constants/injection-keys'
|
||||
import Flow, { type SearchNode, type SearchEdge } from './SearchFlow.vue'
|
||||
import SearchFlow from './SearchFlow.vue'
|
||||
import NodeDetail from './NodeDetail.vue'
|
||||
import { isChildNode, isParentNode, isRootNode } from '~/utils/tree-node'
|
||||
import { UCard, UModal, UButton } from '#components'
|
||||
|
||||
export type DeepResearchNodeStatus = Exclude<ResearchStep['type'], 'complete'>
|
||||
|
||||
export type DeepResearchNode = {
|
||||
id: string
|
||||
/** Label, represents the search query. Generated from parent node. */
|
||||
label: string
|
||||
/** The research goal of this node. Generated from parent node. */
|
||||
researchGoal?: string
|
||||
/** Reasoning content when generating queries for the next iteration. */
|
||||
generateQueriesReasoning?: string
|
||||
/** Reasoning content when generating learnings for this iteration. */
|
||||
generateLearningsReasoning?: string
|
||||
searchResults?: WebSearchResult[]
|
||||
/** Learnings from search results */
|
||||
learnings?: ProcessedSearchResult['learnings']
|
||||
status?: DeepResearchNodeStatus
|
||||
error?: string
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'complete'): void
|
||||
}>()
|
||||
|
||||
const toast = useToast()
|
||||
const { t, locale } = useI18n()
|
||||
const { config } = useConfigStore()
|
||||
const isLargeScreen = useMediaQuery('(min-width: 768px)')
|
||||
|
||||
const flowRef = ref<InstanceType<typeof Flow>>()
|
||||
const rootNode: DeepResearchNode = { id: '0', label: 'Start' }
|
||||
// The complete search data.
|
||||
// There's another tree stored in SearchNode.vue, with only basic data (id, status, ...)
|
||||
const nodes = ref<DeepResearchNode[]>([{ ...rootNode }])
|
||||
const selectedNodeId = ref<string>()
|
||||
const searchResults = ref<Record<string, PartialProcessedSearchResult>>({})
|
||||
const isLoading = ref(false)
|
||||
const isFullscreen = ref(false)
|
||||
// The edges and nodes of SearchFlow.vue
|
||||
// These are not managed inside SearchFlow, because here we need to switch between
|
||||
// two SearchFlows in fullscreen and non-fullscreen mode
|
||||
const flowNodes = ref<SearchNode[]>([flowRootNode()])
|
||||
const flowEdges = ref<SearchEdge[]>([])
|
||||
|
||||
const selectedNode = computed(() => {
|
||||
if (selectedNodeId.value) {
|
||||
return nodes.value.find((n) => n.id === selectedNodeId.value)
|
||||
}
|
||||
})
|
||||
|
||||
// Inject global data from index.vue
|
||||
const form = inject(formInjectionKey)!
|
||||
const feedback = inject(feedbackInjectionKey)!
|
||||
const completeResult = inject(researchResultInjectionKey)!
|
||||
|
||||
function handleResearchProgress(step: ResearchStep) {
|
||||
let node: DeepResearchNode | undefined
|
||||
let nodeId = ''
|
||||
|
||||
if (step.type !== 'complete') {
|
||||
nodeId = step.nodeId
|
||||
node = nodes.value.find((n) => n.id === nodeId)
|
||||
if (node && node.status !== step.type) {
|
||||
// FIXME: currently `node_complete` is always triggered last,
|
||||
// so error is possibly overridden
|
||||
if (node.status === 'error') {
|
||||
return
|
||||
}
|
||||
node.status = step.type
|
||||
flowRef.value?.updateNode(nodeId, {
|
||||
status: step.type,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
switch (step.type) {
|
||||
case 'generating_query_reasoning': {
|
||||
if (node) {
|
||||
node.generateQueriesReasoning =
|
||||
(node.generateQueriesReasoning ?? '') + step.delta
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'generating_query': {
|
||||
if (!node) {
|
||||
node = {
|
||||
id: nodeId,
|
||||
label: step.result.query ?? '',
|
||||
researchGoal: '',
|
||||
learnings: [],
|
||||
}
|
||||
const parentNodeId = step.parentNodeId
|
||||
nodes.value.push(node)
|
||||
flowRef.value?.addNode(
|
||||
nodeId,
|
||||
{
|
||||
title: node.label,
|
||||
status: node.status,
|
||||
},
|
||||
parentNodeId,
|
||||
)
|
||||
} else {
|
||||
if (node.label !== step.result.query) {
|
||||
flowRef.value?.updateNode(nodeId, {
|
||||
title: step.result.query ?? '',
|
||||
})
|
||||
}
|
||||
}
|
||||
// Update the node
|
||||
if (!isRootNode(node.id)) {
|
||||
node.label = step.result.query ?? ''
|
||||
node.researchGoal = step.result.researchGoal
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'generated_query': {
|
||||
console.log(`[DeepResearch] node ${nodeId} generated query:`, step)
|
||||
break
|
||||
}
|
||||
|
||||
case 'searching': {
|
||||
console.log(`[DeepResearch] node ${nodeId} searching:`, step)
|
||||
break
|
||||
}
|
||||
|
||||
case 'search_complete': {
|
||||
console.log(`[DeepResearch] node ${nodeId} search complete:`, step)
|
||||
if (node) {
|
||||
node.searchResults = step.results
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'processing_serach_result_reasoning': {
|
||||
if (node) {
|
||||
node.generateLearningsReasoning =
|
||||
(node.generateLearningsReasoning ?? '') + step.delta
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'processing_serach_result': {
|
||||
if (node) {
|
||||
node.learnings = step.result.learnings || []
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'node_complete': {
|
||||
console.log(
|
||||
`[DeepResearch] node ${nodeId} processed_search_result:`,
|
||||
step,
|
||||
)
|
||||
if (node && step.result) {
|
||||
node.learnings = step.result.learnings
|
||||
searchResults.value[nodeId] = step.result
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case 'error':
|
||||
console.error(
|
||||
`[DeepResearch] node ${nodeId} error:`,
|
||||
node,
|
||||
step.message,
|
||||
)
|
||||
node!.error = step.message
|
||||
toast.add({
|
||||
title: t('webBrowsing.nodeFailedToast', {
|
||||
label: node!.label ?? nodeId,
|
||||
}),
|
||||
description: step.message,
|
||||
color: 'error',
|
||||
duration: 8000,
|
||||
})
|
||||
break
|
||||
|
||||
case 'complete':
|
||||
console.log(`[DeepResearch] complete:`, step)
|
||||
completeResult.value = {
|
||||
learnings: step.learnings,
|
||||
}
|
||||
emit('complete')
|
||||
isLoading.value = false
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function selectNode(nodeId: string) {
|
||||
if (selectedNodeId.value === nodeId) {
|
||||
selectedNodeId.value = undefined
|
||||
} else {
|
||||
selectedNodeId.value = nodeId
|
||||
flowRef.value?.layoutGraph(true)
|
||||
}
|
||||
}
|
||||
|
||||
// The default root node for SearchFlow
|
||||
function flowRootNode(): SearchNode {
|
||||
return {
|
||||
id: '0',
|
||||
data: { title: 'Start' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'search', // We only have this type
|
||||
}
|
||||
}
|
||||
|
||||
async function startResearch(retryNode?: DeepResearchNode) {
|
||||
if (!form.value.query || !form.value.breadth || !form.value.depth) return
|
||||
|
||||
// Clear all nodes if it's not a retry
|
||||
if (!retryNode) {
|
||||
nodes.value = [{ ...rootNode }]
|
||||
selectedNodeId.value = undefined
|
||||
searchResults.value = {}
|
||||
flowNodes.value = [flowRootNode()]
|
||||
flowEdges.value = []
|
||||
isLoading.value = true
|
||||
// Wait for the nodes and edges to reflect to `SearchFlow.vue`
|
||||
nextTick(() => {
|
||||
flowRef.value?.reset()
|
||||
})
|
||||
}
|
||||
|
||||
// Wait after the flow is cleared
|
||||
await new Promise((r) => requestAnimationFrame(r))
|
||||
|
||||
try {
|
||||
let query = getCombinedQuery(form.value, feedback.value)
|
||||
let existingLearnings: ProcessedSearchResult['learnings'] = []
|
||||
let currentDepth = 1
|
||||
let breadth = form.value.breadth
|
||||
|
||||
if (retryNode) {
|
||||
query = retryNode.label
|
||||
// Set the search depth and breadth to its parent's
|
||||
if (!isRootNode(retryNode.id)) {
|
||||
const parentId = parentNodeId(retryNode.id)!
|
||||
currentDepth = nodeDepth(parentId)
|
||||
breadth = searchBreadth(breadth, parentId)
|
||||
}
|
||||
// Collect all parent nodes' learnings and visitedUrls
|
||||
const parentNodes = nodes.value.filter((n) =>
|
||||
isParentNode(n.id, retryNode.id),
|
||||
)
|
||||
existingLearnings = parentNodes
|
||||
.flatMap((n) => n.learnings || [])
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
await deepResearch({
|
||||
query,
|
||||
retryNode,
|
||||
currentDepth,
|
||||
breadth,
|
||||
maxDepth: form.value.depth,
|
||||
languageCode: locale.value,
|
||||
searchLanguageCode: config.webSearch.searchLanguage,
|
||||
learnings: existingLearnings,
|
||||
onProgress: handleResearchProgress,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Research failed:', error)
|
||||
} finally {
|
||||
if (!retryNode) {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function retryNode(nodeId: string) {
|
||||
console.log('[DeepResearch] retryNode', nodeId, isLoading.value)
|
||||
if (!nodeId || isLoading.value) return
|
||||
|
||||
// Remove all child nodes first
|
||||
nodes.value = nodes.value.filter((n) => !isChildNode(nodeId, n.id))
|
||||
flowRef.value?.removeChildNodes(nodeId)
|
||||
|
||||
const node = nodes.value.find((n) => n.id === nodeId)
|
||||
// Take a clone of the node
|
||||
// Used in `deepResearch()` to access the node's original query and searchGoal
|
||||
let nodeCurrentData: DeepResearchNode | undefined
|
||||
|
||||
if (node) {
|
||||
nodeCurrentData = { ...node }
|
||||
node.status = undefined
|
||||
node.error = undefined
|
||||
node.searchResults = undefined
|
||||
node.learnings = undefined
|
||||
node.generateLearningsReasoning = undefined
|
||||
node.generateQueriesReasoning = undefined
|
||||
|
||||
// Remove related search results
|
||||
delete searchResults.value[nodeId]
|
||||
Object.keys(searchResults.value).forEach((key) => {
|
||||
if (isChildNode(nodeId, key)) {
|
||||
delete searchResults.value[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
await startResearch(nodeCurrentData)
|
||||
}
|
||||
|
||||
let scrollY = 0
|
||||
|
||||
function toggleFullscreen() {
|
||||
// Because changing `isFullscreen` causes the height of the page to change (UCard disappears and appears)
|
||||
// so we should scroll back to the last position after exiting fullscreen mode.
|
||||
if (!isFullscreen.value) {
|
||||
scrollY = window.scrollY
|
||||
} else {
|
||||
requestAnimationFrame(() => {
|
||||
window.scrollTo({ top: scrollY })
|
||||
})
|
||||
}
|
||||
isFullscreen.value = !isFullscreen.value
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
startResearch,
|
||||
isLoading,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal v-if="isFullscreen" open fullscreen :ui="{ body: '!pr-0' }">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="font-bold">{{ t('webBrowsing.title') }}</h2>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ t('webBrowsing.clickToView') }}
|
||||
</p>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-heroicons-arrows-pointing-out"
|
||||
:variant="isFullscreen ? 'solid' : 'ghost'"
|
||||
:color="isFullscreen ? 'primary' : 'info'"
|
||||
@click="toggleFullscreen"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<div :class="['flex h-full', !isLargeScreen && 'flex-col']">
|
||||
<div class="flex-1">
|
||||
<SearchFlow
|
||||
ref="flowRef"
|
||||
v-model:nodes="flowNodes"
|
||||
v-model:edges="flowEdges"
|
||||
:selected-node-id="selectedNodeId"
|
||||
fullscreen
|
||||
@node-click="selectNode"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedNode"
|
||||
:class="[
|
||||
'border-gray-100 dark:border-gray-800 px-4 sm:px-6 overflow-y-auto',
|
||||
isLargeScreen ? 'border-l w-1/3' : 'h-1/2 pt-2',
|
||||
]"
|
||||
>
|
||||
<NodeDetail :node="selectedNode" @retry="retryNode" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<UCard v-if="!isFullscreen">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="font-bold">{{ t('webBrowsing.title') }}</h2>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ t('webBrowsing.description') }}
|
||||
<br />
|
||||
{{ t('webBrowsing.clickToView') }}
|
||||
</p>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-heroicons-arrows-pointing-out"
|
||||
variant="ghost"
|
||||
color="info"
|
||||
@click="toggleFullscreen"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col">
|
||||
<SearchFlow
|
||||
ref="flowRef"
|
||||
v-model:nodes="flowNodes"
|
||||
v-model:edges="flowEdges"
|
||||
:selected-node-id="selectedNodeId"
|
||||
@node-click="selectNode"
|
||||
/>
|
||||
<NodeDetail v-if="selectedNode" :node="selectedNode" @retry="retryNode" />
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
113
app/components/DeepResearch/NodeDetail.vue
Normal file
113
app/components/DeepResearch/NodeDetail.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<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>
|
||||
<USeparator :label="$t('webBrowsing.nodeDetails')" />
|
||||
<UAlert
|
||||
v-if="node.error"
|
||||
class="my-2"
|
||||
:title="$t('webBrowsing.nodeFailed')"
|
||||
:description="node.error"
|
||||
color="error"
|
||||
variant="soft"
|
||||
: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 break-words"
|
||||
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 break-words"
|
||||
:key="index"
|
||||
v-html="marked(`- ${learning.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>
|
||||
169
app/components/DeepResearch/SearchFlow.vue
Normal file
169
app/components/DeepResearch/SearchFlow.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<script setup lang="ts">
|
||||
import '@vue-flow/core/dist/style.css'
|
||||
import '@vue-flow/core/dist/theme-default.css'
|
||||
import '@vue-flow/controls/dist/style.css'
|
||||
import SearchNode from './SearchNode.vue'
|
||||
import {
|
||||
type Edge,
|
||||
type FlowEvents,
|
||||
type Node,
|
||||
VueFlow,
|
||||
useVueFlow,
|
||||
getNodesInside,
|
||||
} from '@vue-flow/core'
|
||||
import { Background } from '@vue-flow/background'
|
||||
import { Controls } from '@vue-flow/controls'
|
||||
import type { DeepResearchNodeStatus } from './DeepResearch.vue'
|
||||
|
||||
export interface SearchNodeData {
|
||||
title: string
|
||||
status?: DeepResearchNodeStatus
|
||||
}
|
||||
export type SearchNode = Node<SearchNodeData>
|
||||
export type SearchEdge = Edge<SearchNodeData>
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'node-click', nodeId: string): void
|
||||
}>()
|
||||
|
||||
const props = defineProps<{
|
||||
selectedNodeId?: string
|
||||
fullscreen?: boolean
|
||||
}>()
|
||||
|
||||
const nodes = defineModel<SearchNode[]>('nodes', { required: true })
|
||||
const edges = defineModel<SearchEdge[]>('edges', { required: true })
|
||||
|
||||
const isLargeScreen = useMediaQuery('(min-width: 768px)')
|
||||
const {
|
||||
addNodes: addFlowNodes,
|
||||
addEdges: addFlowEdges,
|
||||
updateNodeData: updateFlowNodeData,
|
||||
fitView,
|
||||
viewport,
|
||||
vueFlowRef,
|
||||
} = useVueFlow()
|
||||
const { layout } = useNodeLayout()
|
||||
|
||||
let hasUserInteraction = false
|
||||
|
||||
function handleNodeClick(nodeId: string) {
|
||||
emit('node-click', nodeId)
|
||||
}
|
||||
|
||||
function layoutGraph(force = false) {
|
||||
nodes.value = layout(nodes.value, edges.value)
|
||||
if (!hasUserInteraction || force) {
|
||||
// Wait a bit for the viewport to update after resize
|
||||
setTimeout(() => {
|
||||
// If a node is selected and is outside the viewport, move it to the viewport
|
||||
if (props.selectedNodeId) {
|
||||
const rect = vueFlowRef.value?.getBoundingClientRect()
|
||||
if (!rect) return
|
||||
|
||||
const nodesInViewport = getNodesInside(
|
||||
// @ts-ignore
|
||||
nodes.value,
|
||||
rect,
|
||||
viewport.value,
|
||||
)
|
||||
|
||||
if (!nodesInViewport.some((n) => n.id === props.selectedNodeId)) {
|
||||
fitView({ nodes: [props.selectedNodeId], maxZoom: 1.3 })
|
||||
}
|
||||
} else {
|
||||
fitView({ maxZoom: 1.4 })
|
||||
}
|
||||
}, 10)
|
||||
}
|
||||
}
|
||||
|
||||
function addNode(nodeId: string, data: SearchNodeData, parentId?: string) {
|
||||
addFlowNodes({
|
||||
id: nodeId,
|
||||
data,
|
||||
position: { ...{ x: 0, y: 0 } },
|
||||
type: 'search',
|
||||
})
|
||||
|
||||
if (parentId) {
|
||||
addFlowEdges({
|
||||
id: `e:${parentId}:${nodeId}`,
|
||||
source: parentId,
|
||||
target: nodeId,
|
||||
})
|
||||
}
|
||||
|
||||
layoutGraph()
|
||||
}
|
||||
|
||||
function updateNode(nodeId: string, data: Partial<SearchNodeData>) {
|
||||
updateFlowNodeData(nodeId, data)
|
||||
layoutGraph()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
layoutGraph()
|
||||
hasUserInteraction = false
|
||||
}
|
||||
|
||||
function isChildNode(parentId: string, childId: string) {
|
||||
return childId.length > parentId.length && childId.startsWith(parentId)
|
||||
}
|
||||
|
||||
function removeChildNodes(parentId: string) {
|
||||
const childNodes = nodes.value.filter((n) => isChildNode(parentId, n.id))
|
||||
childNodes.forEach((node) => {
|
||||
// 移除节点和相关的边
|
||||
nodes.value = nodes.value.filter((n) => n.id !== node.id)
|
||||
edges.value = edges.value.filter(
|
||||
(e) => e.source !== node.id && e.target !== node.id,
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
function handleDrag(e: PointerEvent | FlowEvents['move']) {
|
||||
// Triggered by VueFlow internal logic
|
||||
if ('event' in e && !e.event.sourceEvent) {
|
||||
return
|
||||
}
|
||||
|
||||
hasUserInteraction = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
addNode,
|
||||
updateNode,
|
||||
reset,
|
||||
removeChildNodes,
|
||||
layoutGraph,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly fallback-tag="span" fallback="Loading graph...">
|
||||
<div :class="[fullscreen ? 'h-full' : isLargeScreen ? 'h-100' : 'h-60']">
|
||||
<VueFlow
|
||||
v-model:nodes="nodes"
|
||||
v-model:edges="edges"
|
||||
:edges-updatable="false"
|
||||
:min-zoom="0.5"
|
||||
:max-zoom="isLargeScreen ? 2.5 : 1.8"
|
||||
:default-edge-options="{ animated: true }"
|
||||
@nodes-initialized="layoutGraph"
|
||||
@move="handleDrag"
|
||||
>
|
||||
<template #node-search="props">
|
||||
<SearchNode
|
||||
:data="props.data"
|
||||
:selected="selectedNodeId === props.id"
|
||||
@click="handleNodeClick(props.id)"
|
||||
@pointerdown="handleDrag"
|
||||
/>
|
||||
</template>
|
||||
<Background />
|
||||
<Controls @fit-view="hasUserInteraction = false" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
77
app/components/DeepResearch/SearchNode.vue
Normal file
77
app/components/DeepResearch/SearchNode.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import type { ButtonProps } from '@nuxt/ui'
|
||||
import type { SearchNodeData } from './SearchFlow.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
data: SearchNodeData
|
||||
selected?: boolean
|
||||
}>()
|
||||
|
||||
const theme = computed(() => {
|
||||
const result = {
|
||||
icon: '',
|
||||
pulse: false,
|
||||
color: 'info' as ButtonProps['color'],
|
||||
}
|
||||
if (!props.data?.status) return result
|
||||
|
||||
switch (props.data.status) {
|
||||
case 'generating_query':
|
||||
case 'generating_query_reasoning':
|
||||
result.icon = 'i-lucide-clipboard-list'
|
||||
result.pulse = true
|
||||
break
|
||||
case 'generated_query':
|
||||
result.icon = 'i-lucide-circle-pause'
|
||||
break
|
||||
case 'searching':
|
||||
result.icon = 'i-lucide-search'
|
||||
result.pulse = true
|
||||
break
|
||||
case 'search_complete':
|
||||
result.icon = 'i-lucide-search-check'
|
||||
break
|
||||
case 'processing_serach_result':
|
||||
case 'processing_serach_result_reasoning':
|
||||
result.icon = 'i-lucide-brain'
|
||||
result.pulse = true
|
||||
break
|
||||
case 'node_complete':
|
||||
result.icon = 'i-lucide-circle-check-big'
|
||||
break
|
||||
case 'error':
|
||||
result.icon = 'i-lucide-octagon-x'
|
||||
result.color = 'error'
|
||||
break
|
||||
}
|
||||
return result
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton
|
||||
class="process-node"
|
||||
:class="[theme.pulse && 'animate-pulse', 'max-w-90']"
|
||||
:color="selected ? 'primary' : theme.color"
|
||||
:variant="selected ? 'soft' : 'outline'"
|
||||
:icon="theme.icon"
|
||||
size="sm"
|
||||
>
|
||||
<Handle type="target" :position="Position.Left" />
|
||||
<Handle type="source" :position="Position.Right" />
|
||||
|
||||
{{ data.title }}
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Hide the handles */
|
||||
.process-node .vue-flow__handle {
|
||||
border: none;
|
||||
height: unset;
|
||||
width: unset;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user