@nyaruka/temba-components 0.131.2 → 0.131.3

package/src/flow/NodeEditor.ts

@@ -1,7 +1,7 @@
 import { html, TemplateResult, css } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
-import { Node, NodeUI, Action } from '../store/flow-definition';
+import { Node, NodeUI, Action, FlowDefinition } from '../store/flow-definition';
 import {
   ValidationResult,
   NodeConfig,
@@ -22,6 +22,8 @@ import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
 import { FieldRenderer } from '../form/FieldRenderer';
 import { renderMarkdownInline } from '../markdown';
+import { AppState, fromStore, zustand } from '../store/AppState';
+import { getStore } from '../store/Store';
 
 export class NodeEditor extends RapidElement {
   static get styles() {
@@ -319,6 +321,54 @@ export class NodeEditor extends RapidElement {
       .optional-field-link a:hover {
         text-decoration: underline;
       }
+
+      .original-value {
+        background: #fff8dc;
+        padding: 10px;
+        border-radius: 4px;
+        font-size: 13px;
+        color: #666;
+      }
+
+      .original-value-content {
+        color: #333;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .category-localization-table {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
+
+      .category-localization-row {
+        display: grid;
+        grid-template-columns: 40% 60%;
+      }
+
+      .category-localization-row:last-child {
+        border-bottom: none;
+      }
+
+      .original-name {
+        padding: 10px 20px;
+        background: #fff8dc;
+        display: flex;
+        align-items: center;
+        border-radius: var(--curvature);
+      }
+
+      .localized-name {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+      }
+
+      .localized-name temba-textinput {
+        width: 100%;
+      }
     `;
   }
 
@@ -352,6 +402,15 @@ export class NodeEditor extends RapidElement {
   @state()
   private revealedOptionalFields: Set<string> = new Set();
 
+  @fromStore(zustand, (state: AppState) => state.languageCode)
+  private languageCode!: string;
+
+  @fromStore(zustand, (state: AppState) => state.isTranslating)
+  private isTranslating!: boolean;
+
+  @fromStore(zustand, (state: AppState) => state.flowDefinition)
+  private flowDefinition!: FlowDefinition;
+
   connectedCallback(): void {
     super.connectedCallback();
     this.initializeFormData();
@@ -392,7 +451,23 @@ export class NodeEditor extends RapidElement {
       // Action editing mode - use action config
       const actionConfig = ACTION_CONFIG[this.action.type];
 
-      if (actionConfig?.toFormData) {
+      // Check if we're in localization mode
+      if (
+        this.isTranslating &&
+        actionConfig?.localizable &&
+        actionConfig.toLocalizationFormData
+      ) {
+        // Get localized values for this action
+        const localization =
+          this.flowDefinition?.localization?.[this.languageCode]?.[
+            this.action.uuid
+          ] || {};
+
+        this.formData = actionConfig.toLocalizationFormData(
+          this.action,
+          localization
+        );
+      } else if (actionConfig?.toFormData) {
         this.formData = actionConfig.toFormData(this.action);
       } else {
         this.formData = { ...this.action };
@@ -406,7 +481,22 @@ export class NodeEditor extends RapidElement {
     } else if (this.node) {
       // Node editing mode - use node config
       const nodeConfig = this.getNodeConfig();
-      if (nodeConfig?.toFormData) {
+
+      // Check if we're in localization mode for a node with localizable categories
+      if (
+        this.isTranslating &&
+        nodeConfig?.localizable === 'categories' &&
+        nodeConfig.toLocalizationFormData
+      ) {
+        // Get localized values for this node's categories
+        const localization =
+          this.flowDefinition?.localization?.[this.languageCode] || {};
+
+        this.formData = nodeConfig.toLocalizationFormData(
+          this.node,
+          localization
+        );
+      } else if (nodeConfig?.toFormData) {
         this.formData = nodeConfig.toFormData(this.node, this.nodeUI);
       } else {
         this.formData = { ...this.node };
@@ -551,19 +641,93 @@ export class NodeEditor extends RapidElement {
   }
 
   private handleSave(): void {
-    // Validate the form
-    const validation = this.validateForm();
-    if (!validation.valid) {
-      this.errors = validation.errors;
+    // Process form data first
+    const processedFormData = this.processFormDataForSave();
 
-      // Expand any groups that contain validation errors
-      this.expandGroupsWithErrors(validation.errors);
+    // Skip validation if we're in localization mode
+    // (localization only deals with translating text, not changing structure)
+    if (!this.isTranslating) {
+      // Validate the form
+      const validation = this.validateForm();
+      if (!validation.valid) {
+        this.errors = validation.errors;
 
-      return;
+        // Expand any groups that contain validation errors
+        this.expandGroupsWithErrors(validation.errors);
+
+        return;
+      }
     }
 
-    // Process form data to convert key-value arrays to Records before saving
-    const processedFormData = this.processFormDataForSave();
+    // Check if we're in localization mode
+    if (this.isTranslating) {
+      // Handle action localization
+      if (this.action) {
+        const actionConfig = ACTION_CONFIG[this.action.type];
+
+        if (
+          actionConfig?.localizable &&
+          actionConfig.fromLocalizationFormData
+        ) {
+          // Save to localization structure
+          const localizationData = actionConfig.fromLocalizationFormData(
+            processedFormData,
+            this.action
+          );
+
+          // Update the flow definition's localization
+          this.updateLocalization(
+            this.languageCode,
+            this.action.uuid,
+            localizationData
+          );
+
+          // Close the dialog
+          this.fireCustomEvent(CustomEventType.NodeEditCancelled, {});
+          return;
+        }
+      }
+
+      // Handle node localization (for router categories)
+      if (this.node) {
+        const nodeConfig = this.getNodeConfig();
+
+        if (
+          nodeConfig?.localizable === 'categories' &&
+          nodeConfig.fromLocalizationFormData
+        ) {
+          // Get localization data for all categories
+          const localizationData = nodeConfig.fromLocalizationFormData(
+            processedFormData,
+            this.node
+          );
+
+          const languageLocalization =
+            this.flowDefinition?.localization?.[this.languageCode] || {};
+          const categories = this.node?.router?.categories || [];
+
+          categories.forEach((category) => {
+            const categoryUuid = category.uuid;
+            const nextLocalization = localizationData[categoryUuid];
+
+            if (nextLocalization) {
+              this.updateLocalization(
+                this.languageCode,
+                categoryUuid,
+                nextLocalization
+              );
+            } else if (languageLocalization[categoryUuid]) {
+              // Remove existing localization when the translation was cleared
+              this.updateLocalization(this.languageCode, categoryUuid, {});
+            }
+          });
+
+          // Close the dialog
+          this.fireCustomEvent(CustomEventType.NodeEditCancelled, {});
+          return;
+        }
+      }
+    }
 
     // Determine whether to use node or action saving based on context
     // If we have a node with a router, always use node saving (even if action is set)
@@ -605,6 +769,17 @@ export class NodeEditor extends RapidElement {
     }
   }
 
+  private updateLocalization(
+    languageCode: string,
+    actionUuid: string,
+    localizationData: Record<string, any>
+  ): void {
+    // Use the store method to properly update localization with immer
+    zustand
+      .getState()
+      .updateLocalization(languageCode, actionUuid, localizationData);
+  }
+
   private processFormDataForSave(): FormData {
     const processed = { ...this.formData };
 
@@ -664,8 +839,9 @@ export class NodeEditor extends RapidElement {
             }
           }
 
-          // Check required fields
+          // Check required fields (skip in localization mode since all fields are optional)
           if (
+            !this.isTranslating &&
             (fieldConfig as any).required &&
             (!value || (Array.isArray(value) && value.length === 0))
           ) {
@@ -1114,6 +1290,12 @@ export class NodeEditor extends RapidElement {
       ? `max-width: ${config.maxWidth};`
       : '';
 
+    // Render original value if in localization mode and action has the field
+    const originalValueDisplay =
+      this.isTranslating && this.action && fieldName in this.action
+        ? this.renderOriginalValue(fieldName, this.action[fieldName])
+        : html``;
+
     const fieldContent = this.renderFieldContent(
       fieldName,
       config,
@@ -1121,12 +1303,14 @@ export class NodeEditor extends RapidElement {
       errors
     );
 
+    const content = html` ${originalValueDisplay} ${fieldContent} `;
+
     // Wrap in container with style if maxWidth is specified
     if (containerStyle) {
-      return html`<div style="${containerStyle}">${fieldContent}</div>`;
+      return html`<div style="${containerStyle}">${content}</div>`;
     }
 
-    return fieldContent;
+    return content;
   }
 
   private renderOptionalField(
@@ -1166,14 +1350,104 @@ export class NodeEditor extends RapidElement {
     ]);
   }
 
+  private renderCategoryLocalizationTable(): TemplateResult {
+    const categories = this.formData.categories || {};
+    const categoryEntries = Object.entries(categories);
+
+    if (categoryEntries.length === 0) {
+      return html`<div>No categories to localize</div>`;
+    }
+
+    const languageName = getStore().getLanguageName(this.languageCode);
+
+    return html`
+      <div class="category-localization-table">
+        ${categoryEntries.map(
+          ([categoryUuid, categoryData]: [string, any]) => html`
+            <div class="category-localization-row">
+              <div class="original-name">${categoryData.originalName}</div>
+              <div class="localized-name">
+                <temba-textinput
+                  name="${categoryUuid}"
+                  placeholder="${languageName} Translation"
+                  value="${categoryData.localizedName || ''}"
+                  @change=${(e: Event) =>
+                    this.handleCategoryLocalizationChange(
+                      categoryUuid,
+                      (e.target as any).value
+                    )}
+                ></temba-textinput>
+              </div>
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  private handleCategoryLocalizationChange(
+    categoryUuid: string,
+    value: string
+  ): void {
+    // Update formData with new localized value
+    if (!this.formData.categories) {
+      this.formData.categories = {};
+    }
+
+    if (!this.formData.categories[categoryUuid]) {
+      this.formData.categories[categoryUuid] = {};
+    }
+
+    this.formData.categories[categoryUuid].localizedName = value;
+
+    // Trigger a re-render
+    this.requestUpdate();
+  }
+
+  private renderOriginalValue(
+    fieldName: string,
+    originalValue: any
+  ): TemplateResult {
+    // Format the original value for display
+    let displayValue = '';
+
+    if (Array.isArray(originalValue)) {
+      if (originalValue.length === 0) {
+        return html``; // Don't show anything for empty arrays
+      }
+      // For arrays, join with commas
+      displayValue = originalValue.join(', ');
+    } else if (typeof originalValue === 'string') {
+      displayValue = originalValue;
+    } else if (originalValue) {
+      displayValue = String(originalValue);
+    }
+
+    // Don't show if empty
+    if (!displayValue || displayValue.trim() === '') {
+      return html``;
+    }
+
+    return html`
+      <div class="original-value">
+        <div class="original-value-content">${displayValue}</div>
+      </div>
+    `;
+  }
+
   private renderFieldContent(
     fieldName: string,
     config: FieldConfig,
     value: any,
     errors: string[]
   ): TemplateResult {
+    // In localization mode, make all fields optional (not required)
+    const fieldConfig = this.isTranslating
+      ? { ...config, required: false }
+      : config;
+
     // Use FieldRenderer for consistent field rendering
-    return FieldRenderer.renderField(fieldName, config, value, {
+    return FieldRenderer.renderField(fieldName, fieldConfig, value, {
       errors,
       onChange: (e: Event) => {
         // Handle different change event types
@@ -1613,6 +1887,15 @@ export class NodeEditor extends RapidElement {
       return html` <div>No configuration available</div> `;
     }
 
+    // Special rendering for category localization
+    if (
+      this.isTranslating &&
+      config.localizable === 'categories' &&
+      this.formData.categories
+    ) {
+      return this.renderCategoryLocalizationTable();
+    }
+
     // Use the new fields configuration system
     if (config.form) {
       // If layout is specified, use it
@@ -1675,6 +1958,11 @@ export class NodeEditor extends RapidElement {
       return html``;
     }
 
+    // Don't show gutter when localizing categories
+    if (this.isTranslating && config.localizable === 'categories') {
+      return html``;
+    }
+
     // Use the same layout rendering system for gutter fields
     const renderedFields = new Set<string>();
 
@@ -1756,18 +2044,28 @@ export class NodeEditor extends RapidElement {
       return html``;
     }
 
-    const headerColor = this.getHeaderColor();
+    const headerColor = this.isTranslating ? '#505050' : this.getHeaderColor();
+    const headerTextColor = this.isTranslating ? '#fff' : '#fff';
     const config = this.getConfig();
     const dialogSize = config?.dialogSize || 'medium'; // Default to 'large' if not specified
 
+    const languageName = this.isTranslating
+      ? getStore().getLanguageName(this.languageCode)
+      : '';
+
+    let header = config?.name || 'Edit';
+    if (this.isTranslating) {
+      header = languageName ? `${languageName} - ${header}` : header;
+    }
+
     return html`
       <temba-dialog
-        header="${config?.name || 'Edit'}"
+        header="${header}"
         .open="${this.isOpen}"
         @temba-button-clicked=${this.handleDialogButtonClick}
         primaryButtonName="Save"
         cancelButtonName="Cancel"
-        style="--header-bg: ${headerColor}"
+        style="--header-bg: ${headerColor}; --header-text: ${headerTextColor};"
         size="${dialogSize}"
       >
         <div class="node-editor-form">

package/src/flow/NodeTypeSelector.ts

@@ -241,6 +241,12 @@ export class NodeTypeSelector extends RapidElement {
   @property({ type: String })
   public mode: 'action' | 'split' | 'action-no-branching' = 'action';
 
+  @property({ type: String })
+  public flowType: string = 'message';
+
+  @property({ type: Array })
+  public features: string[] = [];
+
   @state()
   private clickPosition = { x: 0, y: 0 };
 
@@ -257,6 +263,35 @@ export class NodeTypeSelector extends RapidElement {
     this.open = false;
   }
 
+  /**
+   * Check if a config is available for the current flow type and features
+   */
+  private isConfigAvailable(config: NodeConfig | ActionConfig): boolean {
+    // Check flow type filter
+    if (config.flowTypes !== undefined) {
+      // Empty array means not available for any flow type in selector
+      if (config.flowTypes.length === 0) {
+        return false;
+      }
+      // Non-empty array means check if current flow type is included
+      if (!config.flowTypes.includes(this.flowType as any)) {
+        return false;
+      }
+    }
+    // undefined/null flowTypes means available for all flow types
+
+    // Check features filter - all required features must be present
+    if (config.features && config.features.length > 0) {
+      for (const requiredFeature of config.features) {
+        if (!this.features.includes(requiredFeature)) {
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+
   private handleNodeTypeClick(nodeType: string) {
     this.fireCustomEvent(CustomEventType.Selection, {
       nodeType,
@@ -284,7 +319,12 @@ export class NodeTypeSelector extends RapidElement {
       // Collect regular actions (from ACTION_CONFIG, unless hideFromActions is true)
       Object.entries(ACTION_CONFIG)
         .filter(([_, config]) => {
-          return config.name && !config.hideFromActions && config.group;
+          return (
+            config.name &&
+            !config.hideFromActions &&
+            config.group &&
+            this.isConfigAvailable(config)
+          );
         })
         .forEach(([type, config]) => {
           const group = config.group;
@@ -303,7 +343,8 @@ export class NodeTypeSelector extends RapidElement {
               type !== 'execute_actions' &&
               config.name &&
               config.showAsAction &&
-              config.group
+              config.group &&
+              this.isConfigAvailable(config)
             );
           })
           .forEach(([type, config]) => {
@@ -400,7 +441,10 @@ export class NodeTypeSelector extends RapidElement {
           // exclude execute_actions (it's the default action-only node)
           // exclude nodes that have showAsAction=true (they appear in action mode)
           return (
-            type !== 'execute_actions' && config.name && !config.showAsAction
+            type !== 'execute_actions' &&
+            config.name &&
+            !config.showAsAction &&
+            this.isConfigAvailable(config)
           );
         })
         .forEach(([type, config]) => {

package/src/flow/StickyNote.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { StickyNote as StickyNoteData } from '../store/flow-definition';
 import { getStore } from '../store/Store';
+import { AppState, fromStore, zustand } from '../store/AppState';
 
 export class StickyNote extends RapidElement {
   @property({ type: String })
@@ -20,6 +21,9 @@ export class StickyNote extends RapidElement {
   @property({ type: Boolean })
   private colorPickerExpanded = false;
 
+  @fromStore(zustand, (state: AppState) => state.isTranslating)
+  private isTranslating!: boolean;
+
   static get styles() {
     return css`
       :host {
@@ -119,6 +123,8 @@ export class StickyNote extends RapidElement {
         border-top-left-radius: var(--curvature);
         border-top-right-radius: var(--curvature);
         flex-grow: 1;
+        padding: 4px 8px !important;
+        margin: 2px;
         padding-left: 8px;
       }
       .sticky-title:empty::before {
@@ -139,6 +145,7 @@ export class StickyNote extends RapidElement {
         min-height: 48px;
         word-wrap: break-word;
         white-space: pre-wrap;
+        margin: 2px;
       }
       .sticky-body:empty::before {
         content: 'Click to add note';
@@ -377,7 +384,7 @@ export class StickyNote extends RapidElement {
           <temba-icon name="drag" class="drag-handle"></temba-icon>
           <div
             class="sticky-title"
-            contenteditable="true"
+            contenteditable="${!this.isTranslating}"
             @blur="${this.handleTitleBlur}"
             @keydown="${this.handleKeyDown}"
             @mousedown="${this.handleContentMouseDown}"
@@ -387,13 +394,15 @@ export class StickyNote extends RapidElement {
         <div class="sticky-body-container">
           <div
             class="sticky-body"
-            contenteditable="true"
+            contenteditable="${!this.isTranslating}"
             @blur="${this.handleBodyBlur}"
             @keydown="${this.handleKeyDown}"
             @mousedown="${this.handleContentMouseDown}"
             .textContent="${this.data.body}"
           ></div>
-          <div class="edit-icon" title="Edit note"></div>
+          ${!this.isTranslating
+            ? html`<div class="edit-icon" title="Edit note"></div>`
+            : ''}
 
           <!-- Color picker -->
           <div

package/src/flow/actions/add_contact_groups.ts

@@ -1,11 +1,12 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS, FormData } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, AddToGroup } from '../../store/flow-definition';
 import { renderNamedObjects } from '../utils';
 
 export const add_contact_groups: ActionConfig = {
   name: 'Add to Group',
   group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: AddToGroup) => {
     return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;
   },

package/src/flow/actions/add_contact_urn.ts

@@ -3,7 +3,8 @@ import {
   ActionConfig,
   ACTION_GROUPS,
   FormData,
-  ValidationResult
+  ValidationResult,
+  FlowTypes
 } from '../types';
 import { Node, AddContactUrn } from '../../store/flow-definition';
 import { SCHEMES } from '../utils';
@@ -11,6 +12,7 @@ import { SCHEMES } from '../utils';
 export const add_contact_urn: ActionConfig = {
   name: 'Add URN',
   group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: AddContactUrn) => {
     const schemeObj = SCHEMES.find((s) => s.scheme === action.scheme);
     const friendlyScheme = schemeObj?.path || action.scheme;

package/src/flow/actions/add_input_labels.ts

@@ -1,11 +1,12 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS, FormData } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, AddInputLabels } from '../../store/flow-definition';
 import { renderNamedObjects } from '../utils';
 
 export const add_input_labels: ActionConfig = {
   name: 'Add Input Labels',
   group: ACTION_GROUPS.save,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: AddInputLabels) => {
     return html`<div>${renderNamedObjects(action.labels, 'label')}</div>`;
   },

package/src/flow/actions/play_audio.ts

@@ -1,10 +1,11 @@
 import { html } from 'lit-html';
-import { ActionConfig, ACTION_GROUPS } from '../types';
+import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
 import { Node, PlayAudio } from '../../store/flow-definition';
 
 export const play_audio: ActionConfig = {
   name: 'Play Audio',
   group: ACTION_GROUPS.send,
+  flowTypes: [FlowTypes.VOICE],
   render: (_node: Node, _action: PlayAudio) => {
     // This will need to be implemented based on the actual render logic
     return html`<div>Play Audio</div>`;

package/src/flow/actions/remove_contact_groups.ts

@@ -3,7 +3,8 @@ import {
   ActionConfig,
   ACTION_GROUPS,
   FormData,
-  ValidationResult
+  ValidationResult,
+  FlowTypes
 } from '../types';
 import { Node, RemoveFromGroup } from '../../store/flow-definition';
 import { renderNamedObjects } from '../utils';
@@ -11,6 +12,7 @@ import { renderNamedObjects } from '../utils';
 export const remove_contact_groups: ActionConfig = {
   name: 'Remove from Group',
   group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: RemoveFromGroup) => {
     if (action.all_groups) {
       return html`<div>Remove from all groups</div>`;

package/src/flow/actions/request_optin.ts

@@ -5,6 +5,7 @@ import { Node, RequestOptin } from '../../store/flow-definition';
 export const request_optin: ActionConfig = {
   name: 'Request Opt-in',
   group: ACTION_GROUPS.send,
+  flowTypes: [],
   render: (_node: Node, _action: RequestOptin) => {
     // This will need to be implemented based on the actual render logic
     return html`<div>Request Opt-in</div>`;