@procore/ai-translations 0.4.0 → 0.6.0

package/dist/legacy/index.d.mts

@@ -17,6 +17,7 @@ interface TranslationProgress {
     total: number;
 }
 interface TranslationQueueEntry {
+    id: string;
     originalText: string;
     isTranslated: boolean;
     targetLanguage: string;
@@ -170,8 +171,8 @@ declare const AI_TRANSLATION_FEATURE_FLAG_KEY = "ai-translation";
 declare const getAITranslationLDId: (domain: string) => "67e17b925ace3c08088c4bd2" | "570f2f6e348a2806d7006b6f" | "570e9423348a2806d7004354" | "570f37b4eee8b907140070c5";
 
 declare global {
-    var __AI_TRANSLATION_FRONTEND_QUEUE__: Set<TranslationQueueEntry> | undefined;
-    var __AI_TRANSLATION_BACKEND_QUEUE__: Set<TranslationQueueEntry> | undefined;
+    var __AI_TRANSLATION_FRONTEND_QUEUE__: Map<string, TranslationQueueEntry> | undefined;
+    var __AI_TRANSLATION_BACKEND_QUEUE__: Map<string, TranslationQueueEntry> | undefined;
     var _FRONTEND_AI_TRANSLATION_IN_PROGRESS_: boolean;
     var _BACKEND_AI_TRANSLATION_IN_PROGRESS_: boolean;
 }

package/dist/legacy/index.d.ts

@@ -17,6 +17,7 @@ interface TranslationProgress {
     total: number;
 }
 interface TranslationQueueEntry {
+    id: string;
     originalText: string;
     isTranslated: boolean;
     targetLanguage: string;
@@ -170,8 +171,8 @@ declare const AI_TRANSLATION_FEATURE_FLAG_KEY = "ai-translation";
 declare const getAITranslationLDId: (domain: string) => "67e17b925ace3c08088c4bd2" | "570f2f6e348a2806d7006b6f" | "570e9423348a2806d7004354" | "570f37b4eee8b907140070c5";
 
 declare global {
-    var __AI_TRANSLATION_FRONTEND_QUEUE__: Set<TranslationQueueEntry> | undefined;
-    var __AI_TRANSLATION_BACKEND_QUEUE__: Set<TranslationQueueEntry> | undefined;
+    var __AI_TRANSLATION_FRONTEND_QUEUE__: Map<string, TranslationQueueEntry> | undefined;
+    var __AI_TRANSLATION_BACKEND_QUEUE__: Map<string, TranslationQueueEntry> | undefined;
     var _FRONTEND_AI_TRANSLATION_IN_PROGRESS_: boolean;
     var _BACKEND_AI_TRANSLATION_IN_PROGRESS_: boolean;
 }

package/dist/legacy/index.js

@@ -81,6 +81,9 @@ var Config = class _Config {
   setToolName(name) {
     this.toolName = name;
   }
+  isBackendTranslationStrategy() {
+    return this.ToolConfig.strategy === "backend_translations";
+  }
   getToolName() {
     return this.toolName;
   }
@@ -268,10 +271,10 @@ var Hash = class {
 var QueueManager = class {
   constructor() {
     if (!globalThis.__AI_TRANSLATION_FRONTEND_QUEUE__) {
-      globalThis.__AI_TRANSLATION_FRONTEND_QUEUE__ = /* @__PURE__ */ new Set();
+      globalThis.__AI_TRANSLATION_FRONTEND_QUEUE__ = /* @__PURE__ */ new Map();
     }
     if (!globalThis.__AI_TRANSLATION_BACKEND_QUEUE__) {
-      globalThis.__AI_TRANSLATION_BACKEND_QUEUE__ = /* @__PURE__ */ new Set();
+      globalThis.__AI_TRANSLATION_BACKEND_QUEUE__ = /* @__PURE__ */ new Map();
     }
   }
   getQueue(strategy) {
@@ -284,42 +287,20 @@ var QueueManager = class {
     return void 0;
   }
   add(entry) {
-    var _a;
-    (_a = this.getQueue(entry.translationStrategy)) == null ? void 0 : _a.add(entry);
-  }
-  *generateBatches(strategy, config2) {
-    const queue = this.getQueue(strategy);
-    if (!queue) {
-      throw new Error("Invalid translation strategy");
-    }
-    if (queue.size === 0) {
-      console.warn("No translations to process");
-      return;
-    }
-    const batch = config2.getToolConfig().translationBatchSize;
-    let batches = [];
-    for (const entry of queue.values()) {
-      batches.push(entry);
-      if (batches.length >= batch) {
-        yield batches;
-        batches = [];
-      }
-    }
-    if (batches.length > 0) {
-      queue.clear();
-      yield batches;
-    }
+    const queue = this.getQueue(entry.translationStrategy);
+    if (!queue || queue.has(entry.id)) return;
+    queue.set(entry.id, entry);
   }
-  *generateBatchesV2(config2) {
+  *generateBatches(config2) {
     const queue = this.getQueue(config2.getToolConfig().strategy);
     if (!queue) throw new Error("Invalid translation strategy");
     const batchSize = config2.getToolConfig().translationBatchSize;
     while (queue.size > 0) {
       const batch = [];
       while (batch.length < batchSize && queue.size > 0) {
-        const next = queue.values().next().value;
-        queue.delete(next);
-        batch.push(next);
+        const [key, entry] = queue.entries().next().value;
+        queue.delete(key);
+        batch.push(entry);
       }
       yield batch;
     }
@@ -438,6 +419,19 @@ var _Storage = class _Storage {
     }
   }
   // ------------------------------------
+  // 🗑️ Clear Translation by ID
+  // ------------------------------------
+  static async deleteById(id) {
+    try {
+      const db = await _Storage.getDB();
+      await db.delete(_Storage.STORE_NAME, id);
+      return true;
+    } catch (error) {
+      console.error("[Storage] Failed to delete by id:", error);
+      return false;
+    }
+  }
+  // ------------------------------------
   // 🗑️ Clear All Translations
   // ------------------------------------
   static async clearAll() {
@@ -512,10 +506,42 @@ var _TranslationRegistry = class _TranslationRegistry {
   isNonRetryable(key) {
     return _TranslationRegistry.nonRetryableTexts.has(key);
   }
-  async get(text, targetLanguage, tool) {
+  enqueue(enqueuedKey) {
+    _TranslationRegistry.enqueuedItems.add(enqueuedKey);
+  }
+  isEnqueued(enqueuedKey) {
+    return _TranslationRegistry.enqueuedItems.has(enqueuedKey);
+  }
+  clearEnqueued() {
+    _TranslationRegistry.enqueuedItems.clear();
+  }
+  async removeTextsFromEnqueued(texts, targetLanguage, strategy) {
+    for (const text of texts) {
+      const id = await Storage.generateId(text, targetLanguage, this.tool);
+      _TranslationRegistry.enqueuedItems.delete(
+        this.generateEnqueuedKey(id, strategy)
+      );
+    }
+  }
+  static removeFromEnqueued(key) {
+    _TranslationRegistry.enqueuedItems.delete(key);
+  }
+  generateEnqueuedKey(id, strategy) {
+    return `${id}:${strategy}`;
+  }
+  async get(text, targetLanguage, tool, config2) {
     const key = await Hash.generateFromMultiple([text, targetLanguage, tool]);
-    if (_TranslationRegistry.memoryCache.has(key)) {
-      return _TranslationRegistry.memoryCache.get(key);
+    const cached = _TranslationRegistry.memoryCache.get(key);
+    if (cached) {
+      if (cached.translationStrategy === "frontend_translations" && config2.isBackendTranslationStrategy()) {
+        _TranslationRegistry.memoryCache.delete(key);
+        if (cached.translatedText) {
+          _TranslationRegistry.originalTextIndex.delete(cached.translatedText);
+        }
+        await Storage.deleteById(key);
+        return void 0;
+      }
+      return cached;
     }
     const translation = await Storage.getTranslation(
       text,
@@ -523,6 +549,10 @@ var _TranslationRegistry = class _TranslationRegistry {
       tool
     );
     if (translation !== void 0) {
+      if (translation.translation_strategy === "frontend_translations" && config2.isBackendTranslationStrategy()) {
+        await Storage.deleteById(translation.id);
+        return void 0;
+      }
       return this.toTranslationRegistryEntry(translation);
     }
     return void 0;
@@ -537,6 +567,7 @@ var _TranslationRegistry = class _TranslationRegistry {
   async clear() {
     _TranslationRegistry.memoryCache.clear();
     _TranslationRegistry.originalTextIndex.clear();
+    _TranslationRegistry.enqueuedItems.clear();
     await Storage.clearAll();
     return;
   }
@@ -544,6 +575,7 @@ var _TranslationRegistry = class _TranslationRegistry {
     await Storage.deleteByToolAndStrategy(tool, strategy);
     _TranslationRegistry.memoryCache.clear();
     _TranslationRegistry.originalTextIndex.clear();
+    _TranslationRegistry.enqueuedItems.clear();
     return;
   }
   toTranslationRegistryEntry(translation) {
@@ -565,10 +597,16 @@ var _TranslationRegistry = class _TranslationRegistry {
         translation.id
       );
       const newTranslation = this.toTranslationRegistryEntry(translation);
+      const enqueuedKey = this.generateEnqueuedKey(
+        translation.id,
+        translation.translation_strategy
+      );
       if (currentTranslation && !this.shouldUpdateTranslation(currentTranslation, newTranslation)) {
+        _TranslationRegistry.removeFromEnqueued(enqueuedKey);
         continue;
       }
       this.setTranslationToRegistry(newTranslation);
+      _TranslationRegistry.removeFromEnqueued(enqueuedKey);
     }
     return;
   }
@@ -611,6 +649,7 @@ var _TranslationRegistry = class _TranslationRegistry {
 __publicField(_TranslationRegistry, "memoryCache", /* @__PURE__ */ new Map());
 __publicField(_TranslationRegistry, "originalTextIndex", /* @__PURE__ */ new Map());
 __publicField(_TranslationRegistry, "nonRetryableTexts", /* @__PURE__ */ new Set());
+__publicField(_TranslationRegistry, "enqueuedItems", /* @__PURE__ */ new Set());
 var TranslationRegistry = _TranslationRegistry;
 
 // src/utils/eventHandler.ts
@@ -631,12 +670,13 @@ var EventHandler = class {
     this.aiTranslationEvents = new import_web_sdk_events.SystemEvents(this.sourceEventIdentifier);
     this.toolName = toolName;
   }
-  publishTranslationCompleteEvent(sourceTranslatedTexts, nonRetryableTexts) {
+  publishTranslationCompleteEvent(sourceTranslatedTexts, nonRetryableTexts, retryableFailedTexts = []) {
     this.aiTranslationEvents.publish(
       this.withEventName(TRANSLATION_COMPLETE_EVENT_NAME),
       {
         sourceTranslatedTexts,
-        nonRetryableTexts
+        nonRetryableTexts,
+        retryableFailedTexts
       }
     );
   }
@@ -644,12 +684,19 @@ var EventHandler = class {
     return this.aiTranslationEvents.subscribe(
       this.withEventName(TRANSLATION_COMPLETE_EVENT_NAME),
       (detail) => {
-        var _a, _b;
+        var _a, _b, _c;
         const sourceTranslatedTexts = Array.isArray(
           (_a = detail.data) == null ? void 0 : _a.sourceTranslatedTexts
         ) ? detail.data.sourceTranslatedTexts : [];
         const nonRetryableTexts = Array.isArray((_b = detail.data) == null ? void 0 : _b.nonRetryableTexts) ? detail.data.nonRetryableTexts : [];
-        callback(sourceTranslatedTexts, nonRetryableTexts);
+        const retryableFailedTexts = Array.isArray(
+          (_c = detail.data) == null ? void 0 : _c.retryableFailedTexts
+        ) ? detail.data.retryableFailedTexts : [];
+        callback(
+          sourceTranslatedTexts,
+          nonRetryableTexts,
+          retryableFailedTexts
+        );
       }
     );
   }
@@ -750,6 +797,7 @@ var TranslationManager = class {
     __publicField(this, "currentTranslatorStrategy");
     __publicField(this, "sourceTexts", /* @__PURE__ */ new Map());
     __publicField(this, "nonRetryableTexts", /* @__PURE__ */ new Set());
+    __publicField(this, "retryableFailedTexts", /* @__PURE__ */ new Map());
     __publicField(this, "progressEventHandler");
     __publicField(this, "translationProgress", {
       progress: 0,
@@ -777,19 +825,21 @@ var TranslationManager = class {
     this.translationProgress.total = queueManager.queueSize(
       this.currentTranslatorStrategy
     );
-    for (const batch of queueManager.generateBatchesV2(
-      this.translator.getConfig()
-    )) {
-      batch.forEach((entry) => this.mfeToBeNotified.add(entry.tool));
-      const result = await this.translator.processTranslations(
-        batch.map(
-          (entry) => this.convertTranslationQueueEntryToTranslationRequest(entry)
-        )
-      );
-      this.setTranslationProgress(batch.length);
-      await this.updateDatabaseWithTranslations(result);
-      await this.notifyTranslationCompleted();
-    }
+    do {
+      for (const batch of queueManager.generateBatches(
+        this.translator.getConfig()
+      )) {
+        batch.forEach((entry) => this.mfeToBeNotified.add(entry.tool));
+        const result = await this.translator.processTranslations(
+          batch.map(
+            (entry) => this.convertTranslationQueueEntryToTranslationRequest(entry)
+          )
+        );
+        this.setTranslationProgress(batch.length);
+        await this.updateDatabaseWithTranslations(result);
+        await this.notifyTranslationCompleted();
+      }
+    } while (queueManager.queueSize(this.currentTranslatorStrategy) > 0);
     this.resetTranslationProgress();
     this.publishTranslationProgress();
     if (this.currentTranslatorStrategy === "frontend_translations") {
@@ -808,6 +858,7 @@ var TranslationManager = class {
           continue;
         }
         if (!translation.isTranslated) {
+          this.addRetryableFailedText(response.tool, translation.sourceText);
           continue;
         }
         this.addSourceTextToMap(response.tool, translation.sourceText);
@@ -827,12 +878,14 @@ var TranslationManager = class {
       const eventhandler = new EventHandler(mfe);
       eventhandler.publishTranslationCompleteEvent(
         Array.from(this.sourceTexts.get(mfe) ?? /* @__PURE__ */ new Set()),
-        Array.from(this.nonRetryableTexts)
+        Array.from(this.nonRetryableTexts),
+        Array.from(this.retryableFailedTexts.get(mfe) ?? /* @__PURE__ */ new Set())
       );
     }
     this.mfeToBeNotified.clear();
     this.sourceTexts.clear();
     this.nonRetryableTexts.clear();
+    this.retryableFailedTexts.clear();
   }
   setTranslationProgress(batchSize) {
     this.translationProgress.current += batchSize;
@@ -869,6 +922,11 @@ var TranslationManager = class {
     existing.add(sourceText);
     this.sourceTexts.set(tool, existing);
   }
+  addRetryableFailedText(tool, sourceText) {
+    const existing = this.retryableFailedTexts.get(tool) ?? /* @__PURE__ */ new Set();
+    existing.add(sourceText);
+    this.retryableFailedTexts.set(tool, existing);
+  }
   publishTranslationProgress() {
     this.progressEventHandler.publishTranslationProgressEvent(
       this.translationProgress.progress,
@@ -935,8 +993,16 @@ var Client = class {
         method: "POST",
         body: JSON.stringify(requests)
       });
+      const responseBody = Array.isArray(data) ? data.map((group) => ({
+        ...group,
+        translations: Array.isArray(group.translations) ? group.translations.map((t) => ({
+          ...t,
+          isTranslated: t.isTranslated ?? (!!t.translation && t.translation !== ""),
+          retryable: t.retryable ?? true
+        })) : []
+      })) : data;
       return {
-        responseBody: data,
+        responseBody,
         success: true
       };
     } catch (error) {
@@ -1014,11 +1080,54 @@ var getModelDownloadEventHandler = () => {
   }
   return _modelDownloadEventHandler;
 };
+var SUPPORTED_LANGUAGES = /* @__PURE__ */ new Set([
+  "ar",
+  "bn",
+  "bg",
+  "zh",
+  "hr",
+  "cs",
+  "da",
+  "nl",
+  "en",
+  "fi",
+  "fr",
+  "de",
+  "el",
+  "he",
+  "hi",
+  "hu",
+  "id",
+  "it",
+  "ja",
+  "kn",
+  "ko",
+  "lt",
+  "mr",
+  "no",
+  "pl",
+  "pt",
+  "ro",
+  "ru",
+  "sk",
+  "sl",
+  "es",
+  "sv",
+  "ta",
+  "te",
+  "th",
+  "tr",
+  "uk",
+  "vi"
+]);
 var _ChromeTranslator = class _ChromeTranslator {
   constructor(translator) {
     __publicField(this, "translator");
     this.translator = translator;
   }
+  static isSupportedLanguage(lang) {
+    return SUPPORTED_LANGUAGES.has(lang) || SUPPORTED_LANGUAGES.has(lang.split("-")[0] ?? "");
+  }
   static ensureRegistry() {
     if (!globalThis.chromeTranslatorRegistry) {
       globalThis.chromeTranslatorRegistry = /* @__PURE__ */ new Map();
@@ -1040,30 +1149,31 @@ var _ChromeTranslator = class _ChromeTranslator {
     );
   }
   static async createTranslator(source, target) {
+    const key = this.generateKey(source, target);
     let resolveReady;
-    this.translatorReadyPromise = new Promise((resolve) => {
+    const readyPromise = new Promise((resolve) => {
       resolveReady = resolve;
     });
+    this.translatorReadyPromises.set(key, readyPromise);
     let isDownloading = false;
     const translator = await Translator.create({
       sourceLanguage: source,
       targetLanguage: target,
       monitor(m) {
-        m.addEventListener(
-          "downloadprogress",
-          (e) => {
-            isDownloading = true;
-            const progress = e.total > 0 ? Math.round(e.loaded / e.total * 100) : 0;
-            getModelDownloadEventHandler().publishModelDownloadProgressEvent(
-              e.loaded,
-              e.total,
-              progress
-            );
-            if (e.loaded === e.total) {
-              resolveReady();
-            }
+        m.addEventListener("downloadprogress", (e) => {
+          isDownloading = true;
+          const loaded = e.loaded ?? 0;
+          const total = e.total ?? 0;
+          const progress = total > 0 ? Math.round(loaded / total * 100) : 0;
+          getModelDownloadEventHandler().publishModelDownloadProgressEvent(
+            loaded,
+            total,
+            progress
+          );
+          if (total > 0 && loaded >= total) {
+            resolveReady();
           }
-        );
+        });
       }
     });
     if (!isDownloading) {
@@ -1071,8 +1181,8 @@ var _ChromeTranslator = class _ChromeTranslator {
     }
     return translator;
   }
-  static waitForReady() {
-    return this.translatorReadyPromise;
+  static waitForReady(key) {
+    return this.translatorReadyPromises.get(key) ?? Promise.resolve();
   }
   static async translate(text, targetLanguage) {
     var _a;
@@ -1081,8 +1191,17 @@ var _ChromeTranslator = class _ChromeTranslator {
       const detector = await ChromeLanguageDetector.getInstance();
       const sourceLanguage = await detector.detectLanguage(text);
       const key = this.generateKey(sourceLanguage, targetLanguage);
-      let instance = globalThis.chromeTranslatorRegistry.get(key);
-      if (!instance) {
+      if (!this.isSupportedLanguage(sourceLanguage) || !this.isSupportedLanguage(targetLanguage)) {
+        return {
+          translation: text,
+          sourceLanguage,
+          success: false,
+          retryable: false,
+          errorMessage: `Unsupported language pair: ${sourceLanguage} \u2192 ${targetLanguage}`
+        };
+      }
+      const existingInstance = globalThis.chromeTranslatorRegistry.get(key);
+      if (!existingInstance) {
         const translatorCapabilities = await Translator.availability({
           sourceLanguage,
           targetLanguage
@@ -1100,10 +1219,16 @@ var _ChromeTranslator = class _ChromeTranslator {
           sourceLanguage,
           targetLanguage
         );
-        instance = new _ChromeTranslator(chromeTranslator);
-        globalThis.chromeTranslatorRegistry.set(key, instance);
+        if (!globalThis.chromeTranslatorRegistry.has(key)) {
+          globalThis.chromeTranslatorRegistry.set(
+            key,
+            new _ChromeTranslator(chromeTranslator)
+          );
+        }
       }
-      await this.waitForReady();
+      const instance = globalThis.chromeTranslatorRegistry.get(key);
+      await this.waitForReady(key);
+      this.translatorReadyPromises.delete(key);
       const translation = await ((_a = instance.translator) == null ? void 0 : _a.translate(text));
       if (!translation) {
         return {
@@ -1111,7 +1236,7 @@ var _ChromeTranslator = class _ChromeTranslator {
           sourceLanguage,
           success: false,
           errorMessage: "Translation failed",
-          retryable: true
+          retryable: false
         };
       }
       return {
@@ -1121,11 +1246,12 @@ var _ChromeTranslator = class _ChromeTranslator {
         retryable: true
       };
     } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown error";
       return {
         translation: text,
         sourceLanguage: targetLanguage,
         success: false,
-        errorMessage: error instanceof Error ? error.message : "Unknown error",
+        errorMessage: message,
         retryable: true
       };
     }
@@ -1134,7 +1260,7 @@ var _ChromeTranslator = class _ChromeTranslator {
     return `${sourceLanguage.toUpperCase()}-${targetLanguage.toUpperCase()}`;
   }
 };
-__publicField(_ChromeTranslator, "translatorReadyPromise", Promise.resolve());
+__publicField(_ChromeTranslator, "translatorReadyPromises", /* @__PURE__ */ new Map());
 var ChromeTranslator = _ChromeTranslator;
 
 // src/translators/frontend_translators/chrome/client.ts
@@ -1284,13 +1410,22 @@ var aitFunction = async (text, translationRegistry, config2, tool) => {
   const existingByOriginal = await translationRegistry.get(
     text,
     targetLanguage,
-    tool
+    tool,
+    config2
   );
   if (existingByOriginal && existingByOriginal.isTranslated && existingByOriginal.translatedText && existingByOriginal.translatedText.trim() !== "") {
     return existingByOriginal.translatedText;
   }
   if (!existingByOriginal) {
+    const id = await Storage.generateId(text, targetLanguage, tool);
+    const strategy = config2.getToolConfig().strategy;
+    const enqueuedKey = translationRegistry.generateEnqueuedKey(id, strategy);
+    if (translationRegistry.isEnqueued(enqueuedKey)) {
+      return text;
+    }
+    translationRegistry.enqueue(enqueuedKey);
     queueManager.add({
+      id,
       originalText: text,
       targetLanguage,
       tool,
@@ -1354,12 +1489,17 @@ function AITranslationInnerProvider(props) {
   });
   (0, import_react.useEffect)(() => {
     const unsubscribe = eventHandler.current.subscribeToTranslationCompleteEvent(
-      async (sourceTranslatedTexts, nonRetryableTexts) => {
+      async (sourceTranslatedTexts, nonRetryableTexts, retryableFailedTexts) => {
         try {
           await translationRegistry.current.populateRegistryFromDatabase();
           translationRegistry.current.populateNonRetryableTexts(
             nonRetryableTexts
           );
+          translationRegistry.current.removeTextsFromEnqueued(
+            retryableFailedTexts,
+            locale,
+            config2.getToolConfig().strategy
+          );
           eventHandler.current.publishRerenderEvent(sourceTranslatedTexts);
         } catch (error) {
           console.error(
@@ -1370,7 +1510,7 @@ function AITranslationInnerProvider(props) {
       }
     );
     return () => unsubscribe();
-  }, []);
+  }, [locale, config2]);
   (0, import_react.useEffect)(() => {
     const unsubscribe = eventHandler.current.subscribeToTranslationProgressEvent(
       (progress, current, total) => {
@@ -1388,15 +1528,15 @@ function AITranslationInnerProvider(props) {
     return () => unsubscribe();
   }, []);
   (0, import_react.useEffect)(() => {
-    if (isFetched && remoteConfig && remoteConfig[tool]) {
-      setConfig((prevConfig) => {
-        const clonedConfig = prevConfig.clone();
-        clonedConfig.setTargetLanguage(locale);
-        clonedConfig.setToolConfig(remoteConfig[tool]);
-        translator.current.updateConfig(clonedConfig);
-        return clonedConfig;
-      });
-    }
+    if (!isFetched || !remoteConfig) return;
+    const toolConfig = remoteConfig[tool] ?? remoteConfig;
+    setConfig((prevConfig) => {
+      const clonedConfig = prevConfig.clone();
+      clonedConfig.setTargetLanguage(locale);
+      clonedConfig.setToolConfig(toolConfig);
+      translator.current.updateConfig(clonedConfig);
+      return clonedConfig;
+    });
   }, [tool, remoteConfig, isFetched, locale]);
   config2.setTargetLanguage(locale);
   config2.setToolName(tool);
@@ -1453,6 +1593,7 @@ var TranslatedIcon = ({
       className,
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
+      style: { marginRight: "10px", flexShrink: 0 },
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "path",
         {
@@ -1487,12 +1628,14 @@ var AITranslateText = ({
           return;
         }
         if (sourceTexts.includes(text)) {
-          setDisplayText(await context.ait(text));
+          const translatedText = await context.ait(text);
+          setDisplayText(translatedText);
+          setShowHighlightState(showHighlight && translatedText !== text);
         }
       }
     );
     return () => unsubscribe();
-  }, [context, text]);
+  }, [context, text, showHighlight]);
   const reset = (0, import_react4.useCallback)(
     (displayValue = text) => {
       setDisplayText(displayValue);
@@ -1515,7 +1658,7 @@ var AITranslateText = ({
         const translatedText = await context.ait(text);
         if (cancelled) return;
         setDisplayText(translatedText);
-        setShowHighlightState(showHighlight);
+        setShowHighlightState(showHighlight && translatedText !== text);
       } catch {
         if (cancelled) return;
         reset();
@@ -1527,8 +1670,8 @@ var AITranslateText = ({
     };
   }, [text, shouldTranslate, context, showHighlight, reset]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    displayText,
-    showHighlightState && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TranslatedIcon, { ...translatedIconProps })
+    showHighlightState && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TranslatedIcon, { ...translatedIconProps }),
+    displayText
   ] });
 };