@nyaruka/temba-components 0.131.2 → 0.131.3

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

@@ -7,7 +7,7 @@ import { fromStore, zustand } from '../store/AppState';
 import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType } from '../interfaces';
-import { generateUUID } from '../utils';
+import { generateUUID, postJSON } from '../utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { ACTION_GROUP_METADATA } from './types';
 import { Plumber } from './Plumber';
@@ -27,6 +27,7 @@ export function findNodeForExit(definition, exitUuid) {
 }
 const SAVE_QUIET_TIME = 500;
 const DRAG_THRESHOLD = 5;
+const AUTO_TRANSLATE_MODELS_ENDPOINT = '/api/internal/llms.json';
 // Offset for positioning dropped action node relative to mouse cursor
 // Keep small to make drop location close to cursor position
 const DROP_PREVIEW_OFFSET_X = 20;
@@ -40,6 +41,18 @@ export class Editor extends RapidElement {
     get dragging() {
         return this.isDragging;
     }
+    getAvailableLanguages() {
+        var _b, _c;
+        // Use languages from flow definition if available, otherwise use defaults
+        if (((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.languages) &&
+            this.definition._ui.languages.length > 0) {
+            return this.definition._ui.languages.map((lang) => ({
+                code: typeof lang === 'string' ? lang : lang.iso || lang.code,
+                name: typeof lang === 'string' ? lang : lang.name
+            }));
+        }
+        return this.DEFAULT_LANGUAGES;
+    }
     static get styles() {
         return css `
       #editor {
@@ -183,12 +196,193 @@ export class Editor extends RapidElement {
       .jtk-floating-endpoint {
         pointer-events: none;
       }
+
+      .localization-window-content {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        height: 100%;
+      }
+
+      .localization-header {
+        font-size: 13px;
+        color: #4b5563;
+        line-height: 1.4;
+      }
+
+      .localization-language-select {
+        --color-widget-border: #d1d5db;
+        --color-widget-background: #fff;
+      }
+
+      .localization-language-row {
+        display: flex;
+        align-items: flex-end;
+        gap: 12px;
+      }
+
+      .localization-language-row temba-select {
+        flex: 1;
+      }
+
+      .localization-progress {
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .localization-progress-bar-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .localization-progress-trigger {
+        flex: 1;
+        border-radius: 6px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+      }
+
+      .localization-progress-trigger:focus-visible {
+        outline: 2px solid #94a3b8;
+        outline-offset: 2px;
+      }
+
+      .localization-progress-trigger temba-progress {
+        flex: 1;
+      }
+
+      .localization-progress h5 {
+        margin: 0;
+        font-size: 13px;
+        font-weight: 600;
+        color: #374151;
+      }
+
+      .localization-progress-summary {
+        font-size: 12px;
+        color: #6b7280;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-height: 20px;
+      }
+
+      .translation-settings-toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        background: transparent;
+        border: none;
+        color: #6b7280;
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 4px;
+      }
+
+      .translation-settings-label {
+        font-size: 12px;
+        color: #6b7280;
+      }
+
+      .translation-settings-toggle:focus-visible {
+        outline: 2px solid #94a3b8;
+        outline-offset: 2px;
+      }
+
+      .translation-settings-arrow {
+        width: 8px;
+        height: 8px;
+        border-right: 2px solid currentColor;
+        border-bottom: 2px solid currentColor;
+        transform: rotate(-45deg);
+        transition: transform 0.2s ease;
+        margin-left: 2px;
+      }
+
+      .translation-settings-arrow.expanded {
+        transform: rotate(45deg);
+      }
+
+      .translation-settings {
+      }
+
+      .translation-settings-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .translation-settings-row temba-checkbox {
+        width: 100%;
+      }
+
+      .auto-translate-button {
+        background: var(--color-primary-dark);
+        border: none;
+        color: #fff;
+        padding: 10px 12px;
+        border-radius: var(--curvature);
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+      }
+
+      .auto-translate-button[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .auto-translate-error {
+        font-size: 12px;
+        color: #b91c1c;
+      }
+
+      .auto-translate-dialog-content {
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        font-size: 14px;
+        color: #374151;
+      }
+
+      .auto-translate-dialog-content p {
+        margin: 0;
+      }
+
+      .auto-translate-loading {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        color: #6b7280;
+      }
+
+      .auto-translate-empty {
+        font-size: 13px;
+        color: #6b7280;
+      }
+
+      .localization-empty {
+        font-size: 13px;
+        color: #9ca3af;
+        white-space: nowrap;
+      }
     `;
     }
     constructor() {
         super();
         // timer for debounced saving
         this.saveTimer = null;
+        this.flowType = 'message';
+        this.features = [];
         // Drag state
         this.isDragging = false;
         this.isMouseDown = false;
@@ -203,6 +397,16 @@ export class Editor extends RapidElement {
         this.sourceId = null;
         this.dragFromNodeId = null;
         this.isValidTarget = true;
+        this.localizationWindowHidden = true;
+        this.translationFilters = {
+            categories: false
+        };
+        this.translationSettingsExpanded = false;
+        this.autoTranslateDialogOpen = false;
+        this.autoTranslating = false;
+        this.autoTranslateModel = null;
+        this.autoTranslateError = null;
+        this.translationCache = new Map();
         // NodeEditor state - handles both node and action editing
         this.editingNode = null;
         this.editingNodeUI = null;
@@ -217,6 +421,12 @@ export class Editor extends RapidElement {
         // Track previous target node to clear placeholder when moving between nodes
         this.previousActionDragTargetNodeUuid = null;
         this.canvasMouseDown = false;
+        // Default languages if not specified in flow definition
+        this.DEFAULT_LANGUAGES = [
+            { code: 'eng', name: 'English' },
+            { code: 'fra', name: 'French' },
+            { code: 'esp', name: 'Spanish' }
+        ];
         // Bound event handlers to maintain proper 'this' context
         this.boundMouseMove = this.handleMouseMove.bind(this);
         this.boundMouseUp = this.handleMouseUp.bind(this);
@@ -264,18 +474,54 @@ export class Editor extends RapidElement {
         this.isValidTarget = true;
     }
     updated(changes) {
+        var _b, _c, _d;
         super.updated(changes);
         if (changes.has('canvasSize')) {
             // console.log('Setting canvas size', this.canvasSize);
         }
         if (changes.has('definition')) {
             this.updateCanvasSize();
+            // Set flowType from the loaded definition
+            if ((_b = this.definition) === null || _b === void 0 ? void 0 : _b.type) {
+                this.flowType = this.getFlowTypeFromDefinition(this.definition.type);
+            }
+            const filters = ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c._ui) === null || _d === void 0 ? void 0 : _d.translation_filters) || {
+                categories: false
+            };
+            const normalizedFilters = {
+                categories: !!filters.categories
+            };
+            if (this.translationFilters.categories !== normalizedFilters.categories) {
+                this.translationFilters = normalizedFilters;
+            }
+            this.translationCache.clear();
         }
         if (changes.has('dirtyDate')) {
             if (this.dirtyDate) {
                 this.debouncedSave();
             }
         }
+        if (changes.has('languageCode')) {
+            this.translationCache.clear();
+        }
+    }
+    /**
+     * Map FlowDefinition type to Editor flowType
+     * FlowDefinition uses: 'messaging', 'messaging_background', 'messaging_offline', 'voice'
+     * Editor uses: 'message', 'voice', 'background'
+     */
+    getFlowTypeFromDefinition(definitionType) {
+        if (definitionType === 'voice') {
+            return 'voice';
+        }
+        else if (definitionType === 'messaging_background' ||
+            definitionType === 'messaging_offline') {
+            return 'background';
+        }
+        else {
+            // 'messaging' or any other messaging type defaults to 'message'
+            return 'message';
+        }
     }
     debouncedSave() {
         // Clear any existing timer
@@ -309,6 +555,15 @@ export class Editor extends RapidElement {
         });
         getStore().getState().setDirtyDate(null);
     }
+    handleLanguageChange(languageCode) {
+        zustand.getState().setLanguageCode(languageCode);
+        // Repaint connections after language change since node sizes can change
+        if (this.plumber) {
+            requestAnimationFrame(() => {
+                this.plumber.repaintEverything();
+            });
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         if (this.saveTimer !== null) {
@@ -1312,6 +1567,567 @@ export class Editor extends RapidElement {
             });
         }
     }
+    getLocalizationLanguages() {
+        if (!this.definition) {
+            return [];
+        }
+        const baseLanguage = this.definition.language;
+        return this.getAvailableLanguages().filter((lang) => lang.code !== baseLanguage);
+    }
+    getLocalizationProgress(languageCode) {
+        if (!this.definition ||
+            !languageCode ||
+            languageCode === this.definition.language) {
+            return { total: 0, localized: 0 };
+        }
+        const bundles = this.buildTranslationBundles(this.translationFilters.categories, languageCode);
+        return this.getTranslationCounts(bundles);
+    }
+    getLanguageLocalization(languageCode) {
+        var _b;
+        if (!((_b = this.definition) === null || _b === void 0 ? void 0 : _b.localization)) {
+            return {};
+        }
+        return this.definition.localization[languageCode] || {};
+    }
+    buildTranslationBundles(includeCategories, languageCode = this.languageCode) {
+        if (!this.definition ||
+            !languageCode ||
+            languageCode === this.definition.language) {
+            return [];
+        }
+        const languageLocalization = this.getLanguageLocalization(languageCode);
+        const bundles = [];
+        this.definition.nodes.forEach((node) => {
+            var _b, _c, _d, _e;
+            node.actions.forEach((action) => {
+                const config = ACTION_CONFIG[action.type];
+                if (!(config === null || config === void 0 ? void 0 : config.localizable) || config.localizable.length === 0) {
+                    return;
+                }
+                // For send_msg actions, only count 'text' for progress tracking
+                // (quick_replies and attachments are still localizable but don't count toward progress)
+                const localizableKeys = action.type === 'send_msg'
+                    ? config.localizable.filter((key) => key === 'text')
+                    : config.localizable;
+                const translations = this.findTranslations('property', action.uuid, localizableKeys, action, languageLocalization);
+                if (translations.length > 0) {
+                    bundles.push({
+                        nodeUuid: node.uuid,
+                        actionUuid: action.uuid,
+                        translations
+                    });
+                }
+            });
+            if (!includeCategories) {
+                return;
+            }
+            const nodeUI = (_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c[node.uuid];
+            const nodeType = nodeUI === null || nodeUI === void 0 ? void 0 : nodeUI.type;
+            if (!nodeType) {
+                return;
+            }
+            const nodeConfig = NODE_CONFIG[nodeType];
+            if ((nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories' &&
+                ((_e = (_d = node.router) === null || _d === void 0 ? void 0 : _d.categories) === null || _e === void 0 ? void 0 : _e.length)) {
+                const categoryTranslations = node.router.categories.flatMap((category) => this.findTranslations('category', category.uuid, ['name'], category, languageLocalization));
+                if (categoryTranslations.length > 0) {
+                    bundles.push({
+                        nodeUuid: node.uuid,
+                        translations: categoryTranslations
+                    });
+                }
+            }
+        });
+        return bundles;
+    }
+    findTranslations(type, uuid, localizeableKeys, source, localization) {
+        const translations = [];
+        localizeableKeys.forEach((attribute) => {
+            if (attribute === 'quick_replies') {
+                return;
+            }
+            const pathSegments = attribute.split('.');
+            let from = source;
+            let to = [];
+            while (pathSegments.length > 0 && from) {
+                if (from.uuid) {
+                    to = localization[from.uuid];
+                }
+                const path = pathSegments.shift();
+                if (!path) {
+                    break;
+                }
+                if (to) {
+                    to = to[path];
+                }
+                from = from[path];
+            }
+            if (!from) {
+                return;
+            }
+            const fromValue = this.formatTranslationValue(from);
+            if (!fromValue) {
+                return;
+            }
+            const toValue = to ? this.formatTranslationValue(to) : null;
+            translations.push({
+                uuid,
+                type,
+                attribute,
+                from: fromValue,
+                to: toValue
+            });
+        });
+        return translations;
+    }
+    formatTranslationValue(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        if (Array.isArray(value)) {
+            const normalized = value
+                .map((entry) => this.formatTranslationValue(entry))
+                .filter((entry) => !!entry);
+            return normalized.length > 0 ? normalized.join(', ') : null;
+        }
+        if (typeof value === 'object') {
+            if ('name' in value && value.name) {
+                return String(value.name);
+            }
+            if ('arguments' in value && Array.isArray(value.arguments)) {
+                return value.arguments.join(' ');
+            }
+            return null;
+        }
+        if (typeof value === 'number') {
+            return value.toString();
+        }
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            return trimmed.length > 0 ? trimmed : null;
+        }
+        return null;
+    }
+    getTranslationCounts(bundles) {
+        return bundles.reduce((counts, bundle) => {
+            bundle.translations.forEach((translation) => {
+                counts.total += 1;
+                if (translation.to && translation.to.trim().length > 0) {
+                    counts.localized += 1;
+                }
+            });
+            return counts;
+        }, { total: 0, localized: 0 });
+    }
+    handleLocalizationTabClick() {
+        const languages = this.getLocalizationLanguages();
+        if (!languages.length) {
+            return;
+        }
+        this.localizationWindowHidden = false;
+        const alreadySelected = languages.some((lang) => lang.code === this.languageCode);
+        if (!alreadySelected) {
+            this.handleLanguageChange(languages[0].code);
+        }
+    }
+    handleLocalizationLanguageSelect(languageCode) {
+        if (languageCode === this.languageCode) {
+            return;
+        }
+        this.handleLanguageChange(languageCode);
+    }
+    handleLocalizationLanguageSelectChange(event) {
+        var _b, _c;
+        const select = event.target;
+        const nextValue = (_c = (_b = select === null || select === void 0 ? void 0 : select.values) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value;
+        if (nextValue) {
+            this.handleLocalizationLanguageSelect(nextValue);
+        }
+    }
+    handleLocalizationWindowClosed() {
+        var _b;
+        this.localizationWindowHidden = true;
+        const baseLanguage = (_b = this.definition) === null || _b === void 0 ? void 0 : _b.language;
+        if (baseLanguage && this.languageCode !== baseLanguage) {
+            this.handleLanguageChange(baseLanguage);
+        }
+    }
+    toggleTranslationSettings() {
+        this.translationSettingsExpanded = !this.translationSettingsExpanded;
+    }
+    handleLocalizationProgressToggleClick(event) {
+        const target = event.target;
+        if (target.closest('.translation-settings-toggle')) {
+            return;
+        }
+        this.toggleTranslationSettings();
+    }
+    handleLocalizationProgressToggleKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggleTranslationSettings();
+        }
+    }
+    handleIncludeCategoriesChange(event) {
+        var _b, _c;
+        const checkbox = event.target;
+        const categories = (_b = checkbox === null || checkbox === void 0 ? void 0 : checkbox.checked) !== null && _b !== void 0 ? _b : false;
+        this.translationFilters = { categories };
+        (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().setTranslationFilters({ categories });
+        this.requestUpdate();
+    }
+    async handleAutoTranslateClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.autoTranslating) {
+            this.autoTranslating = false;
+            return;
+        }
+        this.autoTranslateDialogOpen = true;
+    }
+    handleAutoTranslateDialogButton(event) {
+        var _b;
+        const button = (_b = event.detail) === null || _b === void 0 ? void 0 : _b.button;
+        if (!button) {
+            return;
+        }
+        if (button.name === 'Translate') {
+            if (!this.autoTranslateModel) {
+                return;
+            }
+            this.autoTranslateDialogOpen = false;
+            this.autoTranslateError = null;
+            this.autoTranslating = true;
+            this.runAutoTranslation().catch((error) => {
+                console.error('Auto translation failed', error);
+                this.autoTranslateError = 'Auto translation failed. Please try again.';
+                this.autoTranslating = false;
+            });
+        }
+        else if (button.name === 'Cancel' || button.name === 'Close') {
+            this.autoTranslateDialogOpen = false;
+        }
+    }
+    handleAutoTranslateModelChange(event) {
+        var _b;
+        const select = event.target;
+        const nextModel = ((_b = select === null || select === void 0 ? void 0 : select.values) === null || _b === void 0 ? void 0 : _b[0]) || null;
+        this.autoTranslateModel = nextModel;
+    }
+    shouldTranslateValue(text) {
+        if (!text) {
+            return false;
+        }
+        const trimmed = text.trim();
+        if (trimmed.length <= 1) {
+            return false;
+        }
+        if (/^\d+$/.test(trimmed)) {
+            return false;
+        }
+        return true;
+    }
+    async requestAutoTranslation(text) {
+        var _b, _c;
+        if (!this.autoTranslateModel || !this.definition) {
+            return null;
+        }
+        const payload = {
+            text,
+            lang: {
+                from: this.definition.language,
+                to: this.languageCode
+            }
+        };
+        const response = await postJSON(`/llm/translate/${this.autoTranslateModel.uuid}/`, payload);
+        if ((response === null || response === void 0 ? void 0 : response.status) === 200) {
+            const result = ((_b = response.json) === null || _b === void 0 ? void 0 : _b.result) || ((_c = response.json) === null || _c === void 0 ? void 0 : _c.text);
+            return result ? String(result) : null;
+        }
+        throw new Error('Auto translation request failed');
+    }
+    applyLocalizationUpdates(updates, autoTranslated = false) {
+        if (!updates.length || !this.definition) {
+            return;
+        }
+        const store = getStore();
+        if (!store) {
+            return;
+        }
+        updates.forEach(({ uuid, translations }) => {
+            var _b, _c;
+            const normalized = Object.entries(translations).reduce((acc, [key, value]) => {
+                if (!value) {
+                    return acc;
+                }
+                acc[key] = Array.isArray(value) ? value : [value];
+                return acc;
+            }, {});
+            const existing = ((_c = (_b = this.definition.localization) === null || _b === void 0 ? void 0 : _b[this.languageCode]) === null || _c === void 0 ? void 0 : _c[uuid]) || {};
+            const merged = { ...existing, ...normalized };
+            store.getState().updateLocalization(this.languageCode, uuid, merged);
+            if (autoTranslated) {
+                zustand
+                    .getState()
+                    .markAutoTranslated(this.languageCode, uuid, Object.keys(translations));
+            }
+        });
+    }
+    async runAutoTranslation() {
+        if (!this.definition ||
+            this.languageCode === this.definition.language ||
+            !this.autoTranslateModel) {
+            this.autoTranslating = false;
+            return;
+        }
+        const bundles = this.buildTranslationBundles(this.translationFilters.categories);
+        for (const bundle of bundles) {
+            if (!this.autoTranslating) {
+                break;
+            }
+            const untranslated = bundle.translations.filter((translation) => !translation.to || translation.to.trim().length === 0);
+            if (untranslated.length === 0) {
+                continue;
+            }
+            const updates = [];
+            for (const translation of untranslated) {
+                if (!this.autoTranslating) {
+                    break;
+                }
+                if (!this.shouldTranslateValue(translation.from)) {
+                    continue;
+                }
+                const cached = this.translationCache.get(translation.from);
+                if (cached) {
+                    updates.push({
+                        uuid: translation.uuid,
+                        translations: { [translation.attribute]: cached }
+                    });
+                    continue;
+                }
+                try {
+                    const result = await this.requestAutoTranslation(translation.from);
+                    if (result) {
+                        this.translationCache.set(translation.from, result);
+                        updates.push({
+                            uuid: translation.uuid,
+                            translations: { [translation.attribute]: result }
+                        });
+                    }
+                }
+                catch (error) {
+                    console.error('Auto translation request failed', error);
+                    this.autoTranslateError =
+                        'Auto translation failed. Please try again.';
+                    this.autoTranslating = false;
+                    break;
+                }
+            }
+            if (updates.length > 0) {
+                this.applyLocalizationUpdates(updates, true);
+            }
+            if (!this.autoTranslating) {
+                break;
+            }
+        }
+        this.autoTranslating = false;
+    }
+    renderLocalizationWindow() {
+        var _b, _c, _d;
+        const languages = this.getLocalizationLanguages();
+        if (!languages.length) {
+            return html ``;
+        }
+        const baseLanguage = (_b = this.definition) === null || _b === void 0 ? void 0 : _b.language;
+        const availableLanguages = this.getAvailableLanguages();
+        const baseName = ((_c = availableLanguages.find((lang) => lang.code === baseLanguage)) === null || _c === void 0 ? void 0 : _c.name) ||
+            'Base Language';
+        const activeLanguageCode = languages.some((lang) => lang.code === this.languageCode)
+            ? this.languageCode
+            : (_d = languages[0]) === null || _d === void 0 ? void 0 : _d.code;
+        const activeLanguage = activeLanguageCode
+            ? languages.find((lang) => lang.code === activeLanguageCode)
+            : null;
+        const progress = this.getLocalizationProgress(activeLanguageCode || '');
+        const includeCategories = this.translationFilters.categories;
+        const settingsPanelId = 'translation-settings-panel';
+        const remainingTranslations = Math.max(progress.total - progress.localized, 0);
+        const hasTranslations = progress.total > 0;
+        const hasPendingTranslations = remainingTranslations > 0;
+        const autoTranslateButtonLabel = this.autoTranslating
+            ? 'Stop Auto Translate'
+            : 'Auto Translate';
+        const autoTranslateButtonDisabled = !this.autoTranslating && !hasTranslations;
+        return html `
+      <temba-floating-window
+        id="localization-window"
+        header="Translations"
+        .width=${360}
+        .maxHeight=${600}
+        .top=${20}
+        color="#6b7280"
+        .hidden=${this.localizationWindowHidden}
+        @temba-dialog-hidden=${this.handleLocalizationWindowClosed}
+      >
+        <div class="localization-window-content">
+          <div class="localization-header">
+            Translate from <strong>${baseName}</strong> to the languages below.
+            Closing this window returns you to editing in ${baseName}.
+          </div>
+          <div class="localization-language-row">
+            <temba-select
+              flavor="small"
+              class="localization-language-select"
+              .values=${activeLanguage
+            ? [{ name: activeLanguage.name, value: activeLanguage.code }]
+            : []}
+              @change=${this.handleLocalizationLanguageSelectChange}
+            >
+              ${languages.map((lang) => html `<temba-option
+                  value="${lang.code}"
+                  name="${lang.name}"
+                ></temba-option>`)}
+            </temba-select>
+            <button
+              class="auto-translate-button"
+              type="button"
+              ?disabled=${autoTranslateButtonDisabled}
+              @click=${this.handleAutoTranslateClick}
+            >
+              ${autoTranslateButtonLabel}
+            </button>
+          </div>
+          <div class="localization-progress">
+            <div class="localization-progress-summary">
+              ${this.autoTranslating
+            ? html `<temba-loading units="3" size="8"></temba-loading>
+                    <span>Auto translating remaining text…</span>`
+            : !hasTranslations
+                ? html `<span>
+                    Add content or enable more options to start translating.
+                  </span>`
+                : hasPendingTranslations
+                    ? html `<span>
+                    ${progress.localized} of ${progress.total} items translated
+                  </span>`
+                    : html `<span>All items are translated.</span>`}
+            </div>
+            ${this.autoTranslateError
+            ? html `<div class="auto-translate-error">
+                  ${this.autoTranslateError}
+                </div>`
+            : ''}
+            <div class="localization-progress-bar-row">
+              <div
+                class="localization-progress-trigger"
+                role="button"
+                tabindex="0"
+                aria-expanded="${this.translationSettingsExpanded}"
+                aria-controls="${settingsPanelId}"
+                @click=${this.handleLocalizationProgressToggleClick}
+                @keydown=${this.handleLocalizationProgressToggleKeydown}
+              >
+                <temba-progress
+                  .current=${progress.localized}
+                  .total=${Math.max(progress.total, 1)}
+                  .animated=${false}
+                ></temba-progress>
+              </div>
+              <button
+                class="translation-settings-toggle"
+                type="button"
+                @click=${this.toggleTranslationSettings}
+                aria-expanded="${this.translationSettingsExpanded}"
+                aria-controls="${settingsPanelId}"
+              >
+                <span
+                  class="translation-settings-arrow ${this
+            .translationSettingsExpanded
+            ? 'expanded'
+            : ''}"
+                ></span>
+              </button>
+            </div>
+            ${this.translationSettingsExpanded
+            ? html `<div id="${settingsPanelId}" class="translation-settings">
+                  <div class="translation-settings-row">
+                    <temba-checkbox
+                      name="include-categories"
+                      label="Include categories"
+                      ?checked=${includeCategories}
+                      style="--checkbox-padding:5px; border-radius:var(--curvature);"
+                      @change=${this.handleIncludeCategoriesChange}
+                    ></temba-checkbox>
+                  </div>
+                </div>`
+            : ''}
+          </div>
+        </div>
+      </temba-floating-window>
+    `;
+    }
+    renderAutoTranslateDialog() {
+        if (!this.autoTranslateDialogOpen) {
+            return html ``;
+        }
+        const selectedModel = this.autoTranslateModel
+            ? [this.autoTranslateModel]
+            : [];
+        const disableTranslate = !this.autoTranslateModel;
+        return html `
+      <temba-dialog
+        header="Auto translate"
+        .open=${this.autoTranslateDialogOpen}
+        primaryButtonName="Translate"
+        cancelButtonName="Cancel"
+        size="small"
+        .disabled=${disableTranslate}
+        @temba-button-clicked=${this.handleAutoTranslateDialogButton}
+      >
+        <div class="auto-translate-dialog-content">
+          <p>
+            We'll send any untranslated text to the selected AI model and save
+            the responses automatically.
+          </p>
+          <div class="auto-translate-models">
+            <temba-select
+              class="auto-translate-model-select"
+              endpoint="${AUTO_TRANSLATE_MODELS_ENDPOINT}"
+              .valueKey=${'uuid'}
+              .values=${selectedModel}
+              ?searchable=${true}
+              ?clearable=${true}
+              placeholder="Select an AI model"
+              @change=${this.handleAutoTranslateModelChange}
+            ></temba-select>
+          </div>
+          <p>Only text without translations will be sent.</p>
+          ${this.autoTranslateError
+            ? html `<div class="auto-translate-error">
+                ${this.autoTranslateError}
+              </div>`
+            : ''}
+        </div>
+      </temba-dialog>
+    `;
+    }
+    renderLocalizationTab() {
+        const languages = this.getLocalizationLanguages();
+        if (!languages.length) {
+            return html ``;
+        }
+        return html `
+      <temba-floating-tab
+        id="localization-tab"
+        icon="language"
+        label="Translate Flow"
+        color="#6b7280"
+        .hidden=${!this.localizationWindowHidden}
+        @temba-button-clicked=${this.handleLocalizationTabClick}
+      ></temba-floating-tab>
+    `;
+    }
     render() {
         var _b, _c;
         // we have to embed our own style since we are in light DOM
@@ -1320,7 +2136,8 @@ export class Editor extends RapidElement {
       ${unsafeCSS(CanvasNode.styles.cssText)}
     </style>`;
         const stickies = ((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.stickies) || {};
-        return html `${style}
+        return html `${style} ${this.renderLocalizationWindow()}
+      ${this.renderAutoTranslateDialog()}
       <div id="editor">
         <div
           id="grid"
@@ -1390,7 +2207,11 @@ export class Editor extends RapidElement {
             : ''}
 
       <temba-canvas-menu></temba-canvas-menu>
-      <temba-node-type-selector></temba-node-type-selector> `;
+      <temba-node-type-selector
+        .flowType=${this.flowType}
+        .features=${this.features}
+      ></temba-node-type-selector>
+      ${this.renderLocalizationTab()} `;
     }
 }
 __decorate([
@@ -1399,6 +2220,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Editor.prototype, "version", void 0);
+__decorate([
+    property({ type: String })
+], Editor.prototype, "flowType", void 0);
+__decorate([
+    property({ type: Array })
+], Editor.prototype, "features", void 0);
 __decorate([
     fromStore(zustand, (state) => state.flowDefinition)
 ], Editor.prototype, "definition", void 0);
@@ -1408,6 +2235,12 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.dirtyDate)
 ], Editor.prototype, "dirtyDate", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.languageCode)
+], Editor.prototype, "languageCode", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.isTranslating)
+], Editor.prototype, "isTranslating", void 0);
 __decorate([
     state()
 ], Editor.prototype, "isDragging", void 0);
@@ -1435,6 +2268,27 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "isValidTarget", void 0);
+__decorate([
+    state()
+], Editor.prototype, "localizationWindowHidden", void 0);
+__decorate([
+    state()
+], Editor.prototype, "translationFilters", void 0);
+__decorate([
+    state()
+], Editor.prototype, "translationSettingsExpanded", void 0);
+__decorate([
+    state()
+], Editor.prototype, "autoTranslateDialogOpen", void 0);
+__decorate([
+    state()
+], Editor.prototype, "autoTranslating", void 0);
+__decorate([
+    state()
+], Editor.prototype, "autoTranslateModel", void 0);
+__decorate([
+    state()
+], Editor.prototype, "autoTranslateError", void 0);
 __decorate([
     state()
 ], Editor.prototype, "editingNode", void 0);