@procore/ai-translations 0.5.0 → 0.6.1

package/dist/modern/index.mjs

@@ -46,6 +46,9 @@ var Config = class _Config {
   setToolName(name) {
     this.toolName = name;
   }
+  isBackendTranslationStrategy() {
+    return this.ToolConfig.strategy === "backend_translations";
+  }
   getToolName() {
     return this.toolName;
   }
@@ -389,6 +392,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() {
@@ -483,7 +499,9 @@ var TranslationRegistry = class _TranslationRegistry {
   async removeTextsFromEnqueued(texts, targetLanguage, strategy) {
     for (const text of texts) {
       const id = await Storage.generateId(text, targetLanguage, this.tool);
-      _TranslationRegistry.enqueuedItems.delete(`${id}:${strategy}`);
+      _TranslationRegistry.enqueuedItems.delete(
+        this.generateEnqueuedKey(id, strategy)
+      );
     }
   }
   static removeFromEnqueued(key) {
@@ -492,10 +510,19 @@ var TranslationRegistry = class _TranslationRegistry {
   generateEnqueuedKey(id, strategy) {
     return `${id}:${strategy}`;
   }
-  async get(text, targetLanguage, tool) {
+  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,
@@ -503,6 +530,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;
@@ -749,19 +780,21 @@ var TranslationManager = class {
     this.translationProgress.total = queueManager.queueSize(
       this.currentTranslatorStrategy
     );
-    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();
-    }
+    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") {
@@ -915,8 +948,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) {
@@ -993,12 +1034,55 @@ 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 {
   translator;
   constructor(translator) {
     this.translator = translator;
   }
-  static translatorReadyPromise = Promise.resolve();
+  static translatorReadyPromises = /* @__PURE__ */ new Map();
+  static isSupportedLanguage(lang) {
+    return SUPPORTED_LANGUAGES.has(lang) || SUPPORTED_LANGUAGES.has(lang.split("-")[0] ?? "");
+  }
   static ensureRegistry() {
     if (!globalThis.chromeTranslatorRegistry) {
       globalThis.chromeTranslatorRegistry = /* @__PURE__ */ new Map();
@@ -1020,30 +1104,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) {
@@ -1051,8 +1136,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) {
     this.ensureRegistry();
@@ -1060,8 +1145,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
@@ -1079,10 +1173,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 instance.translator?.translate(text);
       if (!translation) {
         return {
@@ -1090,7 +1190,7 @@ var ChromeTranslator = class _ChromeTranslator {
           sourceLanguage,
           success: false,
           errorMessage: "Translation failed",
-          retryable: true
+          retryable: false
         };
       }
       return {
@@ -1100,11 +1200,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
       };
     }
@@ -1261,7 +1362,8 @@ 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;
@@ -1322,7 +1424,12 @@ function AITranslationInnerProvider(props) {
     companyId,
     userId,
     projectId,
-    enableAIT = true
+    enableAIT = true,
+    companyLocale,
+    projectLocale,
+    onTrackAnalyticsEvent,
+    page,
+    scope
   } = props;
   const [translationProgress, setTranslationProgress] = useState(null);
   const [modelDownloadProgress, setModelDownloadProgress] = useState(null);
@@ -1378,15 +1485,15 @@ function AITranslationInnerProvider(props) {
     return () => unsubscribe();
   }, []);
   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);
@@ -1399,10 +1506,15 @@ function AITranslationInnerProvider(props) {
   const contextValue = {
     ait,
     locale,
+    companyLocale,
+    projectLocale,
     renderVersion: renderVersionManager.getVersion(),
     translationProgress,
     modelDownloadProgress,
-    tool
+    tool,
+    onTrackAnalyticsEvent,
+    page,
+    scope
   };
   return /* @__PURE__ */ jsx(AITranslationContext.Provider, { value: contextValue, children });
 }
@@ -1422,12 +1534,140 @@ function useAITranslation() {
   return ctx;
 }
 
+// src/hooks/useAIAnalytics.ts
+import { useContext as useContext2, useCallback as useCallback2 } from "react";
+
+// src/analytics/events.ts
+var BUTTON_TYPE = {
+  TRANSLATE: "translate",
+  HIGHLIGHT: "highlight"
+};
+var ACTION = {
+  CLICKED: "clicked"
+};
+function buildObject(pageContext, buttonType) {
+  return `${pageContext}_${buttonType}_button`;
+}
+function buildEventKey(parts) {
+  const { scope, tool, object, action } = parts;
+  return `ux.web.feature.${scope}.${tool}.${object}.${action}`;
+}
+function buildAnalyticEvent(params) {
+  const {
+    scope,
+    tool,
+    pageContext,
+    buttonType,
+    baseProperties,
+    action,
+    additionalProperties
+  } = params;
+  const resolvedAction = action ?? ACTION.CLICKED;
+  const object = buildObject(pageContext, buttonType);
+  const key = buildEventKey({
+    scope,
+    tool,
+    object,
+    action: resolvedAction
+  });
+  const properties = {
+    ...baseProperties,
+    ...additionalProperties
+  };
+  return { key, properties };
+}
+
+// src/hooks/useAIAnalytics.ts
+function useAIAnalytics() {
+  const ctx = useContext2(AITranslationContext);
+  if (!ctx) {
+    throw new Error(
+      "useAIAnalytics must be used inside an AITranslationProvider"
+    );
+  }
+  const {
+    locale,
+    companyLocale,
+    projectLocale,
+    tool,
+    page,
+    scope,
+    onTrackAnalyticsEvent
+  } = ctx;
+  const isTrackingEnabled = Boolean(onTrackAnalyticsEvent);
+  const buildBaseProperties = useCallback2(() => {
+    const props = {
+      user_locale: locale,
+      tool,
+      page: page ?? ""
+    };
+    if (companyLocale) props.company_locale = companyLocale;
+    if (projectLocale) props.project_locale = projectLocale;
+    return props;
+  }, [locale, tool, page, companyLocale, projectLocale]);
+  const trackTranslateButtonClicked = useCallback2(
+    (additionalProperties) => {
+      if (!onTrackAnalyticsEvent || !page || !scope) return;
+      onTrackAnalyticsEvent(
+        buildAnalyticEvent({
+          scope,
+          tool,
+          pageContext: page,
+          buttonType: BUTTON_TYPE.TRANSLATE,
+          baseProperties: buildBaseProperties(),
+          additionalProperties
+        })
+      );
+    },
+    [onTrackAnalyticsEvent, tool, page, scope, buildBaseProperties]
+  );
+  const trackHighlightButtonClicked = useCallback2(
+    (additionalProperties) => {
+      if (!onTrackAnalyticsEvent || !page || !scope) return;
+      onTrackAnalyticsEvent(
+        buildAnalyticEvent({
+          scope,
+          tool,
+          pageContext: page,
+          buttonType: BUTTON_TYPE.HIGHLIGHT,
+          baseProperties: buildBaseProperties(),
+          additionalProperties
+        })
+      );
+    },
+    [onTrackAnalyticsEvent, tool, page, scope, buildBaseProperties]
+  );
+  const trackCustomEvent = useCallback2(
+    (buttonType, action, additionalProperties) => {
+      if (!onTrackAnalyticsEvent || !page || !scope) return;
+      onTrackAnalyticsEvent(
+        buildAnalyticEvent({
+          scope,
+          tool,
+          pageContext: page,
+          buttonType,
+          baseProperties: buildBaseProperties(),
+          action,
+          additionalProperties
+        })
+      );
+    },
+    [onTrackAnalyticsEvent, tool, page, scope, buildBaseProperties]
+  );
+  return {
+    trackTranslateButtonClicked,
+    trackHighlightButtonClicked,
+    trackCustomEvent,
+    isTrackingEnabled
+  };
+}
+
 // src/components/AITranslateText.tsx
 import {
   useState as useState2,
   useEffect as useEffect2,
-  useContext as useContext2,
-  useCallback as useCallback2,
+  useContext as useContext3,
+  useCallback as useCallback3,
   useRef as useRef2
 } from "react";
 
@@ -1435,8 +1675,8 @@ import {
 import "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var TranslatedIcon = ({
-  width = 14,
-  height = 14,
+  width = 24,
+  height = 24,
   className,
   color = "#000000"
 }) => {
@@ -1449,11 +1689,12 @@ var TranslatedIcon = ({
       className,
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
+      style: { marginRight: "10px", flexShrink: 0 },
       children: /* @__PURE__ */ jsx2(
         "path",
         {
           fill: color,
-          d: "M12.87,15.07l-2.54,-2.51 0.03,-0.03c1.74,-1.94 2.98,-4.17 3.71,-6.53L17,6L17,4h-7L10,2L8,2v2L1,4v1.99h11.17C11.5,7.92 10.44,9.75 9,11.35 8.07,10.32 7.3,9.19 6.69,8h-2c0.73,1.63 1.73,3.17 2.98,4.56l-5.09,5.02L4,19l5,-5 3.11,3.11 0.76,-2.04zM18.5,10h-2L12,22h2l1.12,-3h4.75L21,22h2l-4.5,-12zM15.88,17l1.62,-4.33L19.12,17h-3.24z"
+          d: "M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM18.92 8H15.97C15.65 6.75 15.19 5.55 14.59 4.44C16.43 5.07 17.96 6.35 18.92 8ZM12 4.04C12.83 5.24 13.48 6.57 13.91 8H10.09C10.52 6.57 11.17 5.24 12 4.04ZM4.26 14C4.1 13.36 4 12.69 4 12C4 11.31 4.1 10.64 4.26 10H7.64C7.56 10.66 7.5 11.32 7.5 12C7.5 12.68 7.56 13.34 7.64 14H4.26ZM5.08 16H8.03C8.35 17.25 8.81 18.45 9.41 19.56C7.57 18.93 6.04 17.66 5.08 16ZM8.03 8H5.08C6.04 6.34 7.57 5.07 9.41 4.44C8.81 5.55 8.35 6.75 8.03 8ZM12 19.96C11.17 18.76 10.52 17.43 10.09 16H13.91C13.48 17.43 12.83 18.76 12 19.96ZM14.34 14H9.66C9.57 13.34 9.5 12.68 9.5 12C9.5 11.32 9.57 10.65 9.66 10H14.34C14.43 10.65 14.5 11.32 14.5 12C14.5 12.68 14.43 13.34 14.34 14ZM14.59 19.56C15.19 18.45 15.65 17.25 15.97 16H18.92C17.96 17.65 16.43 18.93 14.59 19.56ZM16.36 14C16.44 13.34 16.5 12.68 16.5 12C16.5 11.32 16.44 10.66 16.36 10H19.74C19.9 10.64 20 11.31 20 12C20 12.69 19.9 13.36 19.74 14H16.36Z"
         }
       )
     }
@@ -1468,7 +1709,7 @@ var AITranslateText = ({
   showHighlight = false,
   translatedIconProps
 }) => {
-  const context = useContext2(AITranslationContext);
+  const context = useContext3(AITranslationContext);
   const [displayText, setDisplayText] = useState2(text ?? "");
   const [showHighlightState, setShowHighlightState] = useState2(showHighlight);
   const eventHandlerRef = useRef2(null);
@@ -1491,7 +1732,7 @@ var AITranslateText = ({
     );
     return () => unsubscribe();
   }, [context, text, showHighlight]);
-  const reset = useCallback2(
+  const reset = useCallback3(
     (displayValue = text) => {
       setDisplayText(displayValue);
       setShowHighlightState(false);
@@ -1525,8 +1766,8 @@ var AITranslateText = ({
     };
   }, [text, shouldTranslate, context, showHighlight, reset]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    displayText,
-    showHighlightState && /* @__PURE__ */ jsx3(TranslatedIcon, { ...translatedIconProps })
+    showHighlightState && /* @__PURE__ */ jsx3(TranslatedIcon, { ...translatedIconProps }),
+    displayText
   ] });
 };
 
@@ -1549,10 +1790,16 @@ var getAITranslationLDId = (domain) => {
   }
 };
 export {
+  ACTION,
   AITranslateText,
   AITranslationProvider,
   AI_TRANSLATION_FEATURE_FLAG_KEY,
+  BUTTON_TYPE,
+  buildAnalyticEvent,
+  buildEventKey,
+  buildObject,
   getAITranslationLDId,
+  useAIAnalytics,
   useAITranslation,
   useConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/ai-translations",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Library that provides a solution to use AI to translate text into a language",
   "main": "dist/legacy/index.js",
   "types": "dist/legacy/index.d.ts",