@nyaruka/temba-components 0.139.0 → 0.141.0

package/src/display/Thumbnail.ts

@@ -1,6 +1,6 @@
 import { PropertyValueMap, css, html } from 'lit';
 import { RapidElement } from '../RapidElement';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { getClasses } from '../utils';
 import { Lightbox } from './Lightbox';
 import { WebChatIcon } from '../webchat';
@@ -67,11 +67,57 @@ export class Thumbnail extends RapidElement {
       }
 
       .thumb.document,
-      .thumb.audio,
       .thumb.video {
         border: 1px solid #eee;
       }
 
+      .audio-player {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 8px;
+        background: rgba(0, 0, 0, 0.05);
+        border-radius: var(--curvature);
+        cursor: default;
+      }
+
+      .audio-play-btn {
+        cursor: pointer;
+        color: #666;
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .audio-play-btn:hover {
+        color: #333;
+      }
+
+      .audio-progress-bar {
+        flex: 1;
+        height: 3px;
+        background: #ddd;
+        border-radius: 2px;
+        overflow: hidden;
+        min-width: 60px;
+        cursor: pointer;
+      }
+
+      .audio-progress-fill {
+        height: 100%;
+        background: var(--color-primary, #2387ca);
+        border-radius: 2px;
+        transition: width 0.15s linear;
+      }
+
+      .audio-time {
+        font-size: 11px;
+        color: #999;
+        flex-shrink: 0;
+        min-width: 28px;
+        text-align: right;
+      }
+
       .wrapper:hover .thumb.icon {
       }
 
@@ -133,6 +179,74 @@ export class Thumbnail extends RapidElement {
   @property({ type: String, attribute: false })
   private tileUrl: string = '';
 
+  // audio player state
+  private audio: HTMLAudioElement | null = null;
+
+  @state()
+  private audioPlaying = false;
+
+  @state()
+  private audioProgress = 0;
+
+  @state()
+  private audioDuration = 0;
+
+  private handleAudioPlayClick(e: Event) {
+    e.stopPropagation();
+
+    if (!this.audio) {
+      this.audio = new Audio(this.url);
+      this.audio.addEventListener('timeupdate', () => {
+        if (this.audio.duration) {
+          this.audioProgress = this.audio.currentTime / this.audio.duration;
+          this.audioDuration = this.audio.duration;
+        }
+      });
+      this.audio.addEventListener('ended', () => {
+        this.audioPlaying = false;
+        this.audioProgress = 0;
+      });
+      this.audio.addEventListener('error', () => {
+        this.audioPlaying = false;
+        this.audioProgress = 0;
+      });
+    }
+
+    if (this.audioPlaying) {
+      this.audio.pause();
+      this.audioPlaying = false;
+    } else {
+      this.audio.play().catch(() => {
+        this.audioPlaying = false;
+      });
+      this.audioPlaying = true;
+    }
+  }
+
+  private handleProgressClick(e: MouseEvent) {
+    e.stopPropagation();
+    if (!this.audio || !this.audio.duration) return;
+    const bar = e.currentTarget as HTMLElement;
+    const rect = bar.getBoundingClientRect();
+    const pct = (e.clientX - rect.left) / rect.width;
+    this.audio.currentTime = pct * this.audio.duration;
+  }
+
+  private formatTime(seconds: number): string {
+    const s = Math.floor(seconds);
+    const m = Math.floor(s / 60);
+    const rem = s % 60;
+    return `${m}:${rem.toString().padStart(2, '0')}`;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.audio) {
+      this.audio.pause();
+      this.audio = null;
+    }
+  }
+
   // convert lat/lng to tile coordinates for OSM
   private latLngToTile(lat: number, lng: number, zoom: number) {
     const n = Math.pow(2, zoom);
@@ -227,6 +341,8 @@ export class Thumbnail extends RapidElement {
       // open location in openstreetmap
       const osmUrl = `https://www.openstreetmap.org/?mlat=${this.latitude}&mlon=${this.longitude}#map=15/${this.latitude}/${this.longitude}`;
       window.open(osmUrl, '_blank');
+    } else if (this.contentType === ThumbnailContentType.AUDIO) {
+      // audio has inline controls, no click action needed
     } else {
       window.open(this.url, '_blank');
     }
@@ -245,6 +361,9 @@ export class Thumbnail extends RapidElement {
       <div
         @click=${this.handleThumbnailClicked.bind(this)}
         class="${getClasses({ wrapper: true, zoom: this.zoom })}"
+        style="${this.contentType === ThumbnailContentType.AUDIO
+          ? 'cursor: default;'
+          : ''}"
         url=${this.url}
       >
         ${this.contentType === ThumbnailContentType.IMAGE && this.preview
@@ -254,6 +373,47 @@ export class Thumbnail extends RapidElement {
           class="observe thumb ${this.contentType}"
           src="${this.url}"
         ></img></div>`
+          : this.contentType === ThumbnailContentType.AUDIO
+          ? html`<div class="audio-player">
+              <div class="audio-play-btn" @click=${this.handleAudioPlayClick}>
+                ${this.audioPlaying
+                  ? html`<svg
+                      viewBox="0 0 24 24"
+                      width="14"
+                      height="14"
+                      fill="currentColor"
+                    >
+                      <rect x="5" y="3" width="4" height="18" />
+                      <rect x="15" y="3" width="4" height="18" />
+                    </svg>`
+                  : html`<svg
+                      viewBox="0 0 24 24"
+                      width="14"
+                      height="14"
+                      fill="currentColor"
+                    >
+                      <polygon points="6,3 20,12 6,21" />
+                    </svg>`}
+              </div>
+              <div
+                class="audio-progress-bar"
+                @click=${this.handleProgressClick}
+              >
+                <div
+                  class="audio-progress-fill"
+                  style="width: ${this.audioProgress * 100}%"
+                ></div>
+              </div>
+              <div class="audio-time">
+                ${this.audioDuration
+                  ? this.formatTime(
+                      this.audioPlaying || this.audioProgress > 0
+                        ? this.audio?.currentTime || 0
+                        : this.audioDuration
+                    )
+                  : ''}
+              </div>
+            </div>`
           : html`
               ${this.contentType === ThumbnailContentType.LOCATION
                 ? html`<img

package/src/flow/CanvasNode.ts

@@ -9,7 +9,7 @@ import { getClasses } from '../utils';
 import { Plumber } from './Plumber';
 import { getStore } from '../store/Store';
 import { CustomEventType } from '../interfaces';
-import { AppState, fromStore, zustand } from '../store/AppState';
+import { AppState, FlowIssue, fromStore, zustand } from '../store/AppState';
 
 const DRAG_THRESHOLD = 5;
 
@@ -49,6 +49,12 @@ export class CanvasNode extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.getCurrentActivity())
   private activity!: any;
 
+  @fromStore(zustand, (state: AppState) => state.issuesByNode)
+  private issuesByNode!: Map<string, FlowIssue[]>;
+
+  @fromStore(zustand, (state: AppState) => state.issuesByAction)
+  private issuesByAction!: Map<string, FlowIssue[]>;
+
   // Track exits that are in "removing" state
   private exitRemovalTimeouts: Map<string, number> = new Map();
 
@@ -169,7 +175,7 @@ export class CanvasNode extends RapidElement {
         z-index: 10;
         transition: all 100ms ease-in-out;
         align-self: center;
-        margin-right:0.15em;
+        margin-right: 0.3em;
         border: 0px solid red;
         width: 1em;
         pointer-events: auto; /* Ensure remove button can receive events */
@@ -185,6 +191,12 @@ export class CanvasNode extends RapidElement {
         pointer-events: none !important;
       }
 
+      /* Issue indicators - hatched red title bar */
+      .action-content.has-issues .cn-title,
+      .node.has-issues > .router .cn-title {
+        background: repeating-linear-gradient(120deg, tomato, tomato 6px, #ff7056 0, #ff7056 18px) !important;
+      }
+
       .action.sortable {
         display: flex;
         align-items: stretch;
@@ -548,14 +560,17 @@ export class CanvasNode extends RapidElement {
         // make our initial connections
         // We use setTimeout to allow for DOM updates to complete before querying for exits
         this.connectionTimeout = window.setTimeout(() => {
-          for (const exit of this.node.exits) {
-            this.plumber.makeSource(exit.uuid);
-            if (exit.destination_uuid) {
-              this.plumber.connectIds(
-                this.node.uuid,
-                exit.uuid,
-                exit.destination_uuid
-              );
+          // Terminal nodes have no visible exits
+          if (this.ui?.type !== 'terminal') {
+            for (const exit of this.node.exits) {
+              this.plumber.makeSource(exit.uuid);
+              if (exit.destination_uuid) {
+                this.plumber.connectIds(
+                  this.node.uuid,
+                  exit.uuid,
+                  exit.destination_uuid
+                );
+              }
             }
           }
           // Note: revalidation is handled by plumber's processPendingConnections which calls repaintEverything
@@ -949,6 +964,11 @@ export class CanvasNode extends RapidElement {
     this.requestUpdate();
   }
 
+  private getTopCenter(el: Element): { x: number; y: number } {
+    const rect = el.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top };
+  }
+
   private handleActionMouseDown(event: MouseEvent, action: Action): void {
     // Don't handle clicks on the remove button, drag handle, or when action is in removing state
     const target = event.target as HTMLElement;
@@ -1002,10 +1022,18 @@ export class CanvasNode extends RapidElement {
       // Only fire the action edit event if we haven't dragged beyond the threshold
       // AND either there's no Editor parent (test case) or the Editor didn't drag the node
       if (distance <= DRAG_THRESHOLD && (!editor || !editorWasDragging)) {
+        // Use top-center of the action element as the dialog origin
+        const actionEl = event.currentTarget as Element;
+        const origin = actionEl
+          ? this.getTopCenter(actionEl)
+          : { x: event.clientX, y: event.clientY };
+
         // Fire event to request action editing
         this.fireCustomEvent(CustomEventType.ActionEditRequested, {
           action,
-          nodeUuid: this.node.uuid
+          nodeUuid: this.node.uuid,
+          originX: origin.x,
+          originY: origin.y
         });
       }
     }
@@ -1125,17 +1153,24 @@ export class CanvasNode extends RapidElement {
         // Using literal 5 instead of DRAG_THRESHOLD since it's not imported
         // Fire event to request node editing if the node has a router
         if (this.node.router) {
+          // Use top-center of the node as the dialog origin
+          const origin = this.getTopCenter(this);
+
           // If router node has exactly one action, open the action editor directly
           if (this.node.actions && this.node.actions.length === 1) {
             this.fireCustomEvent(CustomEventType.ActionEditRequested, {
               action: this.node.actions[0],
-              nodeUuid: this.node.uuid
+              nodeUuid: this.node.uuid,
+              originX: origin.x,
+              originY: origin.y
             });
           } else {
             // Otherwise open the node editor as before
             this.fireCustomEvent(CustomEventType.NodeEditRequested, {
               node: this.node,
-              nodeUI: this.ui
+              nodeUI: this.ui,
+              originX: origin.x,
+              originY: origin.y
             });
           }
         }
@@ -1310,13 +1345,11 @@ export class CanvasNode extends RapidElement {
     const color = config.group
       ? ACTION_GROUP_METADATA[config.group]?.color
       : '#aaaaaa';
+    const isTerminal = this.ui?.type === 'terminal';
     return html`<div class="cn-title" style="background:${color}">
-      ${this.ui?.type === 'execute_actions'
-        ? html`<temba-icon
-            class="drag-handle ${this.isReadOnly() ? 'read-only-hidden' : ''}"
-            name="sort"
-          ></temba-icon>`
-        : this.node?.actions?.length > 1
+      ${isTerminal
+        ? html`<div class="title-spacer"></div>`
+        : this.ui?.type === 'execute_actions' || this.node?.actions?.length > 1
         ? html`<temba-icon
             class="drag-handle ${this.isReadOnly() ? 'read-only-hidden' : ''}"
             name="sort"
@@ -1325,7 +1358,9 @@ export class CanvasNode extends RapidElement {
 
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
       <div
-        class="remove-button ${this.isReadOnly() ? 'read-only-hidden' : ''}"
+        class="remove-button ${isTerminal || this.isReadOnly()
+          ? 'read-only-hidden'
+          : ''}"
         @click=${(e: MouseEvent) =>
           this.handleActionRemoveClick(e, action, index)}
         title="Remove action"
@@ -1438,6 +1473,7 @@ export class CanvasNode extends RapidElement {
     const displayAction = this.getLocalizedAction(action);
 
     if (config) {
+      const hasIssues = this.issuesByAction?.has(action.uuid);
       const classes = [
         'action',
         'sortable',
@@ -1452,7 +1488,7 @@ export class CanvasNode extends RapidElement {
 
       return html`<div class="${classes}" id="action-${index}">
         <div
-          class="action-content"
+          class="action-content ${hasIssues ? 'has-issues' : ''}"
           @mousedown=${(e: MouseEvent) =>
             !isDisabled && this.handleActionMouseDown(e, action)}
           @mouseup=${(e: MouseEvent) =>
@@ -1628,13 +1664,19 @@ export class CanvasNode extends RapidElement {
     const activeCount =
       (this.activity?.nodes && this.activity.nodes[this.node.uuid]) || 0;
 
+    // Check for node-level issues or action-level issues on any action in this node
+    const nodeHasIssues =
+      this.issuesByNode?.has(this.node.uuid) ||
+      this.node.actions?.some((a) => this.issuesByAction?.has(a.uuid));
+
     return html`
       <div
         id="${this.node.uuid}"
         class=${getClasses({
           node: true,
           'execute-actions': this.ui.type === 'execute_actions',
-          'non-localizable': isNodeDisabled
+          'non-localizable': isNodeDisabled,
+          'has-issues': nodeHasIssues
         })}
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
@@ -1643,7 +1685,9 @@ export class CanvasNode extends RapidElement {
               ${activeCount.toLocaleString()}
             </div>`
           : ''}
-        ${nodeConfig && nodeConfig.type !== 'execute_actions'
+        ${nodeConfig &&
+        nodeConfig.type !== 'execute_actions' &&
+        nodeConfig.type !== 'terminal'
           ? html`<div class="router" style="position: relative;">
               <div
                 @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
@@ -1661,7 +1705,7 @@ export class CanvasNode extends RapidElement {
                   : null}
               </div>
             </div>`
-          : this.node.actions.length > 0
+          : this.node.actions?.length > 0
           ? this.ui.type === 'execute_actions'
             ? html`<temba-sortable-list
                   dragHandle="drag-handle"
@@ -1691,6 +1735,8 @@ export class CanvasNode extends RapidElement {
               ${this.renderRouter(this.node.router, this.ui)}
               ${this.renderCategories(this.node)}
             </div>`
+          : this.ui.type === 'terminal'
+          ? ''
           : html`<div class="action-exits">
               ${repeat(
                 this.node.exits,