@nyaruka/temba-components 0.129.7 → 0.129.9

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
+    };
+  }
 };

package/src/flow/types.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit-html';
-import { Action } from '../store/flow-definition';
+import { Action, Node } from '../store/flow-definition';
 
 export interface ValidationResult {
   valid: boolean;
@@ -65,39 +65,16 @@ export interface SliderAttributes {
   range?: boolean;
 }
 
-// Widget configuration using discriminated union for type safety
-export type WidgetConfig =
-  | { type: 'temba-textinput'; attributes?: TextInputAttributes }
-  | { type: 'temba-completion'; attributes?: CompletionAttributes }
-  | { type: 'temba-select'; attributes?: SelectAttributes }
-  | { type: 'temba-checkbox'; attributes?: CheckboxAttributes }
-  | { type: 'temba-slider'; attributes?: SliderAttributes }
-  | { type: string; attributes?: { [key: string]: any } }; // Generic fallback
+export interface FormData extends Record<string, any> {}
 
-// Property configuration with the clean structure you want
-export interface PropertyConfig {
-  // Form field metadata
-  label?: string;
-  helpText?: string;
-  required?: boolean;
-  maxLength?: number;
-  minLength?: number;
-  pattern?: string;
-
-  // Widget configuration
-  widget: WidgetConfig;
-
-  // Conditional behavior based on other field values
-  conditions?: {
-    // When to show this field
-    visible?: (formData: any) => boolean;
-
-    // When this field is disabled
-    disabled?: (formData: any) => boolean;
-  };
+export interface FormConfig {
+  form?: Record<string, FieldConfig>;
+  layout?: LayoutItem[];
+  sanitize?: (formData: FormData) => void;
+  validate?: (formData: FormData) => ValidationResult;
 }
 
-export interface NodeConfig {
+export interface NodeConfig extends FormConfig {
   type: string;
   name?: string;
   color?: string;
@@ -108,22 +85,28 @@ export interface NodeConfig {
     operand?: string;
     configurable?: boolean; // can the rules be configured in the UI
     rules?: {
-      type: 'has_number_between' | 'has_string' | 'has_value' | 'has_not_value';
+      type:
+        | 'has_number_between'
+        | 'has_string'
+        | 'has_value'
+        | 'has_not_value'
+        | 'has_text';
       arguments: string[];
       categoryName: string;
     }[];
   };
-  properties?: { [key: string]: PropertyConfig };
-  toFormData?: (node: any) => any;
-  fromFormData?: (formData: any, originalNode: any) => any;
+
+  toFormData?: (node: Node) => FormData;
+  fromFormData?: (formData: FormData, originalNode: Node) => Node;
+  render?: (node: Node) => TemplateResult;
 }
 
 // New field configuration system for generic form generation
 export interface BaseFieldConfig {
   label?: string;
   required?: boolean;
-  evaluated?: boolean; // if this field supports expression evaluation
-  dependsOn?: string[]; // fields this field depends on
+  evaluated?: boolean;
+  dependsOn?: string[];
   computeValue?: (
     values: Record<string, any>,
     currentValue: any,
@@ -137,7 +120,7 @@ export interface BaseFieldConfig {
   helpText?: string;
 
   // Layout properties
-  maxWidth?: string; // CSS max-width value (e.g., '200px', '50%', '10rem')
+  maxWidth?: string;
 
   // Conditional rendering
   conditions?: {
@@ -160,8 +143,9 @@ export interface TextareaFieldConfig extends BaseFieldConfig {
 
 export interface SelectFieldConfig extends BaseFieldConfig {
   type: 'select';
-  options: string[] | { value: string; label: string }[];
+  options?: string[] | { value: string; label: string }[];
   multi?: boolean;
+  clearable?: boolean;
   searchable?: boolean;
   tags?: boolean;
   placeholder?: string;
@@ -170,6 +154,10 @@ export interface SelectFieldConfig extends BaseFieldConfig {
   nameKey?: string;
   endpoint?: string;
   emails?: boolean;
+  getName?: (item: any) => string;
+  flavor?: 'small' | 'large';
+  createArbitraryOption?: (input: string, options: any[]) => any;
+  allowCreate?: boolean;
 }
 
 export interface KeyValueFieldConfig extends BaseFieldConfig {
@@ -193,6 +181,7 @@ export interface ArrayFieldConfig extends BaseFieldConfig {
     value: any,
     allItems: any[]
   ) => any[];
+  isEmptyItem?: (item: any) => boolean;
 }
 
 export interface CheckboxFieldConfig extends BaseFieldConfig {
@@ -201,13 +190,27 @@ export interface CheckboxFieldConfig extends BaseFieldConfig {
   animateChange?: string;
 }
 
+export interface MessageEditorFieldConfig extends BaseFieldConfig {
+  type: 'message-editor';
+  placeholder?: string;
+  minHeight?: number;
+  maxAttachments?: number;
+  accept?: string;
+  endpoint?: string;
+  counter?: string;
+  gsm?: boolean;
+  autogrow?: boolean;
+  disableCompletion?: boolean;
+}
+
 export type FieldConfig =
   | TextFieldConfig
   | TextareaFieldConfig
   | SelectFieldConfig
   | KeyValueFieldConfig
   | ArrayFieldConfig
-  | CheckboxFieldConfig;
+  | CheckboxFieldConfig
+  | MessageEditorFieldConfig;
 
 // Layout configurations for better form organization
 // Recursive layout system - any layout item can contain other layout items
@@ -228,8 +231,9 @@ export interface GroupLayoutConfig {
   label: string;
   items: LayoutItem[]; // can contain fields, rows, or other groups
   collapsible?: boolean;
-  collapsed?: boolean; // initial state if collapsible
+  collapsed?: boolean | ((formData: any) => boolean); // initial state if collapsible - can be a function
   helpText?: string;
+  getGroupValueCount?: (formData: any) => number; // optional function to get count for bubble display
 }
 
 export type LayoutItem =
@@ -238,7 +242,7 @@ export type LayoutItem =
   | GroupLayoutConfig
   | string; // string is shorthand for field
 
-export interface ActionConfig {
+export interface ActionConfig extends FormConfig {
   name: string;
   color: string;
   evaluated?: string[];
@@ -247,12 +251,8 @@ export interface ActionConfig {
   form?: Record<string, FieldConfig>;
   layout?: LayoutItem[]; // optional layout configuration - array of layout items
 
-  // Action editor configuration (legacy)
-  // Form-level transformations
   toFormData?: (action: Action) => any;
   fromFormData?: (formData: any) => Action;
-
-  validate?: (action: Action) => ValidationResult;
 }
 
 export const COLORS = {
@@ -268,85 +268,3 @@ export const COLORS = {
   add: '#309c42',
   remove: '#e74c3c'
 };
-
-// Default property type mappings
-export function getDefaultComponent(value: any): WidgetConfig['type'] {
-  if (typeof value === 'boolean') {
-    return 'temba-checkbox';
-  }
-  if (typeof value === 'number') {
-    return 'temba-textinput';
-  }
-  if (Array.isArray(value)) {
-    return 'temba-select'; // For arrays, use multi-select
-  }
-  // Default to text input for strings and unknown types
-  return 'temba-textinput';
-}
-
-// Get component properties for default mappings with proper typing
-export function getDefaultComponentProps(value: any): PropertyConfig {
-  if (typeof value === 'boolean') {
-    return {
-      widget: { type: 'temba-checkbox' }
-    };
-  }
-  if (typeof value === 'number') {
-    return {
-      widget: {
-        type: 'temba-textinput',
-        attributes: { type: 'number' }
-      }
-    };
-  }
-  if (Array.isArray(value)) {
-    if (value.length > 0 && typeof value[0] === 'string') {
-      return {
-        widget: {
-          type: 'temba-select',
-          attributes: { multi: true, tags: true }
-        }
-      };
-    }
-    return {
-      widget: {
-        type: 'temba-select',
-        attributes: { multi: true }
-      }
-    };
-  }
-  return {
-    widget: { type: 'temba-textinput' }
-  };
-}
-
-// Type guard functions for working with WidgetConfig
-export function isTextInputWidget(
-  config: WidgetConfig
-): config is { type: 'temba-textinput'; attributes?: TextInputAttributes } {
-  return config.type === 'temba-textinput';
-}
-
-export function isCompletionWidget(
-  config: WidgetConfig
-): config is { type: 'temba-completion'; attributes?: CompletionAttributes } {
-  return config.type === 'temba-completion';
-}
-
-export function isSelectWidget(
-  config: WidgetConfig
-): config is { type: 'temba-select'; attributes?: SelectAttributes } {
-  return config.type === 'temba-select';
-}
-
-export function isCheckboxWidget(
-  config: WidgetConfig
-): config is { type: 'temba-checkbox'; attributes?: CheckboxAttributes } {
-  return config.type === 'temba-checkbox';
-}
-
-export function isSliderWidget(
-  config: WidgetConfig
-): config is { type: 'slider'; attributes?: SliderAttributes } {
-  return config.type === 'temba-slider';
-}