@nyaruka/temba-components 0.131.3 → 0.133.0

package/test/nodes/split_by_run_result.test.ts

@@ -3,6 +3,7 @@ import { split_by_run_result } from '../../src/flow/nodes/split_by_run_result';
 import { Node } from '../../src/store/flow-definition';
 import { NodeTest } from '../NodeHelper';
 import { zustand } from '../../src/store/AppState';
+import { NODE_CONFIG } from '../../src/flow/config';
 
 /**
  * Test suite for the split_by_run_result node configuration.
@@ -928,6 +929,34 @@ describe('split_by_run_result node config', () => {
         expect(config.index).to.be.undefined;
         expect(config.delimiter).to.be.undefined;
       });
+
+      it('should set type to split_by_run_result_delimited when delimiter is enabled', () => {
+        const formData = {
+          result: [{ value: 'favorite_color', name: 'Favorite Color' }],
+          delimit_by: [{ value: '+', name: 'plusses' }],
+          delimit_index: [{ value: '3', name: 'fourth' }],
+          rules: [],
+          result_name: ''
+        };
+
+        const config = split_by_run_result.toUIConfig!(formData);
+
+        expect(config.type).to.equal('split_by_run_result_delimited');
+      });
+
+      it('should set type to split_by_run_result when delimiter is not enabled', () => {
+        const formData = {
+          result: [{ value: 'favorite_color', name: 'Favorite Color' }],
+          delimit_by: [{ value: '', name: "Don't delimit" }],
+          delimit_index: [{ value: '0', name: 'first' }],
+          rules: [],
+          result_name: ''
+        };
+
+        const config = split_by_run_result.toUIConfig!(formData);
+
+        expect(config.type).to.equal('split_by_run_result');
+      });
     });
 
     describe('round-trip tests', () => {
@@ -1106,4 +1135,74 @@ describe('split_by_run_result node config', () => {
       });
     });
   });
+
+  describe('backwards compatibility', () => {
+    it('should support split_by_run_result_delimited type from old flows', () => {
+      // Verify that split_by_run_result_delimited points to the same config as split_by_run_result
+      expect(NODE_CONFIG['split_by_run_result_delimited']).to.equal(
+        NODE_CONFIG['split_by_run_result']
+      );
+      expect(NODE_CONFIG['split_by_run_result_delimited']).to.equal(
+        split_by_run_result
+      );
+
+      // Verify we can look up the config with the old type name
+      const config = NODE_CONFIG['split_by_run_result_delimited'];
+      expect(config).to.not.be.undefined;
+      expect(config.name).to.equal('Split by Result');
+    });
+
+    it('should correctly process old flow with split_by_run_result_delimited type', () => {
+      // Simulate a node from an old flow with the delimited type
+      const oldNode: Node = {
+        uuid: 'old-node-uuid',
+        actions: [],
+        router: {
+          type: 'switch',
+          operand: '@(field(results.bloop, 0, "+"))',
+          cases: [
+            {
+              uuid: 'case-1',
+              type: 'has_any_word',
+              arguments: ['red'],
+              category_uuid: 'cat-1'
+            }
+          ],
+          categories: [
+            { uuid: 'cat-1', name: 'Red', exit_uuid: 'exit-1' },
+            { uuid: 'cat-other', name: 'Other', exit_uuid: 'exit-other' }
+          ],
+          default_category_uuid: 'cat-other'
+        },
+        exits: [
+          { uuid: 'exit-1', destination_uuid: null },
+          { uuid: 'exit-other', destination_uuid: null }
+        ]
+      };
+
+      const oldNodeUI = {
+        type: 'split_by_run_result_delimited',
+        config: {
+          operand: {
+            id: 'bloop',
+            name: 'Bloop',
+            type: 'result'
+          },
+          index: 0,
+          delimiter: '+'
+        }
+      };
+
+      // Get config using the old type name - this should work due to backwards compatibility
+      const config = NODE_CONFIG[oldNodeUI.type];
+      expect(config).to.not.be.undefined;
+
+      // Verify we can convert to form data
+      const formData = config.toFormData!(oldNode, oldNodeUI);
+      expect(formData.result[0].id).to.equal('bloop');
+      expect(formData.result[0].name).to.equal('Bloop');
+      expect(formData.delimit_by[0].value).to.equal('+');
+      expect(formData.delimit_index[0].value).to.equal('0');
+    });
+  });
 });

package/test/temba-backwards-compatibility.test.ts

@@ -0,0 +1,37 @@
+import { expect } from '@open-wc/testing';
+import { NODE_CONFIG } from '../src/flow/config';
+
+describe('Backwards Compatibility', () => {
+  describe('split_by_run_result_delimited alias', () => {
+    it('should map split_by_run_result_delimited to split_by_run_result config', () => {
+      // verify the alias exists in NODE_CONFIG
+      expect(NODE_CONFIG['split_by_run_result_delimited']).to.exist;
+
+      // verify it points to the same config as split_by_run_result
+      expect(NODE_CONFIG['split_by_run_result_delimited']).to.equal(
+        NODE_CONFIG['split_by_run_result']
+      );
+    });
+
+    it('should have the correct type on the split_by_run_result config', () => {
+      const config = NODE_CONFIG['split_by_run_result'];
+      expect(config.type).to.equal('split_by_run_result');
+    });
+
+    it('should declare the alias in the config', () => {
+      const config = NODE_CONFIG['split_by_run_result'];
+      expect(config.aliases).to.exist;
+      expect(config.aliases).to.include('split_by_run_result_delimited');
+    });
+
+    it('should allow old flows with split_by_run_result_delimited type to load', () => {
+      // simulate loading an old flow with the delimited type
+      const oldType = 'split_by_run_result_delimited';
+      const config = NODE_CONFIG[oldType];
+
+      expect(config).to.exist;
+      expect(config.name).to.equal('Split by Result');
+      expect(config.group).to.equal('split');
+    });
+  });
+});

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'
     );
 
@@ -125,11 +125,16 @@ describe('temba-contact-chat', () => {
     await updateComponent(compose, text);
 
     const response_body = {
-      contact: { uuid: 'contact-dave-active', name: 'Dave Matthews' },
-      text: text,
-      attachments: []
+      event: {
+        uuid: 'msg-uuid',
+        contact: { uuid: 'contact-dave-active', name: 'Dave Matthews' },
+        msg: {
+          text: text,
+          attachments: []
+        }
+      }
     };
-    mockPOST(/api\/v2\/messages\.json/, response_body);
+    mockPOST(/contact\/chat\/contact-dave-active\//, response_body);
 
     const listener = oneEvent(compose, CustomEventType.Submitted, false);
     await typeInto('temba-contact-chat:temba-compose', text, true, true);
@@ -149,14 +154,19 @@ describe('temba-contact-chat', () => {
     await updateComponent(compose, null, attachments);
     const response_attachments = getResponseSuccessFiles(attachments);
     const response_body = {
-      contact: { uuid: 'contact-dave-active', name: 'Dave Matthews' },
-      text: '',
-      attachments: response_attachments
+      event: {
+        uuid: 'msg-uuid',
+        contact: { uuid: 'contact-dave-active', name: 'Dave Matthews' },
+        msg: {
+          text: '',
+          attachments: response_attachments
+        }
+      }
     };
     const response_headers = {};
     const response_status = '200';
     mockPOST(
-      /api\/v2\/messages\.json/,
+      /contact\/chat\/contact-dave-active\//,
       response_body,
       response_headers,
       response_status
@@ -184,11 +194,16 @@ describe('temba-contact-chat', () => {
     await updateComponent(compose, text, attachments);
     const response_attachments = getResponseSuccessFiles(attachments);
     const response_body = {
-      contact: { uuid: 'contact-dave-active', name: 'Dave Matthews' },
-      text: text,
-      attachments: response_attachments
+      event: {
+        uuid: 'msg-uuid',
+        contact: { uuid: 'contact-dave-active', name: 'Dave Matthews' },
+        msg: {
+          text,
+          attachments: response_attachments
+        }
+      }
     };
-    mockPOST(/api\/v2\/messages\.json/, response_body);
+    mockPOST(/contact\/chat\/contact-dave-active\//, response_body);
 
     // press enter
     const listener = oneEvent(compose, CustomEventType.Submitted, false);

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-localization.test.ts

@@ -13,7 +13,22 @@ describe('Localization Editing', () => {
   const languageNames: Record<string, string> = {
     eng: 'English',
     fra: 'French',
-    esp: 'Spanish'
+    spa: 'Spanish'
+  };
+
+  const setupWorkspace = () => {
+    zustand.setState({
+      workspace: {
+        uuid: 'test-workspace',
+        name: 'Test Workspace',
+        languages: ['eng', 'fra', 'spa'],
+        primary_language: 'eng',
+        timezone: 'UTC',
+        date_style: 'day_first',
+        country: 'US',
+        anon: false
+      }
+    });
   };
 
   const buildCategoryFlowDefinition = (
@@ -89,6 +104,9 @@ describe('Localization Editing', () => {
   });
 
   beforeEach(async () => {
+    // Set workspace with languages
+    setupWorkspace();
+
     // Create a flow definition with localization data
     const flowDefinition: FlowDefinition = {
       uuid: 'test-flow',
@@ -98,7 +116,7 @@ describe('Localization Editing', () => {
       revision: 1,
       spec_version: '14.3',
       localization: {
-        esp: {
+        spa: {
           'action-1': {
             text: ['Hola mundo'],
             quick_replies: ['Sí', 'No']
@@ -225,12 +243,12 @@ describe('Localization Editing', () => {
     const select = windowEl.querySelector('temba-select') as any;
     expect(select).to.exist;
 
-    select.values = [{ name: 'Spanish', value: 'esp' }];
+    select.values = [{ name: 'Spanish', value: 'spa' }];
     select.dispatchEvent(new CustomEvent('change', { bubbles: true }));
     await editor.updateComplete;
 
     const state = zustand.getState();
-    expect(state.languageCode).to.equal('esp');
+    expect(state.languageCode).to.equal('spa');
     const summary = windowEl.querySelector('.localization-progress-summary');
     expect(summary?.textContent.trim()).to.equal('All items are translated.');
   });
@@ -238,6 +256,8 @@ describe('Localization Editing', () => {
   it('should include category translations when include categories is enabled', async () => {
     editor?.remove();
 
+    setupWorkspace();
+
     const categoryFlowDefinition: FlowDefinition =
       buildCategoryFlowDefinition();
 
@@ -286,6 +306,8 @@ describe('Localization Editing', () => {
     editor?.remove();
     editor = null;
 
+    setupWorkspace();
+
     const flowDefinition = buildCategoryFlowDefinition({
       fra: {
         'cat-1': { name: ['Premier choix'] },
@@ -334,6 +356,8 @@ describe('Localization Editing', () => {
     editor?.remove();
     editor = null;
 
+    setupWorkspace();
+
     const flowDefinition = buildCategoryFlowDefinition({
       fra: {
         'cat-1': { name: ['Premier choix'] }
@@ -518,7 +542,7 @@ describe('Localization Editing', () => {
 
   it('should include language name in dialog header when translating', async () => {
     // Switch to Spanish
-    zustand.getState().setLanguageCode('esp');
+    zustand.getState().setLanguageCode('spa');
 
     const action: SendMsg = {
       type: 'send_msg',

package/test/temba-node-type-selector.test.ts

@@ -238,8 +238,9 @@ describe('temba-node-type-selector', () => {
       item.textContent?.trim()
     );
 
-    // with ai feature, should have Split by AI
-    expect(titles).to.include('Split by AI');
+    // split_by_llm_categorize (Split by AI) is filtered out for old editor compatibility
+    // so it should NOT appear even when AI feature is enabled
+    expect(titles).to.not.include('Split by AI');
   });
 
   it('filters by features - without AI feature, AI splits are hidden', async () => {
@@ -256,7 +257,8 @@ describe('temba-node-type-selector', () => {
       item.textContent?.trim()
     );
 
-    // without ai feature, should not have Split by AI
+    // without ai feature, should not have Call AI or Split by AI
+    expect(titles).to.not.include('Call AI');
     expect(titles).to.not.include('Split by AI');
   });
 
@@ -352,4 +354,88 @@ describe('temba-node-type-selector', () => {
     );
     expect(isAvailableVoice).to.be.true;
   });
+
+  describe('alias filtering', () => {
+    it('should not show split_by_run_result twice when aliases exist', async () => {
+      const selector = await createSelector();
+
+      selector.show('split', { x: 100, y: 100 });
+      await selector.updateComplete;
+
+      // Get all the node items rendered in the selector
+      const nodeItems = selector.shadowRoot!.querySelectorAll('.node-item');
+
+      // Count how many times "Split by Result" appears
+      let splitByResultCount = 0;
+      nodeItems.forEach((item) => {
+        const title = item.querySelector('.node-item-title');
+        if (title?.textContent?.includes('Split by Result')) {
+          splitByResultCount++;
+        }
+      });
+
+      // Should only appear once, not twice
+      expect(splitByResultCount).to.equal(1);
+    });
+
+    it('should not show split_by_run_result_delimited type in the selector', async () => {
+      const selector = await createSelector();
+
+      selector.show('split', { x: 100, y: 100 });
+      await selector.updateComplete;
+
+      // Get all the node items and check their data-type attributes
+      const nodeItems = selector.shadowRoot!.querySelectorAll('.node-item');
+
+      let foundDelimitedType = false;
+      nodeItems.forEach((item) => {
+        const typeAttr = item.getAttribute('data-type');
+        if (typeAttr === 'split_by_run_result_delimited') {
+          foundDelimitedType = true;
+        }
+      });
+
+      expect(foundDelimitedType).to.be.false;
+    });
+
+    it('should not show split_by_llm_categorize in split mode', async () => {
+      const selector = await createSelector();
+
+      selector.show('split', { x: 100, y: 100 });
+      await selector.updateComplete;
+
+      // Get all the node items and check their data-type attributes
+      const nodeItems = selector.shadowRoot!.querySelectorAll('.node-item');
+
+      let foundLLMCategorize = false;
+      nodeItems.forEach((item) => {
+        const typeAttr = item.getAttribute('data-type');
+        if (typeAttr === 'split_by_llm_categorize') {
+          foundLLMCategorize = true;
+        }
+      });
+
+      expect(foundLLMCategorize).to.be.false;
+    });
+
+    it('should not show split_by_llm_categorize in action mode', async () => {
+      const selector = await createSelector();
+
+      selector.show('action', { x: 100, y: 100 });
+      await selector.updateComplete;
+
+      // Get all the node items and check their data-type attributes
+      const nodeItems = selector.shadowRoot!.querySelectorAll('.node-item');
+
+      let foundLLMCategorize = false;
+      nodeItems.forEach((item) => {
+        const typeAttr = item.getAttribute('data-type');
+        if (typeAttr === 'split_by_llm_categorize') {
+          foundLLMCategorize = true;
+        }
+      });
+
+      expect(foundLLMCategorize).to.be.false;
+    });
+  });
 });

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

@@ -13,7 +13,7 @@ import { expect, fixture, html, assert } from '@open-wc/testing';
 const style = document.createElement('style');
 style.textContent = `
   * {
-    --transition-duration: 0ms !important;
+    --transition-speed: 0ms !important;
   }
 `;
 document.head.appendChild(style);
@@ -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) {