@nyaruka/temba-components 0.129.8 → 0.129.10

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

@@ -444,4 +444,500 @@ describe('temba-node-editor', () => {
     // Should have arrows for collapsible groups
     expect(arrows.length).to.be.greaterThan(0);
   });
+
+  it('renders split_by_llm_categorize node', async () => {
+    const node = {
+      uuid: 'test-node-uuid',
+      actions: [
+        {
+          uuid: 'call-llm-uuid',
+          type: 'call_llm',
+          llm: { uuid: 'llm-123', name: 'Test LLM' },
+          input: '@input',
+          instructions:
+            '@(prompt("categorize", slice(node.categories, 0, -2)))',
+          output_local: '_llm_output'
+        }
+      ],
+      router: {
+        type: 'switch',
+        operand: '@locals._llm_output',
+        result_name: 'Intent',
+        categories: [
+          { uuid: 'cat-1', name: 'Greeting', exit_uuid: 'exit-1' },
+          { uuid: 'cat-2', name: 'Question', exit_uuid: 'exit-2' },
+          { uuid: 'cat-3', name: 'Other', exit_uuid: 'exit-3' },
+          { uuid: 'cat-4', name: 'Failure', exit_uuid: 'exit-4' }
+        ]
+      },
+      exits: [
+        { uuid: 'exit-1', destination_uuid: null },
+        { uuid: 'exit-2', destination_uuid: null },
+        { uuid: 'exit-3', destination_uuid: null },
+        { uuid: 'exit-4', destination_uuid: null }
+      ]
+    };
+
+    const nodeUI = { type: 'split_by_llm_categorize' };
+
+    const el = (await fixture(html`
+      <temba-node-editor
+        .node=${node}
+        .nodeUI=${nodeUI}
+        .isOpen=${true}
+      ></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    expect(el.node).to.equal(node);
+    expect(el.nodeUI).to.equal(nodeUI);
+
+    // Wait for form data initialization
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    await el.updateComplete;
+
+    // Check if the dialog is rendered with correct header
+    const dialog = el.shadowRoot.querySelector('temba-dialog');
+    expect(dialog).to.not.be.null;
+    expect(dialog.getAttribute('header')).to.equal('Split by AI');
+
+    // Check that the form is rendered
+    const form = el.shadowRoot.querySelector('.node-editor-form');
+    expect(form).to.not.be.null;
+
+    // Check that all expected form components are rendered
+    const selectComponents = el.shadowRoot.querySelectorAll('temba-select');
+    const arrayComponents =
+      el.shadowRoot.querySelectorAll('temba-array-editor');
+    const completionComponents =
+      el.shadowRoot.querySelectorAll('temba-completion');
+
+    // Should have LLM select field
+    expect(selectComponents.length).to.equal(1);
+    expect(selectComponents[0].getAttribute('label')).to.equal('LLM');
+
+    // Should have input completion field
+    expect(completionComponents.length).to.equal(1);
+    expect(completionComponents[0].getAttribute('label')).to.equal('Input');
+
+    // Should have categories array editor
+    expect(arrayComponents.length).to.equal(1);
+  });
+
+  it('renders wait_for_response node', async () => {
+    const node = {
+      uuid: 'test-wait-node-uuid',
+      actions: [],
+      router: {
+        type: 'switch',
+        wait: {
+          type: 'msg',
+          timeout: 300 // 5 minutes in seconds
+        },
+        result_name: 'response',
+        categories: []
+      },
+      exits: []
+    };
+
+    const nodeUI = { type: 'wait_for_response' };
+
+    const el = (await fixture(html`
+      <temba-node-editor
+        .node=${node}
+        .nodeUI=${nodeUI}
+        .isOpen=${true}
+      ></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+
+    // Wait for form data initialization
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    await el.updateComplete;
+
+    // Check that the dialog is rendered with correct header
+    const dialog = el.shadowRoot.querySelector('temba-dialog');
+    expect(dialog).to.not.be.null;
+    expect(dialog.getAttribute('header')).to.equal('Wait for Response');
+
+    // Check that timeout and result name fields are rendered
+    const textComponents = el.shadowRoot.querySelectorAll('temba-textinput');
+    expect(textComponents.length).to.equal(1);
+
+    // Verify the field labels
+    const labels = Array.from(textComponents).map((comp) =>
+      comp.getAttribute('label')
+    );
+    expect(labels).to.include('Result Name');
+  });
+
+  it('prioritizes node config over action config for non-execute_actions nodes', async () => {
+    // Create a split_by_llm_categorize node that has both actions and should use node config
+    const node = {
+      uuid: 'test-node-uuid',
+      actions: [
+        {
+          uuid: 'call-llm-uuid',
+          type: 'call_llm',
+          llm: { uuid: 'llm-123', name: 'Test LLM' },
+          input: '@input',
+          instructions:
+            '@(prompt("categorize", slice(node.categories, 0, -2)))',
+          output_local: '_llm_output'
+        }
+      ],
+      router: {
+        type: 'switch',
+        operand: '@locals._llm_output',
+        result_name: 'Intent',
+        categories: [
+          { uuid: 'cat-1', name: 'Greeting', exit_uuid: 'exit-1' },
+          { uuid: 'cat-2', name: 'Question', exit_uuid: 'exit-2' }
+        ]
+      },
+      exits: [
+        { uuid: 'exit-1', destination_uuid: null },
+        { uuid: 'exit-2', destination_uuid: null }
+      ]
+    };
+
+    const nodeUI = { type: 'split_by_llm_categorize' };
+
+    // Simulate having both node and action set (which happens when editing from flow)
+    const el = (await fixture(html`
+      <temba-node-editor
+        .node=${node}
+        .nodeUI=${nodeUI}
+        .action=${node.actions[0]}
+        .isOpen=${true}
+      >
+      </temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+
+    // Wait for form data initialization
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    await el.updateComplete;
+
+    // Should show node editor (Split by AI Categorize), not action editor (Call LLM)
+    const dialog = el.shadowRoot.querySelector('temba-dialog');
+    expect(dialog.getAttribute('header')).to.equal('Split by AI');
+
+    // Should have node config fields (LLM, Input, Categories, Result Name)
+    const selectComponents = el.shadowRoot.querySelectorAll('temba-select');
+    const arrayComponents =
+      el.shadowRoot.querySelectorAll('temba-array-editor');
+
+    // Should have LLM select and categories array (node config fields)
+    expect(selectComponents.length).to.equal(1);
+    expect(arrayComponents.length).to.equal(1);
+  });
+
+  it('initializes categories correctly for split_by_llm_categorize', async () => {
+    const node = {
+      uuid: 'test-node-uuid',
+      actions: [
+        {
+          uuid: 'call-llm-uuid',
+          type: 'call_llm',
+          llm: { uuid: 'llm-123', name: 'Test LLM' },
+          input: '@input',
+          instructions:
+            '@(prompt("categorize", slice(node.categories, 0, -2)))',
+          output_local: '_llm_output'
+        }
+      ],
+      router: {
+        type: 'switch',
+        operand: '@locals._llm_output',
+        result_name: 'Intent',
+        categories: [
+          { uuid: 'cat-1', name: 'Greeting', exit_uuid: 'exit-1' },
+          { uuid: 'cat-2', name: 'Question', exit_uuid: 'exit-2' },
+          { uuid: 'cat-3', name: 'Other', exit_uuid: 'exit-3' },
+          { uuid: 'cat-4', name: 'Failure', exit_uuid: 'exit-4' }
+        ]
+      },
+      exits: [
+        { uuid: 'exit-1', destination_uuid: null },
+        { uuid: 'exit-2', destination_uuid: null },
+        { uuid: 'exit-3', destination_uuid: null },
+        { uuid: 'exit-4', destination_uuid: null }
+      ]
+    };
+
+    const nodeUI = { type: 'split_by_llm_categorize' };
+
+    const el = (await fixture(html`
+      <temba-node-editor
+        .node=${node}
+        .nodeUI=${nodeUI}
+        .isOpen=${true}
+      ></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+
+    // Wait for form data initialization
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    await el.updateComplete;
+
+    // Access the component's formData directly to check initialization
+    const formData = (el as any).formData;
+
+    // Should have 2 categories (Greeting and Question, excluding Other and Failure)
+    expect(formData.categories).to.be.an('array');
+    expect(formData.categories.length).to.equal(2);
+    expect(formData.categories[0].name).to.equal('Greeting');
+    expect(formData.categories[1].name).to.equal('Question');
+
+    // Check that the array editor component receives the correct value
+    const arrayEditor = el.shadowRoot.querySelector('temba-array-editor');
+    expect(arrayEditor).to.not.be.null;
+
+    // Wait a bit more for the array editor to fully render
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    await el.updateComplete;
+
+    // Check the values of the textinput components within the array items
+    const textInputs =
+      arrayEditor.shadowRoot?.querySelectorAll('temba-textinput');
+
+    if (textInputs && textInputs.length >= 2) {
+      // The first two textinputs should have the category names
+      expect((textInputs[0] as any).value).to.equal('Greeting');
+      expect((textInputs[1] as any).value).to.equal('Question');
+    }
+  });
+
+  it('properly initializes categories when node is set after component creation', async () => {
+    // First create the component without any data
+    const el = (await fixture(html`
+      <temba-node-editor .isOpen=${false}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+
+    // Then set the node data (simulating real usage)
+    const node = {
+      uuid: 'test-node-uuid',
+      actions: [
+        {
+          uuid: 'call-llm-uuid',
+          type: 'call_llm',
+          llm: { uuid: 'llm-123', name: 'Test LLM' },
+          input: '@input',
+          instructions:
+            '@(prompt("categorize", slice(node.categories, 0, -2)))',
+          output_local: '_llm_output'
+        }
+      ],
+      router: {
+        type: 'switch',
+        operand: '@locals._llm_output',
+        result_name: 'Intent',
+        categories: [
+          { uuid: 'cat-1', name: 'Greeting', exit_uuid: 'exit-1' },
+          { uuid: 'cat-2', name: 'Question', exit_uuid: 'exit-2' },
+          { uuid: 'cat-3', name: 'Other', exit_uuid: 'exit-3' },
+          { uuid: 'cat-4', name: 'Failure', exit_uuid: 'exit-4' }
+        ]
+      },
+      exits: [
+        { uuid: 'exit-1', destination_uuid: null },
+        { uuid: 'exit-2', destination_uuid: null },
+        { uuid: 'exit-3', destination_uuid: null },
+        { uuid: 'exit-4', destination_uuid: null }
+      ]
+    };
+
+    const nodeUI = { type: 'split_by_llm_categorize' };
+
+    // Set the properties (this should trigger updated() and openDialog())
+    el.node = node;
+    el.nodeUI = nodeUI;
+
+    await el.updateComplete;
+
+    // Wait for dialog to open and form data to initialize
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    await el.updateComplete;
+
+    // Check that the form data is properly initialized
+    const formData = (el as any).formData;
+
+    expect(formData.categories).to.be.an('array');
+    expect(formData.categories.length).to.equal(2);
+    expect(formData.categories[0].name).to.equal('Greeting');
+    expect(formData.categories[1].name).to.equal('Question');
+
+    // Check that array editor gets the correct values
+    const arrayEditor = el.shadowRoot.querySelector('temba-array-editor');
+    expect(arrayEditor).to.not.be.null;
+
+    const textInputs =
+      arrayEditor.shadowRoot?.querySelectorAll('temba-textinput');
+    if (textInputs && textInputs.length >= 2) {
+      expect((textInputs[0] as any).value).to.equal('Greeting');
+      expect((textInputs[1] as any).value).to.equal('Question');
+    }
+  });
+
+  it('preserves UUIDs for unchanged categories in split_by_llm_categorize', async () => {
+    const originalNode: any = {
+      uuid: 'test-node-uuid',
+      actions: [
+        {
+          uuid: 'existing-call-llm-uuid',
+          type: 'call_llm',
+          llm: { uuid: 'llm-123', name: 'Test LLM' },
+          input: '@input',
+          instructions:
+            '@(prompt("categorize", slice(node.categories, 0, -2)))',
+          output_local: '_llm_output'
+        }
+      ],
+      router: {
+        type: 'switch',
+        operand: '@locals._llm_output',
+        result_name: 'Intent',
+        categories: [
+          {
+            uuid: 'existing-cat-1',
+            name: 'Greeting',
+            exit_uuid: 'existing-exit-1'
+          },
+          {
+            uuid: 'existing-cat-2',
+            name: 'Question',
+            exit_uuid: 'existing-exit-2'
+          },
+          {
+            uuid: 'existing-cat-other',
+            name: 'Other',
+            exit_uuid: 'existing-exit-other'
+          },
+          {
+            uuid: 'existing-cat-failure',
+            name: 'Failure',
+            exit_uuid: 'existing-exit-failure'
+          }
+        ],
+        cases: [
+          {
+            uuid: 'existing-case-1',
+            type: 'has_only_text',
+            arguments: ['Greeting'],
+            category_uuid: 'existing-cat-1'
+          },
+          {
+            uuid: 'existing-case-2',
+            type: 'has_only_text',
+            arguments: ['Question'],
+            category_uuid: 'existing-cat-2'
+          },
+          {
+            uuid: 'existing-case-error',
+            type: 'has_only_text',
+            arguments: ['<ERROR>'],
+            category_uuid: 'existing-cat-failure'
+          }
+        ]
+      },
+      exits: [
+        { uuid: 'existing-exit-1', destination_uuid: 'some-destination-1' },
+        { uuid: 'existing-exit-2', destination_uuid: 'some-destination-2' },
+        { uuid: 'existing-exit-other', destination_uuid: null },
+        { uuid: 'existing-exit-failure', destination_uuid: null }
+      ]
+    };
+
+    // Import the node config to test fromFormData directly
+    const { split_by_llm_categorize } = await import(
+      '../src/flow/nodes/split_by_llm_categorize'
+    );
+
+    // Test with same categories - should preserve UUIDs
+    const formDataSame = {
+      llm: [{ value: 'llm-123', name: 'Test LLM' }],
+      input: '@input',
+      categories: [{ name: 'Greeting' }, { name: 'Question' }],
+      result_name: 'Intent'
+    };
+
+    const resultSame = split_by_llm_categorize.fromFormData(
+      formDataSame,
+      originalNode
+    );
+
+    // Should preserve existing UUIDs for unchanged categories
+    expect(resultSame.actions[0].uuid).to.equal('existing-call-llm-uuid');
+
+    const greetingCategory = resultSame.router.categories.find(
+      (cat) => cat.name === 'Greeting'
+    );
+    const questionCategory = resultSame.router.categories.find(
+      (cat) => cat.name === 'Question'
+    );
+    const otherCategory = resultSame.router.categories.find(
+      (cat) => cat.name === 'Other'
+    );
+    const failureCategory = resultSame.router.categories.find(
+      (cat) => cat.name === 'Failure'
+    );
+
+    expect(greetingCategory.uuid).to.equal('existing-cat-1');
+    expect(greetingCategory.exit_uuid).to.equal('existing-exit-1');
+    expect(questionCategory.uuid).to.equal('existing-cat-2');
+    expect(questionCategory.exit_uuid).to.equal('existing-exit-2');
+    expect(otherCategory.uuid).to.equal('existing-cat-other');
+    expect(failureCategory.uuid).to.equal('existing-cat-failure');
+
+    // Should preserve destination UUIDs for exits
+    const greetingExit = resultSame.exits.find(
+      (exit) => exit.uuid === 'existing-exit-1'
+    );
+    const questionExit = resultSame.exits.find(
+      (exit) => exit.uuid === 'existing-exit-2'
+    );
+    expect(greetingExit.destination_uuid).to.equal('some-destination-1');
+    expect(questionExit.destination_uuid).to.equal('some-destination-2');
+
+    // Test with changed categories - should generate new UUIDs for new categories
+    const formDataChanged = {
+      llm: [{ value: 'llm-123', name: 'Test LLM' }],
+      input: '@input',
+      categories: [
+        { name: 'Greeting' }, // unchanged - should keep UUID
+        { name: 'NewCategory' } // new - should get new UUID
+      ],
+      result_name: 'Intent'
+    };
+
+    const resultChanged = split_by_llm_categorize.fromFormData(
+      formDataChanged,
+      originalNode
+    );
+
+    const greetingCategoryChanged = resultChanged.router.categories.find(
+      (cat) => cat.name === 'Greeting'
+    );
+    const newCategory = resultChanged.router.categories.find(
+      (cat) => cat.name === 'NewCategory'
+    );
+
+    // Greeting should keep its existing UUID
+    expect(greetingCategoryChanged.uuid).to.equal('existing-cat-1');
+    expect(greetingCategoryChanged.exit_uuid).to.equal('existing-exit-1');
+
+    // NewCategory should get a new UUID (not one of the existing ones)
+    expect(newCategory.uuid).to.not.equal('existing-cat-1');
+    expect(newCategory.uuid).to.not.equal('existing-cat-2');
+    expect(newCategory.uuid).to.not.equal('existing-cat-other');
+    expect(newCategory.uuid).to.not.equal('existing-cat-failure');
+    expect(newCategory.uuid).to.have.length.greaterThan(0);
+  });
 });

package/test/temba-select.test.ts

@@ -903,7 +903,7 @@ describe('temba-select', () => {
       assert.equal(select.visibleOptions.length, 15);
     });
 
-    it('shows cached results', async () => {
+    xit('shows cached results', async () => {
       const select = await createSelect(
         clock,
         getSelectHTML([], {
@@ -978,16 +978,16 @@ describe('temba-select', () => {
           searchable: true
         })
       );
-      await assertScreenshot(
-        'select/search-enabled',
-        getClipWithOptions(select)
-      );
+      await assertScreenshot('select/search-enabled', getClip(select));
     });
 
     it('should look the same with search enabled and selection made', async () => {
       const select = await createSelect(
         clock,
-        getSelectHTML(colors, { searchable: true })
+        getSelectHTML(colors, {
+          placeholder: 'Select a color',
+          searchable: true
+        })
       );
 
       // select the first option

package/test/temba-slider.test.ts

@@ -15,7 +15,6 @@ describe('temba-slider', () => {
       <temba-slider label="My Slider"></temba-slider>
     `);
 
-    expect(slider.label).to.equal('My Slider');
     await assertScreenshot('slider/default', getClip(slider));
   });
 

package/test/temba-webchat.test.ts

@@ -202,7 +202,7 @@ describe('temba-webchat', () => {
       expect(webChat.open).to.equal(true);
       expect(webChat.status).to.equal('connecting');
 
-      await assertScreenshot('webchat/connecting-state', getClip(webChat));
+      // await assertScreenshot('webchat/connecting-state', getClip(webChat));
     });
 
     it('renders disconnected state with reconnect option', async () => {

package/test-assets/contacts/history.json

@@ -62,13 +62,14 @@
       "logs_url": null
     },
     {
-      "type": "flow_exited",
-      "created_on": "2021-03-30T22:20:35.573809+00:00",
+      "type": "run_ended",
+      "created_on": "2021-03-30T22:20:26.704467+00:00",
+      "run_uuid": "0198c846-da2b-799f-8af9-aaf8857f947f",
       "flow": {
         "uuid": "d076d716-8071-417e-b188-d9746db223a1",
         "name": "Favorites"
       },
-      "status": "C"
+      "status": "completed"
     },
     {
       "uuid": "01988a70-3e8f-7890-b1d2-7418db7a575e",
@@ -209,13 +210,9 @@
       "logs_url": "/channels/channellog/read/1472/"
     },
     {
-      "type": "flow_entered",
-      "created_on": "2021-03-30T22:20:26.704467+00:00",
-      "flow": {
-        "uuid": "d076d716-8071-417e-b188-d9746db223a1",
-        "name": "Favorites"
-      },
-      "logs_url": null
+      "uuid": "0198e7b8-fe00-76e6-91e4-1253dd9a6230",
+      "type": "call_missed",
+      "created_on": "2021-03-30T22:20:26.704467+00:00"
     },
     {
       "type": "run_started",
@@ -226,16 +223,6 @@
         "name": "Favorites"
       }
     },
-    {
-      "type": "run_ended",
-      "created_on": "2021-03-30T22:20:26.704467+00:00",
-      "run_uuid": "0198c846-da2b-799f-8af9-aaf8857f947f",
-      "flow": {
-        "uuid": "d076d716-8071-417e-b188-d9746db223a1",
-        "name": "Favorites"
-      },
-      "status": "completed"
-    },
     {
       "uuid": "01988a77-979e-7768-a940-8d9c348e24fe",
       "type": "msg_received",

package/test-assets/select/llms.json

@@ -0,0 +1,18 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "uuid": "2399e7d6-fcdf-4e47-a835-f3bdb7f80938",
+      "name": "GPT 4.1",
+      "value": "2399e7d6-fcdf-4e47-a835-f3bdb7f80938",
+      "type": "openai"
+    },
+    {
+      "uuid": "4399e7d6-fcdf-4e47-a835-f3bdb7f80938", 
+      "name": "GPT 5",
+      "value": "4399e7d6-fcdf-4e47-a835-f3bdb7f80938",
+      "type": "openai"
+    }
+  ]
+}