@nyaruka/temba-components 0.159.2 → 0.159.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.159.2",
+  "version": "0.159.4",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/rollup.components.mjs

@@ -47,6 +47,7 @@ export default {
         replace({
             preventAssignment: true,
             'process.env.NODE_ENV': JSON.stringify('development'),
+            '__TEMBA_DEV_SERVER__': JSON.stringify(false),
             '__TEMBA_COMPONENTS_VERSION__': JSON.stringify(TEMBA_COMPONENTS_VERSION)
           }),
 

package/src/display/Chat.ts

@@ -802,6 +802,15 @@ export class Chat extends RapidElement {
   @property({ type: Boolean })
   avatars = false;
 
+  // identity of the contact this chat belongs to, used to render a
+  // name-based avatar for the contact's own incoming messages (which the
+  // backend does not attach a `_user` to)
+  @property({ type: String })
+  contactName: string;
+
+  @property({ type: String })
+  contactUuid: string;
+
   @property({ type: Boolean, attribute: false })
   endOfHistory = false;
 
@@ -1213,7 +1222,36 @@ export class Chat extends RapidElement {
     const showAvatar =
       this.avatars && ((isMessageType && this.agent) || !incoming);
 
-    const isSystem = !currentMsg._user?.uuid;
+    // resolve the identity shown in the avatar: prefer the user attached to
+    // the event (an agent or flow author), otherwise fall back to the contact
+    // for their own incoming messages.
+    //
+    // contact fallback assumes `_user` is absent for `msg_received` (contact
+    // messages carry no `_user`, so first_name/last_name aren't available and
+    // getFullName falls back to `name`); the fallback only applies when there
+    // is no `_user` on the event.
+    const fromContact = currentMsg.type === 'msg_received' && !currentMsg._user;
+    const avatarName = currentMsg._user
+      ? currentMsg._user.name
+      : fromContact
+        ? this.contactName
+        : undefined;
+    const avatarUuid = currentMsg._user
+      ? currentMsg._user.uuid
+      : fromContact
+        ? this.contactUuid
+        : undefined;
+
+    // determine whether to fall back to the generic default (system) avatar.
+    // when the event has a `_user`, preserve the original behavior exactly:
+    // system iff that user has no uuid (a name-only flow author still gets the
+    // default avatar). for a contact event with no `_user`, it's system only
+    // when we have no contact identity at all.
+    const isSystem = currentMsg._user
+      ? !currentMsg._user.uuid
+      : fromContact
+        ? !this.contactUuid && !this.contactName
+        : true;
 
     const reasonLabel = this.getReasonLabel(group.reason);
     const showReason = false; // reasonLabel && idx > 0;
@@ -1294,11 +1332,11 @@ export class Chat extends RapidElement {
         ${showAvatar
           ? html`<div class="avatar" style="align-self:flex-end">
               <temba-user
-                uuid=${currentMsg._user?.uuid}
-                name=${name}
-                first_name=${currentMsg._user?.first_name}
-                last_name=${currentMsg._user?.last_name}
-                avatar=${currentMsg._user?.avatar}
+                uuid=${avatarUuid ?? nothing}
+                name=${avatarName ?? nothing}
+                first_name=${currentMsg._user?.first_name ?? nothing}
+                last_name=${currentMsg._user?.last_name ?? nothing}
+                avatar=${currentMsg._user?.avatar ?? nothing}
                 ?system=${isSystem}
               >
               </temba-user>

package/src/display/TembaUser.ts

@@ -4,6 +4,7 @@ import { property } from 'lit/decorators.js';
 import { colorHash, extractInitials } from '../utils';
 
 import { DEFAULT_AVATAR } from '../webchat/assets';
+import { Icon } from '../Icons';
 import { RapidElement } from '../RapidElement';
 
 export const getFullName = (user: {
@@ -83,8 +84,14 @@ export class TembaUser extends RapidElement {
   public willUpdate(changed: PropertyValues): void {
     super.willUpdate(changed);
 
-    if (changed.has('system') && this.system) {
-      this.bgimage = `url('${DEFAULT_AVATAR}') center / contain no-repeat`;
+    // when system toggles, set the default avatar background while system, and
+    // clear it otherwise so a reused element doesn't keep a stale default that
+    // would suppress the initials/contact-icon branch. a real `avatar` below
+    // can still override this.
+    if (changed.has('system')) {
+      this.bgimage = this.system
+        ? `url('${DEFAULT_AVATAR}') center / contain no-repeat`
+        : null;
     }
 
     if (
@@ -136,13 +143,18 @@ export class TembaUser extends RapidElement {
               box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
               background:${this.bgimage || this.bgcolor};"
       >
-        ${this.initials && !this.bgimage
-          ? html` <div
-              style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1"
-            >
-              <div style="border:0px solid blue;">${this.initials}</div>
-            </div>`
-          : null}
+        ${this.bgimage
+          ? null
+          : this.initials
+            ? html` <div
+                style="display:flex; flex-direction: column; align-items:center;flex-grow:1"
+              >
+                <div>${this.initials}</div>
+              </div>`
+            : html`<temba-icon
+                name="${Icon.contact}"
+                style="display:flex;flex-grow:1;justify-content:center;color:rgba(0,0,0,0.35)"
+              ></temba-icon>`}
       </div>
       ${this.showName
         ? html`<div

package/src/flow/NodeEditor.ts

@@ -1129,11 +1129,16 @@ export class NodeEditor extends RapidElement {
             }
           }
 
-          // Check required fields (skip in localization mode since all fields are optional)
+          // Check required fields (skip in localization mode since all fields are optional).
+          // A whitespace-only string counts as empty here - otherwise it slips past this
+          // check and is emitted (e.g. trimmed to "") into the definition, which the backend
+          // then rejects (e.g. a dial wait with an empty phone).
           if (
             !this.isTranslating &&
             (fieldConfig as any).required &&
-            (!value || (Array.isArray(value) && value.length === 0))
+            (!value ||
+              (typeof value === 'string' && value.trim() === '') ||
+              (Array.isArray(value) && value.length === 0))
           ) {
             errors[fieldName] = `${
               (fieldConfig as any).label || fieldName
@@ -1151,17 +1156,32 @@ export class NodeEditor extends RapidElement {
             } must be at least ${(fieldConfig as any).minLength} characters`;
           }
 
-          // Check maxLength for text fields
-          if (
-            typeof value === 'string' &&
-            (fieldConfig as any).maxLength &&
-            value.length > (fieldConfig as any).maxLength
-          ) {
-            errors[fieldName] = `${
-              (fieldConfig as any).label || fieldName
-            } must be no more than ${
-              (fieldConfig as any).maxLength
-            } characters`;
+          // Check maxLength for text fields, as well as for the values of select/tag
+          // items (e.g. result names, quick replies) which are stored as arrays of
+          // option objects (or plain strings) rather than a single string. Without the
+          // array/object handling, an over-long value here is emitted into the definition
+          // and rejected by the backend (goflow caps result names at 64 and quick replies
+          // at 1000 chars).
+          const maxLength = (fieldConfig as any).maxLength;
+          if (maxLength) {
+            const itemLength = (item: any): number => {
+              if (typeof item === 'string') return item.length;
+              if (item && typeof item === 'object') {
+                const text = item.value ?? item.name;
+                return typeof text === 'string' ? text.length : 0;
+              }
+              return 0;
+            };
+
+            const exceedsMax = Array.isArray(value)
+              ? value.some((item) => itemLength(item) > maxLength)
+              : itemLength(value) > maxLength;
+
+            if (exceedsMax) {
+              errors[fieldName] = `${
+                (fieldConfig as any).label || fieldName
+              } must be no more than ${maxLength} characters`;
+            }
           }
         });
       }

package/src/flow/actions/add_input_labels.ts

@@ -6,7 +6,10 @@ import { renderNamedObjects } from '../utils';
 export const add_input_labels: ActionConfig = {
   name: 'Add Input Labels',
   group: ACTION_GROUPS.save,
-  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  // Not allowed in background flows: goflow treats add_input_labels as an interactive
+  // action (messaging, messaging_offline, voice only), so offering it in a
+  // messaging_background flow produces a definition the backend rejects.
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE],
   render: (_node: Node, action: AddInputLabels) => {
     return html`<div>${renderNamedObjects(action.labels, 'label')}</div>`;
   },

package/src/flow/actions/send_msg.ts

@@ -81,6 +81,7 @@ export const send_msg: ActionConfig = {
       searchable: true,
       placeholder: 'Add quick replies...',
       maxItems: 10,
+      maxLength: 1000,
       evaluated: true
     },
     template: {

package/src/flow/actions/set_run_result.ts

@@ -21,6 +21,7 @@ export const set_run_result: ActionConfig = {
       label: 'Result Name',
       helpText: 'Select an existing result name or type a new one',
       required: true,
+      maxLength: 64,
       placeholder: 'Select or enter result name...',
       createArbitraryOption: (input, options) => {
         const exists = options.some(

package/src/flow/nodes/split_by_ticket.ts

@@ -41,6 +41,7 @@ export const split_by_ticket: NodeConfig = {
       type: 'textarea',
       label: 'Note',
       required: false,
+      evaluated: true,
       placeholder: 'Enter a note for the ticket (optional)',
       minHeight: 100
     }

package/src/form/Checkbox.ts

@@ -88,6 +88,15 @@ export class Checkbox extends FieldElement {
         cursor: not-allowed;
         --icon-color: #ccc;
       }
+
+      /* While a change driven by this checkbox is in flight, the glyph
+         is swapped for spinning arrows to signal work is underway, and the
+         white checkbox backing is hidden so the circular arrows aren't
+         framed by a square. Clicks are ignored in handleClick so the user
+         can't re-fire the same toggle. */
+      .checkbox-container.busy .checkbox-background {
+        display: none;
+      }
     `;
   }
 
@@ -103,6 +112,12 @@ export class Checkbox extends FieldElement {
   @property({ type: Boolean })
   disabled = false;
 
+  // When set, the checkbox glyph is replaced by spinning arrows to indicate
+  // a change it drives is in flight, and clicks are ignored until the host
+  // clears it.
+  @property({ type: Boolean })
+  busy = false;
+
   @property({ type: Number })
   size = 1.2;
 
@@ -154,7 +169,7 @@ export class Checkbox extends FieldElement {
   }
 
   private handleClick(): void {
-    if (!this.disabled) {
+    if (!this.disabled && !this.busy) {
       this.checked = !this.checked;
     }
   }
@@ -165,22 +180,33 @@ export class Checkbox extends FieldElement {
   }
 
   protected renderWidget(): TemplateResult {
-    const icon = html`<temba-icon
-      name="${this.checked
-        ? Icon.checkbox_checked
-        : this.partial
-          ? Icon.checkbox_partial
-          : Icon.checkbox}"
-      size="${this.size}"
-      animatechange="${this.animateChange}"
-    ></temba-icon>`;
+    const icon = this.busy
+      ? html`<temba-icon
+          name="${Icon.progress_spinner}"
+          size="${this.size}"
+          spin
+        ></temba-icon>`
+      : html`<temba-icon
+          name="${this.checked
+            ? Icon.checkbox_checked
+            : this.partial
+              ? Icon.checkbox_partial
+              : Icon.checkbox}"
+          size="${this.size}"
+          animatechange="${this.animateChange}"
+        ></temba-icon>`;
 
     return html`
       <div
         class="wrapper ${this.label ? 'label' : ''}"
         @click=${this.handleClick}
       >
-        <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
+        <div
+          class="checkbox-container ${this.disabled ? 'disabled' : ''} ${this
+            .busy
+            ? 'busy'
+            : ''}"
+        >
           <div class="checkbox-background"></div>
           ${icon}
 

package/src/layout/PageHeader.ts

@@ -46,28 +46,44 @@ export class PageHeader extends RapidElement {
           'tnum' 0;
       }
 
-      /* Title on the left, actions + content menu on the right. */
+      /* One row: the title/subtitle block on the left and the
+         actions/content-menu on the right, vertically centered against
+         each other. The title block is the flexing column so the
+         actions hold their size. The vertical padding matches the
+         horizontal inset the host supplies (the list panel's 20px) so
+         the whole header is wrapped in even, consistent padding. */
       .header {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         gap: var(--gap);
-        padding: 20px 0 16px 0;
+        padding: 12px 0;
       }
-      .titles {
+      /* Title + subtitle stacked tight, sharing the left column. It
+         flexes and clips so a long subtitle truncates against the
+         actions rather than pushing them off the row. */
+      .title-block {
         flex: 1 1 auto;
         min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
       }
       .title {
         font-size: 15.5px;
         font-weight: var(--w-semibold);
         color: var(--text-1);
-        line-height: 1.3;
+        line-height: 1.25;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
       .subtitle {
         font-size: 12.5px;
         color: var(--text-3);
-        line-height: 1.3;
-        margin-top: 1px;
+        line-height: 1.25;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
       .actions {
         flex: 0 0 auto;
@@ -91,7 +107,7 @@ export class PageHeader extends RapidElement {
            same way .ds * does in the styleguide — otherwise the
            border adds 2px and the button computes 2px taller. */
         box-sizing: border-box;
-        height: 28px;
+        height: 26px;
         padding: 0 10px;
         border: 1px solid var(--border-strong);
         border-radius: var(--r-sm);
@@ -133,9 +149,12 @@ export class PageHeader extends RapidElement {
       .menu-toggle {
         display: inline-flex;
         align-items: center;
+        justify-content: center;
         cursor: pointer;
         user-select: none;
-        padding: 6px;
+        height: 26px;
+        box-sizing: border-box;
+        padding: 0 5px;
         border-radius: var(--r-sm);
         color: var(--text-2);
         --icon-color: currentColor;
@@ -314,16 +333,19 @@ export class PageHeader extends RapidElement {
   }
 
   public render(): TemplateResult {
-    const hasSubtitle =
-      this.subtitle || this.querySelector('[slot="subtitle"]');
+    const slotted = this.querySelector('[slot="subtitle"]');
+    const hasSubtitle = this.subtitle || slotted;
+    // Full subtitle text for the hover tooltip — the bar truncates a
+    // long subtitle, so the native title surfaces the rest on hover.
+    const subtitleText = (this.subtitle || slotted?.textContent || '').trim();
     return html`
       <div class="header">
-        <div class="titles">
+        <div class="title-block">
           <div class="title">
             <slot name="title">${this.headerTitle}</slot>
           </div>
           ${hasSubtitle
-            ? html`<div class="subtitle">
+            ? html`<div class="subtitle" title=${subtitleText}>
                 <slot name="subtitle">${this.subtitle}</slot>
               </div>`
             : null}

package/src/list/ContactList.ts

@@ -7,6 +7,9 @@ import { getUrl } from '../utils';
 
 const FIELD_PREFIX = 'field:';
 
+/** Placeholder shown in any cell whose value is empty. */
+const EMPTY = '--';
+
 /**
  * Contact CRUDL list — drop-in replacement for the rapidpro
  * `contacts/contact_list.html` table. Each row carries a contact
@@ -60,6 +63,16 @@ export class ContactList extends ContentList<Contact> {
     this.bulkActions = [
       { key: 'send', label: 'Send', icon: Icon.compose },
       { key: 'flow', label: 'Start flow', icon: Icon.flow },
+      // Group toggle — a dropdown of the workspace's static (manual)
+      // groups to add/remove the selection to/from, like the message
+      // list's label dropdown.
+      {
+        key: 'label',
+        label: 'Group',
+        icon: Icon.group,
+        labelsEndpoint: '/api/v2/groups.json?manual_only=1',
+        labelsKey: 'groups'
+      },
       { key: 'archive', label: 'Archive', icon: Icon.archive },
       { key: 'delete', label: 'Delete', icon: Icon.delete, destructive: true }
     ];
@@ -117,15 +130,16 @@ export class ContactList extends ContentList<Contact> {
     }
   }
 
-  /** Columns: name, urn, the featured fields, then last seen.
+  /** Columns: name, urn, the featured fields, then last seen and
+   * created on.
    *
-   * Name + URN lead and Last-seen trails, with the workspace's
-   * custom fields filling the middle. Every column sizes to its
-   * content between min/max bounds — none are hard-fixed — so the
+   * Name leads, with URN, the workspace's custom fields, and the
+   * last-seen / created-on dates trailing it. Every column sizes to
+   * its content between min/max bounds — none are hard-fixed — so the
    * table stays compact and overflows into a horizontal scroll only
-   * when the field set is genuinely wide. Name + URN are pinned to
-   * the left edge and Last-seen to the right, so identity and
-   * recency stay anchored while the fields scroll between them.
+   * when the field set is genuinely wide. Only Name is pinned to the
+   * left edge, so identity stays anchored while everything else
+   * scrolls.
    *
    * There is deliberately no group-membership column — contacts
    * routinely belong to dozens of groups, so a groups cell is
@@ -158,8 +172,7 @@ export class ContactList extends ContentList<Contact> {
         key: 'urn',
         label: 'URN',
         minWidth: '120px',
-        maxWidth: '190px',
-        pinned: true
+        maxWidth: '190px'
       },
       ...fieldColumns,
       {
@@ -168,8 +181,15 @@ export class ContactList extends ContentList<Contact> {
         sortable: true,
         minWidth: '96px',
         maxWidth: '150px',
-        align: 'right',
-        pinned: 'right'
+        align: 'right'
+      },
+      {
+        key: 'created_on',
+        label: 'Created on',
+        sortable: true,
+        minWidth: '96px',
+        maxWidth: '150px',
+        align: 'right'
       }
     ];
   }
@@ -189,11 +209,16 @@ export class ContactList extends ContentList<Contact> {
     if (column.key.startsWith(FIELD_PREFIX)) {
       const fieldKey = column.key.substring(FIELD_PREFIX.length);
       const raw = item.fields?.[fieldKey];
-      if (raw == null || raw === '') return '';
-      // Date/time fields render as a relative duration, matching the
-      // Last-seen column — never a raw timestamp string.
+      if (raw == null || raw === '') return EMPTY;
+      // Location values are stored as a full hierarchy path
+      // (e.g. "Nigeria > Yobe > Nguru > Dabule"); show only the leaf.
+      if (this.isLocationField(fieldKey)) {
+        const path = String(raw);
+        return html`<span title=${path}>${this.locationLeaf(path)}</span>`;
+      }
+      // Date/time fields render via the timedate format.
       if (this.isDateField(fieldKey)) {
-        return html`<temba-date value=${raw} display="duration"></temba-date>`;
+        return html`<temba-date value=${raw} display="timedate"></temba-date>`;
       }
       const value = String(raw);
       return html`<span title=${value}>${value}</span>`;
@@ -201,19 +226,26 @@ export class ContactList extends ContentList<Contact> {
     switch (column.key) {
       case 'name':
         return html`<span class="contact-name" title=${item.name || ''}
-          >${item.name || '—'}</span
+          >${item.name || EMPTY}</span
         >`;
       case 'urn':
         return html`<span class="contact-urn"
-          >${this.primaryUrn(item) || ''}</span
+          >${this.primaryUrn(item) || EMPTY}</span
         >`;
       case 'last_seen_on':
         return item.last_seen_on
           ? html`<temba-date
               value=${item.last_seen_on}
-              display="duration"
+              display="timedate"
             ></temba-date>`
-          : '';
+          : EMPTY;
+      case 'created_on':
+        return item.created_on
+          ? html`<temba-date
+              value=${item.created_on}
+              display="timedate"
+            ></temba-date>`
+          : EMPTY;
       default:
         return super.renderCell(item, column);
     }
@@ -229,6 +261,24 @@ export class ContactList extends ContentList<Contact> {
     return type === 'datetime' || type === 'date';
   }
 
+  /** True when a featured field stores a location value (state /
+   * district / ward) — those are serialized as a full hierarchy path
+   * and we render only the leaf. */
+  private isLocationField(fieldKey: string): boolean {
+    const field = (this.featuredFields || []).find(
+      (f: any) => f.key === fieldKey
+    );
+    const type = field?.value_type;
+    return type === 'state' || type === 'district' || type === 'ward';
+  }
+
+  /** The last segment of a location hierarchy path, e.g.
+   * "Nigeria > Yobe > Nguru > Dabule" → "Dabule". */
+  private locationLeaf(path: string): string {
+    const parts = path.split('>');
+    return parts[parts.length - 1].trim();
+  }
+
   private primaryUrn(item: Contact): string {
     const i = item as any;
     if (i.urn) return i.urn;