@nyaruka/temba-components 0.130.4 → 0.131.0

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/split_by_random.ts

@@ -56,6 +56,7 @@ export const split_by_random: NodeConfig = {
       helpText: 'Define the buckets to randomly split contacts into',
       required: true,
       itemLabel: 'Bucket',
+      sortable: true,
       minItems: 2,
       maxItems: 10,
       isEmptyItem: (item: any) => {