@nyaruka/temba-components 0.129.7 → 0.129.9

package/src/flow/actions/add_input_labels.ts

@@ -8,5 +8,50 @@ export const add_input_labels: ActionConfig = {
   color: COLORS.update,
   render: (_node: Node, action: AddInputLabels) => {
     return html`<div>${renderNamedObjects(action.labels, 'label')}</div>`;
+  },
+
+  // Form-level transformations
+  toFormData: (action: AddInputLabels) => {
+    return {
+      labels: action.labels || [],
+      uuid: action.uuid
+    };
+  },
+  form: {
+    labels: {
+      type: 'select',
+      label: 'Labels',
+      helpText:
+        'Select labels to add to the input. Type a new label name to create it.',
+      required: true,
+      options: [],
+      multi: true,
+      searchable: true,
+      endpoint: '/api/v2/labels.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      placeholder: 'Search for labels or type to create new ones...',
+      createArbitraryOption: (input: string, options: any[]) => {
+        // Check if a label with this name already exists
+        const existing = options.find(
+          (option) =>
+            option.name.toLowerCase().trim() === input.toLowerCase().trim()
+        );
+        if (!existing && input.trim()) {
+          return {
+            name: input.trim(),
+            arbitrary: true
+          };
+        }
+        return null;
+      }
+    }
+  },
+  fromFormData: (formData: any): AddInputLabels => {
+    return {
+      uuid: formData.uuid,
+      type: 'add_input_labels',
+      labels: formData.labels || []
+    };
   }
 };

package/src/flow/actions/call_llm.ts

@@ -5,8 +5,62 @@ 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>`;
+  render: (_node: Node, action: CallLLM) => {
+    return html`<div
+      style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; max-width: 180px; max-height: 100px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;"
+    >
+      ${action.instructions}
+    </div>`;
+  },
+  form: {
+    llm: {
+      type: 'select',
+      required: true,
+      options: [],
+      endpoint: '/test-assets/select/llms.json',
+      searchable: true,
+      valueKey: 'uuid',
+      nameKey: 'name'
+    },
+    input: {
+      type: 'text',
+      required: true,
+      label: 'The input the AI will process',
+      evaluated: true,
+      placeholder: '@input'
+    },
+    instructions: {
+      type: 'textarea',
+      required: true,
+      label: 'Tell the AI what to do with the input',
+      evaluated: true,
+      placeholder: 'Enter instructions for the AI model...',
+      minHeight: 130,
+      helpText: 'The result can be referenced as **`@locals._llm_output`**'
+    }
+  },
+  layout: ['llm', 'input', 'instructions'],
+  toFormData: (action: CallLLM) => {
+    return {
+      uuid: action.uuid,
+      llm: action.llm
+        ? [{ value: action.llm.uuid, name: action.llm.name }]
+        : [],
+      input: action.input || '@input',
+      instructions: action.instructions || ''
+    };
+  },
+  fromFormData: (data: Record<string, any>) => {
+    const llmSelection =
+      Array.isArray(data.llm) && data.llm.length > 0 ? data.llm[0] : null;
+    return {
+      uuid: data.uuid,
+      type: 'call_llm',
+      input: data.input || '@input',
+      llm: llmSelection
+        ? { uuid: llmSelection.value, name: llmSelection.name }
+        : { uuid: '', name: '' },
+      instructions: data.instructions || ''
+    } as CallLLM;
   }
 };

package/src/flow/actions/call_webhook.ts

@@ -2,6 +2,19 @@ import { html } from 'lit-html';
 import { ActionConfig, COLORS } from '../types';
 import { Node, CallWebhook } from '../../store/flow-definition';
 
+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 call_webhook: ActionConfig = {
   name: 'Call Webhook',
   color: COLORS.call,
@@ -19,7 +32,7 @@ export const call_webhook: ActionConfig = {
       required: true,
       options: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],
       maxWidth: '120px',
-      searchable: true
+      searchable: false
     },
     url: {
       type: 'text',
@@ -51,23 +64,10 @@ export const call_webhook: ActionConfig = {
             ? 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;
+            return defaultPost;
           }
         } else {
           // For non-POST methods, clear the body if it was auto-generated or empty
@@ -80,7 +80,7 @@ export const call_webhook: ActionConfig = {
             isOriginallyEmpty ||
             !currentValue ||
             currentValue.trim() === '' ||
-            currentValue.trim() === defaultTemplate.trim()
+            currentValue.trim() === defaultPost.trim()
           ) {
             return '';
           }
@@ -100,7 +100,10 @@ export const call_webhook: ActionConfig = {
       items: ['headers'],
       collapsible: true,
       collapsed: true,
-      helpText: 'Configure authentication or custom headers'
+      helpText: 'Configure authentication or custom headers',
+      getGroupValueCount: (formData: any) => {
+        return formData.headers?.length || 0;
+      }
     },
     {
       type: 'group',
@@ -108,7 +111,14 @@ export const call_webhook: ActionConfig = {
       items: ['body'],
       collapsible: true,
       collapsed: true,
-      helpText: 'Configure the request payload'
+      helpText: 'Configure the request payload',
+      getGroupValueCount: (formData: any) => {
+        return !!(
+          formData.body &&
+          formData.body.trim() !== '' &&
+          formData.body !== defaultPost
+        );
+      }
     }
   ],
   toFormData: (action: CallWebhook) => {

package/src/flow/actions/open_ticket.ts

@@ -5,8 +5,79 @@ 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>`;
+  render: (_node: Node, action: OpenTicket) => {
+    return html`<div>${action.topic.name}</div>`;
+  },
+  form: {
+    topic: {
+      type: 'select',
+      required: true,
+      placeholder: 'Select a topic',
+      options: [],
+      endpoint: '/api/v2/topics.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      maxWidth: '200px'
+    },
+    assignee: {
+      type: 'select',
+      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',
+      required: false,
+      placeholder: 'Enter a note for the ticket (optional)',
+      minHeight: 100
+    }
+  },
+  layout: [{ type: 'row', items: ['topic', 'assignee'] }, 'note'],
+  toFormData: (action: OpenTicket) => {
+    return {
+      uuid: action.uuid,
+      topic: action.topic
+        ? [{ uuid: action.topic.uuid, name: action.topic.name }]
+        : [],
+      assignee: action.assignee
+        ? [{ uuid: action.assignee.uuid, name: action.assignee.name }]
+        : [],
+      note: action.note || ''
+    };
+  },
+  fromFormData: (data: Record<string, any>) => {
+    return {
+      uuid: data.uuid,
+      type: 'open_ticket',
+      topic:
+        data.topic && data.topic.length > 0
+          ? {
+              uuid: data.topic[0].uuid,
+              name: data.topic[0].name
+            }
+          : undefined,
+      assignee:
+        data.assignee && data.assignee.length > 0
+          ? {
+              uuid: data.assignee[0].uuid,
+              name:
+                data.assignee[0].name ||
+                [data.assignee[0].first_name, data.assignee[0].last_name].join(
+                  ' '
+                )
+            }
+          : undefined,
+      note: data.note || ''
+    } as OpenTicket;
   }
 };

package/src/flow/actions/send_msg.ts

@@ -29,18 +29,22 @@ export const send_msg: ActionConfig = {
   },
   form: {
     text: {
-      type: 'textarea',
-      label: 'Message Text',
+      type: 'message-editor',
+      label: 'Message',
       helpText:
-        'Enter the message to send. You can use expressions like @contact.name',
+        'Enter the message to send with optional attachments. You can use expressions like @contact.name',
       required: true,
       evaluated: true,
-      minHeight: 175
+      placeholder: 'Type your message here...',
+      maxAttachments: 10,
+      accept: '',
+      endpoint: '/api/v2/media.json',
+      counter: 'temba-charcount',
+      gsm: true,
+      autogrow: true
     },
     quick_replies: {
       type: 'select',
-      label: 'Quick Replies',
-      helpText: 'Add quick reply options for this message',
       options: [],
       multi: true,
       tags: true,
@@ -48,6 +52,137 @@ export const send_msg: ActionConfig = {
       placeholder: 'Add quick replies...',
       maxItems: 10,
       evaluated: true
+    },
+    runtime_attachments: {
+      type: 'array',
+      helpText: 'Add dynamic attachments using expressions',
+      itemLabel: 'Attachment',
+      maxItems: 10,
+      isEmptyItem: (item: any) => {
+        return !item.expression || item.expression.trim() === '';
+      },
+      itemConfig: {
+        type: {
+          type: 'select',
+          options: [
+            { value: 'image', label: 'Image' },
+            { value: 'audio', label: 'Audio' },
+            { value: 'video', label: 'Video' },
+            { value: 'document', label: 'Document' }
+          ],
+          required: true,
+          searchable: false
+        },
+        expression: {
+          type: 'text',
+          placeholder: 'Expression (e.g. @contact.photo)',
+          required: true,
+          evaluated: true
+        }
+      }
+    }
+  },
+  layout: [
+    'text',
+    {
+      type: 'group',
+      label: 'Quick Replies',
+      items: ['quick_replies'],
+      collapsible: true,
+      collapsed: (formData: any) => {
+        // Collapse only if there are no quick replies
+        return !formData.quick_replies || formData.quick_replies.length === 0;
+      },
+      getGroupValueCount: (formData: any) => {
+        return formData.quick_replies?.length || 0;
+      }
+    },
+    {
+      type: 'group',
+      label: 'Runtime Attachments',
+      items: ['runtime_attachments'],
+      collapsible: true,
+      collapsed: true,
+      helpText: 'Add dynamic attachments that are evaluated at runtime',
+      getGroupValueCount: (formData: any) => {
+        return (
+          formData.runtime_attachments?.filter(
+            (item: any) =>
+              item && item.expression && item.expression.trim() !== ''
+          ).length || 0
+        );
+      }
+    }
+  ],
+  toFormData: (action: SendMsg) => {
+    // Extract runtime attachments from the text field attachments
+    const runtimeAttachments: { type: string; expression: string }[] = [];
+    const staticAttachments: string[] = [];
+
+    if (action.attachments && Array.isArray(action.attachments)) {
+      action.attachments.forEach((attachment) => {
+        if (typeof attachment === 'string' && attachment.includes(':')) {
+          const colonIndex = attachment.indexOf(':');
+          const contentType = attachment.substring(0, colonIndex);
+          const value = attachment.substring(colonIndex + 1);
+
+          if (!contentType.includes('/')) {
+            // This is a runtime attachment
+            runtimeAttachments.push({
+              type: contentType,
+              expression: value
+            });
+          } else {
+            // This is a static attachment
+            staticAttachments.push(attachment);
+          }
+        }
+      });
+    }
+
+    return {
+      uuid: action.uuid,
+      text: action.text || '',
+      attachments: staticAttachments,
+      runtime_attachments: runtimeAttachments,
+      quick_replies: (action.quick_replies || []).map((reply) => ({
+        name: reply,
+        value: reply
+      }))
+    };
+  },
+  fromFormData: (data: Record<string, any>) => {
+    const result = {
+      uuid: data.uuid,
+      type: 'send_msg',
+      text: data.text || '',
+      attachments: [],
+      quick_replies: (data.quick_replies || []).map((reply: any) =>
+        typeof reply === 'string' ? reply : reply.value || reply.name || reply
+      )
+    };
+
+    // Combine static attachments from text field with runtime attachments
+    const staticAttachments = data.attachments || [];
+    const runtimeAttachments = (data.runtime_attachments || [])
+      .filter((item: any) => item && item.type && item.expression) // Filter out invalid items
+      .map(
+        (item: { type: string; expression: string }) =>
+          `${item.type}:${item.expression}`
+      );
+
+    result.attachments = [...staticAttachments, ...runtimeAttachments];
+
+    // Remove quick_replies if empty to match original format
+    if (result.quick_replies.length === 0) {
+      delete (result as any).quick_replies;
+    }
+
+    return result as SendMsg;
+  },
+  sanitize: (formData: any): void => {
+    if (formData.text && typeof formData.text === 'string') {
+      formData.text = formData.text.trim();
     }
   },
   validate: (action: SendMsg): ValidationResult => {
@@ -57,6 +192,35 @@ export const send_msg: ActionConfig = {
       errors.text = 'Message text is required';
     }
 
+    const attachments = action.attachments || [];
+    if (attachments.length > 10) {
+      const staticAttachments = attachments.filter(
+        (attachment) =>
+          typeof attachment === 'string' &&
+          attachment.substring(0, attachment.indexOf(':')).includes('/')
+      );
+
+      const runtimeAttachments = attachments.filter(
+        (attachment) =>
+          typeof attachment === 'string' &&
+          !attachment.substring(0, attachment.indexOf(':')).includes('/')
+      );
+
+      if (runtimeAttachments.length > 0) {
+        errors.runtime_attachments =
+          'Each message can only have up to 10 attachments';
+      }
+
+      if (staticAttachments.length > 0) {
+        const message = 'Each message can only have up to 10 total attachments';
+        if (errors.text) {
+          errors.text += ` ${message}`;
+        } else {
+          errors.text = message;
+        }
+      }
+    }
+
     return {
       valid: Object.keys(errors).length === 0,
       errors

package/src/flow/actions/set_run_result.ts

@@ -1,11 +1,94 @@
 import { html } from 'lit-html';
 import { ActionConfig, COLORS } from '../types';
 import { Node, SetRunResult } from '../../store/flow-definition';
+import { getStore } from '../../store/Store';
 
 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>`;
+  },
+  form: {
+    name: {
+      type: 'select',
+      label: 'Result Name',
+      helpText: 'Select an existing result name or type a new one',
+      required: true,
+      placeholder: 'Select or enter result name...',
+      createArbitraryOption: (input, options) => {
+        const exists = options.some(
+          (option: any) =>
+            option.value.toLowerCase() === input.toLowerCase() ||
+            option.name.toLowerCase() === input.toLowerCase()
+        );
+        return !exists && input.trim().length > 0
+          ? { value: input, name: input }
+          : null;
+      },
+      searchable: true,
+      clearable: false,
+      options: []
+    },
+    value: {
+      type: 'text',
+      label: 'Value',
+      helpText: 'The value to save for this result (can use expressions)',
+      required: false,
+      evaluated: true,
+      placeholder: 'Enter value...'
+    },
+    category: {
+      type: 'text',
+      label: 'Category',
+      helpText: 'Optional category for this result',
+      required: false,
+      placeholder: 'Enter category...'
+    }
+  },
+  layout: ['name', 'value', 'category'],
+  toFormData: (action: SetRunResult) => {
+    // Get existing flow results to populate the select options
+    const store = getStore();
+    const flowResults = store ? store.getState().getFlowResults() : [];
+
+    // Update the form configuration with dynamic options
+    const config = set_run_result;
+    if (config.form && config.form.name && config.form.name.type === 'select') {
+      (config.form.name as any).options = flowResults.map(
+        (result) => result.name
+      );
+    }
+
+    return {
+      uuid: action.uuid,
+      name: action.name || '',
+      value: action.value || '',
+      category: action.category || ''
+    };
+  },
+  fromFormData: (formData: any): SetRunResult => {
+    // Ensure name is a simple string, handling both direct values and select option objects
+    let name = formData.name || '';
+    if (Array.isArray(name) && name.length > 0) {
+      // If it's an array (from multi-select), take the first item
+      name = name[0];
+    }
+    if (typeof name === 'object' && name.value) {
+      // If it's an option object, extract the value
+      name = name.value;
+    }
+    if (typeof name === 'object' && name.name) {
+      // If it's an option object with name property, extract it
+      name = name.name;
+    }
+
+    return {
+      uuid: formData.uuid,
+      type: 'set_run_result',
+      name: String(name), // Ensure it's always a string
+      value: formData.value || '',
+      category: formData.category || ''
+    };
   }
 };

package/src/flow/config.ts

@@ -38,7 +38,9 @@ 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_ticket } from './nodes/split_by_ticket';
 import { split_by_webhook } from './nodes/split_by_webhook';
+import { split_by_llm_categorize } from './nodes/split_by_llm_categorize';
 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';
@@ -84,10 +86,12 @@ export const NODE_CONFIG: {
   split_by_contact_field,
   split_by_expression,
   split_by_groups,
+  split_by_llm_categorize,
   split_by_random,
   split_by_run_result,
   split_by_scheme,
   split_by_subflow,
+  split_by_ticket,
   split_by_webhook,
   wait_for_audio,
   wait_for_digits,