@nyaruka/temba-components 0.161.0 → 0.162.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.161.0",
+  "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/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();
-        }
       });
     }
   }

package/src/live/SocketService.ts

@@ -0,0 +1,158 @@
+import { Centrifuge, Subscription, SubscriptionState } from 'centrifuge';
+
+/**
+ * Access to our realtime messaging socket (centrifugo). The server lives
+ * behind the same origin at /ws/connect and authenticates connections with
+ * the browser's session cookie (via a server-side connect proxy), so no
+ * token handling is needed here.
+ *
+ * The connection is owned by a SocketManager which is page-scoped - it hangs
+ * off `window` rather than any component, so it survives components mounting
+ * and unmounting, and vanilla js on the containing page can share the same
+ * connection:
+ *
+ *   const sub = window.sockets.subscribe('notifications:<org>:<user>', (event) => {
+ *     ...
+ *   });
+ *   sub.unsubscribe();
+ *
+ * Any number of subscribers (components or page js) can watch the same
+ * channel - the underlying centrifugo subscription is created on first use
+ * and torn down when the last subscriber leaves. The connection itself stays
+ * open for the life of the page. Each published event arrives as raw JSON.
+ */
+
+export interface SocketSubscription {
+  unsubscribe(): void;
+}
+
+export type PublicationHandler = (data: any) => void;
+
+export interface SocketProvider {
+  subscribe(
+    channel: string,
+    onPublication: PublicationHandler,
+    onSubscribed?: () => void
+  ): SocketSubscription;
+}
+
+interface ChannelEntry {
+  sub: Subscription;
+  count: number;
+}
+
+export class SocketManager implements SocketProvider {
+  private socket: Centrifuge = null;
+  private channels = new Map<string, ChannelEntry>();
+  private createSocket: () => Centrifuge;
+
+  constructor(createSocket?: () => Centrifuge) {
+    this.createSocket =
+      createSocket ||
+      (() => {
+        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+        const socket = new Centrifuge(
+          `${protocol}://${window.location.host}/ws/connect`
+        );
+        socket.connect();
+        return socket;
+      });
+  }
+
+  public subscribe(
+    channel: string,
+    onPublication: PublicationHandler,
+    onSubscribed?: () => void
+  ): SocketSubscription {
+    if (!this.socket) {
+      this.socket = this.createSocket();
+    }
+
+    let entry = this.channels.get(channel);
+    if (!entry) {
+      entry = {
+        sub:
+          this.socket.getSubscription(channel) ||
+          this.socket.newSubscription(channel),
+        count: 0
+      };
+      this.channels.set(channel, entry);
+      entry.sub.subscribe();
+    }
+    entry.count++;
+
+    const sub = entry.sub;
+    const pubHandler = (ctx: { data: any }) => onPublication(ctx.data);
+    sub.on('publication', pubHandler);
+
+    let subHandler: () => void = null;
+    if (onSubscribed) {
+      // fires on every (re)subscribe, including after reconnects, so
+      // subscribers can catch up on anything missed while offline
+      subHandler = () => onSubscribed();
+      sub.on('subscribed', subHandler);
+
+      // late joiners on an already-live channel won't see a subscribed
+      // event, so give them their initial one
+      if (sub.state === SubscriptionState.Subscribed) {
+        window.setTimeout(() => subHandler && subHandler(), 0);
+      }
+    }
+
+    let active = true;
+    return {
+      unsubscribe: () => {
+        if (!active) {
+          return;
+        }
+        active = false;
+
+        sub.off('publication', pubHandler);
+        if (subHandler) {
+          sub.off('subscribed', subHandler);
+          subHandler = null;
+        }
+
+        entry.count--;
+        if (entry.count === 0) {
+          this.channels.delete(channel);
+          sub.unsubscribe();
+          this.socket.removeSubscription(sub);
+        }
+      }
+    };
+  }
+}
+
+// the page-scoped manager, shared with vanilla js as window.sockets and
+// reused if another copy of this module already created it
+const getManager = (): SocketManager => {
+  const w = window as any;
+  if (!w.sockets) {
+    w.sockets = new SocketManager();
+  }
+  return w.sockets;
+};
+getManager();
+
+// when set, components subscribe through this instead of the page manager
+let provider: SocketProvider = null;
+
+export const subscribeToSocket = (
+  channel: string,
+  onPublication: PublicationHandler,
+  onSubscribed?: () => void
+): SocketSubscription => {
+  return (provider || getManager()).subscribe(
+    channel,
+    onPublication,
+    onSubscribed
+  );
+};
+
+// for tests to swap in a mock provider, returns the previous provider
+export const setSocketProvider = (newProvider: SocketProvider) => {
+  const previous = provider;
+  provider = newProvider;
+  return previous;
+};

package/src/locales/es.ts

@@ -12,8 +12,10 @@
       'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
 's73b4d70c02f4b4e0': `No options`,
 'sbc913d7dc0f33877': `to add`,
+'s81f17cfc89a04338': `Interrupt flow`,
 's8f02e3a18ffc083a': `Are not currently in a flow`,
 's638236250662c6b3': `Have sent a message in the last`,
 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+'sea4f08110bb8f15d': `Remove`,
     };
   

package/src/locales/fr.ts

@@ -12,8 +12,10 @@
       's73b4d70c02f4b4e0': `No options`,
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
+'s81f17cfc89a04338': `Interrupt flow`,
 's8f02e3a18ffc083a': `Are not currently in a flow`,
 's638236250662c6b3': `Have sent a message in the last`,
 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+'sea4f08110bb8f15d': `Remove`,
     };
   

package/src/locales/pt.ts

@@ -12,8 +12,10 @@
       's73b4d70c02f4b4e0': `No options`,
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
+'s81f17cfc89a04338': `Interrupt flow`,
 's8f02e3a18ffc083a': `Are not currently in a flow`,
 's638236250662c6b3': `Have sent a message in the last`,
 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+'sea4f08110bb8f15d': `Remove`,
     };
   

package/src/store/Store.ts

@@ -158,6 +158,23 @@ export class Store extends RapidElement {
   }
 
   private cache: any;
+
+  // user avatar urls by user uuid, seeded from server-hydrated user
+  // references so ones that arrive without an avatar (e.g. events published
+  // over sockets) can be filled in from users we've already seen. LRU-bounded
+  // so long-lived tabs don't accumulate every user ever seen.
+  private userAvatars = lru<string>(500);
+
+  public setUserAvatar(uuid: string, avatar: string) {
+    if (uuid && avatar) {
+      this.userAvatars.set(uuid, avatar);
+    }
+  }
+
+  public getUserAvatar(uuid: string): string {
+    return this.userAvatars.get(uuid);
+  }
+
   public getLocale() {
     return this.locale[0];
   }
@@ -561,6 +578,7 @@ export class Store extends RapidElement {
             const results = response.json.results;
             if (results && results.length === 1) {
               const user = results[0];
+              this.setUserAvatar(user.uuid, user.avatar);
 
               items.forEach((item) => {
                 // replace each key with a matching user

package/xliff/es.xlf

@@ -21,6 +21,12 @@
 <trans-unit id="sbc913d7dc0f33877">
   <source>to add</source>
 </trans-unit>
+<trans-unit id="sea4f08110bb8f15d">
+  <source>Remove</source>
+</trans-unit>
+<trans-unit id="s81f17cfc89a04338">
+  <source>Interrupt flow</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/fr.xlf

@@ -20,6 +20,12 @@
 <trans-unit id="sbc913d7dc0f33877">
   <source>to add</source>
 </trans-unit>
+<trans-unit id="sea4f08110bb8f15d">
+  <source>Remove</source>
+</trans-unit>
+<trans-unit id="s81f17cfc89a04338">
+  <source>Interrupt flow</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/pt.xlf

@@ -20,6 +20,12 @@
 <trans-unit id="sbc913d7dc0f33877">
   <source>to add</source>
 </trans-unit>
+<trans-unit id="sea4f08110bb8f15d">
+  <source>Remove</source>
+</trans-unit>
+<trans-unit id="s81f17cfc89a04338">
+  <source>Interrupt flow</source>
+</trans-unit>
 </body>
 </file>
 </xliff>