@nyaruka/temba-components 0.164.0 → 0.166.0

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,31 +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}`);
-      if (this.currentTicket) {
-        channels.add(
-          `history:${this.currentContact.uuid}:${this.currentTicket.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 !== contact;
+      if (this.currentTicket && !contactPending) {
+        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()
@@ -643,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();
@@ -658,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();
@@ -1061,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' ||
@@ -1280,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/ContactDetails.ts

@@ -38,7 +38,7 @@ export class ContactDetails extends ContactStoreElement {
 
       .row .label {
         color: var(--text-2);
-        font-size: 12px;
+        font-size: 11px;
         font-weight: var(--w-medium);
         margin-top: 0.25em;
         margin-left: 0.25em;
@@ -46,7 +46,7 @@ export class ContactDetails extends ContactStoreElement {
 
       .row .value {
         margin-left: 0.25em;
-        margin-top: 0.1em;
+        margin-top: 0.35em;
         min-height: 1.75em;
         display: flex;
         flex-wrap: wrap;
@@ -55,6 +55,12 @@ export class ContactDetails extends ContactStoreElement {
 
       .group {
       }
+
+      /* the last row needs no separator — the card edge closes it off */
+      temba-contact-field.last-field {
+        --contact-field-separator: none;
+        margin-bottom: 0;
+      }
     `;
   }
 
@@ -70,6 +76,17 @@ export class ContactDetails extends ContactStoreElement {
 
     return html`
       <div class="wrapper">
+        ${this.data.urns.map((urn) => {
+          let scheme = SCHEMES[urn.scheme];
+          if (!scheme) {
+            scheme = capitalize(urn.scheme as any);
+          }
+          return html`<temba-contact-field
+            name=${scheme}
+            value=${urn.display || urn.path}
+            disabled
+          ></temba-contact-field>`;
+        })}
         ${this.data.groups.length > 0
           ? html` <div class="row">
               <div class="label">Groups</div>
@@ -89,17 +106,6 @@ export class ContactDetails extends ContactStoreElement {
               </div>
             </div>`
           : null}
-        ${this.data.urns.map((urn) => {
-          let scheme = SCHEMES[urn.scheme];
-          if (!scheme) {
-            scheme = capitalize(urn.scheme as any);
-          }
-          return html`<temba-contact-field
-            name=${scheme}
-            value=${urn.display || urn.path}
-            disabled
-          ></temba-contact-field>`;
-        })}
         ${this.data.ref
           ? html`<temba-contact-field
               name="Ref"
@@ -128,6 +134,7 @@ export class ContactDetails extends ContactStoreElement {
           disabled
         ></temba-contact-field>
         <temba-contact-field
+          class="last-field"
           name="Last Seen"
           value=${this.data.last_seen_on}
           type="datetime"

package/src/live/ContactFieldEditor.ts

@@ -61,7 +61,7 @@ export class ContactFieldEditor extends RapidElement {
         --color-widget-bg-focused: #fff;
         --widget-box-shadow: none;
         padding-bottom: 0.6em;
-        border-bottom: 1px solid #ececec;
+        border-bottom: var(--contact-field-separator, 1px solid #ececec);
       }
 
       .wrapper.disabled {
@@ -108,9 +108,12 @@ export class ContactFieldEditor extends RapidElement {
         text-overflow: ellipsis;
       }
 
+      /* read-only rows set the label clearly apart from the value — the
+         same quiet label treatment as .field-label on the editable rows,
+         a touch smaller, over a full-color value */
       .label .name {
         color: var(--text-2);
-        font-size: 12px;
+        font-size: 11px;
         font-weight: var(--w-medium);
       }
 
@@ -120,8 +123,9 @@ export class ContactFieldEditor extends RapidElement {
       }
 
       .disabled .value {
+        color: var(--text-1);
         margin-left: 0.25em;
-        margin-top: 0.1em;
+        margin-top: 0.35em;
         min-height: 1.75em;
       }
 

package/src/live/ContactStoreElement.ts

@@ -66,7 +66,8 @@ export class ContactStoreElement extends EndpointMonitorElement {
   }
 
   public willUpdate(changed: PropertyValues): void {
-    super.willUpdate(changed);
+    // derive our url before the base class runs so it sees the url change
+    // in this same pass (clearing stale data when the contact is unset)
     if (changed.has('contact') || changed.has('endpoint')) {
       if (this.contact) {
         this.url = `${this.endpoint}${this.contact}`;
@@ -74,5 +75,6 @@ export class ContactStoreElement extends EndpointMonitorElement {
         this.url = null;
       }
     }
+    super.willUpdate(changed);
   }
 }

package/src/live/ContactTimeline.ts

@@ -115,7 +115,9 @@ export class ContactTimeline extends EndpointMonitorElement {
         flex-direction: column;
         align-items: center;
         text-align: center;
-        padding: 7em 1em 4em;
+        /* a host card sets --empty-padding to compact this treatment —
+           the default suits a full-height tab pane */
+        padding: var(--empty-padding, 7em 1em 4em);
         color: var(--text-color);
       }
 
@@ -124,9 +126,17 @@ export class ContactTimeline extends EndpointMonitorElement {
         --icon-color: var(--text-3, #7b8593);
       }
 
+      /* the icon / blurb / link around the title — a host card hides
+         these so the empty card is just the stylized message */
+      .empty-extras {
+        display: var(--empty-extras-display, contents);
+      }
+
       .empty-title {
         font-weight: 600;
         margin-bottom: 0.4em;
+        font-size: var(--empty-title-size, inherit);
+        color: var(--empty-title-color, inherit);
       }
 
       .empty-help {
@@ -547,7 +557,14 @@ export class ContactTimeline extends EndpointMonitorElement {
             : Array.isArray(this.data.future)
               ? this.data.future.length
               : 0;
-        this.fireCustomEvent(CustomEventType.DetailsChanged, { count });
+        // empty mirrors the render()'s empty-state condition so a host
+        // card can drop its chrome entirely when there's nothing to show
+        const empty =
+          count === 0 &&
+          !(Array.isArray(this.data.campaigns) && this.data.campaigns.length) &&
+          !(Array.isArray(this.data.future) && this.data.future.length) &&
+          !(Array.isArray(this.data.past) && this.data.past.length);
+        this.fireCustomEvent(CustomEventType.DetailsChanged, { count, empty });
       }
     }
   }
@@ -810,12 +827,16 @@ export class ContactTimeline extends EndpointMonitorElement {
     ) {
       return html`<div class="empty">
         <slot name="empty">
-          <temba-icon name=${Icon.schedule} size="2"></temba-icon>
+          <div class="empty-extras">
+            <temba-icon name=${Icon.schedule} size="2"></temba-icon>
+          </div>
           <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
-          >
+          <div class="empty-extras">
+            <div class="empty-help">${this.lang_empty_help}</div>
+            <a class="empty-link" href="/campaign/" onclick="goto(event, this)"
+              >${this.lang_campaigns_link}</a
+            >
+          </div>
         </slot>
       </div>`;
     }

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/locales/es.ts

@@ -13,6 +13,10 @@
 's73b4d70c02f4b4e0': `No options`,
 'sbc913d7dc0f33877': `to add`,
 's81f17cfc89a04338': `Interrupt flow`,
+'s122d4de68bcfcdf4': `It's okay to restart`,
+'s3eb2567092b4d7c1': `from the beginning`,
+'s28f37776b3901438': `It's okay to interrupt`,
+'s6838d20b10f7512a': `and start this one`,
 '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`,

package/src/locales/fr.ts

@@ -13,6 +13,10 @@
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
 's81f17cfc89a04338': `Interrupt flow`,
+'s122d4de68bcfcdf4': `It's okay to restart`,
+'s3eb2567092b4d7c1': `from the beginning`,
+'s28f37776b3901438': `It's okay to interrupt`,
+'s6838d20b10f7512a': `and start this one`,
 '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`,