@nyaruka/temba-components 0.156.14 → 0.156.16

package/package.json

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

@@ -40,7 +40,6 @@ import type { RevisionsWindow } from './RevisionsWindow';
 import {
   ACTION_GROUP_METADATA,
   CONTEXT_MENU_SHORTCUTS,
-  Features,
   FlowType,
   FlowTypes
 } from './types';
@@ -200,10 +199,6 @@ export class Editor extends RapidElement {
   @property({ type: Array })
   public features: string[] = [];
 
-  private get autoTranslateEnabled(): boolean {
-    return this.features?.includes(Features.AUTO_TRANSLATE) ?? false;
-  }
-
   private activityTimer: number | null = null;
   private activityInterval = 100; // Start with 100ms interval for fast initial load
 
@@ -1601,6 +1596,9 @@ export class Editor extends RapidElement {
         }
 
         getStore().getState().setDirtyDate(null);
+
+        // Refresh the revisions list if it's currently open.
+        this.getRevisionsWindow()?.refresh();
       })
       .catch((error) => {
         console.error('Failed to save flow:', error);
@@ -1760,7 +1758,7 @@ export class Editor extends RapidElement {
   }
 
   private handleAutoTranslateClick(): void {
-    if (!this.autoTranslateEnabled || this.viewingRevision) {
+    if (this.viewingRevision) {
       return;
     }
     const at = this.querySelector('temba-auto-translate') as any;
@@ -3690,11 +3688,11 @@ 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;
+      Boolean(activeLanguage) && progress.total > 0;
 
     return html`
       <temba-editor-toolbar
@@ -3928,14 +3926,12 @@ export class Editor extends RapidElement {
         @temba-revision-reverted=${this.handleRevisionReverted}
         @temba-revisions-closed=${this.handleRevisionsClosed}
       ></temba-revisions-window>
-      ${this.autoTranslateEnabled
-        ? html`<temba-auto-translate
-            .definition=${this.definition}
-            language-code=${this.languageCode}
-            ?disabled=${this.viewingRevision}
-            @temba-auto-translate-changed=${this.handleAutoTranslateChanged}
-          ></temba-auto-translate>`
-        : ''}
+      <temba-auto-translate
+        .definition=${this.definition}
+        language-code=${this.languageCode}
+        ?disabled=${this.viewingRevision}
+        @temba-auto-translate-changed=${this.handleAutoTranslateChanged}
+      ></temba-auto-translate>
       <div id="editor-container">
         ${this.renderToolbarElement()}
         <div id="editor">

package/src/flow/RevisionsWindow.ts

@@ -7,18 +7,28 @@ import { getStore } from '../store/Store';
 import { FlowDefinition } from '../store/flow-definition';
 import { fetchResults } from '../utils';
 import { FLOW_SPEC_VERSION } from '../store/AppState';
+import {
+  labelsFor,
+  RevisionChanges,
+  summarizeChanges
+} from './revision-summary';
+
+const GROUP_WINDOW_MS = 15 * 60 * 1000;
+const MAX_GROUP_LABELS = 3;
 
 export interface Revision {
   id: number;
   user: {
-    id: number;
-    username: string;
-    first_name: string;
-    last_name: string;
+    id?: number;
+    email?: string;
+    username?: string;
+    first_name?: string;
+    last_name?: string;
     name?: string;
   };
   created_on: string;
   comment?: string;
+  changes?: RevisionChanges | null;
 }
 
 export class RevisionsWindow extends RapidElement {
@@ -53,11 +63,18 @@ export class RevisionsWindow extends RapidElement {
     dirtyDate: Date | null;
   } | null = null;
   private browseLanguageCode: string | null = null;
+  private fetchRequestId = 0;
 
   public get isViewingRevision(): boolean {
     return this.viewingRevision !== null;
   }
 
+  public refresh(): void {
+    if (!this.hidden) {
+      this.fetchRevisions();
+    }
+  }
+
   protected updated(changes: PropertyValues): void {
     super.updated(changes);
     if (
@@ -84,8 +101,8 @@ export class RevisionsWindow extends RapidElement {
         name="revisions"
         header="Revisions"
         icon="revisions"
-        .width=${240}
-        .maxHeight=${400}
+        .width=${340}
+        .maxHeight=${500}
         .top=${120}
         color="rgb(142, 94, 167)"
         .saving=${this.saving}
@@ -99,11 +116,15 @@ export class RevisionsWindow extends RapidElement {
           >
             ${this.isLoading && !this.revisions.length
               ? html`<temba-loading></temba-loading>`
-              : this.revisions.map((rev) => {
+              : this.revisions.map((rev, index) => {
+                  const isCurrent = index === 0;
                   const isSelected = this.viewingRevision?.id === rev.id;
+                  const summary = summarizeChanges(rev.changes);
                   return html`
                     <div
-                      class="revision-item ${isSelected ? 'selected' : ''}"
+                      class="revision-item ${isSelected
+                        ? 'selected'
+                        : ''} ${isCurrent ? 'current' : ''}"
                       style="padding:8px; border-radius:4px; cursor:pointer; background:${isSelected
                         ? '#f0f6ff'
                         : '#f9fafb'}; border:1px solid ${isSelected
@@ -111,36 +132,46 @@ export class RevisionsWindow extends RapidElement {
                         : '#e5e7eb'}; transition: all 0.2s ease;"
                       @click=${() => this.handleRevisionClick(rev)}
                     >
+                      ${summary
+                        ? html`<div
+                            class="revision-summary"
+                            style="font-size:13px; color:#111827; line-height:1.3;"
+                          >
+                            ${summary}
+                          </div>`
+                        : ''}
                       <div
-                        style="display:flex; justify-content:space-between; align-items:center;"
+                        class="revision-meta"
+                        style="display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:20px; font-size:11px; color:#6b7280; margin-top:${summary
+                          ? '2px'
+                          : '0'};"
                       >
-                        <div
-                          class="revision-header"
-                          style="margin-bottom: 2px;"
-                        >
-                          <div
-                            style="font-weight:600; font-size:13px; color:#111827;"
-                          >
-                            <temba-date
-                              value=${rev.created_on}
-                              display="duration"
-                            ></temba-date>
-                          </div>
-                          <div style="font-size:11px; color:#6b7280;">
-                            ${rev.user.name || rev.user.username}
-                          </div>
+                        <div style="flex:1; min-width:0;">
+                          <temba-date
+                            value=${rev.created_on}
+                            display="duration"
+                          ></temba-date>
+                          · ${rev.user.name || rev.user.username}
                         </div>
-                        ${isSelected
-                          ? html`<button
-                              class="revert-button"
-                              @click=${(e: Event) => {
-                                e.stopPropagation();
-                                this.handleRevertClick();
-                              }}
+                        ${isCurrent
+                          ? html`<div
+                              class="current-label"
+                              style="font-size:10px; font-weight:600; text-transform:uppercase; color:#6b7280; background:#e5e7eb; padding:2px 6px; border-radius:10px; letter-spacing:0.5px; flex-shrink:0;"
                             >
-                              Revert
-                            </button>`
-                          : html``}
+                              Current
+                            </div>`
+                          : isSelected
+                            ? html`<button
+                                class="revert-button"
+                                style="font-size:10px; font-weight:600; text-transform:uppercase; color:#1e3a8a; background:#a4cafe; padding:2px 6px; border-radius:10px; letter-spacing:0.5px; border:none; cursor:pointer; flex-shrink:0;"
+                                @click=${(e: Event) => {
+                                  e.stopPropagation();
+                                  this.handleRevertClick();
+                                }}
+                              >
+                                Revert
+                              </button>`
+                            : html``}
                       </div>
 
                       ${rev.comment
@@ -162,17 +193,92 @@ export class RevisionsWindow extends RapidElement {
   // --- Private ---
 
   private async fetchRevisions() {
+    const requestId = ++this.fetchRequestId;
     this.isLoading = true;
     try {
       const results = await fetchResults(
         `/flow/revisions/${this.flow}/?version=${FLOW_SPEC_VERSION}`
       );
-      this.revisions = results.slice(1);
+      if (requestId !== this.fetchRequestId) return;
+      this.revisions = this.collapseRevisions(results);
     } catch (e) {
+      if (requestId !== this.fetchRequestId) return;
       console.error('Error fetching revisions', e);
     } finally {
-      this.isLoading = false;
+      if (requestId === this.fetchRequestId) {
+        this.isLoading = false;
+      }
+    }
+  }
+
+  // Lump revisions made in a continuous editing session (within 15 minutes
+  // of each other, by the same author) onto their most recent member,
+  // merging the tag sets so the summary covers everything that happened in
+  // the window. The merged revision is capped at three distinct displayed
+  // labels — once a fourth would be introduced we break out into a new row.
+  private collapseRevisions(revisions: Revision[]): Revision[] {
+    // The API returns newest-first today; sort defensively so the head/window
+    // logic stays correct if that ever changes.
+    const sorted = [...revisions].sort(
+      (a, b) =>
+        new Date(b.created_on).getTime() - new Date(a.created_on).getTime()
+    );
+    const result: Revision[] = [];
+    let group: Revision[] = [];
+    let groupLabels = new Set<string>();
+
+    const flush = () => {
+      if (group.length === 0) return;
+      const head = group[0];
+      const tagSet = new Set<string>();
+      let anyKnown = false;
+      for (const r of group) {
+        if (r.changes) {
+          anyKnown = true;
+          for (const tag of r.changes.tags || []) tagSet.add(tag);
+        }
+      }
+      result.push({
+        ...head,
+        changes: anyKnown ? { tags: Array.from(tagSet) } : null
+      });
+      group = [];
+      groupLabels = new Set();
+    };
+
+    for (const rev of sorted) {
+      if (group.length === 0) {
+        group.push(rev);
+        groupLabels = labelsFor(rev.changes);
+        continue;
+      }
+      const head = group[0];
+      const headTime = new Date(head.created_on).getTime();
+      const revTime = new Date(rev.created_on).getTime();
+      const withinWindow = headTime - revTime < GROUP_WINDOW_MS;
+      // Compare on whichever identifier the server provides — real data
+      // arrives with `email`, while test fixtures use `username`. Falling
+      // back through the chain keeps both shapes working.
+      const headId = head.user?.email ?? head.user?.username;
+      const revId = rev.user?.email ?? rev.user?.username;
+      const sameAuthor = headId === revId;
+      const prospective = new Set([
+        ...groupLabels,
+        ...labelsFor(rev.changes)
+      ]);
+      const fitsLabelCap = prospective.size <= MAX_GROUP_LABELS;
+
+      if (withinWindow && sameAuthor && fitsLabelCap) {
+        group.push(rev);
+        groupLabels = prospective;
+      } else {
+        flush();
+        group.push(rev);
+        groupLabels = labelsFor(rev.changes);
+      }
     }
+    flush();
+    return result;
   }
 
   private async handleRevisionClick(revision: Revision) {

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/revision-summary.ts

@@ -0,0 +1,62 @@
+export interface RevisionChanges {
+  tags: string[];
+}
+
+const TAG_LABELS: Record<string, { label: string; order: number }> = {
+  metadata: { label: 'metadata', order: 0 },
+  nodes: { label: 'nodes', order: 1 },
+  routing: { label: 'routing', order: 2 },
+  actions: { label: 'actions', order: 3 },
+  stickies: { label: 'stickies', order: 5 },
+  layout: { label: 'layout', order: 6 }
+};
+
+function tagToLabel(tag: string): { label: string; order: number } | null {
+  if (Object.prototype.hasOwnProperty.call(TAG_LABELS, tag)) {
+    return TAG_LABELS[tag];
+  }
+  if (tag.startsWith('localization:')) {
+    return { label: 'translations', order: 4 };
+  }
+  return null;
+}
+
+export function labelsFor(
+  changes: RevisionChanges | null | undefined
+): Set<string> {
+  const result = new Set<string>();
+  for (const tag of changes?.tags || []) {
+    const entry = tagToLabel(tag);
+    if (entry) result.add(entry.label);
+  }
+  return result;
+}
+
+export function summarizeChanges(
+  changes: RevisionChanges | null | undefined
+): string {
+  if (!changes) return '';
+  const tags = changes.tags || [];
+  if (tags.length === 0) return '';
+
+  const orders = new Map<string, number>();
+  for (const tag of tags) {
+    const entry = tagToLabel(tag);
+    if (entry && !orders.has(entry.label)) {
+      orders.set(entry.label, entry.order);
+    }
+  }
+  if (orders.size === 0) return '';
+
+  const labels = Array.from(orders.entries())
+    .sort((a, b) => a[1] - b[1])
+    .map(([label]) => label);
+
+  return `Changed ${joinNaturally(labels)}`;
+}
+
+function joinNaturally(parts: string[]): string {
+  if (parts.length <= 1) return parts.join('');
+  if (parts.length === 2) return `${parts[0]} and ${parts[1]}`;
+  return `${parts.slice(0, -1).join(', ')}, and ${parts[parts.length - 1]}`;
+}