@nyaruka/temba-components 0.131.0 → 0.131.2

package/src/flow/nodes/wait_for_video.ts

@@ -1,7 +1,7 @@
-import { COLORS, NodeConfig } from '../types';
+import { SPLIT_GROUPS, NodeConfig } from '../types';
 
 export const wait_for_video: NodeConfig = {
   type: 'wait_for_video',
   name: 'Wait for Video',
-  color: COLORS.wait
+  group: SPLIT_GROUPS.wait
 };

package/src/flow/types.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit-html';
-import { Action, Node } from '../store/flow-definition';
+import { Action, Node, NodeUI } from '../store/flow-definition';
 
 export interface ValidationResult {
   valid: boolean;
@@ -78,9 +78,10 @@ export interface FormConfig {
 export interface NodeConfig extends FormConfig {
   type: string;
   name?: string;
-  color?: string;
+  group?: ActionGroup | SplitGroup; // Nodes can use either when showAsAction is true
   dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   action?: ActionConfig;
+  showAsAction?: boolean; // if true, show in action dialog instead of splits (default: false - nodes show in splits)
   router?: {
     type: 'switch' | 'random';
     defaultCategory?: string;
@@ -98,9 +99,11 @@ export interface NodeConfig extends FormConfig {
     }[];
   };
 
-  toFormData?: (node: Node) => FormData;
+  toFormData?: (node: Node, nodeUI?: any) => FormData;
   fromFormData?: (formData: FormData, originalNode: Node) => Node;
-  render?: (node: Node) => TemplateResult;
+  toUIConfig?: (formData: FormData) => Record<string, any>;
+  render?: (node: Node, nodeUI?: any) => TemplateResult;
+  renderTitle?: (node: Node, nodeUI?: NodeUI) => TemplateResult;
 }
 
 // New field configuration system for generic form generation
@@ -130,6 +133,11 @@ export interface BaseFieldConfig {
     visible?: (formData: Record<string, any>) => boolean;
     disabled?: (formData: Record<string, any>) => boolean;
   };
+
+  // Optional field with reveal link
+  // When set, the field is hidden by default and a link with this text is shown
+  // Clicking the link reveals the field permanently (can't be hidden again)
+  optionalLink?: string;
 }
 
 export interface TextFieldConfig extends BaseFieldConfig {
@@ -231,6 +239,8 @@ export interface RowLayoutConfig {
   type: 'row';
   items: LayoutItem[]; // can contain fields, groups, or other rows
   gap?: string; // CSS gap value, defaults to '1rem'
+  label?: string; // optional label for the entire row
+  helpText?: string; // optional help text for the entire row
 }
 
 export interface GroupLayoutConfig {
@@ -238,9 +248,9 @@ export interface GroupLayoutConfig {
   label: string;
   items: LayoutItem[]; // can contain fields, rows, or other groups
   collapsible?: boolean;
-  collapsed?: boolean | ((formData: any) => boolean); // initial state if collapsible - can be a function
+  collapsed?: boolean | ((formData: FormData) => boolean); // initial state if collapsible - can be a function
   helpText?: string;
-  getGroupValueCount?: (formData: any) => number; // optional function to get count for bubble display
+  getGroupValueCount?: (formData: FormData) => number; // optional function to get count for bubble display
 }
 
 export type LayoutItem =
@@ -249,31 +259,107 @@ export type LayoutItem =
   | GroupLayoutConfig
   | string; // string is shorthand for field
 
+/**
+ * Action group constants - single source of truth for action categorization
+ * Use as const for compile-time type checking
+ */
+export const ACTION_GROUPS = {
+  send: 'send',
+  contacts: 'contacts',
+  save: 'save',
+  services: 'services',
+  broadcast: 'broadcast',
+  trigger: 'trigger'
+} as const;
+
+/**
+ * Split group constants - single source of truth for split categorization
+ * Use as const for compile-time type checking
+ */
+export const SPLIT_GROUPS = {
+  wait: 'wait',
+  split: 'split'
+} as const;
+
+// Extract types from const objects for compile-time checking
+export type ActionGroup = (typeof ACTION_GROUPS)[keyof typeof ACTION_GROUPS];
+export type SplitGroup = (typeof SPLIT_GROUPS)[keyof typeof SPLIT_GROUPS];
+
+/**
+ * Metadata for group display
+ */
+export interface GroupMetadata {
+  color: string;
+  title: string;
+  description: string;
+}
+
+/**
+ * Action group metadata - defines display properties for each action group
+ * Order in this object determines display order in action selector (top to bottom)
+ */
+export const ACTION_GROUP_METADATA: Record<ActionGroup, GroupMetadata> = {
+  [ACTION_GROUPS.send]: {
+    color: '#3498db',
+    title: 'Send',
+    description: 'Actions that send messages or content to contacts'
+  },
+  [ACTION_GROUPS.contacts]: {
+    color: '#01c1af',
+    title: 'Contact',
+    description: 'Actions that update contact information'
+  },
+  [ACTION_GROUPS.save]: {
+    color: '#1a777c',
+    title: 'Save',
+    description: 'Actions that save or store data'
+  },
+  [ACTION_GROUPS.services]: {
+    color: '#f79035ff',
+    title: 'Services',
+    description: 'Call external services and APIs'
+  },
+  [ACTION_GROUPS.broadcast]: {
+    color: '#8e5ea7',
+    title: 'Other People',
+    description: 'Actions that apply to others instead of the contact'
+  },
+  [ACTION_GROUPS.trigger]: {
+    color: '#df419f',
+    title: 'Trigger',
+    description: 'Actions that trigger other behavior'
+  }
+};
+
+/**
+ * Split group metadata - defines display properties for each split group
+ * Order in this object determines display order in split selector (top to bottom)
+ */
+export const SPLIT_GROUP_METADATA: Record<SplitGroup, GroupMetadata> = {
+  [SPLIT_GROUPS.wait]: {
+    color: '#4d7dad',
+    title: 'Wait',
+    description: 'Wait for user and split on their response'
+  },
+  [SPLIT_GROUPS.split]: {
+    color: '#aaaaaa',
+    title: 'Split',
+    description: 'Split the flow based on conditions'
+  }
+};
+
 export interface ActionConfig extends FormConfig {
   name: string;
-  color: string;
+  group: ActionGroup;
   dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   evaluated?: string[];
+  hideFromActions?: boolean; // if true, don't show in action dialog (default: false - actions show in actions)
   render?: (node: any, action: any) => TemplateResult;
 
   form?: Record<string, FieldConfig>;
   layout?: LayoutItem[]; // optional layout configuration - array of layout items
   gutter?: LayoutItem[]; // fields to render in the dialog gutter (left side of buttons)
 
-  toFormData?: (action: Action) => any;
-  fromFormData?: (formData: any) => Action;
+  toFormData?: (action: Action) => FormData;
+  fromFormData?: (formData: FormData) => Action;
 }
-
-export const COLORS = {
-  send: '#3498db',
-  update: '#01c1af',
-  broadcast: '#8e5ea7',
-  call: '#e68628',
-  create: '#df419f',
-  save: '#1a777c',
-  split: '#aaaaaa',
-  execute: '#666666',
-  wait: '#4d7dad',
-  add: '#309c42',
-  remove: '#e74c3c'
-};

package/src/flow/utils.ts

@@ -60,17 +60,111 @@ export const renderStringList = (items: string[], icon?: string) => {
   return itemElements;
 };
 
-// URN scheme mapping for user-friendly display
-export const urnSchemeMap: Record<string, string> = {
-  tel: 'Phone Number',
-  email: 'Email',
-  twitter: 'Twitter',
-  facebook: 'Facebook',
-  telegram: 'Telegram',
-  whatsapp: 'WhatsApp',
-  viber: 'Viber',
-  line: 'Line',
-  discord: 'Discord',
-  slack: 'Slack',
-  external: 'External ID'
-};
+export interface Scheme {
+  scheme: string;
+  name: string;
+  path: string;
+  excludeFromSplit?: boolean;
+}
+
+export const SCHEMES: Scheme[] = [
+  {
+    scheme: 'tel',
+    name: 'SMS',
+    path: 'Phone Number'
+  },
+  {
+    scheme: 'whatsapp',
+    name: 'WhatsApp',
+    path: 'WhatsApp Number'
+  },
+  {
+    scheme: 'facebook',
+    name: 'Facebook',
+    path: 'Facebook ID'
+  },
+  {
+    scheme: 'instagram',
+    name: 'Instagram',
+    path: 'Instagram ID'
+  },
+  {
+    scheme: 'twitterid',
+    name: 'Twitter',
+    path: 'Twitter ID',
+    excludeFromSplit: true
+  },
+  {
+    scheme: 'telegram',
+    name: 'Telegram',
+    path: 'Telegram ID'
+  },
+  {
+    scheme: 'viber',
+    name: 'Viber',
+    path: 'Viber ID'
+  },
+  {
+    scheme: 'line',
+    name: 'Line',
+    path: 'Line ID'
+  },
+  {
+    scheme: 'wechat',
+    name: 'WeChat',
+    path: 'WeChat ID'
+  },
+  {
+    scheme: 'fcm',
+    name: 'Firebase',
+    path: 'Firebase ID'
+  },
+  {
+    scheme: 'jiochat',
+    name: 'JioChat',
+    path: 'JioChat ID'
+  },
+  {
+    scheme: 'freshchat',
+    name: 'Freshchat',
+    path: 'Freshchat ID'
+  },
+  {
+    scheme: 'mailto',
+    name: 'Email',
+    path: 'Email Address',
+    excludeFromSplit: true
+  },
+  {
+    scheme: 'twitter',
+    name: 'Twitter',
+    path: 'Twitter Handle',
+    excludeFromSplit: true
+  },
+  {
+    scheme: 'vk',
+    name: 'VK',
+    path: 'VK ID'
+  },
+  {
+    scheme: 'discord',
+    name: 'Discord',
+    path: 'Discord ID'
+  },
+  {
+    scheme: 'webchat',
+    name: 'Webchat',
+    path: 'Webchat ID',
+    excludeFromSplit: true
+  },
+  {
+    scheme: 'rocketchat',
+    name: 'RocketChat',
+    path: 'RocketChat ID'
+  },
+  {
+    scheme: 'ext',
+    name: 'External',
+    path: 'External ID'
+  }
+];

package/src/form/ContactSearch.ts

@@ -603,7 +603,7 @@ export class ContactSearch extends FieldElement {
                               >
                               </temba-checkbox>
 
-                              <div style="margin-left:0.5em">
+                              <div>
                                 ${msg('Have sent a message in the last')}
                               </div>
 

package/src/form/FieldRenderer.ts

@@ -1,4 +1,5 @@
 import { html, TemplateResult } from 'lit';
+import { spread } from '@open-wc/lit-helpers';
 import {
   FieldConfig,
   TextFieldConfig,
@@ -245,10 +246,7 @@ export class FieldRenderer {
             value="${option}"
           ></temba-option>`;
         } else {
-          return html`<temba-option
-            name="${option.label || option.name}"
-            value="${option.value}"
-          ></temba-option>`;
+          return html`<temba-option ${spread(option)}></temba-option>`;
         }
       })}
     </temba-select>`;

package/src/interfaces.ts

@@ -278,6 +278,8 @@ export enum CustomEventType {
   OrderChanged = 'temba-order-changed',
   DragStart = 'temba-drag-start',
   DragStop = 'temba-drag-stop',
+  DragExternal = 'temba-drag-external',
+  DragInternal = 'temba-drag-internal',
   Resized = 'temba-resized',
   DetailsChanged = 'temba-details-changed',
   Error = 'temba-error',
@@ -288,6 +290,7 @@ export enum CustomEventType {
   DateRangeChanged = 'temba-date-range-changed',
   NodeDeleted = 'temba-node-deleted',
   ActionEditRequested = 'temba-action-edit-requested',
+  AddActionRequested = 'temba-add-action-requested',
   ActionSaved = 'temba-action-saved',
   ActionEditCanceled = 'temba-action-edit-canceled',
   NodeEditRequested = 'temba-node-edit-requested',

package/src/list/SortableList.ts

@@ -9,6 +9,10 @@ import { RapidElement } from '../RapidElement';
 
 // how far we have to drag before it starts
 const DRAG_THRESHOLD = 2;
+
+// padding around container for external drag detection
+const EXTERNAL_DRAG_PADDING = 50;
+
 export class SortableList extends RapidElement {
   originalDownDisplay: string;
   static get styles() {
@@ -65,6 +69,9 @@ export class SortableList extends RapidElement {
   @property({ type: String })
   gap: string = '0em';
 
+  @property({ type: Boolean })
+  externalDrag: boolean = false;
+
   /**
    * Optional callback to allow parent components to customize the ghost node.
    * Called after the ghost node is cloned but before it is appended to the DOM.
@@ -86,6 +93,7 @@ export class SortableList extends RapidElement {
   dropPlaceholder: HTMLDivElement = null;
   pendingDropIndex = -1;
   pendingTargetElement: HTMLElement = null;
+  isExternalDrag = false;
 
   private clickBlocker: ((e: MouseEvent) => void) | null = null;
 
@@ -108,6 +116,20 @@ export class SortableList extends RapidElement {
     return eles;
   }
 
+  private isMouseOverContainer(mouseX: number, mouseY: number): boolean {
+    const container = this.shadowRoot.querySelector('.container');
+    if (!container) return false;
+
+    const rect = container.getBoundingClientRect();
+    // add some padding to make it easier to stay within the container
+    return (
+      mouseX >= rect.left - EXTERNAL_DRAG_PADDING &&
+      mouseX <= rect.right + EXTERNAL_DRAG_PADDING &&
+      mouseY >= rect.top - EXTERNAL_DRAG_PADDING &&
+      mouseY <= rect.bottom + EXTERNAL_DRAG_PADDING
+    );
+  }
+
   private cloneElementWithState(element: HTMLElement): HTMLElement {
     // First create a basic clone
     const clone = element.cloneNode(true) as HTMLElement;
@@ -305,6 +327,8 @@ export class SortableList extends RapidElement {
       this.dropPlaceholder.style.minHeight = rect.height + 'px';
       this.dropPlaceholder.style.borderRadius = 'var(--curvature)';
       this.dropPlaceholder.style.flexShrink = '0';
+      this.dropPlaceholder.style.background = '#f3f4f6';
+      this.dropPlaceholder.style.border = '2px dashed #d1d5db';
     }
 
     // Insert the placeholder in the correct position in the DOM
@@ -335,10 +359,8 @@ export class SortableList extends RapidElement {
     this.dropPlaceholder.style.minHeight = rect.height + 'px';
     this.dropPlaceholder.style.borderRadius = 'var(--curvature)';
     this.dropPlaceholder.style.flexShrink = '0';
-    this.dropPlaceholder.style.background =
-      'rgba(var(--color-primary-rgb), 0.1)';
-    this.dropPlaceholder.style.border =
-      '2px dashed rgba(var(--color-primary-rgb), 0.3)';
+    this.dropPlaceholder.style.background = '#f3f4f6';
+    this.dropPlaceholder.style.border = '2px dashed #d1d5db';
 
     // Insert the placeholder right after the hidden original element
     this.downEle.insertAdjacentElement('afterend', this.dropPlaceholder);
@@ -440,41 +462,86 @@ export class SortableList extends RapidElement {
       this.ghostElement.style.left = event.clientX - this.xOffset + 'px';
       this.ghostElement.style.top = event.clientY - this.yOffset + 'px';
 
-      const targetInfo = this.getDropTargetInfo(event.clientX, event.clientY);
-      if (targetInfo) {
-        const { element: targetElement, insertAfter } = targetInfo;
-        const targetIdx = this.getRowIndex(targetElement.id);
+      // check if the drag is over the container (only if external dragging is allowed)
+      const isOverContainer = this.externalDrag
+        ? this.isMouseOverContainer(event.clientX, event.clientY)
+        : true; // always consider "over container" if external drag is disabled
 
-        // Use the original drag index we captured before moving the element
-        const originalDragIdx = this.originalDragIndex;
+      // detect transition between internal and external drag (only if allowed)
+      if (this.externalDrag && !isOverContainer && !this.isExternalDrag) {
+        // transitioning to external drag
+        this.isExternalDrag = true;
+        this.hideDropPlaceholder();
 
-        // Calculate where the dragged element will end up in the final array
-        // targetIdx is the position of target element in current DOM (missing dragged element)
+        // hide the ghost element when dragging externally
+        if (this.ghostElement) {
+          this.ghostElement.style.display = 'none';
+        }
 
-        let dropIdx;
-        if (targetIdx < originalDragIdx) {
-          // Target is before the original drag position - moving backward
-          dropIdx = insertAfter ? targetIdx + 1 : targetIdx;
-        } else {
-          // Target was originally after the drag position - moving forward
-          // When moving the dragged element forward (i.e., to a higher index), the targetIdx is based on the current DOM,
-          // which no longer includes the dragged element. This means all elements after the original position have shifted left by one,
-          // so we need to subtract 1 from targetIdx to get the correct insertion index. If inserting after the target, we use targetIdx as is.
-          dropIdx = insertAfter ? targetIdx : targetIdx - 1;
+        this.fireCustomEvent(CustomEventType.DragExternal, {
+          id: this.downEle.id,
+          mouseX: event.clientX,
+          mouseY: event.clientY
+        });
+      } else if (this.externalDrag && isOverContainer && this.isExternalDrag) {
+        // transitioning back to internal drag
+        this.isExternalDrag = false;
+
+        // show the ghost element again when dragging internally
+        if (this.ghostElement) {
+          this.ghostElement.style.display = 'block';
         }
 
-        // Store pending drop info but don't fire event yet
-        this.dropTargetId = targetElement.id;
-        this.pendingDropIndex = dropIdx;
-        this.pendingTargetElement = targetElement;
+        this.fireCustomEvent(CustomEventType.DragInternal, {
+          id: this.downEle.id
+        });
+      }
+
+      // only show drop placeholder and calculate drop position if internal drag
+      if (!this.isExternalDrag) {
+        const targetInfo = this.getDropTargetInfo(event.clientX, event.clientY);
+        if (targetInfo) {
+          const { element: targetElement, insertAfter } = targetInfo;
+          const targetIdx = this.getRowIndex(targetElement.id);
+
+          // Use the original drag index we captured before moving the element
+          const originalDragIdx = this.originalDragIndex;
+
+          // Calculate where the dragged element will end up in the final array
+          // targetIdx is the position of target element in current DOM (missing dragged element)
+
+          let dropIdx;
+          if (targetIdx < originalDragIdx) {
+            // Target is before the original drag position - moving backward
+            dropIdx = insertAfter ? targetIdx + 1 : targetIdx;
+          } else {
+            // Target was originally after the drag position - moving forward
+            // When moving the dragged element forward (i.e., to a higher index), the targetIdx is based on the current DOM,
+            // which no longer includes the dragged element. This means all elements after the original position have shifted left by one,
+            // so we need to subtract 1 from targetIdx to get the correct insertion index. If inserting after the target, we use targetIdx as is.
+            dropIdx = insertAfter ? targetIdx : targetIdx - 1;
+          }
 
-        // Show drop placeholder
-        this.showDropPlaceholder(targetElement, insertAfter);
+          // Store pending drop info but don't fire event yet
+          this.dropTargetId = targetElement.id;
+          this.pendingDropIndex = dropIdx;
+          this.pendingTargetElement = targetElement;
+
+          // Show drop placeholder
+          this.showDropPlaceholder(targetElement, insertAfter);
+        } else {
+          this.hideDropPlaceholder();
+          this.dropTargetId = null;
+          this.pendingDropIndex = -1;
+          this.pendingTargetElement = null;
+        }
       } else {
-        this.hideDropPlaceholder();
-        this.dropTargetId = null;
-        this.pendingDropIndex = -1;
-        this.pendingTargetElement = null;
+        // external drag - continue firing external drag events with updated position
+        this.fireCustomEvent(CustomEventType.DragExternal, {
+          id: this.downEle.id,
+          mouseX: event.clientX,
+          mouseY: event.clientY
+        });
       }
     }
   }
@@ -498,7 +565,11 @@ export class SortableList extends RapidElement {
       this.hideDropPlaceholder();
 
       // fire the order changed event only when dropped if we have a valid drop position
-      if (this.pendingDropIndex >= 0 && this.pendingTargetElement) {
+      if (
+        !this.isExternalDrag &&
+        this.pendingDropIndex >= 0 &&
+        this.pendingTargetElement
+      ) {
         // Use the original drag index we captured before hiding the element
         const originalDragIdx = this.originalDragIndex;
 
@@ -515,7 +586,10 @@ export class SortableList extends RapidElement {
       }
 
       this.fireCustomEvent(CustomEventType.DragStop, {
-        id: this.draggingId
+        id: this.draggingId,
+        isExternal: this.isExternalDrag,
+        mouseX: evt.clientX,
+        mouseY: evt.clientY
       });
 
       this.draggingId = null;
@@ -525,6 +599,7 @@ export class SortableList extends RapidElement {
       this.originalDragIndex = -1;
       this.pendingDropIndex = -1;
       this.pendingTargetElement = null;
+      this.isExternalDrag = false;
 
       // Clear the ghost reference since we removed it
       this.ghostElement = null;

package/src/live/ContactChat.ts

@@ -808,16 +808,19 @@ export class ContactChat extends ContactStoreElement {
       };
     } else if (event._user) {
       return event._user;
-    } else if (event.created_by) {
-      return {
-        email: event.created_by.email,
-        name: `${event.created_by.first_name} ${event.created_by.last_name}`.trim(),
-        avatar: event.created_by.avatar
-      };
     }
     return null;
   }
 
+  private isMessageError(status: string | { status: string }): boolean {
+    if (typeof status === 'string') {
+      return status === 'E' || status === 'F';
+    } else if (status && typeof status === 'object' && 'status' in status) {
+      return status.status === 'errored' || status.status === 'failed';
+    }
+    return false;
+  }
+
   private createMessages(page: ContactHistoryPage): ChatEvent[] {
     if (page.events) {
       let messages = [];
@@ -852,13 +855,9 @@ export class ContactChat extends ContactStoreElement {
         } else if (
           event.type === 'msg_created' ||
           event.type === 'msg_received' ||
-          event.type === 'ivr_created' ||
-          event.type === 'broadcast_created'
+          event.type === 'ivr_created'
         ) {
           const msgEvent = event as MsgEvent;
-          const status = msgEvent.status || msgEvent._status;
-          const failedReason =
-            msgEvent.failed_reason_display || msgEvent._failed_reason;
 
           messages.push({
             id: event.uuid,
@@ -867,7 +866,7 @@ export class ContactChat extends ContactStoreElement {
             date: new Date(msgEvent.created_on),
             attachments: msgEvent.msg.attachments,
             text: msgEvent.msg.text,
-            sendError: status === 'E' || status === 'F',
+            sendError: this.isMessageError(msgEvent._status),
             popup: html`<div
               style="display: flex; flex-direction: row; align-items:center; justify-content: space-between;font-size:0.9em;line-height:1em;min-width:10em"
             >
@@ -882,20 +881,18 @@ export class ContactChat extends ContactStoreElement {
                       ${msgEvent.optin.name}
                     </div>`
                   : null}
-                ${failedReason
+                ${msgEvent._failed_reason
                   ? html`
                       <div
                         style="margin-top:0.2em;margin-right: 0.5em;min-width:10em;max-width:15em;color:var(--color-error);font-size:0.9em"
                       >
-                        ${failedReason}
+                        ${msgEvent._failed_reason}
                       </div>
                     `
                   : null}
               </div>
-              ${msgEvent.logs_url || msgEvent._logs_url
-                ? html`<a
-                    style="margin-left:0.5em"
-                    href="${msgEvent.logs_url || msgEvent._logs_url}"
+              ${msgEvent._logs_url
+                ? html`<a style="margin-left:0.5em" href="${msgEvent._logs_url}"
                     ><temba-icon name="log"></temba-icon
                   ></a>`
                 : null}