@nyaruka/temba-components 0.129.10 → 0.130.0

package/src/flow/actions/set_contact_language.ts

@@ -1,11 +1,82 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, COLORS, ValidationResult } from '../types';
 import { Node, SetContactLanguage } from '../../store/flow-definition';
+import { getStore } from '../../store/Store';
 
 export const set_contact_language: ActionConfig = {
-  name: 'Update Contact Language',
+  name: 'Update Language',
   color: COLORS.update,
   render: (_node: Node, action: SetContactLanguage) => {
-    return html`<div>Set contact language to <b>${action.language}</b></div>`;
+    const languageNames = new Intl.DisplayNames(['en'], {
+      type: 'language'
+    });
+    return html`<div>Set to <b>${languageNames.of(action.language)}</b></div>`;
+  },
+  form: {
+    language: {
+      type: 'select',
+      label: 'Language',
+      required: true,
+      searchable: true,
+      clearable: false,
+      valueKey: 'value',
+      nameKey: 'name',
+      helpText: 'Select the language to set for the contact',
+      getDynamicOptions: () => {
+        const store = getStore();
+        const workspace = store?.getState().workspace;
+        if (workspace?.languages && Array.isArray(workspace.languages)) {
+          const languageNames = new Intl.DisplayNames(['en'], {
+            type: 'language'
+          });
+          return workspace.languages.map((languageCode: string) => ({
+            value: languageCode,
+            name: languageNames.of(languageCode) || languageCode
+          }));
+        }
+        return [];
+      }
+    }
+  },
+  toFormData: (action: SetContactLanguage) => {
+    // Convert the language code back to the option object format expected by the form
+    if (action.language) {
+      const languageNames = new Intl.DisplayNames(['en'], {
+        type: 'language'
+      });
+      return {
+        language: [
+          {
+            value: action.language,
+            name: languageNames.of(action.language) || action.language
+          }
+        ],
+        uuid: action.uuid
+      };
+    }
+    return {
+      language: null,
+      uuid: action.uuid
+    };
+  },
+  fromFormData: (formData: any): SetContactLanguage => {
+    return {
+      uuid: formData.uuid,
+      type: 'set_contact_language',
+      language: formData.language[0].value
+    };
+  },
+
+  validate: (formData: any): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    if (!formData.language) {
+      errors.language = 'Language is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
   }
 };

package/src/flow/actions/set_contact_name.ts

@@ -1,11 +1,39 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, COLORS, ValidationResult } from '../types';
 import { Node, SetContactName } from '../../store/flow-definition';
 
 export const set_contact_name: ActionConfig = {
-  name: 'Update Contact',
+  name: 'Update Name',
   color: COLORS.update,
   render: (_node: Node, action: SetContactName) => {
-    return html`<div>Set contact name to <b>${action.name}</b></div>`;
+    return html`<div>Set to <b>${action.name}</b></div>`;
+  },
+  form: {
+    name: {
+      type: 'text',
+      label: 'Name',
+      placeholder: 'Enter contact name...',
+      required: true,
+      evaluated: true,
+      helpText:
+        'The new name for the contact. You can use expressions like @contact.name'
+    }
+  },
+  validate: (formData: SetContactName): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    if (!formData.name || formData.name.trim() === '') {
+      errors.name = 'Name is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  sanitize: (formData: SetContactName): void => {
+    if (formData.name && typeof formData.name === 'string') {
+      formData.name = formData.name.trim();
+    }
   }
 };

package/src/flow/actions/set_contact_status.ts

@@ -1,11 +1,44 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, COLORS, ValidationResult } from '../types';
 import { Node, SetContactStatus } from '../../store/flow-definition';
+import { titleCase } from '../../utils';
 
 export const set_contact_status: ActionConfig = {
-  name: 'Update Contact Status',
+  name: 'Update Status',
   color: COLORS.update,
   render: (_node: Node, action: SetContactStatus) => {
-    return html`<div>Set contact status to <b>${action.status}</b></div>`;
+    return html`<div>Set to <b>${titleCase(action.status)}</b></div>`;
+  },
+  form: {
+    status: {
+      type: 'select',
+      label: 'Status',
+      required: true,
+      searchable: false,
+      clearable: false,
+      options: [
+        { value: 'active', name: 'Active' },
+        { value: 'archived', name: 'Archived' },
+        { value: 'stopped', name: 'Stopped' },
+        { value: 'blocked', name: 'Blocked' }
+      ],
+      helpText: 'Select the status to set for the contact'
+    }
+  },
+  validate: (formData: SetContactStatus): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    if (!formData.status) {
+      errors.status = 'Status is required';
+    } else if (
+      !['active', 'archived', 'stopped', 'blocked'].includes(formData.status)
+    ) {
+      errors.status = 'Invalid status selected';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
   }
 };

package/src/flow/actions/set_run_result.ts

@@ -7,7 +7,9 @@ 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>`;
+    return html`<div>
+      Save <b>${action.value}</b> as <b>${action.name}</b>
+    </div>`;
   },
   form: {
     name: {
@@ -28,7 +30,15 @@ export const set_run_result: ActionConfig = {
       },
       searchable: true,
       clearable: false,
-      options: []
+      getDynamicOptions: () => {
+        const store = getStore();
+        return store
+          ? store
+              .getState()
+              .getFlowResults()
+              .map((r) => ({ value: r.name, name: r.name }))
+          : [];
+      }
     },
     value: {
       type: 'text',
@@ -48,21 +58,9 @@ export const set_run_result: ActionConfig = {
   },
   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 || '',
+      name: action.name ? [{ name: action.name, value: action.name }] : [],
       value: action.value || '',
       category: action.category || ''
     };

package/src/flow/actions/split_by_expression_example.ts

@@ -36,10 +36,10 @@ export const split_by_expression: ActionConfig = {
           label: 'Operator',
           required: true,
           options: [
-            { value: 'contains', label: 'contains' },
-            { value: 'equals', label: 'equals' },
-            { value: 'starts_with', label: 'starts with' },
-            { value: 'regex', label: 'regex' }
+            { value: 'contains', name: 'contains' },
+            { value: 'equals', name: 'equals' },
+            { value: 'starts_with', name: 'starts with' },
+            { value: 'regex', name: 'regex' }
           ]
         },
         operand: {

package/src/flow/config.ts

@@ -14,11 +14,8 @@ 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';
@@ -26,7 +23,6 @@ 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';
 
 // Import all node configurations
 import { execute_actions } from './nodes/execute_actions';
@@ -40,6 +36,7 @@ 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 } from './nodes/split_by_llm';
 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';
@@ -63,12 +60,8 @@ export const ACTION_CONFIG: {
   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,
@@ -86,6 +79,7 @@ export const NODE_CONFIG: {
   split_by_contact_field,
   split_by_expression,
   split_by_groups,
+  split_by_llm,
   split_by_llm_categorize,
   split_by_random,
   split_by_run_result,

package/src/flow/forms/index.ts

@@ -0,0 +1 @@
+// No unified contact form exports - each action has its own form configuration

package/src/flow/nodes/split_by_llm.ts

@@ -0,0 +1,119 @@
+import { COLORS, NodeConfig } from '../types';
+import { CallLLM, Node } from '../../store/flow-definition';
+import { generateUUID, createSuccessFailureRouter } from '../../utils';
+import { html } from 'lit';
+
+export const split_by_llm: NodeConfig = {
+  type: 'split_by_llm',
+  name: 'Call AI',
+  color: COLORS.call,
+  form: {
+    llm: {
+      type: 'select',
+      label: 'LLM',
+      required: true,
+      options: [],
+      endpoint: '/test-assets/select/llms.json',
+      searchable: true,
+      valueKey: 'uuid',
+      nameKey: 'name',
+      placeholder: 'Select an LLM...'
+    },
+    input: {
+      type: 'text',
+      label: 'Input',
+      helpText: 'The input the AI will process',
+      required: true,
+      evaluated: true,
+      placeholder: '@input'
+    },
+    instructions: {
+      type: 'textarea',
+      label: 'Instructions',
+      helpText:
+        'Tell the AI what to do with the input. The result can be referenced as **`@locals._llm_output`**',
+      required: true,
+      evaluated: true,
+      placeholder: 'Enter instructions for the AI model...',
+      minHeight: 130
+    }
+  },
+  layout: ['llm', 'input', 'instructions'],
+  render: (node: Node) => {
+    const callLlmAction = node.actions?.find(
+      (action) => action.type === 'call_llm'
+    ) as CallLLM;
+    return html`
+      <div
+        class="body"
+        style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; max-width: 180px; max-height: 90px; margin-bottom:10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;"
+      >
+        ${callLlmAction?.instructions || 'Configure AI instructions'}
+      </div>
+    `;
+  },
+  toFormData: (node: Node) => {
+    // Extract data from the existing node structure
+    const callLlmAction = node.actions?.find(
+      (action) => action.type === 'call_llm'
+    ) as CallLLM;
+
+    return {
+      uuid: node.uuid,
+      llm: callLlmAction?.llm
+        ? [{ value: callLlmAction.llm.uuid, name: callLlmAction.llm.name }]
+        : [],
+      input: callLlmAction?.input || '@input',
+      instructions: callLlmAction?.instructions || ''
+    };
+  },
+  fromFormData: (formData: any, originalNode: Node): Node => {
+    // Get LLM selection
+    const llmSelection =
+      Array.isArray(formData.llm) && formData.llm.length > 0
+        ? formData.llm[0]
+        : null;
+
+    // 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
+    const callLlmAction: CallLLM = {
+      type: 'call_llm',
+      uuid: callLlmUuid,
+      llm: llmSelection
+        ? { uuid: llmSelection.value, name: llmSelection.name }
+        : { uuid: '', name: '' },
+      input: formData.input || '@input',
+      instructions: formData.instructions || '',
+      output_local: '_llm_output'
+    };
+
+    // 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._llm_output',
+      {
+        type: 'has_text',
+        arguments: []
+      },
+      existingCategories,
+      existingExits,
+      existingCases
+    );
+
+    // Return the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: [callLlmAction],
+      router: router,
+      exits: exits
+    };
+  }
+};

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -1,6 +1,6 @@
 import { COLORS, NodeConfig } from '../types';
-import { Node } from '../../store/flow-definition';
-import { generateUUID } from '../../utils';
+import { CallLLM, Node } from '../../store/flow-definition';
+import { generateUUID, createMultiCategoryRouter } from '../../utils';
 import { html } from 'lit';
 
 export const split_by_llm_categorize: NodeConfig = {
@@ -92,7 +92,7 @@ export const split_by_llm_categorize: NodeConfig = {
   render: (node: Node) => {
     const callLlmAction = node.actions?.find(
       (action) => action.type === 'call_llm'
-    ) as any;
+    ) as CallLLM;
     return html`
       <div class="body">Categorize with ${callLlmAction.llm.name}</div>
     `;
@@ -135,7 +135,7 @@ export const split_by_llm_categorize: NodeConfig = {
     const callLlmUuid = existingCallLlmAction?.uuid || generateUUID();
 
     // Create call_llm action (using any type to match the example format)
-    const callLlmAction: any = {
+    const callLlmAction: CallLLM = {
       type: 'call_llm',
       uuid: callLlmUuid,
       llm: llmSelection
@@ -147,124 +147,21 @@ export const split_by_llm_categorize: NodeConfig = {
     };
 
     // 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,
+    const { router, exits } = createMultiCategoryRouter(
+      '@locals._llm_output',
+      userCategories,
+      (categoryName) => ({
         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'
+        arguments: [categoryName]
+      }),
+      existingCategories,
+      existingExits,
+      existingCases
     );
-    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 {