@flowuent-org/diagramming-core 1.4.1 → 1.4.3

package/packages/diagrams/src/lib/components/automation/AutomationSmsNode.tsx

@@ -43,7 +43,6 @@ export const AutomationSmsNode: React.FC<AutomationSmsNodeProps> = ({
       data={{ ...data, description: descriptionText }}
       selected={selected}
       icon={<SmsNodeIcon />}
-      headerText="Send SMS (recipientPhone)"
       aiAssistantTitle="SMS Node"
       descriptionContent={
         <>

package/packages/diagrams/src/lib/components/automation/AutomationStartNode.tsx

@@ -12,11 +12,13 @@ import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
 import { StartNodeIcon } from '../../icons';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 interface AutomationStartNodeProps {
     data: {
         label: string;
         description: string;
+        headerText?: string;
         status: 'Ready' | 'Running' | 'Completed' | 'Error';
         triggerType: 'manual' | 'scheduled';
         scheduleConfig?: {
@@ -235,19 +237,7 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
             onClick={handleJsonClick}
         >
             {/* Top Header Section */}
-            <Box sx={{
-                backgroundColor: "rgba(67, 93, 132, 0.1)",
-                padding: '8px 16px',
-                borderRadius: '12px 12px 0 0'
-            }}>
-                <Typography variant="body2" sx={{
-                    color: '#ffffff',
-                    fontSize: '12px',
-                    fontWeight: 500
-                }}>
-                    {highlightText(data.formData?.description || t('automation.startNode.headerDescription'))}
-                </Typography>
-            </Box>
+            <AutomationNodeHeaderSection data={data} highlightText={highlightText} />
 
             {/* Main Content */}
             <Box sx={{ padding: '16px' }}>

package/packages/diagrams/src/lib/components/automation/AutomationTelegramNode.tsx

@@ -31,6 +31,7 @@ import { useDiagram } from '../../contexts/DiagramProvider';
 import { useSearch } from '../../contexts/SearchContext';
 import { NodeActionButtons } from './NodeActionButtons';
 import { getStatusColor } from './statusColors';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
 
 // ========================
 // Types
@@ -57,6 +58,7 @@ export interface TelegramTokenData {
 export interface AutomationTelegramNodeData {
   label: string;
   description: string;
+  headerText?: string;
   operationType?: TelegramOperationType;
   status: 'Ready' | 'Running' | 'Completed' | 'Failed' | 'Need to Config' | 'authenticated';
   parameters?: {
@@ -462,19 +464,7 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
       />
 
       {/* Top Header Section */}
-      <Box sx={{
-        backgroundColor: "rgba(67, 93, 132, 0.1)",
-        padding: '8px 16px',
-        borderRadius: '12px 12px 0 0'
-      }}>
-        <Typography variant="body2" sx={{
-          color: '#ffffff',
-          fontSize: '12px',
-          fontWeight: 500
-        }}>
-          {data.description || operationConfig.description}
-        </Typography>
-      </Box>
+      <AutomationNodeHeaderSection data={data} highlightText={highlightText} />
 
       {/* Header */}
       <Box

package/packages/diagrams/src/lib/components/automation/AutomationVoiceCallNode.tsx

@@ -43,7 +43,6 @@ export const AutomationVoiceCallNode: React.FC<AutomationVoiceCallNodeProps> = (
       data={data}
       selected={selected}
       icon={<VoiceCallNodeIcon />}
-      headerText="Voice calls with spoken content"
       aiAssistantTitle="Voice Call Node"
       descriptionContent={
         <>

package/packages/diagrams/src/lib/components/automation/AutomationWorkflowNode.tsx

@@ -43,7 +43,6 @@ export const AutomationWorkflowNode: React.FC<AutomationWorkflowNodeProps> = ({
       data={data}
       selected={selected}
       icon={<SubWorkflowNodeIcon />}
-      headerText="Run/embed another workflow (workflowId)"
       aiAssistantTitle="Workflow Node"
       descriptionContent={
         <>

package/packages/diagrams/src/lib/components/automation/index.ts

@@ -51,6 +51,12 @@ export type {
   AutomationDecisionNodeData,
   AutomationDecisionNodeProps,
 } from './AutomationDecisionNode';
+// Loop / for-each node
+export { AutomationLoopNode } from './AutomationLoopNode';
+export type {
+  AutomationLoopNodeData,
+  AutomationLoopNodeProps,
+} from './AutomationLoopNode';
 // SMS node
 export { AutomationSmsNode } from './AutomationSmsNode';
 export type {
@@ -69,6 +75,11 @@ export type {
   AutomationWorkflowNodeData,
   AutomationWorkflowNodeProps,
 } from './AutomationWorkflowNode';
+export {
+    getAutomationNodeHeaderText,
+    AutomationNodeHeaderSection,
+} from './AutomationNodeHeader';
+export type { AutomationNodeHeaderData } from './AutomationNodeHeader';
 export { AutomationNodeCard } from './AutomationNodeCard';
 export type {
   AutomationNodeCardData,

package/packages/diagrams/src/lib/icons/icons.tsx

@@ -299,6 +299,16 @@ export const DecisionNodeIcon: React.FC<SvgIconProps> = ({ size, color, style })
   </svg>
 );
 
+export const LoopNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
+  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
+    <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+    <path d="M17.5 9.5H11.5C10.3954 9.5 9.5 10.3954 9.5 11.5V13.5" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M10.5 18.5H16.5C17.6046 18.5 18.5 17.6046 18.5 16.5V14.5" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M9.5 13.5L7.5 11.5L9.5 9.5" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M18.5 14.5L20.5 16.5L18.5 18.5" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
 export const SmsNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
   <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
     <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>

package/packages/diagrams/src/lib/icons/index.ts

@@ -23,6 +23,7 @@ export {
   FormattingNodeIcon,
   ApiNodeIcon,
   DecisionNodeIcon,
+  LoopNodeIcon,
   SmsNodeIcon,
   VoiceCallNodeIcon,
   SubWorkflowNodeIcon,

package/packages/diagrams/src/lib/types/automation-node-data-types.ts

@@ -2,7 +2,8 @@
 export interface AutomationNodeFormData {
   nodeId: string;
   title: string;
-  type: 'start' | 'api' | 'formatting' | 'end' | 'navigation' | 'decision' | 'sms' | 'voice-call' | 'workflow';
+  headerText?: string;
+  type: 'start' | 'api' | 'formatting' | 'end' | 'navigation' | 'decision' | 'loop' | 'sms' | 'voice-call' | 'workflow';
   isPinned?: boolean;
   isBlock?: boolean;
   blocks?: Array<{
@@ -202,6 +203,17 @@ export interface AutomationDecisionNodeForm extends AutomationNodeFormData {
   defaultBranch?: string;
 }
 
+export interface AutomationLoopNodeForm extends AutomationNodeFormData {
+  type: 'loop';
+  arraySource: {
+    type: 'previousStep' | 'variable';
+    variableName?: string;
+  };
+  maxIterations?: number;
+  currentItemVariable?: string;
+  loopIndexVariable?: string;
+}
+
 export interface AutomationSmsNodeForm extends AutomationNodeFormData {
   type: 'sms';
   recipientPhone: string;
@@ -255,6 +267,7 @@ export type AutomationNodeForm =
   | AutomationEndNodeForm
   | AutomationNavigationNodeForm
   | AutomationDecisionNodeForm
+  | AutomationLoopNodeForm
   | AutomationSmsNodeForm
   | AutomationVoiceCallNodeForm
   | AutomationWorkflowNodeForm;

package/packages/diagrams/src/lib/types/node-types.ts

@@ -15,6 +15,7 @@ import {
   AutomationInteractionNode,
   AutomationMonitoringNode,
   AutomationDecisionNode,
+  AutomationLoopNode,
   AutomationSmsNode,
   AutomationVoiceCallNode,
   AutomationWorkflowNode,
@@ -36,6 +37,7 @@ const nodeTypes = {
   AutomationInteractionNode,
   AutomationMonitoringNode,
   AutomationDecisionNode,
+  AutomationLoopNode,
   AutomationSmsNode,
   AutomationVoiceCallNode,
   AutomationWorkflowNode,

package/packages/diagrams/src/lib/utils/AutomationExecutionEngine.ts

@@ -5,7 +5,9 @@ import {
   AutomationApiNodeForm,
   AutomationFormattingNodeForm,
   AutomationEndNodeForm,
+  AutomationLoopNodeForm,
 } from '../types/automation-node-data-types';
+import { assertAutomationLoopNodeValid } from './validateAutomationLoopNode';
 
 export interface AutomationContext {
   runId: string;
@@ -128,6 +130,192 @@ export class AutomationExecutionEngine {
     return this.nodes.filter((node) => nextNodeIds.includes(node.id));
   }
 
+  private getOutgoingEdge(
+    nodeId: string,
+    sourceHandle: string,
+  ): Edge | undefined {
+    return this.edges.find(
+      (edge) => edge.source === nodeId && edge.sourceHandle === sourceHandle,
+    );
+  }
+
+  private getTargetNode(edge: Edge): Node | undefined {
+    return this.nodes.find((node) => node.id === edge.target);
+  }
+
+  private getFirstOutgoingEdge(nodeId: string): Edge | undefined {
+    return this.edges.find((edge) => edge.source === nodeId);
+  }
+
+  private resolveArraySource(
+    formData: AutomationLoopNodeForm,
+    inputData: string | number | boolean | object | null,
+  ): unknown[] {
+    if (formData.arraySource.type === 'variable') {
+      const variableName = formData.arraySource.variableName;
+      if (!variableName) {
+        throw new Error('Loop node variable name is not configured');
+      }
+      const value = this.context.variables[variableName];
+      if (!Array.isArray(value)) {
+        throw new Error(
+          `Loop variable "${variableName}" must be an array, got ${typeof value}`,
+        );
+      }
+      return value;
+    }
+
+    if (inputData === null || inputData === undefined) {
+      throw new Error('Loop node previous step output is empty');
+    }
+    if (Array.isArray(inputData)) {
+      return inputData;
+    }
+    return [inputData];
+  }
+
+  private async runNodeWithStatus(
+    node: Node,
+    inputData?: string | number | boolean | object | null,
+  ): Promise<string | number | boolean | object | null> {
+    this.log(
+      'info',
+      node.id,
+      String(node.type || 'node'),
+      'Executing node...',
+    );
+
+    (node.data as Record<string, unknown>).status = 'Running';
+    if (this.onNodeUpdate) {
+      this.onNodeUpdate(node.id, { ...node.data });
+    }
+
+    try {
+      const result = await this.executeNode(node, inputData);
+      (node.data as Record<string, unknown>).status = 'Completed';
+      (node.data as Record<string, unknown>).lastRun = new Date().toISOString();
+      if (this.onNodeUpdate) {
+        this.onNodeUpdate(node.id, { ...node.data });
+      }
+      return result;
+    } catch (error) {
+      (node.data as Record<string, unknown>).status = 'Error';
+      (node.data as Record<string, unknown>).lastRun = new Date().toISOString();
+      if (this.onNodeUpdate) {
+        this.onNodeUpdate(node.id, { ...node.data });
+      }
+      throw error;
+    }
+  }
+
+  private async executeBodySubgraph(
+    startNode: Node,
+    loopNodeId: string,
+    inputData: string | number | boolean | object | null,
+  ): Promise<string | number | boolean | object | null> {
+    let currentNode: Node | null = startNode;
+    let currentData = inputData;
+    const visitedInBody = new Set<string>();
+
+    while (currentNode && currentNode.id !== loopNodeId) {
+      if (visitedInBody.has(currentNode.id)) {
+        throw new Error(
+          `Infinite loop detected in loop body at node ${currentNode.id}`,
+        );
+      }
+      visitedInBody.add(currentNode.id);
+
+      currentData = await this.runNodeWithStatus(currentNode, currentData);
+
+      const nextEdge = this.getFirstOutgoingEdge(currentNode.id);
+      if (!nextEdge) {
+        throw new Error(
+          `Loop body node ${currentNode.id} has no outgoing edge back to the loop node`,
+        );
+      }
+
+      const nextNode = this.getTargetNode(nextEdge);
+      if (!nextNode) {
+        throw new Error(`Loop body target node not found for edge ${nextEdge.id}`);
+      }
+
+      currentNode = nextNode;
+    }
+
+    return currentData;
+  }
+
+  private async executeLoopNode(
+    node: Node,
+    inputData: string | number | boolean | object | null,
+  ): Promise<{ doneNextNode: Node | null; result: object }> {
+    assertAutomationLoopNodeValid(node, this.edges);
+
+    const formData = (node.data.formData || node.data) as AutomationLoopNodeForm;
+    const maxIterations = formData.maxIterations ?? 100;
+    const currentItemVariable = formData.currentItemVariable ?? 'currentItem';
+    const loopIndexVariable = formData.loopIndexVariable ?? 'loopIndex';
+
+    const array = this.resolveArraySource(formData, inputData);
+    const iterationCount = Math.min(array.length, maxIterations);
+
+    this.log(
+      'info',
+      node.id,
+      'AutomationLoopNode',
+      `Starting loop over ${iterationCount} item(s)`,
+      { totalItems: array.length, maxIterations },
+    );
+
+    const loopEdge = this.getOutgoingEdge(node.id, 'loop');
+    if (!loopEdge) {
+      throw new Error('Loop node is missing the "loop" handle edge');
+    }
+
+    const bodyStartNode = this.getTargetNode(loopEdge);
+    if (!bodyStartNode) {
+      throw new Error('Loop body entry node not found');
+    }
+
+    for (let i = 0; i < iterationCount; i++) {
+      this.context.variables[currentItemVariable] = array[i] as
+        | string
+        | number
+        | boolean
+        | object
+        | null;
+      this.context.variables[loopIndexVariable] = i;
+
+      this.log(
+        'info',
+        node.id,
+        'AutomationLoopNode',
+        `Loop iteration ${i + 1}/${iterationCount}`,
+        { [currentItemVariable]: array[i], [loopIndexVariable]: i },
+      );
+
+      await this.executeBodySubgraph(bodyStartNode, node.id, array[i] as
+        | string
+        | number
+        | boolean
+        | object
+        | null);
+    }
+
+    const result = {
+      iterationsRun: iterationCount,
+      totalItems: array.length,
+      maxIterations,
+    };
+
+    this.storeExecutionResult(node.id, result, true);
+
+    const doneEdge = this.getOutgoingEdge(node.id, 'done');
+    const doneNextNode = doneEdge ? this.getTargetNode(doneEdge) ?? null : null;
+
+    return { doneNextNode, result };
+  }
+
   private async executeStartNode(
     node: Node,
   ): Promise<{ runId: string; startTime: string }> {
@@ -522,6 +710,21 @@ export class AutomationExecutionEngine {
     return inputData;
   }
 
+  private async executeStubNode(
+    node: Node,
+    inputData: string | number | boolean | object | null,
+  ): Promise<string | number | boolean | object | null> {
+    this.log(
+      'info',
+      node.id,
+      String(node.type || 'node'),
+      'Node executed (stub — full runtime not yet implemented)',
+      inputData,
+    );
+    this.storeExecutionResult(node.id, inputData, true);
+    return inputData;
+  }
+
   private async executeNode(
     node: Node,
     inputData?: string | number | boolean | object | null,
@@ -537,7 +740,14 @@ export class AutomationExecutionEngine {
         return await this.executeFormattingNode(node, inputData || null);
       case 'AutomationEndNode':
         return await this.executeEndNode(node, inputData || null);
+      case 'AutomationLoopNode':
+        throw new Error(
+          'Loop nodes must be executed via executeLoopNode from the workflow runner',
+        );
       default:
+        if (typeof nodeType === 'string' && nodeType.startsWith('Automation')) {
+          return await this.executeStubNode(node, inputData || null);
+        }
         throw new Error(`Unknown node type: ${nodeType}`);
     }
   }
@@ -560,60 +770,77 @@ export class AutomationExecutionEngine {
       const visitedNodes = new Set<string>();
 
       while (currentNode) {
-        if (visitedNodes.has(currentNode.id)) {
+        if (
+          currentNode.type !== 'AutomationLoopNode' &&
+          visitedNodes.has(currentNode.id)
+        ) {
           throw new Error(
             `Circular dependency detected: node ${currentNode.id} already visited`,
           );
         }
 
-        visitedNodes.add(currentNode.id);
-
-        // Announce node execution start
-        this.log(
-          'info',
-          currentNode.id,
-          String(currentNode.type || 'node'),
-          'Executing node...',
-        );
-
-        // Update node status to running
-        (currentNode.data as Record<string, unknown>).status = 'Running';
-        if (this.onNodeUpdate) {
-          // Create new object reference so React detects the change
-          this.onNodeUpdate(currentNode.id, { ...currentNode.data });
+        if (currentNode.type !== 'AutomationLoopNode') {
+          visitedNodes.add(currentNode.id);
         }
 
-        try {
-          currentData = await this.executeNode(currentNode, currentData);
-          (currentNode.data as Record<string, unknown>).status = 'Completed';
-          (currentNode.data as Record<string, unknown>).lastRun =
-            new Date().toISOString();
+        if (currentNode.type === 'AutomationLoopNode') {
+          (currentNode.data as Record<string, unknown>).status = 'Running';
           if (this.onNodeUpdate) {
-            // Create new object reference so React detects the change
             this.onNodeUpdate(currentNode.id, { ...currentNode.data });
           }
-        } catch (error) {
-          (currentNode.data as Record<string, unknown>).status = 'Error';
-          (currentNode.data as Record<string, unknown>).lastRun =
-            new Date().toISOString();
-          if (this.onNodeUpdate) {
-            // Create new object reference so React detects the change
-            this.onNodeUpdate(currentNode.id, { ...currentNode.data });
+
+          try {
+            const { doneNextNode, result } = await this.executeLoopNode(
+              currentNode,
+              currentData,
+            );
+            currentData = result;
+            (currentNode.data as Record<string, unknown>).status = 'Completed';
+            (currentNode.data as Record<string, unknown>).lastRun =
+              new Date().toISOString();
+            if (this.onNodeUpdate) {
+              this.onNodeUpdate(currentNode.id, { ...currentNode.data });
+            }
+
+            if (doneNextNode) {
+              this.log(
+                'info',
+                doneNextNode.id,
+                String(doneNextNode.type || 'node'),
+                'Moving to done path after loop',
+              );
+              currentNode = doneNextNode;
+            } else {
+              currentNode = null;
+            }
+          } catch (error) {
+            (currentNode.data as Record<string, unknown>).status = 'Error';
+            (currentNode.data as Record<string, unknown>).lastRun =
+              new Date().toISOString();
+            if (this.onNodeUpdate) {
+              this.onNodeUpdate(currentNode.id, { ...currentNode.data });
+            }
+            throw error;
           }
-          throw error;
+          continue;
         }
 
-        // Find next node
-        const nextNodes = this.getNextNodes(currentNode.id);
-        if (nextNodes.length > 0) {
-          const next = nextNodes[0];
-          this.log(
-            'info',
-            next.id,
-            String(next.type || 'node'),
-            'Moving to next node',
-          );
-          currentNode = next;
+        currentData = await this.runNodeWithStatus(currentNode, currentData);
+
+        const nextEdge = this.getFirstOutgoingEdge(currentNode.id);
+        if (nextEdge) {
+          const next = this.getTargetNode(nextEdge);
+          if (next) {
+            this.log(
+              'info',
+              next.id,
+              String(next.type || 'node'),
+              'Moving to next node',
+            );
+            currentNode = next;
+          } else {
+            currentNode = null;
+          }
         } else {
           this.log('info', 'workflow', 'engine', 'No next node. Ending.');
           currentNode = null;

package/packages/diagrams/src/lib/utils/automation-flow-processor.ts

@@ -5,6 +5,7 @@ import {
   AutomationApiNodeForm,
   AutomationFormattingNodeForm,
   AutomationEndNodeForm,
+  AutomationLoopNodeForm,
 } from '../types/automation-node-data-types';
 import { Node, Edge } from '@xyflow/react';
 
@@ -165,6 +166,22 @@ export class AutomationFlowProcessor {
       case 'end':
         // End node doesn't create new variables
         break;
+
+      case 'loop': {
+        const currentItemVar = formData.currentItemVariable ?? 'currentItem';
+        const loopIndexVar = formData.loopIndexVariable ?? 'loopIndex';
+        for (const varName of [currentItemVar, loopIndexVar]) {
+          if (!variables.find((v) => v.name === varName)) {
+            variables.push({
+              name: varName,
+              type: varName === loopIndexVar ? 'number' : 'object',
+              defaultValue: null,
+              description: `Loop iteration variable from ${formData.title}`,
+            });
+          }
+        }
+        break;
+      }
     }
   }
 
@@ -252,6 +269,12 @@ module.exports = { executeAutomationWorkflow };
       case 'end':
         code += this.generateEndNodeCode(formData as AutomationEndNodeForm);
         break;
+      case 'loop':
+        code += this.generateLoopNodeCode(
+          formData as AutomationLoopNodeForm,
+          this.edges,
+        );
+        break;
     }
 
     return code;
@@ -539,6 +562,53 @@ module.exports = { executeAutomationWorkflow };
 `;
   }
 
+  private generateLoopNodeCode(
+    formData: AutomationLoopNodeForm,
+    edges: Edge[],
+  ): string {
+    const maxIterations = formData.maxIterations ?? 100;
+    const currentItemVariable = formData.currentItemVariable ?? 'currentItem';
+    const loopIndexVariable = formData.loopIndexVariable ?? 'loopIndex';
+
+    const arrayExpr =
+      formData.arraySource.type === 'variable'
+        ? `context.variables['${formData.arraySource.variableName}']`
+        : '/* previous step output */ context.variables.__previousStepOutput';
+
+    const loopEdge = edges.find(
+      (edge) => edge.source === formData.nodeId && edge.sourceHandle === 'loop',
+    );
+    const doneEdge = edges.find(
+      (edge) => edge.source === formData.nodeId && edge.sourceHandle === 'done',
+    );
+
+    const bodyComment = loopEdge
+      ? `// Body starts at node: ${loopEdge.target}`
+      : '// Body entry not connected';
+    const doneComment = doneEdge
+      ? `// Continue on done path at node: ${doneEdge.target}`
+      : '// Done path not connected';
+
+    return `    // Loop Node: ${formData.title}
+    context.logs.push({
+      timestamp: new Date().toISOString(),
+      level: 'info',
+      nodeId: '${formData.nodeId}',
+      message: 'Starting for-each loop',
+    });
+
+    const __loopArray = Array.isArray(${arrayExpr}) ? ${arrayExpr} : [${arrayExpr}];
+    const __maxIter = ${maxIterations};
+    for (let __i = 0; __i < Math.min(__loopArray.length, __maxIter); __i++) {
+      context.variables['${currentItemVariable}'] = __loopArray[__i];
+      context.variables['${loopIndexVariable}'] = __i;
+      ${bodyComment}
+      // Execute loop body nodes here (back-edge returns to loop node)
+    }
+    ${doneComment}
+`;
+  }
+
   /**
    * Export workflow data as JSON
    */