@nyaruka/temba-components 0.129.10 → 0.130.0

package/src/flow/nodes/split_by_random.ts

@@ -1,9 +1,157 @@
 import { COLORS, NodeConfig } from '../types';
+import { Node, Category, Exit } from '../../store/flow-definition.d';
+import { generateUUID } from '../../utils';
+
+// Helper function to create a random router with categories
+const createRandomRouter = (
+  userCategories: string[],
+  existingCategories: Category[] = [],
+  existingExits: Exit[] = []
+) => {
+  const categories: Category[] = [];
+  const exits: Exit[] = [];
+
+  // Create categories and exits for user-defined buckets
+  userCategories.forEach((categoryName) => {
+    // Try to find existing category by name
+    const existingCategory = existingCategories.find(
+      (cat) => cat.name === categoryName
+    );
+    const existingExit = existingCategory
+      ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
+      : null;
+
+    const exitUuid = existingExit?.uuid || generateUUID();
+    const categoryUuid = existingCategory?.uuid || generateUUID();
+
+    categories.push({
+      uuid: categoryUuid,
+      name: categoryName,
+      exit_uuid: exitUuid
+    });
+
+    exits.push({
+      uuid: exitUuid,
+      destination_uuid: existingExit?.destination_uuid || null
+    });
+  });
+
+  return {
+    router: {
+      type: 'random' as const,
+      categories: categories
+    },
+    exits: exits
+  };
+};
 
 export const split_by_random: NodeConfig = {
   type: 'split_by_random',
   name: 'Split by Random',
   color: COLORS.split,
+  form: {
+    categories: {
+      type: 'array',
+      label: 'Buckets',
+      helpText: 'Define the buckets to randomly split contacts into',
+      required: true,
+      itemLabel: 'Bucket',
+      minItems: 2,
+      maxItems: 10,
+      isEmptyItem: (item: any) => {
+        return !item.name || item.name.trim() === '';
+      },
+      itemConfig: {
+        name: {
+          type: 'text',
+          placeholder: 'Bucket name',
+          required: true
+        }
+      }
+    }
+  },
+  layout: ['categories'],
+  validate: (formData: any) => {
+    const errors: { [key: string]: string } = {};
+
+    // Check for duplicate category names
+    if (formData.categories && Array.isArray(formData.categories)) {
+      const categories = formData.categories.filter(
+        (item: any) => item?.name && item.name.trim() !== ''
+      );
+
+      // Ensure minimum buckets
+      if (categories.length < 2) {
+        errors.categories = 'At least 2 buckets are required for random split';
+      }
+
+      // Find all categories that have duplicates (case-insensitive)
+      const duplicateCategories = [];
+      const lowerCaseMap = new Map();
+
+      // First pass: map lowercase names to all original cases
+      categories.forEach((category) => {
+        const lowerName = category.name.trim().toLowerCase();
+        if (!lowerCaseMap.has(lowerName)) {
+          lowerCaseMap.set(lowerName, []);
+        }
+        lowerCaseMap.get(lowerName).push(category.name.trim());
+      });
+
+      // Second pass: collect all names that appear more than once
+      lowerCaseMap.forEach((originalNames) => {
+        if (originalNames.length > 1) {
+          duplicateCategories.push(...originalNames);
+        }
+      });
+
+      if (duplicateCategories.length > 0) {
+        const uniqueDuplicates = [...new Set(duplicateCategories)];
+        errors.categories = `Duplicate bucket names found: ${uniqueDuplicates.join(
+          ', '
+        )}`;
+      }
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  toFormData: (node: Node) => {
+    // Extract categories from the existing node structure
+    const categories =
+      node.router?.categories?.map((cat) => ({ name: cat.name })) || [];
+
+    return {
+      uuid: node.uuid,
+      categories: categories
+    };
+  },
+  fromFormData: (formData: any, originalNode: Node): Node => {
+    // Get user categories
+    const userCategories = (formData.categories || [])
+      .filter((item: any) => item?.name?.trim())
+      .map((item: any) => item.name.trim());
+
+    // Create router and exits using existing data when possible
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+
+    const { router, exits } = createRandomRouter(
+      userCategories,
+      existingCategories,
+      existingExits
+    );
+
+    // Return the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: originalNode.actions || [],
+      router: router,
+      exits: exits
+    };
+  },
   router: {
     type: 'random'
   }

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,141 @@
-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)',
+      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,192 @@
-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 || '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
+    };
   }
 };

package/src/flow/types.ts

@@ -143,7 +143,7 @@ export interface TextareaFieldConfig extends BaseFieldConfig {
 
 export interface SelectFieldConfig extends BaseFieldConfig {
   type: 'select';
-  options?: string[] | { value: string; label: string }[];
+  options?: string[] | { value: string; name: string }[];
   multi?: boolean;
   clearable?: boolean;
   searchable?: boolean;
@@ -158,6 +158,7 @@ export interface SelectFieldConfig extends BaseFieldConfig {
   flavor?: 'small' | 'large';
   createArbitraryOption?: (input: string, options: any[]) => any;
   allowCreate?: boolean;
+  getDynamicOptions?: () => Array<{ value: string; name: string }>;
 }
 
 export interface KeyValueFieldConfig extends BaseFieldConfig {