50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tffc,"use client"; import { Canvas } from "@/components/ai-elements/canvas"; import { Connection } from "@/components/ai-elements/connection"; import { Edge } from "@/components/ai-elements/edge"; import { Node, NodeContent, NodeDescription, NodeFooter, NodeHeader, NodeTitle, } from "@/components/ai-elements/node"; const nodeIds = { decision: "decision", output1: "output1", output2: "output2", process1: "process1", process2: "process2", start: "start", }; const nodes = [ { data: { content: "Triggered by user action at 09:30 AM", description: "Initialize workflow", footer: "Status: Ready", handles: { source: true, target: false }, label: "Start", }, id: nodeIds.start, position: { x: 0, y: 0 }, type: "workflow", }, { data: { content: "Validating 1,234 records and applying business rules", description: "Transform input", footer: "Duration: ~2.5s", handles: { source: true, target: true }, label: "Process Data", }, id: nodeIds.process1, position: { x: 500, y: 0 }, type: "workflow", }, { data: { content: "Evaluating: data.status === 'valid' && data.score > 0.8", description: "Route based on conditions", footer: "Confidence: 94%", handles: { source: true, target: true }, label: "Decision Point", }, id: nodeIds.decision, position: { x: 1000, y: 0 }, type: "workflow", }, { data: { content: "1,156 records passed validation (93.7%)", description: "Handle success case", footer: "Next: Send to production", handles: { source: true, target: true }, label: "Success Path", }, id: nodeIds.output1, position: { x: 1500, y: -300 }, type: "workflow", }, { data: { content: "78 records failed validation (6.3%)", description: "Handle error case", footer: "Next: Queue for review", handles: { source: true, target: true }, label: "Error Path", }, id: nodeIds.output2, position: { x: 1500, y: 300 }, type: "workflow", }, { data: { content: "All records processed and routed successfully", description: "Finalize workflow", footer: "Total time: 4.2s", handles: { source: false, target: true }, label: "Complete", }, id: nodeIds.process2, position: { x: 2000, y: 0 }, type: "workflow", }, ]; const edges = [ { id: "edge1", source: nodeIds.start, target: nodeIds.process1, type: "animated", }, { id: "edge2", source: nodeIds.process1, target: nodeIds.decision, type: "animated", }, { id: "edge3", source: nodeIds.decision, target: nodeIds.output1, type: "animated", }, { id: "edge4", source: nodeIds.decision, target: nodeIds.output2, type: "temporary", }, { id: "edge5", source: nodeIds.output1, target: nodeIds.process2, type: "animated", }, { id: "edge6", source: nodeIds.output2, target: nodeIds.process2, type: "temporary", }, ]; const nodeTypes = { workflow: ({ data, }: { data: { label: string; description: string; handles: { target: boolean; source: boolean }; content: string; footer: string; }; }) => ( {data.label} {data.description}

{data.content}

{data.footer}

), }; const edgeTypes = { animated: Edge.Animated, temporary: Edge.Temporary, }; const Example = () => (

); export default Example; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@ai-elements","registryDependencies":["https://elements.ai-sdk.dev/canvas.json","https://elements.ai-sdk.dev/connection.json","https://elements.ai-sdk.dev/edge.json","https://elements.ai-sdk.dev/node.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/examples/demo-workflow.tsx","content":"$52","type":"registry:block","target":"components/ai-elements/example-demo-workflow.tsx"}],"className":"h-[70svh] min-h-80"}]]}]