@nyaruka/temba-components 0.164.0 → 0.165.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.165.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/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();
     }
   };

package/src/form/ContactSearch.ts

@@ -226,12 +226,33 @@ export class ContactSearch extends FieldElement {
         border: 1px solid var(--color-borders);
         border-radius: var(--curvature);
       }
+
+      .interrupt-confirm {
+        display: flex;
+        align-items: center;
+        margin-top: 0.5em;
+        margin-left: 0.6em;
+        cursor: pointer;
+      }
     `;
   }
 
   @property({ type: Boolean })
   in_a_flow: boolean;
 
+  // recipients are locked, e.g. starting a specific contact from their read page -
+  // no recipient editing, filters or query editing
+  @property({ type: Boolean })
+  fixed: boolean;
+
+  // name of the flow the fixed contact is currently in, if any
+  @property({ type: String, attribute: 'current_flow' })
+  currentFlow: string;
+
+  // whether the user has explicitly confirmed interrupting the current flow
+  @property({ type: Boolean })
+  interruptConfirmed = false;
+
   @property({ type: Boolean })
   started_previously: boolean;
 
@@ -310,6 +331,30 @@ export class ContactSearch extends FieldElement {
     }
   }
 
+  protected willUpdate(changedProperties: Map<string, any>) {
+    super.willUpdate(changedProperties);
+
+    // reconcile the in_a_flow exclusion; outside of fixed mode it is user-controlled
+    // via the filter checkbox, so we only ever clear it when the option goes away
+    if (
+      changedProperties.has('in_a_flow') ||
+      changedProperties.has('interruptConfirmed') ||
+      changedProperties.has('fixed') ||
+      changedProperties.has('currentFlow')
+    ) {
+      if (!this.in_a_flow) {
+        delete this.exclusions['in_a_flow'];
+      } else if (this.fixed && this.currentFlow) {
+        // a fixed contact already in a flow stays excluded until interruption is confirmed
+        if (this.interruptConfirmed) {
+          delete this.exclusions['in_a_flow'];
+        } else {
+          this.exclusions['in_a_flow'] = true;
+        }
+      }
+    }
+  }
+
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
@@ -317,12 +362,6 @@ export class ContactSearch extends FieldElement {
       this.handleRecipientsChanged();
     }
 
-    // if we remove the in_a_flow option, make sure it's not part of our exclusions
-    if (changedProperties.has('in_a_flow') && !this.in_a_flow) {
-      delete this.exclusions['in_a_flow'];
-      this.requestUpdate('exclusions');
-    }
-
     if (
       (changedProperties.has('query') && this.advanced) ||
       (changedProperties.has('refreshKey') && this.refreshKey !== '0')
@@ -455,6 +494,32 @@ export class ContactSearch extends FieldElement {
     }
   }
 
+  private async handleInterruptChanged(evt: any) {
+    const checkbox = evt.target as Checkbox;
+    this.interruptConfirmed = checkbox.checked;
+
+    // wait for willUpdate() to reconcile our exclusions
+    await this.updateComplete;
+
+    this.setValue({
+      advanced: this.advanced,
+      query: this.query,
+      exclusions: this.exclusions,
+      recipients: this.recipients
+    });
+
+    // we already know whether our fixed contacts will be included so no need to re-run
+    // the search - just let the modal know, counting contacts only since a group entry
+    // doesn't tell us its membership size
+    const contactCount = this.recipients.filter(
+      (value: OmniOption) => value.type === 'contact'
+    ).length;
+    this.fireCustomEvent(CustomEventType.ContentChanged, {
+      ...(this.summary || {}),
+      total: this.interruptConfirmed ? contactCount : 0
+    });
+  }
+
   private handleExclusionChanged(evt: any) {
     if (evt.target.tagName === 'TEMBA-CHECKBOX') {
       const ex = JSON.stringify(this.exclusions);
@@ -487,7 +552,7 @@ export class ContactSearch extends FieldElement {
 
   public renderWidget(): TemplateResult {
     let summary: TemplateResult;
-    if (this.summary) {
+    if (this.summary && !this.fixed) {
       if (!this.summary.error) {
         const count = this.summary.total || 0;
 
@@ -544,132 +609,170 @@ export class ContactSearch extends FieldElement {
       )}`;
     }
 
+    const interruptConfirm =
+      this.fixed && this.currentFlow && this.in_a_flow && !this.fetching
+        ? html`<div
+            class="interrupt-confirm"
+            @click=${this.handleActivityLabelClicked}
+          >
+            <temba-checkbox
+              name="interrupt"
+              ?checked=${this.interruptConfirmed}
+              @change=${this.handleInterruptChanged}
+            ></temba-checkbox>
+            <div>
+              ${this.flow && this.flow.name === this.currentFlow
+                ? html`${msg("It's okay to restart")}
+                    <b>${this.currentFlow}</b> ${msg('from the beginning')}`
+                : html`${msg("It's okay to interrupt")}
+                    <b>${this.currentFlow}</b> ${msg('and start this one')}`}
+            </div>
+          </div>`
+        : null;
+
     return html`
       ${
-        this.advanced
-          ? html`<div class="query">
-              <temba-textinput
-                .helpText=${this.helpText}
-                .widgetOnly=${this.widgetOnly}
-                .errors=${this.errors}
-                name=${this.name}
-                .inputRoot=${this}
-                @input=${this.handleQueryChange}
-                placeholder=${this.placeholder}
-                .value=${this.query}
-                textarea
-                autogrow
-              >
-              </temba-textinput>
-            </div>`
-          : html`<temba-omnibox
-                placeholder="Search for contacts or groups"
-                widget_only=""
-                groups=""
-                contacts=""
-                label="Recipients"
-                help_text="The contacts to send the message to."
-                .errors=${this.errors}
-                id="recipients"
-                name="recipients"
-                .values=${this.recipients}
-                endpoint="/contact/omnibox/?"
-                @change=${this.handleRecipientsChanged}
-              >
-              </temba-omnibox>
-
-              ${this.not_seen_since_days ||
-              this.in_a_flow ||
-              this.started_previously
-                ? html`
-                    <div class="filters">
-                      <div
-                        style="display:flex;font-size:1em;margin-bottom:0.5em"
-                      >
-                        <temba-icon size="1" name="filter"></temba-icon>
-                        <div style="margin-left:0.5em">
-                          Only include contacts who...
+        this.fixed
+          ? null
+          : this.advanced
+            ? html`<div class="query">
+                <temba-textinput
+                  .helpText=${this.helpText}
+                  .widgetOnly=${this.widgetOnly}
+                  .errors=${this.errors}
+                  name=${this.name}
+                  .inputRoot=${this}
+                  @input=${this.handleQueryChange}
+                  placeholder=${this.placeholder}
+                  .value=${this.query}
+                  textarea
+                  autogrow
+                >
+                </temba-textinput>
+              </div>`
+            : html`<temba-omnibox
+                  placeholder="Search for contacts or groups"
+                  widget_only=""
+                  groups=""
+                  contacts=""
+                  label="Recipients"
+                  help_text="The contacts to send the message to."
+                  .errors=${this.errors}
+                  id="recipients"
+                  name="recipients"
+                  .values=${this.recipients}
+                  endpoint="/contact/omnibox/?"
+                  @change=${this.handleRecipientsChanged}
+                >
+                </temba-omnibox>
+
+                ${this.not_seen_since_days ||
+                this.in_a_flow ||
+                this.started_previously
+                  ? html`
+                      <div class="filters">
+                        <div
+                          style="display:flex;font-size:1em;margin-bottom:0.5em"
+                        >
+                          <temba-icon size="1" name="filter"></temba-icon>
+                          <div style="margin-left:0.5em">
+                            Only include contacts who...
+                          </div>
                         </div>
-                      </div>
-                      ${this.in_a_flow
-                        ? html`<temba-checkbox
-                            name="in_a_flow"
-                            label="${msg('Are not currently in a flow')}"
-                            ?checked=${this.exclusions['in_a_flow']}
-                            @change=${this.handleExclusionChanged}
-                          ></temba-checkbox>`
-                        : null}
-                      ${this.not_seen_since_days
-                        ? html`
-                            <div
-                              class="activity-select"
-                              @click=${this.handleActivityLabelClicked}
-                            >
-                              <temba-checkbox
-                                style="display:inline;"
-                                name="not_seen_since_days"
-                                ?checked=${notSeenSinceDays}
-                                @change=${this.handleExclusionChanged}
+                        ${this.in_a_flow
+                          ? html`<temba-checkbox
+                              name="in_a_flow"
+                              label="${msg('Are not currently in a flow')}"
+                              ?checked=${this.exclusions['in_a_flow']}
+                              @change=${this.handleExclusionChanged}
+                            ></temba-checkbox>`
+                          : null}
+                        ${this.not_seen_since_days
+                          ? html`
+                              <div
+                                class="activity-select"
+                                @click=${this.handleActivityLabelClicked}
                               >
-                              </temba-checkbox>
-
-                              <div>
-                                ${msg('Have sent a message in the last')}
+                                <temba-checkbox
+                                  style="display:inline;"
+                                  name="not_seen_since_days"
+                                  ?checked=${notSeenSinceDays}
+                                  @change=${this.handleExclusionChanged}
+                                >
+                                </temba-checkbox>
+
+                                <div>
+                                  ${msg('Have sent a message in the last')}
+                                </div>
+
+                                <temba-select
+                                  style="margin-left:0.5em"
+                                  class="small-select"
+                                  @change=${this.handleActivityLevelChanged}
+                                  ?disabled=${!notSeenSinceDays}
+                                >
+                                  <temba-option
+                                    name="90 days"
+                                    value="90"
+                                    ?selected=${notSeenSinceDays === 90}
+                                  ></temba-option>
+                                  <temba-option
+                                    name="180 days"
+                                    value="180"
+                                    ?selected=${notSeenSinceDays === 180}
+                                  ></temba-option>
+                                  <temba-option
+                                    name="Year"
+                                    value="365"
+                                    ?selected=${notSeenSinceDays === 365}
+                                  ></temba-option>
+                                </temba-select>
+                                <div></div>
                               </div>
-
-                              <temba-select
-                                style="margin-left:0.5em"
-                                class="small-select"
-                                @change=${this.handleActivityLevelChanged}
-                                ?disabled=${!notSeenSinceDays}
-                              >
-                                <temba-option
-                                  name="90 days"
-                                  value="90"
-                                  ?selected=${notSeenSinceDays === 90}
-                                ></temba-option>
-                                <temba-option
-                                  name="180 days"
-                                  value="180"
-                                  ?selected=${notSeenSinceDays === 180}
-                                ></temba-option>
-                                <temba-option
-                                  name="Year"
-                                  value="365"
-                                  ?selected=${notSeenSinceDays === 365}
-                                ></temba-option>
-                              </temba-select>
-                              <div></div>
-                            </div>
-                          `
-                        : null}
-                      ${this.started_previously
-                        ? html`<temba-checkbox
-                            name="started_previously"
-                            label="${msg(
-                              'Have not started this flow in the last 90 days'
-                            )}"
-                            ?checked=${this.exclusions['started_previously']}
-                            @change=${this.handleExclusionChanged}
-                          ></temba-checkbox>`
-                        : null}
-                    </div>
-                  `
-                : null} `
+                            `
+                          : null}
+                        ${this.started_previously
+                          ? html`<temba-checkbox
+                              name="started_previously"
+                              label="${msg(
+                                'Have not started this flow in the last 90 days'
+                              )}"
+                              ?checked=${this.exclusions['started_previously']}
+                              @change=${this.handleExclusionChanged}
+                            ></temba-checkbox>`
+                          : null}
+                      </div>
+                    `
+                  : null} `
       }
               </div>
-      <div
-        class="results ${getClasses({
-          fetching: this.fetching,
-          initialized: this.initialized || this.fetching,
-          empty:
-            ((this.summary && this.summary.error) || !this.summary) &&
-            !this.fetching
-        })}"
-      >
-        <temba-loading units="6" size="8"></temba-loading>
-        <div class="summary ${this.expanded ? 'expanded' : ''}">${summary}</div>
-      </div>
+      ${interruptConfirm}
+      ${
+        this.fixed
+          ? html`<div
+              class="results ${getClasses({
+                fetching: this.fetching,
+                initialized: this.fetching,
+                empty: !this.fetching
+              })}"
+            >
+              <temba-loading units="6" size="8"></temba-loading>
+            </div>`
+          : html`<div
+              class="results ${getClasses({
+                fetching: this.fetching,
+                initialized: this.initialized || this.fetching,
+                empty:
+                  ((this.summary && this.summary.error) || !this.summary) &&
+                  !this.fetching
+              })}"
+            >
+              <temba-loading units="6" size="8"></temba-loading>
+              <div class="summary ${this.expanded ? 'expanded' : ''}">
+                ${summary}
+              </div>
+            </div>`
+      }
       ${blockers}
       ${
         !blockers && this.summary && this.summary.warnings