@nyaruka/temba-components 0.129.3 → 0.129.4

package/src/flow/Plumber.ts

@@ -232,10 +232,6 @@ export class Plumber {
     if (!this.jsPlumb) return;
 
     const inbound = this.jsPlumb.select({ target: nodeId });
-
-    // keep track of our source ids that are connected, we'll need new endpoints
-    const sourceIds = inbound.map((connection) => connection.sourceId);
-
     const exitIds =
       Array.from(
         document.getElementById(nodeId)?.querySelectorAll('.exit') || []
@@ -246,11 +242,6 @@ export class Plumber {
     inbound.deleteAll();
     this.jsPlumb.select({ source: exitIds }).deleteAll();
     this.jsPlumb.selectEndpoints({ source: exitIds }).deleteAll();
-
-    // Recreate source endpoints for each source
-    sourceIds.forEach((exitId) => {
-      this.makeSource(exitId);
-    });
   }
 
   public removeExitConnection(exitId: string) {

package/src/flow/actions/add_contact_groups.ts

@@ -0,0 +1,42 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, AddToGroup } from '../../store/flow-definition';
+import { renderNamedObjects } from '../utils';
+
+export const add_contact_groups: ActionConfig = {
+  name: 'Add to Group',
+  color: COLORS.add,
+  render: (_node: Node, action: AddToGroup) => {
+    return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;
+  },
+
+  // Form-level transformations - default 1:1 mapping for this case
+  toFormData: (action: AddToGroup) => {
+    return {
+      groups: action.groups || [],
+      uuid: action.uuid
+    };
+  },
+  form: {
+    groups: {
+      type: 'select',
+      label: 'Groups',
+      helpText: 'Select the groups to add the contact to',
+      required: true,
+      options: [],
+      multi: true,
+      searchable: true,
+      endpoint: '/api/v2/groups.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      placeholder: 'Search for groups...'
+    }
+  },
+  fromFormData: (formData: any): AddToGroup => {
+    return {
+      uuid: formData.uuid,
+      type: 'add_contact_groups',
+      groups: formData.groups || []
+    };
+  }
+};

package/src/flow/actions/add_contact_urn.ts

@@ -0,0 +1,17 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, AddContactUrn } from '../../store/flow-definition';
+import { urnSchemeMap } from '../utils';
+
+export const add_contact_urn: ActionConfig = {
+  name: 'Add Contact URN',
+  color: COLORS.update,
+  render: (_node: Node, action: AddContactUrn) => {
+    const friendlyScheme = urnSchemeMap[action.scheme] || action.scheme;
+    return html`<div
+      style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
+    >
+      Add ${friendlyScheme} <b>${action.path}</b>
+    </div>`;
+  }
+};

package/src/flow/actions/add_input_labels.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, AddInputLabels } from '../../store/flow-definition';
+import { renderNamedObjects } from '../utils';
+
+export const add_input_labels: ActionConfig = {
+  name: 'Add Input Labels',
+  color: COLORS.update,
+  render: (_node: Node, action: AddInputLabels) => {
+    return html`<div>${renderNamedObjects(action.labels, 'label')}</div>`;
+  }
+};

package/src/flow/actions/call_classifier.ts

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

package/src/flow/actions/call_llm.ts

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

package/src/flow/actions/call_resthook.ts

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

package/src/flow/actions/call_webhook.ts

@@ -0,0 +1,133 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, CallWebhook } from '../../store/flow-definition';
+
+export const call_webhook: ActionConfig = {
+  name: 'Call Webhook',
+  color: COLORS.call,
+  render: (_node: Node, action: CallWebhook) => {
+    return html`<div
+      style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
+    >
+      ${action.url}
+    </div>`;
+  },
+  evaluated: ['url', 'headers', 'body'], // keep for backward compatibility
+  form: {
+    method: {
+      type: 'select',
+      required: true,
+      options: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],
+      maxWidth: '120px',
+      searchable: true
+    },
+    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;
+
+        const defaultTemplate = `@(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")
+)))`;
+
+        if (method === 'POST') {
+          // For POST, provide the template if body is empty or was never set by user
+          if (!currentValue || currentValue.trim() === '') {
+            return defaultTemplate;
+          }
+        } 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() === defaultTemplate.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'
+    },
+    {
+      type: 'group',
+      label: 'Body',
+      items: ['body'],
+      collapsible: true,
+      collapsed: true,
+      helpText: 'Configure the request payload'
+    }
+  ],
+  toFormData: (action: CallWebhook) => {
+    return {
+      uuid: action.uuid,
+      url: action.url || '',
+      method: [{ value: action.method, name: action.method }],
+      headers: action.headers || [],
+      body: action.body || ''
+    };
+  },
+  fromFormData: (data: Record<string, any>) => {
+    return {
+      uuid: data.uuid,
+      type: 'call_webhook',
+      url: data.url,
+      method: data.method[0].value,
+      headers: data.headers || [],
+      body: data.body || ''
+    } as CallWebhook;
+  }
+};

package/src/flow/actions/enter_flow.ts

@@ -0,0 +1,15 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, EnterFlow } from '../../store/flow-definition';
+
+export const enter_flow: ActionConfig = {
+  name: 'Enter a Flow',
+  color: COLORS.execute,
+  render: (_node: Node, action: EnterFlow) => {
+    return html`<div
+      style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
+    >
+      Enter <b>${action.flow.name}</b>
+    </div>`;
+  }
+};

package/src/flow/actions/open_ticket.ts

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

package/src/flow/actions/play_audio.ts

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

package/src/flow/actions/remove_contact_groups.ts

@@ -0,0 +1,66 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS, ValidationResult } from '../types';
+import { Node, RemoveFromGroup } from '../../store/flow-definition';
+import { renderNamedObjects } from '../utils';
+
+export const remove_contact_groups: ActionConfig = {
+  name: 'Remove from Group',
+  color: COLORS.remove,
+  render: (_node: Node, action: RemoveFromGroup) => {
+    if (action.all_groups) {
+      return html`<div>Remove from all groups</div>`;
+    }
+    return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;
+  },
+  toFormData: (action: RemoveFromGroup) => {
+    return {
+      uuid: action.uuid,
+      all_groups: action.all_groups || false,
+      groups: action.groups || []
+    };
+  },
+  form: {
+    groups: {
+      type: 'select',
+      label: 'Groups',
+      helpText: 'Select the groups to remove the contact from',
+      options: [],
+      multi: true,
+      searchable: true,
+      endpoint: '/api/v2/groups.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      placeholder: 'Search for groups...',
+      conditions: {
+        visible: (formData) => !formData.all_groups
+      }
+    },
+    all_groups: {
+      type: 'checkbox',
+      label: 'Remove from All Groups',
+      helpText:
+        'Check this to remove the contact from all groups instead of specific ones'
+    }
+  },
+  validate: (action: RemoveFromGroup): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    if (!action.all_groups && (!action.groups || action.groups.length === 0)) {
+      errors.groups =
+        'At least one group must be selected or check "Remove from All Groups"';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  fromFormData: (formData: any): RemoveFromGroup => {
+    return {
+      uuid: formData.uuid,
+      type: 'remove_contact_groups',
+      groups: formData.all_groups ? [] : formData.groups || [],
+      all_groups: formData.all_groups || false
+    };
+  }
+};

package/src/flow/actions/request_optin.ts

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

package/src/flow/actions/say_msg.ts

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

package/src/flow/actions/send_broadcast.ts

@@ -0,0 +1,35 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, SendBroadcast } from '../../store/flow-definition';
+import { renderNamedObjects } from '../utils';
+
+export const send_broadcast: ActionConfig = {
+  name: 'Send Broadcast',
+  color: COLORS.broadcast,
+  render: (_node: Node, action: SendBroadcast) => {
+    const hasGroups = action.groups && action.groups.length > 0;
+    const hasContacts = action.contacts && action.contacts.length > 0;
+
+    return html`<div>
+      <div
+        style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; margin-bottom: 0.5em"
+      >
+        ${action.text}
+      </div>
+      ${hasGroups
+        ? html`<div style="margin-bottom: 0.25em">
+            <div style="font-weight: bold; margin-bottom: 0.25em">Groups:</div>
+            ${renderNamedObjects(action.groups, 'group')}
+          </div>`
+        : null}
+      ${hasContacts
+        ? html`<div>
+            <div style="font-weight: bold; margin-bottom: 0.25em">
+              Contacts:
+            </div>
+            ${renderNamedObjects(action.contacts, 'contact')}
+          </div>`
+        : null}
+    </div>`;
+  }
+};

package/src/flow/actions/send_email.ts

@@ -0,0 +1,60 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS, ValidationResult } from '../types';
+import { Node, SendEmail } from '../../store/flow-definition';
+import { renderStringList } from '../utils';
+import { Icon } from '../../Icons';
+
+export const send_email: ActionConfig = {
+  name: 'Send Email',
+  color: COLORS.send,
+  render: (_node: Node, action: SendEmail) => {
+    return html`<div>
+      <div>${renderStringList(action.addresses, Icon.email)}</div>
+      <div style="margin-top: 0.5em">
+        <div
+          style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
+        >
+          ${action.subject}
+        </div>
+      </div>
+    </div>`;
+  },
+
+  form: {
+    addresses: {
+      type: 'select',
+      label: 'Recipients',
+      options: [],
+      multi: true,
+      searchable: true,
+      placeholder: 'Search for contacts...',
+      emails: true
+    },
+    subject: {
+      type: 'text',
+      label: 'Subject',
+      required: true,
+      placeholder: 'Enter email subject',
+      maxLength: 255
+    },
+    body: {
+      type: 'textarea',
+      required: true,
+      evaluated: true,
+      rows: 4,
+      minHeight: 75
+    }
+  },
+  validate: (action: SendEmail): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    if (!action.addresses || action.addresses.length === 0) {
+      errors.addresses = 'At least one recipient email address is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  }
+};

package/src/flow/actions/send_msg.ts

@@ -0,0 +1,58 @@
+import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { ActionConfig, COLORS, ValidationResult } from '../types';
+import { Node, SendMsg } from '../../store/flow-definition';
+
+export const send_msg: ActionConfig = {
+  name: 'Send Message',
+  color: COLORS.send,
+  render: (_node: Node, action: SendMsg) => {
+    const text = action.text.replace(/\n/g, '<br>');
+    return html`
+      ${unsafeHTML(text)}
+      ${action.quick_replies?.length > 0
+        ? html`<div class="quick-replies">
+            ${action.quick_replies.map((reply) => {
+              return html`<div class="quick-reply">${reply}</div>`;
+            })}
+          </div>`
+        : null}
+    `;
+  },
+  form: {
+    text: {
+      type: 'textarea',
+      label: 'Message Text',
+      helpText:
+        'Enter the message to send. You can use expressions like @contact.name',
+      required: true,
+      evaluated: true,
+      rows: 5,
+      minHeight: 75
+    },
+    quick_replies: {
+      type: 'select',
+      label: 'Quick Replies',
+      helpText: 'Add quick reply options for this message',
+      options: [],
+      multi: true,
+      tags: true,
+      searchable: true,
+      placeholder: 'Add quick replies...',
+      maxItems: 10,
+      evaluated: true
+    }
+  },
+  validate: (action: SendMsg): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    if (!action.text || action.text.trim() === '') {
+      errors.text = 'Message text is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  }
+};

package/src/flow/actions/set_contact_channel.ts

@@ -0,0 +1,13 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, SetContactChannel } from '../../store/flow-definition';
+
+export const set_contact_channel: ActionConfig = {
+  name: 'Update Contact Channel',
+  color: COLORS.update,
+  render: (_node: Node, action: SetContactChannel) => {
+    return html`<div>
+      Set contact channel to <b>${action.channel.name}</b>
+    </div>`;
+  }
+};

package/src/flow/actions/set_contact_field.ts

@@ -0,0 +1,13 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, SetContactField } from '../../store/flow-definition';
+
+export const set_contact_field: ActionConfig = {
+  name: 'Update Contact Field',
+  color: COLORS.update,
+  render: (_node: Node, action: SetContactField) => {
+    return html`<div>
+      Set <b>${action.field.name}</b> to <b>${action.value}</b>
+    </div>`;
+  }
+};

package/src/flow/actions/set_contact_language.ts

@@ -0,0 +1,11 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, SetContactLanguage } from '../../store/flow-definition';
+
+export const set_contact_language: ActionConfig = {
+  name: 'Update Contact Language',
+  color: COLORS.update,
+  render: (_node: Node, action: SetContactLanguage) => {
+    return html`<div>Set contact language to <b>${action.language}</b></div>`;
+  }
+};

package/src/flow/actions/set_contact_name.ts

@@ -0,0 +1,11 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, SetContactName } from '../../store/flow-definition';
+
+export const set_contact_name: ActionConfig = {
+  name: 'Update Contact',
+  color: COLORS.update,
+  render: (_node: Node, action: SetContactName) => {
+    return html`<div>Set contact name to <b>${action.name}</b></div>`;
+  }
+};

package/src/flow/actions/set_contact_status.ts

@@ -0,0 +1,11 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, SetContactStatus } from '../../store/flow-definition';
+
+export const set_contact_status: ActionConfig = {
+  name: 'Update Contact Status',
+  color: COLORS.update,
+  render: (_node: Node, action: SetContactStatus) => {
+    return html`<div>Set contact status to <b>${action.status}</b></div>`;
+  }
+};

package/src/flow/actions/set_run_result.ts

@@ -0,0 +1,11 @@
+import { html } from 'lit-html';
+import { ActionConfig, COLORS } from '../types';
+import { Node, SetRunResult } from '../../store/flow-definition';
+
+export const set_run_result: ActionConfig = {
+  name: 'Save Flow Result',
+  color: COLORS.save,
+  render: (_node: Node, action: SetRunResult) => {
+    return html`<div>Save ${action.value} as <b>${action.name}</b></div>`;
+  }
+};