@nyaruka/temba-components 0.129.8 → 0.129.10

package/src/flow/NodeEditor.ts

@@ -10,17 +10,11 @@ import {
   FieldConfig,
   ActionConfig
 } from './config';
-import {
-  SelectFieldConfig,
-  CheckboxFieldConfig,
-  TextareaFieldConfig,
-  MessageEditorFieldConfig,
-  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() {
@@ -33,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 {
@@ -105,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 {
@@ -122,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 {
@@ -299,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;
       }
     }
@@ -323,7 +329,9 @@ export class NodeEditor extends RapidElement {
   }
 
   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];
 
@@ -331,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
@@ -390,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 {
@@ -445,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 {
@@ -545,94 +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`;
           }
-        );
+        });
       }
 
-      // Run custom validation if available
-      if (actionConfig?.validate) {
-        // Convert form data back to action for validation
-        let actionForValidation: Action;
+      // Universal validation for category arrays to check for reserved names
+      this.validateCategoryNames(errors);
 
-        if (actionConfig.sanitize) {
-          actionConfig.sanitize(this.formData);
+      // Run custom validation if available
+      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 } as Action;
+          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?.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
@@ -683,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 };
@@ -849,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;
@@ -926,9 +890,7 @@ export class NodeEditor extends RapidElement {
   }
 
   private updateGroupCollapseStates(): void {
-    if (!this.action) return;
-
-    const config = ACTION_CONFIG[this.action.type];
+    const config = this.getConfig();
     if (!config?.layout) return;
 
     this.updateGroupCollapseStatesRecursive(config.layout);
@@ -962,9 +924,7 @@ export class NodeEditor extends RapidElement {
   }
 
   private updateComputedFields(changedFieldName: string): void {
-    if (!this.action) return;
-
-    const config = ACTION_CONFIG[this.action.type];
+    const config = this.getConfig();
     if (!config?.form) return;
 
     // Check all fields to see if any depend on the changed field
@@ -1035,181 +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 || ''}"
-          flavor="${selectConfig.flavor || 'small'}"
-          @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}"
-            .maxItems="${config.maxItems || 0}"
-            .onItemChange="${config.onItemChange}"
-            .isEmptyItemFn="${config.isEmptyItem}"
-            @change="${(e: Event) =>
-              this.handleNewFieldChange(fieldName, (e.target as any).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>`;
-      }
-
-      case 'message-editor': {
-        const messageConfig = config as MessageEditorFieldConfig;
-        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: Event) =>
-            this.handleMessageEditorChange(fieldName, e)}"
-        ></temba-message-editor>`;
-      }
-
-      default:
-        return html`<div>Unsupported field type: ${(config as any).type}</div>`;
-    }
+    });
   }
 
   private handleGroupToggle(groupLabel: string): void {
@@ -1234,9 +1046,7 @@ export class NodeEditor extends RapidElement {
   }
 
   private expandGroupsWithErrors(errors: { [key: string]: string }): void {
-    if (!this.action) return;
-
-    const config = ACTION_CONFIG[this.action.type];
+    const config = this.getConfig();
     if (!config?.layout) return;
 
     const errorFields = new Set(Object.keys(errors));
@@ -1273,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') {
@@ -1310,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;
@@ -1347,7 +1157,7 @@ export class NodeEditor extends RapidElement {
 
   private renderGroup(
     groupConfig: GroupLayoutConfig,
-    config: ActionConfig,
+    config: ActionConfig | NodeConfig,
     renderedFields: Set<string>
   ): TemplateResult {
     const {
@@ -1434,7 +1244,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
@@ -1500,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());
@@ -1508,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());
@@ -1556,13 +1368,9 @@ export class NodeEditor extends RapidElement {
   }
 
   private renderFields(): TemplateResult {
-    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
@@ -1603,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 {
@@ -1676,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"
@@ -1690,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>