feat: agent node
This commit is contained in:
203
frontend/src/components/nodes/AgentNode.tsx
Normal file
203
frontend/src/components/nodes/AgentNode.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
import {
|
||||
AbstractNodeProps,
|
||||
createAbstractNodeComponent,
|
||||
useAbstractNode,
|
||||
} from '@/lib/abstractNode'
|
||||
import { getConfigContent } from '@/lib/configTypes'
|
||||
import {
|
||||
BaseNode,
|
||||
BaseNodeContent,
|
||||
BaseNodeFooter,
|
||||
BaseNodeHeaderRow,
|
||||
} from '@/components/base/BaseNode'
|
||||
import { NodeMenubar } from '@/components/base/NodeMenubar'
|
||||
import { NodeFooterEdgeIndicators } from '@/components/base/NodeFooterEdgeIndicators'
|
||||
import { NodeHeaderTitle } from '@/components/base/NodeHeaderTitle'
|
||||
import { InputHandle, OutputHandle } from '@/components/base/NodeHandles'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { usePlatform } from '@/app/platform/platformContext'
|
||||
import { Bot, Play, Loader2 } from 'lucide-react'
|
||||
|
||||
export type AgentNodeData = {
|
||||
context?: string
|
||||
outputMarkdown?: string
|
||||
error?: string
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
type Props = AbstractNodeProps<AgentNodeData>
|
||||
|
||||
function serializeNodeForContext(nodes: { id: string; type?: string; data?: unknown }[], nodeId: string): string {
|
||||
const node = nodes.find((n: { id: string }) => n.id === nodeId)
|
||||
if (!node) return `${nodeId}: (not found)`
|
||||
const type = node.type ?? 'unknown'
|
||||
const data = node.data as Record<string, unknown> | undefined
|
||||
if (type === 'config') {
|
||||
const content = getConfigContent(data)
|
||||
return `[config ${nodeId}]\n${content || '(empty)'}`
|
||||
}
|
||||
if (type === 'variable') {
|
||||
const v = data?.value
|
||||
return `[variable ${nodeId}]: ${v === undefined || v === null ? '' : String(v)}`
|
||||
}
|
||||
if (type === 'data') {
|
||||
const rows = (data?.rows as Record<string, string>[] | undefined) ?? []
|
||||
const columns = (data?.columns as string[] | undefined) ?? []
|
||||
const preview = rows.slice(0, 20).map((r) => columns.map((c) => r[c] ?? '').join(', ')).join('\n')
|
||||
return `[data ${nodeId}] ${columns.length} columns, ${rows.length} rows\n${preview}${rows.length > 20 ? '\n...' : ''}`
|
||||
}
|
||||
return `[${type} ${nodeId}]: ${JSON.stringify(data ?? {}).slice(0, 200)}`
|
||||
}
|
||||
|
||||
function AgentNodeComponent({ id, data, width, height, selected }: Props) {
|
||||
const { nodes, sourceIds, updateData } = useAbstractNode<AgentNodeData>(id, data ?? {})
|
||||
const { aiConnection } = usePlatform()
|
||||
const [running, setRunning] = useState(false)
|
||||
|
||||
const dimensions =
|
||||
width != null && height != null && width > 0 && height > 0
|
||||
? { width, height }
|
||||
: undefined
|
||||
|
||||
const contextText = data?.context ?? ''
|
||||
const outputMarkdown = data?.outputMarkdown
|
||||
const error = data?.error
|
||||
const loading = data?.loading ?? false
|
||||
|
||||
const connectedSources = useMemo(() => {
|
||||
return sourceIds.map((sid) => {
|
||||
const node = nodes.find((n: { id: string }) => n.id === sid)
|
||||
return { id: sid, type: (node as { type?: string } | undefined)?.type ?? 'unknown' }
|
||||
})
|
||||
}, [sourceIds, nodes])
|
||||
|
||||
const runAgent = useCallback(async () => {
|
||||
const configContents = sourceIds
|
||||
.filter((sid) => {
|
||||
const n = nodes.find((n: { id: string }) => n.id === sid)
|
||||
return (n as { type?: string } | undefined)?.type === 'config'
|
||||
})
|
||||
.map((sid) => getConfigContent((nodes.find((n: { id: string }) => n.id === sid)?.data ?? undefined) as Record<string, unknown> | undefined))
|
||||
const prompt = configContents.length > 0 ? configContents.join('\n\n---\n\n') : 'No prompt provided. Please describe what you want in structured markdown.'
|
||||
const contextNodes = sourceIds.map((sid) => ({ id: sid, content: serializeNodeForContext(nodes, sid) }))
|
||||
|
||||
updateData({ error: undefined, loading: true })
|
||||
setRunning(true)
|
||||
try {
|
||||
const res = await fetch('/api/agent', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
prompt,
|
||||
context: contextText.trim() || undefined,
|
||||
contextNodes,
|
||||
connection: aiConnection,
|
||||
}),
|
||||
})
|
||||
const json = await res.json().catch(() => ({}))
|
||||
if (!res.ok) {
|
||||
updateData({
|
||||
loading: false,
|
||||
error: (json as { error?: string }).error ?? `Request failed: ${res.status}`,
|
||||
outputMarkdown: undefined,
|
||||
})
|
||||
return
|
||||
}
|
||||
const markdown = (json as { markdown?: string }).markdown ?? ''
|
||||
updateData({ loading: false, error: undefined, outputMarkdown: markdown })
|
||||
} catch (err: unknown) {
|
||||
updateData({
|
||||
loading: false,
|
||||
error: err instanceof Error ? err.message : 'Agent request failed',
|
||||
outputMarkdown: undefined,
|
||||
})
|
||||
} finally {
|
||||
setRunning(false)
|
||||
}
|
||||
}, [sourceIds, nodes, contextText, updateData, aiConnection])
|
||||
|
||||
const onContextChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLTextAreaElement>) => updateData({ context: e.target.value }),
|
||||
[updateData]
|
||||
)
|
||||
|
||||
return (
|
||||
<BaseNode
|
||||
className="min-w-[360px] min-h-[320px]"
|
||||
dimensions={dimensions}
|
||||
selected={selected}
|
||||
handles={
|
||||
<>
|
||||
<InputHandle id="in" nodeId={id} />
|
||||
<OutputHandle id="out" />
|
||||
</>
|
||||
}
|
||||
>
|
||||
<BaseNodeHeaderRow
|
||||
icon={<Bot className="size-4" />}
|
||||
title={<NodeHeaderTitle nodeId={id} displayTitle={id} />}
|
||||
/>
|
||||
<BaseNodeContent>
|
||||
<div className="shrink-0 w-full">
|
||||
<NodeMenubar nodeId={id} nodeType="agent" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 p-2 min-h-0 flex-1">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs font-medium text-foreground">Context</label>
|
||||
<textarea
|
||||
className="nodrag nopan w-full min-h-[72px] rounded-md border border-input bg-background px-2 py-1.5 text-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
placeholder="Additional context for the agent…"
|
||||
value={contextText}
|
||||
onChange={onContextChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-xs font-medium text-foreground">Context from connected nodes</span>
|
||||
{connectedSources.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">Connect Config, Variable, or Data nodes as input.</p>
|
||||
) : (
|
||||
<ul className="text-xs text-muted-foreground list-disc list-inside space-y-0.5">
|
||||
{connectedSources.map(({ id: sid, type }) => (
|
||||
<li key={sid}>
|
||||
<code className="rounded bg-muted px-1">{sid}</code> ({type})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="w-fit"
|
||||
onClick={runAgent}
|
||||
disabled={running || loading}
|
||||
>
|
||||
{running || loading ? (
|
||||
<Loader2 className="size-3.5 mr-1.5 animate-spin" />
|
||||
) : (
|
||||
<Play className="size-3.5 mr-1.5" />
|
||||
)}
|
||||
Run
|
||||
</Button>
|
||||
{error && (
|
||||
<p className="text-xs text-destructive">{error}</p>
|
||||
)}
|
||||
{outputMarkdown != null && outputMarkdown !== '' && !error && (
|
||||
<div className="text-xs text-muted-foreground border rounded p-2 max-h-24 overflow-auto">
|
||||
<span className="font-medium">Output:</span> {outputMarkdown.length} chars (connect to Renderer to view)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</BaseNodeContent>
|
||||
<BaseNodeFooter>
|
||||
<NodeFooterEdgeIndicators nodeId={id} nodeType="agent">
|
||||
{outputMarkdown != null ? `${outputMarkdown.length} chars` : error ? 'Error' : '—'}
|
||||
</NodeFooterEdgeIndicators>
|
||||
</BaseNodeFooter>
|
||||
</BaseNode>
|
||||
)
|
||||
}
|
||||
|
||||
export const AgentNode = createAbstractNodeComponent<AgentNodeData>('AgentNode', AgentNodeComponent)
|
||||
export default AgentNode
|
||||
@@ -64,10 +64,12 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
|
||||
const incomingIds = sourceIds
|
||||
const srcId = incomingIds.length > 0 ? incomingIds[0] : null
|
||||
const srcNode = nodes.find((n: any) => n.id === srcId)
|
||||
const configTypeId = srcNode?.type === 'config' ? getConfigTypeId((srcNode.data ?? undefined) as Record<string, unknown> | undefined) : 'plantuml'
|
||||
const isAgentSource = srcNode?.type === 'agent'
|
||||
const agentOutputMarkdown = isAgentSource ? ((srcNode.data as { outputMarkdown?: string })?.outputMarkdown ?? '') : ''
|
||||
const configTypeId = srcNode?.type === 'config' ? getConfigTypeId((srcNode.data ?? undefined) as Record<string, unknown> | undefined) : isAgentSource ? 'markdown' : 'plantuml'
|
||||
const configType = getConfigType(configTypeId)
|
||||
const outputType = configType.outputType
|
||||
const sourceContent = srcNode?.type === 'config' ? getConfigContent((srcNode.data ?? undefined) as Record<string, unknown> | undefined) : ''
|
||||
const sourceContent = srcNode?.type === 'config' ? getConfigContent((srcNode.data ?? undefined) as Record<string, unknown> | undefined) : isAgentSource ? agentOutputMarkdown : ''
|
||||
const srcData = srcNode?.data ?? {}
|
||||
|
||||
/** Set of node IDs that can affect this render node (configs in the chain + variables/functions feeding them) */
|
||||
@@ -184,7 +186,10 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
|
||||
if (!sourceContent && incomingIds.length > 0) {
|
||||
setRenderedContent(null)
|
||||
setResolvedContent(null)
|
||||
setError({ kind: 'no-content', message: 'No content on connected configuration node' })
|
||||
setError({
|
||||
kind: 'no-content',
|
||||
message: isAgentSource ? 'Run the Agent node to generate output.' : 'No content on connected configuration node',
|
||||
})
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
@@ -205,6 +210,17 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
if (srcNode?.type === 'agent') {
|
||||
const md = (srcNode.data as { outputMarkdown?: string })?.outputMarkdown ?? ''
|
||||
setResolvedContent(md)
|
||||
const markdownType = getConfigType('markdown')
|
||||
const html = await markdownType.render(md)
|
||||
if (cancelled || thisRunId !== runIdRef.current) return
|
||||
setRenderedContent(html)
|
||||
setError(null)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
const configIdsUsed = new Set<string>()
|
||||
|
||||
const isReachable = (startId: string, targetId: string) => {
|
||||
@@ -531,7 +547,7 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
|
||||
}
|
||||
}
|
||||
// Only re-run when inputs that affect the resolved output change (signatures + source). Debounced to avoid excessive re-renders while typing. retryCount triggers re-run on Retry.
|
||||
}, [id, sourceContent, configTypeId, configSignature, edgesSignature, variablesSignature, functionsSignature, dataSignature, viewportWidth, viewportHeight, retryCount])
|
||||
}, [id, sourceContent, configTypeId, configSignature, edgesSignature, variablesSignature, functionsSignature, dataSignature, viewportWidth, viewportHeight, retryCount, isAgentSource])
|
||||
|
||||
const dimensions =
|
||||
width != null && height != null && width > 0 && height > 0
|
||||
|
||||
Reference in New Issue
Block a user