@nyaruka/temba-components 0.159.2 → 0.159.4

package/src/list/MsgList.ts

@@ -8,7 +8,7 @@ import { Msg } from '../interfaces';
  * `msgs/msg_list.html` table. Reverse-chronological; the message
  * cell carries the body text with its attachment thumbnails right
  * after it and the flow / label pills pushed to the trailing edge,
- * with a duration timestamp closing the row.
+ * with a timedate timestamp closing the row.
  */
 export class MsgList extends ContentList<Msg> {
   static get styles() {
@@ -100,11 +100,13 @@ export class MsgList extends ContentList<Msg> {
     this.searchPlaceholder = 'Search messages';
     // Messages page 100 at a time, matching rapidpro's msg list.
     this.pageSize = 100;
-    // Fixed layout so a long message ellipsis-truncates within its
-    // column instead of stretching the table; minTableWidth lets the
-    // list scroll horizontally once the container is too narrow to
-    // keep the columns usable, rather than clipping anything.
-    this.fixedLayout = true;
+    // Auto layout so the Contact / Sent columns size to their content
+    // (no stranded width on the short Sent value), while the Message
+    // column is a `grow` column — under auto layout it claims zero
+    // intrinsic width and ellipsis-truncates against the leftover space
+    // rather than stretching the table. minTableWidth lets the list
+    // scroll horizontally once the container is too narrow to keep the
+    // columns usable, rather than clipping anything.
     this.minTableWidth = '640px';
     this.columns = [
       {
@@ -117,9 +119,7 @@ export class MsgList extends ContentList<Msg> {
       {
         key: 'created_on',
         label: 'Sent',
-        width: '120px',
-        align: 'right',
-        pinned: 'right'
+        align: 'right'
       }
     ];
     this.bulkActions = [
@@ -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
@@ -164,7 +172,7 @@ export class MsgList extends ContentList<Msg> {
     `;
   }
 
-  /** The sent cell — duration timestamp with an optional channel-log
+  /** The sent cell — timedate timestamp with an optional channel-log
    * icon to its right. The icon is rendered when the server includes
    * a logs_url on the row (permission- and retention-gated
    * server-side). stopPropagation keeps the row's contact navigation
@@ -173,7 +181,7 @@ export class MsgList extends ContentList<Msg> {
     if (!item.created_on) return '';
     return html`
       <div class="sent-cell">
-        <temba-date value=${item.created_on} display="duration"></temba-date>
+        <temba-date value=${item.created_on} display="timedate"></temba-date>
         ${item.logs_url && this.isSafeHref(item.logs_url)
           ? html`
               <a
@@ -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/ContactTimeline.ts

@@ -809,7 +809,7 @@ export class ContactTimeline extends EndpointMonitorElement {
           <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)"
+          <a class="empty-link" href="/campaign/" onclick="goto(event, this)"
             >${this.lang_campaigns_link}</a
           >
         </slot>

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/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)
     }),
     {