@runtypelabs/react-flow 0.1.0

package/src/utils/adapter.ts

@@ -0,0 +1,544 @@
+import type { FlowStep, RuntypeNode, RuntypeEdge, RuntypeNodeData } from '../types'
+import type { FlowStepType } from '@travrse/shared'
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const NODE_WIDTH = 280
+const NODE_HEIGHT = 200  // Increased for better card visibility
+const NODE_SPACING_X = 350  // Horizontal space between main steps
+const NODE_SPACING_Y = 80   // Vertical space between branch steps
+const BRANCH_OFFSET_X = 350 // Horizontal offset for branches to the right of conditional
+const BRANCH_OFFSET_Y = -80 // Vertical offset for true branch (above center)
+const FALSE_BRANCH_GAP = 100 // Gap between true and false branches
+
+// ============================================================================
+// Flow Steps to React Flow Nodes
+// ============================================================================
+
+interface FlowStepsToNodesOptions {
+  onChange?: (stepId: string, updates: Partial<FlowStep>) => void
+  onDelete?: (stepId: string) => void
+  startPosition?: { x: number; y: number }
+  /** Internal: prefix for nested step IDs */
+  idPrefix?: string
+  /** Internal: parent conditional ID */
+  parentId?: string
+}
+
+/**
+ * Convert Runtype FlowStep array to React Flow Node array
+ * Handles nested conditional branches with vertical stacking below conditional
+ */
+export function flowStepsToNodes(
+  steps: FlowStep[],
+  options?: FlowStepsToNodesOptions
+): RuntypeNode[] {
+  const { 
+    onChange, 
+    onDelete, 
+    startPosition = { x: 50, y: 200 },
+    idPrefix = '',
+    parentId,
+  } = options ?? {}
+
+  // Sort steps by order
+  const sortedSteps = [...steps].sort((a, b) => a.order - b.order)
+
+  const nodes: RuntypeNode[] = []
+  let currentX = startPosition.x
+  let maxBranchY = startPosition.y // Track the maximum Y extent for branches
+
+  for (const step of sortedSteps) {
+    const nodeId = idPrefix ? `${idPrefix}${step.id}` : step.id
+
+    const nodeData: RuntypeNodeData = {
+      step,
+      label: step.name || getDefaultStepName(step.type),
+      onChange,
+      onDelete,
+    }
+
+    const node: RuntypeNode = {
+      id: nodeId,
+      type: step.type,
+      position: { x: currentX, y: startPosition.y },
+      data: nodeData,
+      draggable: true,
+      selectable: true,
+    }
+    
+    if (parentId) {
+      node.parentId = parentId
+    }
+
+    nodes.push(node)
+    
+    // DEBUG: Log node positions
+    console.log(`[flowStepsToNodes] Placed "${step.name}" (${step.type}) at x=${currentX}`)
+    
+    // Handle conditional branches - position to the right with true above, false below
+    if (step.type === 'conditional' && step.config) {
+      const config = step.config as { trueSteps?: FlowStep[]; falseSteps?: FlowStep[] }
+      const branchX = currentX + BRANCH_OFFSET_X
+      
+      // Calculate branch lengths (horizontal extent)
+      const trueBranchLength = config.trueSteps?.length || 0
+      const falseBranchLength = config.falseSteps?.length || 0
+      const maxBranchLength = Math.max(trueBranchLength, falseBranchLength)
+      
+      // Calculate true branch height (vertical extent for stacking)
+      const trueBranchHeight = trueBranchLength * (NODE_HEIGHT + NODE_SPACING_Y)
+      
+      // True branch nodes (positioned to the right, above center)
+      if (config.trueSteps && config.trueSteps.length > 0) {
+        const trueBranchY = startPosition.y + BRANCH_OFFSET_Y
+        const trueBranchNodes = flowStepsToNodes(config.trueSteps, {
+          onChange,
+          onDelete,
+          startPosition: { 
+            x: branchX, 
+            y: trueBranchY 
+          },
+          idPrefix: `${nodeId}-true-`,
+          parentId: nodeId,
+        })
+        
+        nodes.push(...trueBranchNodes)
+        maxBranchY = Math.max(maxBranchY, trueBranchY + trueBranchHeight)
+      }
+      
+      // False branch nodes (positioned to the right, below center)
+      if (config.falseSteps && config.falseSteps.length > 0) {
+        // Position false branch below true branch (or at center + gap if no true branch)
+        const falseBranchY = trueBranchLength > 0
+          ? startPosition.y + BRANCH_OFFSET_Y + trueBranchHeight + FALSE_BRANCH_GAP
+          : startPosition.y + NODE_HEIGHT + NODE_SPACING_Y
+        
+        const falseBranchNodes = flowStepsToNodes(config.falseSteps, {
+          onChange,
+          onDelete,
+          startPosition: { 
+            x: branchX, 
+            y: falseBranchY 
+          },
+          idPrefix: `${nodeId}-false-`,
+          parentId: nodeId,
+        })
+        
+        nodes.push(...falseBranchNodes)
+        const falseBranchHeight = config.falseSteps.length * (NODE_HEIGHT + NODE_SPACING_Y)
+        maxBranchY = Math.max(maxBranchY, falseBranchY + falseBranchHeight)
+      }
+      
+      // Skip past the conditional AND all its branch steps
+      // Branches start at branchX, so we need to account for:
+      // - The offset from conditional to first branch step (BRANCH_OFFSET_X)
+      // - All the branch steps (maxBranchLength * (NODE_WIDTH + NODE_SPACING_X))
+      if (maxBranchLength > 0) {
+        const advance = BRANCH_OFFSET_X + (maxBranchLength * (NODE_WIDTH + NODE_SPACING_X))
+        console.log(`[flowStepsToNodes] Conditional "${step.name}" has ${maxBranchLength} branch steps, advancing currentX by ${advance}`)
+        currentX += advance
+        console.log(`[flowStepsToNodes] After conditional, currentX = ${currentX}`)
+      } else {
+        currentX += NODE_WIDTH + NODE_SPACING_X
+      }
+    } else {
+      // Move to the next X position for horizontal layout (non-conditional steps)
+      currentX += NODE_WIDTH + NODE_SPACING_X
+    }
+  }
+
+  return nodes
+}
+
+// ============================================================================
+// React Flow Nodes to Flow Steps
+// ============================================================================
+
+/**
+ * Convert React Flow Node array back to Runtype FlowStep array
+ */
+export function nodesToFlowSteps(nodes: RuntypeNode[]): FlowStep[] {
+  // Filter out branch nodes (handled within conditional steps)
+  const topLevelNodes = nodes.filter(n => !n.parentId && !n.id.includes('-true-') && !n.id.includes('-false-'))
+  
+  // Sort by X position to determine order (horizontal layout)
+  const sortedNodes = [...topLevelNodes].sort((a, b) => a.position.x - b.position.x)
+  
+  return sortedNodes.map((node, index) => {
+    const step = node.data.step
+    
+    // Handle conditional steps - extract nested steps
+    if (step.type === 'conditional') {
+      const trueSteps = extractBranchSteps(nodes, node.id, 'true')
+      const falseSteps = extractBranchSteps(nodes, node.id, 'false')
+      
+      return {
+        ...step,
+        order: index,
+        config: {
+          ...step.config,
+          trueSteps,
+          falseSteps,
+        },
+      }
+    }
+    
+    return {
+      ...step,
+      order: index,
+    }
+  })
+}
+
+/**
+ * Extract branch steps from conditional node
+ */
+function extractBranchSteps(nodes: RuntypeNode[], parentId: string, branch: 'true' | 'false'): FlowStep[] {
+  // Match nodes with the branch prefix pattern
+  const branchPrefix = `${parentId}-${branch}-`
+  const branchNodes = nodes.filter(n => n.id.startsWith(branchPrefix))
+  
+  // Sort by X position (horizontal layout within branches)
+  const sortedBranchNodes = [...branchNodes].sort((a, b) => a.position.x - b.position.x)
+  
+  return sortedBranchNodes.map((node, index) => ({
+    ...node.data.step,
+    order: index,
+  }))
+}
+
+// ============================================================================
+// Create Edges from Nodes
+// ============================================================================
+
+/**
+ * Create edges connecting nodes in sequence
+ */
+export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
+  const edges: RuntypeEdge[] = []
+
+  // Helper to check if a node is a branch node
+  const isBranchNode = (n: RuntypeNode) => n.parentId || n.id.includes('-true-') || n.id.includes('-false-')
+  
+  // Get top-level nodes sorted by X position (horizontal layout)
+  const topLevelNodes = nodes
+    .filter(n => !isBranchNode(n))
+    .sort((a, b) => a.position.x - b.position.x)
+  
+  // Create sequential edges for top-level nodes
+  // Skip conditionals - their branches connect to the next step instead
+  for (let i = 0; i < topLevelNodes.length - 1; i++) {
+    const sourceNode = topLevelNodes[i]
+    const targetNode = topLevelNodes[i + 1]
+    
+    // Skip edge from conditional - branches will connect to next step
+    if (sourceNode.data.step.type === 'conditional') {
+      continue
+    }
+    
+    edges.push({
+      id: `edge-${sourceNode.id}-${targetNode.id}`,
+      source: sourceNode.id,
+      target: targetNode.id,
+      sourceHandle: 'output',
+      type: 'smoothstep',
+      animated: false,
+      data: { stepOrder: i },
+    })
+  }
+  
+  // Create edges for conditional branches
+  const conditionalNodes = nodes.filter(n => n.data.step.type === 'conditional' && !isBranchNode(n))
+  
+  for (const conditionalNode of conditionalNodes) {
+    const conditionalId = conditionalNode.id
+    const conditionalIndex = topLevelNodes.findIndex(n => n.id === conditionalId)
+    const nextMainStep = conditionalIndex < topLevelNodes.length - 1 
+      ? topLevelNodes[conditionalIndex + 1] 
+      : null
+    
+    // Find true branch nodes (contain -true- after the conditional ID)
+    // Sort by X position since branches flow horizontally
+    const trueBranchNodes = nodes
+      .filter(n => n.id.startsWith(`${conditionalId}-true-`))
+      .sort((a, b) => a.position.x - b.position.x)
+    
+    // Find false branch nodes (contain -false- after the conditional ID)
+    // Sort by X position since branches flow horizontally
+    const falseBranchNodes = nodes
+      .filter(n => n.id.startsWith(`${conditionalId}-false-`))
+      .sort((a, b) => a.position.x - b.position.x)
+    
+    // Connect conditional to first true branch node (branch goes right)
+    if (trueBranchNodes.length > 0) {
+      edges.push({
+        id: `edge-${conditionalId}-to-true-branch`,
+        source: conditionalId,
+        target: trueBranchNodes[0].id,
+        sourceHandle: 'true',
+        type: 'smoothstep',
+        animated: false,
+        label: 'True',
+        labelStyle: { fill: '#22c55e', fontWeight: 600, fontSize: 11 },
+        labelBgStyle: { fill: '#f0fdf4', fillOpacity: 0.9 },
+        labelBgPadding: [4, 6] as [number, number],
+        labelBgBorderRadius: 4,
+        style: { stroke: '#22c55e', strokeWidth: 2 },
+      })
+      
+      // Connect true branch nodes sequentially (horizontal connections)
+      for (let i = 0; i < trueBranchNodes.length - 1; i++) {
+        edges.push({
+          id: `edge-true-${trueBranchNodes[i].id}-${trueBranchNodes[i + 1].id}`,
+          source: trueBranchNodes[i].id,
+          target: trueBranchNodes[i + 1].id,
+          sourceHandle: 'output',
+          type: 'smoothstep',
+          animated: false,
+          style: { stroke: '#22c55e', strokeWidth: 1.5 },
+        })
+      }
+      
+      // Connect last true branch node to next main step (convergence)
+      if (nextMainStep) {
+        const lastTrueNode = trueBranchNodes[trueBranchNodes.length - 1]
+        edges.push({
+          id: `edge-true-${lastTrueNode.id}-to-${nextMainStep.id}`,
+          source: lastTrueNode.id,
+          target: nextMainStep.id,
+          sourceHandle: 'output',
+          type: 'smoothstep',
+          animated: false,
+          style: { stroke: '#22c55e', strokeWidth: 1.5 },
+        })
+      }
+    } else if (nextMainStep) {
+      // No true branch steps - connect conditional directly to next step via true handle
+      edges.push({
+        id: `edge-${conditionalId}-true-to-${nextMainStep.id}`,
+        source: conditionalId,
+        target: nextMainStep.id,
+        sourceHandle: 'true',
+        type: 'smoothstep',
+        animated: false,
+        label: 'True',
+        labelStyle: { fill: '#22c55e', fontWeight: 600, fontSize: 11 },
+        labelBgStyle: { fill: '#f0fdf4', fillOpacity: 0.9 },
+        labelBgPadding: [4, 6] as [number, number],
+        labelBgBorderRadius: 4,
+        style: { stroke: '#22c55e', strokeWidth: 2 },
+      })
+    }
+    
+    // Connect conditional to first false branch node (branch goes right, below true)
+    if (falseBranchNodes.length > 0) {
+      edges.push({
+        id: `edge-${conditionalId}-to-false-branch`,
+        source: conditionalId,
+        target: falseBranchNodes[0].id,
+        sourceHandle: 'false',
+        type: 'smoothstep',
+        animated: false,
+        label: 'False',
+        labelStyle: { fill: '#ef4444', fontWeight: 600, fontSize: 11 },
+        labelBgStyle: { fill: '#fef2f2', fillOpacity: 0.9 },
+        labelBgPadding: [4, 6] as [number, number],
+        labelBgBorderRadius: 4,
+        style: { stroke: '#ef4444', strokeWidth: 2 },
+      })
+      
+      // Connect false branch nodes sequentially (horizontal connections)
+      for (let i = 0; i < falseBranchNodes.length - 1; i++) {
+        edges.push({
+          id: `edge-false-${falseBranchNodes[i].id}-${falseBranchNodes[i + 1].id}`,
+          source: falseBranchNodes[i].id,
+          target: falseBranchNodes[i + 1].id,
+          sourceHandle: 'output',
+          type: 'smoothstep',
+          animated: false,
+          style: { stroke: '#ef4444', strokeWidth: 1.5 },
+        })
+      }
+      
+      // Connect last false branch node to next main step (convergence)
+      if (nextMainStep) {
+        const lastFalseNode = falseBranchNodes[falseBranchNodes.length - 1]
+        edges.push({
+          id: `edge-false-${lastFalseNode.id}-to-${nextMainStep.id}`,
+          source: lastFalseNode.id,
+          target: nextMainStep.id,
+          sourceHandle: 'output',
+          type: 'smoothstep',
+          animated: false,
+          style: { stroke: '#ef4444', strokeWidth: 1.5 },
+        })
+      }
+    } else if (nextMainStep) {
+      // No false branch steps - connect conditional directly to next step via false handle
+      edges.push({
+        id: `edge-${conditionalId}-false-to-${nextMainStep.id}`,
+        source: conditionalId,
+        target: nextMainStep.id,
+        sourceHandle: 'false',
+        type: 'smoothstep',
+        animated: false,
+        label: 'False',
+        labelStyle: { fill: '#ef4444', fontWeight: 600, fontSize: 11 },
+        labelBgStyle: { fill: '#fef2f2', fillOpacity: 0.9 },
+        labelBgPadding: [4, 6] as [number, number],
+        labelBgBorderRadius: 4,
+        style: { stroke: '#ef4444', strokeWidth: 2 },
+      })
+    }
+    
+    // Handle case where conditional has no branches - connect directly to next step
+    if (trueBranchNodes.length === 0 && falseBranchNodes.length === 0 && nextMainStep) {
+      edges.push({
+        id: `edge-${conditionalId}-to-${nextMainStep.id}`,
+        source: conditionalId,
+        target: nextMainStep.id,
+        sourceHandle: 'output',
+        type: 'smoothstep',
+        animated: false,
+      })
+    }
+  }
+  
+  return edges
+}
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+/**
+ * Get default name for a step type
+ */
+export function getDefaultStepName(type: FlowStepType): string {
+  const names: Record<FlowStepType, string> = {
+    'prompt': 'AI Prompt',
+    'fetch-url': 'Fetch URL',
+    'retrieve-record': 'Retrieve Record',
+    'fetch-github': 'Fetch GitHub',
+    'api-call': 'API Call',
+    'transform-data': 'Transform Data',
+    'conditional': 'Conditional',
+    'set-variable': 'Set Variable',
+    'upsert-record': 'Upsert Record',
+    'send-email': 'Send Email',
+    'send-text': 'Send Text',
+    'send-event': 'Send Event',
+    'send-stream': 'Send Stream',
+    'update-record': 'Update Record',
+    'search': 'Search',
+    'generate-embedding': 'Generate Embedding',
+    'vector-search': 'Vector Search',
+    'tool-call': 'Tool Call',
+    'wait-until': 'Wait Until',
+  }
+  
+  return names[type] || type
+}
+
+/**
+ * Create a new flow step with default configuration
+ */
+export function createDefaultStep(type: FlowStepType, order: number = 0): FlowStep {
+  const id = `step-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+  
+  const baseStep = {
+    id,
+    type,
+    name: getDefaultStepName(type),
+    order,
+    enabled: true,
+  }
+  
+  switch (type) {
+    case 'prompt':
+      return {
+        ...baseStep,
+        config: {
+          mode: 'instruction',
+          model: '',
+          userPrompt: '',
+          responseFormat: 'text',
+          outputVariable: `${type}_result`,
+        },
+      }
+    
+    case 'fetch-url':
+      return {
+        ...baseStep,
+        config: {
+          http: {
+            url: '',
+            method: 'GET',
+          },
+          responseType: 'json',
+          outputVariable: 'fetch_result',
+        },
+      }
+    
+    case 'transform-data':
+      return {
+        ...baseStep,
+        config: {
+          script: '// Transform your data here\nreturn { result: input }',
+          outputVariable: 'transform_result',
+        },
+      }
+    
+    case 'conditional':
+      return {
+        ...baseStep,
+        config: {
+          condition: 'true',
+          trueSteps: [],
+          falseSteps: [],
+        },
+      }
+    
+    case 'send-email':
+      return {
+        ...baseStep,
+        config: {
+          from: 'no-reply@messages.runtype.com',
+          to: '',
+          subject: '',
+          html: '',
+          outputVariable: 'email_result',
+        },
+      }
+    
+    default:
+      return {
+        ...baseStep,
+        config: {
+          outputVariable: `${type.replace(/-/g, '_')}_result`,
+        },
+      }
+  }
+}
+
+/**
+ * Generate a unique step ID
+ */
+export function generateStepId(prefix: string = 'step'): string {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+}
+
+/**
+ * Clone a step with a new ID
+ */
+export function cloneStep(step: FlowStep): FlowStep {
+  return {
+    ...step,
+    id: generateStepId(step.type),
+    config: JSON.parse(JSON.stringify(step.config)),
+  }
+}
+