@nyaruka/temba-components 0.129.7 → 0.129.9

package/src/flow/NodeEditor.ts

@@ -10,16 +10,11 @@ import {
   FieldConfig,
   ActionConfig
 } from './config';
-import {
-  SelectFieldConfig,
-  CheckboxFieldConfig,
-  TextareaFieldConfig,
-  LayoutItem,
-  RowLayoutConfig,
-  GroupLayoutConfig
-} from './types';
+import { LayoutItem, RowLayoutConfig, GroupLayoutConfig } from './types';
 import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
+import { FieldRenderer } from '../form/FieldRenderer';
+import { renderMarkdownInline } from '../markdown';
 
 export class NodeEditor extends RapidElement {
   static get styles() {
@@ -31,6 +26,10 @@ export class NodeEditor extends RapidElement {
         gap: 15px;
         min-width: 400px;
         padding-bottom: 40px;
+
+        --color-bubble-bg: rgba(var(--primary-rgb), 0.7);
+        --color-bubble-border: rgba(0, 0, 0, 0.2);
+        --color-bubble-text: #fff;
       }
 
       .form-field {
@@ -39,10 +38,6 @@ export class NodeEditor extends RapidElement {
       }
 
       .form-field label {
-        font-weight: 500;
-        margin-bottom: 6px;
-        color: #333;
-        font-size: 14px;
       }
 
       .field-errors {
@@ -103,10 +98,16 @@ export class NodeEditor extends RapidElement {
         border-color: var(--color-error, tomato);
       }
 
+      .form-group.has-bubble {
+        border-width: 2px;
+        border-color: rgba(var(--primary-rgb), 0.5);
+      }
+
       .form-group-header {
         background: #f8f9fa;
-        padding: 12px 15px;
+        padding: 8px 10px;
         border-bottom: 1px solid #e0e0e0;
+
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -114,6 +115,18 @@ export class NodeEditor extends RapidElement {
         user-select: none;
       }
 
+      .form-group.has-bubble .form-group-header {
+        background: rgba(var(--primary-rgb), 0.1);
+      }
+
+      .collapsed .form-group-header {
+        border: none;
+      }
+
+      .form-group-header:hover {
+        background: rgba(0, 0, 0, 0.05);
+      }
+
       .form-group-header.collapsible:hover {
         background: #f1f3f4;
       }
@@ -124,7 +137,7 @@ export class NodeEditor extends RapidElement {
 
       .form-group-title {
         font-weight: 500;
-        color: #333;
+        color: var(--color-label, #777);
         font-size: 14px;
         display: flex;
       }
@@ -147,13 +160,13 @@ export class NodeEditor extends RapidElement {
       }
 
       .form-group-content {
-        padding: 15px;
+        padding: 6px;
         display: flex;
         flex-direction: column;
         gap: 15px;
         overflow: hidden;
-        transition: all 0.3s ease;
-        max-height: 1000px; /* Large enough to accommodate most content */
+        transition: all 0.2s ease-in-out;
+
         opacity: 1;
       }
 
@@ -166,9 +179,14 @@ export class NodeEditor extends RapidElement {
 
       .group-toggle-icon {
         color: #666;
-        transition: transform 0.3s ease;
+        transition: transform 0.3s ease, opacity 0.3s ease;
         cursor: pointer;
         transform: rotate(0deg);
+        opacity: 1;
+      }
+
+      .group-toggle-icon.faded {
+        opacity: 0;
       }
 
       .group-toggle-icon.expanded {
@@ -187,6 +205,58 @@ export class NodeEditor extends RapidElement {
         color: var(--color-error, tomato);
         margin-right: 8px;
       }
+
+      .group-count-bubble {
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 11px;
+        font-weight: 600;
+        padding: 4px;
+        min-width: 12px;
+        min-height: 12px;
+        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);
+      }
+
+      .group-count-bubble.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .group-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.2em;
+      }
+
+      .group-checkmark-icon.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .group-toggle-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
     `;
   }
 
@@ -214,6 +284,9 @@ export class NodeEditor extends RapidElement {
   @state()
   private groupCollapseState: { [key: string]: boolean } = {};
 
+  @state()
+  private groupHoverState: { [key: string]: boolean } = {};
+
   connectedCallback(): void {
     super.connectedCallback();
     this.initializeFormData();
@@ -221,10 +294,21 @@ export class NodeEditor extends RapidElement {
 
   updated(changedProperties: Map<string | number | symbol, unknown>): void {
     super.updated(changedProperties);
-    if (changedProperties.has('node') || changedProperties.has('action')) {
-      if (this.node || this.action) {
+    if (
+      changedProperties.has('node') ||
+      changedProperties.has('action') ||
+      changedProperties.has('nodeUI')
+    ) {
+      // For action editing, we only need the action
+      if (this.action && (!this.node || !this.nodeUI)) {
         this.openDialog();
-      } else {
+      }
+      // For node editing, we need both node and nodeUI
+      else if (this.node && this.nodeUI) {
+        this.openDialog();
+      }
+      // If we don't have the required data, close the dialog
+      else if (!this.action && (!this.node || !this.nodeUI)) {
         this.isOpen = false;
       }
     }
@@ -241,10 +325,13 @@ export class NodeEditor extends RapidElement {
     this.formData = {};
     this.errors = {};
     this.groupCollapseState = {};
+    this.groupHoverState = {};
   }
 
   private initializeFormData(): void {
-    if (this.action) {
+    const nodeConfig = this.getNodeConfig();
+
+    if ((!nodeConfig || nodeConfig.type === 'execute_actions') && this.action) {
       // Action editing mode - use action config
       const actionConfig = ACTION_CONFIG[this.action.type];
 
@@ -252,8 +339,6 @@ export class NodeEditor extends RapidElement {
         this.formData = actionConfig.toFormData(this.action);
       } else {
         this.formData = { ...this.action };
-        // Apply smart transformations for select fields that expect {name, value} format
-        this.applySmartSelectTransformations(actionConfig);
       }
 
       // Convert Record objects to array format for key-value editors
@@ -311,52 +396,35 @@ export class NodeEditor extends RapidElement {
     this.formData = processed;
   }
 
-  private applySmartSelectTransformations(actionConfig: ActionConfig): void {
-    if (!actionConfig) return;
+  private isKeyValueField(fieldName: string): boolean {
+    // Check if this field is configured as a key-value type
+    const config = this.getConfig();
+    const fields = config?.form;
+    return fields?.[fieldName]?.type === 'key-value';
+  }
 
-    const fields = actionConfig.form;
-    if (!fields) return;
+  private getConfig(): ActionConfig | NodeConfig | null {
+    // If we have a node and nodeUI, check if we should use node config
+    if (this.node && this.nodeUI) {
+      const nodeConfig = this.getNodeConfig();
 
-    Object.entries(fields).forEach(([fieldName, fieldConfig]) => {
-      if (this.shouldApplySmartSelectTransformation(fieldName, fieldConfig)) {
-        const value = this.formData[fieldName];
-        if (
-          Array.isArray(value) &&
-          value.length > 0 &&
-          typeof value[0] === 'string'
-        ) {
-          // Transform string array to select options format
-          this.formData[fieldName] = value.map((item: string) => ({
-            name: item,
-            value: item
-          }));
-        }
+      // For execute_actions nodes, defer to action editing if an action is selected
+      if (this.nodeUI.type === 'execute_actions' && this.action) {
+        return ACTION_CONFIG[this.action.type] || null;
       }
-    });
-  }
 
-  private shouldApplySmartSelectTransformation(
-    fieldName: string,
-    fieldConfig: any
-  ): boolean {
-    const selectConfig = fieldConfig as SelectFieldConfig;
-    return (
-      (fieldConfig.type === 'select' &&
-        (selectConfig.multi || selectConfig.tags) &&
-        // Don't transform if already has explicit transformations
-        !this.action) ||
-      !ACTION_CONFIG[this.action.type]?.toFormData
-    );
-  }
+      // For all other nodes with a config, use the node config
+      if (nodeConfig) {
+        return nodeConfig;
+      }
+    }
 
-  private isKeyValueField(fieldName: string): boolean {
-    // Check if this field is configured as a key-value type
+    // Fall back to action config if no node config or for pure action editing
     if (this.action) {
-      const actionConfig = ACTION_CONFIG[this.action.type];
-      const fields = actionConfig?.form;
-      return fields?.[fieldName]?.type === 'key-value';
+      return ACTION_CONFIG[this.action.type] || null;
     }
-    return false;
+
+    return null;
   }
 
   private getNodeConfig(): NodeConfig | null {
@@ -366,16 +434,8 @@ export class NodeEditor extends RapidElement {
   }
 
   private getHeaderColor(): string {
-    if (this.action) {
-      // Action editing mode
-      const actionConfig = ACTION_CONFIG[this.action.type];
-      return actionConfig?.color || '#666666';
-    } else if (this.node) {
-      // Node editing mode
-      const nodeConfig = this.getNodeConfig();
-      return nodeConfig?.color || '#666666';
-    }
-    return '#666666';
+    const config = this.getConfig();
+    return config?.color || '#666666';
   }
 
   private handleDialogButtonClick(event: CustomEvent): void {
@@ -466,89 +526,70 @@ export class NodeEditor extends RapidElement {
 
   private validateForm(): ValidationResult {
     const errors: { [key: string]: string } = {};
+    const config = this.getConfig();
 
-    if (this.action) {
-      // Action validation using fields configuration
-      const actionConfig = ACTION_CONFIG[this.action.type];
-
+    if (config) {
       // Check if new field configuration system is available
-      if (actionConfig?.form) {
-        Object.entries(actionConfig?.form).forEach(
-          ([fieldName, fieldConfig]) => {
-            const value = this.formData[fieldName];
-
-            // Check required fields
-            if (
-              (fieldConfig as any).required &&
-              (!value || (Array.isArray(value) && value.length === 0))
-            ) {
-              errors[fieldName] = `${
-                (fieldConfig as any).label || fieldName
-              } is required`;
-            }
+      if (config.form) {
+        Object.entries(config.form).forEach(([fieldName, fieldConfig]) => {
+          const value = this.formData[fieldName];
+
+          // Check required fields
+          if (
+            (fieldConfig as any).required &&
+            (!value || (Array.isArray(value) && value.length === 0))
+          ) {
+            errors[fieldName] = `${
+              (fieldConfig as any).label || fieldName
+            } is required.`;
+          }
 
-            // Check minLength for text fields
-            if (
-              typeof value === 'string' &&
-              (fieldConfig as any).minLength &&
-              value.length < (fieldConfig as any).minLength
-            ) {
-              errors[fieldName] = `${
-                (fieldConfig as any).label || fieldName
-              } must be at least ${(fieldConfig as any).minLength} characters`;
-            }
+          // Check minLength for text fields
+          if (
+            typeof value === 'string' &&
+            (fieldConfig as any).minLength &&
+            value.length < (fieldConfig as any).minLength
+          ) {
+            errors[fieldName] = `${
+              (fieldConfig as any).label || fieldName
+            } must be at least ${(fieldConfig as any).minLength} characters`;
+          }
 
-            // Check maxLength for text fields
-            if (
-              typeof value === 'string' &&
-              (fieldConfig as any).maxLength &&
-              value.length > (fieldConfig as any).maxLength
-            ) {
-              errors[fieldName] = `${
-                (fieldConfig as any).label || fieldName
-              } must be no more than ${
-                (fieldConfig as any).maxLength
-              } characters`;
-            }
+          // Check maxLength for text fields
+          if (
+            typeof value === 'string' &&
+            (fieldConfig as any).maxLength &&
+            value.length > (fieldConfig as any).maxLength
+          ) {
+            errors[fieldName] = `${
+              (fieldConfig as any).label || fieldName
+            } must be no more than ${
+              (fieldConfig as any).maxLength
+            } characters`;
           }
-        );
+        });
       }
 
+      // Universal validation for category arrays to check for reserved names
+      this.validateCategoryNames(errors);
+
       // Run custom validation if available
-      if (actionConfig?.validate) {
-        // Convert form data back to action for validation
-        let actionForValidation: Action;
-        if (actionConfig.fromFormData) {
-          actionForValidation = actionConfig.fromFormData(this.formData);
-        } else {
-          actionForValidation = { ...this.action, ...this.formData } as Action;
+      if (config.validate) {
+        if (config.sanitize) {
+          config.sanitize(this.formData);
         }
 
-        const customValidation = actionConfig.validate(actionForValidation);
+        let customValidation;
+        if (this.action) {
+          customValidation = config.validate({
+            ...this.action,
+            ...this.formData
+          });
+        } else {
+          customValidation = config.validate(this.formData);
+        }
         Object.assign(errors, customValidation.errors);
       }
-    } else if (this.node) {
-      // Node validation
-      const nodeConfig = this.getNodeConfig();
-
-      // Check required fields from node properties
-      if (nodeConfig?.properties) {
-        Object.entries(nodeConfig.properties).forEach(
-          ([fieldName, fieldConfig]) => {
-            const value = this.formData[fieldName];
-
-            // Check required fields
-            if (
-              fieldConfig.required &&
-              (!value || (Array.isArray(value) && value.length === 0))
-            ) {
-              errors[fieldName] = `${
-                fieldConfig.label || fieldName
-              } is required`;
-            }
-          }
-        );
-      }
     }
 
     // Validate key-value fields for unique keys
@@ -599,6 +640,44 @@ export class NodeEditor extends RapidElement {
     });
   }
 
+  private validateCategoryNames(errors: { [key: string]: string }): void {
+    // Universal validation for category names across all node types
+    // Prevents use of reserved category names that have special meaning in the system
+    // Define reserved category names (case-insensitive)
+    const reservedNames = [
+      'other',
+      'failure',
+      'success',
+      'all responses',
+      'no response'
+    ];
+
+    // Check all form fields for category arrays
+    Object.entries(this.formData).forEach(([fieldName, value]) => {
+      if (Array.isArray(value) && fieldName === 'categories') {
+        const categories = value.filter(
+          (item: any) => item?.name && item.name.trim() !== ''
+        );
+
+        // Check for reserved names
+        const reservedUsed = categories
+          .filter((item: any) => {
+            const lowerName = item.name.trim().toLowerCase();
+            return reservedNames.includes(lowerName);
+          })
+          .map((item: any) => item.name.trim()); // Preserve original case
+
+        if (reservedUsed.length > 0) {
+          errors[
+            fieldName
+          ] = `Reserved category names cannot be used: ${reservedUsed.join(
+            ', '
+          )}`;
+        }
+      }
+    });
+  }
+
   private formDataToNode(formData: any = this.formData): Node {
     if (!this.node) throw new Error('No node to update');
     let updatedNode: Node = { ...this.node };
@@ -765,42 +844,11 @@ export class NodeEditor extends RapidElement {
     if (actionConfig?.fromFormData) {
       return actionConfig.fromFormData(formData);
     } else {
-      // Apply smart select transformations in reverse and provide default 1:1 mapping
-      const processedFormData = this.reverseSmartSelectTransformations(
-        formData,
-        actionConfig
-      );
-      return { ...this.action, ...processedFormData };
+      // Default 1:1 mapping
+      return { ...this.action, ...formData };
     }
   }
 
-  private reverseSmartSelectTransformations(
-    formData: any,
-    actionConfig: ActionConfig
-  ): any {
-    if (!actionConfig || !actionConfig.form) return formData;
-    const processed = { ...formData };
-
-    Object.entries(actionConfig.form).forEach(([fieldName, fieldConfig]) => {
-      if (this.shouldApplySmartSelectTransformation(fieldName, fieldConfig)) {
-        const value = processed[fieldName];
-        if (
-          Array.isArray(value) &&
-          value.length > 0 &&
-          typeof value[0] === 'object' &&
-          'value' in value[0]
-        ) {
-          // Transform select options format back to string array
-          processed[fieldName] = value.map(
-            (item: any) => item.value || item.name || item
-          );
-        }
-      }
-    });
-
-    return processed;
-  }
-
   private handleFormFieldChange(propertyName: string, event: Event): void {
     const target = event.target as any;
     let value: any;
@@ -834,14 +882,49 @@ export class NodeEditor extends RapidElement {
     // Check for computed values in dependent fields
     this.updateComputedFields(propertyName);
 
+    // Re-evaluate group collapse states that depend on form data
+    this.updateGroupCollapseStates();
+
     // Trigger re-render to handle conditional field visibility
     this.requestUpdate();
   }
 
-  private updateComputedFields(changedFieldName: string): void {
-    if (!this.action) return;
+  private updateGroupCollapseStates(): void {
+    const config = this.getConfig();
+    if (!config?.layout) return;
 
-    const config = ACTION_CONFIG[this.action.type];
+    this.updateGroupCollapseStatesRecursive(config.layout);
+  }
+
+  private updateGroupCollapseStatesRecursive(items: LayoutItem[]): void {
+    items.forEach((item) => {
+      if (typeof item === 'object' && item.type === 'group') {
+        const { label, collapsed, collapsible } = item;
+
+        // Only update if the group is collapsible and has a function-based collapsed property
+        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
+            };
+          }
+        }
+
+        // Recursively check nested items
+        this.updateGroupCollapseStatesRecursive(item.items);
+      } else if (typeof item === 'object' && item.type === 'row') {
+        // Recursively check items in rows
+        this.updateGroupCollapseStatesRecursive(item.items);
+      }
+    });
+  }
+
+  private updateComputedFields(changedFieldName: string): void {
+    const config = this.getConfig();
     if (!config?.form) return;
 
     // Check all fields to see if any depend on the changed field
@@ -912,154 +995,33 @@ export class NodeEditor extends RapidElement {
     value: any,
     errors: string[]
   ): TemplateResult {
-    switch (config.type) {
-      case 'text':
-        return html`<temba-textinput
-          name="${fieldName}"
-          label="${config.label}"
-          ?required="${config.required}"
-          .errors="${errors}"
-          .value="${value || ''}"
-          placeholder="${config.placeholder || ''}"
-          .helpText="${config.helpText || ''}"
-          @input="${(e: Event) => this.handleFormFieldChange(fieldName, e)}"
-        ></temba-textinput>`;
-
-      case 'textarea': {
-        const textareaConfig = config as TextareaFieldConfig;
-        const minHeightStyle = textareaConfig.minHeight
-          ? `--textarea-min-height: ${textareaConfig.minHeight}px;`
-          : '';
-
-        if (config.evaluated) {
-          return html`<temba-completion
-            name="${fieldName}"
-            label="${config.label}"
-            ?required="${config.required}"
-            .errors="${errors}"
-            .value="${value || ''}"
-            placeholder="${config.placeholder || ''}"
-            textarea
-            expressions="session"
-            style="${minHeightStyle}"
-            .helpText="${config.helpText || ''}"
-            @input="${(e: Event) => this.handleFormFieldChange(fieldName, e)}"
-          ></temba-completion>`;
+    // Use FieldRenderer for consistent field rendering
+    return FieldRenderer.renderField(fieldName, config, value, {
+      errors,
+      onChange: (e: Event) => {
+        // Handle different change event types
+        if (fieldName && config.type === 'key-value') {
+          // Special handling for key-value editor
+          const customEvent = e as CustomEvent;
+          if (customEvent.detail) {
+            this.handleNewFieldChange(fieldName, customEvent.detail.value);
+          }
+        } else if (fieldName && config.type === 'array') {
+          // Special handling for array editor
+          this.handleNewFieldChange(fieldName, (e.target as any).value);
+        } else if (fieldName && config.type === 'message-editor') {
+          // Special handling for message editor
+          this.handleMessageEditorChange(fieldName, e);
         } else {
-          return html`<temba-textinput
-            name="${fieldName}"
-            label="${config.label}"
-            ?required="${config.required}"
-            .errors="${errors}"
-            .value="${value || ''}"
-            placeholder="${config.placeholder || ''}"
-            textarea
-            .rows="${textareaConfig.rows || 3}"
-            style="${minHeightStyle}"
-            .helpText="${config.helpText || ''}"
-            @input="${(e: Event) => this.handleFormFieldChange(fieldName, e)}"
-          ></temba-textinput>`;
+          // Default handling for most field types
+          this.handleFormFieldChange(fieldName, e);
         }
+      },
+      showLabel: true,
+      additionalData: {
+        attachments: this.formData.attachments || []
       }
-
-      case 'select': {
-        const selectConfig = config as SelectFieldConfig;
-        return html`<temba-select
-          name="${fieldName}"
-          label="${config.label}"
-          ?required="${config.required}"
-          .errors="${errors}"
-          .values="${value || (selectConfig.multi ? [] : '')}"
-          ?multi="${selectConfig.multi}"
-          ?searchable="${selectConfig.searchable}"
-          ?tags="${selectConfig.tags}"
-          ?emails="${selectConfig.emails}"
-          placeholder="${selectConfig.placeholder || ''}"
-          maxItems="${selectConfig.maxItems || 0}"
-          valueKey="${selectConfig.valueKey || 'value'}"
-          nameKey="${selectConfig.nameKey || 'name'}"
-          endpoint="${selectConfig.endpoint || ''}"
-          .helpText="${config.helpText || ''}"
-          @change="${(e: Event) => this.handleFormFieldChange(fieldName, e)}"
-        >
-          ${selectConfig.options?.map((option: any) => {
-            if (typeof option === 'string') {
-              return html`<temba-option
-                name="${option}"
-                value="${option}"
-              ></temba-option>`;
-            } else {
-              return html`<temba-option
-                name="${option.label || option.name}"
-                value="${option.value}"
-              ></temba-option>`;
-            }
-          })}
-        </temba-select>`;
-      }
-
-      case 'key-value':
-        return html`<div class="form-field">
-          <label>${config.label}${config.required ? ' *' : ''}</label>
-          <temba-key-value-editor
-            name="${fieldName}"
-            .value="${value || []}"
-            .sortable="${config.sortable}"
-            .keyPlaceholder="${config.keyPlaceholder || 'Key'}"
-            .valuePlaceholder="${config.valuePlaceholder || 'Value'}"
-            .minRows="${config.minRows || 0}"
-            @change="${(e: CustomEvent) => {
-              if (e.detail) {
-                this.handleNewFieldChange(fieldName, e.detail.value);
-              }
-            }}"
-          ></temba-key-value-editor>
-          ${errors.length
-            ? html`<div class="field-errors">${errors.join(', ')}</div>`
-            : ''}
-        </div>`;
-
-      case 'array':
-        return html`<div class="form-field">
-          <label>${config.label}${config.required ? ' *' : ''}</label>
-          <temba-array-editor
-            .value="${value || []}"
-            .itemConfig="${config.itemConfig}"
-            .sortable="${config.sortable}"
-            .itemLabel="${config.itemLabel || 'Item'}"
-            .minItems="${config.minItems || 0}"
-            .onItemChange="${config.onItemChange}"
-            @change="${(e: CustomEvent) =>
-              this.handleNewFieldChange(fieldName, e.detail.value)}"
-          ></temba-array-editor>
-          ${errors.length
-            ? html`<div class="field-errors">${errors.join(', ')}</div>`
-            : ''}
-        </div>`;
-
-      case 'checkbox': {
-        const checkboxConfig = config as CheckboxFieldConfig;
-        return html`<div class="form-field">
-          <temba-checkbox
-            name="${fieldName}"
-            label="${config.label}"
-            .helpText="${config.helpText || ''}"
-            ?required="${config.required}"
-            .errors="${errors}"
-            ?checked="${value || false}"
-            size="${checkboxConfig.size || 1.2}"
-            animateChange="${checkboxConfig.animateChange || 'pulse'}"
-            @change="${(e: Event) => this.handleFormFieldChange(fieldName, e)}"
-          ></temba-checkbox>
-          ${errors.length
-            ? html`<div class="field-errors">${errors.join(', ')}</div>`
-            : ''}
-        </div>`;
-      }
-
-      default:
-        return html`<div>Unsupported field type: ${(config as any).type}</div>`;
-    }
+    });
   }
 
   private handleGroupToggle(groupLabel: string): void {
@@ -1069,10 +1031,22 @@ export class NodeEditor extends RapidElement {
     };
   }
 
-  private expandGroupsWithErrors(errors: { [key: string]: string }): void {
-    if (!this.action) return;
+  private handleGroupMouseEnter(groupLabel: string): void {
+    this.groupHoverState = {
+      ...this.groupHoverState,
+      [groupLabel]: true
+    };
+  }
+
+  private handleGroupMouseLeave(groupLabel: string): void {
+    this.groupHoverState = {
+      ...this.groupHoverState,
+      [groupLabel]: false
+    };
+  }
 
-    const config = ACTION_CONFIG[this.action.type];
+  private expandGroupsWithErrors(errors: { [key: string]: string }): void {
+    const config = this.getConfig();
     if (!config?.layout) return;
 
     const errorFields = new Set(Object.keys(errors));
@@ -1109,7 +1083,7 @@ export class NodeEditor extends RapidElement {
 
   private renderLayoutItem(
     item: LayoutItem,
-    config: ActionConfig,
+    config: ActionConfig | NodeConfig,
     renderedFields: Set<string>
   ): TemplateResult {
     if (typeof item === 'string') {
@@ -1146,7 +1120,7 @@ export class NodeEditor extends RapidElement {
 
   private renderRow(
     rowConfig: RowLayoutConfig,
-    config: ActionConfig,
+    config: ActionConfig | NodeConfig,
     renderedFields: Set<string>
   ): TemplateResult {
     const { items, gap = '1rem' } = rowConfig;
@@ -1183,7 +1157,7 @@ export class NodeEditor extends RapidElement {
 
   private renderGroup(
     groupConfig: GroupLayoutConfig,
-    config: ActionConfig,
+    config: ActionConfig | NodeConfig,
     renderedFields: Set<string>
   ): TemplateResult {
     const {
@@ -1191,19 +1165,25 @@ export class NodeEditor extends RapidElement {
       items,
       collapsible = false,
       collapsed = false,
-      helpText
+      helpText,
+      getGroupValueCount
     } = groupConfig;
 
     // Initialize collapse state if not set
     if (collapsible && !(label in this.groupCollapseState)) {
+      // Evaluate collapsed property - can be boolean or function
+      const initialCollapsed =
+        typeof collapsed === 'function' ? collapsed(this.formData) : collapsed;
+
       this.groupCollapseState = {
         ...this.groupCollapseState,
-        [label]: collapsed
+        [label]: initialCollapsed
       };
     }
 
     const isCollapsed = collapsible
-      ? this.groupCollapseState[label] ?? collapsed
+      ? this.groupCollapseState[label] ??
+        (typeof collapsed === 'function' ? collapsed(this.formData) : collapsed)
       : false;
 
     // Check if any field in this group has errors
@@ -1212,10 +1192,41 @@ export class NodeEditor extends RapidElement {
       (fieldName) => this.errors[fieldName]
     );
 
+    // Calculate count for bubble display
+    let valueCount = 0;
+    let showBubble = false;
+    let showCheckmark = false;
+    let hasValue = false;
+    const isHovered = this.groupHoverState[label] ?? false;
+
+    if (getGroupValueCount && collapsible) {
+      try {
+        const result = getGroupValueCount(this.formData);
+
+        if (typeof result === 'boolean') {
+          // Boolean result - show checkmark when true
+          showCheckmark = result && isCollapsed && !isHovered;
+          hasValue = result;
+        } else if (typeof result === 'number') {
+          // Numeric result - show count bubble
+          valueCount = result;
+          showBubble = valueCount > 0 && isCollapsed && !isHovered;
+          hasValue = valueCount > 0;
+        }
+      } catch (error) {
+        console.error(
+          `Error calculating group value count for ${label}:`,
+          error
+        );
+      }
+    }
+
     return html`
       <div
         class="form-group ${collapsible ? 'collapsible' : ''} ${groupHasErrors
           ? 'has-errors'
+          : ''} ${isCollapsed ? 'collapsed' : 'expanded'} ${hasValue
+          ? 'has-bubble'
           : ''}"
       >
         <div
@@ -1223,11 +1234,19 @@ export class NodeEditor extends RapidElement {
           @click=${collapsible
             ? () => this.handleGroupToggle(label)
             : undefined}
+          @mouseenter=${collapsible
+            ? () => this.handleGroupMouseEnter(label)
+            : undefined}
+          @mouseleave=${collapsible
+            ? () => this.handleGroupMouseLeave(label)
+            : undefined}
         >
           <div class="form-group-info">
             <div class="form-group-title">${label}</div>
             ${helpText
-              ? html`<div class="form-group-help">${helpText}</div>`
+              ? html`<div class="form-group-help">
+                  ${renderMarkdownInline(helpText)}
+                </div>`
               : ''}
           </div>
           ${groupHasErrors
@@ -1238,13 +1257,28 @@ export class NodeEditor extends RapidElement {
               ></temba-icon>`
             : ''}
           ${collapsible && !groupHasErrors
-            ? html`<temba-icon
-                name="arrow_right"
-                size="1.5"
-                class="group-toggle-icon ${isCollapsed
-                  ? 'collapsed'
-                  : 'expanded'}"
-              ></temba-icon>`
+            ? html`<div class="group-toggle-container">
+                <temba-icon
+                  name="arrow_right"
+                  size="1.5"
+                  class="group-toggle-icon ${isCollapsed
+                    ? 'collapsed'
+                    : 'expanded'} ${showBubble || showCheckmark ? 'faded' : ''}"
+                ></temba-icon>
+                ${showCheckmark
+                  ? html`<temba-icon
+                      name="check"
+                      size="1"
+                      class="group-checkmark-icon"
+                    ></temba-icon>`
+                  : showBubble
+                  ? html`<div
+                      class="group-count-bubble ${!showBubble ? 'hidden' : ''}"
+                    >
+                      ${valueCount}
+                    </div>`
+                  : ''}
+              </div>`
             : ''}
         </div>
         <div
@@ -1278,7 +1312,7 @@ export class NodeEditor extends RapidElement {
 
   private renderFieldRow(
     rowConfig: RowLayoutConfig,
-    config: ActionConfig
+    config: ActionConfig | NodeConfig
   ): TemplateResult {
     // This method is deprecated - use renderRow instead
     return this.renderRow(rowConfig, config, new Set());
@@ -1286,7 +1320,7 @@ export class NodeEditor extends RapidElement {
 
   private renderFieldGroup(
     groupConfig: GroupLayoutConfig,
-    config: ActionConfig
+    config: ActionConfig | NodeConfig
   ): TemplateResult {
     // This method is deprecated - use renderGroup instead
     return this.renderGroup(groupConfig, config, new Set());
@@ -1305,18 +1339,38 @@ export class NodeEditor extends RapidElement {
       this.errors = newErrors;
     }
 
+    // Re-evaluate group collapse states that depend on form data
+    this.updateGroupCollapseStates();
+
     // Trigger re-render
     this.requestUpdate();
   }
+  private handleMessageEditorChange(fieldName: string, event: Event): void {
+    const target = event.target as any;
 
-  private renderFields(): TemplateResult {
-    if (!this.action) {
-      return html` <div>No action selected</div> `;
+    // Update both text and attachments from the message editor
+    this.formData = {
+      ...this.formData,
+      [fieldName]: target.value,
+      attachments: target.attachments || []
+    };
+
+    // Clear any existing errors for both fields
+    if (this.errors[fieldName]) {
+      const newErrors = { ...this.errors };
+      delete newErrors[fieldName];
+      delete newErrors.attachments;
+      this.errors = newErrors;
     }
 
-    const config = ACTION_CONFIG[this.action.type];
+    // Trigger re-render
+    this.requestUpdate();
+  }
+
+  private renderFields(): TemplateResult {
+    const config = this.getConfig();
     if (!config) {
-      return html` <div>No configuration available for this action</div> `;
+      return html` <div>No configuration available</div> `;
     }
 
     // Use the new fields configuration system
@@ -1357,7 +1411,12 @@ export class NodeEditor extends RapidElement {
       }
     }
 
-    return html` <div>No form configuration available</div> `;
+    // Fallback for configs without form configuration
+    if (this.action) {
+      return html` <div>No form configuration available for this action</div> `;
+    } else {
+      return html` <div>No form configuration available for this node</div> `;
+    }
   }
 
   private renderActionSection(): TemplateResult {
@@ -1430,12 +1489,11 @@ export class NodeEditor extends RapidElement {
     }
 
     const headerColor = this.getHeaderColor();
-    const nodeConfig = this.getNodeConfig();
-    const actionConfig = ACTION_CONFIG[this.action?.type];
+    const config = this.getConfig();
 
     return html`
       <temba-dialog
-        header="${actionConfig?.name || nodeConfig?.name || 'Edit'}"
+        header="${config?.name || 'Edit'}"
         .open="${this.isOpen}"
         @temba-button-clicked=${this.handleDialogButtonClick}
         primaryButtonName="Save"
@@ -1444,7 +1502,7 @@ export class NodeEditor extends RapidElement {
       >
         <div class="node-editor-form">
           ${this.renderFields()}
-          ${nodeConfig?.router?.configurable
+          ${this.getNodeConfig()?.router?.configurable
             ? this.renderRouterSection()
             : null}
         </div>