@flowuent-org/diagramming-core 1.4.0 → 1.4.1

package/apps/diagramming/src/AutomationDiagramData.ts

@@ -0,0 +1,770 @@
+import { MarkerType } from '@xyflow/react';
+
+// Default nodes for the automation diagram
+export const automationDefaultNodes = [
+  {
+    id: 'start-node',
+    type: 'AutomationStartNode',
+    position: { x: 100, y: 200 },
+    data: {
+      // Display data for the node UI
+      label: 'Workflow Trigger',
+      description: 'Workflow entry point. Triggered manually or on schedule.',
+      status: 'Ready',
+      lastRun: 'Never',
+      duration: '0.0s',
+      // iconName: 'PlayArrow', // Users must define their own icons
+
+      // Form data for configuration (keeping existing structure for compatibility)
+      formData: {
+        nodeId: 'start-node',
+        title: 'Workflow Trigger',
+        type: 'start',
+        triggerType: 'manual',
+        scheduleConfig: {
+          frequency: 'daily',
+          time: '09:00',
+          timezone: 'UTC',
+        },
+        eventConfig: {
+          webhookUrl: '',
+          eventType: 'webhook',
+          filters: [],
+        },
+        initialVariables: [
+          {
+            name: 'runId',
+            value: '{{timestamp}}',
+            type: 'string',
+          },
+          {
+            name: 'startTime',
+            value: '{{now}}',
+            type: 'string',
+          },
+        ],
+        outputVariable: 'workflowContext',
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
+  {
+    id: 'api-call-node',
+    type: 'AutomationApiNode',
+    position: { x: 500, y: 200 },
+    data: {
+      // Display data for the node UI
+      label: 'Discover Headlines',
+      description:
+        "This node extracts all news headlines from CNN's homepage using web scraping techniques.",
+      status: 'Ready',
+      lastRun: 'Never',
+      duration: '0.8s',
+      iconName: 'Api', // Users must define their own icons
+
+      // Form data for configuration
+      formData: {
+        nodeId: 'api-call-node',
+        title: 'Discover Headlines',
+        type: 'api',
+        method: 'GET',
+        url: 'https://jsonplaceholder.typicode.com/posts',
+        headers: [
+          { key: 'Content-Type', value: 'application/json', enabled: true },
+          { key: 'Accept', value: 'application/json', enabled: true },
+          { key: 'User-Agent', value: 'AutomationBot/1.0', enabled: true },
+        ],
+        queryParams: [
+          { key: '_limit', value: '15', enabled: true },
+          { key: 'userId', value: '1', enabled: true },
+        ],
+        body: '',
+        bodyType: 'json',
+        timeout: 30000,
+        retryCount: 3,
+        retryDelay: 1000,
+        responseVariable: 'postsResponse',
+        responseDataType: 'Object',
+        errorHandling: {
+          onError: 'retry',
+          maxRetries: 3,
+          fallbackValue: '{"error": "Failed to fetch posts data"}',
+        },
+        // Schema matching data for the three boxes
+        schemaMatch: {
+          matched: 5,
+          partial: 0,
+          ignored: 1,
+        },
+        // Configuration cards for dynamic display
+        configurationCards: [
+          {
+            icon: '⚙️',
+            label: 'GPT-5 Thinking mini · v1',
+            iconColor: '#ffffff',
+          },
+          {
+            icon: '🗄️',
+            label: 'KB: CNN_Homepage_Titles (18 items)',
+            iconColor: '#10b981',
+          },
+        ],
+        // AI Suggestions count and data
+        aiSuggestionsCount: 2,
+        aiSuggestions: [
+          {
+            id: '1',
+            title: 'Add Citation Extraction',
+            description: 'Automatically extract and format citations from article content.',
+            tags: ['classification', 'enhancement'],
+          },
+          {
+            id: '2',
+            title: 'Generate Bullet Summary',
+            description: 'Create a concise bullet-point summary of the article\'s main points.',
+            tags: ['classification', 'enhancement'],
+          },
+        ],
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
+  {
+    id: 'navigation-node',
+    type: 'AutomationNavigationNode',
+    position: { x: 600, y: 200 },
+    data: {
+      // Display data for the node UI
+      label: 'Navigate to Website',
+      description: 'Navigate to the target website and wait for page load',
+      status: 'Ready',
+      navigationType: 'navigate',
+      url: 'https://example.com',
+      lastRun: 'Never',
+      backgroundColor: '#181C25',
+      textColor: '#ffffff',
+      borderColor: '#1e293b',
+      iconName: 'Navigation',
+      // Form data for configuration
+      formData: {
+        nodeId: 'navigation-node',
+        title: 'Navigate to Website',
+        type: 'navigation',
+        navigationType: 'navigate',
+        url: 'https://example.com',
+        timeout: 30000,
+        retryCount: 3,
+        outputVariable: 'navigationResult',
+        errorHandling: {
+          onError: 'retry',
+          maxRetries: 3,
+          fallbackAction: 'skip',
+        },
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
+  {
+    id: 'data-formatting-node',
+    type: 'AutomationFormattingNode',
+    position: { x: 700, y: 200 },
+    data: {
+      // Display data for the node UI
+      label: 'Article Analyzer',
+      description:
+        'Extract and analyze article content, generate summaries and topic classifications.',
+      status: 'Ready',
+      lastRun: '2 minutes ago',
+      duration: '1.2s',
+      // iconName: 'Article', // Users must define their own icons
+
+      // Form data for configuration (keeping existing structure for compatibility)
+      formData: {
+        nodeId: 'data-formatting-node',
+        title: 'Article Analyzer',
+        type: 'formatting',
+        inputVariable: 'postsResponse',
+        formattingType: 'ai-powered',
+        aiFormatting: {
+          apiUrl:
+            'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent',
+          apiKey: 'PUT_GEMINI_API_KEY_HERE',
+          model: 'GPT-5 Thinking mini',
+          instruction:
+            'Extract and analyze article content, generate summaries and topic classifications. Return structured JSON with title, url, author, published_date, summary, topics, and confidence.',
+          temperature: 0.1,
+          maxTokens: 2048,
+          topP: 0.95,
+          systemPrompt:
+            'You are an article analysis assistant. Extract key information and provide structured analysis. Always return valid JSON format.',
+        },
+        outputVariable: 'analyzedArticle',
+        outputDataType: 'Object',
+        // Schema matching data for the three boxes
+        schemaMatch: {
+          matched: 4,
+          partial: 1,
+          ignored: 0,
+        },
+        // AI Reasoning data
+        aiReasoning: {
+          text: 'Analyzed the selected headline for key components and promises',
+        },
+        // Configuration cards for dynamic display
+        configurationCards: [
+          {
+            icon: '🧠',
+            label: 'GPT-5 Thinking mini · v1',
+            iconColor: '#ffffff',
+          },
+          {
+            icon: '📚',
+            label: 'KB: CNN_Articles (18 items)',
+            iconColor: '#10b981',
+          },
+        ],
+        // AI Suggestions count
+        aiSuggestionsCount: 2,
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
+  {
+    id: 'end-node',
+    type: 'AutomationEndNode',
+    position: { x: 1500, y: 200 },
+    data: {
+      // Display data for the node UI
+      label: 'Results Display',
+      description: 'Display analyzed article results to the user.',
+      status: 'Ready',
+      lastRun: '1 minute ago',
+      duration: '0.3s',
+      // iconName: 'Stop', // Users must define their own icons
+
+      // Form data for configuration (keeping existing structure for compatibility)
+      formData: {
+        nodeId: 'end-node',
+        title: 'Results Display',
+        type: 'end',
+        outputType: 'display',
+        displayConfig: {
+          format: 'table',
+          showInConsole: true,
+          showInUI: true,
+          maxRows: 100,
+        },
+        storeConfig: {
+          destination: 'database',
+          connectionString: '',
+          tableName: 'automation_results',
+          fileName: 'automation_output.json',
+          format: 'json',
+        },
+        sendConfig: {
+          method: 'email',
+          recipients: ['admin@example.com'],
+          subject: 'Automation Results',
+          template: 'The automation workflow has completed successfully.',
+          webhookUrl: '',
+        },
+        webhookConfig: {
+          url: '',
+          method: 'POST',
+          headers: [
+            { key: 'Content-Type', value: 'application/json' },
+            { key: 'Authorization', value: 'Bearer {{webhookToken}}' },
+          ],
+          payloadTemplate: '{{analyzedArticle}}',
+        },
+        // AI Suggestions count
+        aiSuggestionsCount: 2,
+        isPinned: false,
+        isBlock: false,
+        blocks: [],
+        parallelChildrenCount: 0,
+        conditions: {
+          combinator: 'and',
+          rules: [],
+        },
+      },
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
+  // =====================================
+  // Slack Integration Node
+  // =====================================
+  {
+    id: 'slack-node',
+    type: 'AutomationSlackNode',
+    position: { x: 1500, y: 450 },
+    data: {
+      label: 'Send Slack Notification',
+      description: 'Send a message to Slack channel',
+      operationType: 'send-message',
+      status: 'idle',
+      parameters: {
+        channel: 'automation-updates',
+        message: 'Workflow completed successfully! Check the results.',
+        slackAccessToken: '',
+        slackTokenExpiresAt: undefined,
+        slackTeamId: '',
+        slackTeamName: '',
+        slackUserId: '',
+        slackUserName: '',
+      },
+      slackAuth: {
+        clientId: '',
+        scopes: [
+          'chat:write',
+          'channels:read',
+          'users:read',
+        ],
+        isAuthenticated: false,
+        isLoading: false,
+      },
+      formData: {
+        nodeId: 'slack-node',
+        title: 'Send Slack Notification',
+        type: 'slack',
+        operationType: 'send-message',
+        channel: 'automation-updates',
+        message: 'Workflow completed successfully! Check the results.',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
+  // Telegram Integration Node
+  // =====================================
+  {
+    id: 'telegram-node',
+    type: 'AutomationTelegramNode',
+    position: { x: 1850, y: 450 },
+    data: {
+      label: 'Send Telegram Message',
+      description: 'Send a message via Telegram bot',
+      operationType: 'send-message',
+      status: 'idle',
+      parameters: {
+        chatId: '',
+        message: 'Workflow completed successfully!',
+        parseMode: 'HTML',
+        botToken: '',
+        botId: '',
+        botName: '',
+      },
+      telegramAuth: {
+        botToken: '',
+        isAuthenticated: false,
+        isLoading: false,
+      },
+      formData: {
+        nodeId: 'telegram-node',
+        title: 'Send Telegram Message',
+        type: 'telegram',
+        operationType: 'send-message',
+        chatId: '',
+        message: 'Workflow completed successfully!',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
+  // Interaction Node
+  // =====================================
+  {
+    id: 'interaction-node',
+    type: 'AutomationInteractionNode',
+    position: { x: 300, y: 450 },
+    data: {
+      label: 'Click Button',
+      description: 'Click on a button element',
+      interactionType: 'click',
+      status: 'Ready',
+      parameters: {
+        selector: 'button.submit-btn',
+        xpath: '',
+        text: '',
+        delay: 500,
+        timeout: 30000,
+        retryCount: 3,
+      },
+      formData: {
+        nodeId: 'interaction-node',
+        title: 'Click Button',
+        type: 'interaction',
+        interactionType: 'click',
+        selector: 'button.submit-btn',
+        delay: 500,
+        timeout: 30000,
+        retryCount: 3,
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
+  // Monitoring Node
+  // =====================================
+  {
+    id: 'monitoring-node',
+    type: 'AutomationMonitoringNode',
+    position: { x: 600, y: 450 },
+    data: {
+      label: 'Page Monitor',
+      description: 'Monitor and track changes on target pages or elements over time.',
+      status: 'Ready',
+      formData: {
+        nodeId: 'monitoring-node',
+        title: 'Page Monitor',
+        type: 'monitoring',
+      },
+      lastRun: 'Never',
+      iconName: 'Visibility',
+    },
+    width: 320,
+    height: 200,
+    measured: { width: 320, height: 200 },
+  },
+  // =====================================
+  // Decision Node
+  // =====================================
+  {
+    id: 'decision-node',
+    type: 'AutomationDecisionNode',
+    position: { x: 900, y: 650 },
+    data: {
+      label: 'Route by Condition',
+      description: 'Conditional branching / routing',
+      routingType: 'condition',
+      status: 'Need to Config',
+      parameters: {
+        combinator: 'and',
+        rules: [
+          { field: 'status', operator: 'equals', value: 'success' },
+        ],
+      },
+      formData: {
+        nodeId: 'decision-node',
+        title: 'Route by Condition',
+        type: 'decision',
+        routingType: 'condition',
+        combinator: 'and',
+        rules: [
+          { field: 'status', operator: 'equals', value: 'success' },
+        ],
+      },
+      lastRun: 'Never',
+      backgroundColor: '#181C25',
+      textColor: '#ffffff',
+      borderColor: '#1e293b',
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
+  // =====================================
+  // SMS Node
+  // =====================================
+  {
+    id: 'sms-node',
+    type: 'AutomationSmsNode',
+    position: { x: 300, y: 650 },
+    data: {
+      label: 'Send SMS',
+      description: 'Send SMS (recipientPhone)',
+      status: 'Need to Config',
+      parameters: {
+        recipientPhone: '+1 (555) 123-4567',
+        message: 'Your workflow step has completed.',
+        senderId: 'AutomationBot',
+        provider: 'twilio',
+      },
+      formData: {
+        nodeId: 'sms-node',
+        title: 'Send SMS',
+        type: 'sms',
+        recipientPhone: '+1 (555) 123-4567',
+        message: 'Your workflow step has completed.',
+        senderId: 'AutomationBot',
+        provider: 'twilio',
+      },
+      lastRun: 'Never',
+      backgroundColor: '#181C25',
+      textColor: '#ffffff',
+      borderColor: '#1e293b',
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
+  // =====================================
+  // Voice Call Node
+  // =====================================
+  {
+    id: 'voice-call-node',
+    type: 'AutomationVoiceCallNode',
+    position: { x: 600, y: 650 },
+    data: {
+      label: 'Voice Call',
+      description: 'Voice calls with spoken content',
+      status: 'Need to Config',
+      parameters: {
+        recipientPhone: '+1 (555) 987-6543',
+        spokenContent: 'Hello, this is an automated call from your workflow.',
+        voice: 'alloy',
+        language: 'en-US',
+      },
+      formData: {
+        nodeId: 'voice-call-node',
+        title: 'Voice Call',
+        type: 'voice-call',
+        recipientPhone: '+1 (555) 987-6543',
+        spokenContent: 'Hello, this is an automated call from your workflow.',
+        voice: 'alloy',
+        language: 'en-US',
+      },
+      lastRun: 'Never',
+      backgroundColor: '#181C25',
+      textColor: '#ffffff',
+      borderColor: '#1e293b',
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
+  // =====================================
+  // Sub-Workflow Node
+  // =====================================
+  {
+    id: 'workflow-node',
+    type: 'AutomationWorkflowNode',
+    position: { x: 1200, y: 650 },
+    data: {
+      label: 'Run Sub-Workflow',
+      description: 'Run/embed another workflow (workflowId)',
+      status: 'Need to Config',
+      parameters: {
+        workflowId: 'wf-notification-pipeline',
+        workflowName: 'Notification Pipeline',
+        waitForCompletion: true,
+        inputMapping: {
+          userId: '{{context.userId}}',
+          payload: '{{previousStep.output}}',
+        },
+      },
+      formData: {
+        nodeId: 'workflow-node',
+        title: 'Run Sub-Workflow',
+        type: 'workflow',
+        workflowId: 'wf-notification-pipeline',
+        workflowName: 'Notification Pipeline',
+        waitForCompletion: true,
+      },
+      lastRun: 'Never',
+      backgroundColor: '#181C25',
+      textColor: '#ffffff',
+      borderColor: '#1e293b',
+    },
+    width: 336,
+    height: 150,
+    measured: { width: 336, height: 150 },
+  },
+];
+
+// Default edges for the automation diagram
+export const automationDefaultEdges = [
+  {
+    id: 'edge-start-to-api',
+    source: 'start-node',
+    target: 'api-call-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: '',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#ffffff',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#ffffff',
+    },
+  },
+  {
+    id: 'edge-api-to-navigation',
+    source: 'api-call-node',
+    target: 'navigation-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: '',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#ffffff',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#ffffff',
+    },
+  },
+  {
+    id: 'edge-navigation-to-formatting',
+    source: 'navigation-node',
+    target: 'data-formatting-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: '',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#ffffff',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#ffffff',
+    },
+  },
+  {
+    id: 'edge-formatting-to-end',
+    source: 'data-formatting-node',
+    target: 'end-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: '',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#ffffff',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#ffffff',
+    },
+  },
+  // =====================================
+  // Slack Node Edge
+  // =====================================
+  {
+    id: 'edge-monitoring-to-slack',
+    source: 'monitoring-node',
+    target: 'slack-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Notify Team',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#4A154B',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#4A154B',
+    },
+  },
+  // =====================================
+  // Telegram Node Edge
+  // =====================================
+  {
+    id: 'edge-slack-to-telegram',
+    source: 'slack-node',
+    target: 'telegram-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Send Alert',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#0088cc',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#0088cc',
+    },
+  },
+  // =====================================
+  // Monitoring Node Edge
+  // =====================================
+  {
+    id: 'edge-interaction-to-monitoring',
+    source: 'interaction-node',
+    target: 'monitoring-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Monitor',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#10B981',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#10B981',
+    },
+  },
+];