@nyaruka/temba-components 0.171.0 → 0.172.0

package/src/live/ContactChat.ts

@@ -26,17 +26,13 @@ import {
 } from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
 import { Compose, ComposeValue } from '../form/Compose';
-import {
-  ContactFlowChangedEvent,
-  ContactHistoryPage,
-  ContactLastSeenChangedEvent
-} from '../events';
+import { ContactHistoryPage } from '../events';
 import {
   Chat,
   MessageType,
   ContactEvent,
   MsgEvent,
-  TypingEvent
+  TypingEvent as RenderedTypingEvent
 } from '../display/Chat';
 import { DEFAULT_AVATAR } from '../webchat/assets';
 import { UserSelect } from '../form/select/UserSelect';
@@ -48,7 +44,13 @@ import {
   renderTicketAssigneeChanged
 } from '../events/eventRenderers';
 import { publishToSocket } from './SocketService';
-import { subscribeToContactHistory, RealtimeSubscription } from './Realtime';
+import {
+  ContactHistoryEvent,
+  RealtimeSubscription,
+  subscribeToContactHistory,
+  TypingEvent
+} from './Realtime';
+import { applyContactEvent, watchContact } from './ContactWatch';
 import { Icon } from '../Icons';
 import { designTokens } from '../styles/designTokens';
 import { DateTime } from 'luxon';
@@ -64,10 +66,11 @@ const STATE_REFRESH_INTERVAL = 60000;
 // re-export for backwards compatibility
 export { renderTicketAction, renderTicketAssigneeChanged };
 
-interface SearchResult {
+export interface SearchResult {
   uuid: string;
   type: string;
   created_on: string;
+  ticket_uuid?: string;
   msg?: any;
   _user?: any;
   [key: string]: any;
@@ -140,10 +143,18 @@ export class ContactChat extends ContactStoreElement {
 
       /* While the contact is in a flow the compose outline carries the
          flow hue: resting border matches the flow pill border, focus
-         goes solid flow green */
+         goes solid flow green. The pre-mixed static comes first — a
+         custom property can't fall back per-declaration, so the
+         derived version needs the @supports gate. */
       .in-flow .compose {
-        --compose-border: 1px solid
-          color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        --compose-border: 1px solid #c5e8d2;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .in-flow .compose {
+          --compose-border: 1px solid
+            color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        }
       }
 
       .in-flow .compose temba-compose {
@@ -459,10 +470,18 @@ export class ContactChat extends ContactStoreElement {
          status-area grey. Fallbacks match the --flow design token for
          pages without tokens. */
       .in-flow .contact-status {
-        background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+        /* pre-mixed statics first for browsers without color-mix() */
+        background: #e3f4e9;
         color: var(--flow, #16a34a);
         --icon-color: var(--flow, #16a34a);
-        border-top-color: color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        border-top-color: #c5e8d2;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .in-flow .contact-status {
+          background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+          border-top-color: color-mix(in srgb, var(--flow, #16a34a) 25%, white);
+        }
       }
 
       /* compact the interrupt button to the row's caption scale */
@@ -530,7 +549,14 @@ export class ContactChat extends ContactStoreElement {
       }
 
       .in-flow .chat-box {
-        background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+        /* pre-mixed static first for browsers without color-mix() */
+        background: #e3f4e9;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .in-flow .chat-box {
+          background: color-mix(in srgb, var(--flow, #16a34a) 12%, white);
+        }
       }
 
       .ticket-controls {
@@ -723,6 +749,9 @@ export class ContactChat extends ContactStoreElement {
   public connectedCallback() {
     super.connectedCallback();
     this.chat = this.shadowRoot.querySelector('temba-chat');
+    // a search handed off before we had a chat to run it in only waits on
+    // the contact, which may already be loaded
+    this.tryPendingSearch();
     this.updateSubscriptions();
     this.stateRefresh = window.setInterval(
       () => this.requestUpdate(),
@@ -759,6 +788,7 @@ export class ContactChat extends ContactStoreElement {
         this.fetchMissedEvents();
       }
       this.fetchPreviousMessages();
+      this.tryPendingSearch();
     }
   }
 
@@ -807,19 +837,30 @@ export class ContactChat extends ContactStoreElement {
       if (!this.subscriptions.has(key)) {
         this.subscriptions.set(
           key,
-          subscribeToContactHistory(
-            topic.contact,
-            topic.ticket,
-            (data: any) => this.handleSocketEvent(data),
-            // on every (re)subscribe fetch anything we might have missed
-            () => this.fetchMissedEvents()
-          )
+          // the contact's own channel is owned by the central watcher, which
+          // every other contact component on the page shares - we take it as
+          // a stream and keep rendering history ourselves. Ticket detail
+          // events aren't contact state and stay a direct subscription
+          topic.ticket
+            ? subscribeToContactHistory(
+                topic.contact,
+                topic.ticket,
+                (data: any) => this.handleSocketEvent(data),
+                // on every (re)subscribe fetch anything we might have missed
+                () => this.fetchMissedEvents()
+              )
+            : watchContact(
+                topic.contact,
+                '*',
+                (event: any) => this.handleSocketEvent(event),
+                () => this.fetchMissedEvents()
+              )
         );
       }
     });
   }
 
-  private handleSocketEvent(event: any) {
+  private handleSocketEvent(event: ContactHistoryEvent) {
     if (!this.currentContact) {
       return;
     }
@@ -841,12 +882,20 @@ export class ContactChat extends ContactStoreElement {
     }
 
     // typing events are ephemeral indicator state, not history
-    if (event.type === 'typing_started' || event.type === 'typing_stopped') {
-      this.handleTypingEvent(event);
+    if (
+      event.type === Events.TYPING_STARTED ||
+      event.type === Events.TYPING_STOPPED
+    ) {
+      this.handleTypingEvent(event as TypingEvent);
       return;
     }
 
-    const messages = this.createMessages({ events: [event], next: null });
+    // createMessages parses the wire event into the rendered form the page
+    // type describes, dates and all
+    const messages = this.createMessages({
+      events: [this.copyWireEvent(event) as unknown as ContactEvent],
+      next: null
+    });
     if (messages.length > 0) {
       this.chat.addMessages(messages, null, true);
     }
@@ -854,26 +903,13 @@ export class ContactChat extends ContactStoreElement {
 
   /**
    * Ephemeral events that update contact state rather than record history.
-   * They are never persisted, so this is the only place they can be applied.
-   * The current contact is the store's cached copy of the contact, so
-   * updating it in place also keeps the cache fresh for later readers.
+   * They are never persisted, so applying them is the only way they show up.
+   * How each one applies is the central watcher's to define - we just run it
+   * against our copy, which is the store's cached contact, so applying it in
+   * place also keeps the cache fresh for later readers.
    */
-  private handleContactStateEvent(
-    event: ContactFlowChangedEvent | ContactLastSeenChangedEvent
-  ) {
-    const contact = this.currentContact;
-    if (event.type === Events.CONTACT_LAST_SEEN_CHANGED) {
-      const lastSeenOn = (event as ContactLastSeenChangedEvent).last_seen_on;
-      // last seen only ever moves forward - ignore out of order deliveries
-      if (
-        !contact.last_seen_on ||
-        new Date(lastSeenOn) > new Date(contact.last_seen_on)
-      ) {
-        contact.last_seen_on = lastSeenOn;
-      }
-    } else {
-      contact.flow = (event as ContactFlowChangedEvent).flow || null;
-    }
+  private handleContactStateEvent(event: ContactHistoryEvent) {
+    applyContactEvent(this.currentContact, event);
     this.requestUpdate();
   }
 
@@ -909,13 +945,18 @@ export class ContactChat extends ContactStoreElement {
       return;
     }
 
-    event.created_on = new Date(event.created_on);
-    this.resolveUserAvatar(event);
+    // the wire event is handed to every subscriber on this channel, so render
+    // into our own copy rather than parsing its date in place
+    const typing = {
+      ...this.copyWireEvent(event),
+      created_on: new Date(event.created_on)
+    } as RenderedTypingEvent;
+    this.resolveUserAvatar(typing);
 
-    if (event.type === 'typing_started') {
-      this.chat.setTyping(event);
+    if (event.type === Events.TYPING_STARTED) {
+      this.chat.setTyping(typing);
     } else {
-      this.chat.clearTyping(event);
+      this.chat.clearTyping(typing);
     }
   }
 
@@ -1033,22 +1074,44 @@ export class ContactChat extends ContactStoreElement {
     }
   }
 
+  /**
+   * Clears the state of the current search - its query, results and the
+   * flags driving the search bar. Opening a fresh search keeps whatever
+   * lastSearchedQuery was, so its results can be re-run; closing or
+   * starting a new one drops it too.
+   */
+  private resetSearchState(query = '', clearLastSearched = false) {
+    this.searchQuery = query;
+    this.searchResults = [];
+    this.searchIndex = -1;
+    this.searchLoading = false;
+    this.searchNoResults = false;
+    if (clearLastSearched) {
+      this.lastSearchedQuery = '';
+    }
+  }
+
+  /** Focuses the search input once the search bar has rendered. */
+  private focusSearchInput() {
+    window.setTimeout(() => {
+      const input = this.shadowRoot.querySelector('.search-input') as any;
+      if (input) {
+        input.focus();
+      }
+    }, 50);
+  }
+
   private handleSearchToggle() {
+    // an opening or closing search supersedes any hand-off still waiting
+    // on a contact to load
+    this.pendingSearch = null;
+
     if (this.searchMode) {
       this.handleSearchClose();
     } else {
       this.searchMode = true;
-      this.searchQuery = '';
-      this.searchResults = [];
-      this.searchIndex = -1;
-      this.searchLoading = false;
-      this.searchNoResults = false;
-      window.setTimeout(() => {
-        const input = this.shadowRoot.querySelector('.search-input') as any;
-        if (input) {
-          input.focus();
-        }
-      }, 50);
+      this.resetSearchState();
+      this.focusSearchInput();
     }
   }
 
@@ -1075,16 +1138,20 @@ export class ContactChat extends ContactStoreElement {
     // supersede any in-flight match navigation right away — its chain
     // must not re-assert highlights over the restored view below
     this.searchGeneration++;
+    // and a hand-off waiting on a contact must not reopen search behind
+    // the user once it lands
+    this.pendingSearch = null;
     this.searchClosing = true;
     window.setTimeout(() => {
       this.searchClosing = false;
       this.searchMode = false;
-      this.searchQuery = '';
-      this.searchResults = [];
-      this.searchIndex = -1;
-      this.searchLoading = false;
-      this.searchNoResults = false;
-      this.lastSearchedQuery = '';
+      // if a hand-off forced the search bar onto a conversation the host
+      // had opted out of, put the host's choice back
+      if (this.forcedShowSearch) {
+        this.forcedShowSearch = false;
+        this.showSearch = false;
+      }
+      this.resetSearchState('', true);
       this.restoreUnsearchedView();
     }, 150);
   }
@@ -1093,6 +1160,10 @@ export class ContactChat extends ContactStoreElement {
     const input = e.target as HTMLInputElement;
     this.searchQuery = input.value;
 
+    // the user typing their own query supersedes any hand-off still
+    // waiting on a contact to load
+    this.pendingSearch = null;
+
     // any edit away from the searched query invalidates its results —
     // drop them and put the history back at its unsearched view rather
     // than staying parked at a stale match; backspacing to nothing is
@@ -1116,6 +1187,77 @@ export class ContactChat extends ContactStoreElement {
   // tracks the query that produced the current searchResults
   private lastSearchedQuery = '';
 
+  // a search requested (e.g. from the cross-ticket search modal) before the
+  // contact had loaded — executed once that contact and the chat are ready
+  private pendingSearch: {
+    query: string;
+    event: SearchResult;
+    contactUuid: string;
+  } = null;
+
+  // whether startSearch turned showSearch on for a hand-off, so closing the
+  // search can restore the host's opt-out
+  private forcedShowSearch = false;
+
+  /**
+   * Opens search mode and executes the given query, landing on the given
+   * event — which is inserted into the results if the endpoint's matches
+   * don't reach back far enough to include it. Safe to call before the
+   * contact has finished loading — the search runs once it has.
+   */
+  public startSearch(query: string, event: SearchResult = null): void {
+    if (!query || !query.trim()) {
+      return;
+    }
+    this.searchMode = true;
+    // hosts only turn search on for some conversations (e.g. once a contact
+    // has been seen), but a hand-off always needs the bar - it carries the
+    // match stepper and the only way back out of the searched view. Track
+    // when we forced it so closing the search restores the host's choice
+    if (!this.showSearch) {
+      this.showSearch = true;
+      this.forcedShowSearch = true;
+    }
+    this.resetSearchState(query, true);
+    // the contact the host has asked us to show, which may still be
+    // loading — the search belongs to it and nobody else
+    this.pendingSearch = {
+      query: query.trim(),
+      event,
+      contactUuid: this.contact
+    };
+    this.focusSearchInput();
+    this.tryPendingSearch();
+  }
+
+  private tryPendingSearch(): void {
+    const pending = this.pendingSearch;
+    if (!pending || !this.currentContact || !this.chat) {
+      return;
+    }
+
+    // the search was requested for a specific contact — hold it while that
+    // contact is still loading, but drop it once the host has moved on to
+    // another one rather than running it against the wrong history
+    if (
+      pending.contactUuid &&
+      pending.contactUuid !== this.currentContact.uuid
+    ) {
+      if (pending.contactUuid !== this.contact) {
+        this.pendingSearch = null;
+      }
+      return;
+    }
+
+    // executeSearch declines while another search is still in flight — keep
+    // the hand-off queued in that case so a later update can run it rather
+    // than dropping it on the floor
+    this.searchQuery = pending.query;
+    if (this.executeSearch(pending.event)) {
+      this.pendingSearch = null;
+    }
+  }
+
   // bumped whenever the current search is superseded (new search, query
   // edit, close) — navigateToResult's async fade/load chain captures the
   // value at entry and bails at each step once it goes stale, so a chain
@@ -1140,10 +1282,11 @@ export class ContactChat extends ContactStoreElement {
     }
   }
 
-  private executeSearch() {
+  /** Runs the current query, returning whether it was actually started. */
+  private executeSearch(targetEvent: SearchResult = null): boolean {
     const query = this.searchQuery.trim();
     if (!query || !this.currentContact || this.searchLoading) {
-      return;
+      return false;
     }
 
     // a fresh search supersedes any navigation still in flight
@@ -1159,7 +1302,17 @@ export class ContactChat extends ContactStoreElement {
       this.chat.reset();
     }
 
-    const url = `/contact/chat_search/${this.currentContact.uuid}/?text=${encodeURIComponent(query)}`;
+    // a ticket-scoped chat only shows this ticket's history, so its search
+    // only covers this ticket's messages too. The endpoint narrows the
+    // search to ticket messages and drops the other tickets' matches
+    // itself, so its cap is no longer spent on messages this view can't
+    // show — matches from the contact's other tickets can still crowd out
+    // this one's, so the cap isn't per-ticket
+    let url = `/contact/chat_search/${this.currentContact.uuid}/?text=${encodeURIComponent(query)}`;
+    if (this.currentTicket) {
+      url += `&ticket=${encodeURIComponent(this.currentTicket.uuid)}`;
+    }
+
     getUrl(url)
       .then((response: WebResponse) => {
         this.searchLoading = false;
@@ -1175,15 +1328,32 @@ export class ContactChat extends ContactStoreElement {
         // through the list), so order the results newest-first here rather
         // than depending on the endpoint's ordering (uuid v7 sorts
         // chronologically, matching the uuid comparisons used elsewhere)
-        this.searchResults = (
-          (response.json.results || []) as SearchResult[]
-        ).sort((a, b) =>
-          b.uuid.toLowerCase().localeCompare(a.uuid.toLowerCase())
+        const results = ((response.json.results || []) as SearchResult[]).sort(
+          (a, b) => b.uuid.toLowerCase().localeCompare(a.uuid.toLowerCase())
         );
+
+        // the endpoint caps how many matches it returns, so the event we
+        // were handed off may not be among them — splice it into its own
+        // spot in the ordering so the hand-off always lands on it
+        if (targetEvent && !results.some((r) => r.uuid === targetEvent.uuid)) {
+          const older = results.findIndex(
+            (r) =>
+              r.uuid
+                .toLowerCase()
+                .localeCompare(targetEvent.uuid.toLowerCase()) < 0
+          );
+          results.splice(older === -1 ? results.length : older, 0, targetEvent);
+        }
+        this.searchResults = results;
+
         if (this.searchResults.length > 0) {
           this.searchNoResults = false;
-          this.searchIndex = 0;
-          this.navigateToResult(0);
+          const targetIndex = targetEvent
+            ? this.searchResults.findIndex((r) => r.uuid === targetEvent.uuid)
+            : -1;
+          const index = targetIndex !== -1 ? targetIndex : 0;
+          this.searchIndex = index;
+          this.navigateToResult(index);
         } else {
           this.searchNoResults = true;
           this.searchIndex = -1;
@@ -1198,6 +1368,8 @@ export class ContactChat extends ContactStoreElement {
         this.searchIndex = -1;
         this.searchNoResults = false;
       });
+
+    return true;
   }
 
   private navigateToResult(index: number) {
@@ -1495,6 +1667,23 @@ export class ContactChat extends ContactStoreElement {
    * second user ref (the assignee) whose avatar feeds the event's hover
    * tooltip.
    */
+  /**
+   * A copy of a wire event we can parse and resolve into. The event object is
+   * handed to every subscriber on the channel, and resolveUserAvatar writes an
+   * avatar onto the user objects hanging off it, so a shallow spread isn't
+   * enough on its own - those ride through it aliased.
+   */
+  private copyWireEvent(event: any): any {
+    const copy = { ...event };
+    if (copy._user) {
+      copy._user = { ...copy._user };
+    }
+    if (copy.assignee) {
+      copy.assignee = { ...copy.assignee };
+    }
+    return copy;
+  }
+
   private resolveUserAvatar(event: any) {
     for (const user of [event._user, event.assignee]) {
       if (user && user.uuid && this.store) {
@@ -1615,6 +1804,8 @@ export class ContactChat extends ContactStoreElement {
     if (this.currentContact) {
       const endpoint = this.getEndpoint();
       if (!endpoint) {
+        // nothing to fetch — don't leave the chat wedged as fetching
+        chat.fetching = false;
         return;
       }
 
@@ -1626,12 +1817,21 @@ export class ContactChat extends ContactStoreElement {
         this.afterUUID = anchorUUID;
       }
 
+      const requestedBefore = this.beforeUUID;
       fetchContactHistory(
         endpoint,
         this.currentTicket?.uuid,
         this.beforeUUID,
         null
       ).then((page: ContactHistoryPage) => {
+        // the view was repositioned while this page was in flight (e.g. a
+        // search navigated to a match and re-anchored the history) — drop
+        // it rather than stacking the old view's messages on the new one
+        if (this.beforeUUID !== requestedBefore) {
+          chat.fetching = false;
+          return;
+        }
+
         const messages = this.createMessages(page);
         messages.reverse();
 
@@ -1902,7 +2102,7 @@ export class ContactChat extends ContactStoreElement {
                 clickable
                 title="Search"
                 aria-label="Run search"
-                @click=${this.executeSearch}
+                @click=${() => this.executeSearch()}
               ></temba-icon>`
           : this.searchResults.length > 0
             ? html`<div class="match-pager">

package/src/live/ContactTimeline.ts

@@ -189,24 +189,36 @@ export class ContactTimeline extends EndpointMonitorElement {
         padding: 0.05em 0.65em;
         border-radius: 999px;
         white-space: nowrap;
-        background: color-mix(
-          in srgb,
-          var(--pill-hue) 12%,
-          var(--color-widget-bg, #fff)
-        );
-        border: 1px solid
-          color-mix(in srgb, var(--pill-hue) 25%, var(--color-widget-bg, #fff));
+        /* plain bg / neutral border for browsers without color-mix();
+           the hue-tinted versions live in the @supports block below */
+        background: var(--color-widget-bg, #fff);
+        border: 1px solid var(--pill-hue);
         color: var(--pill-hue);
         cursor: pointer;
         transition: background 100ms ease-in-out;
       }
 
-      .campaign-pill:hover {
-        background: color-mix(
-          in srgb,
-          var(--pill-hue) 22%,
-          var(--color-widget-bg, #fff)
-        );
+      @supports (color: color-mix(in srgb, red, red)) {
+        .campaign-pill {
+          background: color-mix(
+            in srgb,
+            var(--pill-hue) 12%,
+            var(--color-widget-bg, #fff)
+          );
+          border: 1px solid
+            color-mix(
+              in srgb,
+              var(--pill-hue) 25%,
+              var(--color-widget-bg, #fff)
+            );
+        }
+        .campaign-pill:hover {
+          background: color-mix(
+            in srgb,
+            var(--pill-hue) 22%,
+            var(--color-widget-bg, #fff)
+          );
+        }
       }
 
       .campaign-pill:focus-visible {
@@ -289,24 +301,34 @@ export class ContactTimeline extends EndpointMonitorElement {
       }
 
       /* past events are filled with a lighter tint of the same hue and keep
-         the solid border - they're settled, whether real or projected */
+         the solid border - they're settled, whether real or projected.
+         Plain widget bg first for browsers without color-mix(). */
       .dot.past {
-        background: color-mix(
-          in srgb,
-          var(--dot-color) 25%,
-          var(--color-widget-bg, #fff)
-        );
+        background: var(--color-widget-bg, #fff);
       }
 
       /* future events haven't occurred yet - signal that with a dotted
          border and the faintest tint of the hue inside */
       .dot.future {
         border-style: dotted;
-        background: color-mix(
-          in srgb,
-          var(--dot-color) 8%,
-          var(--color-widget-bg, #fff)
-        );
+        background: var(--color-widget-bg, #fff);
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .dot.past {
+          background: color-mix(
+            in srgb,
+            var(--dot-color) 25%,
+            var(--color-widget-bg, #fff)
+          );
+        }
+        .dot.future {
+          background: color-mix(
+            in srgb,
+            var(--dot-color) 8%,
+            var(--color-widget-bg, #fff)
+          );
+        }
       }
 
       /* the now dot and label both paint with the SPA content background