@nyaruka/temba-components 0.156.18 → 0.157.1

package/src/events/eventRenderers.ts

@@ -56,28 +56,134 @@ export enum Events {
   WEBHOOK_CALLED = 'webhook_called'
 }
 
+/**
+ * Renders a single DS pill of the given type. temba-label auto-resolves
+ * the icon from `type` (via PILL_TYPE_ICONS), so we don't pass `icon`
+ * unless the consumer explicitly overrides it. When `href` is provided
+ * the pill is wrapped in a navigation anchor (SPA goto); otherwise it's
+ * rendered inline as a plain pill. Single source of truth for the
+ * "entity pill in chat history" look — inline margin keeps wrapping
+ * airy, and inline style works regardless of host-page Tailwind reach.
+ */
+const renderEntityPill = (
+  pillType: string,
+  name: string,
+  opts: { href?: string; icon?: string } = {}
+): TemplateResult => {
+  const pill = opts.icon
+    ? html`<temba-label
+        icon=${opts.icon}
+        type=${pillType}
+        ?clickable=${!!opts.href}
+        style="margin: 1px 2px; vertical-align: middle;"
+        >${name}</temba-label
+      >`
+    : html`<temba-label
+        type=${pillType}
+        ?clickable=${!!opts.href}
+        style="margin: 1px 2px; vertical-align: middle;"
+        >${name}</temba-label
+      >`;
+  return opts.href
+    ? html`<a
+        href=${opts.href}
+        onclick="goto(event, this)"
+        style="vertical-align: middle;"
+        >${pill}</a
+      >`
+    : pill;
+};
+
+const groupPill = (item: any) =>
+  renderEntityPill('group', item.name, {
+    href: `/contact/group/${item.uuid}/`
+  });
+
+const flowPill = (flow: any) =>
+  renderEntityPill('flow', flow.name, {
+    href: `/flow/editor/${flow.uuid}/`
+  });
+
+const fieldPill = (field: any) => renderEntityPill('field', field.name);
+
+const topicPill = (topic: any) =>
+  renderEntityPill('topic', topic.name, {
+    href: `/ticket/${topic.uuid}/open/`
+  });
+
+/**
+ * Renders a user as a plain text link to the "All" ticket folder
+ * filtered by that assignee. Used for actor attribution in the
+ * chat history (ticket assigned / opened / closed events).
+ *
+ * The richer avatar-chip variant is parked in git history (see
+ * userPill) — we'll bring it back if denser surfaces need it.
+ */
+const userLink = (user: any): TemplateResult => {
+  const name =
+    user.name || [user.first_name, user.last_name].filter(Boolean).join(' ');
+  return html`<a
+    href="/ticket/all/open/?assignee=${user.uuid}"
+    onclick="goto(event, this)"
+    title=${name}
+    >${name}</a
+  >`;
+};
+
+/**
+ * Renders a contact-data value (field text, name, URN, language,
+ * status, amount, etc.) as bold inline text, truncated with an
+ * ellipsis past a reasonable width. Pills are reserved for system-
+ * level objects (group, flow, field, topic, …) — these are just
+ * values, so the chip chrome would over-state them. The full value
+ * is exposed via `title` for hover inspection.
+ */
+const valueText = (value: string | number) => {
+  const str = String(value);
+  return html`<span
+    title=${str}
+    style="display: inline-block; max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-weight: 600;"
+    >${str}</span
+  >`;
+};
+
+/**
+ * Inline-flex wrapper style that text + pills share. Without it,
+ * plain text sits on its own baseline while vertical-align: middle
+ * pills sit slightly above and the text appears to "float". flex
+ * centering keeps the row of words and pills on one cross-axis.
+ */
+// min-height keeps the row a consistent height across renderers
+// whether or not they contain a pill (which is ~22px tall) — without
+// it, plain-text events like "Cleared language" sit a few pixels
+// shorter than "Removed from <group pill>" and the chat history
+// looks unevenly spaced.
+const eventLineStyle =
+  'display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 2px 4px; min-height: 24px;';
+
 const renderInfoList = (
   singular: string,
   plural: string,
   items: any[]
 ): TemplateResult => {
   if (items.length === 1) {
-    return html`<div>${singular} <strong>${items[0].name}</strong></div>`;
-  } else {
-    const list = items.map((item) => item.name);
-    if (list.length === 2) {
-      return html`<div>
-        ${plural} <strong>${list[0]}</strong> and <strong>${list[1]}</strong>
-      </div>`;
-    } else {
-      const last = list.pop();
-      const middle = list.map(
-        (name, index) =>
-          html`<strong>${name}</strong>${index < list.length - 1 ? ', ' : ''}`
-      );
-      return html`<div>${plural} ${middle}, and <strong>${last}</strong></div>`;
-    }
+    return html`<div style=${eventLineStyle}>
+      ${singular} ${groupPill(items[0])}
+    </div>`;
+  }
+  if (items.length === 2) {
+    return html`<div style=${eventLineStyle}>
+      ${plural} ${groupPill(items[0])} and ${groupPill(items[1])}
+    </div>`;
   }
+  // No commas between pills — the flex `gap` on eventLineStyle
+  // already provides visual separation, and a pill list reads as a
+  // single "set" rather than a sentence.
+  const middle = items.slice(0, -1).map((item) => groupPill(item));
+  const last = items[items.length - 1];
+  return html`<div style=${eventLineStyle}>
+    ${plural} ${middle} and ${groupPill(last)}
+  </div>`;
 };
 
 export const renderRunEvent = (event: RunEvent): TemplateResult => {
@@ -92,11 +198,8 @@ export const renderRunEvent = (event: RunEvent): TemplateResult => {
     }
   }
 
-  return html`<div>
-    ${verb}
-    <a href="/flow/editor/${event.flow.uuid}/"
-      ><strong>${event.flow.name}</strong></a
-    >
+  return html`<div style=${eventLineStyle}>
+    ${verb} ${flowPill(event.flow)}
   </div>`;
 };
 
@@ -111,28 +214,38 @@ export const renderChatStartedEvent = (
 };
 
 export const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {
-  return event.value
-    ? html`<div>
-        Updated <strong>${event.field.name}</strong> to
-        <strong>${event.value.text}</strong>
+  // Treat both a missing value object and an empty-string text as a
+  // cleared field — backfill / reset payloads sometimes arrive as
+  // `value: { text: '' }`, which would otherwise render with an
+  // empty value pill.
+  return event.value && event.value.text
+    ? html`<div style=${eventLineStyle}>
+        Updated ${fieldPill(event.field)} to ${valueText(event.value.text)}
       </div>`
-    : html`<div>Cleared <strong>${event.field.name}</strong></div>`;
+    : html`<div style=${eventLineStyle}>
+        Cleared ${fieldPill(event.field)}
+      </div>`;
 };
 
 export const renderNameChanged = (event: NameChangedEvent): TemplateResult => {
-  return html`<div>
-    Updated <strong>name</strong> to <strong>${event.name}</strong>
+  if (!event.name) {
+    return html`<div style=${eventLineStyle}>Cleared name</div>`;
+  }
+  return html`<div style=${eventLineStyle}>
+    Updated name to ${valueText(event.name)}
   </div>`;
 };
 
 export 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>`
+  if (!event.urns || event.urns.length === 0) {
+    return html`<div style=${eventLineStyle}>Cleared URNs</div>`;
+  }
+  return html`<div style=${eventLineStyle}>
+    Updated URNs to
+    ${oxfordFn(event.urns, (urn: string) =>
+      valueText(urn.split(':')[1].split('?')[0])
     )}
   </div>`;
 };
@@ -143,87 +256,110 @@ export const renderTicketAction = (
 ): TemplateResult => {
   const ticketUUID = event.ticket?.uuid || event.ticket_uuid;
 
-  const actionNote = event.note
-    ? html`<div
-        style="width:85%; background: #fffac3; padding: 1em;margin-bottom: 1em;margin-top:1em; border: 1px solid #ffe97f;border-radius: var(--curvature);line-height: 1.2em; word-break: break-word;"
-      >
-        <div style="color: #8e830fff; font-size: 1em;margin-bottom:0.25em; ">
-          <strong>${event._user ? event._user.name : 'Someone'}</strong> added a
-          note
-          <temba-date
-            value=${event.created_on.toISOString()}
-            display="relative"
-          ></temba-date>
-        </div>
-        <div style="white-space: pre-wrap;">${event.note}</div>
-      </div>`
-    : null;
-
+  // Notes in the real chat history now go through Chat.ts#renderNote
+  // (see ContactChat.ts: ticket_note_added bypasses prerender). This
+  // path only runs for non-chat consumers (e.g. the flow Simulator).
+  // Render notes as a simple inline italic line — the chat-bubble
+  // styling lives in Chat.ts so the two can't drift.
   if (action === 'noted') {
-    return html`${actionNote}`;
+    return event.note
+      ? html`<div style="white-space: pre-wrap; font-style: italic;">
+          ${event.note}
+        </div>`
+      : null;
   }
 
-  const description = event._user
-    ? html`<div>
-        <strong>${event._user.name}</strong> ${action} a
-        <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
+  // closed → ticket is in the closed folder now; reopened → it's
+  // back in open. Linking the word "ticket" lets a reader jump to
+  // wherever the ticket actually lives.
+  const folder = action === 'closed' ? 'closed' : 'open';
+  const href = `/ticket/all/${folder}/${ticketUUID}/`;
+  return event._user
+    ? html`<div style=${eventLineStyle}>
+        ${userLink(event._user)} ${action} a <a href=${href}>ticket</a>
       </div>`
-    : html`<div>
-        A
-        <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
-        was <strong>${action}</strong>
+    : html`<div style=${eventLineStyle}>
+        A <a href=${href}>ticket</a> was ${action}
       </div>`;
-
-  return html`<div style="${actionNote ? 'margin-bottom: 1em;' : ''}">
-      ${description}
-    </div>
-    ${actionNote}`;
 };
 
 export const renderTicketAssigneeChanged = (
   event: TicketEvent
 ): TemplateResult => {
+  const ticketUUID = event.ticket?.uuid || event.ticket_uuid;
+  // Link the word "ticket" in assignee events too, so the noun is
+  // consistently interactive across open / close / reopen / assigned
+  // rows (the contact-history page can show events from any of the
+  // contact's tickets, so the jump-to-ticket affordance is useful).
+  const ticketLink = html`<a href="/ticket/all/open/${ticketUUID}/"
+    >ticket</a
+  >`;
+  const ticketLinkCapitalized = html`<a href="/ticket/all/open/${ticketUUID}/"
+    >This ticket</a
+  >`;
   if (event._user) {
     if (event.assignee) {
-      return html`<div>
-        <strong>${event._user.name}</strong> assigned this ticket to
-        <strong>${event.assignee.name}</strong>
+      // Self-assignment ("took the ticket") reads naturally as one
+      // user link + verb, rather than "<user> assigned to <same user>".
+      // Match on uuid when present, falling back to email — depending
+      // on the API surface a user payload may carry one or the other.
+      const sameUser =
+        (event._user.uuid && event._user.uuid === event.assignee.uuid) ||
+        (event._user.email && event._user.email === event.assignee.email);
+      if (sameUser) {
+        return html`<div style=${eventLineStyle}>
+          ${userLink(event._user)} took this ${ticketLink}
+        </div>`;
+      }
+      return html`<div style=${eventLineStyle}>
+        ${userLink(event._user)} assigned this ${ticketLink} to
+        ${userLink(event.assignee)}
       </div>`;
     } else {
-      return html`<div>
-        <strong>${event._user.name}</strong> unassigned this ticket
+      return html`<div style=${eventLineStyle}>
+        ${userLink(event._user)} unassigned this ${ticketLink}
       </div>`;
     }
   } else {
     if (event.assignee) {
-      return html`<div>
-        This ticket was assigned to <strong>${event.assignee.name}</strong>
+      return html`<div style=${eventLineStyle}>
+        ${ticketLinkCapitalized} was assigned to ${userLink(event.assignee)}
       </div>`;
     } else {
-      return html`<div>This ticket was unassigned</div>`;
+      return html`<div style=${eventLineStyle}>
+        ${ticketLinkCapitalized} was unassigned
+      </div>`;
     }
   }
 };
 
 export const renderTicketOpened = (event: TicketEvent): TemplateResult => {
-  return html`<div>${event.ticket.topic.name} ticket was opened</div>`;
+  const ticketUUID = event.ticket.uuid;
+  const href = `/ticket/all/open/${ticketUUID}/`;
+  // ticket.topic is optional in events.ts — guard so a payload
+  // without one degrades to "A ticket was opened" rather than
+  // throwing inside topicPill.
+  const topic = event.ticket.topic;
+  const tail = topic ? html` in ${topicPill(topic)}` : null;
+  return event._user
+    ? html`<div style=${eventLineStyle}>
+        ${userLink(event._user)} opened a <a href=${href}>ticket</a>${tail}
+      </div>`
+    : html`<div style=${eventLineStyle}>
+        A <a href=${href}>ticket</a> was opened${tail}
+      </div>`;
 };
 
 export const renderContactGroupsEvent = (
   event: ContactGroupsEvent
 ): TemplateResult => {
-  const groupsEvent = event as ContactGroupsEvent;
-  if (groupsEvent.groups_added) {
+  if (event.groups_added) {
+    return renderInfoList('Added to', 'Added to', event.groups_added);
+  } else if (event.groups_removed) {
     return renderInfoList(
-      'Added to group',
-      'Added to groups',
-      groupsEvent.groups_added
-    );
-  } else if (groupsEvent.groups_removed) {
-    return renderInfoList(
-      'Removed from group',
-      'Removed from groups',
-      groupsEvent.groups_removed
+      'Removed from',
+      'Removed from',
+      event.groups_removed
     );
   }
 };
@@ -234,23 +370,31 @@ export const renderAirtimeTransferredEvent = (
   if (parseFloat(event.amount) === 0) {
     return html`<div>Airtime transfer failed</div>`;
   }
-  return html`<div>
-    Transferred <strong>${event.amount}</strong> ${event.currency} of airtime
+  return html`<div style=${eventLineStyle}>
+    Transferred ${valueText(event.amount)} ${event.currency} of airtime
   </div>`;
 };
 
 export const renderContactLanguageChangedEvent = (
   event: ContactLanguageChangedEvent
 ): TemplateResult => {
-  return html`<div>
-    Language updated to <strong>${event.language}</strong>
+  if (!event.language) {
+    return html`<div style=${eventLineStyle}>Cleared language</div>`;
+  }
+  return html`<div style=${eventLineStyle}>
+    Language updated to ${valueText(event.language)}
   </div>`;
 };
 
 export const renderContactStatusChangedEvent = (
   event: ContactStatusChangedEvent
 ): TemplateResult => {
-  return html`<div>Status updated to <strong>${event.status}</strong></div>`;
+  if (!event.status) {
+    return html`<div style=${eventLineStyle}>Cleared status</div>`;
+  }
+  return html`<div style=${eventLineStyle}>
+    Status updated to ${valueText(event.status)}
+  </div>`;
 };
 
 export const renderCallEvent = (event: CallEvent): TemplateResult => {
@@ -375,9 +519,7 @@ export const renderBroadcastCreated = (event: any): TemplateResult | null => {
 export const renderSessionTriggered = (event: any): TemplateResult | null => {
   const flow = event.flow;
   if (flow) {
-    return html`<div>
-      Started somebody else in <strong>${flow.name}</strong>
-    </div>`;
+    return html`<div>Started somebody else in ${flowPill(flow)}</div>`;
   }
   return null;
 };
@@ -498,7 +640,7 @@ export const renderEvent = (
       content = renderTicketAction(event as TicketEvent, 'closed');
       break;
     case Events.TICKET_OPENED:
-      content = renderTicketAction(event as TicketEvent, 'opened');
+      content = renderTicketOpened(event as TicketEvent);
       break;
     case Events.TICKET_NOTE_ADDED:
       content = renderTicketAction(event as TicketEvent, 'noted');
@@ -506,11 +648,17 @@ export const renderEvent = (
     case Events.TICKET_REOPENED:
       content = renderTicketAction(event as TicketEvent, 'reopened');
       break;
-    case Events.TICKET_TOPIC_CHANGED:
-      content = html`<div>
-        Topic changed to <strong>${(event as TicketEvent).topic.name}</strong>
-      </div>`;
+    case Events.TICKET_TOPIC_CHANGED: {
+      // event.topic is optional — guard so a payload without one
+      // degrades cleanly instead of throwing inside topicPill.
+      const newTopic = (event as TicketEvent).topic;
+      content = newTopic
+        ? html`<div style=${eventLineStyle}>
+            Topic changed to ${topicPill(newTopic)}
+          </div>`
+        : null;
       break;
+    }
     default:
       return null;
   }

package/src/excellent/caret-utils.ts

@@ -294,4 +294,3 @@ export function setCaretRange(
   selection.removeAllRanges();
   selection.addRange(range);
 }
-

package/src/flow/AutoTranslate.ts

@@ -6,7 +6,7 @@ import { getStore } from '../store/Store';
 import { AppState, fromStore, zustand } from '../store/AppState';
 import { FlowDefinition } from '../store/flow-definition';
 import { TranslationEntry, buildTranslationBundles } from './flow-translations';
-import { getLanguageDisplayName } from './utils';
+import { getLanguageName } from '../languages';
 import { LLMModel, hasLLMRole } from './flow-utils';
 
 interface TranslationModel {
@@ -701,7 +701,7 @@ export class AutoTranslate extends RapidElement {
     }
 
     const selected = this.selectedModel ? [this.selectedModel] : [];
-    const languageName = getLanguageDisplayName(this.languageCode);
+    const languageName = getLanguageName(this.languageCode);
     const aiClause = this.brand
       ? html`${this.brand} uses AI for automatic translation, which can make
         mistakes,`

package/src/flow/Editor.ts

@@ -22,12 +22,12 @@ import {
 } from '../utils';
 import { TEMBA_COMPONENTS_VERSION } from '../version';
 import {
-  getLanguageDisplayName,
   getNodeBounds,
   calculateReflowPositions,
   NodeBounds,
   snapToGrid
 } from './utils';
+import { getLanguageName } from '../languages';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { PRIMARY_LANGUAGE_OPTION_VALUE } from './EditorToolbar';
 import {
@@ -1711,7 +1711,7 @@ export class Editor extends RapidElement {
     // Use languages from workspace if available
     if (this.workspace?.languages && this.workspace.languages.length > 0) {
       return this.workspace.languages
-        .map((code) => ({ code, name: getLanguageDisplayName(code) }))
+        .map((code) => ({ code, name: getLanguageName(code) }))
         .filter((lang) => lang.code && lang.name);
     }
 
@@ -1722,7 +1722,7 @@ export class Editor extends RapidElement {
     ) {
       return this.definition._ui.languages.map((lang: any) => {
         const code = typeof lang === 'string' ? lang : lang.iso || lang.code;
-        return { code, name: getLanguageDisplayName(code) };
+        return { code, name: getLanguageName(code) };
       });
     }
 
@@ -3644,7 +3644,7 @@ export class Editor extends RapidElement {
     const baseLanguage = this.definition?.language;
     const baseLanguageName =
       availableLanguages.find((lang) => lang.code === baseLanguage)?.name ||
-      (baseLanguage ? getLanguageDisplayName(baseLanguage) : '') ||
+      (baseLanguage ? getLanguageName(baseLanguage) : '') ||
       'Primary language';
     const isBaseSelected =
       !this.languageCode ||

package/src/flow/NodeEditor.ts

@@ -37,7 +37,7 @@ import {
   fromStore,
   zustand
 } from '../store/AppState';
-import { getStore } from '../store/Store';
+import { getLanguageName } from '../languages';
 
 export class NodeEditor extends RapidElement {
   static get styles() {
@@ -2656,7 +2656,7 @@ export class NodeEditor extends RapidElement {
     const dialogSize = config?.dialogSize || 'medium'; // Default to 'large' if not specified
 
     const languageName = this.isTranslating
-      ? getStore().getLanguageName(this.languageCode)
+      ? getLanguageName(this.languageCode)
       : '';
 
     let header = config?.name || 'Edit';

package/src/flow/NodeTypeSelector.ts

@@ -213,11 +213,6 @@ export class NodeTypeSelector extends RapidElement {
         background: rgba(0, 0, 0, 0.03);
         border-radius: 0 0 var(--curvature) var(--curvature);
       }
-
-      temba-button {
-        --button-y: 0.5em;
-        --button-x: 1.25em;
-      }
     `;
   }
 

package/src/flow/RevisionsWindow.ts

@@ -308,9 +308,7 @@ export class RevisionsWindow extends RapidElement {
       // too, or a sweeping edit (4+ label areas) would still strand the
       // no-op group as an empty-summary row.
       const fitsLabelCap =
-        isNoOp ||
-        !groupHasRealChange ||
-        prospective.size <= MAX_GROUP_LABELS;
+        isNoOp || !groupHasRealChange || prospective.size <= MAX_GROUP_LABELS;
 
       if (withinWindow && sameAuthor && fitsLabelCap) {
         group.push(rev);

package/src/flow/actions/set_contact_language.ts

@@ -8,14 +8,15 @@ import {
 } from '../types';
 import { Node, SetContactLanguage } from '../../store/flow-definition';
 import { getStore } from '../../store/Store';
-import { getLanguageDisplayName, renderClamped } from '../utils';
+import { renderClamped } from '../utils';
+import { getLanguageName } from '../../languages';
 
 export const set_contact_language: ActionConfig = {
   name: 'Update Language',
   group: ACTION_GROUPS.contacts,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactLanguage) => {
-    const name = getLanguageDisplayName(action.language);
+    const name = getLanguageName(action.language);
     return renderClamped(
       html`Set to <strong>${name}</strong>`,
       `Set to ${name}`
@@ -37,7 +38,7 @@ export const set_contact_language: ActionConfig = {
         if (workspace?.languages && Array.isArray(workspace.languages)) {
           return workspace.languages.map((languageCode: string) => ({
             value: languageCode,
-            name: getLanguageDisplayName(languageCode)
+            name: getLanguageName(languageCode)
           }));
         }
         return [];
@@ -51,7 +52,7 @@ export const set_contact_language: ActionConfig = {
         language: [
           {
             value: action.language,
-            name: getLanguageDisplayName(action.language)
+            name: getLanguageName(action.language)
           }
         ],
         uuid: action.uuid

package/src/flow/nodes/shared.ts

@@ -69,6 +69,14 @@ const advancedSection = {
     !!(formData.localizeRules || formData.localizeCategories)
 };
 
+const categoriesLocalizationSection = {
+  label: 'Localization',
+  localizable: false,
+  items: ['localizeCategories'],
+  collapsed: true,
+  getValueCount: (formData: FormData) => !!formData.localizeCategories
+};
+
 export const nodeOptionsAccordion: AccordionLayoutConfig = {
   type: 'accordion',
   multi: true,
@@ -81,6 +89,12 @@ export const nodeOptionsAccordionSimple: AccordionLayoutConfig = {
   sections: [resultNameSection]
 };
 
+export const nodeOptionsAccordionCategoriesOnly: AccordionLayoutConfig = {
+  type: 'accordion',
+  multi: true,
+  sections: [resultNameSection, categoriesLocalizationSection]
+};
+
 /**
  * Shared category localization functions for router nodes.
  * These provide a consistent way to localize category names across all router types.