@nyaruka/temba-components 0.142.1 → 0.142.3

package/src/form/FieldRenderer.ts

@@ -9,7 +9,8 @@ import {
   MessageEditorFieldConfig,
   KeyValueFieldConfig,
   ArrayFieldConfig,
-  MediaFieldConfig
+  MediaFieldConfig,
+  TemplateEditorFieldConfig
 } from '../flow/types';
 import { Attachment } from '../interfaces';
 import { DEFAULT_MEDIA_ENDPOINT } from '../utils';
@@ -101,6 +102,14 @@ export class FieldRenderer {
           context
         );
 
+      case 'template-editor':
+        return FieldRenderer.renderTemplateEditor(
+          fieldName,
+          config as TemplateEditorFieldConfig,
+          value,
+          context
+        );
+
       default:
         return html`<div>Unsupported field type: ${(config as any).type}</div>`;
     }
@@ -129,7 +138,7 @@ export class FieldRenderer {
         .errors="${errors}"
         .value="${value || ''}"
         placeholder="${config.placeholder || ''}"
-        expressions="session"
+        session
         .helpText="${config.helpText || ''}"
         class="${extraClasses}"
         style="${style}"
@@ -181,7 +190,7 @@ export class FieldRenderer {
         .value="${value || ''}"
         placeholder="${config.placeholder || ''}"
         textarea
-        expressions="session"
+        session
         .helpText="${config.helpText || ''}"
         class="${extraClasses}"
         style="${combinedStyle}"
@@ -462,6 +471,7 @@ export class FieldRenderer {
       ?autogrow="${config.autogrow}"
       ?gsm="${config.gsm}"
       ?disableCompletion="${config.disableCompletion}"
+      session
       counter="${config.counter || ''}"
       accept="${config.accept || ''}"
       endpoint="${config.endpoint || ''}"
@@ -472,6 +482,25 @@ export class FieldRenderer {
       @change="${onChange || (() => {})}"
     ></temba-message-editor>`;
   }
+
+  private static renderTemplateEditor(
+    _fieldName: string,
+    config: TemplateEditorFieldConfig,
+    value: any,
+    context: FieldRenderContext
+  ): TemplateResult {
+    const { onChange, additionalData = {} } = context;
+    const templateUuid = value?.uuid || '';
+    const variables = JSON.stringify(additionalData.template_variables || []);
+
+    return html`<temba-template-editor
+      url="${config.endpoint || '/api/internal/templates.json'}"
+      template="${templateUuid}"
+      variables="${variables}"
+      @temba-context-changed="${onChange || (() => {})}"
+      @temba-content-changed="${onChange || (() => {})}"
+    ></temba-template-editor>`;
+  }
 }
 
 export interface FieldRenderContext {

package/src/interfaces.ts

@@ -305,5 +305,6 @@ export enum CustomEventType {
   NodeEditCancelled = 'temba-node-edit-cancelled',
   FollowSimulation = 'temba-follow-simulation',
   ContactClicked = 'temba-contact-clicked',
+  FlowClicked = 'temba-flow-clicked',
   ShowIssue = 'temba-show-issue'
 }

package/src/list/SortableList.ts

@@ -44,6 +44,7 @@ export class SortableList extends RapidElement {
 
       slot > * {
         user-select: none;
+        touch-action: none;
       }
 
       temba-icon {
@@ -103,6 +104,9 @@ export class SortableList extends RapidElement {
     this.handleMouseMove = this.handleMouseMove.bind(this);
     this.handleMouseUp = this.handleMouseUp.bind(this);
     this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleTouchMove = this.handleTouchMove.bind(this);
+    this.handleTouchEnd = this.handleTouchEnd.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
   }
 
   private getSortableElements(): Element[] {
@@ -369,48 +373,81 @@ export class SortableList extends RapidElement {
     this.downEle.insertAdjacentElement('afterend', this.dropPlaceholder);
   }
 
-  private handleMouseDown(event: MouseEvent) {
-    let ele = event.target as HTMLDivElement;
-
+  /**
+   * Shared drag-start logic for both mouse and touch.
+   * Returns true if a drag target was found and state was initialised.
+   */
+  private beginDrag(
+    target: HTMLElement,
+    clientX: number,
+    clientY: number
+  ): boolean {
     // if we have a drag handle, only allow dragging from that element
     if (this.dragHandle) {
-      if (!ele.classList.contains(this.dragHandle)) {
-        return;
+      if (!target.classList.contains(this.dragHandle)) {
+        return false;
       }
     }
 
-    ele = ele.closest('.sortable');
-    if (ele) {
+    const ele = target.closest('.sortable') as HTMLDivElement;
+    if (!ele) return false;
+
+    this.downEle = ele;
+    this.draggingId = ele.id;
+    this.draggingIdx = this.getRowIndex(ele.id);
+    this.draggingEle = ele;
+
+    const rect = ele.getBoundingClientRect();
+    this.originalElementRect = rect;
+    this.originalLayoutSize = {
+      width: ele.offsetWidth,
+      height: ele.offsetHeight
+    };
+    this.xOffset = clientX - rect.left;
+    this.yOffset = clientY - rect.top;
+    this.yDown = clientY;
+    this.xDown = clientX;
+
+    return true;
+  }
+
+  private handleMouseDown(event: MouseEvent) {
+    if (
+      this.beginDrag(event.target as HTMLElement, event.clientX, event.clientY)
+    ) {
       event.preventDefault();
       event.stopPropagation();
-      this.downEle = ele;
-      this.draggingId = ele.id;
-      this.draggingIdx = this.getRowIndex(ele.id);
-      this.draggingEle = ele;
-
-      // Use getBoundingClientRect for accurate offsets and store original dimensions
-      const rect = ele.getBoundingClientRect();
-      this.originalElementRect = rect; // Store viewport rect for ghost positioning
-      this.originalLayoutSize = {
-        width: ele.offsetWidth,
-        height: ele.offsetHeight
-      }; // Store layout dimensions for placeholders
-      this.xOffset = event.clientX - rect.left;
-      this.yOffset = event.clientY - rect.top;
-      this.yDown = event.clientY;
-      this.xDown = event.clientX;
-
       document.addEventListener('mousemove', this.handleMouseMove);
       document.addEventListener('mouseup', this.handleMouseUp);
     }
   }
 
-  private handleMouseMove(event: MouseEvent) {
+  /* c8 ignore start -- touch-only handlers */
+  private handleTouchStart(event: TouchEvent) {
+    const touch = event.touches[0];
+    if (!touch) return;
+    if (
+      this.beginDrag(event.target as HTMLElement, touch.clientX, touch.clientY)
+    ) {
+      event.stopPropagation();
+      document.addEventListener('touchmove', this.handleTouchMove, {
+        passive: false
+      });
+      document.addEventListener('touchend', this.handleTouchEnd);
+      document.addEventListener('touchcancel', this.handleTouchEnd);
+    }
+  }
+  /* c8 ignore stop */
+
+  /**
+   * Shared drag-move logic for both mouse and touch.
+   */
+  private processDragMove(clientX: number, clientY: number) {
     if (
       !this.ghostElement &&
       this.downEle &&
-      (Math.abs(event.clientY - this.yDown) > DRAG_THRESHOLD ||
-        Math.abs(event.clientX - this.xDown) > DRAG_THRESHOLD)
+      (Math.abs(clientY - this.yDown) > DRAG_THRESHOLD ||
+        Math.abs(clientX - this.xDown) > DRAG_THRESHOLD)
     ) {
       this.fireCustomEvent(CustomEventType.DragStart, {
         id: this.downEle.id
@@ -440,8 +477,8 @@ export class SortableList extends RapidElement {
       const hasAncestorScale = Math.abs(ancestorScale - 1) > 0.001;
 
       this.ghostElement.style.position = 'fixed';
-      this.ghostElement.style.left = event.clientX - this.xOffset + 'px';
-      this.ghostElement.style.top = event.clientY - this.yOffset + 'px';
+      this.ghostElement.style.left = clientX - this.xOffset + 'px';
+      this.ghostElement.style.top = clientY - this.yOffset + 'px';
       this.ghostElement.style.zIndex = '99999';
       this.ghostElement.style.opacity = '0.8';
 
@@ -480,12 +517,12 @@ export class SortableList extends RapidElement {
     }
 
     if (this.ghostElement) {
-      this.ghostElement.style.left = event.clientX - this.xOffset + 'px';
-      this.ghostElement.style.top = event.clientY - this.yOffset + 'px';
+      this.ghostElement.style.left = clientX - this.xOffset + 'px';
+      this.ghostElement.style.top = clientY - this.yOffset + 'px';
 
       // check if the drag is over the container (only if external dragging is allowed)
       const isOverContainer = this.externalDrag
-        ? this.isMouseOverContainer(event.clientX, event.clientY)
+        ? this.isMouseOverContainer(clientX, clientY)
         : true; // always consider "over container" if external drag is disabled
 
       // detect transition between internal and external drag (only if allowed)
@@ -501,8 +538,8 @@ export class SortableList extends RapidElement {
 
         this.fireCustomEvent(CustomEventType.DragExternal, {
           id: this.downEle.id,
-          mouseX: event.clientX,
-          mouseY: event.clientY
+          mouseX: clientX,
+          mouseY: clientY
         });
       } else if (this.externalDrag && isOverContainer && this.isExternalDrag) {
         // transitioning back to internal drag
@@ -520,7 +557,7 @@ export class SortableList extends RapidElement {
 
       // only show drop placeholder and calculate drop position if internal drag
       if (!this.isExternalDrag) {
-        const targetInfo = this.getDropTargetInfo(event.clientX, event.clientY);
+        const targetInfo = this.getDropTargetInfo(clientX, clientY);
         if (targetInfo) {
           const { element: targetElement, insertAfter } = targetInfo;
           const targetIdx = this.getRowIndex(targetElement.id);
@@ -537,9 +574,6 @@ export class SortableList extends RapidElement {
             dropIdx = insertAfter ? targetIdx + 1 : targetIdx;
           } else {
             // Target was originally after the drag position - moving forward
-            // When moving the dragged element forward (i.e., to a higher index), the targetIdx is based on the current DOM,
-            // which no longer includes the dragged element. This means all elements after the original position have shifted left by one,
-            // so we need to subtract 1 from targetIdx to get the correct insertion index. If inserting after the target, we use targetIdx as is.
             dropIdx = insertAfter ? targetIdx : targetIdx - 1;
           }
 
@@ -560,18 +594,30 @@ export class SortableList extends RapidElement {
         // external drag - continue firing external drag events with updated position
         this.fireCustomEvent(CustomEventType.DragExternal, {
           id: this.downEle.id,
-          mouseX: event.clientX,
-          mouseY: event.clientY
+          mouseX: clientX,
+          mouseY: clientY
         });
       }
     }
   }
 
-  private handleMouseUp(evt: MouseEvent) {
-    if (this.draggingId && this.ghostElement) {
-      evt.preventDefault();
-      evt.stopPropagation();
+  private handleMouseMove(event: MouseEvent) {
+    this.processDragMove(event.clientX, event.clientY);
+  }
+
+  /* c8 ignore next 6 -- touch-only */
+  private handleTouchMove(event: TouchEvent) {
+    const touch = event.touches[0];
+    if (!touch) return;
+    event.preventDefault();
+    this.processDragMove(touch.clientX, touch.clientY);
+  }
 
+  /**
+   * Shared drag-end logic for both mouse and touch.
+   */
+  private processDragEnd(clientX: number, clientY: number) {
+    if (this.draggingId && this.ghostElement) {
       // Remove the ghost clone from document.body
       if (this.ghostElement) {
         this.ghostElement.remove();
@@ -610,8 +656,8 @@ export class SortableList extends RapidElement {
       this.fireCustomEvent(CustomEventType.DragStop, {
         id: this.draggingId,
         isExternal: this.isExternalDrag,
-        mouseX: evt.clientX,
-        mouseY: evt.clientY
+        mouseX: clientX,
+        mouseY: clientY
       });
 
       this.draggingId = null;
@@ -639,18 +685,42 @@ export class SortableList extends RapidElement {
         }, 100);
       }
     }
+  }
+
+  private handleMouseUp(evt: MouseEvent) {
+    if (this.draggingId && this.ghostElement) {
+      evt.preventDefault();
+      evt.stopPropagation();
+    }
+    this.processDragEnd(evt.clientX, evt.clientY);
     document.removeEventListener('mousemove', this.handleMouseMove);
     document.removeEventListener('mouseup', this.handleMouseUp);
     this.dispatchEvent(new Event('change'));
   }
 
+  /* c8 ignore start -- touch-only */
+  private handleTouchEnd(evt: TouchEvent) {
+    const touch = evt.changedTouches[0];
+    const clientX = touch?.clientX ?? 0;
+    const clientY = touch?.clientY ?? 0;
+    this.processDragEnd(clientX, clientY);
+    document.removeEventListener('touchmove', this.handleTouchMove);
+    document.removeEventListener('touchend', this.handleTouchEnd);
+    document.removeEventListener('touchcancel', this.handleTouchEnd);
+    this.dispatchEvent(new Event('change'));
+  }
+  /* c8 ignore stop */
+
   public render(): TemplateResult {
     return html`
       <div
         class="container ${this.horizontal ? 'horizontal' : ''}"
         style="gap: ${this.gap}"
       >
-        <slot @mousedown=${this.handleMouseDown}></slot>
+        <slot
+          @mousedown=${this.handleMouseDown}
+          @touchstart=${this.handleTouchStart}
+        ></slot>
       </div>
     `;
   }

package/src/simulator/Simulator.ts

@@ -582,6 +582,7 @@ export class Simulator extends RapidElement {
         flex-wrap: wrap;
         justify-content: center;
         gap: 6px;
+        padding: 0 12px;
         z-index: 9;
       }
 
@@ -594,7 +595,10 @@ export class Simulator extends RapidElement {
         font-size: 11px;
         cursor: pointer;
         transition: all 0.2s ease;
-        flex-shrink: 0;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .quick-reply-btn:hover:not(:disabled) {
@@ -1944,7 +1948,7 @@ export class Simulator extends RapidElement {
             </button>
 
             <button class="option-btn" @click=${this.handleReset} title="Reset">
-              <temba-icon name="delete" size="1.5"></temba-icon>
+              <temba-icon name="refresh" size="1.5"></temba-icon>
             </button>
           </div>
         </div>

package/test/temba-canvas-menu.test.ts

@@ -48,19 +48,21 @@ describe('temba-canvas-menu', () => {
     await assertScreenshot('canvas-menu/open', getClip(menu));
   });
 
-  it('has three menu items', async () => {
+  it('has five menu items', async () => {
     const menu = await createCanvasMenu();
     menu.show(100, 100, { x: 50, y: 50 });
     await menu.updateComplete;
 
     const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
-    expect(menuItems?.length).to.equal(3);
+    expect(menuItems?.length).to.equal(5);
 
     // check menu item titles
     const titles = Array.from(menuItems || []).map(
       (item) => item.querySelector('.menu-item-title')?.textContent
     );
     expect(titles).to.deep.equal([
+      'Send Message',
+      'Wait for Response',
       'Add Action',
       'Add Split',
       'Add Sticky Note'
@@ -93,9 +95,9 @@ describe('temba-canvas-menu', () => {
       selectionDetail = event.detail;
     });
 
-    // click on sticky note option (now the third item)
+    // click on sticky note option (now the fifth item)
     const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
-    const stickyItem = menuItems?.[2] as HTMLElement;
+    const stickyItem = menuItems?.[4] as HTMLElement;
     stickyItem.click();
     await menu.updateComplete;
 
@@ -113,12 +115,14 @@ describe('temba-canvas-menu', () => {
     await menu.updateComplete;
 
     const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
-    expect(menuItems?.length).to.equal(4);
+    expect(menuItems?.length).to.equal(6);
 
     const titles = Array.from(menuItems || []).map(
       (item) => item.querySelector('.menu-item-title')?.textContent
     );
     expect(titles).to.deep.equal([
+      'Send Message',
+      'Wait for Response',
       'Add Action',
       'Add Split',
       'Add Sticky Note',
@@ -137,7 +141,7 @@ describe('temba-canvas-menu', () => {
     });
 
     const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
-    const reflowItem = menuItems?.[3] as HTMLElement;
+    const reflowItem = menuItems?.[5] as HTMLElement;
     reflowItem.click();
     await menu.updateComplete;
 
@@ -154,7 +158,7 @@ describe('temba-canvas-menu', () => {
     await menu.updateComplete;
 
     const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
-    expect(menuItems?.length).to.equal(3);
+    expect(menuItems?.length).to.equal(5);
 
     const titles = Array.from(menuItems || []).map(
       (item) => item.querySelector('.menu-item-title')?.textContent
@@ -200,8 +204,8 @@ describe('temba-canvas-menu', () => {
     });
 
     const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
-    const actionItem = menuItems?.[0] as HTMLElement;
-    actionItem.click();
+    const sendMsgItem = menuItems?.[0] as HTMLElement;
+    sendMsgItem.click();
     await menu.updateComplete;
 
     expect(selectionFired).to.be.true;

package/test/temba-flow-reflow.test.ts

@@ -375,8 +375,10 @@ describe('Reflow Layout', () => {
         ),
         ...childIds.map((id) => makeNode(id, []))
       ];
-      const nodeUIs: Record<string, { position: { left: number; top: number } }> =
-        { A: { position: { left: 0, top: 0 } } };
+      const nodeUIs: Record<
+        string,
+        { position: { left: number; top: number } }
+      > = { A: { position: { left: 0, top: 0 } } };
       childIds.forEach((id, i) => {
         nodeUIs[id] = { position: { left: i * 260, top: 200 } };
       });

package/test/temba-node-editor.test.ts

@@ -343,7 +343,7 @@ describe('temba-node-editor', () => {
     expect(shadowRoot).to.not.be.null;
   });
 
-  it('displays bubble count for group value counts', async () => {
+  it('displays bubble count for accordion value counts', async () => {
     const action = {
       uuid: 'test-action-uuid',
       type: 'send_msg',
@@ -362,11 +362,11 @@ describe('temba-node-editor', () => {
     await new Promise((resolve) => setTimeout(resolve, 200));
     await el.updateComplete;
 
-    // Check that bubble counts are displayed
+    // Check that bubble counts are displayed in accordion sections
     const shadowRoot = el.shadowRoot;
-    const bubbles = shadowRoot.querySelectorAll('.group-count-bubble');
+    const bubbles = shadowRoot.querySelectorAll('.accordion-count-bubble');
 
-    // Should have bubbles for groups with values
+    // Should have bubbles for sections with values
     expect(bubbles.length).to.be.greaterThan(0);
 
     // Check specific bubble values (trim to handle whitespace in rendered text)
@@ -374,12 +374,11 @@ describe('temba-node-editor', () => {
       bubble.textContent?.trim()
     );
 
-    // Runtime attachments group should show bubble when collapsed and has values
+    // Runtime attachments section should show bubble when collapsed and has values
     expect(bubbleTexts).to.include('2'); // 2 runtime attachments
-    // Note: Quick replies group auto-expands when it has content, so no bubble is shown
   });
 
-  it('shows arrow when group has no values', async () => {
+  it('shows arrow when accordion section has no values', async () => {
     const action = {
       uuid: 'test-action-uuid',
       type: 'send_msg',
@@ -399,13 +398,13 @@ describe('temba-node-editor', () => {
 
     // Check that arrows are displayed instead of bubbles
     const shadowRoot = el.shadowRoot;
-    const bubbles = shadowRoot.querySelectorAll('.group-count-bubble');
-    const arrows = shadowRoot.querySelectorAll('.group-toggle-icon');
+    const bubbles = shadowRoot.querySelectorAll('.accordion-count-bubble');
+    const arrows = shadowRoot.querySelectorAll('.accordion-toggle-icon');
 
     // Should have no bubbles when counts are 0
     expect(bubbles.length).to.equal(0);
 
-    // Should have arrows for collapsible groups
+    // Should have arrows for accordion sections
     expect(arrows.length).to.be.greaterThan(0);
   });
 

package/test/temba-node-type-selector.test.ts

@@ -186,7 +186,7 @@ describe('temba-node-type-selector', () => {
     expect(titles).to.not.include('Play Recording');
   });
 
-  it('filters splits by flow type - message flow should show wait for response', async () => {
+  it('filters splits by flow type - message flow should not show wait for response in split dialog', async () => {
     const selector = await createSelector();
     selector.flowType = 'message';
     await selector.updateComplete;
@@ -199,8 +199,8 @@ describe('temba-node-type-selector', () => {
       item.textContent?.trim()
     );
 
-    // message flow should have Wait for Response
-    expect(titles).to.include('Wait for Response');
+    // Wait for Response is now promoted to the context menu, not in split dialog
+    expect(titles).to.not.include('Wait for Response');
   });
 
   it('filters splits by flow type - voice flow should not show wait for response', async () => {

package/test/temba-simulator.test.ts

@@ -734,12 +734,12 @@ describe('temba-simulator', () => {
     // mock the start response for reset
     mockSimulatorStart();
 
-    // click the reset button (has delete icon)
+    // click the reset button (has refresh icon)
     const optionButtons = Array.from(
       simulator.shadowRoot.querySelectorAll('.option-btn')
     );
     const resetButton = optionButtons.find((btn) =>
-      btn.querySelector('temba-icon[name="delete"]')
+      btn.querySelector('temba-icon[name="refresh"]')
     ) as HTMLElement;
     expect(resetButton).to.exist;
     resetButton.click();