@nyaruka/temba-components 0.129.8 → 0.129.10

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);
@@ -25,9 +27,9 @@ export class NodeEditor extends RapidElement {
         min-width: 400px;
         padding-bottom: 40px;
 
-        --color-bubble-bg: rgba(255, 255, 255, 0.8);
-        --color-bubble-border: #999;
-        --color-bubble-text: #777;
+        --color-bubble-bg: rgba(var(--primary-rgb), 0.7);
+        --color-bubble-border: rgba(0, 0, 0, 0.2);
+        --color-bubble-text: #fff;
       }
 
       .form-field {
@@ -97,8 +99,8 @@ export class NodeEditor extends RapidElement {
       }
 
       .form-group.has-bubble {
-        border-width: 1px;
-        border-color: var(--color-bubble-border, #aaa);
+        border-width: 2px;
+        border-color: rgba(var(--primary-rgb), 0.5);
       }
 
       .form-group-header {
@@ -114,6 +116,7 @@ export class NodeEditor extends RapidElement {
       }
 
       .form-group.has-bubble .form-group-header {
+        background: rgba(var(--primary-rgb), 0.1);
       }
 
       .collapsed .form-group-header {
@@ -262,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;
             }
         }
@@ -284,7 +295,8 @@ export class NodeEditor extends RapidElement {
         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) {
@@ -292,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();
@@ -345,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)
@@ -392,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;
@@ -483,12 +470,11 @@ 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 &&
@@ -509,38 +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.sanitize) {
-                    actionConfig.sanitize(this.formData);
+            if (config.validate) {
+                if (config.sanitize) {
+                    config.sanitize(this.formData);
                 }
-                if (actionConfig.fromFormData) {
-                    actionForValidation = actionConfig.fromFormData(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 {
@@ -579,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)
@@ -720,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;
@@ -778,9 +761,7 @@ export class NodeEditor extends RapidElement {
         this.requestUpdate();
     }
     updateGroupCollapseStates() {
-        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;
         this.updateGroupCollapseStatesRecursive(config.layout);
@@ -810,9 +791,7 @@ export class NodeEditor extends RapidElement {
         });
     }
     updateComputedFields(changedFieldName) {
-        if (!this.action)
-            return;
-        const config = ACTION_CONFIG[this.action.type];
+        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
@@ -859,174 +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 || ''}"
-          flavor="${selectConfig.flavor || 'small'}"
-          @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}"
-            .maxItems="${config.maxItems || 0}"
-            .onItemChange="${config.onItemChange}"
-            .isEmptyItemFn="${config.isEmptyItem}"
-            @change="${(e) => this.handleNewFieldChange(fieldName, e.target.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>`;
-            }
-            case 'message-editor': {
-                const messageConfig = config;
-                return html `<temba-message-editor
-          name="${fieldName}"
-          label="${config.label}"
-          ?required="${config.required}"
-          .errors="${errors}"
-          .value="${value || ''}"
-          .attachments="${this.formData.attachments || []}"
-          placeholder="${messageConfig.placeholder || ''}"
-          .helpText="${config.helpText || ''}"
-          ?autogrow="${messageConfig.autogrow}"
-          ?gsm="${messageConfig.gsm}"
-          ?disableCompletion="${messageConfig.disableCompletion}"
-          counter="${messageConfig.counter || ''}"
-          accept="${messageConfig.accept || ''}"
-          endpoint="${messageConfig.endpoint || ''}"
-          max-attachments="${messageConfig.maxAttachments || 3}"
-          minHeight="${messageConfig.minHeight || 60}"
-          @change="${(e) => this.handleMessageEditorChange(fieldName, e)}"
-        ></temba-message-editor>`;
-            }
-            default:
-                return html `<div>Unsupported field type: ${config.type}</div>`;
-        }
+        });
     }
     handleGroupToggle(groupLabel) {
         this.groupCollapseState = {
@@ -1047,9 +888,7 @@ export class NodeEditor extends RapidElement {
         };
     }
     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));
@@ -1184,7 +1023,9 @@ export class NodeEditor extends RapidElement {
           <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
@@ -1288,12 +1129,9 @@ export class NodeEditor extends RapidElement {
         this.requestUpdate();
     }
     renderFields() {
-        if (!this.action) {
-            return html ` <div>No action selected</div> `;
-        }
-        const config = ACTION_CONFIG[this.action.type];
+        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) {
@@ -1319,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) {
@@ -1383,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"
@@ -1396,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>