@nyaruka/temba-components 0.129.7 → 0.129.9

package/out-tsc/src/flow/NodeEditor.js

@@ -5,6 +5,8 @@ import { RapidElement } from '../RapidElement';
 import { NODE_CONFIG, ACTION_CONFIG } from './config';
 import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
+import { FieldRenderer } from '../form/FieldRenderer';
+import { renderMarkdownInline } from '../markdown';
 export class NodeEditor extends RapidElement {
     constructor() {
         super(...arguments);
@@ -13,6 +15,7 @@ export class NodeEditor extends RapidElement {
         this.originalFormData = {};
         this.errors = {};
         this.groupCollapseState = {};
+        this.groupHoverState = {};
     }
     static get styles() {
         return css `
@@ -23,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 {
@@ -31,10 +38,6 @@ export class NodeEditor extends RapidElement {
       }
 
       .form-field label {
-        font-weight: 500;
-        margin-bottom: 6px;
-        color: #333;
-        font-size: 14px;
       }
 
       .field-errors {
@@ -95,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;
@@ -106,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;
       }
@@ -116,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;
       }
@@ -139,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;
       }
 
@@ -158,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 {
@@ -179,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;
+      }
     `;
     }
     connectedCallback() {
@@ -187,11 +265,19 @@ export class NodeEditor extends RapidElement {
     }
     updated(changedProperties) {
         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;
             }
         }
@@ -206,9 +292,11 @@ export class NodeEditor extends RapidElement {
         this.formData = {};
         this.errors = {};
         this.groupCollapseState = {};
+        this.groupHoverState = {};
     }
     initializeFormData() {
-        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];
             if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.toFormData) {
@@ -216,8 +304,6 @@ export class NodeEditor extends RapidElement {
             }
             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
             this.processFormDataForEditing();
@@ -269,45 +355,31 @@ export class NodeEditor extends RapidElement {
         });
         this.formData = processed;
     }
-    applySmartSelectTransformations(actionConfig) {
-        if (!actionConfig)
-            return;
-        const fields = actionConfig.form;
-        if (!fields)
-            return;
-        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) => ({
-                        name: item,
-                        value: item
-                    }));
-                }
-            }
-        });
-    }
-    shouldApplySmartSelectTransformation(fieldName, fieldConfig) {
-        var _a;
-        const selectConfig = fieldConfig;
-        return ((fieldConfig.type === 'select' &&
-            (selectConfig.multi || selectConfig.tags) &&
-            // Don't transform if already has explicit transformations
-            !this.action) ||
-            !((_a = ACTION_CONFIG[this.action.type]) === null || _a === void 0 ? void 0 : _a.toFormData));
-    }
     isKeyValueField(fieldName) {
         var _a;
         // Check if this field is configured as a key-value type
+        const config = this.getConfig();
+        const fields = config === null || config === void 0 ? void 0 : config.form;
+        return ((_a = fields === null || fields === void 0 ? void 0 : fields[fieldName]) === null || _a === void 0 ? void 0 : _a.type) === 'key-value';
+    }
+    getConfig() {
+        // If we have a node and nodeUI, check if we should use node config
+        if (this.node && this.nodeUI) {
+            const nodeConfig = this.getNodeConfig();
+            // 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;
+            }
+            // For all other nodes with a config, use the node config
+            if (nodeConfig) {
+                return nodeConfig;
+            }
+        }
+        // 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 === null || actionConfig === void 0 ? void 0 : actionConfig.form;
-            return ((_a = fields === null || fields === void 0 ? void 0 : fields[fieldName]) === null || _a === void 0 ? void 0 : _a.type) === 'key-value';
+            return ACTION_CONFIG[this.action.type] || null;
         }
-        return false;
+        return null;
     }
     getNodeConfig() {
         if (!this.nodeUI)
@@ -316,17 +388,8 @@ export class NodeEditor extends RapidElement {
         return this.nodeUI.type ? NODE_CONFIG[this.nodeUI.type] : null;
     }
     getHeaderColor() {
-        if (this.action) {
-            // Action editing mode
-            const actionConfig = ACTION_CONFIG[this.action.type];
-            return (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.color) || '#666666';
-        }
-        else if (this.node) {
-            // Node editing mode
-            const nodeConfig = this.getNodeConfig();
-            return (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.color) || '#666666';
-        }
-        return '#666666';
+        const config = this.getConfig();
+        return (config === null || config === void 0 ? void 0 : config.color) || '#666666';
     }
     handleDialogButtonClick(event) {
         const button = event.detail.button;
@@ -407,17 +470,16 @@ export class NodeEditor extends RapidElement {
     }
     validateForm() {
         const errors = {};
-        if (this.action) {
-            // Action validation using fields configuration
-            const actionConfig = ACTION_CONFIG[this.action.type];
+        const config = this.getConfig();
+        if (config) {
             // Check if new field configuration system is available
-            if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.form) {
-                Object.entries(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.form).forEach(([fieldName, fieldConfig]) => {
+            if (config.form) {
+                Object.entries(config.form).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`;
+                        errors[fieldName] = `${fieldConfig.label || fieldName} is required.`;
                     }
                     // Check minLength for text fields
                     if (typeof value === 'string' &&
@@ -433,35 +495,26 @@ export class NodeEditor extends RapidElement {
                     }
                 });
             }
+            // Universal validation for category arrays to check for reserved names
+            this.validateCategoryNames(errors);
             // Run custom validation if available
-            if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.validate) {
-                // Convert form data back to action for validation
-                let actionForValidation;
-                if (actionConfig.fromFormData) {
-                    actionForValidation = actionConfig.fromFormData(this.formData);
+            if (config.validate) {
+                if (config.sanitize) {
+                    config.sanitize(this.formData);
+                }
+                let customValidation;
+                if (this.action) {
+                    customValidation = config.validate({
+                        ...this.action,
+                        ...this.formData
+                    });
                 }
                 else {
-                    actionForValidation = { ...this.action, ...this.formData };
+                    customValidation = config.validate(this.formData);
                 }
-                const customValidation = actionConfig.validate(actionForValidation);
                 Object.assign(errors, customValidation.errors);
             }
         }
-        else if (this.node) {
-            // Node validation
-            const nodeConfig = this.getNodeConfig();
-            // Check required fields from node properties
-            if (nodeConfig === null || nodeConfig === void 0 ? void 0 : 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
         this.validateKeyValueUniqueness(errors);
         return {
@@ -500,6 +553,34 @@ export class NodeEditor extends RapidElement {
             }
         });
     }
+    validateCategoryNames(errors) {
+        // 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) => (item === null || item === void 0 ? void 0 : item.name) && item.name.trim() !== '');
+                // Check for reserved names
+                const reservedUsed = categories
+                    .filter((item) => {
+                    const lowerName = item.name.trim().toLowerCase();
+                    return reservedNames.includes(lowerName);
+                })
+                    .map((item) => item.name.trim()); // Preserve original case
+                if (reservedUsed.length > 0) {
+                    errors[fieldName] = `Reserved category names cannot be used: ${reservedUsed.join(', ')}`;
+                }
+            }
+        });
+    }
     formDataToNode(formData = this.formData) {
         var _a;
         if (!this.node)
@@ -641,29 +722,10 @@ export class NodeEditor extends RapidElement {
             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 };
         }
     }
-    reverseSmartSelectTransformations(formData, actionConfig) {
-        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) => item.value || item.name || item);
-                }
-            }
-        });
-        return processed;
-    }
     handleFormFieldChange(propertyName, event) {
         const target = event.target;
         let value;
@@ -693,13 +755,43 @@ 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();
     }
-    updateComputedFields(changedFieldName) {
-        if (!this.action)
+    updateGroupCollapseStates() {
+        const config = this.getConfig();
+        if (!(config === null || config === void 0 ? void 0 : config.layout))
             return;
-        const config = ACTION_CONFIG[this.action.type];
+        this.updateGroupCollapseStatesRecursive(config.layout);
+    }
+    updateGroupCollapseStatesRecursive(items) {
+        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);
+            }
+        });
+    }
+    updateComputedFields(changedFieldName) {
+        const config = this.getConfig();
         if (!(config === null || config === void 0 ? void 0 : config.form))
             return;
         // Check all fields to see if any depend on the changed field
@@ -746,149 +838,36 @@ export class NodeEditor extends RapidElement {
         return fieldContent;
     }
     renderFieldContent(fieldName, config, value, errors) {
-        var _a;
-        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) => this.handleFormFieldChange(fieldName, e)}"
-        ></temba-textinput>`;
-            case 'textarea': {
-                const textareaConfig = config;
-                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) => this.handleFormFieldChange(fieldName, e)}"
-          ></temba-completion>`;
+        // Use FieldRenderer for consistent field rendering
+        return FieldRenderer.renderField(fieldName, config, value, {
+            errors,
+            onChange: (e) => {
+                // Handle different change event types
+                if (fieldName && config.type === 'key-value') {
+                    // Special handling for key-value editor
+                    const customEvent = e;
+                    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.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) => 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;
-                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) => this.handleFormFieldChange(fieldName, e)}"
-        >
-          ${(_a = selectConfig.options) === null || _a === void 0 ? void 0 : _a.map((option) => {
-                    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) => {
-                    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) => 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;
-                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) => 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.type}</div>`;
-        }
+        });
     }
     handleGroupToggle(groupLabel) {
         this.groupCollapseState = {
@@ -896,10 +875,20 @@ export class NodeEditor extends RapidElement {
             [groupLabel]: !this.groupCollapseState[groupLabel]
         };
     }
+    handleGroupMouseEnter(groupLabel) {
+        this.groupHoverState = {
+            ...this.groupHoverState,
+            [groupLabel]: true
+        };
+    }
+    handleGroupMouseLeave(groupLabel) {
+        this.groupHoverState = {
+            ...this.groupHoverState,
+            [groupLabel]: false
+        };
+    }
     expandGroupsWithErrors(errors) {
-        if (!this.action)
-            return;
-        const config = ACTION_CONFIG[this.action.type];
+        const config = this.getConfig();
         if (!(config === null || config === void 0 ? void 0 : config.layout))
             return;
         const errorFields = new Set(Object.keys(errors));
@@ -969,25 +958,54 @@ export class NodeEditor extends RapidElement {
     `;
     }
     renderGroup(groupConfig, config, renderedFields) {
-        var _a;
-        const { label, items, collapsible = false, collapsed = false, helpText } = groupConfig;
+        var _a, _b;
+        const { label, items, collapsible = false, collapsed = false, 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
-            ? (_a = this.groupCollapseState[label]) !== null && _a !== void 0 ? _a : collapsed
+            ? (_a = this.groupCollapseState[label]) !== null && _a !== void 0 ? _a : (typeof collapsed === 'function' ? collapsed(this.formData) : collapsed)
             : false;
         // Check if any field in this group has errors
         const fieldsInGroup = this.collectFieldsFromItems(items);
         const groupHasErrors = fieldsInGroup.some((fieldName) => this.errors[fieldName]);
+        // Calculate count for bubble display
+        let valueCount = 0;
+        let showBubble = false;
+        let showCheckmark = false;
+        let hasValue = false;
+        const isHovered = (_b = this.groupHoverState[label]) !== null && _b !== void 0 ? _b : 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
@@ -995,11 +1013,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
@@ -1010,13 +1036,28 @@ export class NodeEditor extends RapidElement {
               ></temba-icon>`
             : ''}
           ${collapsible && !groupHasErrors
-            ? html `<temba-icon
-                name="arrow_right"
-                size="1.5"
-                class="group-toggle-icon ${isCollapsed
+            ? html `<div class="group-toggle-container">
+                <temba-icon
+                  name="arrow_right"
+                  size="1.5"
+                  class="group-toggle-icon ${isCollapsed
                 ? 'collapsed'
-                : 'expanded'}"
-              ></temba-icon>`
+                : '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
@@ -1064,16 +1105,33 @@ export class NodeEditor extends RapidElement {
             delete newErrors[fieldName];
             this.errors = newErrors;
         }
+        // Re-evaluate group collapse states that depend on form data
+        this.updateGroupCollapseStates();
         // Trigger re-render
         this.requestUpdate();
     }
-    renderFields() {
-        if (!this.action) {
-            return html ` <div>No action selected</div> `;
+    handleMessageEditorChange(fieldName, event) {
+        const target = event.target;
+        // 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();
+    }
+    renderFields() {
+        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
         if (config.form) {
@@ -1099,7 +1157,13 @@ 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> `;
+        }
     }
     renderActionSection() {
         if (!this.node || this.node.actions.length === 0) {
@@ -1163,11 +1227,10 @@ export class NodeEditor extends RapidElement {
             return html ``;
         }
         const headerColor = this.getHeaderColor();
-        const nodeConfig = this.getNodeConfig();
-        const actionConfig = ACTION_CONFIG[(_a = this.action) === null || _a === void 0 ? void 0 : _a.type];
+        const config = this.getConfig();
         return html `
       <temba-dialog
-        header="${(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.name) || (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.name) || 'Edit'}"
+        header="${(config === null || config === void 0 ? void 0 : config.name) || 'Edit'}"
         .open="${this.isOpen}"
         @temba-button-clicked=${this.handleDialogButtonClick}
         primaryButtonName="Save"
@@ -1176,7 +1239,7 @@ export class NodeEditor extends RapidElement {
       >
         <div class="node-editor-form">
           ${this.renderFields()}
-          ${((_b = nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.router) === null || _b === void 0 ? void 0 : _b.configurable)
+          ${((_b = (_a = this.getNodeConfig()) === null || _a === void 0 ? void 0 : _a.router) === null || _b === void 0 ? void 0 : _b.configurable)
             ? this.renderRouterSection()
             : null}
         </div>
@@ -1208,4 +1271,7 @@ __decorate([
 __decorate([
     state()
 ], NodeEditor.prototype, "groupCollapseState", void 0);
+__decorate([
+    state()
+], NodeEditor.prototype, "groupHoverState", void 0);
 //# sourceMappingURL=NodeEditor.js.map