@nyaruka/temba-components 0.165.0 → 0.167.0

package/src/list/TembaMenu.ts

@@ -787,17 +787,40 @@ export class TembaMenu extends ResizeElement {
     }
 
     this.loadItems(item);
-
-    // refresh any embedded lists
-    this.shadowRoot
-      .querySelectorAll('temba-notification-list')
-      .forEach((ele: NotificationList) => {
-        ele.refresh();
-      });
   }
 
   public refresh = debounce(this.doRefresh, 200);
 
+  /**
+   * Opening a popup with notifications in it marks them all seen - the badge
+   * clears now, the items unbold next open. No fetching; the socket keeps
+   * the list itself current.
+   */
+  private handlePopupOpened(event: CustomEvent, menuItem: MenuItem) {
+    const dropdown = event.currentTarget as HTMLElement;
+    const lists = dropdown.querySelectorAll('temba-notification-list');
+    if (lists.length === 0) {
+      return;
+    }
+
+    // clear the badge optimistically, restoring it if marking seen fails so
+    // the unseen indicator isn't silently lost
+    const bubble = menuItem.bubble;
+    if (bubble) {
+      menuItem.bubble = null;
+      this.requestUpdate('root');
+    }
+
+    lists.forEach((list: NotificationList) => {
+      list.markSeen().then((marked) => {
+        if (!marked && bubble && !menuItem.bubble) {
+          menuItem.bubble = bubble;
+          this.requestUpdate('root');
+        }
+      });
+    });
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private loadItems(item: MenuItem, event: MouseEvent = null) {
     if (item && item.endpoint) {
@@ -1111,6 +1134,13 @@ export class TembaMenu extends ResizeElement {
     if (menuItem.type === 'temba-notification-list') {
       return html`<temba-notification-list
         endpoint=${menuItem.href}
+        @temba-notification=${() => {
+          // light the unseen badge on our popup item as they arrive
+          if (parent && parent.bubble !== 'tomato') {
+            parent.bubble = 'tomato';
+            this.requestUpdate('root');
+          }
+        }}
       ></temba-notification-list>`;
     }
 
@@ -1254,7 +1284,11 @@ export class TembaMenu extends ResizeElement {
 
     if (menuItem.popup) {
       return html`
-        <temba-dropdown id="dd-${menuItem.id}">
+        <temba-dropdown
+          id="dd-${menuItem.id}"
+          @temba-opened=${(event: CustomEvent) =>
+            this.handlePopupOpened(event, menuItem)}
+        >
           <div slot="toggle">${item}</div>
 
           <div slot="dropdown">

package/src/live/ContactChat.ts

@@ -27,7 +27,13 @@ import {
 import { ContactStoreElement } from './ContactStoreElement';
 import { Compose, ComposeValue } from '../form/Compose';
 import { ContactHistoryPage } from '../events';
-import { Chat, MessageType, ContactEvent } from '../display/Chat';
+import {
+  Chat,
+  MessageType,
+  ContactEvent,
+  MsgEvent,
+  TypingEvent
+} from '../display/Chat';
 import { DEFAULT_AVATAR } from '../webchat/assets';
 import { UserSelect } from '../form/select/UserSelect';
 import { Select } from '../form/select/Select';
@@ -36,7 +42,12 @@ import {
   renderTicketAction,
   renderTicketAssigneeChanged
 } from '../events/eventRenderers';
-import { subscribeToSocket, SocketSubscription } from './SocketService';
+import { publishToSocket } from './SocketService';
+import { subscribeToContactHistory, RealtimeSubscription } from './Realtime';
+
+// how often we re-publish typing_started while composing - just inside the
+// tightest platform sustain interval (Telegram's indicator lapses after 5s)
+const TYPING_PULSE_INTERVAL = 4000;
 
 // re-export for backwards compatibility
 export { renderTicketAction, renderTicketAssigneeChanged };
@@ -456,6 +467,11 @@ export class ContactChat extends ContactStoreElement {
   @property({ type: String })
   agent = '';
 
+  // uuid of the logged-in user, used to filter out our own typing events
+  // (publications are echoed to all subscribers, including the publisher)
+  @property({ type: String, attribute: 'user' })
+  userUuid = '';
+
   @property({ type: Boolean })
   blockFetching = false;
 
@@ -522,10 +538,22 @@ export class ContactChat extends ContactStoreElement {
   beforeUUID: string = null; // for scrolling back through history
   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>();
+  // live history subscriptions by topic for the current contact (and ticket)
+  private subscriptions = new Map<string, RealtimeSubscription>();
   private fetchingMissed = false;
 
+  // the contact's most recent incoming message, tracked for the external id
+  // that typing publications carry (WhatsApp expresses typing as an operation
+  // on the contact's last incoming message)
+  private lastIncomingMsgOn: Date = null;
+  private lastIncomingMsgExternalId: string = null;
+
+  // typing publication state - the pulse interval while the agent is
+  // composing, and whether publishing was denied for this conversation
+  private typingChannel: string = null;
+  private typingPulse: number = null;
+  private typingDisabled = false;
+
   constructor() {
     super();
   }
@@ -560,6 +588,7 @@ export class ContactChat extends ContactStoreElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    this.stopTyping();
     this.unsubscribeAll();
   }
 
@@ -602,37 +631,39 @@ export class ContactChat extends ContactStoreElement {
    * continuously subscribed with no gap in delivery.
    */
   private updateSubscriptions() {
-    const channels = new Set<string>();
+    const topics = new Map<string, { contact: string; ticket: string }>();
     if (this.isConnected && this.currentContact) {
-      channels.add(`history:${this.currentContact.uuid}`);
+      const contact = this.currentContact.uuid;
+      topics.set(contact, { contact, ticket: null });
 
       // on a contact switch the new ticket is set before the new contact has
       // finished fetching, so hold off on the ticket channel until they match
       // - a ticket paired with another contact's channel is denied server-side
-      const contactPending =
-        this.contact && this.contact !== this.currentContact.uuid;
+      const contactPending = this.contact && this.contact !== contact;
       if (this.currentTicket && !contactPending) {
-        channels.add(
-          `history:${this.currentContact.uuid}:${this.currentTicket.uuid}`
-        );
+        topics.set(`${contact}:${this.currentTicket.uuid}`, {
+          contact,
+          ticket: this.currentTicket.uuid
+        });
       }
     }
 
     // drop subscriptions we no longer need
-    this.subscriptions.forEach((sub, channel) => {
-      if (!channels.has(channel)) {
+    this.subscriptions.forEach((sub, key) => {
+      if (!topics.has(key)) {
         sub.unsubscribe();
-        this.subscriptions.delete(channel);
+        this.subscriptions.delete(key);
       }
     });
 
     // add any new ones
-    channels.forEach((channel) => {
-      if (!this.subscriptions.has(channel)) {
+    topics.forEach((topic, key) => {
+      if (!this.subscriptions.has(key)) {
         this.subscriptions.set(
-          channel,
-          subscribeToSocket(
-            channel,
+          key,
+          subscribeToContactHistory(
+            topic.contact,
+            topic.ticket,
             (data: any) => this.handleSocketEvent(data),
             // on every (re)subscribe fetch anything we might have missed
             () => this.fetchMissedEvents()
@@ -649,12 +680,126 @@ export class ContactChat extends ContactStoreElement {
       return;
     }
 
+    // typing events are ephemeral indicator state, not history
+    if (event.type === 'typing_started' || event.type === 'typing_stopped') {
+      this.handleTypingEvent(event);
+      return;
+    }
+
     const messages = this.createMessages({ events: [event], next: null });
     if (messages.length > 0) {
       this.chat.addMessages(messages, null, true);
     }
   }
 
+  private handleTypingEvent(event: TypingEvent) {
+    // our own publications are echoed back to us - ignore them
+    if (event._user && this.userUuid && event._user.uuid === this.userUuid) {
+      return;
+    }
+
+    event.created_on = new Date(event.created_on);
+    this.resolveUserAvatar(event);
+
+    if (event.type === 'typing_started') {
+      this.chat.setTyping(event);
+    } else {
+      this.chat.clearTyping(event);
+    }
+  }
+
+  /**
+   * Fired as the agent edits the compose box. Composing (any text present)
+   * keeps typing_started pulses going on the contact's history channel;
+   * emptying the box (including via a send) publishes typing_stopped.
+   */
+  private handleComposeChanged(evt: CustomEvent) {
+    // temba-compose's ContentChanged detail is its langValues map keyed by
+    // language, and it drops a language entry when that value empties. Derive
+    // composing across all languages so this doesn't hinge on a hardcoded key.
+    const composing = Object.values(evt.detail || {}).some((v: any) =>
+      v?.text?.trim()
+    );
+    if (composing) {
+      this.startTyping();
+    } else {
+      this.stopTyping();
+    }
+  }
+
+  private getTypingPayload(type: string) {
+    const payload: any = { type };
+    if (this.lastIncomingMsgExternalId) {
+      payload.msg_external_id = this.lastIncomingMsgExternalId;
+    }
+    return payload;
+  }
+
+  private startTyping() {
+    if (this.typingDisabled || this.typingPulse || !this.currentContact) {
+      return;
+    }
+
+    // publications are only allowed on the contact-level channel
+    this.typingChannel = `history:${this.currentContact.uuid}`;
+    this.sendTypingPulse();
+    this.typingPulse = window.setInterval(
+      () => this.sendTypingPulse(),
+      TYPING_PULSE_INTERVAL
+    );
+  }
+
+  private sendTypingPulse() {
+    // the interval can fire once after clearTypingPulse() nulled the channel
+    if (!this.typingChannel) {
+      return;
+    }
+    const channel = this.typingChannel;
+    publishToSocket(channel, this.getTypingPayload('typing_started')).catch(
+      (error: any) => {
+        // a temporary server error just costs us this pulse - a denial means
+        // something is genuinely wrong with this conversation, so silently
+        // stop pulsing for it. The handler runs async, so don't clobber a
+        // fresh conversation's state with an error for a stale one.
+        if (!error?.temporary && this.isCurrentTypingChannel(channel)) {
+          this.typingDisabled = true;
+          this.clearTypingPulse();
+        }
+      }
+    );
+  }
+
+  // whether the channel belongs to the contact currently being viewed
+  private isCurrentTypingChannel(channel: string) {
+    return channel === `history:${this.currentContact?.uuid}`;
+  }
+
+  private clearTypingPulse() {
+    if (this.typingPulse) {
+      window.clearInterval(this.typingPulse);
+      this.typingPulse = null;
+    }
+    this.typingChannel = null;
+  }
+
+  private stopTyping() {
+    if (!this.typingPulse) {
+      return;
+    }
+
+    const channel = this.typingChannel;
+    this.clearTypingPulse();
+    publishToSocket(channel, this.getTypingPayload('typing_stopped')).catch(
+      (error: any) => {
+        // on a contact switch this stop targets the old conversation - a
+        // denial for it must not disable typing for the new one
+        if (!error?.temporary && this.isCurrentTypingChannel(channel)) {
+          this.typingDisabled = true;
+        }
+      }
+    );
+  }
+
   private reset() {
     if (this.chat) {
       this.chat.reset();
@@ -664,6 +809,13 @@ export class ContactChat extends ContactStoreElement {
     this.afterUUID = null;
     this.fetchingMissed = false;
 
+    // let the old conversation know we stopped composing and start the new
+    // one with a clean typing slate
+    this.stopTyping();
+    this.typingDisabled = false;
+    this.lastIncomingMsgOn = null;
+    this.lastIncomingMsgExternalId = null;
+
     const compose = this.shadowRoot.querySelector('temba-compose') as Compose;
     if (compose) {
       compose.reset();
@@ -1067,6 +1219,19 @@ export class ContactChat extends ContactStoreElement {
         // convert to dates
         event.created_on = new Date(event.created_on);
 
+        // track the contact's most recent incoming message for the external
+        // id our typing publications carry
+        if (event.type === 'msg_received') {
+          if (
+            !this.lastIncomingMsgOn ||
+            event.created_on > this.lastIncomingMsgOn
+          ) {
+            this.lastIncomingMsgOn = event.created_on;
+            this.lastIncomingMsgExternalId =
+              (event as MsgEvent).msg?.external_id || null;
+          }
+        }
+
         if (
           event.type === 'msg_created' ||
           event.type === 'msg_received' ||
@@ -1286,6 +1451,7 @@ export class ContactChat extends ContactStoreElement {
           shortcuts
           min-height="75"
           @temba-submitted=${this.handleSend.bind(this)}
+          @temba-content-changed=${this.handleComposeChanged.bind(this)}
         >
         </temba-compose>
         ${this.errorMessage

package/src/live/Realtime.ts

@@ -0,0 +1,133 @@
+import { Notification } from '../interfaces';
+import {
+  PublicationHandler,
+  SocketSubscription,
+  subscribeToSocket
+} from './SocketService';
+
+/**
+ * Typed access to our realtime topics. SocketService owns the shared
+ * connection and per-channel fan-out; this module owns how topics map to
+ * channel names, including the page identity (org and user uuids) needed to
+ * address user-scoped channels.
+ *
+ * The identity arrives via temba-store (hydrated from the page template), so
+ * user-scoped subscriptions requested before the store mounts are queued and
+ * activate when the context is set. On pages with no authenticated context
+ * they simply never activate.
+ */
+
+export interface RealtimeSubscription {
+  unsubscribe(): void;
+}
+
+export interface RealtimeContext {
+  org: string;
+  user: string;
+}
+
+interface PendingSubscription {
+  resolveChannel: (ctx: RealtimeContext) => string;
+  onPublication: PublicationHandler;
+  onSubscribed?: () => void;
+  sub: SocketSubscription;
+  cancelled: boolean;
+}
+
+let context: RealtimeContext = null;
+const pending: PendingSubscription[] = [];
+
+/**
+ * Sets the page's realtime identity, flushing any subscriptions that were
+ * waiting on it. Set once per page load - an org switch is a full page
+ * load, so a real page never changes or clears its context. Passing null is
+ * a full reset for tests: it discards the context AND any still-queued
+ * subscriptions, so handles handed out before the reset never activate.
+ * Returns the previous context.
+ */
+export const setRealtimeContext = (
+  ctx: RealtimeContext | null
+): RealtimeContext | null => {
+  const previous = context;
+  context = ctx;
+  if (ctx) {
+    while (pending.length > 0) {
+      const p = pending.shift();
+      if (!p.cancelled) {
+        p.sub = subscribeToSocket(
+          p.resolveChannel(ctx),
+          p.onPublication,
+          p.onSubscribed
+        );
+      }
+    }
+  } else {
+    pending.length = 0;
+  }
+  return previous;
+};
+
+const subscribeWhenReady = (
+  resolveChannel: (ctx: RealtimeContext) => string,
+  onPublication: PublicationHandler,
+  onSubscribed?: () => void
+): RealtimeSubscription => {
+  if (context) {
+    return subscribeToSocket(
+      resolveChannel(context),
+      onPublication,
+      onSubscribed
+    );
+  }
+
+  const p: PendingSubscription = {
+    resolveChannel,
+    onPublication,
+    onSubscribed,
+    sub: null,
+    cancelled: false
+  };
+  pending.push(p);
+  return {
+    unsubscribe: () => {
+      p.cancelled = true;
+      if (p.sub) {
+        p.sub.unsubscribe();
+        p.sub = null;
+      }
+    }
+  };
+};
+
+/**
+ * The current user's notifications in the current workspace. onSubscribed
+ * fires on every (re)subscribe, including after reconnects, so subscribers
+ * can catch up on anything missed while offline.
+ */
+export const subscribeToNotifications = (
+  onNotification: (notification: Notification) => void,
+  onSubscribed?: () => void
+): RealtimeSubscription => {
+  return subscribeWhenReady(
+    (ctx) => `notifications:${ctx.org}:${ctx.user}`,
+    (data) => onNotification(data as Notification),
+    onSubscribed
+  );
+};
+
+/**
+ * A contact's history events, or a ticket's detail events when a ticket is
+ * given. Needs no page context so subscribes immediately.
+ */
+export const subscribeToContactHistory = (
+  contact: string,
+  ticket: string | null,
+  onEvent: (event: any) => void,
+  onSubscribed?: () => void
+): RealtimeSubscription => {
+  return subscribeToSocket(
+    ticket ? `history:${contact}:${ticket}` : `history:${contact}`,
+    onEvent,
+    onSubscribed
+  );
+};

package/src/live/SocketService.ts

@@ -34,6 +34,8 @@ export interface SocketProvider {
     onPublication: PublicationHandler,
     onSubscribed?: () => void
   ): SocketSubscription;
+
+  publish(channel: string, data: any): Promise<void>;
 }
 
 interface ChannelEntry {
@@ -59,6 +61,24 @@ export class SocketManager implements SocketProvider {
       });
   }
 
+  /**
+   * Publishes data on a channel. The server proxies client publications
+   * (e.g. typing events on history channels) to mailroom for authorization
+   * and fan-out; a rejection means the publication was denied.
+   */
+  public publish(channel: string, data: any): Promise<void> {
+    if (!this.socket) {
+      this.socket = this.createSocket();
+    }
+
+    // prefer the channel's live subscription when we have one
+    const entry = this.channels.get(channel);
+    const published = entry
+      ? entry.sub.publish(data)
+      : this.socket.publish(channel, data);
+    return published.then(() => undefined);
+  }
+
   public subscribe(
     channel: string,
     onPublication: PublicationHandler,
@@ -150,6 +170,10 @@ export const subscribeToSocket = (
   );
 };
 
+export const publishToSocket = (channel: string, data: any): Promise<void> => {
+  return (provider || getManager()).publish(channel, data);
+};
+
 // for tests to swap in a mock provider, returns the previous provider
 export const setSocketProvider = (newProvider: SocketProvider) => {
   const previous = provider;

package/src/store/Store.ts

@@ -22,6 +22,7 @@ import {
   DirtyTrackable
 } from '../interfaces';
 import { RapidElement } from '../RapidElement';
+import { setRealtimeContext } from '../live/Realtime';
 import { lru } from 'tiny-lru';
 import { DateTime } from 'luxon';
 import { css, html } from 'lit';
@@ -108,6 +109,14 @@ export class Store extends RapidElement {
   @property({ type: String, attribute: 'shortcuts' })
   shortcutsEndpoint: string;
 
+  // current workspace and user uuids, used to address user-scoped realtime
+  // channels - hydrated by the page template
+  @property({ type: String })
+  org: string;
+
+  @property({ type: String })
+  user: string;
+
   @property({ type: String })
   brand = '';
 
@@ -266,6 +275,9 @@ export class Store extends RapidElement {
   }
 
   public firstUpdated() {
+    if (this.org && this.user) {
+      setRealtimeContext({ org: this.org, user: this.user });
+    }
     this.reset();
   }
 

package/src/utils.ts

@@ -339,6 +339,10 @@ export const postJSON = (url: string, payload: any): Promise<WebResponse> => {
   return postUrl(url, JSON.stringify(payload), false, 'application/json');
 };
 
+export const deleteRequest = (url: string): Promise<Response> => {
+  return fetch(url, { method: 'DELETE', headers: getHeaders() });
+};
+
 export const postFormData = (
   url: string,
   formData: FormData,