@nyaruka/temba-components 0.159.1 → 0.159.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.159.1",
+  "version": "0.159.3",
   "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/interfaces.ts

@@ -160,6 +160,7 @@ export interface Msg {
 export interface ObjectReference {
   uuid: string;
   name: string;
+  url?: string;
 }
 
 export interface Shortcut {

package/src/list/ContentList.ts

@@ -1524,7 +1524,16 @@ export class ContentList<T = any> extends RapidElement {
     this.fireCustomEvent(CustomEventType.RowClick, { item });
     const href = this.getRowHref(item);
     if (href && this.isSafeHref(href)) {
-      window.location.href = href;
+      // Meta/ctrl-click opens a new tab, matching ordinary links.
+      if (event.metaKey || event.ctrlKey) {
+        window.open(href, '_blank');
+        return;
+      }
+      // Fire Redirected rather than assigning window.location so the
+      // host SPA frame swaps content in place instead of doing a full
+      // page reload — the frame listens for this event on document and
+      // routes it through its in-app loader.
+      this.fireCustomEvent(CustomEventType.Redirected, { url: href });
     }
   }
 

package/src/list/MsgList.ts

@@ -134,6 +134,14 @@ export class MsgList extends ContentList<Msg> {
     ];
   }
 
+  /** Rows navigate to the message's contact. Returning the href here
+   * also marks the row `clickable`, so it carries the pointer cursor on
+   * hover. */
+  protected getRowHref(item: Msg): string | null {
+    const uuid = item.contact?.uuid;
+    return uuid ? `/contact/read/${uuid}/` : null;
+  }
+
   protected renderCell(
     item: Msg,
     column: ContentListColumn
@@ -220,20 +228,37 @@ export class MsgList extends ContentList<Msg> {
   }
 
   /** Flow + label pills for a row, pushed to the trailing edge of
-   * the message cell, or '' when the row carries none. */
+   * the message cell, or '' when the row carries none. The flow pill
+   * opens its editor and each label pill opens that label's filtered
+   * message view — matching the rapidpro msg list. `clickable` gives
+   * the hover affordance; `goto` routes the click through the SPA and
+   * stops propagation so the row's own contact navigation doesn't also
+   * fire. */
   private renderPills(item: Msg): TemplateResult | string {
     const labels = item.labels || [];
     if (!item.flow && !labels.length) return '';
     return html`
       <div class="cell-pills">
         ${item.flow
-          ? html`<temba-label type="flow" icon=${Icon.flow}
+          ? html`<temba-label
+              type="flow"
+              icon=${Icon.flow}
+              href="/flow/editor/${item.flow.uuid}/"
+              onclick="goto(event)"
+              clickable
               >${item.flow.name}</temba-label
             >`
           : null}
         ${labels.map(
           (l) => html`
-            <temba-label type="label" icon=${Icon.label}>${l.name}</temba-label>
+            <temba-label
+              type="label"
+              icon=${Icon.label}
+              href="/msg/filter/${l.uuid}/"
+              onclick="goto(event)"
+              clickable
+              >${l.name}</temba-label
+            >
           `
         )}
       </div>

package/src/live/ContactChat.ts

@@ -2,6 +2,7 @@
 import {
   css,
   html,
+  nothing,
   PropertyValueMap,
   PropertyValues,
   TemplateResult
@@ -1436,6 +1437,8 @@ export class ContactChat extends ContactStoreElement {
                 @temba-scroll-threshold-bottom=${this.fetchNewerMessages}
                 @temba-fetch-complete=${this.fetchComplete}
                 avatar=${this.avatar}
+                contactName=${this.currentContact?.name ?? nothing}
+                contactUuid=${this.currentContact?.uuid ?? nothing}
                 agent
                 avatars
                 ?hasFooter=${inFlow}

package/src/live/{ContactEvents.ts → ContactTimeline.ts}

@@ -41,7 +41,7 @@ const BROADCAST_COLOR = '#8e5ea7';
 // triggers use the same green as the flow pill
 const TRIGGER_COLOR = '#16a34a';
 
-export class ContactEvents extends EndpointMonitorElement {
+export class ContactTimeline extends EndpointMonitorElement {
   @property({ type: String })
   contact: string;
 
@@ -64,7 +64,14 @@ export class ContactEvents extends EndpointMonitorElement {
   lang_campaigns_label = 'Campaigns';
 
   @property({ type: String })
-  lang_empty = 'No events for this contact yet.';
+  lang_empty = 'No upcoming events';
+
+  @property({ type: String })
+  lang_empty_help =
+    'Events appear here when a contact joins a campaign. Scheduled flows and messages will also show up here.';
+
+  @property({ type: String })
+  lang_campaigns_link = 'View campaigns';
 
   @property({ type: String })
   lang_projected_info =
@@ -101,11 +108,44 @@ export class ContactEvents extends EndpointMonitorElement {
         display: block;
       }
 
+      /* empty state follows the list design system: centered icon, a short
+         title, muted explanatory copy, and a single call-to-action link */
       .empty {
-        padding: 4em 1em;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         text-align: center;
+        padding: 7em 1em 4em;
         color: var(--text-color);
-        opacity: 0.55;
+      }
+
+      .empty temba-icon {
+        margin-bottom: 0.75em;
+        --icon-color: var(--text-3, #7b8593);
+      }
+
+      .empty-title {
+        font-weight: 600;
+        margin-bottom: 0.4em;
+      }
+
+      .empty-help {
+        font-size: 0.875em;
+        line-height: 1.5;
+        max-width: 22em;
+        margin-bottom: 1em;
+        color: var(--text-3, #7b8593);
+      }
+
+      .empty-link {
+        font-size: 0.875em;
+        font-weight: 500;
+        color: var(--color-link-primary);
+        text-decoration: none;
+      }
+
+      .empty-link:hover {
+        text-decoration: underline;
       }
 
       /* row of campaign pills the contact is currently a member of */
@@ -128,7 +168,8 @@ export class ContactEvents extends EndpointMonitorElement {
       }
 
       /* each pill is colored with its campaign's hue - background, border
-         and text all derived from --pill-hue. read-only badges, not links */
+         and text all derived from --pill-hue. clickable links to the
+         campaign's read page */
       .campaign-pill {
         display: inline-flex;
         align-items: center;
@@ -146,6 +187,21 @@ export class ContactEvents extends EndpointMonitorElement {
         border: 1px solid
           color-mix(in srgb, var(--pill-hue) 25%, var(--color-widget-bg, #fff));
         color: var(--pill-hue);
+        cursor: pointer;
+        transition: background 100ms ease-in-out;
+      }
+
+      .campaign-pill:hover {
+        background: color-mix(
+          in srgb,
+          var(--pill-hue) 22%,
+          var(--color-widget-bg, #fff)
+        );
+      }
+
+      .campaign-pill:focus-visible {
+        outline: 2px solid var(--pill-hue);
+        outline-offset: 1px;
       }
 
       /* status-badge dot leading each campaign pill, in the same hue */
@@ -424,7 +480,7 @@ export class ContactEvents extends EndpointMonitorElement {
     const requestedContact = this.contact;
     try {
       const response = await this.store.getUrl(
-        `/contact/events/${encodeURIComponent(this.contact)}/`,
+        `/contact/timeline/${encodeURIComponent(this.contact)}/`,
         { force: true }
       );
       if (this.contact !== requestedContact) {
@@ -570,7 +626,7 @@ export class ContactEvents extends EndpointMonitorElement {
     // capture the contact at request time so a paged response that returns
     // after the user has switched contacts can't append onto the new timeline
     const requestedContact = this.contact;
-    const url = `/contact/events/${encodeURIComponent(
+    const url = `/contact/timeline/${encodeURIComponent(
       this.contact
     )}/?before=${encodeURIComponent(this.nextBefore)}`;
 
@@ -609,7 +665,7 @@ export class ContactEvents extends EndpointMonitorElement {
 
     this.loadingMoreFuture = true;
     const requestedContact = this.contact;
-    const url = `/contact/events/${encodeURIComponent(
+    const url = `/contact/timeline/${encodeURIComponent(
       this.contact
     )}/?after=${encodeURIComponent(this.nextAfter)}`;
 
@@ -710,6 +766,13 @@ export class ContactEvents extends EndpointMonitorElement {
             html`<div
               class="campaign-pill"
               style="--pill-hue:${this.getCampaignColor(campaign.uuid)}"
+              role="button"
+              tabindex="0"
+              @click=${(e: Event) => this.handlePillClicked(e, campaign)}
+              @keydown=${(e: KeyboardEvent) =>
+                this.handleActivationKey(e, () =>
+                  this.handlePillClicked(e, campaign)
+                )}
             >
               <span class="campaign-dot"></span>${campaign.name}
             </div>`
@@ -742,7 +805,14 @@ export class ContactEvents extends EndpointMonitorElement {
       pastDescending.length === 0
     ) {
       return html`<div class="empty">
-        <slot name="empty">${this.lang_empty}</slot>
+        <slot name="empty">
+          <temba-icon name=${Icon.schedule} size="2"></temba-icon>
+          <div class="empty-title">${this.lang_empty}</div>
+          <div class="empty-help">${this.lang_empty_help}</div>
+          <a class="empty-link" href="/campaign/" onclick="goto(event, this)"
+            >${this.lang_campaigns_link}</a
+          >
+        </slot>
       </div>`;
     }
 

package/src/store/Store.ts

@@ -41,6 +41,25 @@ export const getStore = () => {
   return document.querySelector('temba-store') as Store;
 };
 
+declare const __TEMBA_DEV_SERVER__: boolean;
+
+/**
+ * True only when running against the temba-components dev server, which
+ * replaces `__TEMBA_DEV_SERVER__` with `true` at serve time. The production
+ * rollup build and the test runner replace it with `false`; for any other
+ * consumer the token is undefined and the try/catch falls back to `false`.
+ * We deliberately do not key off `process.env.NODE_ENV` — the published IIFE
+ * bundle (rollup.components.mjs) hardcodes that to 'development', so it can't
+ * distinguish the dev server from a production consumer.
+ */
+const isDevServer = (): boolean => {
+  try {
+    return __TEMBA_DEV_SERVER__ === true;
+  } catch {
+    return false;
+  }
+};
+
 export class Store extends RapidElement {
   public static get styles() {
     return css`
@@ -172,7 +191,7 @@ export class Store extends RapidElement {
     const fetches = [];
     if (this.completionEndpoint) {
       fetches.push(
-        getUrl(this.completionEndpoint).then((response) => {
+        getUrl(this.getCompletionEndpoint()).then((response) => {
           this.schema = response.json['context'] as CompletionSchema;
           this.fnOptions = response.json['functions'] as CompletionOption[];
         })
@@ -338,6 +357,27 @@ export class Store extends RapidElement {
     }
   }
 
+  /**
+   * Resolves the completion endpoint to fetch. When running against the
+   * temba-components dev server we override the configured endpoint so the
+   * editor serves our own editor.json (static/mr/docs/en-us/editor.json)
+   * rather than the host application's mailroom completions. The dev-server
+   * origin is derived from import.meta.url so this works even when the
+   * components are loaded cross-origin (e.g. rapidpro on :8001 with the
+   * components dev server on :3011).
+   */
+  private getCompletionEndpoint(): string {
+    if (isDevServer()) {
+      try {
+        const origin = new URL(import.meta.url).origin;
+        return `${origin}/api/v2/completion.json`;
+      } catch {
+        // import.meta.url unavailable; fall back to the configured endpoint
+      }
+    }
+    return this.completionEndpoint;
+  }
+
   public getCompletionSchema(): CompletionSchema {
     return this.schema;
   }

package/temba-modules.ts

@@ -31,7 +31,7 @@ import { ContactFields } from './src/live/ContactFields';
 import { ContactFieldEditor } from './src/live/ContactFieldEditor';
 
 import { ContactBadges } from './src/live/ContactBadges';
-import { ContactEvents } from './src/live/ContactEvents';
+import { ContactTimeline } from './src/live/ContactTimeline';
 import { TembaSlider } from './src/form/TembaSlider';
 import { RunList } from './src/list/RunList';
 import { FlowStoreElement } from './src/store/FlowStoreElement';
@@ -149,7 +149,7 @@ addCustomElement('temba-dropdown', Dropdown);
 addCustomElement('temba-tabs', TabPane);
 addCustomElement('temba-tab', Tab);
 addCustomElement('temba-contact-badges', ContactBadges);
-addCustomElement('temba-contact-events', ContactEvents);
+addCustomElement('temba-contact-timeline', ContactTimeline);
 addCustomElement('temba-slider', TembaSlider);
 addCustomElement('temba-content-menu', ContentMenu);
 addCustomElement('temba-compose', Compose);

package/web-dev-server.config.mjs

@@ -295,8 +295,18 @@ export default {
     // Permissive CORS so this dev server can be loaded as a cross-origin
     // module source by a rapidpro instance running on a different localhost
     // port (e.g. Nautilus/run-pair.sh launching rapidpro:8001 + components:3011).
+    // The Store fetches completion.json with custom headers (X-CSRFToken,
+    // X-Temba-Workspace, X-Requested-With), which makes it a non-simple
+    // cross-origin request, so we must also answer the preflight (OPTIONS)
+    // with the allowed methods/headers or the browser blocks it.
     (ctx, next) => {
       ctx.set('Access-Control-Allow-Origin', '*');
+      ctx.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+      ctx.set('Access-Control-Allow-Headers', '*');
+      if (ctx.method === 'OPTIONS') {
+        ctx.status = 204;
+        return;
+      }
       return next();
     },
   ],
@@ -304,6 +314,7 @@ export default {
     replacePlugin({
       preventAssignment: true,
       'process.env.NODE_ENV': JSON.stringify('development'),
+      '__TEMBA_DEV_SERVER__': JSON.stringify(true),
       '__TEMBA_COMPONENTS_VERSION__': JSON.stringify(TEMBA_COMPONENTS_VERSION),
       'process.env.MINIO_ENDPOINT': JSON.stringify('http://minio:9000'),
       'process.env.MINIO_PUBLIC_ENDPOINT': JSON.stringify('http://localhost:9000'),

package/web-test-runner.config.mjs

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