@nyaruka/temba-components 0.129.9 → 0.129.11

package/test/nodes/split_by_llm.test.ts

@@ -0,0 +1,232 @@
+import { expect } from '@open-wc/testing';
+import { split_by_llm } from '../../src/flow/nodes/split_by_llm';
+import { Node, CallLLM } from '../../src/store/flow-definition';
+import { NodeTest } from '../NodeHelper';
+
+/**
+ * Test suite for the split_by_llm node configuration.
+ */
+describe('split_by_llm node config', () => {
+  const helper = new NodeTest(split_by_llm, 'split_by_llm');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(split_by_llm.name).to.equal('Call AI');
+    });
+
+    it('has form configuration', () => {
+      expect(split_by_llm.form).to.exist;
+      expect(split_by_llm.form.llm).to.exist;
+      expect(split_by_llm.form.instructions).to.exist;
+      expect(split_by_llm.form.input).to.exist;
+    });
+
+    it('has layout configuration', () => {
+      expect(split_by_llm.layout).to.exist;
+      expect(split_by_llm.layout).to.deep.equal([
+        'llm',
+        'input',
+        'instructions'
+      ]);
+    });
+  });
+
+  describe('toFormData', () => {
+    it('extracts data from node with call_llm action', () => {
+      const node: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            uuid: 'test-action',
+            type: 'call_llm',
+            llm: { uuid: 'gpt-4', name: 'GPT 4.1' },
+            instructions: 'Translate to French',
+            input: '@input',
+            output_local: '_llm_output'
+          } as CallLLM
+        ],
+        exits: []
+      };
+
+      const formData = split_by_llm.toFormData(node);
+
+      expect(formData.uuid).to.equal('test-node');
+      expect(formData.llm).to.deep.equal([{ value: 'gpt-4', name: 'GPT 4.1' }]);
+      expect(formData.input).to.equal('@input');
+      expect(formData.instructions).to.equal('Translate to French');
+    });
+
+    it('handles empty node', () => {
+      const node: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const formData = split_by_llm.toFormData(node);
+
+      expect(formData.uuid).to.equal('test-node');
+      expect(formData.llm).to.deep.equal([]);
+      expect(formData.input).to.equal('@input');
+      expect(formData.instructions).to.equal('');
+    });
+  });
+
+  describe('fromFormData', () => {
+    it('creates node with call_llm action and router', () => {
+      const formData = {
+        uuid: 'test-node',
+        llm: [{ value: 'gpt-4', name: 'GPT 4.1' }],
+        input: '@input',
+        instructions: 'Translate to French'
+      };
+
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const node = split_by_llm.fromFormData(formData, originalNode);
+
+      expect(node.uuid).to.equal('test-node');
+      expect(node.actions).to.have.length(1);
+      expect(node.actions[0].type).to.equal('call_llm');
+      expect((node.actions[0] as CallLLM).llm).to.deep.equal({
+        uuid: 'gpt-4',
+        name: 'GPT 4.1'
+      });
+      expect((node.actions[0] as CallLLM).instructions).to.equal(
+        'Translate to French'
+      );
+      expect((node.actions[0] as CallLLM).input).to.equal('@input');
+      expect((node.actions[0] as CallLLM).output_local).to.equal('_llm_output');
+
+      expect(node.router).to.exist;
+      expect(node.router.type).to.equal('switch');
+      expect(node.router.operand).to.equal('@locals._llm_output');
+      expect(node.router.categories).to.have.length(2);
+      expect(node.router.categories[0].name).to.equal('Success');
+      expect(node.router.categories[1].name).to.equal('Failure');
+
+      expect(node.exits).to.have.length(2);
+    });
+
+    it('handles empty form data', () => {
+      const formData = {
+        uuid: 'test-node',
+        llm: [],
+        input: '',
+        instructions: ''
+      };
+
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const node = split_by_llm.fromFormData(formData, originalNode);
+
+      const action = node.actions[0] as CallLLM;
+      expect(action.llm).to.deep.equal({ uuid: '', name: '' });
+      expect(action.instructions).to.equal('');
+      expect(action.input).to.equal('@input');
+    });
+  });
+
+  describe('node scenarios', () => {
+    const createTestNode = (
+      llm: any,
+      instructions: string,
+      input: string = '@input'
+    ): Node => ({
+      uuid: 'test-node',
+      actions: [
+        {
+          uuid: 'test-action',
+          type: 'call_llm',
+          llm,
+          instructions,
+          input,
+          output_local: '_llm_output'
+        } as CallLLM
+      ],
+      router: {
+        type: 'switch',
+        operand: '@locals._llm_output',
+        categories: [
+          {
+            uuid: 'success-category',
+            name: 'Success',
+            exit_uuid: 'success-exit'
+          },
+          {
+            uuid: 'failure-category',
+            name: 'Failure',
+            exit_uuid: 'failure-exit'
+          }
+        ],
+        default_category_uuid: 'failure-category',
+        cases: [
+          {
+            uuid: 'success-case',
+            type: 'has_text',
+            arguments: [],
+            category_uuid: 'success-category'
+          }
+        ]
+      },
+      exits: [
+        {
+          uuid: 'success-exit',
+          destination_uuid: null
+        },
+        {
+          uuid: 'failure-exit',
+          destination_uuid: null
+        }
+      ]
+    });
+
+    const nodeUI = {
+      type: 'split_by_llm',
+      position: { left: 50, top: 50 }
+    };
+
+    helper.testNode(
+      createTestNode({ uuid: 'gpt-4', name: 'GPT 4.1' }, 'Translate to French'),
+      nodeUI,
+      'translation-task'
+    );
+
+    helper.testNode(
+      createTestNode(
+        { uuid: 'gpt-5', name: 'GPT 5' },
+        'Analyze the sentiment of the following message and classify it as positive, negative, or neutral. Provide a brief explanation for your classification.'
+      ),
+      nodeUI,
+      'sentiment-analysis'
+    );
+
+    helper.testNode(
+      createTestNode(
+        { uuid: 'gpt-4', name: 'GPT 4.1' },
+        'Summarize the key points from the conversation above in bullet format.'
+      ),
+      nodeUI,
+      'summarization'
+    );
+
+    helper.testNode(
+      createTestNode(
+        { uuid: 'gpt-5', name: 'GPT 5' },
+        'Extract any contact information (phone numbers, email addresses) from the text and format them as a JSON object.'
+      ),
+      nodeUI,
+      'information-extraction'
+    );
+  });
+});

package/test/temba-checkbox.test.ts

@@ -165,4 +165,30 @@ describe('temba-checkbox', () => {
     data = new FormData(form);
     expect(data.get('my-cb')).to.equal('5');
   });
+
+  it('aligns help text with label when both are present', async () => {
+    const el: Checkbox = await fixture(html`
+      <temba-checkbox
+        label="Checkbox with help"
+        help_text="This help text should align with the label text"
+      >
+      </temba-checkbox>
+    `);
+
+    expect(el.label).to.equal('Checkbox with help');
+    expect(el.helpText).to.equal(
+      'This help text should align with the label text'
+    );
+
+    // Verify help text element exists and has proper alignment styles
+    const helpTextEl = el.shadowRoot.querySelector(
+      '.checkbox-help-text'
+    ) as HTMLElement;
+    expect(helpTextEl).to.not.be.null;
+    expect(helpTextEl.textContent.trim()).to.equal(
+      'This help text should align with the label text'
+    );
+
+    await assertScreenshot('checkbox/checkbox-with-help-text', getClip(el));
+  });
 });

package/test/temba-integration-markdown.test.ts

@@ -16,10 +16,8 @@ describe('FormElement markdown integration', () => {
 
     await checkbox.updateComplete;
 
-    // Check that errors are rendered with markdown
-    const errorElements = checkbox.shadowRoot
-      .querySelectorAll('temba-field')[0]
-      .shadowRoot.querySelectorAll('.alert-error');
+    // Check that errors are rendered with markdown directly in checkbox shadow root
+    const errorElements = checkbox.shadowRoot.querySelectorAll('.alert-error');
     expect(errorElements.length).to.equal(2);
 
     // First error should have bold text and link

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-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/style.css

@@ -1,236 +1,3 @@
-#mocha {
-  display: none;
-}
-
-temba-dialog,
-temba-modax,
-temba-contact-history,
-temba-menu,
-temba-select {
-  --transition-speed: 0ms !important;
-}
-
-body {
-  padding: 20px;
-}
-
-html input {
-
-  caret-color: transparent;
-}
-
-temba-input,
-temba-modax,
-temba-dialog {
-  caret-color: transparent;
-}
-
-/* Disable CSS animations for deterministic screenshots */
-*,
-*::before,
-*::after {
-  animation-duration: 0s !important;
-  animation-delay: 0s !important;
-  transition-duration: 0s !important;
-  transition-delay: 0s !important;
-  animation-iteration-count: 1 !important;
-}
-
-/* Override CSS custom properties for animation control in tests */
-:root {
-  --test-animation-duration: 0s !important;
-  --test-animation-play-state: paused !important;
-}
-
-/* Force disable spin animations by overriding keyframes - this pierces shadow DOM */
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(0deg); }
-}
-
-html {
-  --transition-speed: 0ms !important;
-  --input-caret: transparent !important;
-  --font-family: 'Roboto';
-  --primary-rgb: 35, 135, 202;
-  --secondary-rgb: 140, 51, 140;
-  --tertiary-rgb: 135, 202, 35;
-
-  --focus-rgb: 82, 168, 236;
-  --error-rgb: 255, 99, 71;
-  --success-rgb: 102, 186, 104;
-
-  --color-label: #333;
-
-  --selection-light-rgb: 240, 240, 240;
-  --selection-dark-rgb: 180, 180, 180;
-
-  --select-input-height: inherit;
-
-  --curvature: 6px;
-  --curvature-widget: 6px;
-  --color-focus: #a4cafe;
-  --color-widget-bg: #fff;
-  --color-widget-bg-focused: #fff;
-  --color-widget-border: rgb(225, 225, 225);
-
-  /* primary colors, should be dark */
-  --color-selection: #f0f6ff;
-
-  --widget-box-shadow-focused: 0 0 0 3px rgba(164, 202, 254, .45);
-  --widget-box-shadow-focused-error: 0 0 0 3px rgba(var(--error-rgb), 0.3);
-
-  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-
-  /* page text, borders, widgets */
-  --color-text: #555;
-  --color-widget-text: #555;
-  --color-borders: rgba(0, 0, 0, 0.07);
-  --color-placeholder: #ccc;
-
-  /* light colors, panel backgrounds, selection, etc */
-  --color-primary-light: #eee;
-  --color-secondary-light: #ccc;
-
-  /* dark colors, nav bar, buttons, etc */
-  --color-primary-dark: rgb(var(--primary-rgb));
-  --color-secondary-dark: rgb(var(--secondary-rgb));
-
-  /* light text goes over dark, dark over lights */
-  --color-text-light: rgba(255, 255, 255, 1);
-  --color-text-dark: rgba(0, 0, 0, 0.5);
-  --color-text-dark-secondary: rgba(0, 0, 0, 0.25);
-  --color-text-help: rgba(0, 0, 0, 0.35);
-
-  --color-tertiary: rgb(var(--tertiary-rgb));
-
-  /* solid overlays with text */
-  --color-overlay-dark: rgba(0, 0, 0, 0.2);
-  --color-overlay-dark-text: rgba(255, 255, 255, 0.9);
-  --color-overlay-light: rgba(0, 0, 0, 0.05);
-  --color-overlay-light-text: rgba(0, 0, 0, 0.6);
-
-  /* links, buttons, and label badges */
-  --color-link-primary: rgba(var(--primary-rgb), 0.8);
-  --color-link-primary-hover: rgba(var(--primary-rgb), 0.9);
-  --color-link-secondary: rgba(var(--secondary-rgb), 0.8);
-  --color-link-secondary-hover: rgba(var(--secondary-rgb), 0.9);
-  --color-button-primary: var(--color-primary-dark);
-  --color-button-primary-text: var(--color-text-light);
-  --color-button-light: rgb(246, 248, 250);
-  --color-button-light-text: rgb(36, 41, 47);
-  --color-button-secondary: var(--color-secondary-light);
-  --color-button-secondary-text: var(--color-text-dark);
-
-  --color-button-destructive: rgb(var(--error-rgb));
-  --color-button-destructive-text: var(--color-text-light);
-
-  --color-button-attention: #2ecc71;
-
-  --color-label-primary: var(--color-primary-dark);
-  --color-label-primary-text: var(--color-text-light);
-  --color-label-secondary: rgba(0, 0, 0, 0.2);
-  --color-label-secondary-text: rgba(255, 255, 255, 0.9);
-
-  --color-nav-unselected: #fff;
-  --color-nav-selected-bg: #fff;
-  --color-nav-selected-text: var(--color-primary-dark);
-  --color-info: rgb(238, 246, 255);
-  --color-info-border: rgb(74, 163, 223);
-
-  --color-warning: rgb(255, 253, 218);
-  --color-warning-border: rgb(251, 246, 176);
-  --color-error: rgb(var(--error-rgb));
-  --font-size: 14px;
-  --button-font-size: 1.125rem;
-
-  --header-bg: var(--color-primary-dark);
-  --header-text: var(--color-text-light);
-
-  --temba-textinput-padding: 9px;
-  --temba-textinput-font-size: 13px;
-
-  --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);
-
-  font-size: var(--font-size);
-  font-weight: 400;
-  font-family: var(--font-family);
-  --dropdown-shadow: rgb(0 0 0 / 30%) 0px 0px 60px, rgb(0 0 0 / 12%) 0px 6px 12px;
-
-  --icon-color: var(--text-color);
-  --icon-color-hover: var(--icon-color);
-  --event-padding: 0.5em 1em;
-  --temba-select-selected-padding: 9px;
-  --temba-select-selected-line-height: 16px;
-  --temba-select-selected-font-size: 13px;
-
-  --help-text-margin-top: 0px;
-  --help-text-margin-left: 0.3em;
-  --help-text-size: 0.85em;
-  --color-text-help: rgb(120, 120, 120);
-  --label-size: 14px;
-
-  --button-y: 6px;
-  --button-x: 14px;
-
-  --menu-padding: 1em;
-  --color-automated: rgb(78, 205, 106);
-}
-
-temba-button {
-  --button-bg: var(--color-primary-dark);
-  --button-text: var(--color-text-light);
-  --button-border: none;
-  --button-shadow: var(--widget-box-shadow);
-}
-
-temba-button:hover {
-  --button-bg-img: linear-gradient(to bottom, rgba(var(--primary-rgb), .1), transparent, transparent);
-}
-
-temba-button.active {
-  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .05));
-}
-
-temba-button.light {
-  --button-bg: #fff;
-  --button-text: #999;
-  --button-border: none;
-  --button-shadow: var(--widget-box-shadow);
-
-}
-
-temba-button.light:hover {
-  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .001));
-}
-
-temba-button.light.active {
-  --button-bg-img: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .02));
-}
-
-temba-contact-history {
-  min-height: 0;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-}
-
-temba-select:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-temba-datepicker {
-  margin: 1em;
-}
-
-.flatpickr-calendar {
-  margin-top: 28px;
-  margin-bottom: 28px;
-  margin-left: -13px;
-}
-
 @font-face {
   font-family: 'Roboto Mono';
   font-style: normal;
@@ -288,4 +55,39 @@ temba-datepicker {
     /* Chrome 26+, Opera 23+, Firefox 39+ */
     url('./fonts/roboto-v20-latin-500.woff') format('woff');
   /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
+}
+
+/* Force disable spin animations by overriding keyframes - this pierces shadow DOM */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(0deg); }
+}
+
+#mocha {
+  display: none;
+}
+
+/* Disable transitions and carets for deterministic screenshots */
+*,
+*::before,
+*::after {
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+  animation-iteration-count: 1 !important;
+  --transition-speed: 0ms !important;
+  --test-animation-duration: 0s !important;
+  --test-animation-play-state: paused !important;
+  caret-color: transparent;
+}
+
+/** 
+  Without this body styling our screenshots don't have the proper dpi, 
+  perhaps triggers a different rendering path for puppeteer? The styling
+  appears like it could be anything.
+  Unsure. 
+**/
+body {
+  padding: 20px;
+}

package/web-dev-server.config.mjs

@@ -56,6 +56,32 @@ export default {
             context.body = fs.readFileSync(path.resolve(staticFile), 'utf-8');
             return;
           }
+
+          // Handle dynamic flows endpoint
+          if (basePath === '/api/v2/flows.json') {
+            const flowsDir = path.resolve('./demo/data/flows');
+            
+            if (fs.existsSync(flowsDir)) {
+              const files = fs.readdirSync(flowsDir).filter(file => file.endsWith('.json'));
+              const flows = files.map(file => {
+                try {
+                  const filePath = path.join(flowsDir, file);
+                  const flowData = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+                  return {
+                    uuid: flowData.definition.uuid,
+                    name: flowData.definition.name
+                  };
+                } catch (e) {
+                  console.warn(`Error reading flow file ${file}:`, e.message);
+                  return null;
+                }
+              }).filter(Boolean);
+
+              context.contentType = 'application/json';
+              context.body = JSON.stringify({ results: flows });
+              return;
+            }
+          }
         }
 
         // Handle minio file uploads for media

package/web-test-runner.config.mjs

@@ -329,7 +329,7 @@ export default {
           return {
             body: context.body.replace(
               /<head>/,
-              `<head><link rel="stylesheet" href="/test-assets/style.css">`
+              `<head><link rel="stylesheet" href="/test-assets/temba-components.css"/><link rel="stylesheet" href="/test-assets/style.css"/>`
             ),
           };
         }