@nyaruka/temba-components 0.129.10 → 0.129.11

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -1,6 +1,6 @@
 import { COLORS, NodeConfig } from '../types';
-import { Node } from '../../store/flow-definition';
-import { generateUUID } from '../../utils';
+import { CallLLM, Node } from '../../store/flow-definition';
+import { generateUUID, createMultiCategoryRouter } from '../../utils';
 import { html } from 'lit';
 
 export const split_by_llm_categorize: NodeConfig = {
@@ -92,7 +92,7 @@ export const split_by_llm_categorize: NodeConfig = {
   render: (node: Node) => {
     const callLlmAction = node.actions?.find(
       (action) => action.type === 'call_llm'
-    ) as any;
+    ) as CallLLM;
     return html`
       <div class="body">Categorize with ${callLlmAction.llm.name}</div>
     `;
@@ -135,7 +135,7 @@ export const split_by_llm_categorize: NodeConfig = {
     const callLlmUuid = existingCallLlmAction?.uuid || generateUUID();
 
     // Create call_llm action (using any type to match the example format)
-    const callLlmAction: any = {
+    const callLlmAction: CallLLM = {
       type: 'call_llm',
       uuid: callLlmUuid,
       llm: llmSelection
@@ -147,124 +147,21 @@ export const split_by_llm_categorize: NodeConfig = {
     };
 
     // Create categories and exits
-    const categories = [];
-    const exits = [];
-    const cases = [];
-
-    // Get existing categories from original node for UUID preservation
     const existingCategories = originalNode.router?.categories || [];
     const existingExits = originalNode.exits || [];
     const existingCases = originalNode.router?.cases || [];
 
-    // Add user categories
-    userCategories.forEach((categoryName: string) => {
-      // Check if this category already exists
-      const existingCategory = existingCategories.find(
-        (cat) => cat.name === categoryName
-      );
-      const existingExit = existingCategory
-        ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
-        : null;
-      const existingCase = existingCategory
-        ? existingCases.find(
-            (case_) => case_.category_uuid === existingCategory.uuid
-          )
-        : null;
-
-      // Use existing UUIDs if category name hasn't changed, otherwise generate new ones
-      const categoryUuid = existingCategory?.uuid || generateUUID();
-      const exitUuid = existingExit?.uuid || generateUUID();
-      const caseUuid = existingCase?.uuid || generateUUID();
-
-      categories.push({
-        uuid: categoryUuid,
-        name: categoryName,
-        exit_uuid: exitUuid
-      });
-
-      exits.push({
-        uuid: exitUuid,
-        destination_uuid: existingExit?.destination_uuid || null
-      });
-
-      cases.push({
-        uuid: caseUuid,
+    const { router, exits } = createMultiCategoryRouter(
+      '@locals._llm_output',
+      userCategories,
+      (categoryName) => ({
         type: 'has_only_text',
-        arguments: [categoryName],
-        category_uuid: categoryUuid
-      });
-    });
-
-    // Add "Other" category (default)
-    const existingOtherCategory = existingCategories.find(
-      (cat) => cat.name === 'Other'
-    );
-    const existingOtherExit = existingOtherCategory
-      ? existingExits.find(
-          (exit) => exit.uuid === existingOtherCategory.exit_uuid
-        )
-      : null;
-
-    const otherCategoryUuid = existingOtherCategory?.uuid || generateUUID();
-    const otherExitUuid = existingOtherExit?.uuid || generateUUID();
-
-    categories.push({
-      uuid: otherCategoryUuid,
-      name: 'Other',
-      exit_uuid: otherExitUuid
-    });
-    exits.push({
-      uuid: otherExitUuid,
-      destination_uuid: existingOtherExit?.destination_uuid || null
-    });
-
-    // Add "Failure" category
-    const existingFailureCategory = existingCategories.find(
-      (cat) => cat.name === 'Failure'
+        arguments: [categoryName]
+      }),
+      existingCategories,
+      existingExits,
+      existingCases
     );
-    const existingFailureExit = existingFailureCategory
-      ? existingExits.find(
-          (exit) => exit.uuid === existingFailureCategory.exit_uuid
-        )
-      : null;
-    const existingFailureCase = existingFailureCategory
-      ? existingCases.find(
-          (case_) =>
-            case_.category_uuid === existingFailureCategory.uuid &&
-            case_.arguments?.[0] === '<ERROR>'
-        )
-      : null;
-
-    const failureCategoryUuid = existingFailureCategory?.uuid || generateUUID();
-    const failureExitUuid = existingFailureExit?.uuid || generateUUID();
-    const failureCaseUuid = existingFailureCase?.uuid || generateUUID();
-
-    categories.push({
-      uuid: failureCategoryUuid,
-      name: 'Failure',
-      exit_uuid: failureExitUuid
-    });
-    exits.push({
-      uuid: failureExitUuid,
-      destination_uuid: existingFailureExit?.destination_uuid || null
-    });
-
-    // Add failure case for <ERROR>
-    cases.push({
-      uuid: failureCaseUuid,
-      type: 'has_only_text',
-      arguments: ['<ERROR>'],
-      category_uuid: failureCategoryUuid
-    });
-
-    // Create the router
-    const router = {
-      type: 'switch' as const,
-      categories: categories,
-      default_category_uuid: otherCategoryUuid,
-      operand: '@locals._llm_output',
-      cases: cases
-    };
 
     // Return the complete node
     return {

package/src/flow/nodes/split_by_subflow.ts

@@ -1,9 +1,159 @@
-import { enter_flow } from '../actions/enter_flow';
 import { COLORS, NodeConfig } from '../types';
+import { Node } from '../../store/flow-definition';
+import { generateUUID } from '../../utils';
+import { html } from 'lit';
 
 export const split_by_subflow: NodeConfig = {
   type: 'split_by_subflow',
-  name: 'Split by Subflow',
+  name: 'Enter a Flow',
   color: COLORS.execute,
-  action: enter_flow
+  form: {
+    flow: {
+      type: 'select',
+      required: true,
+      placeholder: 'Select a flow...',
+      helpText:
+        'Once the subflow is complete or expires, the contact will return here',
+      endpoint: '/api/v2/flows.json',
+      valueKey: 'uuid',
+      nameKey: 'name'
+    }
+  },
+  layout: ['flow'],
+  render: (node: Node) => {
+    const enterFlowAction = node.actions?.find(
+      (action) => action.type === 'enter_flow'
+    ) as any;
+    return html`
+      <div class="body">
+        ${enterFlowAction?.flow?.name || 'Configure subflow'}
+      </div>
+    `;
+  },
+  toFormData: (node: Node) => {
+    // Extract data from the existing node structure
+    const enterFlowAction = node.actions?.find(
+      (action) => action.type === 'enter_flow'
+    ) as any;
+
+    return {
+      uuid: node.uuid,
+      flow: enterFlowAction?.flow
+        ? [{ uuid: enterFlowAction.flow.uuid, name: enterFlowAction.flow.name }]
+        : []
+    };
+  },
+  fromFormData: (formData: any, originalNode: Node): Node => {
+    // Get flow selection
+    const flowSelection =
+      Array.isArray(formData.flow) && formData.flow.length > 0
+        ? formData.flow[0]
+        : null;
+
+    // Find existing enter_flow action to preserve its UUID
+    const existingEnterFlowAction = originalNode.actions?.find(
+      (action) => action.type === 'enter_flow'
+    );
+    const enterFlowUuid = existingEnterFlowAction?.uuid || generateUUID();
+
+    // Create enter_flow action
+    const enterFlowAction: any = {
+      type: 'enter_flow',
+      uuid: enterFlowUuid,
+      flow: flowSelection
+        ? {
+            uuid: flowSelection.uuid || flowSelection.value,
+            name: flowSelection.name
+          }
+        : { uuid: '', name: '' }
+    };
+
+    // Create categories and exits for Complete and Expired
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    // Find existing Complete category
+    const existingCompleteCategory = existingCategories.find(
+      (cat) => cat.name === 'Complete'
+    );
+    const existingCompleteExit = existingCompleteCategory
+      ? existingExits.find(
+          (exit) => exit.uuid === existingCompleteCategory.exit_uuid
+        )
+      : null;
+    const existingCompleteCase = existingCompleteCategory
+      ? existingCases.find(
+          (case_) => case_.category_uuid === existingCompleteCategory.uuid
+        )
+      : null;
+
+    const completeCategoryUuid =
+      existingCompleteCategory?.uuid || generateUUID();
+    const completeExitUuid = existingCompleteExit?.uuid || generateUUID();
+    const completeCaseUuid = existingCompleteCase?.uuid || generateUUID();
+
+    // Find existing Expired category
+    const existingExpiredCategory = existingCategories.find(
+      (cat) => cat.name === 'Expired'
+    );
+    const existingExpiredExit = existingExpiredCategory
+      ? existingExits.find(
+          (exit) => exit.uuid === existingExpiredCategory.exit_uuid
+        )
+      : null;
+
+    const expiredCategoryUuid = existingExpiredCategory?.uuid || generateUUID();
+    const expiredExitUuid = existingExpiredExit?.uuid || generateUUID();
+
+    const categories = [
+      {
+        uuid: completeCategoryUuid,
+        name: 'Complete',
+        exit_uuid: completeExitUuid
+      },
+      {
+        uuid: expiredCategoryUuid,
+        name: 'Expired',
+        exit_uuid: expiredExitUuid
+      }
+    ];
+
+    const exits = [
+      {
+        uuid: completeExitUuid,
+        destination_uuid: existingCompleteExit?.destination_uuid || null
+      },
+      {
+        uuid: expiredExitUuid,
+        destination_uuid: existingExpiredExit?.destination_uuid || null
+      }
+    ];
+
+    const cases = [
+      {
+        uuid: completeCaseUuid,
+        type: 'has_only_text',
+        arguments: ['completed'],
+        category_uuid: completeCategoryUuid
+      }
+    ];
+
+    // Create the router
+    const router = {
+      type: 'switch' as const,
+      categories: categories,
+      default_category_uuid: expiredCategoryUuid,
+      operand: '@child.status',
+      cases: cases
+    };
+
+    // Return the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: [enterFlowAction],
+      router: router,
+      exits: exits
+    };
+  }
 };

package/src/flow/nodes/split_by_ticket.ts

@@ -1,19 +1,142 @@
-import { open_ticket } from '../actions/open_ticket';
-import { NodeConfig } from '../types';
+import { COLORS, NodeConfig } from '../types';
+import { Node, OpenTicket } from '../../store/flow-definition';
+import { generateUUID, createSuccessFailureRouter } from '../../utils';
+import { html } from 'lit';
 
 export const split_by_ticket: NodeConfig = {
   type: 'split_by_ticket',
-  action: open_ticket,
-  router: {
-    type: 'switch',
-    defaultCategory: 'Failure',
-    operand: '@locals._new_ticket',
-    rules: [
+  name: 'Open Ticket',
+  color: COLORS.create,
+  form: {
+    topic: {
+      type: 'select',
+      label: 'Topic',
+      required: true,
+      placeholder: 'Select a topic',
+      options: [],
+      endpoint: '/api/v2/topics.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      maxWidth: '200px'
+    },
+    assignee: {
+      type: 'select',
+      label: 'Assignee',
+      required: false,
+      placeholder: 'Select an agent (optional)',
+      options: [],
+      endpoint: '/api/v2/users.json',
+      valueKey: 'uuid',
+      getName: (item: {
+        first_name?: string;
+        last_name?: string;
+        name?: string;
+      }) => {
+        return item.name || [item.first_name, item.last_name].join(' ');
+      },
+      clearable: true
+    },
+    note: {
+      type: 'textarea',
+      label: 'Note',
+      required: false,
+      placeholder: 'Enter a note for the ticket (optional)',
+      minHeight: 100
+    }
+  },
+  layout: [{ type: 'row', items: ['topic', 'assignee'] }, 'note'],
+  render: (node: Node) => {
+    const openTicketAction = node.actions?.find(
+      (action) => action.type === 'open_ticket'
+    ) as OpenTicket;
+    return html`
+      <div class="body">
+        ${openTicketAction?.topic?.name || 'Configure ticket'}
+      </div>
+    `;
+  },
+  toFormData: (node: Node) => {
+    // Extract data from the existing node structure
+    const openTicketAction = node.actions?.find(
+      (action) => action.type === 'open_ticket'
+    ) as any;
+
+    return {
+      uuid: node.uuid,
+      topic: openTicketAction?.topic
+        ? [
+            {
+              uuid: openTicketAction.topic.uuid,
+              name: openTicketAction.topic.name
+            }
+          ]
+        : [],
+      assignee: openTicketAction?.assignee
+        ? [
+            {
+              uuid: openTicketAction.assignee.uuid,
+              name: openTicketAction.assignee.name
+            }
+          ]
+        : [],
+      note: openTicketAction?.note || ''
+    };
+  },
+  fromFormData: (formData: any, originalNode: Node): Node => {
+    // Find existing open_ticket action to preserve its UUID
+    const existingOpenTicketAction = originalNode.actions?.find(
+      (action) => action.type === 'open_ticket'
+    );
+    const openTicketUuid = existingOpenTicketAction?.uuid || generateUUID();
+
+    // Create open_ticket action
+    const openTicketAction: OpenTicket = {
+      type: 'open_ticket',
+      uuid: openTicketUuid,
+      topic:
+        formData.topic && formData.topic.length > 0
+          ? {
+              uuid: formData.topic[0].uuid,
+              name: formData.topic[0].name
+            }
+          : undefined,
+      assignee:
+        formData.assignee && formData.assignee.length > 0
+          ? {
+              uuid: formData.assignee[0].uuid,
+              name:
+                formData.assignee[0].name ||
+                [
+                  formData.assignee[0].first_name,
+                  formData.assignee[0].last_name
+                ].join(' ')
+            }
+          : undefined,
+      note: formData.note || ''
+    };
+
+    // Create categories and exits for Success and Failure
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const { router, exits } = createSuccessFailureRouter(
+      '@locals._new_ticket',
       {
         type: 'has_text',
-        arguments: [],
-        categoryName: 'Success'
-      }
-    ]
+        arguments: []
+      },
+      existingCategories,
+      existingExits,
+      existingCases
+    );
+
+    // Return the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: [openTicketAction],
+      router: router,
+      exits: exits
+    };
   }
 };

package/src/flow/nodes/split_by_webhook.ts

@@ -1,19 +1,194 @@
-import { call_webhook } from '../actions/call_webhook';
-import { NodeConfig } from '../types';
+import { COLORS, NodeConfig } from '../types';
+import { CallWebhook, Node } from '../../store/flow-definition';
+import { generateUUID, createSuccessFailureRouter } from '../../utils';
+import { html } from 'lit';
+
+const defaultPost = `@(json(object(
+  "contact", object(
+    "uuid", contact.uuid, 
+    "name", contact.name, 
+    "urn", contact.urn
+  ),
+  "flow", object(
+    "uuid", run.flow.uuid, 
+    "name", run.flow.name
+  ),
+  "results", foreach_value(results, extract_object, "value", "category")
+)))`;
 
 export const split_by_webhook: NodeConfig = {
   type: 'split_by_webhook',
-  action: call_webhook,
-  router: {
-    type: 'switch',
-    defaultCategory: 'Failure',
-    operand: '@webhook.status',
-    rules: [
+  name: 'Call Webhook',
+  color: COLORS.call,
+  form: {
+    method: {
+      type: 'select',
+      required: true,
+      options: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],
+      maxWidth: '120px',
+      searchable: false
+    },
+    url: {
+      type: 'text',
+      required: true,
+      evaluated: true,
+      placeholder: 'https://example.com/webhook'
+    },
+    headers: {
+      type: 'key-value',
+      sortable: true,
+      keyPlaceholder: 'Header name',
+      valuePlaceholder: 'Header value',
+      minRows: 0
+    },
+    body: {
+      type: 'textarea',
+      evaluated: true,
+      placeholder: 'Request body content (JSON, XML, etc.)',
+      minHeight: 200,
+      dependsOn: ['method'],
+      computeValue: (
+        values: Record<string, any>,
+        currentValue: any,
+        originalValues?: Record<string, any>
+      ) => {
+        // Check if method is POST (handle both string and select object formats)
+        const method =
+          Array.isArray(values.method) && values.method.length > 0
+            ? values.method[0].value || values.method[0].name
+            : values.method;
+
+        if (method === 'POST') {
+          // For POST, provide the template if body is empty or was never set by user
+          if (!currentValue || currentValue.trim() === '') {
+            return defaultPost;
+          }
+        } else {
+          // For non-POST methods, clear the body if it was auto-generated or empty
+          // Check if the original body was empty (user never specified a body)
+          const originalBody = originalValues?.body || '';
+          const isOriginallyEmpty = !originalBody || originalBody.trim() === '';
+
+          // Clear if: originally empty, contains default template, or is currently empty
+          if (
+            isOriginallyEmpty ||
+            !currentValue ||
+            currentValue.trim() === '' ||
+            currentValue.trim() === defaultPost.trim()
+          ) {
+            return '';
+          }
+        }
+
+        return currentValue; // Keep existing value if user has customized it
+      }
+    }
+  },
+  layout: [
+    // Row with method and URL side by side
+    { type: 'row', items: ['method', 'url'] },
+    // Advanced group with nested layouts
+    {
+      type: 'group',
+      label: 'Headers',
+      items: ['headers'],
+      collapsible: true,
+      collapsed: true,
+      helpText: 'Configure authentication or custom headers',
+      getGroupValueCount: (formData: any) => {
+        return formData.headers?.length || 0;
+      }
+    },
+    {
+      type: 'group',
+      label: 'Body',
+      items: ['body'],
+      collapsible: true,
+      collapsed: true,
+      helpText: 'Configure the request payload',
+      getGroupValueCount: (formData: any) => {
+        return !!(
+          formData.body &&
+          formData.body.trim() !== '' &&
+          formData.body !== defaultPost
+        );
+      }
+    }
+  ],
+  render: (node: Node) => {
+    const callWebhookAction = node.actions?.find(
+      (action) => action.type === 'call_webhook'
+    ) as CallWebhook;
+    return html`
+      <div
+        class="body"
+        style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
+      >
+        ${callWebhookAction?.url || 'Configure webhook'}
+      </div>
+    `;
+  },
+  toFormData: (node: Node) => {
+    // Extract data from the existing node structure
+    const callWebhookAction = node.actions?.find(
+      (action) => action.type === 'call_webhook'
+    ) as any;
+
+    return {
+      uuid: node.uuid,
+      method: callWebhookAction?.method
+        ? [{ value: callWebhookAction.method, name: callWebhookAction.method }]
+        : [{ value: 'GET', name: 'GET' }],
+      url: callWebhookAction?.url || '',
+      headers: callWebhookAction?.headers || [],
+      body: callWebhookAction?.body || ''
+    };
+  },
+  fromFormData: (formData: any, originalNode: Node): Node => {
+    // Get method selection
+    const methodSelection =
+      Array.isArray(formData.method) && formData.method.length > 0
+        ? formData.method[0]
+        : { value: 'GET', name: 'GET' };
+
+    // Find existing call_webhook action to preserve its UUID
+    const existingCallWebhookAction = originalNode.actions?.find(
+      (action) => action.type === 'call_webhook'
+    );
+    const callWebhookUuid = existingCallWebhookAction?.uuid || generateUUID();
+
+    // Create call_webhook action
+    const callWebhookAction: CallWebhook = {
+      type: 'call_webhook',
+      uuid: callWebhookUuid,
+      method: methodSelection.value,
+      url: formData.url || '',
+      headers: formData.headers || [],
+      body: formData.body || ''
+    };
+
+    // Create categories and exits for Success and Failure
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const { router, exits } = createSuccessFailureRouter(
+      '@webhook.status',
       {
         type: 'has_number_between',
-        arguments: ['200', '299'],
-        categoryName: 'Success'
-      }
-    ]
+        arguments: ['200', '299']
+      },
+      existingCategories,
+      existingExits,
+      existingCases
+    );
+
+    // Return the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: [callWebhookAction],
+      router: router,
+      exits: exits
+    };
   }
 };