@nyaruka/temba-components 0.142.1 → 0.142.2

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;
 
@@ -131,13 +128,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 +184,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 +200,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 +233,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 +245,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 +258,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';
@@ -349,6 +349,7 @@ export class CanvasNode extends RapidElement {
 
       .router .body {
         padding: 0.75em;
+        max-width: 180px;
       }
 
       .result-name {
@@ -973,11 +974,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 +1002,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;
@@ -1102,13 +1105,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 +1132,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;
@@ -1561,8 +1566,11 @@ export class CanvasNode extends RapidElement {
               @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(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>`;
@@ -1624,7 +1632,7 @@ export class CanvasNode extends RapidElement {
             @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}
             style="cursor: pointer;"
           >
-            <div class="cn-title">${displayName}</div>
+            <div class="cn-title" title="${displayName}">${displayName}</div>
             ${this.renderExit(exit)}
           </div>`;
         }

package/src/flow/Editor.ts

@@ -955,7 +955,7 @@ export class Editor extends RapidElement {
         top: 8px;
         right: 240px;
         padding: 6px 10px;
-        z-index: 10000;
+        z-index: 4999;
         pointer-events: none;
         opacity: 0;
         transition: opacity 0.15s ease-in-out;
@@ -1188,8 +1188,10 @@ export class Editor extends RapidElement {
               x: snappedPosition.left,
               y: snappedPosition.top
             },
-            false
-          ); // Don't show sticky note option for connection drops
+            false, // Don't show sticky note option for connection drops
+            false,
+            this.flowType === 'message'
+          );
         }
       }
 
@@ -1617,7 +1619,11 @@ export class Editor extends RapidElement {
     const element = event.currentTarget as HTMLElement;
     // Only start dragging if clicking on the element itself, not on exits or other interactive elements
     const target = event.target as HTMLElement;
-    if (target.classList.contains('exit') || target.closest('.exit')) {
+    if (
+      target.classList.contains('exit') ||
+      target.closest('.exit') ||
+      target.closest('.linked-name')
+    ) {
       return;
     }
 
@@ -2803,7 +2809,8 @@ export class Editor extends RapidElement {
           y: snappedTop
         },
         true,
-        hasNodes
+        hasNodes,
+        this.flowType === 'message'
       );
     }
   }
@@ -2826,7 +2833,14 @@ export class Editor extends RapidElement {
       const menuWidth = 265;
       const menuX = rect.left + rect.width / 2 - menuWidth / 2;
       const menuY = rect.bottom + 8;
-      canvasMenu.show(menuX, menuY, { x: nodeLeft, y: nodeTop }, false);
+      canvasMenu.show(
+        menuX,
+        menuY,
+        { x: nodeLeft, y: nodeTop },
+        false,
+        false,
+        this.flowType === 'message'
+      );
     }
   }
 
@@ -2852,6 +2866,19 @@ export class Editor extends RapidElement {
       this.connectionSourceX = null;
       this.connectionSourceY = null;
       this.dragFromNodeId = null;
+    } else if (
+      selection.action === 'send_msg' ||
+      selection.action === 'wait_for_response'
+    ) {
+      // Go directly to the node editor (skip node type selector)
+      this.handleNodeTypeSelection(
+        new CustomEvent(CustomEventType.Selection, {
+          detail: {
+            nodeType: selection.action,
+            position: selection.position
+          } as NodeTypeSelection
+        })
+      );
     } else {
       // Show node type selector
       const selector = this.querySelector(