@nyaruka/temba-components 0.156.13 → 0.156.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.156.13",
+  "version": "0.156.15",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/display/Options.ts

@@ -562,6 +562,19 @@ export class Options extends RapidElement {
       return;
     }
 
+    // Only intercept keys when the event originated within our owning component.
+    // Without this, any temba-options with populated options would swallow arrow
+    // keys document-wide, breaking cursor movement in unrelated text editors.
+    // All current usages render temba-options inside another custom element's
+    // shadow root, so scoping by host correctly distinguishes between editors.
+    if (!this.block) {
+      const root = this.getRootNode();
+      const host = root instanceof ShadowRoot ? root.host : null;
+      if (host && !evt.composedPath().includes(host)) {
+        return;
+      }
+    }
+
     if (this.options && this.options.length > 0) {
       if ((evt.ctrlKey && evt.key === 'n') || evt.key === 'ArrowDown') {
         this.moveCursor(1);

package/src/flow/AutoTranslate.ts

@@ -3,10 +3,11 @@ import { css, PropertyValues } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getStore } from '../store/Store';
-import { zustand } from '../store/AppState';
+import { AppState, fromStore, zustand } from '../store/AppState';
 import { FlowDefinition } from '../store/flow-definition';
 import { TranslationEntry, buildTranslationBundles } from './flow-translations';
 import { getLanguageDisplayName } from './utils';
+import { LLMModel, hasLLMRole } from './flow-utils';
 
 interface TranslationModel {
   uuid: string;
@@ -65,10 +66,6 @@ export class AutoTranslate extends RapidElement {
         text-decoration: underline;
       }
 
-      .auto-translate-single-model {
-        font-size: 13px;
-      }
-
       .auto-translate-status {
         display: flex;
         align-items: center;
@@ -140,6 +137,9 @@ export class AutoTranslate extends RapidElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @fromStore(zustand, (state: AppState) => state.brand)
+  private brand!: string;
+
   // Reactive flag the host can read to show "translating" state in UI
   // adjacent to this component (e.g. the toolbar button).
   @property({ type: Boolean, reflect: true })
@@ -169,6 +169,9 @@ export class AutoTranslate extends RapidElement {
   @state()
   interrupt = false;
 
+  @state()
+  updateExisting = false;
+
   // Tracks whether the dialog has ever opened so we can keep it mounted
   // afterwards (so it sees its own close transition) without paying
   // for an empty hidden dialog before that.
@@ -191,6 +194,7 @@ export class AutoTranslate extends RapidElement {
     this.error = null;
     this.errorExpanded = false;
     this.selectedModel = null;
+    this.updateExisting = false;
     this.dialogOpen = true;
     await this.loadModels();
 
@@ -203,13 +207,15 @@ export class AutoTranslate extends RapidElement {
     this.modelsLoading = true;
     try {
       const store = getStore();
-      const results = store
-        ? await store.getResults(MODELS_ENDPOINT, { force: true })
+      const results: LLMModel[] = store
+        ? ((await store.getResults(MODELS_ENDPOINT, { force: true })) ?? [])
         : [];
-      this.models = (results || []).map((r: any) => ({
-        uuid: r.uuid,
-        name: r.name
-      }));
+      this.models = results
+        .filter((r) => hasLLMRole(r, 'editing'))
+        .map((r) => ({
+          uuid: r.uuid,
+          name: r.name
+        }));
     } catch (err) {
       console.error('Failed to load AI models', err);
       this.models = [];
@@ -225,6 +231,11 @@ export class AutoTranslate extends RapidElement {
     this.selectedModel = next ? { uuid: next.uuid, name: next.name } : null;
   }
 
+  private handleUpdateExistingChange(event: Event): void {
+    const checkbox = event.target as any;
+    this.updateExisting = !!checkbox?.checked;
+  }
+
   private confirmTranslate(): void {
     if (!this.selectedModel) {
       return;
@@ -250,36 +261,123 @@ export class AutoTranslate extends RapidElement {
   /**
    * Builds batches of translation requests from all untranslated entries,
    * grouping so each request's serialized payload stays under
-   * TRANSLATION_BATCH_CHAR_LIMIT.
+   * TRANSLATION_BATCH_CHAR_LIMIT. Skips entries whose source matches a
+   * translation already present in the flow (those are returned in
+   * preTranslated for direct application), and dedupes pending entries
+   * sharing identical source arrays so each unique array is sent at most
+   * once (duplicates are returned in duplicateKeyToCanonical for
+   * propagation when the canonical key's translation lands). When
+   * updateExisting is true, already-translated entries are also included
+   * and the pre-translation reuse path is skipped so all localizable
+   * entries are sent to the LLM.
    */
   private buildTranslationBatches(): {
     keyToEntries: Map<string, TranslationEntry[]>;
     batches: { items: Record<string, string[]> }[];
+    preTranslated: Map<string, string[]>;
+    duplicateKeyToCanonical: Map<string, string>;
   } {
     const keyToEntries = new Map<string, TranslationEntry[]>();
     const batches: { items: Record<string, string[]> }[] = [];
+    const preTranslated = new Map<string, string[]>();
+    const duplicateKeyToCanonical = new Map<string, string>();
 
     if (!this.definition) {
-      return { keyToEntries, batches };
+      return { keyToEntries, batches, preTranslated, duplicateKeyToCanonical };
     }
 
     const bundles = buildTranslationBundles(this.definition, this.languageCode);
-    const pending: { key: string; entry: TranslationEntry }[] = [];
+    const updateExisting = this.updateExisting;
+
+    // Map source-content -> already-stored translation array, built from
+    // entries that have a translation in the live localization map. Reading
+    // the stored array (not entry.to) preserves the original shape. Skipped
+    // in update mode so we always re-translate via the LLM.
+    const existingByContent = new Map<string, string[]>();
+    const localization =
+      this.definition.localization?.[this.languageCode] || {};
+
+    if (!updateExisting) {
+      for (const bundle of bundles) {
+        for (const entry of bundle.translations) {
+          // Skip entries with no real translation: an empty array OR an
+          // array of only empty/whitespace strings shouldn't seed reuse,
+          // or we'd silently propagate a blank to other matching sources.
+          if (
+            !entry.toValues ||
+            !entry.toValues.some((v) => v && v.trim().length > 0)
+          ) {
+            continue;
+          }
+          if (!entry.fromValues || entry.fromValues.length === 0) {
+            continue;
+          }
+          const stored = localization[entry.uuid]?.[entry.attribute];
+          if (!Array.isArray(stored) || stored.length === 0) {
+            continue;
+          }
+          const contentKey = JSON.stringify(entry.fromValues);
+          if (!existingByContent.has(contentKey)) {
+            existingByContent.set(contentKey, stored);
+          }
+        }
+      }
+    }
+
+    // Collect pending entries preserving order. Each unique key (uuid +
+    // attribute) maps to its source array (entry.fromValues), preserving
+    // multi-item structure for attributes like router-case `arguments`.
+    // In update mode we include entries that already have a translation.
+    // Invariant: findTranslations produces at most one entry per
+    // (uuid, attribute) pair, so the first fromValues is authoritative
+    // and any later entry with the same key is treated as a duplicate.
+    const valuesByKey = new Map<string, string[]>();
 
     for (const bundle of bundles) {
       for (const entry of bundle.translations) {
-        if (entry.to && entry.to.trim().length > 0) {
+        if (
+          !updateExisting &&
+          entry.toValues &&
+          entry.toValues.some((v) => v && v.trim().length > 0)
+        ) {
           continue;
         }
-        if (!entry.from || entry.from.trim().length === 0) {
+        if (!entry.fromValues || entry.fromValues.length === 0) {
           continue;
         }
         const key = `${entry.uuid}:${entry.attribute}`;
-        pending.push({ key, entry });
         const list = keyToEntries.get(key) || [];
         list.push(entry);
         keyToEntries.set(key, list);
+        if (!valuesByKey.has(key)) {
+          valuesByKey.set(key, entry.fromValues);
+        }
+      }
+    }
+
+    // Split pending keys into pre-translated (matching an existing
+    // translation), duplicates (sharing content with an earlier pending
+    // key), and unique canonical keys that need to be sent to the LLM.
+    const canonicalByContent = new Map<string, string>();
+    const canonicalKeysWithValues: { key: string; values: string[] }[] = [];
+
+    for (const [key, values] of valuesByKey) {
+      const contentKey = JSON.stringify(values);
+
+      const existing = existingByContent.get(contentKey);
+      if (existing && existing.length === values.length) {
+        preTranslated.set(key, existing);
+        continue;
       }
+
+      const canonical = canonicalByContent.get(contentKey);
+      if (canonical) {
+        duplicateKeyToCanonical.set(key, canonical);
+        continue;
+      }
+
+      canonicalByContent.set(contentKey, key);
+      canonicalKeysWithValues.push({ key, values });
     }
 
     const source = this.definition.language;
@@ -289,18 +387,15 @@ export class AutoTranslate extends RapidElement {
 
     let current: Record<string, string[]> = {};
 
-    for (const { key, entry } of pending) {
-      const prevList = current[key];
-      const nextList = prevList ? [...prevList, entry.from] : [entry.from];
-      const tentative = { ...current, [key]: nextList };
-
+    for (const { key, values } of canonicalKeysWithValues) {
+      const tentative = { ...current, [key]: values };
       const tentativeSize = measurePayload(tentative);
       const batchHasItems = Object.keys(current).length > 0;
 
       if (tentativeSize > TRANSLATION_BATCH_CHAR_LIMIT && batchHasItems) {
         // a single oversized entry still ships on its own
         batches.push({ items: current });
-        current = { [key]: [entry.from] };
+        current = { [key]: values };
       } else {
         current = tentative;
       }
@@ -310,7 +405,7 @@ export class AutoTranslate extends RapidElement {
       batches.push({ items: current });
     }
 
-    return { keyToEntries, batches };
+    return { keyToEntries, batches, preTranslated, duplicateKeyToCanonical };
   }
 
   /**
@@ -326,11 +421,31 @@ export class AutoTranslate extends RapidElement {
       return;
     }
 
-    const { keyToEntries, batches } = this.buildTranslationBatches();
+    const { keyToEntries, batches, preTranslated, duplicateKeyToCanonical } =
+      this.buildTranslationBatches();
+
+    // Apply entries that match an existing translation immediately so we
+    // don't need an LLM round-trip for them.
+    if (preTranslated.size > 0) {
+      this.applyBatchTranslations(
+        Object.fromEntries(preTranslated),
+        keyToEntries
+      );
+    }
+
     if (batches.length === 0) {
       return;
     }
 
+    // Inverse of duplicateKeyToCanonical so we can quickly find which keys
+    // need to be back-filled when a canonical key's translation lands.
+    const duplicatesByCanonical = new Map<string, string[]>();
+    for (const [dup, canonical] of duplicateKeyToCanonical) {
+      const list = duplicatesByCanonical.get(canonical) || [];
+      list.push(dup);
+      duplicatesByCanonical.set(canonical, list);
+    }
+
     this.running = true;
     this.interrupt = false;
     this.progress = { done: 0, total: batches.length };
@@ -358,7 +473,16 @@ export class AutoTranslate extends RapidElement {
 
         if (response.status >= 200 && response.status < 300) {
           const returned: Record<string, string[]> = response.json?.items || {};
-          this.applyBatchTranslations(returned, keyToEntries);
+          const expanded: Record<string, string[]> = { ...returned };
+          for (const canonical of Object.keys(returned)) {
+            const dups = duplicatesByCanonical.get(canonical);
+            if (dups) {
+              for (const dup of dups) {
+                expanded[dup] = returned[canonical];
+              }
+            }
+          }
+          this.applyBatchTranslations(expanded, keyToEntries);
         } else {
           this.error =
             response.json?.error ||
@@ -412,8 +536,39 @@ export class AutoTranslate extends RapidElement {
       const liveDefinition = zustand.getState().flowDefinition;
       const existing =
         liveDefinition?.localization?.[this.languageCode]?.[uuid] || {};
+      const existingValues = Array.isArray(existing[attribute])
+        ? (existing[attribute] as string[])
+        : null;
+
+      // Never replace an existing non-empty translation with an empty
+      // value: when re-translating already-localized content the LLM may
+      // return blanks for some entries; keep the prior translation in
+      // those slots. Only safe when the arrays align by index — if the
+      // source array length has changed since the last translation, the
+      // old values aren't tied to the same items anymore, so skip the
+      // per-item preserve and let the LLM result through unchanged.
+      const canPreservePerItem =
+        !!existingValues && existingValues.length === values.length;
+      const mergedValues = values.map((v, i) => {
+        const isEmpty =
+          v === null ||
+          v === undefined ||
+          (typeof v === 'string' && v.trim().length === 0);
+        if (isEmpty && canPreservePerItem && existingValues![i]) {
+          return existingValues![i];
+        }
+        return v;
+      });
+
+      const hasContent = mergedValues.some(
+        (v) => v && (typeof v !== 'string' || v.trim().length > 0)
+      );
+      if (!hasContent) {
+        continue;
+      }
+
       const merged = updatesByUuid.get(uuid) || { ...existing };
-      merged[attribute] = values;
+      merged[attribute] = mergedValues;
       updatesByUuid.set(uuid, merged);
     }
 
@@ -547,10 +702,15 @@ export class AutoTranslate extends RapidElement {
 
     const selected = this.selectedModel ? [this.selectedModel] : [];
     const languageName = getLanguageDisplayName(this.languageCode);
+    const aiClause = this.brand
+      ? html`${this.brand} uses AI for automatic translation, which can make
+        mistakes,`
+      : html`Automatic translation uses AI, which can make mistakes,`;
     return html`
       <p>
         All remaining text for <strong>${languageName}</strong> will be
-        translated automatically. Remember, AI models can make mistakes so it is important to review all of your translations to verify they are correct.
+        translated automatically. ${aiClause} so it is important to review all
+        of your translations to verify they are correct.
       </p>
       ${this.models.length > 1
         ? html`<temba-select
@@ -558,13 +718,19 @@ export class AutoTranslate extends RapidElement {
             endpoint="${MODELS_ENDPOINT}"
             valueKey="uuid"
             .values=${selected}
+            .shouldExclude=${(option: LLMModel) =>
+              !hasLLMRole(option, 'editing')}
             ?searchable=${true}
             placeholder="Select an AI model"
             @change=${this.handleModelChange}
           ></temba-select>`
-        : html`<div class="auto-translate-single-model">
-            Using <strong>${this.models[0]?.name}</strong>
-          </div>`}
+        : ''}
+      <temba-checkbox
+        class="auto-translate-update-existing"
+        label="Update existing translations"
+        ?checked=${this.updateExisting}
+        @change=${this.handleUpdateExistingChange}
+      ></temba-checkbox>
     `;
   }
 
@@ -610,13 +776,11 @@ export class AutoTranslate extends RapidElement {
     return html`
       <div class="auto-translate-error-block">
         <p class="auto-translate-error-help">
-          Any translations already applied have been kept. You can try again,
-          or check the AI model's settings if the problem persists.
+          Any translations already applied have been kept. You can try again, or
+          check the AI model's settings if the problem persists.
         </p>
         ${this.errorExpanded
-          ? html`<pre class="auto-translate-error-details">
-${this.error}</pre
-            >`
+          ? html`<pre class="auto-translate-error-details">${this.error}</pre>`
           : html`<button
               class="auto-translate-error-toggle"
               type="button"

package/src/flow/Editor.ts

@@ -3690,11 +3690,13 @@ export class Editor extends RapidElement {
           })
         ];
 
+    // shown whenever the active language has any localizable content, even
+    // at 100% — the dialog's "update existing" option lets users re-run
+    // translation on already-translated entries.
     const hasPendingTranslations =
       this.autoTranslateEnabled &&
       Boolean(activeLanguage) &&
-      progress.total > 0 &&
-      progress.localized < progress.total;
+      progress.total > 0;
 
     return html`
       <temba-editor-toolbar

package/src/flow/flow-translations.ts

@@ -10,6 +10,12 @@ export interface TranslationEntry {
   attribute: string;
   from: string;
   to: string | null;
+  // Original array form of the source/target. For attributes whose value
+  // is an array (e.g. router case `arguments`), these preserve the per-item
+  // structure that `from`/`to` would otherwise lose to comma-joining. For
+  // scalar attributes the arrays contain a single item.
+  fromValues: string[];
+  toValues: string[] | null;
 }
 
 export interface TranslationBundle {
@@ -97,12 +103,29 @@ export function findTranslations(
 
     const toValue = to ? formatTranslationValue(to) : null;
 
+    const toArray = (value: any): string[] => {
+      if (Array.isArray(value)) {
+        return value.map((v) =>
+          v === null || v === undefined ? '' : String(v)
+        );
+      }
+      if (value === null || value === undefined) {
+        return [];
+      }
+      return [String(value)];
+    };
+
+    const fromValues = toArray(from);
+    const toValues = to !== null && to !== undefined ? toArray(to) : null;
+
     translations.push({
       uuid,
       type,
       attribute,
       from: fromValue,
-      to: toValue
+      to: toValue,
+      fromValues,
+      toValues
     });
   });
 

package/src/flow/flow-utils.ts

@@ -15,3 +15,20 @@ export function shouldExcludeFlow(flow: any): boolean {
 
   return false;
 }
+
+export type LLMRole = 'engine' | 'editing';
+
+export interface LLMModel {
+  uuid: string;
+  name: string;
+  type?: string;
+  description?: string;
+  roles?: LLMRole[];
+}
+
+export function hasLLMRole(
+  model: { roles?: string[] } | null | undefined,
+  role: LLMRole
+): boolean {
+  return model?.roles?.includes(role) ?? false;
+}

package/src/flow/nodes/split_by_llm.ts

@@ -8,6 +8,7 @@ import {
   renderLineItem,
   getLlmIcon
 } from '../utils';
+import { LLMModel, hasLLMRole } from '../flow-utils';
 
 export const split_by_llm: NodeConfig = {
   type: 'split_by_llm',
@@ -47,7 +48,8 @@ export const split_by_llm: NodeConfig = {
       searchable: true,
       valueKey: 'uuid',
       nameKey: 'name',
-      placeholder: 'Select an LLM...'
+      placeholder: 'Select an LLM...',
+      shouldExclude: (option: LLMModel) => !hasLLMRole(option, 'engine')
     },
     input: {
       type: 'text',

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -3,6 +3,7 @@ import { CallLLM, Node } from '../../store/flow-definition';
 import { generateUUID, createMultiCategoryRouter } from '../../utils';
 import { html } from 'lit';
 import { validateWith } from '../utils';
+import { LLMModel, hasLLMRole } from '../flow-utils';
 
 export const split_by_llm_categorize: NodeConfig = {
   type: 'split_by_llm_categorize',
@@ -19,7 +20,8 @@ export const split_by_llm_categorize: NodeConfig = {
       endpoint: '/api/internal/llms.json',
       valueKey: 'uuid',
       nameKey: 'name',
-      placeholder: 'Select an LLM...'
+      placeholder: 'Select an LLM...',
+      shouldExclude: (option: LLMModel) => !hasLLMRole(option, 'engine')
     },
     input: {
       type: 'text',

package/src/form/RichEditor.ts

@@ -434,7 +434,10 @@ export class RichEditor extends FieldElement {
   }
 
   private handleKeydown(e: KeyboardEvent): void {
-    const mod = e.metaKey || e.ctrlKey;
+    // On macOS, Cmd is the undo/redo modifier; leave Ctrl alone so Cocoa
+    // text bindings like Ctrl+K (kill) and Ctrl+Y (yank) keep working.
+    const isMac = /Mac|iPhone|iPad/.test(navigator.userAgent);
+    const mod = isMac ? e.metaKey : e.ctrlKey;
 
     // Undo/redo via keyboard: preventDefault here suppresses the subsequent
     // beforeinput event, avoiding double-handling

package/src/layout/Dialog.ts

@@ -172,10 +172,7 @@ export class Dialog extends ResizeElement {
       }
 
       .dialog-footer {
-        background: var(
-          --dialog-footer-background,
-          var(--color-primary-light)
-        );
+        background: var(--dialog-footer-background, var(--color-primary-light));
         padding: var(--dialog-footer-padding-top, 10px) 10px 10px;
         display: flex;
         flex-flow: row;

package/src/store/AppState.ts

@@ -185,6 +185,7 @@ export interface Activity {
 
 export interface AppState {
   features: string[];
+  brand: string;
 
   flowDefinition: FlowDefinition;
   flowInfo: FlowInfo;
@@ -265,6 +266,7 @@ export const zustand = createStore<AppState>()(
   subscribeWithSelector(
     immer((set, get) => ({
       features: [] as string[],
+      brand: '',
       languageNames: {},
       canvasSize: { width: 0, height: 0 },
       languageCode: '',

package/src/store/Store.ts

@@ -93,6 +93,9 @@ export class Store extends RapidElement {
   @property({ type: String, attribute: 'shortcuts' })
   shortcutsEndpoint: string;
 
+  @property({ type: String })
+  brand = '';
+
   @property({ type: Object, attribute: false })
   private schema: CompletionSchema;
 
@@ -154,6 +157,7 @@ export class Store extends RapidElement {
     this.ready = false;
     this.clearCache();
     this.settings = JSON.parse(getCookie('settings') || '{}');
+    zustand.setState({ brand: this.brand });
 
     /* 
     // This will create a shorthand unit

package/static/api/llms.json

@@ -6,13 +6,22 @@
       "uuid": "2399e7d6-fcdf-4e47-a835-f3bdb7f80938",
       "name": "GPT 4.1",
       "type": "openai",
-      "description": "General-purpose reasoning model"
+      "description": "General-purpose reasoning model",
+      "roles": ["engine", "editing"]
     },
     {
       "uuid": "4399e7d6-fcdf-4e47-a835-f3bdb7f80938",
       "name": "GPT 5",
       "type": "openai",
-      "description": "Latest experimental model"
+      "description": "Latest experimental model",
+      "roles": ["engine"]
+    },
+    {
+      "uuid": "5499e7d6-fcdf-4e47-a835-f3bdb7f80938",
+      "name": "GPT 4.1 Mini",
+      "type": "openai",
+      "description": "Lightweight model for editing tasks",
+      "roles": ["editing"]
     }
   ]
 }