@nyaruka/temba-components 0.132.0 → 0.134.0

package/src/locales/es.ts

@@ -1,18 +1,13 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
-'s73b4d70c02f4b4e0': `No options`,
-'s8f02e3a18ffc083a': `Are not currently in a flow`,
-'s638236250662c6b3': `Have sent a message in the last`,
-'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
-    };
-  
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize
+
+/* eslint-disable no-irregular-whitespace */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export const templates = {
+  scf1453991c986b25: `Tab para completar, enter para seleccionar`,
+  s73b4d70c02f4b4e0: `No options`,
+  s8f02e3a18ffc083a: `Are not currently in a flow`,
+  s638236250662c6b3: `Have sent a message in the last`,
+  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
+};

package/src/locales/fr.ts

@@ -1,18 +1,13 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      's73b4d70c02f4b4e0': `No options`,
-'scf1453991c986b25': `Tab to complete, enter to select`,
-'s8f02e3a18ffc083a': `Are not currently in a flow`,
-'s638236250662c6b3': `Have sent a message in the last`,
-'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
-    };
-  
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize
+
+/* eslint-disable no-irregular-whitespace */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export const templates = {
+  s73b4d70c02f4b4e0: `No options`,
+  scf1453991c986b25: `Tab to complete, enter to select`,
+  s8f02e3a18ffc083a: `Are not currently in a flow`,
+  s638236250662c6b3: `Have sent a message in the last`,
+  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
+};

package/src/locales/locale-codes.ts

@@ -10,18 +10,9 @@ export const sourceLocale = `en`;
  * The other locale codes that this application is localized into. Sorted
  * lexicographically.
  */
-export const targetLocales = [
-  `es`,
-  `fr`,
-  `pt`,
-] as const;
+export const targetLocales = [`es`, `fr`, `pt`] as const;
 
 /**
  * All valid project locale codes. Sorted lexicographically.
  */
-export const allLocales = [
-  `en`,
-  `es`,
-  `fr`,
-  `pt`,
-] as const;
+export const allLocales = [`en`, `es`, `fr`, `pt`] as const;

package/src/locales/pt.ts

@@ -1,18 +1,13 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      's73b4d70c02f4b4e0': `No options`,
-'scf1453991c986b25': `Tab to complete, enter to select`,
-'s8f02e3a18ffc083a': `Are not currently in a flow`,
-'s638236250662c6b3': `Have sent a message in the last`,
-'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
-    };
-  
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize
+
+/* eslint-disable no-irregular-whitespace */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export const templates = {
+  s73b4d70c02f4b4e0: `No options`,
+  scf1453991c986b25: `Tab to complete, enter to select`,
+  s8f02e3a18ffc083a: `Are not currently in a flow`,
+  s638236250662c6b3: `Have sent a message in the last`,
+  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
+};

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,46 @@ 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];
+                // Don't reroute if the target is also being removed
+                if (uuids.includes(targetDestination)) return;
+
+                // 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/store/Store.ts

@@ -506,7 +506,7 @@ export class Store extends RapidElement {
 
   public resolveUsers(items: any, keys: string[]): Promise<void> {
     return new Promise<void>((resolve) => {
-      const emails = new Set<string>();
+      const uuids = new Set<string>();
 
       // keys are dot notation paths to user fields
       items.forEach((item) => {
@@ -519,17 +519,17 @@ export class Store extends RapidElement {
               break;
             }
           }
-          if (value && value.email) {
-            emails.add(value.email);
+          if (value && value.uuid) {
+            uuids.add(value.uuid);
           }
         });
       });
 
       const promises = [];
       // we don't want to fetch all users at once so we can benefit from caching
-      emails.forEach((email) => {
+      uuids.forEach((uuid) => {
         promises.push(
-          this.getUrl(`/api/v2/users.json?email=${encodeURIComponent(email)}`, {
+          this.getUrl(`/api/v2/users.json?uuid=${encodeURIComponent(uuid)}`, {
             force: true
           })
         );

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/src/webchat/WebChat.ts

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { LitElement, TemplateResult, html, css, PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators.js';
-import { getCookie, setCookie } from '../utils';
+import { generateUUIDv7, getCookie, setCookie } from '../utils';
 import { DEFAULT_AVATAR } from './assets';
-import { Chat, ChatEvent, Message, MessageType } from '../display/Chat';
+import { Chat, MsgEvent } from '../display/Chat';
 
 interface User {
   avatar?: string;
@@ -83,17 +83,24 @@ enum ChatStatus {
   CONNECTED = 'connected'
 }
 
-const sockToChat = function (msg: any): ChatEvent | Message {
-  const type = msg.msg_in ? MessageType.MsgIn : MessageType.MsgOut;
+const sockToChat = function (msg: any): MsgEvent {
+  const type = msg.msg_in ? 'msg_created' : 'msg_received';
   const msgContent = msg.msg_in || msg.msg_out;
 
   return {
-    id: msgContent.id,
+    uuid: msgContent.id,
     type,
-    text: msgContent.text,
-    date: new Date(msgContent.time),
-    user: msgContent.user,
-    attachments: msgContent.attachments
+    created_on: new Date(msgContent.time),
+    _user: msgContent.user,
+    msg: {
+      text: msgContent.text,
+      channel: undefined,
+      quick_replies: [],
+      urn: '',
+      direction: '',
+      type: '',
+      attachments: msgContent.attachments
+    }
   };
 };
 
@@ -570,7 +577,14 @@ export class WebChat extends LitElement {
       const date = new Date();
 
       this.chat.addMessages(
-        [{ type: MessageType.MsgIn, text, date }],
+        [
+          {
+            uuid: generateUUIDv7(),
+            type: 'msg_received',
+            msg: { text },
+            created_on: date
+          } as MsgEvent
+        ],
         date,
         true
       );

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

@@ -68,6 +68,7 @@ describe('send_broadcast action config', () => {
       'multiline-text'
     );
 
+    /* TODO: flaky test having to do with attachment render times
     helper.testAction(
       {
         uuid: 'test-action-5',
@@ -80,8 +81,9 @@ 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 () => {