@nyaruka/temba-components 0.129.8 → 0.129.9

package/src/live/ContactChat.ts

@@ -20,6 +20,7 @@ import { ContactStoreElement } from './ContactStoreElement';
 import { Compose, ComposeValue } from '../form/Compose';
 import {
   AirtimeTransferredEvent,
+  CallEvent,
   ChannelEvent,
   ContactEvent,
   ContactGroupsEvent,
@@ -28,7 +29,7 @@ import {
   FlowEvent,
   MsgEvent,
   NameChangedEvent,
-  OptinRequestedEvent,
+  OptInEvent,
   RunEvent,
   TicketEvent,
   UpdateFieldEvent,
@@ -54,6 +55,8 @@ export enum Events {
   MESSAGE_RECEIVED = 'msg_received',
   BROADCAST_CREATED = 'broadcast_created',
   IVR_CREATED = 'ivr_created',
+  CALL_CREATED = 'call_created',
+  CALL_RECEIVED = 'call_received',
   CONTACT_FIELD_CHANGED = 'contact_field_changed',
   CONTACT_GROUPS_CHANGED = 'contact_groups_changed',
   CONTACT_NAME_CHANGED = 'contact_name_changed',
@@ -61,7 +64,6 @@ export enum Events {
   CHANNEL_EVENT = 'channel_event',
   CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',
   AIRTIME_TRANSFERRED = 'airtime_transferred',
-  CALL_STARTED = 'call_started',
   NOTE_CREATED = 'note_created',
   TICKET_ASSIGNED = 'ticket_assigned',
   TICKET_NOTE_ADDED = 'ticket_note_added',
@@ -69,11 +71,14 @@ export enum Events {
   TICKET_OPENED = 'ticket_opened',
   TICKET_REOPENED = 'ticket_reopened',
   TICKET_TOPIC_CHANGED = 'ticket_topic_changed',
+  OPTIN_STARTED = 'optin_started',
+  OPTIN_STOPPED = 'optin_stopped',
   OPTIN_REQUESTED = 'optin_requested',
   RUN_STARTED = 'run_started',
   RUN_ENDED = 'run_ended',
 
   // deprecated
+  CALL_STARTED = 'call_started',
   FLOW_ENTERED = 'flow_entered',
   FLOW_EXITED = 'flow_exited'
 }
@@ -108,13 +113,13 @@ const renderChannelEvent = (event: ChannelEvent): string => {
   } else if (event.event.type === 'stop_contact') {
     return 'Stopped';
   } else if (event.event.type === 'mt_call') {
-    return 'Outgoing Phone Call';
+    return 'Outgoing Phone Call'; // deprecated
   } else if (event.event.type == 'mo_call') {
-    return 'Incoming Phone call';
+    return 'Incoming Phone call'; // deprecated
   } else if (event.event.type == 'optin') {
-    return `Opted in to **${event.event.optin?.name}**`;
+    return `Opted in to **${event.event.optin?.name}**`; // deprecated
   } else if (event.event.type == 'optout') {
-    return `Opted out of **${event.event.optin?.name}**`;
+    return `Opted out of **${event.event.optin?.name}**`; // deprecated
   }
 };
 
@@ -214,18 +219,28 @@ export const renderAirtimeTransferredEvent = (
   return `Transferred **${event.amount}** ${event.currency} of airtime`;
 };
 
-export const renderCallStartedEvent = (): string => {
-  return `Call Started`;
-};
-
 export const renderContactLanguageChangedEvent = (
   event: ContactLanguageChangedEvent
 ): string => {
   return `Language updated to **${event.language}**`;
 };
 
-export const renderOptinRequested = (event: OptinRequestedEvent): string => {
-  return `Requested opt-in for ${event.optin.name}`;
+export const renderCallEvent = (event: CallEvent): string => {
+  if (event.type === Events.CALL_CREATED) {
+    return `Call Started`;
+  } else if (event.type === Events.CALL_RECEIVED) {
+    return `Call Answered`;
+  }
+};
+
+export const renderOptInEvent = (event: OptInEvent): string => {
+  if (event.type === Events.OPTIN_REQUESTED) {
+    return `Requested opt-in for ${event.optin.name}`;
+  } else if (event.type === Events.OPTIN_STARTED) {
+    return `Opted in to **${event.optin.name}**`;
+  } else if (event.type === Events.OPTIN_STOPPED) {
+    return `Opted out of **${event.optin.name}**`;
+  }
 };
 
 export class ContactChat extends ContactStoreElement {
@@ -694,10 +709,17 @@ export class ContactChat extends ContactStoreElement {
           text: renderAirtimeTransferredEvent(event as AirtimeTransferredEvent)
         };
         break;
-      case Events.CALL_STARTED:
+      case Events.CALL_CREATED:
+      case Events.CALL_RECEIVED:
+        message = {
+          type: MessageType.Inline,
+          text: renderCallEvent(event as CallEvent)
+        };
+        break;
+      case Events.CALL_STARTED: // deprecated
         message = {
           type: MessageType.Inline,
-          text: renderCallStartedEvent()
+          text: `Started Call`
         };
         break;
       case Events.CHANNEL_EVENT:
@@ -715,9 +737,11 @@ export class ContactChat extends ContactStoreElement {
         };
         break;
       case Events.OPTIN_REQUESTED:
+      case Events.OPTIN_STARTED:
+      case Events.OPTIN_STOPPED:
         message = {
           type: MessageType.Inline,
-          text: renderOptinRequested(event as OptinRequestedEvent)
+          text: renderOptInEvent(event as OptInEvent)
         };
         break;
     }

package/src/markdown.ts

@@ -11,31 +11,39 @@ import { Remarkable } from 'remarkable';
 
 export const markdown = new Remarkable();
 
-// Class-based directive API
-export class RenderMarkdown extends Directive {
-  // State stored in class field
-  // value: string | undefined;
+// Base class for markdown rendering directives
+abstract class BaseMarkdownDirective extends Directive {
   constructor(partInfo: PartInfo) {
     super(partInfo);
     // When necessary, validate part in constructor using `part.type`
     if (partInfo.type !== PartType.CHILD) {
-      throw new Error('renderMarkdown only supports child expressions');
+      throw new Error('markdown directives only support child expressions');
     }
   }
+
   // Optional: override update to perform any direct DOM manipulation
-  // DirectiveParameters<this>
   update(part: Part, [initialValue]: any) {
     /* Any imperative updates to DOM/parts would go here */
     return this.render(initialValue);
   }
-  // Do SSR-compatible rendering (arguments are passed from call site)
+
+  // Abstract method to be implemented by subclasses
+  abstract render(initialValue: string): any;
+}
+
+// Class-based directive for block markdown rendering
+export class RenderMarkdown extends BaseMarkdownDirective {
   render(initialValue: string) {
-    // Previous state available on class field
-    //  if (this.value === undefined) {
-    // this.value = initialValue;
-    //}
     return html`${unsafeHTML(markdown.render(initialValue))}`;
   }
 }
 
+// Class-based directive for inline markdown rendering
+export class RenderMarkdownInline extends BaseMarkdownDirective {
+  render(initialValue: string) {
+    return html`${unsafeHTML(markdown.renderInline(initialValue))}`;
+  }
+}
+
 export const renderMarkdown = directive(RenderMarkdown);
+export const renderMarkdownInline = directive(RenderMarkdownInline);

package/src/store/flow-definition.d.ts

@@ -44,6 +44,7 @@ export type ActionType =
   | 'split_by_subflow'
   | 'split_by_webhook'
   | 'split_by_llm'
+  | 'split_by_llm_categorize'
   | 'wait_for_response'
   | 'wait_for_menu'
   | 'wait_for_dial'
@@ -173,12 +174,14 @@ export interface CallResthook extends Action {
 export interface CallLLM extends Action {
   llm: NamedObject;
   instructions: string;
+  input: string;
   result_name: string;
 }
 
 export interface OpenTicket extends Action {
-  subject: string;
-  body: string;
+  subject?: string;
+  body?: string;
+  note?: string;
   assignee?: NamedObject;
   topic?: NamedObject;
 }

package/static/api/labels.json

@@ -0,0 +1,31 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "uuid": "61cae99b-56e1-4f3e-a2b9-07fb5cf2be9e",
+      "name": "Important",
+      "count": 234
+    },
+    {
+      "uuid": "f80ed7b6-5e6a-49eb-94b6-4631a9677cd8",
+      "name": "Spam",
+      "count": 0
+    },
+    {
+      "uuid": "76e7a094-22ea-441d-91c4-283d8168e8e3",
+      "name": "Follow Up",
+      "count": 128
+    },
+    {
+      "uuid": "66e7a094-22ea-441d-91c4-283d8168e8e4",
+      "name": "Customer Service",
+      "count": 89
+    },
+    {
+      "uuid": "a3f2990b-4096-452e-a586-dc06a9434dde",
+      "name": "Feedback",
+      "count": 42
+    }
+  ]
+}

package/static/api/topics.json

@@ -3,19 +3,34 @@
   "previous": null,
   "results": [
     {
-      "uuid": "topic-1",
-      "name": "General Support",
-      "created_on": "2024-01-01T00:00:00Z"
+      "uuid": "1b1cb507-e079-4b30-818c-1898edcbd178",
+      "name": "General",
+      "counts": {
+        "open": 2,
+        "closed": 12
+      },
+      "system": true,
+      "created_on": "2021-08-25T22:50:51.381947Z"
     },
     {
-      "uuid": "topic-2",
-      "name": "Technical Issues",
-      "created_on": "2024-01-01T00:00:00Z"
+      "uuid": "bf4b568d-97b8-4d20-aed5-ad8150270af8",
+      "name": "Technical Support",
+      "counts": {
+        "open": 5,
+        "closed": 23
+      },
+      "system": false,
+      "created_on": "2021-08-25T22:51:15.123456Z"
     },
     {
-      "uuid": "topic-3",
-      "name": "Billing Questions",
-      "created_on": "2024-01-01T00:00:00Z"
+      "uuid": "a3f7e9d2-1c8b-4e5f-9a6b-7d4c2e8f1a3b",
+      "name": "Billing",
+      "counts": {
+        "open": 1,
+        "closed": 8
+      },
+      "system": false,
+      "created_on": "2021-08-25T22:52:30.789012Z"
     }
   ]
 }

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/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');
+      }
+    });
+  }
+}