@nyaruka/temba-components 0.156.13 → 0.156.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.156.13",
+  "version": "0.156.14",
   "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

@@ -7,6 +7,7 @@ import { 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;
@@ -203,13 +204,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 = [];
@@ -250,21 +253,60 @@ 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).
    */
   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 }[] = [];
+
+    // 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.
+    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);
+        }
+      }
+    }
+
+    // Collect pending entries (no translation yet) preserving order, and
+    // group source values per key in case the same key yields multiple
+    // entries.
+    const valuesByKey = new Map<string, string[]>();
 
     for (const bundle of bundles) {
       for (const entry of bundle.translations) {
@@ -275,11 +317,38 @@ export class AutoTranslate extends RapidElement {
           continue;
         }
         const key = `${entry.uuid}:${entry.attribute}`;
-        pending.push({ key, entry });
         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);
+      }
+    }
+
+    // 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 +358,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 +376,7 @@ export class AutoTranslate extends RapidElement {
       batches.push({ items: current });
     }
 
-    return { keyToEntries, batches };
+    return { keyToEntries, batches, preTranslated, duplicateKeyToCanonical };
   }
 
   /**
@@ -326,11 +392,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 +444,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 ||
@@ -550,7 +645,8 @@ export class AutoTranslate extends RapidElement {
     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. Remember, AI models can make mistakes so it is
+        important to review all of your translations to verify they are correct.
       </p>
       ${this.models.length > 1
         ? html`<temba-select
@@ -558,6 +654,8 @@ 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}
@@ -610,13 +708,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/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/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"]
     }
   ]
 }