@nyaruka/temba-components 0.131.3 → 0.133.0

package/src/flow/config.ts

@@ -42,7 +42,7 @@ import { wait_for_response } from './nodes/wait_for_response';
 
 export const ACTION_CONFIG: {
   [key: string]: ActionConfig;
-} = {
+} = registerConfigWithAliases({
   say_msg,
   play_audio,
   set_contact_field,
@@ -60,11 +60,29 @@ export const ACTION_CONFIG: {
   add_contact_urn,
   add_input_labels,
   request_optin
-};
+});
+
+// Helper to register a config and its aliases
+function registerConfigWithAliases<T extends NodeConfig | ActionConfig>(
+  config: Record<string, T>
+): Record<string, T> {
+  const result = { ...config };
+
+  // Register aliases for each config
+  Object.values(config).forEach((cfg) => {
+    if (cfg.aliases) {
+      cfg.aliases.forEach((alias) => {
+        result[alias] = cfg;
+      });
+    }
+  });
+
+  return result;
+}
 
 export const NODE_CONFIG: {
   [key: string]: NodeConfig;
-} = {
+} = registerConfigWithAliases({
   execute_actions,
   split_by_contact_field,
   split_by_expression,
@@ -82,4 +100,4 @@ export const NODE_CONFIG: {
   wait_for_menu,
   wait_for_response,
   split_by_airtime
-};
+});

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -1,10 +1,4 @@
-import {
-  FormData,
-  NodeConfig,
-  ACTION_GROUPS,
-  FlowTypes,
-  Features
-} from '../types';
+import { FormData, NodeConfig, ACTION_GROUPS, Features } from '../types';
 import { CallLLM, Node } from '../../store/flow-definition';
 import { generateUUID, createMultiCategoryRouter } from '../../utils';
 import { html } from 'lit';
@@ -17,7 +11,7 @@ export const split_by_llm_categorize: NodeConfig = {
   type: 'split_by_llm_categorize',
   name: 'Split by AI',
   group: ACTION_GROUPS.services,
-  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  flowTypes: [],
   features: [Features.AI],
   form: {
     llm: {

package/src/flow/nodes/split_by_run_result.ts

@@ -53,6 +53,7 @@ const DELIMIT_BY_OPTIONS = [
 export const split_by_run_result: NodeConfig = {
   type: 'split_by_run_result',
   name: 'Split by Result',
+  aliases: ['split_by_run_result_delimited'], // backwards compatibility with old flow editor
   group: SPLIT_GROUPS.split,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   dialogSize: 'large',
@@ -253,6 +254,12 @@ export const split_by_run_result: NodeConfig = {
       config.delimiter = delimitBy;
     }
 
+    // Set the type based on whether delimiter is configured
+    // Use split_by_run_result_delimited for backward compatibility with old editor
+    config.type = hasDelimiter
+      ? 'split_by_run_result_delimited'
+      : 'split_by_run_result';
+
     return config;
   },
 

package/src/flow/types.ts

@@ -99,6 +99,7 @@ export interface FormConfig {
 export interface NodeConfig extends FormConfig {
   type: string;
   name?: string;
+  aliases?: string[]; // alternate type names for backwards compatibility (won't show in selector)
   group?: ActionGroup | SplitGroup; // Nodes can use either when showAsAction is true
   dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   action?: ActionConfig;
@@ -384,6 +385,7 @@ export const SPLIT_GROUP_METADATA: Record<SplitGroup, GroupMetadata> = {
 
 export interface ActionConfig extends FormConfig {
   name: string;
+  aliases?: string[]; // alternate type names for backwards compatibility (won't show in selector)
   group: ActionGroup;
   dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   evaluated?: string[];

package/src/layout/FloatingWindow.ts

@@ -18,7 +18,7 @@ export class FloatingWindow extends RapidElement {
         transition: transform var(--transition-duration, 300ms) ease-in-out,
           opacity var(--transition-duration, 300ms) ease-in-out;
         position: fixed;
-        z-index: 9999;
+        z-index: 5000;
         top: 100px;
         background: white;
         border-radius: 8px;
@@ -193,8 +193,6 @@ export class FloatingWindow extends RapidElement {
   ): void {
     super.updated(changes);
     if (changes.has('hidden')) {
-      this.classList.toggle('hidden', this.hidden);
-
       // when hiding, reset positioning behavior to original
       if (this.hidden && !changes.get('hidden')) {
         if (this.defaultLeft === -1) {

package/src/list/ContentMenu.ts

@@ -36,6 +36,7 @@ export class ContentMenu extends RapidElement {
     return css`
       :host {
         tabindex: 0;
+        z-index: 5000;
       }
       .container {
         --button-y: 0.4em;

package/src/list/SortableList.ts

@@ -577,8 +577,9 @@ export class SortableList extends RapidElement {
         const fromIdx = originalDragIdx;
         const toIdx = this.pendingDropIndex;
 
-        // only fire if the position actually changed
-        if (fromIdx !== toIdx) {
+        // only fire if the position actually changed AND this is not an external drag
+        // External drags are handled by external drop handlers
+        if (fromIdx !== toIdx && !this.isExternalDrag) {
           this.fireCustomEvent(CustomEventType.OrderChanged, {
             swap: [fromIdx, toIdx]
           });

package/src/live/ContactChat.ts

@@ -10,6 +10,7 @@ import {
 } from '../interfaces';
 import {
   fetchResults,
+  generateUUIDv7,
   getUrl,
   oxfordFn,
   postJSON,
@@ -525,10 +526,12 @@ export class ContactChat extends ContactStoreElement {
   private chat: Chat;
 
   ticket = null;
-  lastEventTime = null;
-  newestEventTime = null;
+  beforeUUID: string = null; // for scrolling back through history
+  afterUUID: string = null; // for polling new messages
   refreshId = null;
   polling = false;
+  pollingInterval = 2000; // start at 2 seconds
+  lastFetchTime: number = null;
 
   constructor() {
     super();
@@ -582,10 +585,12 @@ export class ContactChat extends ContactStoreElement {
     }
     this.blockFetching = false;
     this.ticket = null;
-    this.lastEventTime = null;
-    this.newestEventTime = null;
+    this.beforeUUID = null;
+    this.afterUUID = null;
     this.refreshId = null;
     this.polling = false;
+    this.pollingInterval = 2000;
+    this.lastFetchTime = null;
     this.errorMessage = null;
 
     const compose = this.shadowRoot.querySelector('temba-compose') as Compose;
@@ -629,12 +634,19 @@ export class ContactChat extends ContactStoreElement {
     }
 
     const genericError = 'Send failed, please try again.';
-    postJSON(`/api/v2/messages.json`, payload)
+    postJSON(`/contact/chat/${this.currentContact.uuid}/`, payload)
       .then((response) => {
         if (response.status < 400) {
+          const msg = this.createChatForMessageEvent(response.json.event);
+          this.chat.addMessages([msg], null, true);
+          // reset polling interval to 2 seconds after sending a message
+          this.pollingInterval = 2000;
           this.checkForNewMessages();
           composeEle.reset();
-          this.fireCustomEvent(CustomEventType.MessageSent, { msg: payload });
+          this.fireCustomEvent(CustomEventType.MessageSent, {
+            msg: payload,
+            response
+          });
         } else {
           this.errorMessage = genericError;
         }
@@ -646,30 +658,28 @@ export class ContactChat extends ContactStoreElement {
 
   private getEndpoint() {
     if (this.contact) {
-      return `/contact/history/${this.contact}/?_format=json`;
+      return `/contact/chat/${this.contact}/`;
     }
     return null;
   }
 
-  private scheduleRefresh() {
-    // knock five seconds off the newest event time so we are
-    // a little more aggressive about refreshing short term
-    let window = new Date().getTime() - this.newestEventTime / 1000 - 5000;
-
+  private scheduleRefresh(hasNewEvents = false) {
     if (this.refreshId) {
       clearTimeout(this.refreshId);
       this.refreshId = null;
     }
 
-    // wait no longer than 15 seconds
-    window = Math.min(window, 15000);
-
-    // wait at least 2 seconds
-    window = Math.max(window, 2000);
+    // reset to 2 seconds if we received new events
+    if (hasNewEvents) {
+      this.pollingInterval = 2000;
+    } else {
+      // increase interval by 1 second up to max of 15 seconds
+      this.pollingInterval = Math.min(this.pollingInterval + 1000, 15000);
+    }
 
     this.refreshId = setTimeout(() => {
       this.checkForNewMessages();
-    }, window);
+    }, this.pollingInterval);
   }
 
   public getEventMessage(event: ContactEvent): ChatEvent {
@@ -812,13 +822,52 @@ export class ContactChat extends ContactStoreElement {
     return null;
   }
 
+  private createChatForMessageEvent(msgEvent: MsgEvent): any {
+    return {
+      id: msgEvent.uuid,
+      type: msgEvent.type === 'msg_received' ? 'msg_in' : 'msg_out',
+      user: this.getUserForEvent(msgEvent),
+      date: new Date(msgEvent.created_on),
+      attachments: msgEvent.msg.attachments,
+      text: msgEvent.msg.text,
+      sendError:
+        msgEvent._status &&
+        (msgEvent._status.status === 'errored' ||
+          msgEvent._status.status === 'failed'),
+      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"
+      >
+        <div style="justify-content:left;text-align:left">
+          <temba-date
+            value=${msgEvent.created_on}
+            display="duration"
+          ></temba-date>
+
+          ${msgEvent.optin
+            ? html`<div style="font-size:0.9em;color:#aaa">
+                ${msgEvent.optin.name}
+              </div>`
+            : null}
+        </div>
+        ${msgEvent._logs_url
+          ? html`<a style="margin-left:0.5em" href="${msgEvent._logs_url}"
+              ><temba-icon name="log"></temba-icon
+            ></a>`
+          : null}
+      </div> `
+    };
+  }
+
   private createMessages(page: ContactHistoryPage): ChatEvent[] {
     if (page.events) {
       let messages = [];
       page.events.forEach((event) => {
-        const ts = new Date(event.created_on).getTime() * 1000;
-        if (ts > this.newestEventTime) {
-          this.newestEventTime = ts;
+        // track the UUID of the newest event for polling
+        if (
+          !this.afterUUID ||
+          event.uuid.toLowerCase() > this.afterUUID.toLowerCase()
+        ) {
+          this.afterUUID = event.uuid;
         }
 
         if (event.type === 'ticket_note_added') {
@@ -849,40 +898,7 @@ export class ContactChat extends ContactStoreElement {
           event.type === 'ivr_created'
         ) {
           const msgEvent = event as MsgEvent;
-
-          messages.push({
-            id: event.uuid,
-            type: msgEvent.type === 'msg_received' ? 'msg_in' : 'msg_out',
-            user: this.getUserForEvent(msgEvent),
-            date: new Date(msgEvent.created_on),
-            attachments: msgEvent.msg.attachments,
-            text: msgEvent.msg.text,
-            sendError:
-              msgEvent._status &&
-              (msgEvent._status.status === 'errored' ||
-                msgEvent._status.status === 'failed'),
-            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"
-            >
-              <div style="justify-content:left;text-align:left">
-                <temba-date
-                  value=${msgEvent.created_on}
-                  display="duration"
-                ></temba-date>
-
-                ${msgEvent.optin
-                  ? html`<div style="font-size:0.9em;color:#aaa">
-                      ${msgEvent.optin.name}
-                    </div>`
-                  : null}
-              </div>
-              ${msgEvent._logs_url
-                ? html`<a style="margin-left:0.5em" href="${msgEvent._logs_url}"
-                    ><temba-icon name="log"></temba-icon
-                  ></a>`
-                : null}
-            </div> `
-          });
+          messages.push(this.createChatForMessageEvent(msgEvent));
         } else {
           const msg = this.getEventMessage(event);
           if (msg) {
@@ -906,8 +922,9 @@ export class ContactChat extends ContactStoreElement {
 
     const chat = this.chat;
     const contactChat = this;
-    if (this.currentContact && this.newestEventTime) {
+    if (this.currentContact && this.afterUUID) {
       this.polling = true;
+      this.lastFetchTime = Date.now();
       const endpoint = this.getEndpoint();
       if (!endpoint) {
         return;
@@ -916,23 +933,24 @@ export class ContactChat extends ContactStoreElement {
       const fetchContact = this.currentContact.uuid;
 
       fetchContactHistory(
-        false,
         endpoint,
         this.currentTicket?.uuid,
         null,
-        this.newestEventTime
+        this.afterUUID
       ).then((page: ContactHistoryPage) => {
         if (fetchContact === this.currentContact.uuid) {
-          this.lastEventTime = page.next_before;
           const messages = this.createMessages(page);
+          const hasNewEvents = messages.length > 0;
           if (messages.length === 0) {
             contactChat.blockFetching = true;
           }
           messages.reverse();
           chat.addMessages(messages, null, true);
+          this.polling = false;
+          this.scheduleRefresh(hasNewEvents);
+        } else {
+          this.polling = false;
         }
-        this.polling = false;
-        this.scheduleRefresh();
       });
     }
   }
@@ -951,19 +969,37 @@ export class ContactChat extends ContactStoreElement {
         return;
       }
 
+      // initialize anchor UUID if not set (first fetch)
+      if (!this.beforeUUID && !this.afterUUID) {
+        // generate a UUID v7 for current time as the anchor
+        const anchorUUID = generateUUIDv7();
+        this.beforeUUID = anchorUUID;
+        this.afterUUID = anchorUUID;
+      }
+
       fetchContactHistory(
-        false,
         endpoint,
         this.currentTicket?.uuid,
-        this.lastEventTime
+        this.beforeUUID,
+        null
       ).then((page: ContactHistoryPage) => {
-        this.lastEventTime = page.next_before;
         const messages = this.createMessages(page);
         messages.reverse();
 
         if (messages.length === 0) {
           contactChat.blockFetching = true;
+        } else if (page.next) {
+          // update beforeUUID for next fetch of older messages
+          this.beforeUUID = page.next;
+        } else {
+          // no more history, mark end and show oldest event date
+          contactChat.blockFetching = true;
+          if (page.events && page.events.length > 0) {
+            const oldestEvent = page.events[page.events.length - 1];
+            chat.setEndOfHistory(new Date(oldestEvent.created_on));
+          }
         }
+
         chat.addMessages(messages);
         this.scheduleRefresh();
       });
@@ -1230,34 +1266,32 @@ export const fetchContact = (endpoint: string): Promise<Contact> => {
   });
 };
 export const fetchContactHistory = (
-  reset: boolean,
   endpoint: string,
-  ticket: string,
-  before: number = undefined,
-  after: number = undefined
+  ticket: string = undefined,
+  before: string = undefined,
+  after: string = undefined
 ): Promise<ContactHistoryPage> => {
-  if (reset) {
-    pendingRequests.forEach((controller) => {
-      controller.abort();
-    });
-    pendingRequests = [];
-  }
-
   return new Promise<ContactHistoryPage>((resolve) => {
     const controller = new AbortController();
     pendingRequests.push(controller);
 
     let url = endpoint;
+    const params = [];
+
     if (before) {
-      url += `&before=${before}`;
+      params.push(`before=${before}`);
     }
 
     if (after) {
-      url += `&after=${after}`;
+      params.push(`after=${after}`);
     }
 
     if (ticket) {
-      url += `&ticket=${ticket}`;
+      params.push(`ticket=${ticket}`);
+    }
+
+    if (params.length > 0) {
+      url += (url.includes('?') ? '&' : '?') + params.join('&');
     }
 
     const store = document.querySelector('temba-store') as Store;

package/src/store/AppState.ts

@@ -88,6 +88,7 @@ export interface AppState {
 
   setFlowContents: (flow: FlowContents) => void;
   setFlowInfo: (info: FlowInfo) => void;
+  setRevision: (revision: number) => void;
   setLanguageCode: (languageCode: string) => void;
   setDirtyDate: (date: Date) => void;
   expandCanvas: (width: number, height: number) => void;
@@ -216,6 +217,12 @@ export const zustand = createStore<AppState>()(
         });
       },
 
+      setRevision: (revision: number) => {
+        set((state: AppState) => {
+          state.flowDefinition.revision = revision;
+        });
+      },
+
       setLanguageCode: (languageCode: string) => {
         set((state: AppState) => {
           state.languageCode = languageCode;
@@ -264,10 +271,44 @@ export const zustand = createStore<AppState>()(
           }
 
           state.flowDefinition = produce(state.flowDefinition, (draft) => {
+            // For each node being removed, check if we should reroute connections
+            uuids.forEach((removedUuid) => {
+              const removedNode = draft.nodes.find(
+                (n) => n.uuid === removedUuid
+              );
+
+              if (!removedNode || !removedNode.exits.length) return;
+
+              // Get all destinations (filter out null/undefined)
+              const destinations = removedNode.exits
+                .map((exit) => exit.destination_uuid)
+                .filter((dest) => dest);
+
+              // Only proceed if all exits have destinations and they all point to the same place
+              if (
+                destinations.length === removedNode.exits.length &&
+                destinations.every((dest) => dest === destinations[0])
+              ) {
+                const targetDestination = destinations[0];
+
+                // Find all nodes with exits pointing to the node being removed
+                draft.nodes.forEach((node) => {
+                  node.exits.forEach((exit) => {
+                    if (exit.destination_uuid === removedUuid) {
+                      // Reroute to the same destination the removed node was going to
+                      exit.destination_uuid = targetDestination;
+                    }
+                  });
+                });
+              }
+            });
+
+            // Remove the nodes
             draft.nodes = draft.nodes.filter(
               (node) => !uuids.includes(node.uuid)
             );
 
+            // Clear any remaining connections to removed nodes that weren't rerouted
             draft.nodes.forEach((node) => {
               node.exits.forEach((exit) => {
                 if (uuids.includes(exit.destination_uuid)) {
@@ -308,10 +349,21 @@ export const zustand = createStore<AppState>()(
       updateNodeUIConfig: (uuid: string, config: Record<string, any>) => {
         set((state: AppState) => {
           if (state.flowDefinition._ui.nodes[uuid]) {
+            // Handle type separately if provided
+            if (config.type !== undefined) {
+              state.flowDefinition._ui.nodes[uuid].type = config.type;
+            }
+
+            // Update config (excluding type)
             if (!state.flowDefinition._ui.nodes[uuid].config) {
               state.flowDefinition._ui.nodes[uuid].config = {};
             }
-            Object.assign(state.flowDefinition._ui.nodes[uuid].config, config);
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { type, ...configWithoutType } = config;
+            Object.assign(
+              state.flowDefinition._ui.nodes[uuid].config,
+              configWithoutType
+            );
           }
           state.dirtyDate = new Date();
         });

package/src/utils.ts

@@ -5,7 +5,7 @@ import { Dialog } from './layout/Dialog';
 import { Attachment, ContactField, Shortcut, Ticket, User } from './interfaces';
 import ColorHash from 'color-hash';
 import { Toast } from './display/Toast';
-import { v4 as generateUUID } from 'uuid';
+import { v4 as generateUUID, v7 as generateUUIDv7 } from 'uuid';
 
 export const DEFAULT_MEDIA_ENDPOINT = '/api/v2/media.json';
 
@@ -918,8 +918,8 @@ export const getMiddle = (a: DOMRect, b: DOMRect) => {
   return a.top + a.height / 2 - b.height / 2;
 };
 
-// Export the UUID function from the uuid package
-export { generateUUID };
+// Export the UUID functions from the uuid package
+export { generateUUID, generateUUIDv7 };
 
 // Helper types for router creation
 export interface RouterCategory {

package/test/ActionHelper.ts

@@ -71,12 +71,13 @@ export class ActionTest<T extends Action> {
    */
   private async assertDialogScreenshot(
     el: HTMLElement,
-    screenshotName: string
+    screenshotName: string,
+    waitForNetwork: boolean = false
   ) {
     const dialog = el.shadowRoot
       .querySelector('temba-dialog')
       .shadowRoot.querySelector('.dialog-container') as HTMLElement;
-    await assertScreenshot(screenshotName, getClip(dialog));
+    await assertScreenshot(screenshotName, getClip(dialog), waitForNetwork);
   }
 
   /**
@@ -84,22 +85,29 @@ export class ActionTest<T extends Action> {
    * 1. Renders the action in a flow node (with screenshot)
    * 2. Opens the node editor (with screenshot)
    * 3. Simulates save and validates round-trip conversion
+   * @param waitForNetwork - If true, waits longer for network idle (useful for slow loading resources)
    */
-  async testAction(action: T, testName: string) {
+  async testAction(
+    action: T,
+    testName: string,
+    waitForNetwork: boolean = false
+  ) {
     it(`${testName}`, async () => {
       // Step 1: Render action in flow node
       const flowNode = await this.renderAction(action);
       expect(flowNode.querySelector('.body')).to.exist;
       await assertScreenshot(
         `actions/${this.actionName}/render/${testName}`,
-        getClip(flowNode)
+        getClip(flowNode),
+        waitForNetwork
       );
 
       // Step 2: Open node editor
       const nodeEditor = await this.openNodeEditor(action);
       await this.assertDialogScreenshot(
         nodeEditor,
-        `actions/${this.actionName}/editor/${testName}`
+        `actions/${this.actionName}/editor/${testName}`,
+        waitForNetwork
       );
 
       // Step 3: Test round-trip conversion (simulates save workflow)

package/test/actions/send_broadcast.test.ts

@@ -80,7 +80,8 @@ describe('send_broadcast action config', () => {
           'application/pdf:https://example.com/document.pdf'
         ]
       } as SendBroadcast,
-      'with-attachments'
+      'with-attachments',
+      true
     );
 
     helper.testAction(