@nyaruka/temba-components 0.164.0 → 0.166.0

package/orca/setup.sh

@@ -3,7 +3,7 @@
 # Orca setup hook for a temba-components worktree.
 # Symlinks shared utility files from nyaruka/utils, ensures the devcontainer
 # is built/running (recreating it if the bind mounts are stale), and installs
-# pnpm dependencies inside the worktree.
+# bun dependencies inside the worktree.
 #
 # Usage:
 #   ./orca/setup.sh                  # run directly
@@ -75,7 +75,7 @@ esac
 # Install dependencies inside the worktree.
 docker exec "$CONTAINER_NAME" bash -c '
     cd "/workspaces/worktrees/temba-components/'"$WORKSPACE_NAME"'"
-    pnpm install
+    bun install
 '
 
 echo "Worktree '$WORKSPACE_NAME' ready for development"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.164.0",
+  "version": "0.166.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -9,25 +9,25 @@
   "license": "AGPL-3.0-only",
   "repository": "https://github.com/nyaruka/temba-components/",
   "scripts": {
-    "start": "concurrently --kill-others --names tsc,web-dev-server \"pnpm tsc:watch\" \"web-dev-server --app-index demo/index.html --node-resolve --watch --port 3010 --esbuild-target auto\"",
+    "start": "concurrently --kill-others --names tsc,web-dev-server \"bun run tsc:watch\" \"web-dev-server --app-index demo/index.html --node-resolve --watch --port 3010 --esbuild-target auto\"",
     "tsc:watch": "tsc --watch",
-    "build": "rimraf dist && pnpm svg && tsc && rollup -c rollup.components.mjs ",
+    "build": "rimraf dist && bun run svg && tsc && rollup -c rollup.components.mjs ",
     "build-wc": "rollup -c rollup.webchat.mjs",
-    "dev": "pnpm build && cp -R ./dist/* ../temba/rapidpro/node_modules/@nyaruka/temba-components/dist/ && cp -R ./dist/* ../floweditor/node_modules/@nyaruka/temba-components/dist/",
-    "pre-commit": "pnpm locale:extract && pnpm locale:build && pnpm svg && git add ./src/Icons.ts ./static/svg/index.svg ./xliff ./src/locales && lint-staged",
+    "dev": "bun run build && cp -R ./dist/* ../temba/rapidpro/node_modules/@nyaruka/temba-components/dist/ && cp -R ./dist/* ../floweditor/node_modules/@nyaruka/temba-components/dist/",
+    "pre-commit": "bun run locale:extract && bun run locale:build && bun run svg && git add ./src/Icons.ts ./static/svg/index.svg ./xliff ./src/locales && lint-staged",
     "format:eslint": "eslint --ext .ts . --fix --ignore-path .gitignore --ignore-pattern \"src/locales/\"",
     "format:prettier": "prettier \"**/*.js\" \"**/*.ts\" \"!src/locales/**\" --config .prettierrc --write --ignore-path .gitignore",
-    "format": "pnpm format:eslint && pnpm format:prettier",
+    "format": "bun run format:eslint && bun run format:prettier",
     "test": "wtr --node-resolve",
     "test:fast": "wtr --node-resolve --fast",
     "test:coverage": "wtr --node-resolve --coverage",
     "check-coverage": "node check-coverage.js",
-    "validate": "pnpm format && pnpm build && pnpm test:coverage && pnpm check-coverage",
+    "validate": "bun run format && bun run build && bun run test:coverage && bun run check-coverage",
     "test:watch": "wtr --node-resolve --watch",
     "stress-test": "node stress-test.js",
     "svg": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/index.svg' --usage='./src/Icons.ts'",
     "svg-wc": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/webchat.svg' --usage='./src/webchat/index.ts'",
-    "version": "pnpm run build && auto-changelog -p && git add CHANGELOG.md",
+    "version": "bun run build && auto-changelog -p && git add CHANGELOG.md",
     "locale:extract": "lit-localize extract --config localize.config.json",
     "locale:build": "echo 'Building localizations..' && lit-localize build --config localize.config.json > dist/locale.out 2>&1",
     "dev-data:sync": "node scripts/dev-data-sync.mjs copy",
@@ -112,14 +112,9 @@
     "typescript": "5.9.3",
     "yargs": "^17.7.2"
   },
-  "pnpm": {
-    "overrides": {
-      "trim": "^0.0.3",
-      "prismjs": "^1.23.0",
-      "@open-wc/testing-helpers": "3.0.0",
-      "@types/minimatch": "5.1.2",
-      "@types/chai": "4.3.20"
-    }
-  },
-  "packageManager": "pnpm@9.15.4"
+  "overrides": {
+    "@open-wc/testing-helpers": "3.0.0",
+    "@types/minimatch": "5.1.2",
+    "@types/chai": "4.3.20"
+  }
 }

package/scripts/dev-data-sync.mjs

@@ -117,7 +117,7 @@ function showStatus() {
   
   if (!fs.existsSync(DEV_DATA_DIR)) {
     console.log('❌ No development data directory found');
-    console.log('💡 Run the dev server to initialize, or use "pnpm dev-data:reset"');
+    console.log('💡 Run the dev server to initialize, or use "bun run dev-data:reset"');
     return;
   }
 
@@ -175,8 +175,8 @@ switch (command) {
     console.log('  reset/wipe  - Wipe dev data and restore defaults');
     console.log('  status      - Show current status');
     console.log('');
-    console.log('Usage: pnpm dev-data:copy');
-    console.log('       pnpm dev-data:reset');
-    console.log('       pnpm dev-data:status');
+    console.log('Usage: bun run dev-data:copy');
+    console.log('       bun run dev-data:reset');
+    console.log('       bun run dev-data:status');
     process.exit(1);
 }

package/src/Icons.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-duplicate-enum-values */
-// for cache busting we dynamically generate a fingerprint, use pnpm svg to update
-export const SVG_FINGERPRINT = '45268f1573f1e352c7d62232863725bb';
+// for cache busting we dynamically generate a fingerprint, use bun run svg to update
+export const SVG_FINGERPRINT = '27198f759c371df944f8ec5de0a29dd6';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -132,6 +132,7 @@ export enum Icon {
   progress_spinner = 'refresh-cw-04',
   refresh = 'refresh-cw-05',
   featured = 'star-01',
+  featured_filled = 'star-filled',
   quick_replies = 'dotpoints-01',
   recording = 'microphone-01',
   resend = 'refresh-cw-05',

package/src/display/Chat.ts

@@ -11,6 +11,10 @@ const BATCH_TIME_WINDOW = 60 * 60 * 1000;
 const SCROLL_FETCH_BUFFER = 200; // pixels from top
 const MIN_FETCH_TIME = 250;
 
+// how long a typing indicator lives without a fresh pulse - stop events can
+// be missed (they're excluded from history recovery) so indicators decay
+const TYPING_TIMEOUT = 10 * 1000;
+
 const getUnsendableReasonMessage = (reason: string): string => {
   switch (reason) {
     case 'no_route':
@@ -80,6 +84,7 @@ export interface Msg {
   urn: string;
   direction: string;
   type: string;
+  external_id?: string;
   attachments: string[];
   unsendable_reason?:
     | 'no_route'
@@ -114,6 +119,28 @@ export interface MsgEvent extends ContactEvent {
   _logs_url?: string;
 }
 
+export interface TypingEvent extends ContactEvent {
+  direction?: string;
+}
+
+// typing indicators group and side with real messages: a user typing
+// (outgoing) behaves like a reply, a contact typing (incoming) like a
+// received message
+const effectiveType = (event: ContactEvent): string => {
+  if (event.type === 'typing_started') {
+    return (event as TypingEvent).direction === 'incoming'
+      ? 'msg_received'
+      : 'msg_created';
+  }
+  return event.type;
+};
+
+// identifies who a typing indicator belongs to - the user when stamped,
+// otherwise the contact
+const getTypingKey = (event: TypingEvent): string => {
+  return event._user?.uuid || 'contact';
+};
+
 // whether a message has nothing to show in its bubble (and isn't deleted)
 const isEmptyMsg = (event: MsgEvent): boolean =>
   !event._deleted &&
@@ -371,6 +398,43 @@ export class Chat extends RapidElement {
         color: #aaa;
       }
 
+      .typing-dots {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 0;
+      }
+
+      .typing-dots span {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        background: currentColor;
+        opacity: 0.4;
+        animation: typing-bounce 1.2s ease-in-out infinite;
+      }
+
+      .typing-dots span:nth-child(2) {
+        animation-delay: 0.15s;
+      }
+
+      .typing-dots span:nth-child(3) {
+        animation-delay: 0.3s;
+      }
+
+      @keyframes typing-bounce {
+        0%,
+        60%,
+        100% {
+          transform: translateY(0);
+          opacity: 0.4;
+        }
+        30% {
+          transform: translateY(-3px);
+          opacity: 1;
+        }
+      }
+
       .message-text {
         white-space: pre-wrap;
         margin-bottom: 0;
@@ -849,10 +913,24 @@ export class Chat extends RapidElement {
   private msgMap = new Map<string, ContactEvent>();
   private metadataCache = new Map<string, ContactEvent>();
 
+  // ephemeral typing indicators by author key - they live in msgMap and
+  // messageGroups like real messages (so they group and render normally)
+  // but are added and removed through setTyping / clearTyping
+  private typingEvents = new Map<string, TypingEvent>();
+  private typingTimeouts = new Map<string, number>();
+
   // bumped on reset so deferred addMessages work from before a reset is
   // discarded rather than re-merged into the fresh view
   private resetGeneration = 0;
 
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    // clear pending typing decay timers so no callback fires on a detached
+    // element (typingEvents/msgMap are left intact for a possible reconnect)
+    this.typingTimeouts.forEach((timeout) => window.clearTimeout(timeout));
+    this.typingTimeouts.clear();
+  }
+
   public firstUpdated(
     changed: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -911,9 +989,21 @@ export class Chat extends RapidElement {
         const isScrolledAway =
           scrollableHeight > 0 && Math.abs(ele.scrollTop) > 50;
 
+        // a real message from someone typing replaces their indicator, and
+        // any remaining indicators re-float below the appended messages
+        if (append) {
+          this.clearTypingForAuthors(
+            newMessages.map((uuid) => this.msgMap.get(uuid))
+          );
+        }
+
         const grouped = this.groupMessages(newMessages);
         this.insertGroups(grouped, append);
 
+        if (append) {
+          this.refloatTyping();
+        }
+
         // show notification if new messages are appended and user is scrolled away from bottom
         // but not during search (searchHighlight is set)
         if (
@@ -986,6 +1076,115 @@ export class Chat extends RapidElement {
     return isNew;
   }
 
+  /**
+   * Shows a typing indicator for the event's author, appended to the
+   * newest messages so it groups with them. Repeat pulses from the same
+   * author just refresh the decay timer; without fresh pulses or an
+   * explicit clearTyping the indicator decays on its own.
+   */
+  public setTyping(event: TypingEvent) {
+    const key = getTypingKey(event);
+    const shown = this.typingEvents.get(key);
+    if (shown) {
+      // keep the indicator's timestamp fresh so a long-lived one doesn't
+      // drift across the grouping time window and split into its own group
+      shown.created_on = event.created_on;
+    } else {
+      this.typingEvents.set(key, event);
+      this.addMessage(event);
+      this.insertGroups(this.groupMessages([event.uuid]), true);
+    }
+
+    const existing = this.typingTimeouts.get(key);
+    if (existing) {
+      window.clearTimeout(existing);
+    }
+    this.typingTimeouts.set(
+      key,
+      window.setTimeout(() => this.removeTyping(key), TYPING_TIMEOUT)
+    );
+  }
+
+  /**
+   * Clears the typing indicator for the event's author, or all indicators
+   * when no event is given.
+   */
+  public clearTyping(event?: TypingEvent) {
+    if (event) {
+      this.removeTyping(getTypingKey(event));
+    } else {
+      for (const key of [...this.typingEvents.keys()]) {
+        this.removeTyping(key);
+      }
+    }
+  }
+
+  private removeTyping(key: string) {
+    const timeout = this.typingTimeouts.get(key);
+    if (timeout) {
+      window.clearTimeout(timeout);
+      this.typingTimeouts.delete(key);
+    }
+
+    const event = this.typingEvents.get(key);
+    if (event) {
+      this.typingEvents.delete(key);
+      this.removeEvent(event.uuid);
+    }
+  }
+
+  private removeEvent(uuid: string) {
+    this.msgMap.delete(uuid);
+    for (let i = 0; i < this.messageGroups.length; i++) {
+      const group = this.messageGroups[i];
+      const idx = group.messages.indexOf(uuid);
+      if (idx >= 0) {
+        group.messages.splice(idx, 1);
+        if (group.messages.length === 0) {
+          this.messageGroups.splice(i, 1);
+        }
+        break;
+      }
+    }
+    this.requestUpdate('messageGroups');
+  }
+
+  // an author's real message replaces their typing indicator
+  private clearTypingForAuthors(events: ContactEvent[]) {
+    for (const event of events) {
+      if (event.type === 'typing_started') {
+        continue;
+      }
+      const key = event._user?.uuid
+        ? event._user.uuid
+        : event.type === 'msg_received'
+          ? 'contact'
+          : null;
+      if (key && this.typingEvents.has(key)) {
+        this.removeTyping(key);
+      }
+    }
+  }
+
+  // re-appends active typing indicators so they always sit below the
+  // newest messages
+  private refloatTyping() {
+    if (this.typingEvents.size === 0) {
+      return;
+    }
+    const events = [...this.typingEvents.values()];
+    for (const event of events) {
+      this.removeEvent(event.uuid);
+    }
+    for (const event of events) {
+      this.addMessage(event);
+    }
+    this.insertGroups(
+      this.groupMessages(events.map((event) => event.uuid)),
+      true
+    );
+  }
+
   public messageExists(msg: ContactEvent): boolean {
     return this.msgMap.has(msg.uuid);
   }
@@ -1002,18 +1201,19 @@ export class Chat extends RapidElement {
     // for type equivalence, treat all non-message types as the same.
     // Notes are treated like messages so they group with other notes
     // only when type + author match (and split from non-note events).
+    const type1 = effectiveType(msg1);
+    const type2 = effectiveType(msg2);
     const isMsg1 =
-      msg1.type === 'msg_created' ||
-      msg1.type === 'msg_received' ||
-      msg1.type === 'ivr_created' ||
-      msg1.type === 'ticket_note_added';
+      type1 === 'msg_created' ||
+      type1 === 'msg_received' ||
+      type1 === 'ivr_created' ||
+      type1 === 'ticket_note_added';
     const isMsg2 =
-      msg2.type === 'msg_created' ||
-      msg2.type === 'msg_received' ||
-      msg2.type === 'ivr_created' ||
-      msg2.type === 'ticket_note_added';
-    const typeMatch =
-      isMsg1 && isMsg2 ? msg1.type === msg2.type : isMsg1 === isMsg2;
+      type2 === 'msg_created' ||
+      type2 === 'msg_received' ||
+      type2 === 'ivr_created' ||
+      type2 === 'ticket_note_added';
+    const typeMatch = isMsg1 && isMsg2 ? type1 === type2 : isMsg1 === isMsg2;
 
     // check time first - if BATCH_TIME_WINDOW has passed since last time_elapsed reason
     // compare the current message (msg1) against the last break point to detect
@@ -1233,17 +1433,18 @@ export class Chat extends RapidElement {
     const mostRecentId = msgIds[msgIds.length - 1];
     const currentMsg = this.msgMap.get(mostRecentId);
 
+    const currentType = effectiveType(currentMsg);
     const incoming = this.agent
-      ? currentMsg.type !== 'msg_received'
-      : currentMsg.type === 'msg_received';
+      ? currentType !== 'msg_received'
+      : currentType === 'msg_received';
 
     const name = currentMsg._user?.name;
 
     const isMessageType =
-      currentMsg.type === 'msg_received' ||
-      currentMsg.type === 'msg_created' ||
-      currentMsg.type === 'ivr_created' ||
-      currentMsg.type === 'ticket_note_added';
+      currentType === 'msg_received' ||
+      currentType === 'msg_created' ||
+      currentType === 'ivr_created' ||
+      currentType === 'ticket_note_added';
     const showAvatar =
       this.avatars && ((isMessageType && this.agent) || !incoming);
 
@@ -1255,7 +1456,7 @@ export class Chat extends RapidElement {
     // messages carry no `_user`, so first_name/last_name aren't available and
     // getFullName falls back to `name`); the fallback only applies when there
     // is no `_user` on the event.
-    const fromContact = currentMsg.type === 'msg_received' && !currentMsg._user;
+    const fromContact = currentType === 'msg_received' && !currentMsg._user;
     const avatarName = currentMsg._user
       ? currentMsg._user.name
       : fromContact
@@ -1340,10 +1541,11 @@ export class Chat extends RapidElement {
               const latestClass = index === msgIds.length - 1 ? 'latest' : '';
               const eventClass = msg._rendered ? 'is-event' : '';
               const noteClass = msg.type === 'ticket_note_added' ? 'note' : '';
+              const typingClass = msg.type === 'typing_started' ? 'typing' : '';
               const matchClass =
                 this.highlightMessageUuid === msg.uuid ? 'search-match' : '';
               return html`<div
-                class="row message ${statusClass} ${unsendableClass} ${deletedClass} ${emptyClass} ${latestClass} ${eventClass} ${noteClass} ${matchClass}"
+                class="row message ${statusClass} ${unsendableClass} ${deletedClass} ${emptyClass} ${latestClass} ${eventClass} ${noteClass} ${typingClass} ${matchClass}"
                 data-uuid=${msg.uuid || nothing}
               >
                 ${this.renderMessage(
@@ -1412,6 +1614,15 @@ export class Chat extends RapidElement {
       return this.renderNote(event as TicketEvent, name, isLast);
     }
 
+    if (event.type === 'typing_started') {
+      return html`<div class="bubble-wrap">
+        <div class="bubble">
+          ${name ? html`<div class="name">${name}</div>` : null}
+          <div class="typing-dots"><span></span><span></span><span></span></div>
+        </div>
+      </div>`;
+    }
+
     const message = event as MsgEvent;
 
     // safety check: if msg doesn't exist, return nothing
@@ -1521,6 +1732,9 @@ export class Chat extends RapidElement {
 
   public reset() {
     this.resetGeneration++;
+    this.typingTimeouts.forEach((timeout) => window.clearTimeout(timeout));
+    this.typingTimeouts.clear();
+    this.typingEvents.clear();
     this.msgMap.clear();
     this.metadataCache.clear();
     this.messageGroups = [];

package/src/display/ProgressBar.ts

@@ -108,6 +108,12 @@ export class ProgressBar extends RapidElement {
       transition: flex-basis 2s;
     }
 
+    /* At 0% an animated meter keeps a sliver of bar so its moving
+       stripes show the work is underway rather than a dead track. */
+    .meter.zero > span {
+      min-width: 1.25em;
+    }
+
     .meter .incomplete {
       flex-grow: 1;
     }
@@ -163,6 +169,11 @@ export class ProgressBar extends RapidElement {
   @property({ type: Boolean })
   showPercentage = false;
 
+  /** Suppresses the trailing percentage / countdown box outright —
+   * for compact placements where the meter alone is the display. */
+  @property({ type: Boolean })
+  hidePercentage = false;
+
   @property({ type: String })
   message: string;
 
@@ -194,7 +205,8 @@ export class ProgressBar extends RapidElement {
     const meterClasses = [
       'meter',
       this.done ? 'done' : '',
-      this.animated ? '' : 'static'
+      this.animated ? '' : 'static',
+      this.animated && !this.done && this.pct === 0 ? 'zero' : ''
     ]
       .filter(Boolean)
       .join(' ');
@@ -208,7 +220,8 @@ export class ProgressBar extends RapidElement {
         <div class="incomplete"></div>
       </div>
 
-      ${this.showPercentage || this.showEstimatedCompletion
+      ${(this.showPercentage || this.showEstimatedCompletion) &&
+      !this.hidePercentage
         ? html`<div class="etc">
             <div>
               ${this.estimatedCompletionDate &&

package/src/form/Compose.ts

@@ -406,11 +406,25 @@ export class Compose extends FieldElement {
     if (!this.hasAttribute('tabindex')) {
       this.setAttribute('tabindex', '-1');
     }
+    // both phases: capture claims a send-Enter before the rich editor's
+    // own keydown inserts a newline (which would flash before the send
+    // clears it); bubble keeps Enter-to-send working from anywhere else
+    // in the compose after inner widgets have had their shot at it
+    this.addEventListener(
+      'keydown',
+      this.handleHostKeyDown as EventListener,
+      true
+    );
     this.addEventListener('keydown', this.handleHostKeyDown as EventListener);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListener(
+      'keydown',
+      this.handleHostKeyDown as EventListener,
+      true
+    );
     this.removeEventListener(
       'keydown',
       this.handleHostKeyDown as EventListener
@@ -449,10 +463,23 @@ export class Compose extends FieldElement {
     }
 
     if (evt.key === 'Enter' && !evt.shiftKey) {
+      // an Enter confirming an IME composition belongs to the editor
+      if (evt.isComposing || evt.keyCode === 229) {
+        return;
+      }
       if (this.showShortcuts) {
         return;
       }
       const editor = this.getMessageEditor();
+      // during capture only editor presses are claimed — anything else
+      // (quick replies, attachments) waits for the bubble so the widget
+      // it targets keeps first claim on the event
+      if (
+        evt.eventPhase === Event.CAPTURING_PHASE &&
+        !(editor && evt.composedPath().includes(editor))
+      ) {
+        return;
+      }
       if (editor) {
         const richEdit = editor.getRichEditor();
         if (richEdit && richEdit.hasVisibleOptions()) {
@@ -460,7 +487,10 @@ export class Compose extends FieldElement {
         }
       }
       evt.preventDefault();
-      evt.stopPropagation();
+      // immediate: the handler is registered for both phases, and an
+      // at-target event would otherwise reach the second registration
+      // and send twice
+      evt.stopImmediatePropagation();
       this.triggerSend();
     }
   };