@nyaruka/temba-components 0.129.3 → 0.129.5

package/src/flow/actions/split_by_expression_example.ts

@@ -0,0 +1,88 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+
+// utility function to generate category from operand
+const generateCategoryFromOperand = (operand: string): string => {
+  if (!operand) return '';
+
+  // clean up the operand to make a reasonable category name
+  return operand
+    .toLowerCase()
+    .replace(/[^a-z0-9\s]/g, '') // remove special chars
+    .replace(/\s+/g, '_') // replace spaces with underscores
+    .slice(0, 20); // limit length
+};
+
+export const split_by_expression: ActionConfig = {
+  name: 'Split by Expression',
+  color: COLORS.split,
+  form: {
+    operand: {
+      type: 'text',
+      label: 'Split by',
+      required: true,
+      evaluated: true,
+      placeholder: 'Enter expression to evaluate'
+    },
+    rules: {
+      type: 'array',
+      label: 'Rules',
+      sortable: true,
+      minItems: 1,
+      itemLabel: 'Rule',
+      itemConfig: {
+        operator: {
+          type: 'select',
+          label: 'Operator',
+          required: true,
+          options: [
+            { value: 'contains', label: 'contains' },
+            { value: 'equals', label: 'equals' },
+            { value: 'starts_with', label: 'starts with' },
+            { value: 'regex', label: 'regex' }
+          ]
+        },
+        operand: {
+          type: 'text',
+          label: 'Value',
+          required: true,
+          evaluated: true,
+          placeholder: 'Value to compare against'
+        },
+        category: {
+          type: 'text',
+          label: 'Category',
+          required: true,
+          placeholder: 'Category name for this rule'
+        }
+      },
+      // handle changes at the item level
+      onItemChange: (
+        itemIndex: number,
+        field: string,
+        value: any,
+        allItems: any[]
+      ) => {
+        const updatedItems = [...allItems];
+        const item = { ...updatedItems[itemIndex] };
+
+        // update the changed field
+        item[field] = value;
+
+        // if operand changed and category is empty, auto-generate category
+        if (
+          field === 'operand' &&
+          (!item.category || item.category.trim() === '')
+        ) {
+          item.category = generateCategoryFromOperand(value);
+        }
+
+        updatedItems[itemIndex] = item;
+        return updatedItems;
+      }
+    }
+  },
+  render: (_node: any, action: any) => {
+    return html`<div>${action.operand || 'Split by expression'}</div>`;
+  }
+};

package/src/flow/actions/start_session.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, StartSession } from '../../store/flow-definition';
+
+export const start_session: ActionConfig = {
+  name: 'Start Session',
+  color: COLORS.execute,
+  render: (_node: Node, _action: StartSession) => {
+    // This will need to be implemented based on the actual render logic
+    return html`<div>Start Session</div>`;
+  }
+};

package/src/flow/actions/transfer_airtime.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, TransferAirtime } from '../../store/flow-definition';
+
+export const transfer_airtime: ActionConfig = {
+  name: 'Transfer Airtime',
+  color: COLORS.send,
+  render: (_node: Node, _action: TransferAirtime) => {
+    // This will need to be implemented based on the actual render logic
+    return html`<div>Transfer Airtime</div>`;
+  }
+};

package/src/flow/config.ts

@@ -1,238 +1,99 @@
-import { TemplateResult } from 'lit-html';
-import {
-  renderAddContactUrn,
-  renderAddInputLabels,
-  renderAddToGroups,
-  renderCallClassifier,
-  renderCallLLM,
-  renderCallResthook,
-  renderCallWebhook,
-  renderEnterFlow,
-  renderOpenTicket,
-  renderPlayAudio,
-  renderRemoveFromGroups,
-  renderRequestOptin,
-  renderSayMsg,
-  renderSendBroadcast,
-  renderSendEmail,
-  renderSendMsg,
-  renderSetContactChannel,
-  renderSetContactField,
-  renderSetContactLanguage,
-  renderSetContactName,
-  renderSetContactStatus,
-  renderSetRunResult,
-  renderStartSession,
-  renderTransferAirtime,
-  renderWaitForAudio,
-  renderWaitForDigits,
-  renderWaitForImage,
-  renderWaitForLocation,
-  renderWaitForMenu,
-  renderWaitForResponse,
-  renderWaitForVideo
-} from './render';
+// Re-export all types and utilities
+export * from './types';
+import type { ActionConfig, NodeConfig } from './types';
 
-export interface UIConfig {
-  name: string;
-  color: string;
-  render?: (node: any, action: any) => TemplateResult;
-}
+// Import all action configurations
+import { add_input_labels } from './actions/add_input_labels';
+import { add_contact_urn } from './actions/add_contact_urn';
+import { set_contact_field } from './actions/set_contact_field';
+import { set_contact_channel } from './actions/set_contact_channel';
+import { set_contact_language } from './actions/set_contact_language';
+import { set_contact_status } from './actions/set_contact_status';
+import { send_broadcast } from './actions/send_broadcast';
+import { set_run_result } from './actions/set_run_result';
+import { send_msg } from './actions/send_msg';
+import { send_email } from './actions/send_email';
+import { start_session } from './actions/start_session';
+import { open_ticket } from './actions/open_ticket';
+import { call_webhook } from './actions/call_webhook';
+import { call_classifier } from './actions/call_classifier';
+import { call_resthook } from './actions/call_resthook';
+import { call_llm } from './actions/call_llm';
+import { transfer_airtime } from './actions/transfer_airtime';
+import { set_contact_name } from './actions/set_contact_name';
+import { add_contact_groups } from './actions/add_contact_groups';
+import { remove_contact_groups } from './actions/remove_contact_groups';
+import { request_optin } from './actions/request_optin';
+import { say_msg } from './actions/say_msg';
+import { play_audio } from './actions/play_audio';
+import { enter_flow } from './actions/enter_flow';
 
-const COLORS = {
-  send: '#3498db',
-  update: '#01c1af',
-  broadcast: '#8e5ea7',
-  call: '#e68628',
-  create: '#df419f',
-  save: '#1a777c',
-  split: '#aaaaaa',
-  execute: '#666666',
-  wait: '#4d7dad',
-  add: '#309c42',
-  remove: '#e74c3c'
+// Import all node configurations
+import { execute_actions } from './nodes/execute_actions';
+import { split_by_airtime } from './nodes/split_by_airtime';
+import { split_by_contact_field } from './nodes/split_by_contact_field';
+import { split_by_expression } from './nodes/split_by_expression';
+import { split_by_groups } from './nodes/split_by_groups';
+import { split_by_random } from './nodes/split_by_random';
+import { split_by_run_result } from './nodes/split_by_run_result';
+import { split_by_scheme } from './nodes/split_by_scheme';
+import { split_by_subflow } from './nodes/split_by_subflow';
+import { split_by_webhook } from './nodes/split_by_webhook';
+import { wait_for_audio } from './nodes/wait_for_audio';
+import { wait_for_digits } from './nodes/wait_for_digits';
+import { wait_for_image } from './nodes/wait_for_image';
+import { wait_for_location } from './nodes/wait_for_location';
+import { wait_for_menu } from './nodes/wait_for_menu';
+import { wait_for_response } from './nodes/wait_for_response';
+import { wait_for_video } from './nodes/wait_for_video';
+
+export const ACTION_CONFIG: {
+  [key: string]: ActionConfig;
+} = {
+  add_input_labels,
+  add_contact_urn,
+  set_contact_field,
+  set_contact_channel,
+  set_contact_language,
+  set_contact_status,
+  send_broadcast,
+  set_run_result,
+  send_msg,
+  send_email,
+  start_session,
+  open_ticket,
+  call_webhook,
+  call_classifier,
+  call_resthook,
+  call_llm,
+  enter_flow,
+  transfer_airtime,
+  set_contact_name,
+  add_contact_groups,
+  remove_contact_groups,
+  request_optin,
+  say_msg,
+  play_audio
 };
 
-export const EDITOR_CONFIG: {
-  [key: string]: UIConfig;
+export const NODE_CONFIG: {
+  [key: string]: NodeConfig;
 } = {
-  add_input_labels: {
-    name: 'Add Labels',
-    color: COLORS.update,
-    render: renderAddInputLabels
-  },
-  add_contact_urn: {
-    name: 'Add Contact URN',
-    color: COLORS.update,
-    render: renderAddContactUrn
-  },
-  set_contact_field: {
-    name: 'Update Contact Field',
-    color: COLORS.update,
-    render: renderSetContactField
-  },
-  set_contact_channel: {
-    name: 'Update Contact Channel',
-    color: COLORS.update,
-    render: renderSetContactChannel
-  },
-  set_contact_language: {
-    name: 'Update Contact Language',
-    color: COLORS.update,
-    render: renderSetContactLanguage
-  },
-  set_contact_status: {
-    name: 'Update Contact Status',
-    color: COLORS.update,
-    render: renderSetContactStatus
-  },
-  send_broadcast: {
-    name: 'Send Broadcast',
-    color: COLORS.broadcast,
-    render: renderSendBroadcast
-  },
-  set_run_result: {
-    name: 'Save Flow Result',
-    color: COLORS.save,
-    render: renderSetRunResult
-  },
-  send_msg: {
-    name: 'Send Message',
-    color: COLORS.send,
-    render: renderSendMsg
-  },
-  send_email: {
-    name: 'Send Email',
-    color: COLORS.broadcast,
-    render: renderSendEmail
-  },
-  start_session: {
-    name: 'Start Somebody Else',
-    color: COLORS.broadcast,
-    render: renderStartSession
-  },
-  open_ticket: {
-    name: 'Open Ticket',
-    color: COLORS.execute,
-    render: renderOpenTicket
-  },
-  call_webhook: {
-    name: 'Call Webhook',
-    color: COLORS.call,
-    render: renderCallWebhook
-  },
-  call_classifier: {
-    name: 'Call Classifier',
-    color: COLORS.call,
-    render: renderCallClassifier
-  },
-  call_resthook: {
-    name: 'Call Resthook',
-    color: COLORS.call,
-    render: renderCallResthook
-  },
-  call_llm: {
-    name: 'Call AI',
-    color: COLORS.call,
-    render: renderCallLLM
-  },
-  enter_flow: {
-    name: 'Enter Subflow',
-    color: COLORS.execute,
-    render: renderEnterFlow
-  },
-  transfer_airtime: {
-    name: 'Send Airtime',
-    color: COLORS.call,
-    render: renderTransferAirtime
-  },
-  wait_for_response: {
-    name: 'Wait for Response',
-    color: COLORS.wait,
-    render: renderWaitForResponse
-  },
-  wait_for_menu: {
-    name: 'Wait for Menu Selection',
-    color: COLORS.wait,
-    render: renderWaitForMenu
-  },
-  wait_for_digits: {
-    name: 'Wait for Digits',
-    color: COLORS.wait,
-    render: renderWaitForDigits
-  },
-  wait_for_audio: {
-    name: 'Wait for Audio',
-    color: COLORS.wait,
-    render: renderWaitForAudio
-  },
-  wait_for_video: {
-    name: 'Wait for Video',
-    color: COLORS.wait,
-    render: renderWaitForVideo
-  },
-  wait_for_image: {
-    name: 'Wait for Image',
-    color: COLORS.wait,
-    render: renderWaitForImage
-  },
-  wait_for_location: {
-    name: 'Wait for Location',
-    color: COLORS.wait,
-    render: renderWaitForLocation
-  },
-  set_contact_name: {
-    name: 'Update Contact',
-    color: '#01c1af',
-    render: renderSetContactName
-  },
-  add_contact_groups: {
-    name: 'Add to Group',
-    color: COLORS.add,
-    render: renderAddToGroups
-  },
-  remove_contact_groups: {
-    name: 'Remove from Group',
-    color: COLORS.remove,
-    render: renderRemoveFromGroups
-  },
-  request_optin: {
-    name: 'Request Opt-in',
-    color: COLORS.send,
-    render: renderRequestOptin
-  },
-  say_msg: {
-    name: 'Say Message',
-    color: COLORS.send,
-    render: renderSayMsg
-  },
-  play_audio: {
-    name: 'Play Audio',
-    color: COLORS.send,
-    render: renderPlayAudio
-  },
-  split_by_run_result: {
-    name: 'Split by Flow Result',
-    color: COLORS.split
-  },
-  split_by_expression: {
-    name: 'Split by Expression',
-    color: COLORS.split
-  },
-  split_by_contact_field: {
-    name: 'Split by <Contact Field Name>',
-    color: COLORS.split
-  },
-  split_by_groups: {
-    name: 'Split by Group',
-    color: COLORS.split
-  },
-  split_by_scheme: {
-    name: 'Split by URN Type',
-    color: COLORS.split
-  },
-  split_by_random: {
-    name: 'Split by Random',
-    color: COLORS.split
-  }
+  execute_actions,
+  split_by_airtime,
+  split_by_contact_field,
+  split_by_expression,
+  split_by_groups,
+  split_by_random,
+  split_by_run_result,
+  split_by_scheme,
+  split_by_subflow,
+  split_by_webhook,
+  wait_for_audio,
+  wait_for_digits,
+  wait_for_image,
+  wait_for_location,
+  wait_for_menu,
+  wait_for_response,
+  wait_for_video
 };

package/src/flow/nodes/execute_actions.ts

@@ -0,0 +1,5 @@
+import { NodeConfig } from '../types';
+
+export const execute_actions: NodeConfig = {
+  type: 'execute_actions'
+};

package/src/flow/nodes/split_by_airtime.ts

@@ -0,0 +1,9 @@
+import { transfer_airtime } from '../actions/transfer_airtime';
+import { COLORS, NodeConfig } from '../types';
+
+export const split_by_airtime: NodeConfig = {
+  type: 'split_by_airtime',
+  name: 'Split by Airtime Transfer',
+  color: COLORS.send,
+  action: transfer_airtime
+};

package/src/flow/nodes/split_by_contact_field.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const split_by_contact_field: NodeConfig = {
+  type: 'split_by_contact_field',
+  name: 'Split by <Contact Field Name>',
+  color: COLORS.split
+};

package/src/flow/nodes/split_by_expression.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const split_by_expression: NodeConfig = {
+  type: 'split_by_expression',
+  name: 'Split by Expression',
+  color: COLORS.split
+};

package/src/flow/nodes/split_by_groups.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const split_by_groups: NodeConfig = {
+  type: 'split_by_groups',
+  name: 'Split by Group',
+  color: COLORS.split
+};

package/src/flow/nodes/split_by_random.ts

@@ -0,0 +1,10 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const split_by_random: NodeConfig = {
+  type: 'split_by_random',
+  name: 'Split by Random',
+  color: COLORS.split,
+  router: {
+    type: 'random'
+  }
+};

package/src/flow/nodes/split_by_run_result.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const split_by_run_result: NodeConfig = {
+  type: 'split_by_run_result',
+  name: 'Split by Flow Result',
+  color: COLORS.split
+};

package/src/flow/nodes/split_by_scheme.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const split_by_scheme: NodeConfig = {
+  type: 'split_by_scheme',
+  name: 'Split by URN Type',
+  color: COLORS.split
+};

package/src/flow/nodes/split_by_subflow.ts

@@ -0,0 +1,9 @@
+import { enter_flow } from '../actions/enter_flow';
+import { COLORS, NodeConfig } from '../types';
+
+export const split_by_subflow: NodeConfig = {
+  type: 'split_by_subflow',
+  name: 'Split by Subflow',
+  color: COLORS.execute,
+  action: enter_flow
+};

package/src/flow/nodes/split_by_webhook.ts

@@ -0,0 +1,19 @@
+import { call_webhook } from '../actions/call_webhook';
+import { NodeConfig } from '../types';
+
+export const split_by_webhook: NodeConfig = {
+  type: 'split_by_webhook',
+  action: call_webhook,
+  router: {
+    type: 'switch',
+    defaultCategory: 'Failure',
+    operand: '@webhook.status',
+    rules: [
+      {
+        type: 'has_number_between',
+        arguments: ['200', '299'],
+        categoryName: 'Success'
+      }
+    ]
+  }
+};

package/src/flow/nodes/wait_for_audio.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const wait_for_audio: NodeConfig = {
+  type: 'wait_for_audio',
+  name: 'Wait for Audio',
+  color: COLORS.wait
+};

package/src/flow/nodes/wait_for_digits.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const wait_for_digits: NodeConfig = {
+  type: 'wait_for_digits',
+  name: 'Wait for Digits',
+  color: COLORS.wait
+};

package/src/flow/nodes/wait_for_image.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const wait_for_image: NodeConfig = {
+  type: 'wait_for_image',
+  name: 'Wait for Image',
+  color: COLORS.wait
+};

package/src/flow/nodes/wait_for_location.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const wait_for_location: NodeConfig = {
+  type: 'wait_for_location',
+  name: 'Wait for Location',
+  color: COLORS.wait
+};

package/src/flow/nodes/wait_for_menu.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const wait_for_menu: NodeConfig = {
+  type: 'wait_for_menu',
+  name: 'Wait for Menu Selection',
+  color: COLORS.wait
+};

package/src/flow/nodes/wait_for_response.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const wait_for_response: NodeConfig = {
+  type: 'wait_for_response',
+  name: 'Wait for Response',
+  color: COLORS.wait
+};

package/src/flow/nodes/wait_for_video.ts

@@ -0,0 +1,7 @@
+import { COLORS, NodeConfig } from '../types';
+
+export const wait_for_video: NodeConfig = {
+  type: 'wait_for_video',
+  name: 'Wait for Video',
+  color: COLORS.wait
+};