@nyaruka/temba-components 0.129.11 → 0.130.1

package/src/flow/actions/set_contact_field.ts

@@ -1,13 +1,67 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, COLORS, ValidationResult } from '../types';
 import { Node, SetContactField } from '../../store/flow-definition';
 
 export const set_contact_field: ActionConfig = {
-  name: 'Update Contact',
+  name: 'Update Field',
   color: COLORS.update,
   render: (_node: Node, action: SetContactField) => {
     return html`<div>
       Set <b>${action.field.name}</b> to <b>${action.value}</b>
     </div>`;
+  },
+  form: {
+    field: {
+      type: 'select',
+      label: 'Field',
+      required: true,
+      searchable: true,
+      clearable: false,
+      nameKey: 'name',
+      valueKey: 'key',
+      endpoint: '/api/v2/fields.json',
+      helpText: 'Select the contact field to update',
+      allowCreate: true,
+      createArbitraryOption: (input: string) => ({ key: input, name: input })
+    },
+    value: {
+      type: 'text',
+      label: 'Value',
+      placeholder: 'Enter field value...',
+      required: true,
+      evaluated: true,
+      helpText:
+        'The new value for the contact field. You can use expressions like @contact.name'
+    }
+  },
+  fromFormData: (formData: SetContactField): SetContactField => {
+    const field = formData.field[0];
+    return {
+      uuid: formData.uuid,
+      type: 'set_contact_field',
+      field: { name: field.name, key: field.key },
+      value: formData.value
+    };
+  },
+  validate: (formData: SetContactField): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    if (!formData.field) {
+      errors.field = 'Field is required';
+    }
+
+    if (!formData.value || formData.value.trim() === '') {
+      errors.value = 'Field value is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  sanitize: (formData: SetContactField): void => {
+    if (formData.value && typeof formData.value === 'string') {
+      formData.value = formData.value.trim();
+    }
   }
 };

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',
+  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',
+  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/forms/index.ts

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

package/src/flow/nodes/split_by_random.ts

@@ -1,9 +1,157 @@
 import { COLORS, NodeConfig } from '../types';
+import { Node, Category, Exit } from '../../store/flow-definition.d';
+import { generateUUID } from '../../utils';
+
+// Helper function to create a random router with categories
+const createRandomRouter = (
+  userCategories: string[],
+  existingCategories: Category[] = [],
+  existingExits: Exit[] = []
+) => {
+  const categories: Category[] = [];
+  const exits: Exit[] = [];
+
+  // Create categories and exits for user-defined buckets
+  userCategories.forEach((categoryName) => {
+    // Try to find existing category by name
+    const existingCategory = existingCategories.find(
+      (cat) => cat.name === categoryName
+    );
+    const existingExit = existingCategory
+      ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
+      : null;
+
+    const exitUuid = existingExit?.uuid || generateUUID();
+    const categoryUuid = existingCategory?.uuid || generateUUID();
+
+    categories.push({
+      uuid: categoryUuid,
+      name: categoryName,
+      exit_uuid: exitUuid
+    });
+
+    exits.push({
+      uuid: exitUuid,
+      destination_uuid: existingExit?.destination_uuid || null
+    });
+  });
+
+  return {
+    router: {
+      type: 'random' as const,
+      categories: categories
+    },
+    exits: exits
+  };
+};
 
 export const split_by_random: NodeConfig = {
   type: 'split_by_random',
   name: 'Split by Random',
   color: COLORS.split,
+  form: {
+    categories: {
+      type: 'array',
+      label: 'Buckets',
+      helpText: 'Define the buckets to randomly split contacts into',
+      required: true,
+      itemLabel: 'Bucket',
+      minItems: 2,
+      maxItems: 10,
+      isEmptyItem: (item: any) => {
+        return !item.name || item.name.trim() === '';
+      },
+      itemConfig: {
+        name: {
+          type: 'text',
+          placeholder: 'Bucket name',
+          required: true
+        }
+      }
+    }
+  },
+  layout: ['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() !== ''
+      );
+
+      // Ensure minimum buckets
+      if (categories.length < 2) {
+        errors.categories = 'At least 2 buckets are required for random split';
+      }
+
+      // 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 bucket names found: ${uniqueDuplicates.join(
+          ', '
+        )}`;
+      }
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  toFormData: (node: Node) => {
+    // Extract categories from the existing node structure
+    const categories =
+      node.router?.categories?.map((cat) => ({ name: cat.name })) || [];
+
+    return {
+      uuid: node.uuid,
+      categories: categories
+    };
+  },
+  fromFormData: (formData: any, originalNode: Node): Node => {
+    // Get user categories
+    const userCategories = (formData.categories || [])
+      .filter((item: any) => item?.name?.trim())
+      .map((item: any) => item.name.trim());
+
+    // Create router and exits using existing data when possible
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+
+    const { router, exits } = createRandomRouter(
+      userCategories,
+      existingCategories,
+      existingExits
+    );
+
+    // Return the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: originalNode.actions || [],
+      router: router,
+      exits: exits
+    };
+  },
   router: {
     type: 'random'
   }

package/src/flow/nodes/split_by_ticket.ts

@@ -24,7 +24,6 @@ export const split_by_ticket: NodeConfig = {
       label: 'Assignee',
       required: false,
       placeholder: 'Select an agent (optional)',
-      options: [],
       endpoint: '/api/v2/users.json',
       valueKey: 'uuid',
       getName: (item: {

package/src/flow/nodes/split_by_webhook.ts

@@ -136,9 +136,7 @@ export const split_by_webhook: NodeConfig = {
 
     return {
       uuid: node.uuid,
-      method: callWebhookAction?.method
-        ? [{ value: callWebhookAction.method, name: callWebhookAction.method }]
-        : [{ value: 'GET', name: 'GET' }],
+      method: callWebhookAction?.method || 'GET',
       url: callWebhookAction?.url || '',
       headers: callWebhookAction?.headers || [],
       body: callWebhookAction?.body || ''

package/src/flow/types.ts

@@ -143,7 +143,7 @@ export interface TextareaFieldConfig extends BaseFieldConfig {
 
 export interface SelectFieldConfig extends BaseFieldConfig {
   type: 'select';
-  options?: string[] | { value: string; label: string }[];
+  options?: string[] | { value: string; name: string }[];
   multi?: boolean;
   clearable?: boolean;
   searchable?: boolean;
@@ -158,6 +158,7 @@ export interface SelectFieldConfig extends BaseFieldConfig {
   flavor?: 'small' | 'large';
   createArbitraryOption?: (input: string, options: any[]) => any;
   allowCreate?: boolean;
+  getDynamicOptions?: () => Array<{ value: string; name: string }>;
 }
 
 export interface KeyValueFieldConfig extends BaseFieldConfig {

package/src/form/ArrayEditor.ts

@@ -1,6 +1,6 @@
 import { html, css, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { FieldConfig, SelectFieldConfig } from '../flow/types';
+import { FieldConfig } from '../flow/types';
 import { BaseListEditor, ListItem } from './BaseListEditor';
 import { FieldRenderer } from './FieldRenderer';
 
@@ -116,12 +116,13 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     }
 
     // For select fields, ensure we return the right type
-    if (config.type === 'select') {
+    /*if (config.type === 'select') {
+      console.log('computeFieldValue select', currentValue, config);
       const selectConfig = config as SelectFieldConfig;
       if (currentValue === undefined || currentValue === null) {
         return selectConfig.multi ? [] : '';
       }
-    }
+    }*/
 
     return currentValue;
   }
@@ -144,23 +145,8 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
         // Handle different field types and their change events
         if (config.type === 'select') {
-          // For temba-select, extract the correct value
-          if (target.tagName === 'TEMBA-SELECT') {
-            if (target.multi || target.emails || target.tags) {
-              value = target.values || [];
-            } else {
-              // Single select: extract value from first selected option
-              const values = target.values || [];
-              value =
-                values.length > 0 && values[0]
-                  ? values[0].value !== undefined
-                    ? values[0].value
-                    : values[0]
-                  : '';
-            }
-          } else {
-            value = target.value;
-          }
+          // Use consistent temba-select value normalization
+          value = target.values;
         } else {
           // For other field types, use the target value directly
           value = target.value;

package/src/form/FieldRenderer.ts

@@ -207,73 +207,17 @@ export class FieldRenderer {
       style
     } = context;
 
-    // Ensure proper value handling for multi vs single select
-    const normalizedValue = (() => {
-      if (config.multi) {
-        // Multi-select: ensure we have an array and convert strings to option objects
-        const valueArray = Array.isArray(value) ? value : value ? [value] : [];
-        return valueArray.map((val) => {
-          if (typeof val === 'string') {
-            // Convert string values to option objects
-            return { name: val, value: val };
-          }
-          return val;
-        });
-      } else {
-        // Single select: use the value as-is
-        return value || '';
-      }
-    })();
-
-    if (typeof normalizedValue === 'string') {
-      return html`<temba-select
-        name="${fieldName}"
-        ?required="${config.required}"
-        .errors="${errors}"
-        value="${config.multi ? '' : normalizedValue}"
-        .values="${config.multi ? normalizedValue : undefined}"
-        ?multi="${config.multi}"
-        ?searchable="${config.searchable}"
-        ?tags="${config.tags}"
-        ?emails="${config.emails}"
-        ?clearable="${config.clearable || false}"
-        label="${showLabel ? config.label : ''}"
-        placeholder="${config.placeholder || ''}"
-        maxItems="${config.maxItems || 0}"
-        valueKey="${config.valueKey || 'value'}"
-        nameKey="${config.nameKey || 'name'}"
-        endpoint="${config.endpoint || ''}"
-        .helpText="${config.helpText || ''}"
-        flavor="${flavor || config.flavor || 'small'}"
-        class="${extraClasses}"
-        style="${style}"
-        .getName=${config.getName}
-        .createArbitraryOption=${config.createArbitraryOption}
-        ?allowCreate="${config.allowCreate || false}"
-        @change="${onChange || (() => {})}"
-      >
-        ${config.options?.map((option: any) => {
-          if (typeof option === 'string') {
-            return html`<temba-option
-              name="${option}"
-              value="${option}"
-            ></temba-option>`;
-          } else {
-            return html`<temba-option
-              name="${option.label || option.name}"
-              value="${option.value}"
-            ></temba-option>`;
-          }
-        })}
-      </temba-select>`;
-    }
+    // Get options - use dynamic options if available, otherwise use static options
+    const optionsToRender = config.getDynamicOptions
+      ? config.getDynamicOptions()
+      : config.options;
 
     return html`<temba-select
       name="${fieldName}"
       label="${showLabel ? config.label : ''}"
       ?required="${config.required}"
       .errors="${errors}"
-      .values="${normalizedValue}"
+      .values=${value}
       ?multi="${config.multi}"
       ?searchable="${config.searchable}"
       ?tags="${config.tags}"
@@ -293,7 +237,7 @@ export class FieldRenderer {
       ?allowCreate="${config.allowCreate || false}"
       @change="${onChange || (() => {})}"
     >
-      ${config.options?.map((option: any) => {
+      ${optionsToRender?.map((option: any) => {
         if (typeof option === 'string') {
           return html`<temba-option
             name="${option}"
@@ -445,9 +389,6 @@ export class FieldRenderer {
   }
 }
 
-/**
- * Context object for field rendering that provides additional options
- */
 export interface FieldRenderContext {
   /** Array of error messages for the field */
   errors?: string[];