@nyaruka/temba-components 0.129.8 → 0.129.9

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-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/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"
+    }
+  ]
+}

package/web-dev-mock.mjs

@@ -1,6 +1,7 @@
 import { Client as MinioClient } from 'minio';
 import busboy from 'busboy';
 import { v4 as uuidv4 } from 'uuid';
+import fs from 'fs';
 
 /**
  * Generates FlowInfo dynamically from a FlowDefinition
@@ -271,10 +272,11 @@ function extractDependenciesFromAction(action, dependencyMap, resultMap, nodeUui
           }
         } else {
           // Create new result
+          const categories = action.category ? [action.category] : ['All Responses'];
           resultMap.set(action.name, {
-            key: action.name.toLowerCase(),
+            key: action.name.toLowerCase().replace(/[^a-z0-9_]/g, '_'),
             name: action.name,
-            categories: action.category ? [action.category] : [],
+            categories: categories,
             node_uuids: [nodeUuid]
           });
         }
@@ -288,14 +290,20 @@ function extractDependenciesFromRouter(router, dependencyMap, resultMap, nodeUui
   if (router.result_name && router.categories) {
     const existingResult = resultMap.get(router.result_name);
     if (existingResult) {
-      // Add this node to existing result
-      existingResult.node_uuids.push(nodeUuid);
+      // Add this node to existing result if not already present
+      if (!existingResult.node_uuids.includes(nodeUuid)) {
+        existingResult.node_uuids.push(nodeUuid);
+      }
     } else {
       // Create new result
+      const categories = router.categories.length > 0 
+        ? router.categories.map((cat) => cat.name)
+        : ['All Responses'];
+      
       const result = {
-        key: router.result_name,
+        key: router.result_name.toLowerCase().replace(/[^a-z0-9_]/g, '_'),
         name: router.result_name,
-        categories: router.categories.map((cat) => cat.name),
+        categories: categories,
         node_uuids: [nodeUuid]
       };
       resultMap.set(router.result_name, result);
@@ -431,3 +439,85 @@ export function handleMinioUpload(context) {
     }
   });
 }
+
+// Handle label creation for the labels API
+export function handleLabelCreation(context) {
+  return new Promise((resolve) => {
+    let body = '';
+    
+    context.req.on('data', chunk => {
+      body += chunk.toString();
+    });
+    
+    context.req.on('end', () => {
+      try {
+        const requestData = JSON.parse(body);
+        const labelName = requestData.name || '';
+        
+        if (!labelName.trim()) {
+          context.status = 400;
+          context.body = JSON.stringify({ error: 'Label name is required' });
+          resolve();
+          return;
+        }
+        
+        // Read existing labels file
+        const labelsPath = './static/api/labels.json';
+        let labelsData;
+        
+        try {
+          labelsData = JSON.parse(fs.readFileSync(labelsPath, 'utf-8'));
+        } catch (error) {
+          // If file doesn't exist, create basic structure
+          labelsData = {
+            next: null,
+            previous: null,
+            results: []
+          };
+        }
+        
+        // Check if label already exists
+        const existingLabel = labelsData.results.find(
+          label => label.name.toLowerCase() === labelName.trim().toLowerCase()
+        );
+        
+        if (existingLabel) {
+          // Return existing label
+          context.contentType = 'application/json';
+          context.body = JSON.stringify(existingLabel);
+          resolve();
+          return;
+        }
+        
+        // Create new label with UUID
+        const newLabel = {
+          uuid: uuidv4(),
+          name: labelName.trim(),
+          count: 0
+        };
+        
+        // Add to labels data
+        labelsData.results.push(newLabel);
+        
+        // Write back to file
+        fs.writeFileSync(labelsPath, JSON.stringify(labelsData, null, 2));
+        
+        // Return the new label
+        context.contentType = 'application/json';
+        context.body = JSON.stringify(newLabel);
+        
+        console.log('📝 Label created:', newLabel);
+        
+      } catch (error) {
+        console.error('Label creation error:', error);
+        context.status = 500;
+        context.body = JSON.stringify({ 
+          error: 'Label creation failed',
+          details: error.message 
+        });
+      }
+      
+      resolve();
+    });
+  });
+}