@nyaruka/temba-components 0.132.0 → 0.133.0

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;
@@ -634,6 +639,8 @@ export class ContactChat extends ContactStoreElement {
         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, {
@@ -651,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 {
@@ -857,9 +862,12 @@ export class ContactChat extends ContactStoreElement {
     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') {
@@ -914,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;
@@ -924,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();
       });
     }
   }
@@ -959,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();
       });
@@ -1238,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)) {

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(

package/test/temba-contact-chat.test.ts

@@ -55,7 +55,7 @@ describe('temba-contact-chat', () => {
     mockedNow = mockNow('2021-03-31T00:31:00.000-00:00');
     clearMockPosts();
     mockGET(
-      /\/contact\/history\/contact-.*/,
+      /\/contact\/chat\/contact-.*/,
       '/test-assets/contacts/history.json'
     );
 

package/test/temba-floating-window.test.ts

@@ -51,7 +51,6 @@ describe('temba-floating-window', () => {
     )) as FloatingWindow;
 
     expect(window.hidden).to.equal(true);
-    expect(window.classList.contains('hidden')).to.equal(true);
   });
 
   it('can be shown and hidden', async () => {
@@ -74,7 +73,6 @@ describe('temba-floating-window', () => {
     window.hide();
     await window.updateComplete;
     expect(window.hidden).to.equal(true);
-    expect(window.classList.contains('hidden')).to.equal(true);
   });
 
   it('fires close event when close button clicked', async () => {

package/test/temba-flow-editor-node.test.ts

@@ -1200,6 +1200,135 @@ describe('EditorNode', () => {
       // 3. New JSPlumb connections are created with connectIds
       // This sequence ensures JSPlumb visuals stay in sync with the flow definition
     });
+
+    it('reroutes connections when removing node with multiple exits pointing to same destination', async () => {
+      // Test case: node with multiple exits, but all point to the same destination
+      const mockNode: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any
+        ],
+        exits: [
+          { uuid: 'exit-1', destination_uuid: 'node-after' },
+          { uuid: 'exit-2', destination_uuid: 'node-after' },
+          { uuid: 'exit-3', destination_uuid: 'node-after' }
+        ]
+      };
+
+      editorNode['node'] = mockNode;
+
+      const mockFlowDefinition = {
+        nodes: [
+          {
+            uuid: 'node-before',
+            exits: [{ uuid: 'exit-before', destination_uuid: 'test-node' }]
+          },
+          mockNode,
+          {
+            uuid: 'node-after',
+            exits: []
+          }
+        ]
+      };
+
+      // Verify all exits point to the same destination
+      const destinations = mockNode.exits
+        .map((exit) => exit.destination_uuid)
+        .filter((dest) => dest);
+
+      expect(destinations).to.have.length(3);
+      expect(destinations.every((dest) => dest === 'node-after')).to.be.true;
+
+      // Find incoming connections
+      const incomingConnections: {
+        exitUuid: string;
+        sourceNodeUuid: string;
+      }[] = [];
+
+      for (const node of mockFlowDefinition.nodes) {
+        if (node.uuid !== mockNode.uuid) {
+          for (const exit of node.exits) {
+            if (exit.destination_uuid === mockNode.uuid) {
+              incomingConnections.push({
+                exitUuid: exit.uuid,
+                sourceNodeUuid: node.uuid
+              });
+            }
+          }
+        }
+      }
+
+      // Verify we found incoming connections
+      expect(incomingConnections).to.have.length(1);
+      expect(incomingConnections[0].exitUuid).to.equal('exit-before');
+
+      // This validates that when a node has multiple exits but they all point
+      // to the same destination, the rerouting logic should still apply
+    });
+
+    it('does not reroute connections when node has exits with different destinations', async () => {
+      // Test case: node with multiple exits pointing to different destinations
+      const mockNode: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any
+        ],
+        exits: [
+          { uuid: 'exit-1', destination_uuid: 'node-after-1' },
+          { uuid: 'exit-2', destination_uuid: 'node-after-2' }
+        ]
+      };
+
+      const destinations = mockNode.exits
+        .map((exit) => exit.destination_uuid)
+        .filter((dest) => dest);
+
+      // Verify exits point to different destinations
+      expect(destinations).to.have.length(2);
+      expect(destinations.every((dest) => dest === destinations[0])).to.be
+        .false;
+
+      // This validates that rerouting does NOT apply when exits point to different places
+    });
+
+    it('does not reroute connections when node has exits with null destinations', async () => {
+      // Test case: node with some exits having null destinations
+      const mockNode: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any
+        ],
+        exits: [
+          { uuid: 'exit-1', destination_uuid: 'node-after' },
+          { uuid: 'exit-2', destination_uuid: null }
+        ]
+      };
+
+      const destinations = mockNode.exits
+        .map((exit) => exit.destination_uuid)
+        .filter((dest) => dest);
+
+      // Verify not all exits have destinations
+      expect(destinations).to.have.length(1);
+      expect(destinations.length).to.not.equal(mockNode.exits.length);
+
+      // This validates that rerouting does NOT apply when some exits have no destination
+    });
   });
 
   describe('add action button', () => {

package/test/temba-utils-uuid.test.ts

@@ -1,5 +1,5 @@
 import { assert } from '@open-wc/testing';
-import { generateUUID } from '../src/utils';
+import { generateUUID, generateUUIDv7 } from '../src/utils';
 
 describe('UUID Generation', () => {
   it('generates a valid UUID v4 format', () => {
@@ -45,4 +45,64 @@ describe('UUID Generation', () => {
     // All should be unique
     assert.equal(uuids.size, count, 'All generated UUIDs should be unique');
   });
+
+  it('generates a valid UUID v7 format', () => {
+    const uuid = generateUUIDv7();
+
+    // check that it's a string
+    assert.isString(uuid);
+
+    // check UUID v7 format: xxxxxxxx-xxxx-7xxx-yxxx-xxxxxxxxxxxx
+    const uuidPattern =
+      /^[0-9a-f]{8}-[0-9a-f]{4}-7[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+    assert.match(uuid, uuidPattern, 'Should match UUID v7 format');
+
+    // check length
+    assert.equal(uuid.length, 36);
+
+    // check that it contains hyphens in the right places
+    assert.equal(uuid[8], '-');
+    assert.equal(uuid[13], '-');
+    assert.equal(uuid[18], '-');
+    assert.equal(uuid[23], '-');
+  });
+
+  it('generates unique UUIDs v7', () => {
+    const uuid1 = generateUUIDv7();
+    const uuid2 = generateUUIDv7();
+    const uuid3 = generateUUIDv7();
+
+    // all should be different
+    assert.notEqual(uuid1, uuid2);
+    assert.notEqual(uuid2, uuid3);
+    assert.notEqual(uuid1, uuid3);
+  });
+
+  it('generates time-ordered UUIDs v7', () => {
+    const uuid1 = generateUUIDv7();
+    // small delay to ensure different timestamp
+    const delayPromise = new Promise((resolve) => setTimeout(resolve, 5));
+    return delayPromise.then(() => {
+      const uuid2 = generateUUIDv7();
+
+      // uuid v7 should be sortable by timestamp
+      // the first uuid should come before the second when compared as strings
+      assert.isTrue(
+        uuid1 < uuid2,
+        'Earlier UUID should be lexicographically smaller'
+      );
+    });
+  });
+
+  it('generates many unique UUIDs v7', () => {
+    const uuids = new Set();
+    const count = 1000;
+
+    for (let i = 0; i < count; i++) {
+      uuids.add(generateUUIDv7());
+    }
+
+    // all should be unique
+    assert.equal(uuids.size, count, 'All generated UUIDs should be unique');
+  });
 });

package/test/utils.test.ts

@@ -240,7 +240,11 @@ export const waitForCondition = async (
   }
 };
 
-export const assertScreenshot = async (filename: string, clip: Clip) => {
+export const assertScreenshot = async (
+  filename: string,
+  clip: Clip,
+  waitForNetwork: boolean = false
+) => {
   // detect if we're running in copilot's environment and use adaptive threshold
   const isCopilotEnvironment = (window as any).isCopilotEnvironment;
   const threshold = isCopilotEnvironment ? 1.0 : 0.1;
@@ -251,7 +255,8 @@ export const assertScreenshot = async (filename: string, clip: Clip) => {
       `${filename}.png`,
       clip,
       exclude,
-      threshold
+      threshold,
+      waitForNetwork
     );
   } catch (error) {
     if (error.message) {