@nyaruka/temba-components 0.169.0 → 0.171.0

package/src/list/TembaList.ts

@@ -56,6 +56,9 @@ export class TembaList extends RapidElement {
   @property({ attribute: false })
   renderOption: (option: any, selected: boolean) => TemplateResult;
 
+  @property({ attribute: false })
+  renderDivider: (prev: any, option: any) => TemplateResult | null;
+
   @property({ attribute: false })
   renderOptionDetail: (option: any, selected: boolean) => TemplateResult;
 
@@ -68,6 +71,10 @@ export class TembaList extends RapidElement {
 
   reverseRefresh = true;
 
+  // subclasses can enforce a display order when refreshed items are merged in,
+  // otherwise new items simply land at the top of the list
+  protected compareItems: (a: any, b: any) => number = null;
+
   // subclasses that get realtime updates can opt out of interval polling
   protected pollingEnabled = true;
 
@@ -251,6 +258,24 @@ export class TembaList extends RapidElement {
     return Promise.resolve(results);
   }
 
+  /**
+   * Finds where the item our cursor was pinned to ended up after a merge
+   * re-ordered our list. Returns null if the cursor is still on the right item,
+   * otherwise the index it moved to (-1 if it is no longer in the list).
+   */
+  private findRepinnedCursorIndex(prevItem: any, newItems: any[]): number {
+    if (!prevItem) {
+      return null;
+    }
+
+    const prevValue = this.getValue(prevItem);
+    if (prevValue === this.getValue(newItems[this.cursorIndex])) {
+      return null;
+    }
+
+    return newItems.findIndex((option) => this.getValue(option) === prevValue);
+  }
+
   /**
    * Refreshes the first page, updating any found items in our list
    */
@@ -303,7 +328,15 @@ export class TembaList extends RapidElement {
         }
         const newItems = [...results, ...items];
 
+        // capture the top item before any display sort - it means "the newest
+        // item we just fetched, or the previous top if we fetched nothing" and
+        // drives the Refreshed event
         const topItem = newItems[0];
+
+        if (this.compareItems) {
+          newItems.sort(this.compareItems);
+        }
+
         if (
           !this.mostRecentItem ||
           JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)
@@ -311,27 +344,21 @@ export class TembaList extends RapidElement {
           this.mostRecentItem = topItem;
         }
 
-        if (prevItem) {
-          const newItem = newItems[this.cursorIndex];
-          const prevValue = this.getValue(prevItem);
-          if (prevValue !== this.getValue(newItem)) {
-            const newIndex = newItems.findIndex(
-              (option) => this.getValue(option) === prevValue
-            );
-            this.cursorIndex = newIndex;
-
-            // make sure our focused item is visible
-            window.setTimeout(() => {
-              const options = this.shadowRoot.querySelector('temba-options');
-              if (options) {
-                const option =
-                  options.shadowRoot.querySelector('.option.focused');
-                if (option) {
-                  option.scrollIntoView({ block: 'end', inline: 'nearest' });
-                }
+        const newIndex = this.findRepinnedCursorIndex(prevItem, newItems);
+        if (newIndex !== null && newIndex > -1) {
+          this.cursorIndex = newIndex;
+
+          // make sure our focused item is visible
+          window.setTimeout(() => {
+            const options = this.shadowRoot.querySelector('temba-options');
+            if (options) {
+              const option =
+                options.shadowRoot.querySelector('.option.focused');
+              if (option) {
+                option.scrollIntoView({ block: 'end', inline: 'nearest' });
               }
-            }, 0);
-          }
+            }
+          }, 0);
         }
 
         this.items = newItems;
@@ -457,18 +484,60 @@ export class TembaList extends RapidElement {
   private handleScrollThreshold() {
     if (this.nextPage && !this.loading) {
       this.loading = true;
-      fetchResultsPage(this.nextPage).then((page: ResultsPage) => {
-        this.sanitizeResults(page.results).then((sanitizedResults) => {
-          if (this.sanitizeOption) {
-            sanitizedResults.forEach(this.sanitizeOption);
-          }
+      fetchResultsPage(this.nextPage)
+        .then((page: ResultsPage) => {
+          return this.sanitizeResults(page.results).then(
+            (sanitizedResults: any[]) => {
+              if (this.sanitizeOption) {
+                sanitizedResults.forEach(this.sanitizeOption);
+              }
+
+              // the item our cursor is pinned to, sorting can move it
+              const prevItem = this.items[this.cursorIndex];
+
+              // drop anything we already have, a poll can pull an item from the
+              // next page up into our loaded window before we fetch it
+              const seen = new Set(
+                this.items.map((option) => this.getValue(option))
+              );
+              const appended = (sanitizedResults || []).filter(
+                (option: any) => {
+                  const value = this.getValue(option);
+                  if (seen.has(value)) {
+                    return false;
+                  }
+                  seen.add(value);
+                  return true;
+                }
+              );
 
-          this.items = [...this.items, ...sanitizedResults];
-          this.nextPage = page.next;
-          this.pages++;
+              const items = [...this.items, ...appended];
+
+              // the server pages in the same total order we display in, so this is
+              // normally a no-op, but a poll can re-sort an item (say a ticket that
+              // just closed) into the loaded window - without this the appended
+              // page would land below it
+              if (this.compareItems) {
+                items.sort(this.compareItems);
+              }
+
+              // the sort can shift our selection, keep the cursor on it
+              const newIndex = this.findRepinnedCursorIndex(prevItem, items);
+              if (newIndex !== null && newIndex > -1) {
+                this.cursorIndex = newIndex;
+              }
+
+              this.items = items;
+              this.nextPage = page.next;
+              this.pages++;
+              this.loading = false;
+            }
+          );
+        })
+        .catch(() => {
+          // let the next scroll try again instead of wedging on loading
           this.loading = false;
         });
-      });
     }
   }
 
@@ -512,6 +581,7 @@ export class TembaList extends RapidElement {
         ?loading=${this.loading}
         ?internalFocusDisabled=${this.internalFocusDisabled}
         .renderOption=${this.renderOption}
+        .renderDivider=${this.renderDivider}
         .renderOptionDetail=${this.renderOptionDetail}
         @temba-scroll-threshold=${this.handleScrollThreshold}
         @temba-selection=${this.handleSelection.bind(this)}

package/src/list/TicketList.ts

@@ -1,5 +1,6 @@
 import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import { TembaList } from './TembaList';
 import { Contact } from '../interfaces';
 import { Icon } from '../Icons';
@@ -9,15 +10,17 @@ export class TicketList extends TembaList {
   agent = '';
 
   public getRefreshEndpoint() {
-    if (this.items.length > 0) {
-      const lastActivity = this.items[0].ticket.last_activity_on;
+    // open tickets sort above closed ones, so the newest activity can be
+    // anywhere in the list, not just the top. Skip anything unparseable so a
+    // single bad timestamp can't poison the cursor with NaN
+    const lastActivity = this.items.reduce((newest, item) => {
+      const activity = new Date(item.ticket.last_activity_on).getTime();
+      return isNaN(activity) ? newest : Math.max(newest, activity);
+    }, 0);
+
+    if (lastActivity > 0) {
       const separator = this.endpoint.includes('?') ? '&' : '?';
-      return (
-        this.endpoint +
-        separator +
-        'after=' +
-        new Date(lastActivity).getTime() * 1000
-      );
+      return this.endpoint + separator + 'after=' + lastActivity * 1000;
     }
     return this.endpoint;
   }
@@ -35,10 +38,79 @@ export class TicketList extends TembaList {
     super();
 
     this.valueKey = 'ticket.uuid';
-    this.renderOption = (contact: Contact): TemplateResult => {
+    // the refresh feed is served oldest first - the inherited reverseRefresh
+    // keeps mostRecentItem meaning the newest fetched item (compareItems
+    // re-sorts the merged list immediately anyway)
+
+    this.compareItems = (a: Contact, b: Contact): number => {
+      const aClosed = !!a.ticket.closed_on;
+      const bClosed = !!b.ticket.closed_on;
+      if (aClosed !== bClosed) {
+        return aClosed ? 1 : -1;
+      }
+      return (
+        new Date(b.ticket.last_activity_on).getTime() -
+        new Date(a.ticket.last_activity_on).getTime()
+      );
+    };
+    // a quiet label marks where the list crosses from open into closed
+    // tickets - the rows themselves then only need gentle muting
+    this.renderDivider = (
+      prev: Contact,
+      contact: Contact
+    ): TemplateResult | null => {
+      if (!contact.ticket.closed_on || (prev && prev.ticket.closed_on)) {
+        return null;
+      }
+      const closed = msg('Closed');
+      return html`
+        <div
+          role="separator"
+          aria-label=${closed}
+          style="display:flex; align-items:center; gap:0.6em; padding:0.9em var(--pad) 0.2em var(--pad);"
+        >
+          <div
+            style="font-size:0.7em; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-4);"
+          >
+            ${closed}
+          </div>
+          <div
+            style="flex-grow:1; height:1px; background:var(--color-widget-border);"
+          ></div>
+        </div>
+      `;
+    };
+    this.renderOption = (
+      contact: Contact,
+      selected: boolean
+    ): TemplateResult => {
+      // closed tickets are settled history - a compact single line that
+      // recedes behind the open work above it
+      if (contact.ticket.closed_on) {
+        return html`
+          <div
+            style="display:flex; align-items:baseline; margin-top:0.1em; margin-bottom:0.1em; ${selected
+              ? ''
+              : 'color:var(--text-3);'}"
+          >
+            <div
+              style="flex:1; min-width:0; font-weight:400; line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
+            >
+              ${contact.name}
+            </div>
+            <div style="font-size:0.8em; margin-left:0.75em;">
+              <temba-date
+                value=${contact.ticket.closed_on}
+                display="duration"
+              ></temba-date>
+            </div>
+          </div>
+        `;
+      }
+
       return html`
         <div
-          style="align-items:center; margin-top: 0.1em; margin-bottom: 0.1em"
+          style="align-items:center; margin-top: 0.1em; margin-bottom: 0.1em;"
         >
           <div
             style="display:flex; align-items: flex-start;border:0px solid red;"
@@ -49,10 +121,8 @@ export class TicketList extends TembaList {
               >
                 ${contact.name}
               </div>
-              ${contact.ticket.closed_on
-                ? null
-                : contact.last_msg
-                  ? html`
+              ${contact.last_msg
+                ? html`
                     <div
                       style="font-size: 0.9em; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;"
                     >
@@ -81,13 +151,13 @@ export class TicketList extends TembaList {
                       }
                     </div></div>
                   `
-                  : null}
+                : null}
             </div>
             <div
               style="margin-right: -5px; margin-top: 0px;display:flex;flex-direction:column;align-items:flex-end;max-width:60px;min-width:30px;border:0px solid green;text-align:right"
             >
               <div>
-                ${!contact.ticket.closed_on && contact.ticket.assignee
+                ${contact.ticket.assignee
                   ? html`<temba-user
                       name=${contact.ticket.assignee.name}
                       email=${contact.ticket.assignee.email}
@@ -101,8 +171,7 @@ export class TicketList extends TembaList {
 
           <div style="font-size:0.8em;text-align:right;border:0px solid red;">
             <temba-date
-              value=${contact.ticket.closed_on ||
-              contact.ticket.last_activity_on}
+              value=${contact.ticket.last_activity_on}
               display="duration"
             ></temba-date>
           </div>

package/src/live/ContactChat.ts

@@ -883,9 +883,15 @@ export class ContactChat extends ContactStoreElement {
       return null;
     }
 
+    // unparseable values and zero-value times (e.g. go's zero time for a
+    // contact that has never been seen) mean there's no last seen to show
+    const lastSeen = DateTime.fromISO(lastSeenOn);
+    if (!lastSeen.isValid || lastSeen.year <= 1) {
+      return null;
+    }
+
     // recent activity speaks for itself in the chat - only surface last
     // seen once the contact has been quiet for at least an hour
-    const lastSeen = DateTime.fromISO(lastSeenOn);
     const minutes = DateTime.now().diff(lastSeen, 'minutes').minutes;
     if (minutes < 60) {
       return null;

package/src/live/Realtime.ts

@@ -115,6 +115,28 @@ export const subscribeToNotifications = (
   );
 };
 
+/**
+ * Workspace-wide state changes shared by every component on the page.
+ */
+export const subscribeToOrganization = (
+  onEvent: (event: any) => void,
+  onSubscribed?: () => void
+): RealtimeSubscription => {
+  return subscribeWhenReady((ctx) => `org:${ctx.org}`, onEvent, onSubscribed);
+};
+
+/**
+ * Realtime events for a flow open in the editor. Needs no page context
+ * because the flow UUID uniquely identifies the authorized channel.
+ */
+export const subscribeToFlow = (
+  flow: string,
+  onEvent: (event: any) => void,
+  onSubscribed?: () => void
+): RealtimeSubscription => {
+  return subscribeToSocket(`flow:${flow}`, onEvent, onSubscribed);
+};
+
 /**
  * A contact's history events, or a ticket's detail events when a ticket is
  * given. Needs no page context so subscribes immediately.

package/src/locales/es.ts

@@ -14,6 +14,7 @@
 'sbc913d7dc0f33877': `to add`,
 's7722a91d3a512442': str`Last seen ${0}`,
 's22965bb9808befb0': `Interrupt`,
+'s6dbbe2646b239ca5': `Closed`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/locales/fr.ts

@@ -14,6 +14,7 @@
 'sbc913d7dc0f33877': `to add`,
 's7722a91d3a512442': str`Last seen ${0}`,
 's22965bb9808befb0': `Interrupt`,
+'s6dbbe2646b239ca5': `Closed`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/locales/pt.ts

@@ -14,6 +14,7 @@
 'sbc913d7dc0f33877': `to add`,
 's7722a91d3a512442': str`Last seen ${0}`,
 's22965bb9808befb0': `Interrupt`,
+'s6dbbe2646b239ca5': `Closed`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/simulator/Simulator.ts

@@ -630,6 +630,7 @@ export class Simulator extends RapidElement {
       }
       .message-input input {
         flex: 1;
+        min-width: 0;
         border: 1px solid #c6c6c857;
         border-radius: 20px;
         padding: 8px 15px;

package/src/store/AppState.ts

@@ -15,10 +15,60 @@ import { immer } from 'zustand/middleware/immer';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { property } from 'lit/decorators.js';
 import { produce } from 'immer';
+import {
+  FlowDependency,
+  replaceDependencies,
+  resolveDependencyNames
+} from '../flow/dependencies';
 
 export const FLOW_SPEC_VERSION = '14.3';
 const CANVAS_PADDING = 800;
 
+// how long a revision load will wait on canonical names before rendering the
+// names embedded in the definition, which the editor heals asynchronously
+const DEPENDENCY_RESOLVE_TIMEOUT = 3000;
+
+export type DependencyResolver = (
+  dependencies: FlowDependency[]
+) => Promise<FlowDependency[]>;
+
+let dependencyResolver: DependencyResolver | null = null;
+
+/** Installs the page-level canonical-name resolver and returns the previous
+ * resolver so a disconnected store can restore it in tests. */
+export const setDependencyResolver = (
+  resolver: DependencyResolver | null
+): DependencyResolver | null => {
+  const previous = dependencyResolver;
+  dependencyResolver = resolver;
+  return previous;
+};
+
+/** The currently installed resolver, so a store can tell whether it is still
+ * the owner before restoring the one it replaced. */
+export const getDependencyResolver = (): DependencyResolver | null =>
+  dependencyResolver;
+
+/** Resolves with null if the given promise hasn't settled in time. */
+const withTimeout = async <T>(
+  promise: Promise<T>,
+  timeout: number
+): Promise<T | null> => {
+  let timer: any = null;
+  try {
+    return await Promise.race([
+      promise,
+      new Promise<null>((resolve) => {
+        timer = setTimeout(() => resolve(null), timeout);
+      })
+    ]);
+  } finally {
+    if (timer !== null) {
+      clearTimeout(timer);
+    }
+  }
+};
+
 /**
  * Temporary: Reclassify nodes based on whether they contain terminal actions.
  * - execute_actions nodes with a terminal action become "terminal"
@@ -105,15 +155,6 @@ export interface InfoResult {
   node_uuids: string[];
 }
 
-export interface ObjectRef {
-  uuid: string;
-  name: string;
-}
-
-export interface TypedObjectRef extends ObjectRef {
-  type: string;
-}
-
 export interface Language {
   code: string;
   name: string;
@@ -133,7 +174,7 @@ export interface FlowIssue {
 
 export interface FlowInfo {
   results: InfoResult[];
-  dependencies: TypedObjectRef[];
+  dependencies: FlowDependency[];
   counts: { nodes: number; languages: number };
   locals: string[];
   issues?: FlowIssue[];
@@ -220,6 +261,7 @@ export interface AppState {
 
   setFlowContents: (flow: FlowContents) => void;
   setFlowInfo: (info: FlowInfo) => void;
+  updateDependencyNames: (dependencies: FlowDependency[]) => void;
   setRevision: (revision: number) => void;
   setLanguageCode: (languageCode: string) => void;
   setDirtyDate: (date: Date) => void;
@@ -305,6 +347,31 @@ export const zustand = createStore<AppState>()(
           throw new Error('Network response was not ok');
         }
         const data = (await response.json()) as FlowContents;
+        if (dependencyResolver && data.info?.dependencies?.length) {
+          try {
+            // resolving before the first paint avoids a visible flash of stale
+            // names, but a slow endpoint must never hold the editor hostage -
+            // past the timeout we render and let the editor's watcher heal it
+            const canonical = await withTimeout(
+              dependencyResolver(data.info.dependencies),
+              DEPENDENCY_RESOLVE_TIMEOUT
+            );
+            const dependencies = canonical
+              ? replaceDependencies(data.info.dependencies, canonical)
+              : null;
+            if (dependencies) {
+              data.info = { ...data.info, dependencies };
+              data.definition = resolveDependencyNames(
+                data.definition,
+                canonical
+              );
+            }
+          } catch (error) {
+            // A name lookup shouldn't make an otherwise valid flow unusable.
+            // Keep its embedded names and let a later socket/reconnect heal it.
+            console.error('failed to resolve flow dependency names', error);
+          }
+        }
         reclassifyTerminalNodes(data.definition);
         reclassifyVoiceWaitNodes(data.definition);
         const issueMaps = buildIssueMaps(data.info?.issues);
@@ -438,6 +505,26 @@ export const zustand = createStore<AppState>()(
         });
       },
 
+      updateDependencyNames: (changed: FlowDependency[]) => {
+        set((state: AppState) => {
+          if (!state.flowInfo || !state.flowDefinition) {
+            return;
+          }
+          const dependencies = replaceDependencies(
+            state.flowInfo.dependencies,
+            changed
+          );
+          if (!dependencies) {
+            return;
+          }
+          state.flowInfo.dependencies = dependencies;
+          state.flowDefinition = resolveDependencyNames(
+            state.flowDefinition,
+            changed
+          );
+        });
+      },
+
       setRevision: (revision: number) => {
         set((state: AppState) => {
           state.flowDefinition.revision = revision;