@nyaruka/temba-components 0.170.1 → 0.172.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.170.1",
+  "version": "0.172.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/RapidElement.ts

@@ -40,6 +40,34 @@ export interface EventHandler {
   isWindow?: boolean;
 }
 
+/**
+ * Inline handlers compiled from an element's -<event-type> attribute, keyed
+ * by their source. Page authors write a finite set of these, so compiling
+ * each one once keeps dispatch off the Function constructor entirely.
+ */
+const inlineHandlers = new Map<string, (event: Event) => any>();
+
+const compileInlineHandler = (source: string): ((event: Event) => any) => {
+  let compiled = inlineHandlers.get(source);
+  if (!compiled) {
+    compiled = new Function(
+      'event',
+      `
+        with(document) {
+          with(this) {
+            let handler = ${source};
+            if(typeof handler === 'function') {
+              handler(event);
+            }
+          }
+        }
+      `
+    ) as (event: Event) => any;
+    inlineHandlers.set(source, compiled);
+  }
+  return compiled;
+};
+
 export class RapidElement extends LitElement {
   DEBUG = false;
   DEBUG_UPDATES = false;
@@ -49,34 +77,50 @@ export class RapidElement extends LitElement {
   service: string;
 
   private eles: { [selector: string]: HTMLDivElement } = {};
+
+  // teardowns for the listeners we installed, so disconnecting removes the
+  // exact functions we added
+  private listenerTeardowns: (() => void)[] = [];
+
   public getEventHandlers(): EventHandler[] {
     return [];
   }
 
+  /**
+   * Adds a listener this element owns the teardown for - it is bound to this
+   * element and removed automatically when we disconnect. Use this instead of
+   * addEventListener for anything on document or window, where a listener
+   * that outlives its element keeps the whole element alive.
+   */
+  public listenTo(
+    target: EventTarget,
+    event: string,
+    method: EventListener,
+    options?: AddEventListenerOptions
+  ): void {
+    const bound = method.bind(this);
+    target.addEventListener(event, bound, options);
+    this.listenerTeardowns.push(() =>
+      target.removeEventListener(event, bound, options)
+    );
+  }
+
   connectedCallback() {
     super.connectedCallback();
 
     for (const handler of this.getEventHandlers()) {
-      if (handler.isDocument) {
-        document.addEventListener(handler.event, handler.method.bind(this));
-      } else if (handler.isWindow) {
-        window.addEventListener(handler.event, handler.method.bind(this));
-      } else {
-        this.addEventListener(handler.event, handler.method.bind(this));
-      }
+      const target = handler.isDocument
+        ? document
+        : handler.isWindow
+          ? window
+          : this;
+      this.listenTo(target, handler.event, handler.method);
     }
   }
 
   disconnectedCallback() {
-    for (const handler of this.getEventHandlers()) {
-      if (handler.isDocument) {
-        document.removeEventListener(handler.event, handler.method);
-      } else if (handler.isWindow) {
-        window.removeEventListener(handler.event, handler.method);
-      } else {
-        this.removeEventListener(handler.event, handler.method);
-      }
-    }
+    this.listenerTeardowns.forEach((teardown) => teardown());
+    this.listenerTeardowns = [];
     super.disconnectedCallback();
   }
 
@@ -121,9 +165,7 @@ export class RapidElement extends LitElement {
   }
 
   public fireCustomEvent(type: CustomEventType, detail: any = {}): any {
-    if (this['DEBUG_EVENTS']) {
-      showEvent(this, type, detail);
-    }
+    showEvent(this, type, detail);
 
     const event = new CustomEvent(type, {
       detail,
@@ -135,30 +177,30 @@ export class RapidElement extends LitElement {
   }
 
   public dispatchEvent(event: any): any {
-    super.dispatchEvent(event);
+    const dispatched = super.dispatchEvent(event);
+
+    // the page can hang a handler off the target for any of our events, as a
+    // -<event-type> property or an attribute of the same name
     const ele = event.target;
-    if (ele) {
-      // lookup events with - prefix and try to invoke them
-      const eventFire = (ele as any)['-' + event.type];
-      if (eventFire) {
-        return eventFire(event);
-      } else {
-        const func = new Function(
-          'event',
-          `
-          with(document) {
-            with(this) {
-              let handler = ${ele.getAttribute('-' + event.type)};
-              if(typeof handler === 'function') { 
-                handler(event);
-              }
-            }
-          }
-        `
-        );
-        return func.call(ele, event);
-      }
+    if (!ele) {
+      return dispatched;
+    }
+
+    const eventFire = (ele as any)['-' + event.type];
+    if (eventFire) {
+      return eventFire(event);
     }
+
+    const inline = ele.getAttribute ? ele.getAttribute('-' + event.type) : null;
+    if (!inline) {
+      return dispatched;
+    }
+
+    // the compiled handler has no return value of its own, so handing its
+    // undefined back would read as a cancelled event - what the caller wants
+    // to know is whether anything called preventDefault
+    compileInlineHandler(inline).call(ele, event);
+    return dispatched;
   }
 
   public closestElement(selector: string, base: Element = this) {

package/src/events/eventRenderers.ts

@@ -59,6 +59,10 @@ export enum Events {
   TICKET_OPENED = 'ticket_opened',
   TICKET_REOPENED = 'ticket_reopened',
   TICKET_TOPIC_CHANGED = 'ticket_topic_changed',
+  // ephemeral, drives the chat's typing indicator instead of recording
+  // history - published by agents as they compose and never persisted
+  TYPING_STARTED = 'typing_started',
+  TYPING_STOPPED = 'typing_stopped',
   WARNING = 'warning',
   WEBHOOK_CALLED = 'webhook_called'
 }

package/src/flow/Editor.ts

@@ -58,6 +58,8 @@ import { Dialog } from '../layout/Dialog';
 import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
 import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
 import { FlowSearch, SearchResult } from './FlowSearch';
+import { RealtimeSubscription, subscribeToFlow } from '../live/Realtime';
+import { FlowDependency } from './dependencies';
 
 export function findNodeForExit(
   definition: FlowDefinition,
@@ -105,6 +107,10 @@ const EMPTY_FLOW_ISSUES: FlowIssue[] = [];
 // Used in both the CSS animation and the JS setTimeout.
 const PENDING_SAVE_DELAY = 5000;
 
+// Shortest gap (in ms) between activity reads, however many changes the flow
+// socket announces in that window.
+const ACTIVITY_FETCH_INTERVAL = 3000;
+
 /**
  * Manages a timed "pending changes" card that lets users discard or auto-save
  * after a delay.  Used for both auto-layout and shift+drag copy.
@@ -200,8 +206,17 @@ export class Editor extends RapidElement {
   @property({ type: Array })
   public features: string[] = [];
 
-  private activityTimer: number | null = null;
-  private activityInterval = 100; // Start with 100ms interval for fast initial load
+  private activityWatch: RealtimeSubscription = null;
+  private watchedActivityFlow: string = null;
+  private activityFetchTimer: number | null = null;
+  private activityFetchInFlight = false;
+  private activityFetchQueued = false;
+  private activityFetchToken = 0;
+  private assetWatch: RealtimeSubscription = null;
+  private watchedAssetStore: Store = null;
+  private flowInfoWatch: () => void = null;
+  private assetResolveVersion = 0;
+  private watchedAssetSignature = '';
 
   @fromStore(zustand, (state: AppState) => state.flowDefinition)
   public definition!: FlowDefinition;
@@ -1198,10 +1213,17 @@ export class Editor extends RapidElement {
     this.zoomManager = new ZoomManager(this);
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.syncAssetWatch(zustand.getState().flowInfo);
+    this.syncActivityWatch();
+  }
+
   protected firstUpdated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
     super.firstUpdated(changes);
+    this.syncAssetWatch(zustand.getState().flowInfo);
     this.plumber = new Plumber(this.querySelector('#canvas'), this);
     this.plumber.zoom = this.zoom;
     this.setupGlobalEventListeners();
@@ -1422,23 +1444,15 @@ export class Editor extends RapidElement {
       // defer to avoid triggering a reactive canvasSize update during this cycle
       setTimeout(() => this.updateCanvasSize(), 0);
 
-      // Start fetching activity data when definition is loaded
-      if (this.definition?.uuid) {
-        this.startActivityFetching();
-      }
+      this.syncActivityWatch();
     }
 
     if (changes.has('simulatorActive')) {
       if (this.simulatorActive) {
         // Close any open floating windows when simulator opens
         this.closeFloatingWindows();
-        // Stop polling when simulator becomes active
-        this.stopActivityFetching();
-      } else {
-        // Resume polling and refresh activity when simulator closes
-        this.activityInterval = 100; // Reset to fast initial interval
-        this.startActivityFetching();
       }
+      this.syncActivityWatch();
     }
 
     if (changes.has('activityData')) {
@@ -1653,55 +1667,188 @@ export class Editor extends RapidElement {
     });
   }
 
-  private startActivityFetching(): void {
-    // Don't start if simulator is active
-    if (this.simulatorActive) {
+  private syncActivityWatch(): void {
+    const flow = this.simulatorActive ? null : this.definition?.uuid;
+    if (this.activityWatch && flow === this.watchedActivityFlow) {
+      return;
+    }
+
+    if (this.activityWatch) {
+      this.activityWatch.unsubscribe();
+      this.activityWatch = null;
+    }
+    this.clearActivityFetch();
+    this.watchedActivityFlow = flow;
+    if (!flow) {
       return;
     }
-    // Fetch immediately
-    this.fetchActivityData();
+
+    this.activityWatch = subscribeToFlow(
+      flow,
+      (event) => {
+        if (event?.type === 'activity') {
+          this.scheduleActivityFetch(flow);
+        }
+      },
+      // fires on every (re)subscribe, so catch up on anything published while
+      // we were disconnected
+      () => this.scheduleActivityFetch(flow)
+    );
+
+    // the socket only tells us about *changes*, and it may never connect at
+    // all, so the first read doesn't wait on it
+    this.fetchActivityData(flow);
   }
 
-  private stopActivityFetching(): void {
-    if (this.activityTimer !== null) {
-      clearTimeout(this.activityTimer);
-      this.activityTimer = null;
+  /**
+   * Abandons any scheduled or in-flight read. The token makes the in-flight
+   * one a no-op when it lands, so a read for the flow we've stopped watching
+   * can neither hold up nor swallow the next flow's first read.
+   */
+  private clearActivityFetch(): void {
+    if (this.activityFetchTimer !== null) {
+      clearTimeout(this.activityFetchTimer);
+      this.activityFetchTimer = null;
     }
+    this.activityFetchQueued = false;
+    this.activityFetchInFlight = false;
+    this.activityFetchToken++;
   }
 
-  private fetchActivityData(): void {
-    if (!this.definition?.uuid) {
+  /**
+   * Coalesces activity publications into at most one request per window.
+   * Mailroom publishes once per committed sprint batch, so a flow running
+   * against a large group can otherwise announce many changes a second.
+   */
+  private scheduleActivityFetch(flow: string): void {
+    if (flow !== this.watchedActivityFlow || this.activityFetchTimer !== null) {
       return;
     }
+    this.activityFetchTimer = window.setTimeout(() => {
+      this.activityFetchTimer = null;
+      this.fetchActivityData(flow);
+    }, ACTIVITY_FETCH_INTERVAL);
+  }
 
-    // Don't fetch if simulator is active
-    if (this.simulatorActive) {
+  private fetchActivityData(flow: string): void {
+    if (
+      !this.isConnected ||
+      this.simulatorActive ||
+      flow !== this.watchedActivityFlow
+    ) {
       return;
     }
 
-    const activityEndpoint = `/flow/activity/${this.definition.uuid}/`;
     const store = getStore();
     if (!store) {
       return;
     }
-    const state = store.getState();
-    state.fetchActivity(activityEndpoint).then(() => {
-      // Guard against responses arriving after the editor is disconnected
-      if (!this.isConnected) {
+
+    // one request at a time, so responses can't land out of order and a burst
+    // of publications collapses into a single follow-up read
+    if (this.activityFetchInFlight) {
+      this.activityFetchQueued = true;
+      return;
+    }
+    this.activityFetchInFlight = true;
+    const token = ++this.activityFetchToken;
+    const done = () => {
+      // a flow change (or teardown) since this read started has already
+      // reset the bookkeeping for the flow we now care about
+      if (token !== this.activityFetchToken) {
         return;
       }
+      this.activityFetchInFlight = false;
+      if (this.activityFetchQueued) {
+        this.activityFetchQueued = false;
+        this.scheduleActivityFetch(flow);
+      }
+    };
+    Promise.resolve(
+      store.getState().fetchActivity(`/flow/activity/${flow}/`)
+    ).then(done, done);
+  }
+
+  private syncAssetNames(): void {
+    const store = getStore();
+    const state = zustand.getState();
+    if (!store || !state.flowDefinition || !state.flowInfo) {
+      return;
+    }
 
-      // Schedule next fetch with exponential backoff (max 5 minutes)
-      this.activityInterval = Math.min(60000 * 5, this.activityInterval + 100);
+    const canonical: FlowDependency[] = [];
+    for (const dependency of state.flowInfo.dependencies || []) {
+      const identity = dependency.uuid || dependency.key;
+      if (!identity) {
+        continue;
+      }
+      const asset = store.getAsset(dependency.type, identity);
+      if (asset) {
+        canonical.push({ ...dependency, name: asset.name });
+      }
+    }
+    state.updateDependencyNames(canonical);
+  }
 
-      if (this.activityTimer !== null) {
-        clearTimeout(this.activityTimer);
+  private async resolveAssetNames(info: AppState['flowInfo']): Promise<void> {
+    const store = getStore();
+    if (!store || !info) {
+      return;
+    }
+    const version = ++this.assetResolveVersion;
+    try {
+      const canonical = await store.resolveAssets(info.dependencies || []);
+      if (version === this.assetResolveVersion && this.isConnected) {
+        zustand.getState().updateDependencyNames(canonical);
       }
+    } catch (error) {
+      console.error('failed to resolve flow dependency assets', error);
+    }
+  }
 
-      this.activityTimer = window.setTimeout(() => {
-        this.fetchActivityData();
-      }, this.activityInterval);
-    });
+  private syncAssetWatch(info: AppState['flowInfo']): void {
+    if (!this.isConnected) {
+      return;
+    }
+    const store = getStore();
+    if (!store) {
+      return;
+    }
+    const interests = info?.dependencies || [];
+    const signature = interests
+      .map(
+        (dependency) =>
+          `${dependency.type}:${dependency.uuid || dependency.key || ''}`
+      )
+      .sort()
+      .join('|');
+    // the store is part of the key: a replaced <temba-store> leaves us
+    // watching a dead one otherwise
+    if (
+      this.assetWatch &&
+      store === this.watchedAssetStore &&
+      signature === this.watchedAssetSignature
+    ) {
+      return;
+    }
+    if (this.assetWatch) {
+      this.assetWatch.unsubscribe();
+    }
+    this.watchedAssetStore = store;
+    this.watchedAssetSignature = signature;
+    // the store caches the changed asset before publishing, so applying
+    // everything it has covers both a single change and a reconnect refresh
+    this.assetWatch = store.watchAssets(interests, () => this.syncAssetNames());
+    if (!this.flowInfoWatch) {
+      this.flowInfoWatch = zustand.subscribe(
+        (state) => state.flowInfo,
+        (info) => {
+          this.syncAssetWatch(info);
+          this.resolveAssetNames(info);
+        }
+      );
+      this.resolveAssetNames(zustand.getState().flowInfo);
+    }
   }
 
   private handleLanguageChange(languageCode: string): void {
@@ -1957,6 +2104,23 @@ export class Editor extends RapidElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
+    if (this.assetWatch) {
+      this.assetWatch.unsubscribe();
+      this.assetWatch = null;
+    }
+    if (this.activityWatch) {
+      this.activityWatch.unsubscribe();
+      this.activityWatch = null;
+    }
+    this.clearActivityFetch();
+    this.watchedActivityFlow = null;
+    this.watchedAssetStore = null;
+    this.watchedAssetSignature = '';
+    if (this.flowInfoWatch) {
+      this.flowInfoWatch();
+      this.flowInfoWatch = null;
+    }
+    this.assetResolveVersion++;
     this.zoomManager.teardownLoupe();
     getStore()?.getState().setFlushSave(null);
     this.dragManager.teardownListeners();
@@ -1969,10 +2133,6 @@ export class Editor extends RapidElement {
       clearTimeout(this.saveTimer);
       this.saveTimer = null;
     }
-    if (this.activityTimer !== null) {
-      clearTimeout(this.activityTimer);
-      this.activityTimer = null;
-    }
     this.pendingTimer.clearTimer();
     window.removeEventListener('resize', this.boundWindowResize);