@nyaruka/temba-components 0.142.1 → 0.142.2

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/simulator/Simulator.ts

@@ -1944,7 +1944,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();