@nyaruka/temba-components 0.160.1 → 0.162.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.160.1",
+  "version": "0.162.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -39,6 +39,7 @@
     "@jsplumb/browser-ui": "^6.2.10",
     "@lit/localize": "^0.12.2",
     "@open-wc/lit-helpers": "^0.7.0",
+    "centrifuge": "^5.7.0",
     "chart.js": "^4.5.1",
     "chartjs-adapter-luxon": "^1.3.1",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -68,6 +69,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
     "@types/leaflet": "1.4.4",
+    "@types/mocha": "^10.0.0",
     "@types/node": "22.13.0",
     "@types/remarkable": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
@@ -107,7 +109,6 @@
     "sinon": "^21.0.0",
     "svgstore": "^3.0.1",
     "tslib": "2.8.1",
-    "@types/mocha": "^10.0.0",
     "typescript": "5.9.3",
     "yargs": "^17.7.2"
   },

package/src/display/Chat.ts

@@ -838,6 +838,10 @@ export class Chat extends RapidElement {
   private msgMap = new Map<string, ContactEvent>();
   private metadataCache = new Map<string, ContactEvent>();
 
+  // bumped on reset so deferred addMessages work from before a reset is
+  // discarded rather than re-merged into the fresh view
+  private resetGeneration = 0;
+
   public firstUpdated(
     changed: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -858,10 +862,16 @@ export class Chat extends RapidElement {
       startTime = new Date();
     }
 
+    const generation = this.resetGeneration;
     const elapsed = new Date().getTime() - startTime.getTime();
     window.setTimeout(
       () => {
         this.fetching = false;
+
+        // the chat was reset while we were waiting, our messages are stale
+        if (generation !== this.resetGeneration) {
+          return;
+        }
         // first add messages to the map
         const newMessages = [];
         for (const m of messages) {
@@ -905,6 +915,10 @@ export class Chat extends RapidElement {
         }
 
         window.setTimeout(() => {
+          if (generation !== this.resetGeneration) {
+            return;
+          }
+
           // when appending (new messages at bottom), adjust scroll to maintain visible content
           // with column-reverse, new content at bottom increases scrollHeight
           if (append && (isScrolledAway || maintainScroll)) {
@@ -1486,7 +1500,9 @@ export class Chat extends RapidElement {
   }
 
   public reset() {
+    this.resetGeneration++;
     this.msgMap.clear();
+    this.metadataCache.clear();
     this.messageGroups = [];
     this.hideBottomScroll = true;
     this.hideTopScroll = true;

package/src/display/TembaUser.ts

@@ -116,6 +116,13 @@ export class TembaUser extends RapidElement {
     if (changed.has('avatar')) {
       if (this.avatar) {
         this.bgimage = `url('${this.avatar}') center / contain no-repeat`;
+      } else {
+        // clearing the avatar must also clear the image, otherwise a reused
+        // element keeps showing the previous user's avatar - fall back to the
+        // system default or the initials/contact-icon branch
+        this.bgimage = this.system
+          ? `url('${DEFAULT_AVATAR}') center / contain no-repeat`
+          : null;
       }
     }
   }

package/src/flow/nodes/split_by_webhook.ts

@@ -200,7 +200,10 @@ export const split_by_webhook: NodeConfig = {
         callWebhookAction?.headers ||
         getDefaultHeadersRecord(callWebhookAction?.method || 'GET'),
       body: callWebhookAction?.body || '',
-      result_name: node.router?.result_name || ''
+      // Legacy webhooks store result_name on the action; modern ones store it
+      // on the router. Prefer the action so legacy nodes round-trip correctly.
+      result_name:
+        callWebhookAction?.result_name || node.router?.result_name || ''
     };
   },
   fromFormData: (formData: FormData, originalNode: Node): Node => {
@@ -213,9 +216,17 @@ export const split_by_webhook: NodeConfig = {
     // Find existing call_webhook action to preserve its UUID
     const existingCallWebhookAction = originalNode.actions?.find(
       (action) => action.type === 'call_webhook'
-    );
+    ) as CallWebhook | undefined;
     const callWebhookUuid = existingCallWebhookAction?.uuid || generateUUID();
 
+    // Legacy webhooks keep the result_name on the action rather than the
+    // router. Detect them by the presence of result_name on the existing
+    // action so they continue to round-trip in their original format instead
+    // of being silently migrated (which would change how results are
+    // referenced downstream of the flow).
+    const isLegacyResultName = !!existingCallWebhookAction?.result_name;
+    const trimmedResultName = formData.result_name?.trim() || '';
+
     // Create call_webhook action
     const callWebhookAction: CallWebhook = {
       type: 'call_webhook',
@@ -226,6 +237,11 @@ export const split_by_webhook: NodeConfig = {
       body: formData.body || ''
     };
 
+    // Preserve the legacy placement: result_name stays on the action.
+    if (isLegacyResultName && trimmedResultName !== '') {
+      callWebhookAction.result_name = trimmedResultName;
+    }
+
     // Create categories and exits for Success and Failure
     const existingCategories = originalNode.router?.categories || [];
     const existingExits = originalNode.exits || [];
@@ -247,9 +263,11 @@ export const split_by_webhook: NodeConfig = {
       ...router
     };
 
-    // Only set result_name if provided
-    if (formData.result_name && formData.result_name.trim() !== '') {
-      finalRouter.result_name = formData.result_name.trim();
+    // Modern webhooks store result_name on the router. For legacy webhooks the
+    // result_name lives on the action (set above), so we leave it off the
+    // router to avoid storing it in both places.
+    if (!isLegacyResultName && trimmedResultName !== '') {
+      finalRouter.result_name = trimmedResultName;
     }
 
     // Return the complete node

package/src/list/FlowList.ts

@@ -1,7 +1,7 @@
 import { css, html, TemplateResult } from 'lit';
 import { ContentList, ContentListColumn } from './ContentList';
 import { Icon } from '../Icons';
-import { Flow, ObjectReference } from '../interfaces';
+import { CustomEventType, Flow, ObjectReference } from '../interfaces';
 
 /**
  * Flow CRUDL list — drop-in replacement for the rapidpro
@@ -89,27 +89,28 @@ export class FlowList extends ContentList<Flow> {
         key: 'name',
         label: 'Name',
         sortable: true,
-        width: '280px',
+        minWidth: '160px',
+        maxWidth: '280px',
         pinned: true
       },
       {
         key: 'runs',
         label: 'Runs',
         sortable: true,
-        width: '90px',
+        minWidth: '64px',
         align: 'right'
       },
       {
         key: 'ongoing',
         label: 'Ongoing',
         sortable: true,
-        width: '90px',
+        minWidth: '64px',
         align: 'right'
       },
       {
         key: 'completion',
         label: 'Completion',
-        width: '130px',
+        minWidth: '110px',
         align: 'right'
       },
       { key: 'activity', label: 'Activity', width: '120px', align: 'right' }
@@ -146,6 +147,25 @@ export class FlowList extends ContentList<Flow> {
     return item?.uuid ? `/flow/editor/${item.uuid}/` : null;
   }
 
+  /** Clicking a label chip opens that label's filtered flow list rather
+   * than falling through to the row click (which opens the flow editor). */
+  private handleLabelClick(label: ObjectReference, event: MouseEvent): void {
+    // Stop the click from bubbling to the row's navigation handler.
+    event.stopPropagation();
+    if (!label?.uuid) return;
+    const href = `/flow/filter/${label.uuid}/`;
+    // Guard the JSON-driven href against open-redirect, same as the
+    // row-click path in ContentList.handleRowClick.
+    if (!this.isSafeHref(href)) return;
+    // Meta/ctrl-click opens a new tab, matching ordinary links and the
+    // row-click behavior.
+    if (event.metaKey || event.ctrlKey) {
+      window.open(href, '_blank');
+      return;
+    }
+    this.fireCustomEvent(CustomEventType.Redirected, { url: href });
+  }
+
   protected renderCell(
     item: Flow,
     column: ContentListColumn
@@ -166,7 +186,11 @@ export class FlowList extends ContentList<Flow> {
             ? html`<span class="flow-labels">
                 ${labels.map(
                   (l: ObjectReference) =>
-                    html`<temba-label type="label" icon=${Icon.label}
+                    html`<temba-label
+                      type="label"
+                      icon=${Icon.label}
+                      clickable
+                      @click=${(e: MouseEvent) => this.handleLabelClick(l, e)}
                       >${l.name}</temba-label
                     >`
                 )}

package/src/live/ContactChat.ts

@@ -36,14 +36,7 @@ import {
   renderTicketAction,
   renderTicketAssigneeChanged
 } from '../events/eventRenderers';
-
-/*
-export const SCROLL_THRESHOLD = 100;
-export const SIMULATED_WEB_SLOWNESS = 0;
-export const MAX_CHAT_REFRESH = 10000;
-export const MIN_CHAT_REFRESH = 500;
-export const BODY_SNIPPET_LENGTH = 250;
-*/
+import { subscribeToSocket, SocketSubscription } from './SocketService';
 
 // re-export for backwards compatibility
 export { renderTicketAction, renderTicketAssigneeChanged };
@@ -527,11 +520,11 @@ export class ContactChat extends ContactStoreElement {
 
   ticket = null;
   beforeUUID: string = null; // for scrolling back through history
-  afterUUID: string = null; // for polling new messages
-  refreshId = null;
-  polling = false;
-  pollingInterval = 2000; // start at 2 seconds
-  lastFetchTime: number = null;
+  afterUUID: string = null; // newest event seen, for catch-up fetches
+
+  // live socket subscriptions by channel for the current contact (and ticket)
+  private subscriptions = new Map<string, SocketSubscription>();
+  private fetchingMissed = false;
 
   constructor() {
     super();
@@ -562,28 +555,22 @@ export class ContactChat extends ContactStoreElement {
   public connectedCallback() {
     super.connectedCallback();
     this.chat = this.shadowRoot.querySelector('temba-chat');
+    this.updateSubscriptions();
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    if (this.refreshId) {
-      clearInterval(this.refreshId);
-    }
+    this.unsubscribeAll();
   }
 
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
-    // if we don't have an endpoint infer one
     if (
-      changedProperties.has('data') ||
-      changedProperties.has('currentContact')
+      changedProperties.has('currentContact') ||
+      changedProperties.has('currentTicket')
     ) {
-      // unschedule any previous refreshes
-      if (this.refreshId) {
-        clearTimeout(this.refreshId);
-        this.refreshId = null;
-      }
+      this.updateSubscriptions();
     }
 
     if (changedProperties.has('currentContact') && this.currentContact) {
@@ -594,12 +581,74 @@ export class ContactChat extends ContactStoreElement {
       ) {
         this.reset();
       } else {
-        setTimeout(() => this.checkForNewMessages(), 500);
+        this.fetchMissedEvents();
       }
       this.fetchPreviousMessages();
     }
   }
 
+  private unsubscribeAll() {
+    this.subscriptions.forEach((sub) => sub.unsubscribe());
+    this.subscriptions.clear();
+  }
+
+  /**
+   * Keeps our socket subscriptions in sync with the current contact and
+   * ticket. New events arrive as they happen on "history:<contact-uuid>";
+   * ticket detail events (notes, assignment, topic) only arrive on
+   * "history:<contact-uuid>:<ticket-uuid>" so we subscribe to both when
+   * viewing a ticket. Only the channels that actually changed are touched,
+   * so switching tickets on the same contact leaves the contact channel
+   * continuously subscribed with no gap in delivery.
+   */
+  private updateSubscriptions() {
+    const channels = new Set<string>();
+    if (this.isConnected && this.currentContact) {
+      channels.add(`history:${this.currentContact.uuid}`);
+      if (this.currentTicket) {
+        channels.add(
+          `history:${this.currentContact.uuid}:${this.currentTicket.uuid}`
+        );
+      }
+    }
+
+    // drop subscriptions we no longer need
+    this.subscriptions.forEach((sub, channel) => {
+      if (!channels.has(channel)) {
+        sub.unsubscribe();
+        this.subscriptions.delete(channel);
+      }
+    });
+
+    // add any new ones
+    channels.forEach((channel) => {
+      if (!this.subscriptions.has(channel)) {
+        this.subscriptions.set(
+          channel,
+          subscribeToSocket(
+            channel,
+            (data: any) => this.handleSocketEvent(data),
+            // on every (re)subscribe fetch anything we might have missed
+            () => this.fetchMissedEvents()
+          )
+        );
+      }
+    });
+  }
+
+  private handleSocketEvent(event: any) {
+    // while searching we're viewing an arbitrary point in history, new
+    // events will be picked up by the refetch when search closes
+    if (!this.chat || this.searchMode || !this.currentContact) {
+      return;
+    }
+
+    const messages = this.createMessages({ events: [event], next: null });
+    if (messages.length > 0) {
+      this.chat.addMessages(messages, null, true);
+    }
+  }
+
   private reset() {
     if (this.chat) {
       this.chat.reset();
@@ -607,10 +656,7 @@ export class ContactChat extends ContactStoreElement {
     this.ticket = null;
     this.beforeUUID = null;
     this.afterUUID = null;
-    this.refreshId = null;
-    this.polling = false;
-    this.pollingInterval = 2000;
-    this.lastFetchTime = null;
+    this.fetchingMissed = false;
 
     const compose = this.shadowRoot.querySelector('temba-compose') as Compose;
     if (compose) {
@@ -628,11 +674,6 @@ export class ContactChat extends ContactStoreElement {
       this.searchIndex = -1;
       this.searchLoading = false;
       this.searchNoResults = false;
-      // stop polling while searching
-      if (this.refreshId) {
-        clearTimeout(this.refreshId);
-        this.refreshId = null;
-      }
       window.setTimeout(() => {
         const input = this.shadowRoot.querySelector('.search-input') as any;
         if (input) {
@@ -953,10 +994,8 @@ export class ContactChat extends ContactStoreElement {
         if (response.status < 400) {
           const event = response.json.event;
           event.created_on = new Date(event.created_on);
+          this.resolveUserAvatar(event);
           this.chat.addMessages([event], null, true);
-          // reset polling interval to 2 seconds after sending a message
-          this.pollingInterval = 2000;
-          this.checkForNewMessages();
           composeEle.reset();
           this.fireCustomEvent(CustomEventType.MessageSent, {
             msg: payload,
@@ -978,25 +1017,6 @@ export class ContactChat extends ContactStoreElement {
     return null;
   }
 
-  private scheduleRefresh(hasNewEvents = false) {
-    if (this.refreshId) {
-      clearTimeout(this.refreshId);
-      this.refreshId = null;
-    }
-
-    // reset to 2 seconds if we received new events
-    if (hasNewEvents) {
-      this.pollingInterval = 2000;
-    } else {
-      // increase interval by 1 second up to max of 15 seconds
-      this.pollingInterval = Math.min(this.pollingInterval + 1000, 15000);
-    }
-
-    this.refreshId = setTimeout(() => {
-      this.checkForNewMessages();
-    }, this.pollingInterval);
-  }
-
   public prerender(event: ContactEvent) {
     // use the unified renderEvent function with isSimulation = false
     const rendered = renderEvent(event, false);
@@ -1009,10 +1029,27 @@ export class ContactChat extends ContactStoreElement {
     }
   }
 
+  /**
+   * Keeps the store's avatar cache fresh from server-hydrated user refs and
+   * fills in refs that arrive without one - events published over sockets
+   * carry only a user's uuid and name.
+   */
+  private resolveUserAvatar(event: any) {
+    const user = event._user;
+    if (user && user.uuid && this.store) {
+      if (user.avatar) {
+        this.store.setUserAvatar(user.uuid, user.avatar);
+      } else {
+        user.avatar = this.store.getUserAvatar(user.uuid);
+      }
+    }
+  }
+
   private createMessages(page: ContactHistoryPage): ContactEvent[] {
     if (page.events) {
       const messages: ContactEvent[] = [];
       page.events.forEach((event) => {
+        this.resolveUserAvatar(event);
         // track the UUID of the newest event for polling
         if (
           !this.afterUUID ||
@@ -1047,40 +1084,48 @@ export class ContactChat extends ContactStoreElement {
     return [];
   }
 
-  private checkForNewMessages() {
+  /**
+   * Fetches any events newer than the last one we've seen. New events
+   * normally arrive over the socket, so this is only needed to cover gaps -
+   * events published between our initial history fetch and the subscription
+   * becoming active, or while a dropped connection was reconnecting.
+   */
+  private fetchMissedEvents() {
     // we are already working on it or in search mode
-    if (this.polling || this.searchMode) {
+    if (this.fetchingMissed || this.searchMode) {
       return;
     }
 
     const chat = this.chat;
     if (this.currentContact && this.afterUUID) {
-      this.polling = true;
-      this.lastFetchTime = Date.now();
+      this.fetchingMissed = true;
       const endpoint = this.getEndpoint();
       if (!endpoint) {
+        this.fetchingMissed = false;
         return;
       }
 
       const fetchContact = this.currentContact.uuid;
+      const fetchTicket = this.currentTicket?.uuid;
 
-      fetchContactHistory(
-        endpoint,
-        this.currentTicket?.uuid,
-        null,
-        this.afterUUID
-      ).then((page: ContactHistoryPage) => {
-        const messages = this.createMessages(page);
-        messages.reverse();
-        if (fetchContact === this.currentContact.uuid) {
-          const hasNewEvents = messages.length > 0;
+      fetchContactHistory(endpoint, fetchTicket, null, this.afterUUID).then(
+        (page: ContactHistoryPage) => {
+          this.fetchingMissed = false;
+
+          // things may have changed while we were fetching
+          if (
+            this.searchMode ||
+            fetchContact !== this.currentContact?.uuid ||
+            fetchTicket !== this.currentTicket?.uuid
+          ) {
+            return;
+          }
+
+          const messages = this.createMessages(page);
+          messages.reverse();
           chat.addMessages(messages, null, true);
-          this.polling = false;
-          this.scheduleRefresh(hasNewEvents);
-        } else {
-          this.polling = false;
         }
-      });
+      );
     }
   }
 
@@ -1130,9 +1175,6 @@ export class ContactChat extends ContactStoreElement {
         }
 
         chat.addMessages(messages);
-        if (!this.searchMode) {
-          this.scheduleRefresh();
-        }
       });
     }
   }