@nyaruka/temba-components 0.156.14 → 0.156.15

package/package.json

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

package/src/flow/AutoTranslate.ts

@@ -3,7 +3,7 @@ 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';
@@ -66,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;
@@ -141,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 })
@@ -170,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.
@@ -192,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();
 
@@ -228,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;
@@ -258,7 +266,10 @@ export class AutoTranslate extends RapidElement {
    * 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).
+   * 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[]>;
@@ -276,53 +287,71 @@ export class AutoTranslate extends RapidElement {
     }
 
     const bundles = buildTranslationBundles(this.definition, this.languageCode);
+    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.
+    // 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] || {};
 
-    for (const bundle of bundles) {
-      for (const entry of bundle.translations) {
-        if (!entry.to || entry.to.trim().length === 0) {
-          continue;
-        }
-        if (!entry.from || entry.from.trim().length === 0) {
-          continue;
-        }
-        const stored = localization[entry.uuid]?.[entry.attribute];
-        if (!Array.isArray(stored) || stored.length === 0) {
-          continue;
-        }
-        const contentKey = JSON.stringify([entry.from]);
-        if (!existingByContent.has(contentKey)) {
-          existingByContent.set(contentKey, stored);
+    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 (no translation yet) preserving order, and
-    // group source values per key in case the same key yields multiple
-    // entries.
+    // 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}`;
         const list = keyToEntries.get(key) || [];
         list.push(entry);
         keyToEntries.set(key, list);
-        const values = valuesByKey.get(key) || [];
-        values.push(entry.from);
-        valuesByKey.set(key, values);
+        if (!valuesByKey.has(key)) {
+          valuesByKey.set(key, entry.fromValues);
+        }
       }
     }
 
@@ -507,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);
     }
 
@@ -642,11 +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
@@ -660,9 +724,13 @@ export class AutoTranslate extends RapidElement {
             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>
     `;
   }
 

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/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