@nyaruka/temba-components 0.129.8 → 0.129.10

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

@@ -102,7 +102,7 @@ export const call_webhook: ActionConfig = {
       collapsed: true,
       helpText: 'Configure authentication or custom headers',
       getGroupValueCount: (formData: any) => {
-        return formData.headers?.length + 10 || 0;
+        return formData.headers?.length || 0;
       }
     },
     {

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/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,

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -0,0 +1,277 @@
+import { COLORS, NodeConfig } from '../types';
+import { Node } from '../../store/flow-definition';
+import { generateUUID } from '../../utils';
+import { html } from 'lit';
+
+export const split_by_llm_categorize: NodeConfig = {
+  type: 'split_by_llm_categorize',
+  name: 'Split by AI',
+  color: COLORS.call,
+  form: {
+    llm: {
+      type: 'select',
+      label: 'LLM',
+      helpText: 'Select the LLM to use for categorization',
+      required: true,
+      endpoint: '/test-assets/select/llms.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      placeholder: 'Select an LLM...'
+    },
+    input: {
+      type: 'text',
+      label: 'Input',
+      helpText: 'The input to categorize (usually @input)',
+      required: true,
+      evaluated: true,
+      placeholder: '@input'
+    },
+    categories: {
+      type: 'array',
+      label: 'Categories',
+      helpText: 'Define the categories for classification',
+      required: true,
+      itemLabel: 'Category',
+      minItems: 1,
+      maxItems: 10,
+      isEmptyItem: (item: any) => {
+        return !item.name || item.name.trim() === '';
+      },
+      itemConfig: {
+        name: {
+          type: 'text',
+          placeholder: 'Category name',
+          required: true
+        }
+      }
+    }
+  },
+  layout: ['llm', 'input', '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() !== ''
+      );
+
+      // 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 category names found: ${uniqueDuplicates.join(
+          ', '
+        )}`;
+      }
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  render: (node: Node) => {
+    const callLlmAction = node.actions?.find(
+      (action) => action.type === 'call_llm'
+    ) as any;
+    return html`
+      <div class="body">Categorize with ${callLlmAction.llm.name}</div>
+    `;
+  },
+  toFormData: (node: Node) => {
+    // Extract data from the existing node structure
+    const callLlmAction = node.actions?.find(
+      (action) => action.type === 'call_llm'
+    ) as any;
+    const categories =
+      node.router?.categories
+        ?.filter((cat) => cat.name !== 'Other' && cat.name !== 'Failure')
+        .map((cat) => ({ name: cat.name })) || [];
+
+    return {
+      uuid: node.uuid,
+      llm: callLlmAction?.llm
+        ? [{ value: callLlmAction.llm.uuid, name: callLlmAction.llm.name }]
+        : [],
+      input: callLlmAction?.input || '@input',
+      categories: categories
+    };
+  },
+  fromFormData: (formData: any, originalNode: Node): Node => {
+    // Get LLM selection
+    const llmSelection =
+      Array.isArray(formData.llm) && formData.llm.length > 0
+        ? formData.llm[0]
+        : null;
+
+    // Get user categories
+    const userCategories = (formData.categories || [])
+      .filter((item: any) => item?.name?.trim())
+      .map((item: any) => item.name.trim());
+
+    // Find existing call_llm action to preserve its UUID
+    const existingCallLlmAction = originalNode.actions?.find(
+      (action) => action.type === 'call_llm'
+    );
+    const callLlmUuid = existingCallLlmAction?.uuid || generateUUID();
+
+    // Create call_llm action (using any type to match the example format)
+    const callLlmAction: any = {
+      type: 'call_llm',
+      uuid: callLlmUuid,
+      llm: llmSelection
+        ? { uuid: llmSelection.value, name: llmSelection.name }
+        : { uuid: '', name: '' },
+      instructions: `@(prompt("categorize", slice(node.categories, 0, -2)))`,
+      input: formData.input || '@input',
+      output_local: '_llm_output'
+    };
+
+    // 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,
+        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'
+    );
+    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 {
+      uuid: originalNode.uuid,
+      actions: [callLlmAction],
+      router: router,
+      exits: exits
+    };
+  }
+};

package/src/flow/nodes/split_by_ticket.ts

@@ -0,0 +1,19 @@
+import { open_ticket } from '../actions/open_ticket';
+import { NodeConfig } from '../types';
+
+export const split_by_ticket: NodeConfig = {
+  type: 'split_by_ticket',
+  action: open_ticket,
+  router: {
+    type: 'switch',
+    defaultCategory: 'Failure',
+    operand: '@locals._new_ticket',
+    rules: [
+      {
+        type: 'has_text',
+        arguments: [],
+        categoryName: 'Success'
+      }
+    ]
+  }
+};

package/src/flow/nodes/wait_for_response.ts

@@ -1,7 +1,34 @@
 import { COLORS, NodeConfig } from '../types';
+import { Node } from '../../store/flow-definition';
 
 export const wait_for_response: NodeConfig = {
   type: 'wait_for_response',
   name: 'Wait for Response',
-  color: COLORS.wait
+  color: COLORS.wait,
+  form: {
+    result_name: {
+      type: 'text',
+      label: 'Result Name',
+      helpText: 'The name to save the response as',
+      placeholder: 'response'
+    }
+  },
+  layout: ['timeout', 'result_name'],
+  toFormData: (node: Node) => {
+    return {
+      uuid: node.uuid,
+      result_name: node.router?.result_name || 'response'
+    };
+  },
+  fromFormData: (formData: any, originalNode: Node): Node => {
+    const router: any = {
+      ...originalNode.router,
+      result_name: formData.result_name || 'response'
+    };
+
+    return {
+      ...originalNode,
+      router
+    };
+  }
 };