@procore/ai-translations 0.5.0 → 0.6.1

package/dist/modern/index.js

@@ -20,10 +20,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ACTION: () => ACTION,
   AITranslateText: () => AITranslateText,
   AITranslationProvider: () => AITranslationProvider,
   AI_TRANSLATION_FEATURE_FLAG_KEY: () => AI_TRANSLATION_FEATURE_FLAG_KEY,
+  BUTTON_TYPE: () => BUTTON_TYPE,
+  buildAnalyticEvent: () => buildAnalyticEvent,
+  buildEventKey: () => buildEventKey,
+  buildObject: () => buildObject,
   getAITranslationLDId: () => getAITranslationLDId,
+  useAIAnalytics: () => useAIAnalytics,
   useAITranslation: () => useAITranslation,
   useConfig: () => useConfig
 });
@@ -77,6 +83,9 @@ var Config = class _Config {
   setToolName(name) {
     this.toolName = name;
   }
+  isBackendTranslationStrategy() {
+    return this.ToolConfig.strategy === "backend_translations";
+  }
   getToolName() {
     return this.toolName;
   }
@@ -414,6 +423,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() {
@@ -508,7 +530,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) {
@@ -517,10 +541,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,
@@ -528,6 +561,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;
@@ -774,19 +811,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") {
@@ -940,8 +979,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) {
@@ -1018,12 +1065,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();
@@ -1045,30 +1135,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) {
@@ -1076,8 +1167,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();
@@ -1085,8 +1176,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
@@ -1104,10 +1204,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 {
@@ -1115,7 +1221,7 @@ var ChromeTranslator = class _ChromeTranslator {
           sourceLanguage,
           success: false,
           errorMessage: "Translation failed",
-          retryable: true
+          retryable: false
         };
       }
       return {
@@ -1125,11 +1231,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
       };
     }
@@ -1286,7 +1393,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;
@@ -1347,7 +1455,12 @@ function AITranslationInnerProvider(props) {
     companyId,
     userId,
     projectId,
-    enableAIT = true
+    enableAIT = true,
+    companyLocale,
+    projectLocale,
+    onTrackAnalyticsEvent,
+    page,
+    scope
   } = props;
   const [translationProgress, setTranslationProgress] = (0, import_react.useState)(null);
   const [modelDownloadProgress, setModelDownloadProgress] = (0, import_react.useState)(null);
@@ -1403,15 +1516,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);
@@ -1424,10 +1537,15 @@ function AITranslationInnerProvider(props) {
   const contextValue = {
     ait,
     locale,
+    companyLocale,
+    projectLocale,
     renderVersion: renderVersionManager.getVersion(),
     translationProgress,
     modelDownloadProgress,
-    tool
+    tool,
+    onTrackAnalyticsEvent,
+    page,
+    scope
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AITranslationContext.Provider, { value: contextValue, children });
 }
@@ -1447,15 +1565,143 @@ function useAITranslation() {
   return ctx;
 }
 
+// src/hooks/useAIAnalytics.ts
+var import_react3 = require("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 = (0, import_react3.useContext)(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 = (0, import_react3.useCallback)(() => {
+    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 = (0, import_react3.useCallback)(
+    (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 = (0, import_react3.useCallback)(
+    (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 = (0, import_react3.useCallback)(
+    (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
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/TranslatedIcon.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TranslatedIcon = ({
-  width = 14,
-  height = 14,
+  width = 24,
+  height = 24,
   className,
   color = "#000000"
 }) => {
@@ -1468,11 +1714,12 @@ 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",
         {
           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"
         }
       )
     }
@@ -1487,11 +1734,11 @@ var AITranslateText = ({
   showHighlight = false,
   translatedIconProps
 }) => {
-  const context = (0, import_react4.useContext)(AITranslationContext);
-  const [displayText, setDisplayText] = (0, import_react4.useState)(text ?? "");
-  const [showHighlightState, setShowHighlightState] = (0, import_react4.useState)(showHighlight);
-  const eventHandlerRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const context = (0, import_react5.useContext)(AITranslationContext);
+  const [displayText, setDisplayText] = (0, import_react5.useState)(text ?? "");
+  const [showHighlightState, setShowHighlightState] = (0, import_react5.useState)(showHighlight);
+  const eventHandlerRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     if (!context) return;
     if (!eventHandlerRef.current) {
       eventHandlerRef.current = new EventHandler(context.tool);
@@ -1510,14 +1757,14 @@ var AITranslateText = ({
     );
     return () => unsubscribe();
   }, [context, text, showHighlight]);
-  const reset = (0, import_react4.useCallback)(
+  const reset = (0, import_react5.useCallback)(
     (displayValue = text) => {
       setDisplayText(displayValue);
       setShowHighlightState(false);
     },
     [text]
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (text == null || text === "") {
       reset(text ?? "");
       return;
@@ -1544,8 +1791,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
   ] });
 };
 
@@ -1569,10 +1816,16 @@ var getAITranslationLDId = (domain) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ACTION,
   AITranslateText,
   AITranslationProvider,
   AI_TRANSLATION_FEATURE_FLAG_KEY,
+  BUTTON_TYPE,
+  buildAnalyticEvent,
+  buildEventKey,
+  buildObject,
   getAITranslationLDId,
+  useAIAnalytics,
   useAITranslation,
   useConfig
 });