@nyaruka/temba-components 0.130.4 → 0.130.5

package/src/events.ts

@@ -57,13 +57,13 @@ export interface ChatStartedEvent extends ContactEvent {
 
 export interface MsgEvent extends ContactEvent {
   msg: Msg;
-  status: string;
-  failed_reason?: string;
-  failed_reason_display?: string;
-  logs_url: string;
-  recipient_count?: number;
-  created_by?: User;
   optin?: ObjectReference;
+  _status?: string;
+  _failed_reason?: string;
+  _logs_url?: string;
+  status?: string; // deprecated
+  failed_reason_display?: string; // deprecated
+  logs_url?: string; // deprecated
 }
 
 export interface RunEvent extends ContactEvent {

package/src/flow/CanvasNode.ts

@@ -66,8 +66,14 @@ export class CanvasNode extends RapidElement {
         max-width: 200px;
       }
 
-      .node:hover {
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      .node .action:last-child {
+        border-bottom-left-radius: var(--curvature);
+        border-bottom-right-radius: var(--curvature);
+      }
+
+      .node .action:first-child {
+        border-top-left-radius: var(--curvature);
+        border-top-right-radius: var(--curvature);
       }
 
       .node.dragging {
@@ -226,8 +232,8 @@ export class CanvasNode extends RapidElement {
       }
 
       .action-exits {
-        padding-bottom: 0.6em;
-        margin-top: -0.8em;
+        padding-bottom: 0.7em;
+        margin-top: -0.7em;
       }
 
       .category .cn-title {
@@ -860,7 +866,7 @@ export class CanvasNode extends RapidElement {
           class="action-content"
           @mousedown=${(e: MouseEvent) => this.handleActionMouseDown(e, action)}
           @mouseup=${(e: MouseEvent) => this.handleActionMouseUp(e, action)}
-          style="cursor: pointer;"
+          style="cursor: pointer; background: #fff"
         >
           ${this.renderTitle(config, action, index, isRemoving)}
           <div class="body">
@@ -983,16 +989,12 @@ export class CanvasNode extends RapidElement {
                 dragHandle="drag-handle"
                 @temba-order-changed="${this.handleActionOrderChanged}"
               >
-                ${repeat(
-                  this.node.actions,
-                  (action) => action.uuid,
-                  (action, index) => this.renderAction(this.node, action, index)
+                ${this.node.actions.map((action, index) =>
+                  this.renderAction(this.node, action, index)
                 )}
               </temba-sortable-list>`
-            : html`${repeat(
-                this.node.actions,
-                (action) => action.uuid,
-                (action, index) => this.renderAction(this.node, action, index)
+            : html`${this.node.actions.map((action, index) =>
+                this.renderAction(this.node, action, index)
               )}`
           : ''}
         ${this.node.router

package/src/flow/actions/send_msg.ts

@@ -58,6 +58,7 @@ export const send_msg: ActionConfig = {
       type: 'array',
       helpText: 'Add dynamic attachments using expressions',
       itemLabel: 'Attachment',
+      sortable: true,
       maxItems: 10,
       isEmptyItem: (item: any) => {
         return !item.expression || item.expression.trim() === '';

package/src/flow/nodes/split_by_groups.ts

@@ -1,7 +1,196 @@
 import { COLORS, NodeConfig } from '../types';
+import { Node, Category, Exit, Case } from '../../store/flow-definition.d';
+import { generateUUID } from '../../utils';
+
+// Helper function to create a switch router with group cases
+const createGroupRouter = (
+  userGroups: { uuid: string; name: string }[],
+  existingCategories: Category[] = [],
+  existingExits: Exit[] = [],
+  existingCases: Case[] = []
+) => {
+  const categories: Category[] = [];
+  const exits: Exit[] = [];
+  const cases: Case[] = [];
+
+  // Create categories, exits, and cases for each selected group
+  userGroups.forEach((group) => {
+    // Try to find existing category by group name
+    const existingCategory = existingCategories.find(
+      (cat) => cat.name === group.name
+    );
+    const existingExit = existingCategory
+      ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
+      : null;
+    const existingCase = existingCases.find(
+      (c) => c.arguments?.[0] === group.uuid
+    );
+
+    const exitUuid = existingExit?.uuid || generateUUID();
+    const categoryUuid = existingCategory?.uuid || generateUUID();
+    const caseUuid = existingCase?.uuid || generateUUID();
+
+    categories.push({
+      uuid: categoryUuid,
+      name: group.name,
+      exit_uuid: exitUuid
+    });
+
+    exits.push({
+      uuid: exitUuid,
+      destination_uuid: existingExit?.destination_uuid || null
+    });
+
+    cases.push({
+      uuid: caseUuid,
+      type: 'has_group',
+      arguments: [group.uuid, group.name],
+      category_uuid: categoryUuid
+    });
+  });
+
+  // Add default "Other" category for contacts not in any selected group
+  const existingOtherCategory = existingCategories.find(
+    (cat) =>
+      cat.name === 'Other' &&
+      !userGroups.some((group) => group.name === cat.name)
+  );
+  const existingOtherExit = existingOtherCategory
+    ? existingExits.find(
+        (exit) => exit.uuid === existingOtherCategory.exit_uuid
+      )
+    : null;
+
+  const otherExitUuid = existingOtherExit?.uuid || generateUUID();
+  const otherCategoryUuid = existingOtherCategory?.uuid || generateUUID();
+
+  categories.push({
+    uuid: otherCategoryUuid,
+    name: 'Other',
+    exit_uuid: otherExitUuid
+  });
+
+  exits.push({
+    uuid: otherExitUuid,
+    destination_uuid: existingOtherExit?.destination_uuid || null
+  });
+
+  return {
+    router: {
+      type: 'switch' as const,
+      cases: cases,
+      categories: categories,
+      default_category_uuid: otherCategoryUuid,
+      operand: '@contact.groups',
+      result_name: ''
+    },
+    exits: exits
+  };
+};
 
 export const split_by_groups: NodeConfig = {
   type: 'split_by_groups',
   name: 'Split by Group',
-  color: COLORS.split
+  color: COLORS.split,
+  form: {
+    groups: {
+      type: 'select',
+      label: 'Groups',
+      helpText:
+        'Select the groups to split contacts by. Contacts will be routed based on their group membership.',
+      required: true,
+      options: [],
+      multi: true,
+      searchable: true,
+      endpoint: '/api/v2/groups.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      placeholder: 'Search for groups...',
+      allowCreate: true,
+      createArbitraryOption: (input: string, options: any[]) => {
+        // Check if a group 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;
+      }
+    }
+  },
+  layout: ['groups'],
+  validate: (formData: any) => {
+    const errors: { [key: string]: string } = {};
+
+    if (
+      !formData.groups ||
+      !Array.isArray(formData.groups) ||
+      formData.groups.length === 0
+    ) {
+      errors.groups = 'At least one group is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  toFormData: (node: Node) => {
+    // Extract groups from the existing node structure
+    const groups: { uuid: string; name: string }[] = [];
+
+    if (node.router?.cases) {
+      node.router.cases.forEach((c: Case) => {
+        if (c.type === 'has_group' && c.arguments?.length >= 2) {
+          groups.push({
+            uuid: c.arguments[0],
+            name: c.arguments[1]
+          });
+        }
+      });
+    }
+
+    return {
+      uuid: node.uuid,
+      groups: groups
+    };
+  },
+  fromFormData: (formData: any, originalNode: Node): Node => {
+    // Get selected groups
+    const selectedGroups = (formData.groups || [])
+      .filter((group: any) => group?.uuid || group?.arbitrary)
+      .map((group: any) => ({
+        uuid: group.uuid || generateUUID(), // Generate UUID for arbitrary groups
+        name: group.name
+      }));
+
+    // Create router and exits using existing data when possible
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const { router, exits } = createGroupRouter(
+      selectedGroups,
+      existingCategories,
+      existingExits,
+      existingCases
+    );
+
+    // Return the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: originalNode.actions || [],
+      router: router,
+      exits: exits
+    };
+  },
+  router: {
+    type: 'switch',
+    operand: '@contact.groups'
+  }
 };

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -31,6 +31,7 @@ export const split_by_llm_categorize: NodeConfig = {
       label: 'Categories',
       helpText: 'Define the categories for classification',
       required: true,
+      sortable: true,
       itemLabel: 'Category',
       minItems: 1,
       maxItems: 10,

package/src/flow/nodes/wait_for_response.ts

@@ -47,87 +47,100 @@ const createWaitForResponseRouter = (
       cat.name !== 'Timeout'
   );
 
-  // Group rules by category name (case-insensitive) to merge them
-  const rulesByCategory = new Map<string, any[]>();
-  userRules.forEach((rule) => {
+  // Track categories as we create them (case-insensitive lookup)
+  const createdCategories = new Map<
+    string,
+    { uuid: string; name: string; exit_uuid: string }
+  >();
+
+  // Process rules in their original order to preserve rule order
+  userRules.forEach((rule, ruleIndex) => {
     const categoryKey = rule.category.trim().toLowerCase();
-    if (!rulesByCategory.has(categoryKey)) {
-      rulesByCategory.set(categoryKey, []);
-    }
-    rulesByCategory.get(categoryKey)!.push(rule);
-  });
+    const categoryName = rule.category.trim(); // Use original casing
 
-  // Track category creation order to preserve UUID mapping
-  const categoryOrder: string[] = [];
-  userRules.forEach((rule) => {
-    const categoryKey = rule.category.trim().toLowerCase();
-    if (!categoryOrder.includes(categoryKey)) {
-      categoryOrder.push(categoryKey);
-    }
-  });
+    let categoryInfo = createdCategories.get(categoryKey);
 
-  // Create categories, exits, and cases for each unique category
-  categoryOrder.forEach((categoryKey, categoryIndex) => {
-    const rulesForCategory = rulesByCategory.get(categoryKey)!;
-    const categoryName = rulesForCategory[0].category.trim(); // Use the first occurrence's casing
+    if (!categoryInfo) {
+      // First time seeing this category - create it
 
-    // Try to find existing category by position/index to preserve UUIDs when names change
-    const existingCategory = existingUserCategories[categoryIndex];
-    const existingExit = existingCategory
-      ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
-      : null;
+      // Smart category matching: try by name first, then fall back to position
+      let existingCategory = existingUserCategories.find(
+        (cat) => cat.name.toLowerCase() === categoryKey
+      );
 
-    const exitUuid = existingExit?.uuid || generateUUID();
-    const categoryUuid = existingCategory?.uuid || generateUUID();
+      // If no match by name, try by position (for category rename scenarios)
+      const categoryCreationOrder = Array.from(createdCategories.keys()).length;
+      if (
+        !existingCategory &&
+        categoryCreationOrder < existingUserCategories.length
+      ) {
+        existingCategory = existingUserCategories[categoryCreationOrder];
+      }
 
-    // Create single category for all rules with this category name
-    categories.push({
-      uuid: categoryUuid,
-      name: categoryName,
-      exit_uuid: exitUuid
-    });
+      const existingExit = existingCategory
+        ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
+        : null;
 
-    exits.push({
-      uuid: exitUuid,
-      destination_uuid: existingExit?.destination_uuid || null
-    });
+      const exitUuid = existingExit?.uuid || generateUUID();
+      const categoryUuid = existingCategory?.uuid || generateUUID();
 
-    // Create a case for each rule in this category
-    rulesForCategory.forEach((rule) => {
-      // Try to find existing case for this rule by looking at the original rule order
-      const originalRuleIndex = userRules.findIndex((r) => r === rule);
-      const existingCase = existingCases[originalRuleIndex];
+      categoryInfo = {
+        uuid: categoryUuid,
+        name: categoryName,
+        exit_uuid: exitUuid
+      };
 
-      const caseUuid = existingCase?.uuid || generateUUID();
+      createdCategories.set(categoryKey, categoryInfo);
 
-      // Parse rule value based on operator configuration
-      const operatorConfig = getOperatorConfig(rule.operator);
-      let arguments_: string[] = [];
+      // Add category and exit
+      categories.push({
+        uuid: categoryUuid,
+        name: categoryName,
+        exit_uuid: exitUuid
+      });
 
-      if (operatorConfig) {
-        if (operatorConfig.operands === 0) {
-          // No operands needed
-          arguments_ = [];
-        } else if (operatorConfig.operands === 2) {
-          // Split value for two operands (e.g., "1 10" for between)
-          arguments_ = rule.value
-            .split(' ')
-            .filter((arg: string) => arg.trim());
-        } else {
-          // Single operand - but split words for operators that expect multiple words
-          if (rule.value && rule.value.trim()) {
-            // Split on spaces and filter out empty strings
-            arguments_ = rule.value
-              .trim()
-              .split(/\s+/)
-              .filter((arg: string) => arg.length > 0);
-          } else {
-            arguments_ = [];
-          }
-        }
+      exits.push({
+        uuid: exitUuid,
+        destination_uuid: existingExit?.destination_uuid || null
+      });
+    }
+
+    // Create case for this rule
+    let existingCase = existingCases[ruleIndex];
+
+    // If we can't find by position, try to find by matching rule content
+    if (!existingCase && existingCases.length > 0) {
+      existingCase = existingCases.find((case_) => {
+        // Find the category for this case
+        const caseCategory = existingCategories.find(
+          (cat) => cat.uuid === case_.category_uuid
+        );
+
+        // Match by operator type and category name
+        return (
+          case_.type === rule.operator &&
+          caseCategory?.name.toLowerCase() === categoryKey
+        );
+      });
+    }
+
+    const caseUuid = existingCase?.uuid || generateUUID();
+
+    // Parse rule value based on operator configuration
+    const operatorConfig = getOperatorConfig(rule.operator);
+    let arguments_: string[] = [];
+
+    if (operatorConfig) {
+      if (operatorConfig.operands === 0) {
+        // No operands needed
+        arguments_ = [];
+      } else if (operatorConfig.operands === 2) {
+        // Split value for two operands (e.g., "1 10" for between)
+        arguments_ = rule.value.split(' ').filter((arg: string) => arg.trim());
       } else {
-        // Fallback for unknown operators - split on spaces if value exists
+        // Single operand - but split words for operators that expect multiple words
         if (rule.value && rule.value.trim()) {
+          // Split on spaces and filter out empty strings
           arguments_ = rule.value
             .trim()
             .split(/\s+/)
@@ -136,13 +149,23 @@ const createWaitForResponseRouter = (
           arguments_ = [];
         }
       }
+    } else {
+      // Fallback for unknown operators - split on spaces if value exists
+      if (rule.value && rule.value.trim()) {
+        arguments_ = rule.value
+          .trim()
+          .split(/\s+/)
+          .filter((arg: string) => arg.length > 0);
+      } else {
+        arguments_ = [];
+      }
+    }
 
-      cases.push({
-        uuid: caseUuid,
-        type: rule.operator,
-        arguments: arguments_,
-        category_uuid: categoryUuid
-      });
+    cases.push({
+      uuid: caseUuid,
+      type: rule.operator,
+      arguments: arguments_,
+      category_uuid: categoryInfo.uuid
     });
   });
 
@@ -211,6 +234,7 @@ export const wait_for_response: NodeConfig = {
       itemLabel: 'Rule',
       minItems: 0,
       maxItems: 100,
+      sortable: true,
       maintainEmptyItem: true, // Explicitly enable empty item maintenance
       isEmptyItem: (item: any) => {
         // Helper function to get operator value from various formats