@@ -4,7 +4,15 @@ import {
44 getEdgeZIndex ,
55 getEdgeZIndexForTarget ,
66} from '@sim/workflow-renderer'
7- import { type Edge , type Node , Position } from 'reactflow'
7+ import { type Edge , Position } from '@xyflow/react'
8+ import type {
9+ DocsBlockData ,
10+ DocsBlockNodeType ,
11+ } from '@/components/workflow-preview/docs-block-node'
12+ import type {
13+ DocsContainerData ,
14+ DocsContainerNodeType ,
15+ } from '@/components/workflow-preview/docs-container-node'
816
917/**
1018 * Tool entry displayed as a chip on a block (e.g. an Agent's attached tools).
@@ -51,6 +59,15 @@ export interface PreviewWorkflow {
5159 edges : Array < { id : string ; source : string ; target : string ; sourceHandle ?: string } >
5260}
5361
62+ export type PreviewNode = DocsBlockNodeType | DocsContainerNodeType
63+
64+ export interface PreviewEdgeData extends Record < string , unknown > {
65+ animate : boolean
66+ delay : number
67+ }
68+
69+ export type PreviewFlowEdge = Edge < PreviewEdgeData , 'previewEdge' >
70+
5471export const BLOCK_STAGGER = 0.12
5572export const EASE_OUT : [ number , number , number , number ] = [ 0.16 , 1 , 0.3 , 1 ]
5673
@@ -96,14 +113,14 @@ export function toReactFlowElements(
96113 workflow : PreviewWorkflow ,
97114 animate = false ,
98115 highlight : HighlightOptions = { }
99- ) : { nodes : Node [ ] ; edges : Edge [ ] } {
116+ ) : { nodes : PreviewNode [ ] ; edges : PreviewFlowEdge [ ] } {
100117 const { highlightBlock, highlightEdge, selectedBlock } = highlight
101118 const hasHighlight = Boolean ( highlightBlock || highlightEdge )
102119 const blockIndexMap = new Map ( workflow . blocks . map ( ( b , i ) => [ b . id , i ] ) )
103120
104121 const blocksById = new Map ( workflow . blocks . map ( ( b ) => [ b . id , b ] ) )
105122
106- const nodes : Node [ ] = workflow . blocks . map ( ( block , index ) => {
123+ const nodes : PreviewNode [ ] = workflow . blocks . map ( ( block , index ) => {
107124 const isContainer = Boolean ( block . size )
108125 const nestingDepth = getNestingDepth ( block , blocksById )
109126 // Nested blocks are authored relative to their container; render them at
@@ -113,13 +130,20 @@ export function toReactFlowElements(
113130 const position = parent
114131 ? { x : parent . position . x + block . position . x , y : parent . position . y + block . position . y }
115132 : block . position
116- return {
133+ const commonNode = {
117134 id : block . id ,
118- type : isContainer ? 'previewContainer' : 'previewBlock' ,
119135 position,
120136 zIndex : isContainer ? nestingDepth : block . parentId ? CONTAINER_CHILD_Z_BASE : BLOCK_Z_BASE ,
121137 ...( block . size ? { style : { width : block . size . width , height : block . size . height } } : { } ) ,
122- data : {
138+ draggable : true ,
139+ selectable : false ,
140+ connectable : false ,
141+ sourcePosition : Position . Right ,
142+ targetPosition : Position . Left ,
143+ }
144+
145+ if ( isContainer ) {
146+ const data : DocsContainerData = {
123147 name : block . name ,
124148 blockType : block . type ,
125149 bgColor : block . bgColor ,
@@ -133,16 +157,37 @@ export function toReactFlowElements(
133157 animate,
134158 isHighlighted : highlightBlock === block . id || selectedBlock === block . id ,
135159 isDimmed : hasHighlight && highlightBlock !== block . id ,
136- } ,
137- draggable : true ,
138- selectable : false ,
139- connectable : false ,
140- sourcePosition : Position . Right ,
141- targetPosition : Position . Left ,
160+ }
161+ return {
162+ ...commonNode ,
163+ type : 'previewContainer' ,
164+ data,
165+ }
166+ }
167+
168+ const data : DocsBlockData = {
169+ name : block . name ,
170+ blockType : block . type ,
171+ bgColor : block . bgColor ,
172+ rows : block . rows ,
173+ branches : block . branches ,
174+ tools : block . tools ,
175+ hideTargetHandle : block . hideTargetHandle ,
176+ size : block . size ,
177+ parentId : block . parentId ,
178+ index,
179+ animate,
180+ isHighlighted : highlightBlock === block . id || selectedBlock === block . id ,
181+ isDimmed : hasHighlight && highlightBlock !== block . id ,
182+ }
183+ return {
184+ ...commonNode ,
185+ type : 'previewBlock' ,
186+ data,
142187 }
143188 } )
144189
145- const edges : Edge [ ] = workflow . edges . map ( ( e ) => {
190+ const edges : PreviewFlowEdge [ ] = workflow . edges . map ( ( e ) => {
146191 const sourceIndex = blockIndexMap . get ( e . source ) ?? 0
147192 const isEdgeHighlight = highlightEdge === e . id
148193 const dimmed = hasHighlight && ! isEdgeHighlight
0 commit comments