@nyaruka/temba-components 0.156.9 → 0.156.11

package/package.json

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

package/src/display/Chat.ts

@@ -862,7 +862,12 @@ export class Chat extends RapidElement {
 
         // show notification if new messages are appended and user is scrolled away from bottom
         // but not during search (searchHighlight is set)
-        if (append && isScrolledAway && newMessages.length > 0 && !this.searchHighlight) {
+        if (
+          append &&
+          isScrolledAway &&
+          newMessages.length > 0 &&
+          !this.searchHighlight
+        ) {
           this.showNewMessageNotification = true;
         }
 
@@ -1123,10 +1128,7 @@ export class Chat extends RapidElement {
     }, 150);
   }
 
-  private highlightText(
-    text: string,
-    search: string
-  ): TemplateResult | string {
+  private highlightText(text: string, search: string): TemplateResult | string {
     if (!search || !text) {
       return text;
     }
@@ -1245,9 +1247,7 @@ export class Chat extends RapidElement {
               const latestClass = index === msgIds.length - 1 ? 'latest' : '';
               const eventClass = msg._rendered ? 'is-event' : '';
               const matchClass =
-                this.highlightMessageUuid === msg.uuid
-                  ? 'search-match'
-                  : '';
+                this.highlightMessageUuid === msg.uuid ? 'search-match' : '';
               return html`<div
                 class="row message ${statusClass} ${unsendableClass} ${deletedClass} ${latestClass} ${eventClass} ${matchClass}"
                 data-uuid=${msg.uuid || nothing}

package/src/display/FloatingTab.ts

@@ -28,8 +28,8 @@ export class FloatingTab extends RapidElement {
         border-bottom-left-radius: 8px;
         cursor: pointer;
         box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);
-        transition:
-          transform calc(var(--transition-duration, 300ms) * 0.7) ease-in-out;
+        transition: transform calc(var(--transition-duration, 300ms) * 0.7)
+          ease-in-out;
         user-select: none;
       }
 

package/src/display/Options.ts

@@ -170,12 +170,18 @@ export class Options extends RapidElement {
       }
 
       .option:hover {
-        background: var(--temba-options-option-hover-bg, var(--option-hover-bg));
+        background: var(
+          --temba-options-option-hover-bg,
+          var(--option-hover-bg)
+        );
         color: var(--temba-options-option-hover-text, var(--option-hover-text));
       }
 
       .option.focused {
-        background: var(--temba-options-option-focus-bg, var(--color-selection));
+        background: var(
+          --temba-options-option-focus-bg,
+          var(--color-selection)
+        );
         color: var(--temba-options-option-focus-text, var(--color-text-dark));
       }
 

package/src/flow/CanvasMenu.ts

@@ -2,12 +2,15 @@ import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
+import { ContextMenuShortcut } from './types';
 
 /**
- * Event detail for canvas menu selection
+ * Event detail for canvas menu selection. `action` is either one of the
+ * built-in menu actions ('sticky', 'other', 'reflow') or the `type` of a
+ * configured shortcut (e.g. 'send_msg', 'say_msg', 'set_contact_field').
  */
 export interface CanvasMenuSelection {
-  action: 'sticky' | 'other' | 'send_msg' | 'wait_for_response' | 'reflow';
+  action: string;
   position: { x: number; y: number };
 }
 
@@ -78,8 +81,8 @@ export class CanvasMenu extends RapidElement {
   @property({ type: Boolean })
   public showStickyNote = true;
 
-  @property({ type: Boolean })
-  public showWaitForResponse = true;
+  @property({ type: Array })
+  public shortcuts: ContextMenuShortcut[] = [];
 
   @property({ type: Boolean })
   public showReflow = false;
@@ -131,14 +134,14 @@ export class CanvasMenu extends RapidElement {
     clickPosition: { x: number; y: number },
     showStickyNote: boolean = true,
     showReflow: boolean = false,
-    showWaitForResponse: boolean = true
+    shortcuts: ContextMenuShortcut[] = []
   ) {
     this.x = x;
     this.y = y;
     this.clickPosition = clickPosition;
     this.showStickyNote = showStickyNote;
     this.showReflow = showReflow;
-    this.showWaitForResponse = showWaitForResponse;
+    this.shortcuts = shortcuts;
     this.open = true;
 
     // Adjust position after menu renders to ensure it fits on screen
@@ -202,25 +205,17 @@ export class CanvasMenu extends RapidElement {
 
     return html`
       <div class="menu" style="left: ${this.x}px; top: ${this.y}px;">
-        <div
-          class="menu-item"
-          @click=${() => this.handleMenuItemClick('send_msg')}
-        >
-          <temba-icon name="send" size="1.25"></temba-icon>
-          <div class="menu-item-title">Send Message</div>
-        </div>
-
-        ${this.showWaitForResponse
-          ? html`
-              <div
-                class="menu-item"
-                @click=${() => this.handleMenuItemClick('wait_for_response')}
-              >
-                <temba-icon name="message" size="1.25"></temba-icon>
-                <div class="menu-item-title">Wait for Response</div>
-              </div>
-            `
-          : ''}
+        ${this.shortcuts.map(
+          (shortcut) => html`
+            <div
+              class="menu-item"
+              @click=${() => this.handleMenuItemClick(shortcut.type)}
+            >
+              <temba-icon name="${shortcut.icon}" size="1.25"></temba-icon>
+              <div class="menu-item-title">${shortcut.name}</div>
+            </div>
+          `
+        )}
 
         <div
           class="menu-item"

package/src/flow/CanvasNode.ts

@@ -1622,9 +1622,7 @@ export class CanvasNode extends RapidElement {
 
     // IMPORTANT: Add the action to this node FIRST, before removing from source
     // This ensures we don't lose the action if the source node gets deleted
-    const droppedAction = isCopy
-      ? { ...action, uuid: generateUUID() }
-      : action;
+    const droppedAction = isCopy ? { ...action, uuid: generateUUID() } : action;
     const newActions = [...this.node.actions];
     newActions.splice(dropIndex, 0, droppedAction);
 
@@ -1638,11 +1636,13 @@ export class CanvasNode extends RapidElement {
         for (const langCode of Object.keys(localization)) {
           const entry = localization[langCode]?.[action.uuid];
           if (entry) {
-            store.getState().updateLocalization(
-              langCode,
-              droppedAction.uuid,
-              JSON.parse(JSON.stringify(entry))
-            );
+            store
+              .getState()
+              .updateLocalization(
+                langCode,
+                droppedAction.uuid,
+                JSON.parse(JSON.stringify(entry))
+              );
           }
         }
       }
@@ -1915,9 +1915,10 @@ export class CanvasNode extends RapidElement {
     const nodeConfig = NODE_CONFIG[this.ui?.type];
     const supportsLocalization = nodeConfig?.localizable === 'categories';
     const translatableCategoryUuids = new Set(
-      getTranslatableCategoriesForNode(this.ui?.type, node.router.categories).map(
-        (category) => category.uuid
-      )
+      getTranslatableCategoriesForNode(
+        this.ui?.type,
+        node.router.categories
+      ).map((category) => category.uuid)
     );
 
     return html`<div class="categories">
@@ -2010,7 +2011,10 @@ export class CanvasNode extends RapidElement {
     // currently hidden by the categories toggle.
     const hasTranslatableCategories =
       nodeConfig?.localizable === 'categories' &&
-      hasTranslatableCategoriesForNode(this.ui.type, this.node.router?.categories);
+      hasTranslatableCategoriesForNode(
+        this.ui.type,
+        this.node.router?.categories
+      );
     const hasTranslatableActions = (this.node.actions || []).some((action) => {
       const actionConfig = ACTION_CONFIG[action.type];
       return !!actionConfig?.localizable?.length;

package/src/flow/DragManager.ts

@@ -138,7 +138,11 @@ export class DragManager {
     const position = this.getPosition(uuid, type);
     if (!position) return;
 
-    if (!this.editor.selectedItems.has(uuid) && !event.ctrlKey && !event.metaKey) {
+    if (
+      !this.editor.selectedItems.has(uuid) &&
+      !event.ctrlKey &&
+      !event.metaKey
+    ) {
       this.editor.selectedItems.clear();
     } else if (!this.editor.selectedItems.has(uuid)) {
       this.editor.selectedItems.add(uuid);
@@ -215,7 +219,9 @@ export class DragManager {
   private handleGlobalMouseDown(event: MouseEvent): void {
     if (isRightClick(event)) return;
 
-    const canvasRect = this.editor.querySelector('#grid')?.getBoundingClientRect();
+    const canvasRect = this.editor
+      .querySelector('#grid')
+      ?.getBoundingClientRect();
     if (!canvasRect) return;
 
     const isWithinCanvas =
@@ -258,7 +264,9 @@ export class DragManager {
       this.canvasMouseDown = true;
       this.dragStartPos = { x: event.clientX, y: event.clientY };
 
-      const canvasRect = this.editor.querySelector('#canvas')?.getBoundingClientRect();
+      const canvasRect = this.editor
+        .querySelector('#canvas')
+        ?.getBoundingClientRect();
       if (canvasRect) {
         this.editor.selectedItems.clear();
 
@@ -348,7 +356,9 @@ export class DragManager {
   private updateSelectionBox(event: MouseEvent): void {
     if (!this.editor.selectionBox || !this.canvasMouseDown) return;
 
-    const canvasRect = this.editor.querySelector('#canvas')?.getBoundingClientRect();
+    const canvasRect = this.editor
+      .querySelector('#canvas')
+      ?.getBoundingClientRect();
     if (!canvasRect) return;
 
     const relativeX = (event.clientX - canvasRect.left) / this.editor.zoom;
@@ -368,9 +378,18 @@ export class DragManager {
 
     const newSelection = new Set<string>();
 
-    const boxLeft = Math.min(this.editor.selectionBox.startX, this.editor.selectionBox.endX);
-    const boxTop = Math.min(this.editor.selectionBox.startY, this.editor.selectionBox.endY);
-    const boxRight = Math.max(this.editor.selectionBox.startX, this.editor.selectionBox.endX);
+    const boxLeft = Math.min(
+      this.editor.selectionBox.startX,
+      this.editor.selectionBox.endX
+    );
+    const boxTop = Math.min(
+      this.editor.selectionBox.startY,
+      this.editor.selectionBox.endY
+    );
+    const boxRight = Math.max(
+      this.editor.selectionBox.startX,
+      this.editor.selectionBox.endX
+    );
     const boxBottom = Math.max(
       this.editor.selectionBox.startY,
       this.editor.selectionBox.endY
@@ -384,8 +403,9 @@ export class DragManager {
       if (nodeElement) {
         const position = this.editor.definition._ui?.nodes[node.uuid]?.position;
         if (position) {
-          const canvasRect =
-            this.editor.querySelector('#canvas')?.getBoundingClientRect();
+          const canvasRect = this.editor
+            .querySelector('#canvas')
+            ?.getBoundingClientRect();
 
           if (canvasRect) {
             const nodeLeft = position.left;
@@ -441,10 +461,20 @@ export class DragManager {
   public renderSelectionBox(): TemplateResult | string {
     if (!this.editor.selectionBox || !this.editor.isSelecting) return '';
 
-    const left = Math.min(this.editor.selectionBox.startX, this.editor.selectionBox.endX);
-    const top = Math.min(this.editor.selectionBox.startY, this.editor.selectionBox.endY);
-    const width = Math.abs(this.editor.selectionBox.endX - this.editor.selectionBox.startX);
-    const height = Math.abs(this.editor.selectionBox.endY - this.editor.selectionBox.startY);
+    const left = Math.min(
+      this.editor.selectionBox.startX,
+      this.editor.selectionBox.endX
+    );
+    const top = Math.min(
+      this.editor.selectionBox.startY,
+      this.editor.selectionBox.endY
+    );
+    const width = Math.abs(
+      this.editor.selectionBox.endX - this.editor.selectionBox.startX
+    );
+    const height = Math.abs(
+      this.editor.selectionBox.endY - this.editor.selectionBox.startY
+    );
 
     return html`<div
       class="selection-box"
@@ -484,7 +514,9 @@ export class DragManager {
     this.canvasMouseDown = true;
     this.dragStartPos = { x: touch.clientX, y: touch.clientY };
 
-    const canvasRect = this.editor.querySelector('#canvas')?.getBoundingClientRect();
+    const canvasRect = this.editor
+      .querySelector('#canvas')
+      ?.getBoundingClientRect();
     if (canvasRect) {
       this.editor.selectedItems.clear();
 
@@ -529,7 +561,8 @@ export class DragManager {
 
       if (targetNode) {
         this.editor.targetId = targetNode.getAttribute('uuid');
-        this.editor.isValidTarget = this.editor.targetId !== this.editor.dragFromNodeId;
+        this.editor.isValidTarget =
+          this.editor.targetId !== this.editor.dragFromNodeId;
 
         if (this.editor.isValidTarget) {
           targetNode.classList.add('connection-target-valid');
@@ -545,7 +578,8 @@ export class DragManager {
         const canvas = this.editor.querySelector('#canvas');
         if (canvas) {
           const canvasRect = canvas.getBoundingClientRect();
-          const relativeX = (event.clientX - canvasRect.left) / this.editor.zoom;
+          const relativeX =
+            (event.clientX - canvasRect.left) / this.editor.zoom;
           const relativeY = (event.clientY - canvasRect.top) / this.editor.zoom;
 
           const placeholderWidth = 200;
@@ -630,9 +664,10 @@ export class DragManager {
     this.currentDragIsCopy = true;
 
     for (const uuid of itemsToCopy) {
-      const element = this.editor.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
-      const type =
-        element?.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';
+      const element = this.editor.querySelector(
+        `[uuid="${uuid}"]`
+      ) as HTMLElement;
+      const type = element?.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';
       const position = this.getPosition(uuid, type);
       if (element && position) {
         element.style.left = `${position.left}px`;
@@ -641,7 +676,9 @@ export class DragManager {
     }
     this.editor.plumber.revalidate(itemsToCopy);
     for (const uuid of itemsToCopy) {
-      const element = this.editor.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
+      const element = this.editor.querySelector(
+        `[uuid="${uuid}"]`
+      ) as HTMLElement;
       if (element) {
         void element.offsetHeight;
         element.classList.remove('dragging');
@@ -724,7 +761,9 @@ export class DragManager {
         : [this.editor.currentDragItem.uuid];
 
     itemsToMove.forEach((uuid) => {
-      const element = this.editor.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
+      const element = this.editor.querySelector(
+        `[uuid="${uuid}"]`
+      ) as HTMLElement;
       if (element) {
         const type = element.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';
         const position = this.getPosition(uuid, type);
@@ -814,9 +853,11 @@ export class DragManager {
 
         if (scrollDx > 0 || scrollDy > 0) {
           const neededWidth =
-            (editorEl.scrollLeft + editorEl.clientWidth + scrollDx) / this.editor.zoom;
+            (editorEl.scrollLeft + editorEl.clientWidth + scrollDx) /
+            this.editor.zoom;
           const neededHeight =
-            (editorEl.scrollTop + editorEl.clientHeight + scrollDy) / this.editor.zoom;
+            (editorEl.scrollTop + editorEl.clientHeight + scrollDy) /
+            this.editor.zoom;
           getStore()?.getState()?.expandCanvas(neededWidth, neededHeight);
         }
 
@@ -884,7 +925,9 @@ export class DragManager {
       const newPositions: { [uuid: string]: FlowPosition } = {};
 
       itemsToMove.forEach((uuid) => {
-        const type = this.editor.definition.nodes.find((node) => node.uuid === uuid)
+        const type = this.editor.definition.nodes.find(
+          (node) => node.uuid === uuid
+        )
           ? 'node'
           : 'sticky';
         const position = this.getPosition(uuid, type);
@@ -899,7 +942,9 @@ export class DragManager {
           const newPosition = { left: snappedLeft, top: snappedTop };
           newPositions[uuid] = newPosition;
 
-          const element = this.editor.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
+          const element = this.editor.querySelector(
+            `[uuid="${uuid}"]`
+          ) as HTMLElement;
           if (element) {
             element.classList.remove('dragging', 'drag-copy');
             element.style.left = `${snappedLeft}px`;
@@ -983,7 +1028,9 @@ export class DragManager {
       event.preventDefault();
       this.editor.isSelecting = true;
 
-      const canvasRect = this.editor.querySelector('#canvas')?.getBoundingClientRect();
+      const canvasRect = this.editor
+        .querySelector('#canvas')
+        ?.getBoundingClientRect();
       if (canvasRect && this.editor.selectionBox) {
         this.editor.selectionBox = {
           ...this.editor.selectionBox,
@@ -1001,7 +1048,10 @@ export class DragManager {
     if (this.editor.plumber.connectionDragging) {
       event.preventDefault();
 
-      const targetNode = this.editor.findTargetNodeAt(touch.clientX, touch.clientY);
+      const targetNode = this.editor.findTargetNodeAt(
+        touch.clientX,
+        touch.clientY
+      );
 
       document.querySelectorAll('temba-flow-node').forEach((node) => {
         node.classList.remove(
@@ -1012,7 +1062,8 @@ export class DragManager {
 
       if (targetNode) {
         this.editor.targetId = targetNode.getAttribute('uuid');
-        this.editor.isValidTarget = this.editor.targetId !== this.editor.dragFromNodeId;
+        this.editor.isValidTarget =
+          this.editor.targetId !== this.editor.dragFromNodeId;
 
         if (this.editor.isValidTarget) {
           targetNode.classList.add('connection-target-valid');
@@ -1028,7 +1079,8 @@ export class DragManager {
         const canvas = this.editor.querySelector('#canvas');
         if (canvas) {
           const canvasRect = canvas.getBoundingClientRect();
-          const relativeX = (touch.clientX - canvasRect.left) / this.editor.zoom;
+          const relativeX =
+            (touch.clientX - canvasRect.left) / this.editor.zoom;
           const relativeY = (touch.clientY - canvasRect.top) / this.editor.zoom;
 
           const placeholderWidth = 200;
@@ -1123,10 +1175,14 @@ export class DragManager {
     // --- Connection dragging ---
     if (this.editor.plumber.connectionDragging) {
       if (touch) {
-        const targetNode = this.editor.findTargetNodeAt(touch.clientX, touch.clientY);
+        const targetNode = this.editor.findTargetNodeAt(
+          touch.clientX,
+          touch.clientY
+        );
         if (targetNode) {
           this.editor.targetId = targetNode.getAttribute('uuid');
-          this.editor.isValidTarget = this.editor.targetId !== this.editor.dragFromNodeId;
+          this.editor.isValidTarget =
+            this.editor.targetId !== this.editor.dragFromNodeId;
         }
       }
       return;
@@ -1154,7 +1210,9 @@ export class DragManager {
       const newPositions: { [uuid: string]: FlowPosition } = {};
 
       itemsToMove.forEach((uuid) => {
-        const type = this.editor.definition.nodes.find((node) => node.uuid === uuid)
+        const type = this.editor.definition.nodes.find(
+          (node) => node.uuid === uuid
+        )
           ? 'node'
           : 'sticky';
         const position = this.getPosition(uuid, type);
@@ -1167,7 +1225,9 @@ export class DragManager {
 
           newPositions[uuid] = { left: snappedLeft, top: snappedTop };
 
-          const element = this.editor.querySelector(`[uuid="${uuid}"]`) as HTMLElement;
+          const element = this.editor.querySelector(
+            `[uuid="${uuid}"]`
+          ) as HTMLElement;
           if (element) {
             element.classList.remove('dragging');
             element.style.left = `${snappedLeft}px`;