@nyaruka/temba-components 0.130.1 → 0.130.3

package/src/live/ContactChat.ts

@@ -37,7 +37,6 @@ import {
   URNsChangedEvent
 } from '../events';
 import { Chat, ChatEvent, MessageType } from '../display/Chat';
-import { getUserDisplay } from '../webchat';
 import { DEFAULT_AVATAR } from '../webchat/assets';
 import { UserSelect } from '../form/select/UserSelect';
 import { Select } from '../form/select/Select';
@@ -73,7 +72,7 @@ export enum Events {
   OPTIN_STOPPED = 'optin_stopped',
   RUN_ENDED = 'run_ended',
   RUN_STARTED = 'run_started',
-  TICKET_ASSIGNED = 'ticket_assigned',
+  TICKET_ASSIGNEE_CHANGED = 'ticket_assignee_changed',
   TICKET_CLOSED = 'ticket_closed',
   TICKET_NOTE_ADDED = 'ticket_note_added',
   TICKET_OPENED = 'ticket_opened',
@@ -81,32 +80,43 @@ export enum Events {
   TICKET_TOPIC_CHANGED = 'ticket_topic_changed',
 
   // deprecated
-  CHANNEL_EVENT = 'channel_event'
+  CHANNEL_EVENT = 'channel_event',
+  TICKET_ASSIGNED = 'ticket_assigned'
 }
 
-const renderInfoList = (singular: string, plural: string, items: any[]) => {
+const renderInfoList = (
+  singular: string,
+  plural: string,
+  items: any[]
+): TemplateResult => {
   if (items.length === 1) {
-    return `${singular} **${items[0].name}**`;
+    return html`<div>${singular} <strong>${items[0].name}</strong></div>`;
   } else {
-    const list = items.map((item) => `**${item.name}**`);
+    const list = items.map((item) => item.name);
     if (list.length === 2) {
-      return `${plural} ${list.join(' and ')}`;
+      return html`<div>
+        ${plural} <strong>${list[0]}</strong> and <strong>${list[1]}</strong>
+      </div>`;
     } else {
       const last = list.pop();
-      return `${plural} ${list.join(', ')}, and ${last}`;
+      const middle = list.map(
+        (name, index) =>
+          html`<strong>${name}</strong>${index < list.length - 1 ? ', ' : ''}`
+      );
+      return html`<div>${plural} ${middle}, and <strong>${last}</strong></div>`;
     }
   }
 };
 
-const renderChannelEvent = (event: ChannelEvent): string => {
+const renderChannelEvent = (event: ChannelEvent): TemplateResult => {
   if (event.channel_event_type === 'welcome_message') {
-    return 'Welcome message sent';
+    return html`<div>Welcome message sent</div>`;
   } else if (event.event.type === 'stop_contact') {
-    return 'Stopped';
+    return html`<div>Stopped</div>`;
   }
 };
 
-const renderRunEvent = (event: RunEvent): string => {
+const renderRunEvent = (event: RunEvent): TemplateResult => {
   let verb = 'Started';
   if (event.type === Events.RUN_ENDED) {
     if (event.status === 'completed') {
@@ -118,57 +128,98 @@ const renderRunEvent = (event: RunEvent): string => {
     }
   }
 
-  return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
+  return html`<div>
+    ${verb}
+    <a href="/flow/editor/${event.flow.uuid}/"
+      ><strong>${event.flow.name}</strong></a
+    >
+  </div>`;
 };
 
-const renderChatStartedEvent = (event: ChatStartedEvent): string => {
+const renderChatStartedEvent = (event: ChatStartedEvent): TemplateResult => {
   if (event.params) {
-    return `Chat referral`;
+    return html`<div>Chat referral</div>`;
   } else {
-    return `Chat started`;
+    return html`<div>Chat started</div>`;
   }
 };
 
-const renderUpdateEvent = (event: UpdateFieldEvent): string => {
+const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {
   return event.value
-    ? `Updated **${event.field.name}** to **${event.value.text}**`
-    : `Cleared **${event.field.name}**`;
+    ? html`<div>
+        Updated <strong>${event.field.name}</strong> to
+        <strong>${event.value.text}</strong>
+      </div>`
+    : html`<div>Cleared <strong>${event.field.name}</strong></div>`;
 };
 
-const renderNameChanged = (event: NameChangedEvent): string => {
-  return `Updated **Contact Name** to **${event.name}**`;
+const renderNameChanged = (event: NameChangedEvent): TemplateResult => {
+  return html`<div>
+    Updated <strong>name</strong> to <strong>${event.name}</strong>
+  </div>`;
 };
 
-const renderContactURNsChanged = (event: URNsChangedEvent): string => {
-  return `Updated **URNs** to ${oxfordFn(
-    event.urns,
-    (urn: string) => `**${urn.split(':')[1].split('?')[0]}**`
-  )}`;
+const renderContactURNsChanged = (event: URNsChangedEvent): TemplateResult => {
+  return html`<div>
+    Updated <strong>URNs</strong> to
+    ${oxfordFn(
+      event.urns,
+      (urn: string) => html`<strong>${urn.split(':')[1].split('?')[0]}</strong>`
+    )}
+  </div>`;
 };
 
 export const renderTicketAction = (
   event: TicketEvent,
   action: string
-): string => {
-  if (event.created_by) {
-    return `**${getUserDisplay(
-      event.created_by
-    )}** ${action} a **[ticket](/ticket/all/closed/${event.ticket.uuid}/)**`;
+): TemplateResult => {
+  const ticketUUID = event.ticket?.uuid || event.ticket_uuid;
+
+  if (event._user) {
+    return html`<div>
+      <strong>${event._user.name}</strong> ${action} a
+      <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
+    </div>`;
   }
-  return `A **[ticket](/ticket/all/closed/${event.ticket.uuid}/)** was **${action}**`;
+  return html`<div>
+    A
+    <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong> was
+    <strong>${action}</strong>
+  </div>`;
 };
 
-export const renderTicketAssigned = (event: TicketEvent): string => {
-  return event.assignee
-    ? event.assignee.id === event.created_by.id
-      ? `**${getDisplayName(event.created_by)}** took this ticket`
-      : `${getDisplayName(
-          event.created_by
-        )} assigned this ticket to **${getDisplayName(event.assignee)}**`
-    : `**${getDisplayName(event.created_by)}** unassigned this ticket`;
+export const renderTicketAssigneeChanged = (
+  event: TicketEvent
+): TemplateResult => {
+  if (event._user) {
+    if (event.assignee) {
+      return html`<div>
+        <strong>${event._user.name}</strong> assigned this ticket to
+        <strong>${event.assignee.name}</strong>
+      </div>`;
+    } else {
+      return html`<div>
+        <strong>${event._user.name}</strong> unassigned this ticket
+      </div>`;
+    }
+  } else {
+    if (event.assignee) {
+      return html`<div>
+        This ticket was assigned to <strong>${event.assignee.name}</strong>
+      </div>`;
+    } else {
+      return html`<div>This ticket was unassigned</div>`;
+    }
+  }
 };
 
-export const renderContactGroupsEvent = (event: ContactGroupsEvent): string => {
+export const renderTicketOpened = (event: TicketEvent): TemplateResult => {
+  return html`<div>${event.ticket.topic.name} ticket was opened</div>`;
+};
+
+export const renderContactGroupsEvent = (
+  event: ContactGroupsEvent
+): TemplateResult => {
   const groupsEvent = event as ContactGroupsEvent;
   if (groupsEvent.groups_added) {
     return renderInfoList(
@@ -185,48 +236,50 @@ export const renderContactGroupsEvent = (event: ContactGroupsEvent): string => {
   }
 };
 
-export const renderTicketOpened = (event: TicketEvent): string => {
-  return `${event.ticket.topic.name} ticket was opened`;
-};
-
 export const renderAirtimeTransferredEvent = (
   event: AirtimeTransferredEvent
-): string => {
+): TemplateResult => {
   if (parseFloat(event.amount) === 0) {
-    return `Airtime transfer failed`;
+    return html`<div>Airtime transfer failed</div>`;
   }
-  return `Transferred **${event.amount}** ${event.currency} of airtime`;
+  return html`<div>
+    Transferred <strong>${event.amount}</strong> ${event.currency} of airtime
+  </div>`;
 };
 
 export const renderContactLanguageChangedEvent = (
   event: ContactLanguageChangedEvent
-): string => {
-  return `Language updated to **${event.language}**`;
+): TemplateResult => {
+  return html`<div>
+    Language updated to <strong>${event.language}</strong>
+  </div>`;
 };
 
 export const renderContactStatusChangedEvent = (
   event: ContactStatusChangedEvent
-): string => {
-  return `Status updated to **${event.status}**`;
+): TemplateResult => {
+  return html`<div>Status updated to <strong>${event.status}</strong></div>`;
 };
 
-export const renderCallEvent = (event: CallEvent): string => {
+export const renderCallEvent = (event: CallEvent): TemplateResult => {
   if (event.type === Events.CALL_CREATED) {
-    return `Call started`;
+    return html`<div>Call started</div>`;
   } else if (event.type === Events.CALL_MISSED) {
-    return `Call missed`;
+    return html`<div>Call missed</div>`;
   } else if (event.type === Events.CALL_RECEIVED) {
-    return `Call answered`;
+    return html`<div>Call answered</div>`;
   }
 };
 
-export const renderOptInEvent = (event: OptInEvent): string => {
+export const renderOptInEvent = (event: OptInEvent): TemplateResult => {
   if (event.type === Events.OPTIN_REQUESTED) {
-    return `Requested opt-in for **${event.optin.name}**`;
+    return html`<div>
+      Requested opt-in for <strong>${event.optin.name}</strong>
+    </div>`;
   } else if (event.type === Events.OPTIN_STARTED) {
-    return `Opted in to **${event.optin.name}**`;
+    return html`<div>Opted in to <strong>${event.optin.name}</strong></div>`;
   } else if (event.type === Events.OPTIN_STOPPED) {
-    return `Opted out of **${event.optin.name}**`;
+    return html`<div>Opted out of <strong>${event.optin.name}</strong></div>`;
   }
 };
 
@@ -697,10 +750,10 @@ export class ContactChat extends ContactStoreElement {
           text: renderRunEvent(event as RunEvent)
         };
         break;
-      case Events.TICKET_ASSIGNED:
+      case Events.TICKET_ASSIGNEE_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderTicketAssigned(event as TicketEvent)
+          text: renderTicketAssigneeChanged(event as TicketEvent)
         };
         break;
       case Events.TICKET_CLOSED:
@@ -724,7 +777,10 @@ export class ContactChat extends ContactStoreElement {
       case Events.TICKET_TOPIC_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: `Topic changed to **${(event as TicketEvent).topic.name}**`
+          text: html`<div>
+            Topic changed to
+            <strong>${(event as TicketEvent).topic.name}</strong>
+          </div>`
         };
         break;
       case Events.CHANNEL_EVENT: // deprecated
@@ -741,23 +797,28 @@ export class ContactChat extends ContactStoreElement {
       console.error('Unknown event type', event);
     }
 
+    if (!message.id) {
+      message.id = event.uuid || event.type + '@' + event.created_on;
+    }
+
     return message;
   }
 
   private getUserForEvent(event: MsgEvent | TicketEvent) {
-    let user = null;
     if (event.type === 'msg_received') {
-      user = {
+      return {
         name: this.currentContact.name
       };
+    } else if (event._user) {
+      return event._user;
     } else if (event.created_by) {
-      user = {
+      return {
         email: event.created_by.email,
         name: `${event.created_by.first_name} ${event.created_by.last_name}`.trim(),
         avatar: event.created_by.avatar
       };
     }
-    return user;
+    return null;
   }
 
   private createMessages(page: ContactHistoryPage): ChatEvent[] {

package/src/live/ContactDetails.ts

@@ -94,6 +94,13 @@ export class ContactDetails extends ContactStoreElement {
             disabled
           ></temba-contact-field>`;
         })}
+        ${this.data.ref
+          ? html`<temba-contact-field
+              name="Ref"
+              value=${this.data.ref}
+              disabled
+            ></temba-contact-field>`
+          : null}
 
         <temba-contact-field
           name="Status"

package/src/live/ContactNameFetch.ts

@@ -22,7 +22,7 @@ export class ContactNameFetch extends ContactStoreElement {
   public render(): TemplateResult {
     if (this.data) {
       return html` <temba-contact-name
-          name=${this.data.name || this.data.anon_display}
+          name=${this.data.name || this.data.ref}
           urn=${this.data.urns.length > 0 ? this.data.urns[0] : null}
         ></temba-contact-name>
         <slot></slot>`;

package/src/webchat/index.ts

@@ -1,5 +1,3 @@
-import { User } from '../interfaces';
-
 export const SVG_FINGERPRINT = 'febafb41c2fd60efa2bdaead993c7087';
 
 // webchat spritesheet
@@ -12,17 +10,3 @@ export enum WebChatIcon {
   attachment_location = 'marker-pin-01',
   attachment_video = 'video-recorder'
 }
-
-export const getUserDisplay = (user: User) => {
-  if (user) {
-    if (user.first_name && user.last_name) {
-      return `${user.first_name} ${user.last_name}`;
-    }
-
-    if (user.first_name) {
-      return user.first_name;
-    }
-
-    return user.email;
-  }
-};

package/static/api/labels.json

@@ -26,6 +26,11 @@
       "uuid": "a3f2990b-4096-452e-a586-dc06a9434dde",
       "name": "Feedback",
       "count": 42
+    },
+    {
+      "uuid": "6dc62526-c334-4869-84fa-8b2d73b4cdfd",
+      "name": "This is a label",
+      "count": 0
     }
   ]
-}
+}

package/test/NodeHelper.ts

@@ -92,46 +92,44 @@ export class NodeTest<T extends Node> {
    * 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);
-      }
-    });
+    // 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);
+    }
   }
 
   /**

package/test/nodes/split_by_llm.test.ts

@@ -196,37 +196,48 @@ describe('split_by_llm node config', () => {
       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'
-    );
+    it('renders translation task', async () => {
+      await helper.testNode(
+        createTestNode(
+          { uuid: 'gpt-4', name: 'GPT 4.1' },
+          'Translate to French'
+        ),
+        nodeUI,
+        'translation-task'
+      );
+    });
+
+    it('renders sentiment analysis', async () => {
+      await 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'
+      );
+    });
+
+    it('renders summarization', async () => {
+      await helper.testNode(
+        createTestNode(
+          { uuid: 'gpt-4', name: 'GPT 4.1' },
+          'Summarize the key points from the conversation above in bullet format.'
+        ),
+        nodeUI,
+        'summarization'
+      );
+    });
+
+    it('renders information extraction', async () => {
+      await 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'
+      );
+    });
   });
 });