@nyaruka/temba-components 0.142.1 → 0.142.2

package/src/flow/NodeEditor.ts

@@ -14,6 +14,8 @@ import {
   LayoutItem,
   RowLayoutConfig,
   GroupLayoutConfig,
+  AccordionLayoutConfig,
+  AccordionSection,
   FormData,
   ACTION_GROUP_METADATA,
   SPLIT_GROUP_METADATA
@@ -155,6 +157,25 @@ export class NodeEditor extends RapidElement {
         overflow: hidden;
       }
 
+      .form-group.no-border {
+        border: none;
+      }
+
+      .form-group.no-border > .form-group-header {
+        background: none;
+        border-bottom: none;
+        padding-left: 11px; /* 1px border + 10px padding to align with bordered groups */
+      }
+
+      .form-group.no-border > .form-group-header:hover {
+        background: none;
+      }
+
+      .form-group.no-border > .form-group-content {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
       .form-group.has-errors {
         border-color: var(--color-error, tomato);
       }
@@ -319,6 +340,135 @@ export class NodeEditor extends RapidElement {
         align-items: center;
       }
 
+      /* Accordion styles */
+      .accordion {
+        border: 1px solid #e0e0e0;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .accordion-section {
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      .accordion-section:last-child {
+        border-bottom: none;
+      }
+
+      .accordion-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 10px;
+        cursor: pointer;
+        user-select: none;
+        background: #f8f9fa;
+        transition: background 0.15s ease;
+      }
+
+      .accordion-header:hover {
+        background: #f0f1f2;
+      }
+
+      .accordion-section.expanded > .accordion-header {
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      .accordion-title {
+        font-weight: 500;
+        font-size: 13px;
+        color: var(--color-label, #777);
+      }
+
+      .accordion-toggle-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+
+      .accordion-toggle-icon {
+        color: #999;
+        transition:
+          transform 0.2s ease,
+          opacity 0.3s ease;
+      }
+
+      .accordion-toggle-icon.expanded {
+        transform: rotate(90deg);
+      }
+
+      .accordion-toggle-icon.faded {
+        opacity: 0;
+      }
+
+      .accordion-count-bubble {
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        font-weight: 600;
+        padding: 3px;
+        min-width: 10px;
+        min-height: 10px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        line-height: 0px;
+        opacity: 1;
+        transition: opacity 0.3s ease;
+        background: var(--color-bubble-bg, #fff);
+        border: 1px solid var(--color-bubble-border, #777);
+        color: var(--color-bubble-text, #000);
+      }
+
+      .accordion-count-bubble.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .accordion-checkmark-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 1;
+        transition: opacity 0.3s ease;
+        border-radius: 50%;
+        color: var(--color-bubble-text, #000);
+        background: var(--color-bubble-bg, #fff);
+        border: 1px solid var(--color-bubble-border, #777);
+        padding: 0.15em;
+      }
+
+      .accordion-checkmark-icon.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .accordion-content {
+        padding: 8px 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        overflow: hidden;
+        transition: all 0.2s ease-in-out;
+        opacity: 1;
+      }
+
+      .accordion-content.collapsed {
+        max-height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        opacity: 0;
+      }
+
+      .accordion-error-icon {
+        color: var(--color-error, tomato);
+        margin-right: 6px;
+      }
+
       .gutter-fields {
         display: flex;
         flex-direction: column;
@@ -1261,15 +1411,20 @@ export class NodeEditor extends RapidElement {
         const { label, collapsed, collapsible } = item;
 
         // Only update if the group is collapsible and has a function-based collapsed property
+        // Skip reveal groups that have been expanded — they are one-way
         if (collapsible && typeof collapsed === 'function') {
-          const newCollapsedState = collapsed(this.formData);
-
-          // Only update if the state has changed to avoid unnecessary re-renders
-          if (this.groupCollapseState[label] !== newCollapsedState) {
-            this.groupCollapseState = {
-              ...this.groupCollapseState,
-              [label]: newCollapsedState
-            };
+          if (item.reveal && this.groupCollapseState[label] === false) {
+            // Reveal group was manually expanded — don't re-collapse
+          } else {
+            const newCollapsedState = collapsed(this.formData);
+
+            // Only update if the state has changed to avoid unnecessary re-renders
+            if (this.groupCollapseState[label] !== newCollapsedState) {
+              this.groupCollapseState = {
+                ...this.groupCollapseState,
+                [label]: newCollapsedState
+              };
+            }
           }
         }
 
@@ -1278,6 +1433,21 @@ export class NodeEditor extends RapidElement {
       } else if (typeof item === 'object' && item.type === 'row') {
         // Recursively check items in rows
         this.updateGroupCollapseStatesRecursive(item.items);
+      } else if (typeof item === 'object' && item.type === 'accordion') {
+        // Check each accordion section
+        item.sections.forEach((section) => {
+          const stateKey = `accordion:${section.label}`;
+          if (typeof section.collapsed === 'function') {
+            const newCollapsedState = section.collapsed(this.formData);
+            if (this.groupCollapseState[stateKey] !== newCollapsedState) {
+              this.groupCollapseState = {
+                ...this.groupCollapseState,
+                [stateKey]: newCollapsedState
+              };
+            }
+          }
+          this.updateGroupCollapseStatesRecursive(section.items);
+        });
       }
     });
   }
@@ -1518,6 +1688,9 @@ export class NodeEditor extends RapidElement {
           const picker = e.target as any;
           const url = picker.attachments?.[0]?.url || '';
           this.handleNewFieldChange(fieldName, url);
+        } else if (fieldName && config.type === 'template-editor') {
+          // Special handling for template editor (manages template + template_variables)
+          this.handleTemplateEditorChange(fieldName, e);
         } else {
           // Default handling for most field types
           this.handleFormFieldChange(fieldName, e);
@@ -1526,7 +1699,8 @@ export class NodeEditor extends RapidElement {
       showLabel: true,
       formData: this.formData,
       additionalData: {
-        attachments: this.formData.attachments || []
+        attachments: this.formData.attachments || [],
+        template_variables: this.formData.template_variables || []
       }
     });
   }
@@ -1584,6 +1758,21 @@ export class NodeEditor extends RapidElement {
       } else if (typeof item === 'object' && item.type === 'row') {
         // Recursively check items in rows
         this.expandGroupsWithErrorsRecursive(item.items, errorFields);
+      } else if (typeof item === 'object' && item.type === 'accordion') {
+        // Check each accordion section for errors
+        item.sections.forEach((section) => {
+          const fieldsInSection = this.collectFieldsFromItems(section.items);
+          const sectionHasErrors = fieldsInSection.some((fieldName) =>
+            errorFields.has(fieldName)
+          );
+          if (sectionHasErrors) {
+            this.groupCollapseState = {
+              ...this.groupCollapseState,
+              [`accordion:${section.label}`]: false
+            };
+          }
+          this.expandGroupsWithErrorsRecursive(section.items, errorFields);
+        });
       }
     });
   }
@@ -1631,6 +1820,9 @@ export class NodeEditor extends RapidElement {
       case 'group':
         return this.renderGroup(item, config, renderedFields);
 
+      case 'accordion':
+        return this.renderAccordion(item, config, renderedFields);
+
       case 'spacer':
         return html``;
 
@@ -1771,6 +1963,8 @@ export class NodeEditor extends RapidElement {
       collapsed = false,
       helpText,
       contentPadding,
+      bordered = true,
+      reveal = false,
       getGroupValueCount
     } = groupConfig;
 
@@ -1791,6 +1985,13 @@ export class NodeEditor extends RapidElement {
         (typeof collapsed === 'function' ? collapsed(this.formData) : collapsed)
       : false;
 
+    // Reveal mode: once expanded, render items directly without any group wrapper
+    if (reveal && !isCollapsed) {
+      return html`${items.map((item) =>
+        this.renderLayoutItem(item, config, renderedFields)
+      )}`;
+    }
+
     // Check if any field in this group has errors
     const fieldsInGroup = this.collectFieldsFromItems(items);
     const groupHasErrors = fieldsInGroup.some(
@@ -1832,7 +2033,7 @@ export class NodeEditor extends RapidElement {
           ? 'has-errors'
           : ''} ${isCollapsed ? 'collapsed' : 'expanded'} ${hasValue
           ? 'has-bubble'
-          : ''}"
+          : ''} ${!bordered ? 'no-border' : ''}"
       >
         <div
           class="form-group-header ${collapsible ? 'clickable' : ''}"
@@ -1900,6 +2101,148 @@ export class NodeEditor extends RapidElement {
     `;
   }
 
+  private renderAccordion(
+    accordionConfig: AccordionLayoutConfig,
+    config: ActionConfig | NodeConfig,
+    renderedFields: Set<string>
+  ): TemplateResult {
+    const { sections, multi = false } = accordionConfig;
+
+    return html`
+      <div class="accordion">
+        ${sections.map((section) => {
+          const { label, collapsed = true, getValueCount } = section;
+          const stateKey = `accordion:${label}`;
+
+          // Initialize collapse state if not set
+          if (!(stateKey in this.groupCollapseState)) {
+            const initialCollapsed =
+              typeof collapsed === 'function'
+                ? collapsed(this.formData)
+                : collapsed;
+            this.groupCollapseState = {
+              ...this.groupCollapseState,
+              [stateKey]: initialCollapsed
+            };
+          }
+
+          const isCollapsed = this.groupCollapseState[stateKey] ?? true;
+          const isHovered = this.groupHoverState[stateKey] ?? false;
+
+          // Check for errors in this section
+          const fieldsInSection = this.collectFieldsFromItems(section.items);
+          const sectionHasErrors = fieldsInSection.some(
+            (fieldName) => this.errors[fieldName]
+          );
+
+          // Value count / checkmark display
+          let valueCount = 0;
+          let showBubble = false;
+          let showCheckmark = false;
+          let hasValue = false;
+
+          if (getValueCount) {
+            try {
+              const result = getValueCount(this.formData);
+              if (typeof result === 'boolean') {
+                hasValue = result;
+                showCheckmark = result && isCollapsed && !isHovered;
+              } else if (typeof result === 'number') {
+                valueCount = result;
+                hasValue = valueCount > 0;
+                showBubble = valueCount > 0 && isCollapsed && !isHovered;
+              }
+            } catch (error) {
+              // ignore
+            }
+          }
+
+          return html`
+            <div
+              class="accordion-section ${isCollapsed
+                ? 'collapsed'
+                : 'expanded'} ${hasValue ? 'has-value' : ''}"
+            >
+              <div
+                class="accordion-header"
+                @click=${() =>
+                  this.handleAccordionToggle(stateKey, sections, multi)}
+                @mouseenter=${() => this.handleGroupMouseEnter(stateKey)}
+                @mouseleave=${() => this.handleGroupMouseLeave(stateKey)}
+              >
+                <div class="accordion-title">${label}</div>
+                ${sectionHasErrors
+                  ? html`<temba-icon
+                      name="alert_warning"
+                      class="accordion-error-icon"
+                      size="1.2"
+                    ></temba-icon>`
+                  : html`<div class="accordion-toggle-container">
+                      <temba-icon
+                        name="arrow_right"
+                        size="1.2"
+                        class="accordion-toggle-icon ${isCollapsed
+                          ? 'collapsed'
+                          : 'expanded'} ${showBubble || showCheckmark
+                          ? 'faded'
+                          : ''}"
+                      ></temba-icon>
+                      ${showCheckmark
+                        ? html`<temba-icon
+                            name="check"
+                            size="0.8"
+                            class="accordion-checkmark-icon"
+                          ></temba-icon>`
+                        : showBubble
+                          ? html`<div
+                              class="accordion-count-bubble ${!showBubble
+                                ? 'hidden'
+                                : ''}"
+                            >
+                              ${valueCount}
+                            </div>`
+                          : ''}
+                    </div>`}
+              </div>
+              <div
+                class="accordion-content ${isCollapsed ? 'collapsed' : 'expanded'}"
+              >
+                ${section.items.map((item) =>
+                  this.renderLayoutItem(item, config, renderedFields)
+                )}
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  private handleAccordionToggle(
+    stateKey: string,
+    sections: AccordionSection[],
+    multi: boolean
+  ): void {
+    const isCurrentlyCollapsed = this.groupCollapseState[stateKey] ?? true;
+
+    if (multi) {
+      // Multi mode: just toggle this section
+      this.groupCollapseState = {
+        ...this.groupCollapseState,
+        [stateKey]: !isCurrentlyCollapsed
+      };
+    } else {
+      // Single mode: collapse all other sections, toggle this one
+      const newState = { ...this.groupCollapseState };
+      sections.forEach((section) => {
+        const key = `accordion:${section.label}`;
+        newState[key] = true; // collapse all
+      });
+      newState[stateKey] = !isCurrentlyCollapsed; // toggle clicked
+      this.groupCollapseState = newState;
+    }
+  }
+
   private collectFieldsFromItems(items: LayoutItem[]): string[] {
     const fields: string[] = [];
 
@@ -1912,6 +2255,10 @@ export class NodeEditor extends RapidElement {
         fields.push(...this.collectFieldsFromItems(item.items));
       } else if (item.type === 'group') {
         fields.push(...this.collectFieldsFromItems(item.items));
+      } else if (item.type === 'accordion') {
+        item.sections.forEach((section) => {
+          fields.push(...this.collectFieldsFromItems(section.items));
+        });
       }
     });
 
@@ -1953,6 +2300,22 @@ export class NodeEditor extends RapidElement {
     // Trigger re-render
     this.requestUpdate();
   }
+  private handleTemplateEditorChange(fieldName: string, event: Event): void {
+    const customEvent = event as CustomEvent;
+    const detail = customEvent.detail;
+
+    this.formData = {
+      ...this.formData,
+      [fieldName]: detail.template
+        ? { uuid: detail.template.uuid, name: detail.template.name }
+        : null,
+      template_variables: detail.variables || []
+    };
+
+    this.updateGroupCollapseStates();
+    this.requestUpdate();
+  }
+
   private handleMessageEditorChange(fieldName: string, event: Event): void {
     const target = event.target as any;
 

package/src/flow/NodeTypeSelector.ts

@@ -451,12 +451,14 @@ export class NodeTypeSelector extends RapidElement {
         .filter(([type, config]) => {
           // exclude execute_actions (it's the default action-only node)
           // exclude nodes that have showAsAction=true (they appear in action mode)
+          // exclude nodes that have hideFromSplits=true (promoted to context menu)
           // exclude aliases (type won't match config.type for aliases)
           return (
             type !== 'execute_actions' &&
             type === config.type &&
             config.name &&
             !config.showAsAction &&
+            !config.hideFromSplits &&
             this.isConfigAvailable(config)
           );
         })

package/src/flow/Plumber.ts

@@ -1087,7 +1087,9 @@ export class Plumber {
           const contactUuid = target.getAttribute('data-uuid');
           if (contactUuid) {
             this.editor.fireCustomEvent('temba-contact-clicked', {
-              uuid: contactUuid
+              uuid: contactUuid,
+              metaKey: e.metaKey,
+              ctrlKey: e.ctrlKey
             });
           }
         }

package/src/flow/actions/add_contact_urn.ts

@@ -7,7 +7,7 @@ import {
   FlowTypes
 } from '../types';
 import { Node, AddContactUrn } from '../../store/flow-definition';
-import { SCHEMES } from '../utils';
+import { SCHEMES, renderClamped } from '../utils';
 
 export const add_contact_urn: ActionConfig = {
   name: 'Add URN',
@@ -16,11 +16,10 @@ export const add_contact_urn: ActionConfig = {
   render: (_node: Node, action: AddContactUrn) => {
     const schemeObj = SCHEMES.find((s) => s.scheme === action.scheme);
     const friendlyScheme = schemeObj?.path || action.scheme;
-    return html`<div
-      style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
-    >
-      Add ${friendlyScheme} <strong>${action.path}</strong>
-    </div>`;
+    return renderClamped(
+      html`Add ${friendlyScheme} <strong>${action.path}</strong>`,
+      `Add ${friendlyScheme} ${action.path}`
+    );
   },
 
   toFormData: (action: AddContactUrn) => {

package/src/flow/actions/enter_flow.ts

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
 import { Node, EnterFlow } from '../../store/flow-definition';
-import { renderNamedObjects } from '../utils';
+import { renderFlowLinks } from '../utils';
 
 export const enter_flow: ActionConfig = {
   name: 'Enter a Flow',
@@ -9,7 +9,7 @@ export const enter_flow: ActionConfig = {
   hideFromActions: true,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: EnterFlow) => {
-    return html`${renderNamedObjects([action.flow], 'flow')}`;
+    return html`${renderFlowLinks([action.flow], 'flow')}`;
   },
   toFormData: (action: EnterFlow) => {
     return {

package/src/flow/actions/say_msg.ts

@@ -3,6 +3,7 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SayMsg } from '../../store/flow-definition';
 import { renderAudioPlayer } from './audio-player';
+import { renderClamped } from '../utils';
 
 export const say_msg: ActionConfig = {
   name: 'Say Message',
@@ -11,7 +12,7 @@ export const say_msg: ActionConfig = {
   render: (_node: Node, action: SayMsg) => {
     const text = (action.text || '').replace(/\n/g, '<br>');
     return html`
-      ${unsafeHTML(text)}
+      ${renderClamped(html`${unsafeHTML(text)}`, action.text || '')}
       ${action.audio_url
         ? html`<div style="margin-top: 0.5em;">
             ${renderAudioPlayer(action.audio_url)}

package/src/flow/actions/send_broadcast.ts

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SendBroadcast } from '../../store/flow-definition';
-import { renderStringList } from '../utils';
+import { renderStringList, renderClamped } from '../utils';
 import { Icon } from '../../Icons';
 
 export const send_broadcast: ActionConfig = {
@@ -17,11 +17,7 @@ export const send_broadcast: ActionConfig = {
     return html`<div>
       <div>${renderStringList(recipients, Icon.contacts)}</div>
       <div style="margin-top: 0.5em">
-        <div
-          style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
-        >
-          ${action.text}
-        </div>
+        ${renderClamped(action.text, action.text)}
       </div>
     </div>`;
   },

package/src/flow/actions/send_email.ts

@@ -7,7 +7,7 @@ import {
   FlowTypes
 } from '../types';
 import { Node, SendEmail } from '../../store/flow-definition';
-import { renderStringList } from '../utils';
+import { renderStringList, renderClamped } from '../utils';
 import { Icon } from '../../Icons';
 
 export const send_email: ActionConfig = {
@@ -18,11 +18,7 @@ export const send_email: ActionConfig = {
     return html`<div>
       <div>${renderStringList(action.addresses, Icon.email)}</div>
       <div style="margin-top: 0.5em">
-        <div
-          style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
-        >
-          ${action.subject}
-        </div>
+        ${renderClamped(action.subject, action.subject)}
       </div>
     </div>`;
   },