@nyaruka/temba-components 0.129.8 → 0.129.10

package/static/api/users.json

@@ -3,24 +3,43 @@
   "previous": null,
   "results": [
     {
-      "uuid": "user-1",
-      "email": "admin@example.com",
-      "first_name": "Admin",
-      "last_name": "User",
-      "username": "admin",
-      "is_active": true,
-      "is_staff": true,
-      "date_joined": "2024-01-01T00:00:00Z"
+      "uuid": "c0f5b431-35e9-429c-9d57-5fee2fac46a3",
+      "email": "eric+marion+berry@textit.com",
+      "first_name": "Marion",
+      "last_name": "Berry",
+      "name": "Marion Berry",
+      "role": "agent",
+      "team": {
+        "uuid": "15236c1e-9375-4f84-bb48-ec64283d1eb9",
+        "name": "All Topics"
+      },
+      "created_on": "2023-04-05T21:11:31.909765Z",
+      "avatar": null
     },
     {
-      "uuid": "user-2",
-      "email": "editor@example.com",
-      "first_name": "Editor",
-      "last_name": "User",
-      "username": "editor",
-      "is_active": true,
-      "is_staff": false,
-      "date_joined": "2024-01-01T00:00:00Z"
+      "uuid": "ae79dd5b-8c34-4602-a2c1-1e4db2419f0f",
+      "email": "eric@textit.com",
+      "first_name": "Eric",
+      "last_name": "Newcomer",
+      "name": "Eric Newcomer",
+      "role": "administrator",
+      "team": null,
+      "created_on": "2013-02-26T21:19:44Z",
+      "avatar": "https://dl-textit.s3.amazonaws.com/avatars/4/b6d756224c61435bb36b57ae03b83359.jpg"
+    },
+    {
+      "uuid": "f8e2a1b5-9c7d-4e6f-8a3b-1c5e9f2d4a6b",
+      "email": "sarah.smith@textit.com",
+      "first_name": "Sarah",
+      "last_name": "Smith",
+      "name": "Sarah Smith",
+      "role": "agent",
+      "team": {
+        "uuid": "15236c1e-9375-4f84-bb48-ec64283d1eb9",
+        "name": "All Topics"
+      },
+      "created_on": "2023-06-15T14:22:18.456789Z",
+      "avatar": null
     }
   ]
 }

package/static/css/temba-components.css

@@ -61,7 +61,7 @@
     --color-text-light: rgba(255, 255, 255, 1);
     --color-text-dark: rgba(0, 0, 0, 0.8);
     --color-text-dark-secondary: rgba(0, 0, 0, 0.25);
-    --color-text-help: rgba(0, 0, 0, 0.35);
+    --color-text-help: rgb(120, 120, 120);
     --color-tertiary: rgb(var(--tertiary-rgb));
 
     --help-text-size: 0.85em;
@@ -125,8 +125,8 @@
     --header-bg: var(--color-primary-dark);
     --header-text: var(--color-text-light);
 
-    --temba-textinput-padding: 9px;
-    --temba-textinput-font-size: 13px;
+    --temba-textinput-padding: 9px 14px;
+    --temba-textinput-font-size: 14px;
 
     --options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
     --options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

package/stress-test.js

@@ -11,7 +11,7 @@ let maxRuns = 10;
 // Parse arguments
 for (let i = 0; i < args.length; i++) {
   const arg = args[i];
-  
+
   if (arg.startsWith('--runs=')) {
     maxRuns = parseInt(arg.split('=')[1]);
     if (isNaN(maxRuns) || maxRuns <= 0) {
@@ -28,12 +28,16 @@ for (let i = 0; i < args.length; i++) {
 // Validate test file
 if (!testFile) {
   console.error('❌ Usage: yarn stress-test <test-file> [--runs=N]');
-  console.error('   Example: yarn stress-test test/temba-webchat.test.ts --runs=100');
+  console.error(
+    '   Example: yarn stress-test test/temba-webchat.test.ts --runs=100'
+  );
   process.exit(1);
 }
 
 if (!testFile.startsWith('test/') || !testFile.endsWith('.test.ts')) {
-  console.error('❌ Test file must be in the test/ directory and end with .test.ts');
+  console.error(
+    '❌ Test file must be in the test/ directory and end with .test.ts'
+  );
   process.exit(1);
 }
 
@@ -51,21 +55,21 @@ const startTime = performance.now();
 try {
   while (run <= maxRuns) {
     const runStartTime = performance.now();
-    
+
     process.stdout.write(`Run ${run.toString().padStart(3)}/${maxRuns}: `);
-    
+
     try {
       // Run the test with minimal output
-      const result = execSync(`yarn test ${testFile}`, { 
+      const result = execSync(`yarn test ${testFile}`, {
         encoding: 'utf-8',
         stdio: ['pipe', 'pipe', 'pipe']
       });
-      
+
       const runEndTime = performance.now();
       const runTime = runEndTime - runStartTime;
       runTimes.push(runTime);
       totalTime += runTime;
-      
+
       // Check if the test actually passed by looking for success indicators
       if (result.includes('all tests passed') || result.includes('0 failed')) {
         console.log(`✅ PASS (${(runTime / 1000).toFixed(2)}s)`);
@@ -75,11 +79,10 @@ try {
         failures++;
         break;
       }
-      
     } catch (error) {
       const runEndTime = performance.now();
       const runTime = runEndTime - runStartTime;
-      
+
       console.log(`❌ FAIL (${(runTime / 1000).toFixed(2)}s)`);
       console.log('');
       console.log('💥 Test failed on run', run);
@@ -94,7 +97,7 @@ try {
       failures++;
       break;
     }
-    
+
     run++;
   }
 } catch (error) {
@@ -112,14 +115,16 @@ console.log('==================');
 console.log(`Test file: ${testFile}`);
 console.log(`Completed runs: ${run - 1}/${maxRuns}`);
 console.log(`Failures: ${failures}`);
-console.log(`Success rate: ${(((run - 1 - failures) / (run - 1)) * 100).toFixed(1)}%`);
+console.log(
+  `Success rate: ${(((run - 1 - failures) / (run - 1)) * 100).toFixed(1)}%`
+);
 console.log('');
 
 if (runTimes.length > 0) {
   const avgTime = runTimes.reduce((a, b) => a + b, 0) / runTimes.length;
   const minTime = Math.min(...runTimes);
   const maxTime = Math.max(...runTimes);
-  
+
   console.log('⏱️  Timing Statistics');
   console.log('=====================');
   console.log(`Total time: ${(totalTestTime / 1000).toFixed(2)}s`);

package/temba-modules.ts

@@ -6,7 +6,7 @@ import { Completion } from './src/form/Completion';
 import { Modax } from './src/layout/Modax';
 import { Dialog } from './src/layout/Dialog';
 import { Button } from './src/display/Button';
-import { FormField } from './src/form/FormField';
+import { FieldElement } from './src/form/FieldElement';
 import { Loading } from './src/display/Loading';
 import { CharCount } from './src/display/CharCount';
 import { Options } from './src/display/Options';
@@ -103,7 +103,8 @@ addCustomElement('temba-field-manager', FieldManager);
 addCustomElement('temba-urn', ContactUrn);
 addCustomElement('temba-content-menu', ContentMenu);
 
-addCustomElement('temba-field', FormField);
+// Note: FieldElement is a base class and not directly instantiated as a custom element
+export { FieldElement };
 addCustomElement('temba-dialog', Dialog);
 addCustomElement('temba-modax', Modax);
 addCustomElement('temba-charcount', CharCount);

package/test/ActionHelper.ts

@@ -8,6 +8,8 @@ import '../temba-modules';
 /**
  * Generic action test framework
  * Tests the complete action lifecycle: render → edit → save → validate
+ *
+ * For node configuration testing, see NodeHelper.ts
  */
 export class ActionTest<T extends Action> {
   constructor(private actionConfig: any, private actionName: string) {}

package/test/NodeHelper.ts

@@ -0,0 +1,184 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit';
+import { Node } from '../src/store/flow-definition';
+import { assertScreenshot, getClip } from './utils.test';
+import { Editor } from '../src/flow/Editor';
+import '../temba-modules';
+
+/**
+ * Generic node test framework
+ * Tests the complete node lifecycle: render → edit → save → validate
+ *
+ * This is the node configuration equivalent of ActionHelper.ts for action configurations.
+ * It provides uniform testing for all types of nodes: simple wait nodes, router-based
+ * split nodes, and complex form-configured nodes.
+ */
+export class NodeTest<T extends Node> {
+  constructor(private nodeConfig: any, private nodeName: string) {}
+
+  /**
+   * Renders a node in the flow editor and returns the flow node
+   */
+  private async renderNode(node: T, nodeUI: any): Promise<HTMLElement> {
+    const mockDefinition = {
+      nodes: [node],
+      _ui: {
+        nodes: {
+          [node.uuid]: {
+            type: nodeUI.type,
+            position: { left: 50, top: 50 },
+            ...nodeUI
+          }
+        }
+      }
+    };
+
+    const editor = (await fixture(html`
+      <temba-flow-editor>
+        <div id="canvas"></div>
+      </temba-flow-editor>
+    `)) as Editor;
+
+    (editor as any).definition = mockDefinition;
+    (editor as any).canvasSize = { width: 400, height: 300 };
+    await editor.updateComplete;
+
+    const flowNode = editor.querySelector('temba-flow-node') as HTMLElement;
+    expect(flowNode).to.exist;
+
+    return flowNode;
+  }
+
+  /**
+   * Opens the node editor for a node and returns the editor element
+   */
+  private async openNodeEditor(node: T, nodeUI: any): Promise<HTMLElement> {
+    const nodeEditor = (await fixture(html`
+      <temba-node-editor
+        .node=${node}
+        .nodeUI=${nodeUI}
+        .isOpen=${true}
+      ></temba-node-editor>
+    `)) as HTMLElement;
+
+    await (nodeEditor as any).updateComplete;
+
+    // Wait for form data initialization if needed
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    await (nodeEditor as any).updateComplete;
+
+    expect(nodeEditor).to.exist;
+
+    return nodeEditor;
+  }
+
+  /**
+   * Takes a screenshot of the dialog container within a node editor
+   */
+  private async assertDialogScreenshot(
+    el: HTMLElement,
+    screenshotName: string
+  ) {
+    const dialog = el.shadowRoot
+      ?.querySelector('temba-dialog')
+      ?.shadowRoot?.querySelector('.dialog-container') as HTMLElement;
+    await assertScreenshot(screenshotName, getClip(dialog));
+  }
+
+  /**
+   * Complete test for a node configuration
+   * 1. Renders the node in a flow node (with screenshot)
+   * 2. Opens the node editor (with screenshot)
+   * 3. Simulates save and validates round-trip conversion
+   */
+  async testNode(node: T, nodeUI: any, testName: string) {
+    it(`${testName}`, async () => {
+      // Step 1: Render node in flow node
+      const flowNode = await this.renderNode(node, nodeUI);
+
+      // For execute_actions nodes, check for .body, for router nodes check for .router or .categories
+      const hasContent =
+        flowNode.querySelector('.body') ||
+        flowNode.querySelector('.router') ||
+        flowNode.querySelector('.categories') ||
+        flowNode.querySelector('.action') ||
+        flowNode.textContent?.trim();
+
+      expect(hasContent).to.exist;
+      await assertScreenshot(
+        `nodes/${this.nodeName}/render/${testName}`,
+        getClip(flowNode)
+      );
+
+      // Step 2: Open node editor
+      const nodeEditor = await this.openNodeEditor(node, nodeUI);
+      await this.assertDialogScreenshot(
+        nodeEditor,
+        `nodes/${this.nodeName}/editor/${testName}`
+      );
+
+      // Step 3: Test round-trip conversion (simulates save workflow)
+      if (this.nodeConfig.toFormData && this.nodeConfig.fromFormData) {
+        const formData = this.nodeConfig.toFormData(node);
+        const convertedNode = this.nodeConfig.fromFormData(formData, node) as T;
+
+        // Validate the round trip worked
+        expect(convertedNode.uuid).to.equal(node.uuid);
+
+        // Validate the converted node has expected structure
+        expect(convertedNode).to.have.property('actions');
+        expect(convertedNode).to.have.property('exits');
+
+        expect(convertedNode).to.deep.equal(node);
+      }
+    });
+  }
+
+  /**
+   * Run basic property tests
+   */
+  testBasicProperties() {
+    it('has correct basic properties', () => {
+      expect(this.nodeConfig.type).to.be.a('string');
+
+      // Name is optional - only some node configs have it
+      if (this.nodeConfig.name) {
+        expect(this.nodeConfig.name).to.be.a('string');
+      }
+
+      // Color is optional
+      if (this.nodeConfig.color) {
+        expect(this.nodeConfig.color).to.be.a('string');
+      }
+
+      // toFormData and fromFormData are optional - only needed for complex data transformations
+      if (this.nodeConfig.toFormData) {
+        expect(this.nodeConfig.toFormData).to.be.a('function');
+      }
+      if (this.nodeConfig.fromFormData) {
+        expect(this.nodeConfig.fromFormData).to.be.a('function');
+      }
+
+      // Form configuration is optional
+      if (this.nodeConfig.form) {
+        expect(this.nodeConfig.form).to.be.an('object');
+      }
+
+      // Layout is optional
+      if (this.nodeConfig.layout) {
+        expect(this.nodeConfig.layout).to.be.an('array');
+      }
+
+      // Router config is optional
+      if (this.nodeConfig.router) {
+        expect(this.nodeConfig.router).to.be.an('object');
+        expect(this.nodeConfig.router.type).to.exist;
+      }
+
+      // Render function is optional
+      if (this.nodeConfig.render) {
+        expect(this.nodeConfig.render).to.be.a('function');
+      }
+    });
+  }
+}

package/test/actions/call_llm.test.ts

@@ -0,0 +1,137 @@
+import { expect } from '@open-wc/testing';
+import { call_llm } from '../../src/flow/actions/call_llm';
+import { CallLLM } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the call_llm action configuration.
+ */
+describe('call_llm action config', () => {
+  const helper = new ActionTest(call_llm, 'call_llm');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(call_llm.name).to.equal('Call AI');
+    });
+
+    it('has form configuration', () => {
+      expect(call_llm.form).to.exist;
+      expect(call_llm.form.llm).to.exist;
+      expect(call_llm.form.instructions).to.exist;
+      expect(call_llm.form.input).to.exist;
+    });
+
+    it('has layout configuration', () => {
+      expect(call_llm.layout).to.exist;
+      expect(call_llm.layout).to.deep.equal(['llm', 'input', 'instructions']);
+    });
+
+    it('has data transformation functions', () => {
+      expect(call_llm.toFormData).to.be.a('function');
+      expect(call_llm.fromFormData).to.be.a('function');
+    });
+  });
+
+  describe('data transformations', () => {
+    it('converts action to form data correctly', () => {
+      const action: CallLLM = {
+        uuid: 'test-llm-1',
+        type: 'call_llm',
+        input: '@input',
+        llm: { uuid: 'gpt-4', name: 'GPT 4.1' },
+        instructions: 'Translate to French',
+        result_name: 'translated_text'
+      };
+
+      const formData = call_llm.toFormData(action);
+
+      expect(formData.uuid).to.equal('test-llm-1');
+      expect(formData.llm).to.deep.equal([{ value: 'gpt-4', name: 'GPT 4.1' }]);
+      expect(formData.instructions).to.equal('Translate to French');
+      expect(formData.input).to.equal('@input');
+    });
+
+    it('converts form data to action correctly', () => {
+      const formData = {
+        uuid: 'test-llm-2',
+        llm: [{ value: 'gpt-5', name: 'GPT 5' }],
+        instructions: 'Summarize the following text',
+        input: '@input'
+      };
+
+      const action = call_llm.fromFormData(formData) as CallLLM;
+
+      expect(action.uuid).to.equal('test-llm-2');
+      expect(action.type).to.equal('call_llm');
+      expect(action.llm).to.deep.equal({ uuid: 'gpt-5', name: 'GPT 5' });
+      expect(action.instructions).to.equal('Summarize the following text');
+      expect(action.input).to.equal('@input');
+    });
+
+    it('handles empty form data', () => {
+      const formData = {
+        uuid: 'test-llm-3',
+        llm: [],
+        instructions: '',
+        input: ''
+      };
+
+      const action = call_llm.fromFormData(formData) as CallLLM;
+
+      expect(action.llm).to.deep.equal({ uuid: '', name: '' });
+      expect(action.instructions).to.equal('');
+      expect(action.input).to.equal('@input');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'call_llm',
+        llm: { uuid: 'gpt-4', name: 'GPT 4.1' },
+        instructions: 'Translate to French',
+        input: '@input'
+      } as CallLLM,
+      'translation-task'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'call_llm',
+        llm: { uuid: 'gpt-5', name: 'GPT 5' },
+        instructions:
+          'Analyze the sentiment of the following message and classify it as positive, negative, or neutral. Provide a brief explanation for your classification.',
+        input: '@input'
+      } as CallLLM,
+      'sentiment-analysis'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-3',
+        type: 'call_llm',
+        llm: { uuid: 'gpt-4', name: 'GPT 4.1' },
+        instructions:
+          'Summarize the key points from the conversation above in bullet format.',
+        input: '@input'
+      } as CallLLM,
+      'summarization'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-4',
+        type: 'call_llm',
+        llm: { uuid: 'gpt-5', name: 'GPT 5' },
+        instructions:
+          'Extract any contact information (phone numbers, email addresses) from the text and format them as a JSON object.',
+        input: '@input'
+      } as CallLLM,
+      'information-extraction'
+    );
+  });
+});

package/test/nodes/README.md

@@ -0,0 +1,78 @@
+# Node Configuration Tests
+
+This directory contains tests for node configurations using the `NodeHelper` testing framework.
+
+## Overview
+
+Similar to how the `ActionHelper` provides a uniform testing strategy for action configurations, the `NodeHelper` class provides a structured approach to testing node configurations. It handles:
+
+1. **Rendering Tests**: Verifies nodes render correctly in the flow editor
+2. **Editor Tests**: Verifies the node editor opens and displays correctly
+3. **Round-trip Conversion**: Tests form data conversion for nodes with `toFormData`/`fromFormData`
+4. **Screenshot Testing**: Captures visual screenshots for regression testing
+
+## Test Structure
+
+Each node test file follows this pattern:
+
+```typescript
+import { expect } from '@open-wc/testing';
+import { node_config } from '../../src/flow/nodes/node_config';
+import { Node } from '../../src/store/flow-definition';
+import { NodeTest } from '../NodeHelper';
+
+describe('node_config node config', () => {
+  const helper = new NodeTest(node_config, 'node_config');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    // Additional property tests...
+  });
+
+  describe('node scenarios', () => {
+    helper.testNode(nodeData, nodeUI, 'test-name');
+
+    // More scenarios...
+  });
+
+  // Optional: data transformation tests for nodes with form configuration
+  describe('data transformation', () => {
+    // Round-trip conversion tests...
+  });
+});
+```
+
+## Node Types Covered
+
+### Simple Nodes
+
+- `wait_for_digits`: Basic node with no form configuration
+- `wait_for_audio`, `wait_for_image`, etc.: Similar wait nodes
+
+### Form-Configured Nodes
+
+- `wait_for_response`: Node with form fields and data transformation
+- `split_by_llm_categorize`: Complex node with form configuration
+
+### Router-Based Nodes
+
+- `split_by_random`: Random distribution node
+- Other split nodes with router configurations
+
+## Screenshots
+
+Screenshots are automatically generated and stored in:
+
+- `screenshots/nodes/{node_name}/render/{test_name}.png` - Flow editor rendering
+- `screenshots/nodes/{node_name}/editor/{test_name}.png` - Node editor dialog
+
+## Running Tests
+
+```bash
+# Run all node tests
+yarn test test/nodes/*.test.ts --no-watch
+
+# Run specific node test
+yarn test test/nodes/wait_for_response.test.ts --no-watch
+```