@nyaruka/temba-components 0.135.9 → 0.136.1

package/static/svg/work/traced/route.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.115 1.133 C 2.696 1.471,1.633 2.478,1.181 3.914 C 0.936 4.690,0.923 4.940,1.088 5.726 C 1.460 7.499,2.897 8.803,4.614 8.927 C 6.021 9.029,6.796 8.745,7.768 7.773 C 8.690 6.851,8.958 6.199,8.959 4.871 C 8.961 3.418,7.848 1.809,6.480 1.286 C 5.895 1.062,4.728 0.987,4.115 1.133 M6.096 3.406 C 7.120 4.095,7.251 5.524,6.372 6.404 C 5.480 7.295,4.019 7.123,3.364 6.050 C 2.244 4.213,4.316 2.208,6.096 3.406 M10.920 4.236 C 10.375 4.633,10.456 5.444,11.091 5.942 C 11.107 5.955,12.293 6.009,13.726 6.062 C 16.491 6.166,16.632 6.211,16.638 6.988 C 16.641 7.448,15.690 8.236,11.840 10.960 C 5.191 15.664,4.940 15.895,4.836 17.416 C 4.781 18.216,4.831 18.405,5.272 19.065 C 6.043 20.217,6.559 20.369,9.970 20.447 C 12.518 20.505,12.853 20.482,13.130 20.231 C 13.504 19.892,13.534 19.157,13.189 18.811 C 12.991 18.614,12.553 18.558,11.149 18.552 C 8.766 18.541,7.214 18.359,7.031 18.070 C 6.729 17.594,6.883 17.143,7.537 16.582 C 7.898 16.273,10.113 14.651,12.459 12.978 C 14.805 11.304,17.032 9.672,17.408 9.350 C 18.968 8.015,19.151 6.319,17.877 4.998 C 17.180 4.276,16.607 4.144,13.760 4.053 C 11.631 3.985,11.229 4.011,10.920 4.236 M17.840 15.168 C 16.626 15.596,15.476 16.734,15.192 17.789 C 14.564 20.122,15.936 22.423,18.241 22.904 C 21.670 23.620,24.304 19.567,22.260 16.721 C 21.521 15.692,20.481 15.135,19.219 15.092 C 18.637 15.072,18.016 15.106,17.840 15.168 M19.762 17.190 C 20.837 17.640,21.287 19.101,20.649 20.069 C 19.758 21.421,17.803 21.227,17.175 19.725 C 16.644 18.454,17.522 17.139,19.005 16.982 C 19.118 16.970,19.458 17.064,19.762 17.190 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/used/route.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 5H11.9344C14.9816 5 16.5053 5 17.0836 5.54729C17.5836 6.02037 17.8051 6.71728 17.6702 7.39221C17.514 8.17302 16.2701 9.05285 13.7823 10.8125L9.71772 13.6875C7.2299 15.4471 5.98599 16.327 5.82984 17.1078C5.69486 17.7827 5.91642 18.4796 6.41636 18.9527C6.99474 19.5 8.51836 19.5 11.5656 19.5H12.5M8 5C8 6.65685 6.65685 8 5 8C3.34315 8 2 6.65685 2 5C2 3.34315 3.34315 2 5 2C6.65685 2 8 3.34315 8 5ZM22 19C22 20.6569 20.6569 22 19 22C17.3431 22 16 20.6569 16 19C16 17.3431 17.3431 16 19 16C20.6569 16 22 17.3431 22 19Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/temba-modules.ts

@@ -76,6 +76,7 @@ import { MessageEditor } from './src/form/MessageEditor';
 import './src/form/BaseListEditor'; // Import base class
 import { FloatingTab } from './src/display/FloatingTab';
 import { FloatingWindow } from './src/layout/FloatingWindow';
+import { Simulator } from './src/simulator/Simulator';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -162,3 +163,4 @@ addCustomElement('temba-array-editor', TembaArrayEditor);
 addCustomElement('temba-message-editor', MessageEditor);
 addCustomElement('temba-floating-tab', FloatingTab);
 addCustomElement('temba-floating-window', FloatingWindow);
+addCustomElement('temba-simulator', Simulator);

package/test/temba-appstate-node-sorting.test.ts

@@ -0,0 +1,506 @@
+import { expect } from '@open-wc/testing';
+import { zustand } from '../src/store/AppState';
+import { Node, NodeUI } from '../src/store/flow-definition';
+
+describe('AppState Node Sorting', () => {
+  beforeEach(() => {
+    // reset the store state before each test
+    const state = zustand.getState();
+    zustand.setState({
+      ...state,
+      flowDefinition: {
+        language: 'en',
+        localization: {},
+        name: 'Test Flow',
+        nodes: [],
+        uuid: 'test-uuid',
+        type: 'messaging' as const,
+        revision: 1,
+        spec_version: '14.3',
+        _ui: {
+          nodes: {},
+          languages: []
+        }
+      }
+    });
+  });
+
+  describe('addNode', () => {
+    it('should sort nodes by position when adding nodes', () => {
+      const state = zustand.getState();
+
+      // add nodes in non-sorted order
+      const node1: Node = {
+        uuid: 'node-1',
+        actions: [],
+        exits: [{ uuid: 'exit-1', destination_uuid: null }]
+      };
+      const nodeUI1: NodeUI = {
+        position: { left: 100, top: 300 }, // middle
+        type: 'send_msg'
+      };
+
+      const node2: Node = {
+        uuid: 'node-2',
+        actions: [],
+        exits: [{ uuid: 'exit-2', destination_uuid: null }]
+      };
+      const nodeUI2: NodeUI = {
+        position: { left: 100, top: 100 }, // top
+        type: 'send_msg'
+      };
+
+      const node3: Node = {
+        uuid: 'node-3',
+        actions: [],
+        exits: [{ uuid: 'exit-3', destination_uuid: null }]
+      };
+      const nodeUI3: NodeUI = {
+        position: { left: 100, top: 500 }, // bottom
+        type: 'send_msg'
+      };
+
+      // add in order: middle, top, bottom
+      state.addNode(node1, nodeUI1);
+      state.addNode(node2, nodeUI2);
+      state.addNode(node3, nodeUI3);
+
+      const nodes = zustand.getState().flowDefinition.nodes;
+
+      // nodes should be sorted by y position (top to bottom)
+      expect(nodes[0].uuid).to.equal('node-2'); // top: 100
+      expect(nodes[1].uuid).to.equal('node-1'); // top: 300
+      expect(nodes[2].uuid).to.equal('node-3'); // top: 500
+    });
+
+    it('should sort by x when y positions are the same', () => {
+      const state = zustand.getState();
+
+      // add nodes with same y but different x
+      const node1: Node = {
+        uuid: 'node-1',
+        actions: [],
+        exits: [{ uuid: 'exit-1', destination_uuid: null }]
+      };
+      const nodeUI1: NodeUI = {
+        position: { left: 300, top: 100 },
+        type: 'send_msg'
+      };
+
+      const node2: Node = {
+        uuid: 'node-2',
+        actions: [],
+        exits: [{ uuid: 'exit-2', destination_uuid: null }]
+      };
+      const nodeUI2: NodeUI = {
+        position: { left: 100, top: 100 },
+        type: 'send_msg'
+      };
+
+      const node3: Node = {
+        uuid: 'node-3',
+        actions: [],
+        exits: [{ uuid: 'exit-3', destination_uuid: null }]
+      };
+      const nodeUI3: NodeUI = {
+        position: { left: 500, top: 100 },
+        type: 'send_msg'
+      };
+
+      // add in order: middle, left, right
+      state.addNode(node1, nodeUI1);
+      state.addNode(node2, nodeUI2);
+      state.addNode(node3, nodeUI3);
+
+      const nodes = zustand.getState().flowDefinition.nodes;
+
+      // nodes should be sorted by x position (left to right) since y is same
+      expect(nodes[0].uuid).to.equal('node-2'); // left: 100
+      expect(nodes[1].uuid).to.equal('node-1'); // left: 300
+      expect(nodes[2].uuid).to.equal('node-3'); // left: 500
+    });
+
+    it('should handle complex sorting with mixed positions', () => {
+      const state = zustand.getState();
+
+      // create a grid of nodes
+      // row 1: (100, 100), (200, 100)
+      // row 2: (100, 200), (200, 200)
+
+      const nodes = [
+        {
+          node: {
+            uuid: 'node-1',
+            actions: [],
+            exits: [{ uuid: 'exit-1', destination_uuid: null }]
+          },
+          ui: { position: { left: 200, top: 200 }, type: 'send_msg' as const }
+        },
+        {
+          node: {
+            uuid: 'node-2',
+            actions: [],
+            exits: [{ uuid: 'exit-2', destination_uuid: null }]
+          },
+          ui: { position: { left: 100, top: 100 }, type: 'send_msg' as const }
+        },
+        {
+          node: {
+            uuid: 'node-3',
+            actions: [],
+            exits: [{ uuid: 'exit-3', destination_uuid: null }]
+          },
+          ui: { position: { left: 200, top: 100 }, type: 'send_msg' as const }
+        },
+        {
+          node: {
+            uuid: 'node-4',
+            actions: [],
+            exits: [{ uuid: 'exit-4', destination_uuid: null }]
+          },
+          ui: { position: { left: 100, top: 200 }, type: 'send_msg' as const }
+        }
+      ];
+
+      // add in random order
+      nodes.forEach((n) => state.addNode(n.node, n.ui));
+
+      const sortedNodes = zustand.getState().flowDefinition.nodes;
+
+      // expected order: (100,100), (200,100), (100,200), (200,200)
+      expect(sortedNodes[0].uuid).to.equal('node-2'); // (100, 100)
+      expect(sortedNodes[1].uuid).to.equal('node-3'); // (200, 100)
+      expect(sortedNodes[2].uuid).to.equal('node-4'); // (100, 200)
+      expect(sortedNodes[3].uuid).to.equal('node-1'); // (200, 200)
+    });
+  });
+
+  describe('createNode', () => {
+    it('should sort nodes after creating a new node', () => {
+      const state = zustand.getState();
+
+      // create nodes in non-sorted order
+      const uuid1 = state.createNode('send_msg', { left: 300, top: 100 });
+      const uuid2 = state.createNode('send_msg', { left: 100, top: 100 });
+      const uuid3 = state.createNode('send_msg', { left: 200, top: 100 });
+
+      const nodes = zustand.getState().flowDefinition.nodes;
+
+      // nodes should be sorted by x position
+      expect(nodes[0].uuid).to.equal(uuid2); // left: 100
+      expect(nodes[1].uuid).to.equal(uuid3); // left: 200
+      expect(nodes[2].uuid).to.equal(uuid1); // left: 300
+    });
+  });
+
+  describe('removeNodes', () => {
+    it('should maintain sorting after removing nodes', () => {
+      const state = zustand.getState();
+
+      // create nodes
+      const node1: Node = {
+        uuid: 'node-1',
+        actions: [],
+        exits: [{ uuid: 'exit-1', destination_uuid: null }]
+      };
+      const nodeUI1: NodeUI = {
+        position: { left: 100, top: 100 },
+        type: 'send_msg'
+      };
+
+      const node2: Node = {
+        uuid: 'node-2',
+        actions: [],
+        exits: [{ uuid: 'exit-2', destination_uuid: null }]
+      };
+      const nodeUI2: NodeUI = {
+        position: { left: 200, top: 100 },
+        type: 'send_msg'
+      };
+
+      const node3: Node = {
+        uuid: 'node-3',
+        actions: [],
+        exits: [{ uuid: 'exit-3', destination_uuid: null }]
+      };
+      const nodeUI3: NodeUI = {
+        position: { left: 300, top: 100 },
+        type: 'send_msg'
+      };
+
+      state.addNode(node1, nodeUI1);
+      state.addNode(node2, nodeUI2);
+      state.addNode(node3, nodeUI3);
+
+      // remove middle node
+      state.removeNodes(['node-2']);
+
+      const nodes = zustand.getState().flowDefinition.nodes;
+
+      // remaining nodes should still be sorted
+      expect(nodes.length).to.equal(2);
+      expect(nodes[0].uuid).to.equal('node-1'); // left: 100
+      expect(nodes[1].uuid).to.equal('node-3'); // left: 300
+    });
+
+    it('should sort nodes after connection rerouting during removal', () => {
+      const state = zustand.getState();
+
+      // create a chain of nodes
+      const node1: Node = {
+        uuid: 'node-1',
+        actions: [],
+        exits: [{ uuid: 'exit-1', destination_uuid: 'node-2' }]
+      };
+      const nodeUI1: NodeUI = {
+        position: { left: 100, top: 300 },
+        type: 'send_msg'
+      };
+
+      const node2: Node = {
+        uuid: 'node-2',
+        actions: [],
+        exits: [{ uuid: 'exit-2', destination_uuid: 'node-3' }]
+      };
+      const nodeUI2: NodeUI = {
+        position: { left: 200, top: 200 },
+        type: 'send_msg'
+      };
+
+      const node3: Node = {
+        uuid: 'node-3',
+        actions: [],
+        exits: [{ uuid: 'exit-3', destination_uuid: null }]
+      };
+      const nodeUI3: NodeUI = {
+        position: { left: 300, top: 100 },
+        type: 'send_msg'
+      };
+
+      state.addNode(node1, nodeUI1);
+      state.addNode(node2, nodeUI2);
+      state.addNode(node3, nodeUI3);
+
+      // verify initial sorting
+      let nodes = zustand.getState().flowDefinition.nodes;
+      expect(nodes[0].uuid).to.equal('node-3'); // top: 100
+      expect(nodes[1].uuid).to.equal('node-2'); // top: 200
+      expect(nodes[2].uuid).to.equal('node-1'); // top: 300
+
+      // remove middle node - should reroute connection
+      state.removeNodes(['node-2']);
+
+      nodes = zustand.getState().flowDefinition.nodes;
+
+      // nodes should still be sorted
+      expect(nodes.length).to.equal(2);
+      expect(nodes[0].uuid).to.equal('node-3'); // top: 100
+      expect(nodes[1].uuid).to.equal('node-1'); // top: 300
+
+      // verify rerouting happened
+      expect(nodes[1].exits[0].destination_uuid).to.equal('node-3');
+    });
+  });
+
+  describe('updateCanvasPositions', () => {
+    it('should re-sort nodes when positions change', () => {
+      const state = zustand.getState();
+
+      // create nodes in sorted order
+      const node1: Node = {
+        uuid: 'node-1',
+        actions: [],
+        exits: [{ uuid: 'exit-1', destination_uuid: null }]
+      };
+      const nodeUI1: NodeUI = {
+        position: { left: 100, top: 100 },
+        type: 'send_msg'
+      };
+
+      const node2: Node = {
+        uuid: 'node-2',
+        actions: [],
+        exits: [{ uuid: 'exit-2', destination_uuid: null }]
+      };
+      const nodeUI2: NodeUI = {
+        position: { left: 100, top: 200 },
+        type: 'send_msg'
+      };
+
+      const node3: Node = {
+        uuid: 'node-3',
+        actions: [],
+        exits: [{ uuid: 'exit-3', destination_uuid: null }]
+      };
+      const nodeUI3: NodeUI = {
+        position: { left: 100, top: 300 },
+        type: 'send_msg'
+      };
+
+      state.addNode(node1, nodeUI1);
+      state.addNode(node2, nodeUI2);
+      state.addNode(node3, nodeUI3);
+
+      let nodes = zustand.getState().flowDefinition.nodes;
+      expect(nodes[0].uuid).to.equal('node-1'); // top: 100
+      expect(nodes[1].uuid).to.equal('node-2'); // top: 200
+      expect(nodes[2].uuid).to.equal('node-3'); // top: 300
+
+      // move node-1 to the bottom
+      state.updateCanvasPositions({
+        'node-1': { left: 100, top: 400 }
+      });
+
+      nodes = zustand.getState().flowDefinition.nodes;
+
+      // nodes should be re-sorted
+      expect(nodes[0].uuid).to.equal('node-2'); // top: 200
+      expect(nodes[1].uuid).to.equal('node-3'); // top: 300
+      expect(nodes[2].uuid).to.equal('node-1'); // top: 400
+    });
+
+    it('should handle multiple position updates at once', () => {
+      const state = zustand.getState();
+
+      // create nodes
+      const node1: Node = {
+        uuid: 'node-1',
+        actions: [],
+        exits: [{ uuid: 'exit-1', destination_uuid: null }]
+      };
+      const nodeUI1: NodeUI = {
+        position: { left: 100, top: 100 },
+        type: 'send_msg'
+      };
+
+      const node2: Node = {
+        uuid: 'node-2',
+        actions: [],
+        exits: [{ uuid: 'exit-2', destination_uuid: null }]
+      };
+      const nodeUI2: NodeUI = {
+        position: { left: 100, top: 200 },
+        type: 'send_msg'
+      };
+
+      const node3: Node = {
+        uuid: 'node-3',
+        actions: [],
+        exits: [{ uuid: 'exit-3', destination_uuid: null }]
+      };
+      const nodeUI3: NodeUI = {
+        position: { left: 100, top: 300 },
+        type: 'send_msg'
+      };
+
+      state.addNode(node1, nodeUI1);
+      state.addNode(node2, nodeUI2);
+      state.addNode(node3, nodeUI3);
+
+      // swap positions of node-1 and node-3
+      state.updateCanvasPositions({
+        'node-1': { left: 100, top: 300 },
+        'node-3': { left: 100, top: 100 }
+      });
+
+      const nodes = zustand.getState().flowDefinition.nodes;
+
+      // nodes should be re-sorted
+      expect(nodes[0].uuid).to.equal('node-3'); // top: 100
+      expect(nodes[1].uuid).to.equal('node-2'); // top: 200
+      expect(nodes[2].uuid).to.equal('node-1'); // top: 300
+    });
+
+    it('should not affect sticky notes when updating positions', () => {
+      const state = zustand.getState();
+
+      // create a node
+      const node: Node = {
+        uuid: 'node-1',
+        actions: [],
+        exits: [{ uuid: 'exit-1', destination_uuid: null }]
+      };
+      const nodeUI: NodeUI = {
+        position: { left: 100, top: 100 },
+        type: 'send_msg'
+      };
+
+      state.addNode(node, nodeUI);
+
+      // create a sticky note
+      const stickyUuid = state.createStickyNote({ left: 200, top: 200 });
+
+      // update positions for both
+      state.updateCanvasPositions({
+        'node-1': { left: 100, top: 300 },
+        [stickyUuid]: { left: 200, top: 100 }
+      });
+
+      const flowDef = zustand.getState().flowDefinition;
+
+      // verify node position was updated
+      expect(flowDef._ui.nodes['node-1'].position.top).to.equal(300);
+
+      // verify sticky position was updated
+      expect(flowDef._ui.stickies[stickyUuid].position.top).to.equal(100);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle nodes with missing position data', () => {
+      const state = zustand.getState();
+
+      // manually create a flow definition with a node that has no UI data
+      zustand.setState({
+        ...zustand.getState(),
+        flowDefinition: {
+          language: 'en',
+          localization: {},
+          name: 'Test Flow',
+          nodes: [
+            {
+              uuid: 'node-1',
+              actions: [],
+              exits: [{ uuid: 'exit-1', destination_uuid: null }]
+            }
+          ],
+          uuid: 'test-uuid',
+          type: 'messaging' as const,
+          revision: 1,
+          spec_version: '14.3',
+          _ui: {
+            nodes: {}, // no UI data for node-1
+            languages: []
+          }
+        }
+      });
+
+      // add a node with position data
+      const node2: Node = {
+        uuid: 'node-2',
+        actions: [],
+        exits: [{ uuid: 'exit-2', destination_uuid: null }]
+      };
+      const nodeUI2: NodeUI = {
+        position: { left: 100, top: 100 },
+        type: 'send_msg'
+      };
+
+      // should not throw error
+      expect(() => state.addNode(node2, nodeUI2)).to.not.throw();
+
+      const nodes = zustand.getState().flowDefinition.nodes;
+      expect(nodes.length).to.equal(2);
+    });
+
+    it('should handle empty nodes array', () => {
+      const state = zustand.getState();
+
+      // verify initial state is empty
+      expect(zustand.getState().flowDefinition.nodes.length).to.equal(0);
+
+      // try to remove nodes from empty flow - should not throw
+      expect(() => state.removeNodes(['non-existent'])).to.not.throw();
+    });
+  });
+});

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

@@ -96,15 +96,4 @@ describe('temba-floating-tab', () => {
     await assertScreenshot('floating-tab/gray', getClip(tab2));
     await assertScreenshot('floating-tab/purple', getClip(tab3));
   });
-
-  it('supports custom positioning', async () => {
-    const tab = (await getComponent('temba-floating-tab', {
-      icon: 'phone',
-      label: 'Phone Simulator',
-      color: '#10b981',
-      top: 250
-    })) as FloatingTab;
-
-    expect(tab.top).to.equal(250);
-  });
 });