@nyaruka/temba-components 0.142.1 → 0.142.3

package/src/flow/CanvasMenu.ts

@@ -7,7 +7,13 @@ import { CustomEventType } from '../interfaces';
  * Event detail for canvas menu selection
  */
 export interface CanvasMenuSelection {
-  action: 'sticky' | 'action' | 'split' | 'reflow';
+  action:
+    | 'sticky'
+    | 'action'
+    | 'split'
+    | 'send_msg'
+    | 'wait_for_response'
+    | 'reflow';
   position: { x: number; y: number };
 }
 
@@ -50,13 +56,6 @@ export class CanvasMenu extends RapidElement {
 
       .menu-item temba-icon {
         --icon-color: var(--color-text);
-        margin-top: 0.15em;
-      }
-
-      .menu-item-content {
-        display: flex;
-        flex-direction: column;
-        gap: 0.15em;
       }
 
       .menu-item-title {
@@ -65,11 +64,6 @@ export class CanvasMenu extends RapidElement {
         color: var(--color-text-dark);
       }
 
-      .menu-item-description {
-        font-size: 0.85rem;
-        color: var(--color-text);
-      }
-
       .divider {
         height: 1px;
         background: rgba(0, 0, 0, 0.1);
@@ -90,6 +84,9 @@ export class CanvasMenu extends RapidElement {
   @property({ type: Boolean })
   public showStickyNote = true;
 
+  @property({ type: Boolean })
+  public showWaitForResponse = true;
+
   @property({ type: Boolean })
   public showReflow = false;
 
@@ -101,16 +98,20 @@ export class CanvasMenu extends RapidElement {
   ): void {
     super.firstUpdated(_changedProperties);
 
-    // Close menu when clicking outside — use mousedown instead of click
-    // to avoid being triggered by the click synthesized from a drag-and-drop
-    // (mousedown on exit + mouseup on canvas = click on common ancestor)
-    const handleClickOutside = (e: MouseEvent) => {
+    // Close menu when clicking/tapping outside — use mousedown instead of
+    // click to avoid being triggered by the click synthesized from a
+    // drag-and-drop (mousedown on exit + mouseup on canvas = click on
+    // common ancestor). Also listen for touchstart for touch devices.
+    const handleClickOutside = (e: MouseEvent | TouchEvent) => {
       if (this.open && !this.contains(e.target as Node)) {
         this.close();
       }
     };
 
     document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside, {
+      passive: true
+    });
 
     // Store cleanup function
     (this as any)._clickOutsideHandler = handleClickOutside;
@@ -123,6 +124,10 @@ export class CanvasMenu extends RapidElement {
         'mousedown',
         (this as any)._clickOutsideHandler
       );
+      document.removeEventListener(
+        'touchstart',
+        (this as any)._clickOutsideHandler
+      );
     }
   }
 
@@ -131,13 +136,15 @@ export class CanvasMenu extends RapidElement {
     y: number,
     clickPosition: { x: number; y: number },
     showStickyNote: boolean = true,
-    showReflow: boolean = false
+    showReflow: boolean = false,
+    showWaitForResponse: boolean = true
   ) {
     this.x = x;
     this.y = y;
     this.clickPosition = clickPosition;
     this.showStickyNote = showStickyNote;
     this.showReflow = showReflow;
+    this.showWaitForResponse = showWaitForResponse;
     this.open = true;
 
     // Adjust position after menu renders to ensure it fits on screen
@@ -185,9 +192,7 @@ export class CanvasMenu extends RapidElement {
     }
   }
 
-  private handleMenuItemClick(
-    action: 'sticky' | 'action' | 'split' | 'reflow'
-  ) {
+  private handleMenuItemClick(action: CanvasMenuSelection['action']) {
     this.fireCustomEvent(CustomEventType.Selection, {
       action,
       position: this.clickPosition
@@ -203,17 +208,32 @@ 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>
+            `
+          : ''}
+
         <div
           class="menu-item"
           @click=${() => this.handleMenuItemClick('action')}
         >
           <temba-icon name="action" size="1.25"></temba-icon>
-          <div class="menu-item-content">
-            <div class="menu-item-title">Add Action</div>
-            <div class="menu-item-description">
-              Send messages, update contacts
-            </div>
-          </div>
+          <div class="menu-item-title">Add Action</div>
         </div>
 
         <div
@@ -221,10 +241,7 @@ export class CanvasMenu extends RapidElement {
           @click=${() => this.handleMenuItemClick('split')}
         >
           <temba-icon name="split" size="1.25"></temba-icon>
-          <div class="menu-item-content">
-            <div class="menu-item-title">Add Split</div>
-            <div class="menu-item-description">Branch based on conditions</div>
-          </div>
+          <div class="menu-item-title">Add Split</div>
         </div>
 
         ${this.showStickyNote
@@ -236,12 +253,7 @@ export class CanvasMenu extends RapidElement {
                 @click=${() => this.handleMenuItemClick('sticky')}
               >
                 <temba-icon name="note" size="1.25"></temba-icon>
-                <div class="menu-item-content">
-                  <div class="menu-item-title">Add Sticky Note</div>
-                  <div class="menu-item-description">
-                    Add a note to the canvas
-                  </div>
-                </div>
+                <div class="menu-item-title">Add Sticky Note</div>
               </div>
             `
           : ''}
@@ -254,12 +266,7 @@ export class CanvasMenu extends RapidElement {
                 @click=${() => this.handleMenuItemClick('reflow')}
               >
                 <temba-icon name="flow" size="1.25"></temba-icon>
-                <div class="menu-item-content">
-                  <div class="menu-item-title">Reflow</div>
-                  <div class="menu-item-description">
-                    Auto-arrange nodes in this flow
-                  </div>
-                </div>
+                <div class="menu-item-title">Reflow</div>
               </div>
             `
           : ''}

package/src/flow/CanvasNode.ts

@@ -6,7 +6,7 @@ import { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
-import { isRightClick } from './utils';
+import { isRightClick, renderClamped } from './utils';
 import { Plumber } from './Plumber';
 import { getStore } from '../store/Store';
 import { CustomEventType } from '../interfaces';
@@ -251,24 +251,20 @@ export class CanvasNode extends RapidElement {
       }
       .title-spacer {
         width: 1.8em;
-        
       }
 
       .action:hover .drag-handle {
         visibility: visible;
         opacity: 0.7;
-        
-        
-      }
-
-      strong {
-        font-weight: 500;
       }
 
       .action .drag-handle:hover {
         visibility: visible;
         opacity: 1;
-        
+      }
+
+      strong {
+        font-weight: 500;
       }
 
       .action .cn-title,
@@ -295,6 +291,8 @@ export class CanvasNode extends RapidElement {
 
       .quick-replies {
         margin-top: 0.5em;
+        display: flex;
+        flex-wrap: wrap;
       }
 
       .quick-reply {
@@ -302,9 +300,14 @@ export class CanvasNode extends RapidElement {
         border: 1px solid #e0e0e0;
         border-radius: calc(var(--curvature) * 1.5);
         padding: 0.2em 1em;
-        display: inline-block;
         font-size: 0.8em;
         margin: 0.2em;
+        flex: 0 1 auto;
+        min-width: 0;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .router-section {
@@ -349,6 +352,7 @@ export class CanvasNode extends RapidElement {
 
       .router .body {
         padding: 0.75em;
+        max-width: 180px;
       }
 
       .result-name {
@@ -488,6 +492,22 @@ export class CanvasNode extends RapidElement {
         color: #9ca3af;
         font-size: 0.9em;
       }
+
+      /* On touch devices, always show interactive controls.
+         The .touch-device class is added to the editor on first touch. */
+      .touch-device .remove-button {
+        visibility: visible !important;
+        opacity: 0.7;
+      }
+
+      .touch-device .action .drag-handle {
+        visibility: visible !important;
+        opacity: 0.7;
+      }
+
+      .touch-device .add-action-button {
+        opacity: 0.8 !important;
+      }
   }`;
   }
 
@@ -973,11 +993,12 @@ export class CanvasNode extends RapidElement {
   private handleActionMouseDown(event: MouseEvent, action: Action): void {
     if (isRightClick(event)) return;
 
-    // Don't handle clicks on the remove button, drag handle, or when action is in removing state
+    // Don't handle clicks on the remove button, drag handle, linked elements, or when action is in removing state
     const target = event.target as HTMLElement;
     if (
       target.closest('.remove-button') ||
       target.closest('.drag-handle') ||
+      target.closest('.linked-name') ||
       this.actionRemovingState.has(action.uuid)
     ) {
       return;
@@ -1000,11 +1021,12 @@ export class CanvasNode extends RapidElement {
       return;
     }
 
-    // Don't handle clicks on the remove button, drag handle, or when action is in removing state
+    // Don't handle clicks on the remove button, drag handle, linked elements, or when action is in removing state
     const target = event.target as HTMLElement;
     if (
       target.closest('.remove-button') ||
       target.closest('.drag-handle') ||
+      target.closest('.linked-name') ||
       this.actionRemovingState.has(action.uuid)
     ) {
       this.actionClickStartPos = null;
@@ -1046,6 +1068,75 @@ export class CanvasNode extends RapidElement {
     this.pendingActionClick = null;
   }
 
+  /* c8 ignore start -- touch-only handlers untestable in headless Chromium */
+  private handleActionTouchStart(event: TouchEvent, action: Action): void {
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.remove-button') ||
+      target.closest('.drag-handle') ||
+      target.closest('.linked-name') ||
+      this.actionRemovingState.has(action.uuid)
+    ) {
+      return;
+    }
+
+    const touch = event.touches[0];
+    if (!touch) return;
+    this.actionClickStartPos = { x: touch.clientX, y: touch.clientY };
+    this.pendingActionClick = { action, event: event as any };
+  }
+
+  private handleActionTouchEnd(event: TouchEvent, action: Action): void {
+    if (
+      !this.pendingActionClick ||
+      this.pendingActionClick.action.uuid !== action.uuid
+    ) {
+      this.actionClickStartPos = null;
+      this.pendingActionClick = null;
+      return;
+    }
+
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.remove-button') ||
+      target.closest('.drag-handle') ||
+      target.closest('.linked-name') ||
+      this.actionRemovingState.has(action.uuid)
+    ) {
+      this.actionClickStartPos = null;
+      this.pendingActionClick = null;
+      return;
+    }
+
+    const touch = event.changedTouches[0];
+    if (this.actionClickStartPos && touch) {
+      const deltaX = touch.clientX - this.actionClickStartPos.x;
+      const deltaY = touch.clientY - this.actionClickStartPos.y;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      const editor = this.closest('temba-flow-editor') as any;
+      const editorWasDragging = editor?.dragging;
+
+      if (distance <= DRAG_THRESHOLD && (!editor || !editorWasDragging)) {
+        const actionEl = event.currentTarget as Element;
+        const origin = actionEl
+          ? this.getTopCenter(actionEl)
+          : { x: touch.clientX, y: touch.clientY };
+
+        this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+          action,
+          nodeUuid: this.node.uuid,
+          originX: origin.x,
+          originY: origin.y
+        });
+      }
+    }
+
+    this.actionClickStartPos = null;
+    this.pendingActionClick = null;
+  }
+  /* c8 ignore stop */
+
   private handleActionClick(event: MouseEvent, action: Action): void {
     // This method is kept for backward compatibility but should not be used
     // The new mousedown/mouseup approach handles click vs drag properly
@@ -1102,13 +1193,14 @@ export class CanvasNode extends RapidElement {
   private handleNodeMouseDown(event: MouseEvent): void {
     if (isRightClick(event)) return;
 
-    // Don't handle clicks on the remove button, exits, drag handle, or when node is in removing state
+    // Don't handle clicks on the remove button, exits, drag handle, linked elements, or when node is in removing state
     const target = event.target as HTMLElement;
     if (
       target.closest('.remove-button') ||
       target.closest('.exit') ||
       target.closest('.exit-wrapper') ||
       target.closest('.drag-handle') ||
+      target.closest('.linked-name') ||
       this.actionRemovingState.has(this.node.uuid)
     ) {
       return;
@@ -1128,13 +1220,14 @@ export class CanvasNode extends RapidElement {
       return;
     }
 
-    // Don't handle clicks on the remove button, exits, drag handle, or when node is in removing state
+    // Don't handle clicks on the remove button, exits, drag handle, linked elements, or when node is in removing state
     const target = event.target as HTMLElement;
     if (
       target.closest('.remove-button') ||
       target.closest('.exit') ||
       target.closest('.exit-wrapper') ||
       target.closest('.drag-handle') ||
+      target.closest('.linked-name') ||
       this.actionRemovingState.has(this.node.uuid)
     ) {
       this.nodeClickStartPos = null;
@@ -1187,6 +1280,84 @@ export class CanvasNode extends RapidElement {
     this.pendingNodeClick = null;
   }
 
+  /* c8 ignore start -- touch-only handlers */
+  private handleNodeTouchStart(event: TouchEvent): void {
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.remove-button') ||
+      target.closest('.exit') ||
+      target.closest('.exit-wrapper') ||
+      target.closest('.drag-handle') ||
+      target.closest('.linked-name') ||
+      this.actionRemovingState.has(this.node.uuid)
+    ) {
+      return;
+    }
+
+    const touch = event.touches[0];
+    if (!touch) return;
+    this.nodeClickStartPos = { x: touch.clientX, y: touch.clientY };
+    this.pendingNodeClick = { event: event as any };
+  }
+
+  private handleNodeTouchEnd(event: TouchEvent): void {
+    if (!this.pendingNodeClick) {
+      this.nodeClickStartPos = null;
+      this.pendingNodeClick = null;
+      return;
+    }
+
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.remove-button') ||
+      target.closest('.exit') ||
+      target.closest('.exit-wrapper') ||
+      target.closest('.drag-handle') ||
+      target.closest('.linked-name') ||
+      this.actionRemovingState.has(this.node.uuid)
+    ) {
+      this.nodeClickStartPos = null;
+      this.pendingNodeClick = null;
+      return;
+    }
+
+    const touch = event.changedTouches[0];
+    if (this.nodeClickStartPos && touch) {
+      const deltaX = touch.clientX - this.nodeClickStartPos.x;
+      const deltaY = touch.clientY - this.nodeClickStartPos.y;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      const editor = this.closest('temba-flow-editor') as any;
+      const editorWasDragging = editor?.dragging;
+
+      if (distance <= 5 && (!editor || !editorWasDragging)) {
+        if (this.node.router) {
+          const origin = this.getTopCenter(this);
+
+          if (this.node.actions && this.node.actions.length === 1) {
+            this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+              action: this.node.actions[0],
+              nodeUuid: this.node.uuid,
+              originX: origin.x,
+              originY: origin.y
+            });
+          } else {
+            this.fireCustomEvent(CustomEventType.NodeEditRequested, {
+              node: this.node,
+              nodeUI: this.ui,
+              originX: origin.x,
+              originY: origin.y
+            });
+          }
+        }
+      }
+    }
+
+    this.nodeClickStartPos = null;
+    this.pendingNodeClick = null;
+  }
+  /* c8 ignore stop */
+
   private handleAddActionClick(event: MouseEvent): void {
     event.preventDefault();
     event.stopPropagation();
@@ -1498,6 +1669,10 @@ export class CanvasNode extends RapidElement {
             !isDisabled && this.handleActionMouseDown(e, action)}
           @mouseup=${(e: MouseEvent) =>
             !isDisabled && this.handleActionMouseUp(e, action)}
+          @touchstart=${(e: TouchEvent) =>
+            !isDisabled && this.handleActionTouchStart(e, action)}
+          @touchend=${(e: TouchEvent) =>
+            !isDisabled && this.handleActionTouchEnd(e, action)}
           style="cursor: ${isDisabled ? 'not-allowed' : 'pointer'}"
         >
           ${this.renderTitle(config, action, index, isRemoving)}
@@ -1559,10 +1734,15 @@ export class CanvasNode extends RapidElement {
               class="body"
               @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
               @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}
+              @touchstart=${(e: TouchEvent) => this.handleNodeTouchStart(e)}
+              @touchend=${(e: TouchEvent) => this.handleNodeTouchEnd(e)}
               style="cursor: pointer;"
             >
-              Save as
-              <div class="result-name">${router.result_name}</div>
+              ${renderClamped(
+                html`Save as
+                  <span class="result-name">${router.result_name}</span>`,
+                `Save as ${router.result_name}`
+              )}
             </div>`
           : null}
       </div>`;
@@ -1622,9 +1802,11 @@ export class CanvasNode extends RapidElement {
             })}
             @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
             @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}
+            @touchstart=${(e: TouchEvent) => this.handleNodeTouchStart(e)}
+            @touchend=${(e: TouchEvent) => this.handleNodeTouchEnd(e)}
             style="cursor: pointer;"
           >
-            <div class="cn-title">${displayName}</div>
+            <div class="cn-title" title="${displayName}">${displayName}</div>
             ${this.renderExit(exit)}
           </div>`;
         }
@@ -1697,6 +1879,8 @@ export class CanvasNode extends RapidElement {
               <div
                 @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
                 @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}
+                @touchstart=${(e: TouchEvent) => this.handleNodeTouchStart(e)}
+                @touchend=${(e: TouchEvent) => this.handleNodeTouchEnd(e)}
                 style="cursor: pointer;"
               >
                 ${this.renderNodeTitle(