@nyaruka/temba-components 0.171.0 → 0.172.0

package/src/live/SocketService.ts

@@ -1,4 +1,5 @@
 import { Centrifuge, Subscription, SubscriptionState } from 'centrifuge';
+import { Watchers } from './Watchers';
 
 /**
  * Access to our realtime messaging socket (centrifugo). The server lives
@@ -20,6 +21,11 @@ import { Centrifuge, Subscription, SubscriptionState } from 'centrifuge';
  * 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.
+ *
+ * The connection's state is readable too, so a page can tell its user when it
+ * has gone quiet rather than silently showing stale data:
+ *
+ *   window.sockets.onConnectionState((state) => { ... });
  */
 
 export interface SocketSubscription {
@@ -28,6 +34,19 @@ export interface SocketSubscription {
 
 export type PublicationHandler = (data: any) => void;
 
+/**
+ * Where the shared connection is. Mirrors centrifugo's own client states -
+ * connecting covers the first attempt and every reconnect after a drop, so a
+ * page showing a "reconnecting" hint wants that one.
+ */
+export enum ConnectionState {
+  Disconnected = 'disconnected',
+  Connecting = 'connecting',
+  Connected = 'connected'
+}
+
+export type ConnectionStateHandler = (state: ConnectionState) => void;
+
 export interface SocketProvider {
   subscribe(
     channel: string,
@@ -36,6 +55,10 @@ export interface SocketProvider {
   ): SocketSubscription;
 
   publish(channel: string, data: any): Promise<void>;
+
+  getConnectionState(): ConnectionState;
+
+  onConnectionState(handler: ConnectionStateHandler): SocketSubscription;
 }
 
 interface ChannelEntry {
@@ -48,6 +71,13 @@ export class SocketManager implements SocketProvider {
   private channels = new Map<string, ChannelEntry>();
   private createSocket: () => Centrifuge;
 
+  // no connection exists until something asks for one, so that is where we
+  // start rather than pretending we know the server is unreachable
+  private state = ConnectionState.Disconnected;
+  private stateHandlers = new Watchers<ConnectionStateHandler>(
+    'socket connection handler'
+  );
+
   constructor(createSocket?: () => Centrifuge) {
     this.createSocket =
       createSocket ||
@@ -67,33 +97,98 @@ export class SocketManager implements SocketProvider {
    * 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();
-    }
+    const socket = this.ensureSocket();
 
     // 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);
+      : socket.publish(channel, data);
     return published.then(() => undefined);
   }
 
+  /**
+   * The shared connection, opened on first use. Its state is tracked from
+   * here on, seeded with whatever it is already in - creating it connects, so
+   * the first transition can happen before we are listening.
+   */
+  private ensureSocket(): Centrifuge {
+    if (!this.socket) {
+      this.socket = this.createSocket();
+      this.socket.on('connecting', () =>
+        this.setState(ConnectionState.Connecting)
+      );
+      this.socket.on('connected', () =>
+        this.setState(ConnectionState.Connected)
+      );
+      this.socket.on('disconnected', () =>
+        this.setState(ConnectionState.Disconnected)
+      );
+      this.setState(this.socket.state as unknown as ConnectionState);
+    }
+    return this.socket;
+  }
+
+  // counts transitions, so an initial delivery can tell whether one beat it
+  // to the handler
+  private stateSeq = 0;
+
+  private setState(state: ConnectionState): void {
+    if (!state || state === this.state) {
+      return;
+    }
+    this.state = state;
+    this.stateSeq++;
+    this.stateHandlers.each((handler) => handler(state));
+  }
+
+  /**
+   * Where the shared connection is right now. Disconnected until something
+   * subscribes or publishes, since that is what opens it.
+   */
+  public getConnectionState(): ConnectionState {
+    return this.state;
+  }
+
+  /**
+   * Watches the connection. The handler is called on every transition, and
+   * once up front with the current state so a caller never has to pair this
+   * with getConnectionState to render.
+   */
+  public onConnectionState(
+    handler: ConnectionStateHandler
+  ): SocketSubscription {
+    this.stateHandlers.add(handler);
+
+    // where we are now, rather than wherever we've got to by the time the
+    // prime lands - opening the connection in this same tick transitions us
+    // and delivers that to the handler ahead of it, and saying the same thing
+    // again is the repeat this is supposed to suppress
+    const initial = this.state;
+    const seq = this.stateSeq;
+    this.stateHandlers.prime(handler, () => {
+      if (this.stateSeq === seq) {
+        handler(initial);
+      }
+    });
+    return {
+      unsubscribe: () => {
+        this.stateHandlers.remove(handler);
+      }
+    };
+  }
+
   public subscribe(
     channel: string,
     onPublication: PublicationHandler,
     onSubscribed?: () => void
   ): SocketSubscription {
-    if (!this.socket) {
-      this.socket = this.createSocket();
-    }
+    const socket = this.ensureSocket();
 
     let entry = this.channels.get(channel);
     if (!entry) {
       entry = {
-        sub:
-          this.socket.getSubscription(channel) ||
-          this.socket.newSubscription(channel),
+        sub: socket.getSubscription(channel) || socket.newSubscription(channel),
         count: 0
       };
       this.channels.set(channel, entry);
@@ -174,6 +269,16 @@ export const publishToSocket = (channel: string, data: any): Promise<void> => {
   return (provider || getManager()).publish(channel, data);
 };
 
+export const getSocketConnectionState = (): ConnectionState => {
+  return (provider || getManager()).getConnectionState();
+};
+
+export const onSocketConnectionState = (
+  handler: ConnectionStateHandler
+): SocketSubscription => {
+  return (provider || getManager()).onConnectionState(handler);
+};
+
 // for tests to swap in a mock provider, returns the previous provider
 export const setSocketProvider = (newProvider: SocketProvider) => {
   const previous = provider;

package/src/live/TicketSearch.ts

@@ -0,0 +1,290 @@
+import { css, html, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ModalSearchResult, SearchModal } from '../layout/SearchModal';
+import { getUrl } from '../utils';
+
+// The matched message event as the endpoint returns it
+export interface TicketSearchEvent {
+  uuid: string;
+  type: string;
+  created_on: string;
+  ticket_uuid?: string;
+  msg?: { text?: string };
+  [key: string]: any;
+}
+
+export interface TicketSearchResult extends ModalSearchResult {
+  contact: { uuid: string; name: string };
+  ticket: { uuid: string; status: string };
+  event: TicketSearchEvent;
+  // The query that produced this result, so selection handlers can re-run
+  // the search within the ticket
+  query: string;
+}
+
+const BADGE_COLOR = '#6b7280';
+
+// rough number of characters that fit on a result row - the snippet is
+// windowed around the match so the match stays visible if CSS clips the tail
+const SNIPPET_BUDGET = 60;
+
+// the shortest prefix we'll fall back to when a query term doesn't appear
+// literally - short enough to cover most inflections, long enough that the
+// highlight still points at the word the user searched for
+const MIN_PREFIX = 4;
+
+// strips everything but letters and numbers, so punctuation in the query
+// doesn't keep a term from matching the message text
+const stripNonWord = (text: string) => text.replace(/[^\p{L}\p{N}]/gu, '');
+
+// same, but only at the ends, so the words of a multi-word query stay apart
+const stripOuterNonWord = (text: string) =>
+  text.replace(/^[^\p{L}\p{N}]+|[^\p{L}\p{N}]+$/gu, '');
+
+// the candidates to look for, in priority order, without duplicates
+const withoutDupes = (candidates: string[]) =>
+  candidates.filter(
+    (candidate, index) => !!candidate && candidates.indexOf(candidate) === index
+  );
+
+/**
+ * Searches message text across all of an org's ticket chats. Searching hits
+ * an endpoint, so it waits for Enter rather than running on every keystroke.
+ */
+export class TicketSearch extends SearchModal<TicketSearchResult> {
+  static styles = [
+    SearchModal.styles,
+    css`
+      .result-type-badge {
+        max-width: 35%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .result-text {
+        flex-grow: 1;
+      }
+
+      .result-date {
+        flex-shrink: 0;
+        font-size: 11px;
+        color: #9ca3af;
+      }
+    `
+  ];
+
+  @property({ type: String })
+  endpoint = '/ticket/search/';
+
+  // searching hits an endpoint, so wait for Enter
+  searchOnEnter = true;
+
+  // how many matches the last search found in tickets this user can't access,
+  // so an empty result set can say why it's empty
+  @state()
+  private dropped = 0;
+
+  // the in-flight request, aborted when it's superseded or the modal closes
+  private abortController: AbortController = null;
+
+  protected cancelSearch(): void {
+    this.abortSearch();
+    this.dropped = 0;
+  }
+
+  private abortSearch(): void {
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+  }
+
+  protected getSearchLabel(): string {
+    return 'Search tickets';
+  }
+
+  protected renderHint(): TemplateResult {
+    return html`<div class="hint">
+      <kbd>Enter</kbd> to search &nbsp; <kbd>Esc</kbd> to close
+    </div>`;
+  }
+
+  /**
+   * The endpoint filters matches down to the tickets this user can access
+   * after the search itself is capped, so a query that matched plenty can
+   * still come back empty. Say so rather than claiming nothing matched.
+   */
+  protected getNoResultsMessage(): string {
+    return this.dropped > 0
+      ? 'No matches in tickets you can access'
+      : super.getNoResultsMessage();
+  }
+
+  protected async performSearch(query: string): Promise<TicketSearchResult[]> {
+    this.abortSearch();
+    this.dropped = 0;
+
+    const controller = new AbortController();
+    this.abortController = controller;
+
+    const joiner = this.endpoint.includes('?') ? '&' : '?';
+    const response = await getUrl(
+      `${this.endpoint}${joiner}text=${encodeURIComponent(query)}`,
+      controller
+    );
+
+    if (this.abortController === controller) {
+      this.abortController = null;
+    }
+
+    const json = response.json as any;
+    this.dropped = json.dropped || 0;
+
+    const results = json.results || [];
+    return results.map((result: any) => this.toSearchResult(result, query));
+  }
+
+  /**
+   * Locates a term in the message text, falling back to progressively
+   * shorter prefixes of it. The backend matches on analyzed text, so a query
+   * term ("helping") can match a message that only contains a stemmed or
+   * inflected form of it ("helped") - highlighting the longest prefix that
+   * does appear keeps the match visible rather than showing nothing.
+   */
+  private findTerm(
+    lowerText: string,
+    term: string,
+    minLength: number
+  ): { start: number; length: number } | null {
+    for (let length = term.length; length >= minLength; length--) {
+      const idx = lowerText.indexOf(term.slice(0, length));
+      if (idx !== -1) {
+        return { start: idx, length };
+      }
+    }
+    return null;
+  }
+
+  private toSearchResult(result: any, query: string): TicketSearchResult {
+    const text = result.event?.msg?.text || result.event?.text || '';
+    const lowerText = text.toLowerCase();
+    const lowerQuery = query.trim().toLowerCase();
+
+    let matchStart = -1;
+    let matchLength = 0;
+
+    // highlight the whole query if it appears verbatim (with or without any
+    // punctuation it's wrapped in), otherwise the first matching term - the
+    // backend matches terms independently, and against analyzed text, so a
+    // term is tried both as typed and stripped of its punctuation
+    const queries = withoutDupes([lowerQuery, stripOuterNonWord(lowerQuery)]);
+    for (const candidate of queries) {
+      const idx = lowerText.indexOf(candidate);
+      if (idx !== -1) {
+        matchStart = idx;
+        matchLength = candidate.length;
+        break;
+      }
+    }
+
+    const terms = withoutDupes(
+      lowerQuery.split(/\s+/).reduce((all: string[], term) => {
+        all.push(term, stripNonWord(term));
+        return all;
+      }, [])
+    );
+
+    // literal matches first, so an exact hit on a later term beats a
+    // prefix hit on an earlier one
+    for (const minLength of [Infinity, MIN_PREFIX]) {
+      if (matchStart !== -1) {
+        break;
+      }
+      for (const term of terms) {
+        const match = this.findTerm(
+          lowerText,
+          term,
+          Math.min(minLength, term.length)
+        );
+        if (match) {
+          matchStart = match.start;
+          matchLength = match.length;
+          break;
+        }
+      }
+    }
+
+    if (matchStart === -1) {
+      matchStart = 0;
+      matchLength = 0;
+    }
+
+    return {
+      typeName: result.contact?.name || 'Unknown',
+      color: BADGE_COLOR,
+      fullText: text,
+      matchStart,
+      matchLength,
+      contact: result.contact,
+      ticket: result.ticket,
+      event: result.event,
+      query: query.trim()
+    };
+  }
+
+  /**
+   * Unlike the base (which anchors the match near the start and lets CSS
+   * clip the tail), message snippets are windowed to roughly center the
+   * match, with ellipses marking clipped context on either side.
+   */
+  protected renderMatchText(result: TicketSearchResult): TemplateResult {
+    const text = result.fullText.replace(/\n/g, ' ');
+    const { matchStart, matchLength } = result;
+
+    if (matchLength === 0) {
+      return html`${text}`;
+    }
+
+    const matchEnd = matchStart + matchLength;
+    const highlight = (start: number, end: number) =>
+      html`${start > 0 ? '…' : ''}${text.slice(
+        start,
+        matchStart
+      )}<mark>${text.slice(matchStart, matchEnd)}</mark>${text.slice(
+        matchEnd,
+        end
+      )}${end < text.length ? '…' : ''}`;
+
+    if (text.length <= SNIPPET_BUDGET) {
+      return highlight(0, text.length);
+    }
+
+    // center the match in the character budget, shifting the window back
+    // into range when the match sits near either end of the text
+    const context = Math.max(0, SNIPPET_BUDGET - matchLength);
+    let start = matchStart - Math.floor(context / 2);
+    let end = matchEnd + Math.ceil(context / 2);
+    if (start < 0) {
+      end = Math.min(text.length, end - start);
+      start = 0;
+    }
+    if (end > text.length) {
+      start = Math.max(0, start - (end - text.length));
+      end = text.length;
+    }
+
+    return highlight(start, end);
+  }
+
+  protected renderResultContent(result: TicketSearchResult): TemplateResult {
+    return html`
+      ${super.renderResultContent(result)}
+      <div class="result-date">
+        <temba-date
+          value=${result.event?.created_on}
+          display="duration"
+        ></temba-date>
+      </div>
+    `;
+  }
+}

package/src/live/Watchers.ts

@@ -0,0 +1,93 @@
+/**
+ * A list of subscribers with safe fan-out.
+ *
+ * Every registry we keep - contact watchers, the store's asset watchers,
+ * socket connection listeners - hands events to page components we don't
+ * control, so they all need the same three things: one subscriber throwing
+ * can't cost the others their delivery, a delivery iterates a snapshot so
+ * unsubscribing mid-fan-out doesn't shift the list underneath it, and
+ * unsubscribing twice does nothing the second time.
+ *
+ * The subscriber record and how an event reaches it belong to the caller -
+ * interests, payloads and arities differ - so this owns only the list and the
+ * delivery discipline.
+ */
+export class Watchers<W> {
+  private watchers: W[] = [];
+
+  // names the subscriber when reporting one that threw
+  private label: string;
+
+  constructor(label: string) {
+    this.label = label;
+  }
+
+  public get size(): number {
+    return this.watchers.length;
+  }
+
+  public has(watcher: W): boolean {
+    return this.watchers.includes(watcher);
+  }
+
+  public some(predicate: (watcher: W) => boolean): boolean {
+    return this.watchers.some(predicate);
+  }
+
+  /** A snapshot, for callers that need to read across everyone registered. */
+  public all(): W[] {
+    return [...this.watchers];
+  }
+
+  public add(watcher: W): void {
+    this.watchers.push(watcher);
+  }
+
+  /** Removes it, reporting whether it was still registered. */
+  public remove(watcher: W): boolean {
+    const index = this.watchers.indexOf(watcher);
+    if (index < 0) {
+      return false;
+    }
+    this.watchers.splice(index, 1);
+    return true;
+  }
+
+  public clear(): void {
+    this.watchers.length = 0;
+  }
+
+  /** One delivery, with a subscriber's failure kept to itself. */
+  public deliver(watcher: W, deliver: (watcher: W) => void): void {
+    try {
+      deliver(watcher);
+    } catch (error) {
+      console.error(`${this.label} failed`, error);
+    }
+  }
+
+  /** Delivers to everyone registered now, or just those matching. */
+  public each(
+    deliver: (watcher: W) => void,
+    matches?: (watcher: W) => boolean
+  ): void {
+    for (const watcher of this.all()) {
+      if (!matches || matches(watcher)) {
+        this.deliver(watcher, deliver);
+      }
+    }
+  }
+
+  /**
+   * An initial delivery to one subscriber, off the current task so it lands
+   * the way a live one would rather than before they can use the handle they
+   * are being given. Skipped if they leave before it lands.
+   */
+  public prime(watcher: W, deliver: (watcher: W) => void): void {
+    Promise.resolve().then(() => {
+      if (this.has(watcher)) {
+        this.deliver(watcher, deliver);
+      }
+    });
+  }
+}

package/src/simulator/Simulator.ts

@@ -11,28 +11,49 @@ import { CustomEventType } from '../interfaces';
 import { Chat, ContactEvent, MessageType } from '../display/Chat';
 import { Events, renderEvent } from '../events/eventRenderers';
 
-// test attachment URLs
-const TEST_IMAGES = [
-  'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_image_a.jpg',
-  'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_image_b.jpg',
-  'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_image_c.jpg',
-  'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_image_d.jpg'
-];
-
-const TEST_VIDEOS = [
-  'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_video_a.mp4'
-];
-
-const TEST_AUDIO = [
-  'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_audio_a.mp3'
-];
-
-const TEST_LOCATIONS = [
-  'geo:47.6062,-122.3321', // Seattle
-  'geo:-0.1807,-78.4678', // Quito
-  'geo:-2.9001,-79.0059', // Cuenca
-  'geo:-1.9536,30.0606' // Kigali
-];
+export interface SampleMedia {
+  images: string[];
+  videos: string[];
+  audio: string[];
+  locations: string[];
+}
+
+// the sample media the simulator attaches, hosted alongside our other
+// simulator assets
+const HOSTED_SAMPLES: SampleMedia = {
+  images: [
+    'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_image_a.jpg',
+    'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_image_b.jpg',
+    'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_image_c.jpg',
+    'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_image_d.jpg'
+  ],
+  videos: [
+    'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_video_a.mp4'
+  ],
+  audio: [
+    'https://s3.amazonaws.com/floweditor-assets.temba.io/simulator/sim_audio_a.mp3'
+  ],
+  locations: [
+    'geo:47.6062,-122.3321', // Seattle
+    'geo:-0.1807,-78.4678', // Quito
+    'geo:-2.9001,-79.0059', // Cuenca
+    'geo:-1.9536,30.0606' // Kigali
+  ]
+};
+
+let samples: SampleMedia = HOSTED_SAMPLES;
+
+/**
+ * Points the simulator's sample attachments somewhere else, returning the
+ * previous set so a caller can put it back. For tests, which shouldn't need
+ * our asset host to be reachable to run - the simulator itself always
+ * attaches the hosted samples above.
+ */
+export const setSampleMedia = (media: Partial<SampleMedia>): SampleMedia => {
+  const previous = samples;
+  samples = { ...samples, ...media };
+  return previous;
+};
 
 const truncateUrl = (url: string, maxLen = 50): string =>
   url && url.length > maxLen ? url.slice(0, maxLen) + '…' : url;
@@ -888,14 +909,15 @@ export class Simulator extends RapidElement {
   private boundClickOutsideHandler: ((event: MouseEvent) => void) | null = null;
 
   // attachment cycling indices - initialized randomly
-  private imageIndex = Math.floor(Math.random() * TEST_IMAGES.length);
-  private videoIndex = Math.floor(Math.random() * TEST_VIDEOS.length);
-  private audioIndex = Math.floor(Math.random() * TEST_AUDIO.length);
-  private locationIndex = Math.floor(Math.random() * TEST_LOCATIONS.length);
+  private imageIndex = Math.floor(Math.random() * samples.images.length);
+  private videoIndex = Math.floor(Math.random() * samples.videos.length);
+  private audioIndex = Math.floor(Math.random() * samples.audio.length);
+  private locationIndex = Math.floor(Math.random() * samples.locations.length);
 
-  // method to reset attachment indices for testing
+  // starts the attachment cycling from the top, so a test gets the same
+  // sample every run rather than wherever the random start landed
   public resetAttachmentIndices() {
-    this.imageIndex = 2;
+    this.imageIndex = 0;
     this.videoIndex = 0;
     this.audioIndex = 0;
     this.locationIndex = 0;
@@ -2176,20 +2198,21 @@ export class Simulator extends RapidElement {
     let attachment = '';
     switch (attachmentType) {
       case 'image':
-        attachment = `image/jpeg:${TEST_IMAGES[this.imageIndex]}`;
-        this.imageIndex = (this.imageIndex + 1) % TEST_IMAGES.length;
+        attachment = `image/jpeg:${samples.images[this.imageIndex]}`;
+        this.imageIndex = (this.imageIndex + 1) % samples.images.length;
         break;
       case 'video':
-        attachment = `video/mp4:${TEST_VIDEOS[this.videoIndex]}`;
-        this.videoIndex = (this.videoIndex + 1) % TEST_VIDEOS.length;
+        attachment = `video/mp4:${samples.videos[this.videoIndex]}`;
+        this.videoIndex = (this.videoIndex + 1) % samples.videos.length;
         break;
       case 'audio':
-        attachment = `audio/mp3:${TEST_AUDIO[this.audioIndex]}`;
-        this.audioIndex = (this.audioIndex + 1) % TEST_AUDIO.length;
+        attachment = `audio/mp3:${samples.audio[this.audioIndex]}`;
+        this.audioIndex = (this.audioIndex + 1) % samples.audio.length;
         break;
       case 'location':
-        attachment = TEST_LOCATIONS[this.locationIndex];
-        this.locationIndex = (this.locationIndex + 1) % TEST_LOCATIONS.length;
+        attachment = samples.locations[this.locationIndex];
+        this.locationIndex =
+          (this.locationIndex + 1) % samples.locations.length;
         break;
     }