@nyaruka/temba-components 0.170.1 → 0.172.0

package/src/list/TembaMenu.ts

@@ -41,6 +41,10 @@ interface MenuItemState {
   collapsed?: string;
 }
 
+// fields the menu maintains on an item rather than reading off the server, so
+// a reload carries them across instead of treating them as dropped
+const OWN_ITEM_FIELDS = ['items', 'level', 'loading'];
+
 const findItem = (
   items: MenuItem[],
   id: string
@@ -738,8 +742,17 @@ export class TembaMenu extends ResizeElement {
   @property({ type: Object })
   pressedItem: MenuItem;
 
-  // http promise to monitor for completeness
-  public httpComplete: Promise<void>;
+  /**
+   * Resolves when every load in flight has settled. Awaiting it has to mean
+   * "the menu has finished fetching", not "the last load anyone started has
+   * finished" - loads overlap (a click while a debounced refresh is armed),
+   * and a caller that awaited whichever promise happened to be here last
+   * would read the menu mid-update.
+   */
+  public httpComplete: Promise<void> = Promise.resolve();
+
+  private loadsInFlight = 0;
+  private loadsSettled: () => void;
 
   root: MenuItem;
   selection: string[] = [];
@@ -854,22 +867,66 @@ export class TembaMenu extends ResizeElement {
     });
   }
 
+  /**
+   * Folds a load into httpComplete, which stays unresolved until the last one
+   * outstanding settles.
+   */
+  private trackLoad(load: Promise<void>): void {
+    if (this.loadsInFlight === 0) {
+      this.httpComplete = new Promise((resolve) => {
+        this.loadsSettled = resolve;
+      });
+    }
+    this.loadsInFlight++;
+
+    load.then(() => {
+      if (--this.loadsInFlight === 0) {
+        this.loadsSettled();
+      }
+    });
+  }
+
+  /**
+   * Reloading a level reuses the item objects it already had. Replacing them
+   * would orphan anything already pointing at one - a rendered click handler,
+   * or a load in flight for that item's own children, which would then land
+   * on a copy no longer in the tree.
+   */
+  private mergeItems(item: MenuItem, items: MenuItem[]): MenuItem[] {
+    const previous = item.items || [];
+    return items.map((newItem) => {
+      const prevItem = previous.find((prev) => prev.id == newItem.id);
+      if (!prevItem) {
+        return newItem;
+      }
+
+      // sub-items the reload didn't speak to are ours to carry over - either
+      // ones we already had or ones still on their way
+      const carried = newItem.items || prevItem.items;
+
+      // anything the reload dropped is gone, so this reads as a replacement
+      // everywhere except identity - bar the fields the menu sets on an item
+      // itself, which the server never speaks to
+      Object.keys(prevItem).forEach((key) => {
+        if (!(key in newItem) && !OWN_ITEM_FIELDS.includes(key)) {
+          delete prevItem[key];
+        }
+      });
+      Object.assign(prevItem, newItem);
+      if (carried) {
+        prevItem.items = carried;
+      }
+      return prevItem;
+    });
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private loadItems(item: MenuItem, event: MouseEvent | KeyboardEvent = null) {
     if (item && item.endpoint) {
       item.loading = true;
-      this.httpComplete = fetchResults(item.endpoint)
+      const load = fetchResults(item.endpoint)
         .then((items: MenuItem[]) => {
-          items.forEach((newItem) => {
-            if (!newItem.items) {
-              const prevItem = (item.items || []).find(
-                (prev) => prev.id == newItem.id
-              );
-              if (prevItem && prevItem.items) {
-                newItem.items = prevItem.items;
-              }
-            }
-          });
+          items = this.mergeItems(item, items);
 
           // update our item level
           items.forEach((subItem) => {
@@ -901,6 +958,7 @@ export class TembaMenu extends ResizeElement {
         .catch((error) => {
           this.fireCustomEvent(CustomEventType.Error, { error });
         });
+      this.trackLoad(load);
     }
   }
 

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;
@@ -746,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(),
@@ -782,6 +788,7 @@ export class ContactChat extends ContactStoreElement {
         this.fetchMissedEvents();
       }
       this.fetchPreviousMessages();
+      this.tryPendingSearch();
     }
   }
 
@@ -830,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;
     }
@@ -864,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);
     }
@@ -877,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();
   }
 
@@ -932,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);
     }
   }
 
@@ -1056,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();
     }
   }
 
@@ -1098,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);
   }
@@ -1116,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
@@ -1139,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
@@ -1163,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
@@ -1182,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;
@@ -1198,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;
@@ -1221,6 +1368,8 @@ export class ContactChat extends ContactStoreElement {
         this.searchIndex = -1;
         this.searchNoResults = false;
       });
+
+    return true;
   }
 
   private navigateToResult(index: number) {
@@ -1518,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) {
@@ -1638,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;
       }
 
@@ -1649,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();
 
@@ -1925,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">