@procore/ai-translations 0.2.0 → 0.3.0

package/dist/legacy/index.d.mts

@@ -2,6 +2,20 @@ import * as _tanstack_react_query from '@tanstack/react-query';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode } from 'react';
 
+interface TranslationProgress {
+    /**
+     * Progress percentage (0-100)
+     */
+    progress: number;
+    /**
+     * Current number of strings translated
+     */
+    current: number;
+    /**
+     * Total number of strings to translate
+     */
+    total: number;
+}
 interface TranslationQueueEntry {
     originalText: string;
     isTranslated: boolean;
@@ -11,6 +25,26 @@ interface TranslationQueueEntry {
     tool: string;
     translationStrategy: 'frontend_translations' | 'backend_translations';
 }
+interface ModelDownloadProgress {
+    /** Bytes already downloaded */
+    loaded: number;
+    /** Total bytes to download */
+    total: number;
+    /** Download percentage (0-100) */
+    progress: number;
+    /** True once the model has finished downloading */
+    isComplete: boolean;
+}
+interface AITranslationContextValue {
+    ait: (text: string) => Promise<string>;
+    locale: string;
+    renderVersion?: number;
+    /** Batch-translation progress; `null` while the queue is idle. */
+    translationProgress: TranslationProgress | null;
+    /** Chrome AI model download progress; `null` until a download begins. */
+    modelDownloadProgress: ModelDownloadProgress | null;
+    tool: string;
+}
 
 interface ConfigurationResponse {
     [key: string]: ToolConfig;
@@ -63,6 +97,25 @@ interface UseConfigOptions {
  */
 declare function useConfig(toolName: string, options?: UseConfigOptions): _tanstack_react_query.UseQueryResult<ConfigurationResponse | null, unknown>;
 
+/**
+ * Returns the full AI-translation context value provided by the nearest
+ * `AITranslationProvider`.
+ *
+ * Use this hook when you need more than one value from the context at once.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { ait, locale, translationProgress, modelDownloadProgress } = useAITranslation();
+ *
+ *   return <span>{locale}</span>;
+ * }
+ * ```
+ *
+ * @throws if called outside of an `AITranslationProvider`.
+ */
+declare function useAITranslation(): AITranslationContextValue;
+
 interface AITranslationProviderProps {
     children: ReactNode;
     locale: string;
@@ -123,4 +176,4 @@ declare global {
     var _BACKEND_AI_TRANSLATION_IN_PROGRESS_: boolean;
 }
 
-export { AITranslateText, type AITranslateTextProps, AITranslationProvider, AI_TRANSLATION_FEATURE_FLAG_KEY, type TranslatedIconProps, type UseConfigOptions, getAITranslationLDId, useConfig };
+export { AITranslateText, type AITranslateTextProps, AITranslationProvider, AI_TRANSLATION_FEATURE_FLAG_KEY, type TranslatedIconProps, type UseConfigOptions, getAITranslationLDId, useAITranslation, useConfig };

package/dist/legacy/index.d.ts

@@ -2,6 +2,20 @@ import * as _tanstack_react_query from '@tanstack/react-query';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode } from 'react';
 
+interface TranslationProgress {
+    /**
+     * Progress percentage (0-100)
+     */
+    progress: number;
+    /**
+     * Current number of strings translated
+     */
+    current: number;
+    /**
+     * Total number of strings to translate
+     */
+    total: number;
+}
 interface TranslationQueueEntry {
     originalText: string;
     isTranslated: boolean;
@@ -11,6 +25,26 @@ interface TranslationQueueEntry {
     tool: string;
     translationStrategy: 'frontend_translations' | 'backend_translations';
 }
+interface ModelDownloadProgress {
+    /** Bytes already downloaded */
+    loaded: number;
+    /** Total bytes to download */
+    total: number;
+    /** Download percentage (0-100) */
+    progress: number;
+    /** True once the model has finished downloading */
+    isComplete: boolean;
+}
+interface AITranslationContextValue {
+    ait: (text: string) => Promise<string>;
+    locale: string;
+    renderVersion?: number;
+    /** Batch-translation progress; `null` while the queue is idle. */
+    translationProgress: TranslationProgress | null;
+    /** Chrome AI model download progress; `null` until a download begins. */
+    modelDownloadProgress: ModelDownloadProgress | null;
+    tool: string;
+}
 
 interface ConfigurationResponse {
     [key: string]: ToolConfig;
@@ -63,6 +97,25 @@ interface UseConfigOptions {
  */
 declare function useConfig(toolName: string, options?: UseConfigOptions): _tanstack_react_query.UseQueryResult<ConfigurationResponse | null, unknown>;
 
+/**
+ * Returns the full AI-translation context value provided by the nearest
+ * `AITranslationProvider`.
+ *
+ * Use this hook when you need more than one value from the context at once.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { ait, locale, translationProgress, modelDownloadProgress } = useAITranslation();
+ *
+ *   return <span>{locale}</span>;
+ * }
+ * ```
+ *
+ * @throws if called outside of an `AITranslationProvider`.
+ */
+declare function useAITranslation(): AITranslationContextValue;
+
 interface AITranslationProviderProps {
     children: ReactNode;
     locale: string;
@@ -123,4 +176,4 @@ declare global {
     var _BACKEND_AI_TRANSLATION_IN_PROGRESS_: boolean;
 }
 
-export { AITranslateText, type AITranslateTextProps, AITranslationProvider, AI_TRANSLATION_FEATURE_FLAG_KEY, type TranslatedIconProps, type UseConfigOptions, getAITranslationLDId, useConfig };
+export { AITranslateText, type AITranslateTextProps, AITranslationProvider, AI_TRANSLATION_FEATURE_FLAG_KEY, type TranslatedIconProps, type UseConfigOptions, getAITranslationLDId, useAITranslation, useConfig };

package/dist/legacy/index.js

@@ -26,6 +26,7 @@ __export(index_exports, {
   AITranslationProvider: () => AITranslationProvider,
   AI_TRANSLATION_FEATURE_FLAG_KEY: () => AI_TRANSLATION_FEATURE_FLAG_KEY,
   getAITranslationLDId: () => getAITranslationLDId,
+  useAITranslation: () => useAITranslation,
   useConfig: () => useConfig
 });
 module.exports = __toCommonJS(index_exports);
@@ -212,6 +213,9 @@ function useConfig(toolName, options = {}) {
   });
 }
 
+// src/hooks/useAITranslation.ts
+var import_react2 = require("react");
+
 // src/Provider.tsx
 var import_react = require("react");
 
@@ -616,6 +620,7 @@ var import_web_sdk_events = require("@procore/web-sdk-events");
 var TRANSLATION_COMPLETE_EVENT_NAME = "ai-translation-completed";
 var RERENDER_EVENT_NAME = "ai-translations-component-rerender";
 var TRANSLATION_PROGRESS_EVENT_NAME = "ai-translations-progress";
+var MODEL_DOWNLOAD_PROGRESS_EVENT_NAME = "ai-translations-model-download-progress";
 
 // src/utils/eventHandler.ts
 var EventHandler = class {
@@ -682,6 +687,34 @@ var EventHandler = class {
       }
     );
   }
+  /**
+   * Publishes a Chrome AI language-model download-progress event.
+   *
+   * Not tool-scoped — a Chrome language model is shared across the entire
+   * browser session, so all Provider instances receive it.
+   */
+  publishModelDownloadProgressEvent(loaded, total, progress) {
+    this.aiTranslationEvents.publish(MODEL_DOWNLOAD_PROGRESS_EVENT_NAME, {
+      loaded,
+      total,
+      progress,
+      isComplete: loaded === total
+    });
+  }
+  subscribeToModelDownloadProgressEvent(callback) {
+    return this.aiTranslationEvents.subscribe(
+      MODEL_DOWNLOAD_PROGRESS_EVENT_NAME,
+      (detail) => {
+        var _a, _b, _c, _d;
+        return callback({
+          loaded: ((_a = detail.data) == null ? void 0 : _a.loaded) ?? 0,
+          total: ((_b = detail.data) == null ? void 0 : _b.total) ?? 0,
+          progress: ((_c = detail.data) == null ? void 0 : _c.progress) ?? 0,
+          isComplete: ((_d = detail.data) == null ? void 0 : _d.isComplete) ?? false
+        });
+      }
+    );
+  }
   withEventName(eventName) {
     return eventName + ":" + this.toolName;
   }
@@ -974,6 +1007,13 @@ var ChromeLanguageDetector = class _ChromeLanguageDetector {
 };
 
 // src/translators/frontend_translators/chrome/Translator.ts
+var _modelDownloadEventHandler = null;
+var getModelDownloadEventHandler = () => {
+  if (!_modelDownloadEventHandler) {
+    _modelDownloadEventHandler = new EventHandler("__chrome_model__");
+  }
+  return _modelDownloadEventHandler;
+};
 var _ChromeTranslator = class _ChromeTranslator {
   constructor(translator) {
     __publicField(this, "translator");
@@ -1013,7 +1053,12 @@ var _ChromeTranslator = class _ChromeTranslator {
           "downloadprogress",
           (e) => {
             isDownloading = true;
-            console.log(`Progress: ${Math.round(e.loaded / e.total * 100)}%`);
+            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();
             }
@@ -1295,6 +1340,7 @@ function AITranslationInnerProvider(props) {
     enableAIT = true
   } = props;
   const [translationProgress, setTranslationProgress] = (0, import_react.useState)(null);
+  const [modelDownloadProgress, setModelDownloadProgress] = (0, import_react.useState)(null);
   const [config2, setConfig] = (0, import_react.useState)(new Config());
   const translator = (0, import_react.useRef)(new Translator2(config2));
   const eventHandler = (0, import_react.useRef)(new EventHandler(tool));
@@ -1333,6 +1379,14 @@ function AITranslationInnerProvider(props) {
     );
     return () => unsubscribe();
   }, []);
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = eventHandler.current.subscribeToModelDownloadProgressEvent(
+      (progress) => {
+        setModelDownloadProgress(progress);
+      }
+    );
+    return () => unsubscribe();
+  }, []);
   (0, import_react.useEffect)(() => {
     if (isFetched && remoteConfig && remoteConfig[tool]) {
       setConfig((prevConfig) => {
@@ -1357,6 +1411,7 @@ function AITranslationInnerProvider(props) {
     locale,
     renderVersion: renderVersionManager.getVersion(),
     translationProgress,
+    modelDownloadProgress,
     tool
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AITranslationContext.Provider, { value: contextValue, children });
@@ -1366,11 +1421,22 @@ function AITranslationProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query2.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AITranslationInnerProvider, { ...props }) });
 }
 
+// src/hooks/useAITranslation.ts
+function useAITranslation() {
+  const ctx = (0, import_react2.useContext)(AITranslationContext);
+  if (!ctx) {
+    throw new Error(
+      "useAITranslation must be used inside an AITranslationProvider"
+    );
+  }
+  return ctx;
+}
+
 // src/components/AITranslateText.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/TranslatedIcon.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TranslatedIcon = ({
   width = 14,
@@ -1406,11 +1472,11 @@ var AITranslateText = ({
   showHighlight = false,
   translatedIconProps
 }) => {
-  const context = (0, import_react3.useContext)(AITranslationContext);
-  const [displayText, setDisplayText] = (0, import_react3.useState)(text ?? "");
-  const [showHighlightState, setShowHighlightState] = (0, import_react3.useState)(showHighlight);
-  const eventHandlerRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  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)(() => {
     if (!context) return;
     if (!eventHandlerRef.current) {
       eventHandlerRef.current = new EventHandler(context.tool);
@@ -1427,14 +1493,14 @@ var AITranslateText = ({
     );
     return () => unsubscribe();
   }, [context, text]);
-  const reset = (0, import_react3.useCallback)(
+  const reset = (0, import_react4.useCallback)(
     (displayValue = text) => {
       setDisplayText(displayValue);
       setShowHighlightState(false);
     },
     [text]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (text == null || text === "") {
       reset(text ?? "");
       return;
@@ -1484,5 +1550,6 @@ var getAITranslationLDId = (domain) => {
   AITranslationProvider,
   AI_TRANSLATION_FEATURE_FLAG_KEY,
   getAITranslationLDId,
+  useAITranslation,
   useConfig
 });

package/dist/legacy/index.mjs

@@ -184,6 +184,9 @@ function useConfig(toolName, options = {}) {
   });
 }
 
+// src/hooks/useAITranslation.ts
+import { useContext } from "react";
+
 // src/Provider.tsx
 import {
   createContext,
@@ -594,6 +597,7 @@ import { SystemEvents } from "@procore/web-sdk-events";
 var TRANSLATION_COMPLETE_EVENT_NAME = "ai-translation-completed";
 var RERENDER_EVENT_NAME = "ai-translations-component-rerender";
 var TRANSLATION_PROGRESS_EVENT_NAME = "ai-translations-progress";
+var MODEL_DOWNLOAD_PROGRESS_EVENT_NAME = "ai-translations-model-download-progress";
 
 // src/utils/eventHandler.ts
 var EventHandler = class {
@@ -660,6 +664,34 @@ var EventHandler = class {
       }
     );
   }
+  /**
+   * Publishes a Chrome AI language-model download-progress event.
+   *
+   * Not tool-scoped — a Chrome language model is shared across the entire
+   * browser session, so all Provider instances receive it.
+   */
+  publishModelDownloadProgressEvent(loaded, total, progress) {
+    this.aiTranslationEvents.publish(MODEL_DOWNLOAD_PROGRESS_EVENT_NAME, {
+      loaded,
+      total,
+      progress,
+      isComplete: loaded === total
+    });
+  }
+  subscribeToModelDownloadProgressEvent(callback) {
+    return this.aiTranslationEvents.subscribe(
+      MODEL_DOWNLOAD_PROGRESS_EVENT_NAME,
+      (detail) => {
+        var _a, _b, _c, _d;
+        return callback({
+          loaded: ((_a = detail.data) == null ? void 0 : _a.loaded) ?? 0,
+          total: ((_b = detail.data) == null ? void 0 : _b.total) ?? 0,
+          progress: ((_c = detail.data) == null ? void 0 : _c.progress) ?? 0,
+          isComplete: ((_d = detail.data) == null ? void 0 : _d.isComplete) ?? false
+        });
+      }
+    );
+  }
   withEventName(eventName) {
     return eventName + ":" + this.toolName;
   }
@@ -952,6 +984,13 @@ var ChromeLanguageDetector = class _ChromeLanguageDetector {
 };
 
 // src/translators/frontend_translators/chrome/Translator.ts
+var _modelDownloadEventHandler = null;
+var getModelDownloadEventHandler = () => {
+  if (!_modelDownloadEventHandler) {
+    _modelDownloadEventHandler = new EventHandler("__chrome_model__");
+  }
+  return _modelDownloadEventHandler;
+};
 var _ChromeTranslator = class _ChromeTranslator {
   constructor(translator) {
     __publicField(this, "translator");
@@ -991,7 +1030,12 @@ var _ChromeTranslator = class _ChromeTranslator {
           "downloadprogress",
           (e) => {
             isDownloading = true;
-            console.log(`Progress: ${Math.round(e.loaded / e.total * 100)}%`);
+            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();
             }
@@ -1273,6 +1317,7 @@ function AITranslationInnerProvider(props) {
     enableAIT = true
   } = props;
   const [translationProgress, setTranslationProgress] = useState(null);
+  const [modelDownloadProgress, setModelDownloadProgress] = useState(null);
   const [config2, setConfig] = useState(new Config());
   const translator = useRef(new Translator2(config2));
   const eventHandler = useRef(new EventHandler(tool));
@@ -1311,6 +1356,14 @@ function AITranslationInnerProvider(props) {
     );
     return () => unsubscribe();
   }, []);
+  useEffect(() => {
+    const unsubscribe = eventHandler.current.subscribeToModelDownloadProgressEvent(
+      (progress) => {
+        setModelDownloadProgress(progress);
+      }
+    );
+    return () => unsubscribe();
+  }, []);
   useEffect(() => {
     if (isFetched && remoteConfig && remoteConfig[tool]) {
       setConfig((prevConfig) => {
@@ -1335,6 +1388,7 @@ function AITranslationInnerProvider(props) {
     locale,
     renderVersion: renderVersionManager.getVersion(),
     translationProgress,
+    modelDownloadProgress,
     tool
   };
   return /* @__PURE__ */ jsx(AITranslationContext.Provider, { value: contextValue, children });
@@ -1344,11 +1398,22 @@ function AITranslationProvider(props) {
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(AITranslationInnerProvider, { ...props }) });
 }
 
+// src/hooks/useAITranslation.ts
+function useAITranslation() {
+  const ctx = useContext(AITranslationContext);
+  if (!ctx) {
+    throw new Error(
+      "useAITranslation must be used inside an AITranslationProvider"
+    );
+  }
+  return ctx;
+}
+
 // src/components/AITranslateText.tsx
 import {
   useState as useState2,
   useEffect as useEffect2,
-  useContext,
+  useContext as useContext2,
   useCallback as useCallback2,
   useRef as useRef2
 } from "react";
@@ -1390,7 +1455,7 @@ var AITranslateText = ({
   showHighlight = false,
   translatedIconProps
 }) => {
-  const context = useContext(AITranslationContext);
+  const context = useContext2(AITranslationContext);
   const [displayText, setDisplayText] = useState2(text ?? "");
   const [showHighlightState, setShowHighlightState] = useState2(showHighlight);
   const eventHandlerRef = useRef2(null);
@@ -1467,5 +1532,6 @@ export {
   AITranslationProvider,
   AI_TRANSLATION_FEATURE_FLAG_KEY,
   getAITranslationLDId,
+  useAITranslation,
   useConfig
 };

package/dist/modern/index.d.mts

@@ -2,6 +2,20 @@ import * as _tanstack_react_query from '@tanstack/react-query';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode } from 'react';
 
+interface TranslationProgress {
+    /**
+     * Progress percentage (0-100)
+     */
+    progress: number;
+    /**
+     * Current number of strings translated
+     */
+    current: number;
+    /**
+     * Total number of strings to translate
+     */
+    total: number;
+}
 interface TranslationQueueEntry {
     originalText: string;
     isTranslated: boolean;
@@ -11,6 +25,26 @@ interface TranslationQueueEntry {
     tool: string;
     translationStrategy: 'frontend_translations' | 'backend_translations';
 }
+interface ModelDownloadProgress {
+    /** Bytes already downloaded */
+    loaded: number;
+    /** Total bytes to download */
+    total: number;
+    /** Download percentage (0-100) */
+    progress: number;
+    /** True once the model has finished downloading */
+    isComplete: boolean;
+}
+interface AITranslationContextValue {
+    ait: (text: string) => Promise<string>;
+    locale: string;
+    renderVersion?: number;
+    /** Batch-translation progress; `null` while the queue is idle. */
+    translationProgress: TranslationProgress | null;
+    /** Chrome AI model download progress; `null` until a download begins. */
+    modelDownloadProgress: ModelDownloadProgress | null;
+    tool: string;
+}
 
 interface ConfigurationResponse {
     [key: string]: ToolConfig;
@@ -63,6 +97,25 @@ interface UseConfigOptions {
  */
 declare function useConfig(toolName: string, options?: UseConfigOptions): _tanstack_react_query.UseQueryResult<ConfigurationResponse | null, unknown>;
 
+/**
+ * Returns the full AI-translation context value provided by the nearest
+ * `AITranslationProvider`.
+ *
+ * Use this hook when you need more than one value from the context at once.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { ait, locale, translationProgress, modelDownloadProgress } = useAITranslation();
+ *
+ *   return <span>{locale}</span>;
+ * }
+ * ```
+ *
+ * @throws if called outside of an `AITranslationProvider`.
+ */
+declare function useAITranslation(): AITranslationContextValue;
+
 interface AITranslationProviderProps {
     children: ReactNode;
     locale: string;
@@ -123,4 +176,4 @@ declare global {
     var _BACKEND_AI_TRANSLATION_IN_PROGRESS_: boolean;
 }
 
-export { AITranslateText, type AITranslateTextProps, AITranslationProvider, AI_TRANSLATION_FEATURE_FLAG_KEY, type TranslatedIconProps, type UseConfigOptions, getAITranslationLDId, useConfig };
+export { AITranslateText, type AITranslateTextProps, AITranslationProvider, AI_TRANSLATION_FEATURE_FLAG_KEY, type TranslatedIconProps, type UseConfigOptions, getAITranslationLDId, useAITranslation, useConfig };

package/dist/modern/index.d.ts

@@ -2,6 +2,20 @@ import * as _tanstack_react_query from '@tanstack/react-query';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode } from 'react';
 
+interface TranslationProgress {
+    /**
+     * Progress percentage (0-100)
+     */
+    progress: number;
+    /**
+     * Current number of strings translated
+     */
+    current: number;
+    /**
+     * Total number of strings to translate
+     */
+    total: number;
+}
 interface TranslationQueueEntry {
     originalText: string;
     isTranslated: boolean;
@@ -11,6 +25,26 @@ interface TranslationQueueEntry {
     tool: string;
     translationStrategy: 'frontend_translations' | 'backend_translations';
 }
+interface ModelDownloadProgress {
+    /** Bytes already downloaded */
+    loaded: number;
+    /** Total bytes to download */
+    total: number;
+    /** Download percentage (0-100) */
+    progress: number;
+    /** True once the model has finished downloading */
+    isComplete: boolean;
+}
+interface AITranslationContextValue {
+    ait: (text: string) => Promise<string>;
+    locale: string;
+    renderVersion?: number;
+    /** Batch-translation progress; `null` while the queue is idle. */
+    translationProgress: TranslationProgress | null;
+    /** Chrome AI model download progress; `null` until a download begins. */
+    modelDownloadProgress: ModelDownloadProgress | null;
+    tool: string;
+}
 
 interface ConfigurationResponse {
     [key: string]: ToolConfig;
@@ -63,6 +97,25 @@ interface UseConfigOptions {
  */
 declare function useConfig(toolName: string, options?: UseConfigOptions): _tanstack_react_query.UseQueryResult<ConfigurationResponse | null, unknown>;
 
+/**
+ * Returns the full AI-translation context value provided by the nearest
+ * `AITranslationProvider`.
+ *
+ * Use this hook when you need more than one value from the context at once.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { ait, locale, translationProgress, modelDownloadProgress } = useAITranslation();
+ *
+ *   return <span>{locale}</span>;
+ * }
+ * ```
+ *
+ * @throws if called outside of an `AITranslationProvider`.
+ */
+declare function useAITranslation(): AITranslationContextValue;
+
 interface AITranslationProviderProps {
     children: ReactNode;
     locale: string;
@@ -123,4 +176,4 @@ declare global {
     var _BACKEND_AI_TRANSLATION_IN_PROGRESS_: boolean;
 }
 
-export { AITranslateText, type AITranslateTextProps, AITranslationProvider, AI_TRANSLATION_FEATURE_FLAG_KEY, type TranslatedIconProps, type UseConfigOptions, getAITranslationLDId, useConfig };
+export { AITranslateText, type AITranslateTextProps, AITranslationProvider, AI_TRANSLATION_FEATURE_FLAG_KEY, type TranslatedIconProps, type UseConfigOptions, getAITranslationLDId, useAITranslation, useConfig };

package/dist/modern/index.js

@@ -24,6 +24,7 @@ __export(index_exports, {
   AITranslationProvider: () => AITranslationProvider,
   AI_TRANSLATION_FEATURE_FLAG_KEY: () => AI_TRANSLATION_FEATURE_FLAG_KEY,
   getAITranslationLDId: () => getAITranslationLDId,
+  useAITranslation: () => useAITranslation,
   useConfig: () => useConfig
 });
 module.exports = __toCommonJS(index_exports);
@@ -208,6 +209,9 @@ function useConfig(toolName, options = {}) {
   });
 }
 
+// src/hooks/useAITranslation.ts
+var import_react2 = require("react");
+
 // src/Provider.tsx
 var import_react = require("react");
 
@@ -607,6 +611,7 @@ var import_web_sdk_events = require("@procore/web-sdk-events");
 var TRANSLATION_COMPLETE_EVENT_NAME = "ai-translation-completed";
 var RERENDER_EVENT_NAME = "ai-translations-component-rerender";
 var TRANSLATION_PROGRESS_EVENT_NAME = "ai-translations-progress";
+var MODEL_DOWNLOAD_PROGRESS_EVENT_NAME = "ai-translations-model-download-progress";
 
 // src/utils/eventHandler.ts
 var EventHandler = class {
@@ -666,6 +671,31 @@ var EventHandler = class {
       )
     );
   }
+  /**
+   * Publishes a Chrome AI language-model download-progress event.
+   *
+   * Not tool-scoped — a Chrome language model is shared across the entire
+   * browser session, so all Provider instances receive it.
+   */
+  publishModelDownloadProgressEvent(loaded, total, progress) {
+    this.aiTranslationEvents.publish(MODEL_DOWNLOAD_PROGRESS_EVENT_NAME, {
+      loaded,
+      total,
+      progress,
+      isComplete: loaded === total
+    });
+  }
+  subscribeToModelDownloadProgressEvent(callback) {
+    return this.aiTranslationEvents.subscribe(
+      MODEL_DOWNLOAD_PROGRESS_EVENT_NAME,
+      (detail) => callback({
+        loaded: detail.data?.loaded ?? 0,
+        total: detail.data?.total ?? 0,
+        progress: detail.data?.progress ?? 0,
+        isComplete: detail.data?.isComplete ?? false
+      })
+    );
+  }
   withEventName(eventName) {
     return eventName + ":" + this.toolName;
   }
@@ -955,6 +985,13 @@ var ChromeLanguageDetector = class _ChromeLanguageDetector {
 };
 
 // src/translators/frontend_translators/chrome/Translator.ts
+var _modelDownloadEventHandler = null;
+var getModelDownloadEventHandler = () => {
+  if (!_modelDownloadEventHandler) {
+    _modelDownloadEventHandler = new EventHandler("__chrome_model__");
+  }
+  return _modelDownloadEventHandler;
+};
 var ChromeTranslator = class _ChromeTranslator {
   translator;
   constructor(translator) {
@@ -995,7 +1032,12 @@ var ChromeTranslator = class _ChromeTranslator {
           "downloadprogress",
           (e) => {
             isDownloading = true;
-            console.log(`Progress: ${Math.round(e.loaded / e.total * 100)}%`);
+            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();
             }
@@ -1274,6 +1316,7 @@ function AITranslationInnerProvider(props) {
     enableAIT = true
   } = props;
   const [translationProgress, setTranslationProgress] = (0, import_react.useState)(null);
+  const [modelDownloadProgress, setModelDownloadProgress] = (0, import_react.useState)(null);
   const [config2, setConfig] = (0, import_react.useState)(new Config());
   const translator = (0, import_react.useRef)(new Translator2(config2));
   const eventHandler = (0, import_react.useRef)(new EventHandler(tool));
@@ -1312,6 +1355,14 @@ function AITranslationInnerProvider(props) {
     );
     return () => unsubscribe();
   }, []);
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = eventHandler.current.subscribeToModelDownloadProgressEvent(
+      (progress) => {
+        setModelDownloadProgress(progress);
+      }
+    );
+    return () => unsubscribe();
+  }, []);
   (0, import_react.useEffect)(() => {
     if (isFetched && remoteConfig && remoteConfig[tool]) {
       setConfig((prevConfig) => {
@@ -1336,6 +1387,7 @@ function AITranslationInnerProvider(props) {
     locale,
     renderVersion: renderVersionManager.getVersion(),
     translationProgress,
+    modelDownloadProgress,
     tool
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AITranslationContext.Provider, { value: contextValue, children });
@@ -1345,11 +1397,22 @@ function AITranslationProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query2.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AITranslationInnerProvider, { ...props }) });
 }
 
+// src/hooks/useAITranslation.ts
+function useAITranslation() {
+  const ctx = (0, import_react2.useContext)(AITranslationContext);
+  if (!ctx) {
+    throw new Error(
+      "useAITranslation must be used inside an AITranslationProvider"
+    );
+  }
+  return ctx;
+}
+
 // src/components/AITranslateText.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/TranslatedIcon.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TranslatedIcon = ({
   width = 14,
@@ -1385,11 +1448,11 @@ var AITranslateText = ({
   showHighlight = false,
   translatedIconProps
 }) => {
-  const context = (0, import_react3.useContext)(AITranslationContext);
-  const [displayText, setDisplayText] = (0, import_react3.useState)(text ?? "");
-  const [showHighlightState, setShowHighlightState] = (0, import_react3.useState)(showHighlight);
-  const eventHandlerRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  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)(() => {
     if (!context) return;
     if (!eventHandlerRef.current) {
       eventHandlerRef.current = new EventHandler(context.tool);
@@ -1406,14 +1469,14 @@ var AITranslateText = ({
     );
     return () => unsubscribe();
   }, [context, text]);
-  const reset = (0, import_react3.useCallback)(
+  const reset = (0, import_react4.useCallback)(
     (displayValue = text) => {
       setDisplayText(displayValue);
       setShowHighlightState(false);
     },
     [text]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (text == null || text === "") {
       reset(text ?? "");
       return;
@@ -1463,5 +1526,6 @@ var getAITranslationLDId = (domain) => {
   AITranslationProvider,
   AI_TRANSLATION_FEATURE_FLAG_KEY,
   getAITranslationLDId,
+  useAITranslation,
   useConfig
 });

package/dist/modern/index.mjs

@@ -178,6 +178,9 @@ function useConfig(toolName, options = {}) {
   });
 }
 
+// src/hooks/useAITranslation.ts
+import { useContext } from "react";
+
 // src/Provider.tsx
 import {
   createContext,
@@ -583,6 +586,7 @@ import { SystemEvents } from "@procore/web-sdk-events";
 var TRANSLATION_COMPLETE_EVENT_NAME = "ai-translation-completed";
 var RERENDER_EVENT_NAME = "ai-translations-component-rerender";
 var TRANSLATION_PROGRESS_EVENT_NAME = "ai-translations-progress";
+var MODEL_DOWNLOAD_PROGRESS_EVENT_NAME = "ai-translations-model-download-progress";
 
 // src/utils/eventHandler.ts
 var EventHandler = class {
@@ -642,6 +646,31 @@ var EventHandler = class {
       )
     );
   }
+  /**
+   * Publishes a Chrome AI language-model download-progress event.
+   *
+   * Not tool-scoped — a Chrome language model is shared across the entire
+   * browser session, so all Provider instances receive it.
+   */
+  publishModelDownloadProgressEvent(loaded, total, progress) {
+    this.aiTranslationEvents.publish(MODEL_DOWNLOAD_PROGRESS_EVENT_NAME, {
+      loaded,
+      total,
+      progress,
+      isComplete: loaded === total
+    });
+  }
+  subscribeToModelDownloadProgressEvent(callback) {
+    return this.aiTranslationEvents.subscribe(
+      MODEL_DOWNLOAD_PROGRESS_EVENT_NAME,
+      (detail) => callback({
+        loaded: detail.data?.loaded ?? 0,
+        total: detail.data?.total ?? 0,
+        progress: detail.data?.progress ?? 0,
+        isComplete: detail.data?.isComplete ?? false
+      })
+    );
+  }
   withEventName(eventName) {
     return eventName + ":" + this.toolName;
   }
@@ -931,6 +960,13 @@ var ChromeLanguageDetector = class _ChromeLanguageDetector {
 };
 
 // src/translators/frontend_translators/chrome/Translator.ts
+var _modelDownloadEventHandler = null;
+var getModelDownloadEventHandler = () => {
+  if (!_modelDownloadEventHandler) {
+    _modelDownloadEventHandler = new EventHandler("__chrome_model__");
+  }
+  return _modelDownloadEventHandler;
+};
 var ChromeTranslator = class _ChromeTranslator {
   translator;
   constructor(translator) {
@@ -971,7 +1007,12 @@ var ChromeTranslator = class _ChromeTranslator {
           "downloadprogress",
           (e) => {
             isDownloading = true;
-            console.log(`Progress: ${Math.round(e.loaded / e.total * 100)}%`);
+            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();
             }
@@ -1250,6 +1291,7 @@ function AITranslationInnerProvider(props) {
     enableAIT = true
   } = props;
   const [translationProgress, setTranslationProgress] = useState(null);
+  const [modelDownloadProgress, setModelDownloadProgress] = useState(null);
   const [config2, setConfig] = useState(new Config());
   const translator = useRef(new Translator2(config2));
   const eventHandler = useRef(new EventHandler(tool));
@@ -1288,6 +1330,14 @@ function AITranslationInnerProvider(props) {
     );
     return () => unsubscribe();
   }, []);
+  useEffect(() => {
+    const unsubscribe = eventHandler.current.subscribeToModelDownloadProgressEvent(
+      (progress) => {
+        setModelDownloadProgress(progress);
+      }
+    );
+    return () => unsubscribe();
+  }, []);
   useEffect(() => {
     if (isFetched && remoteConfig && remoteConfig[tool]) {
       setConfig((prevConfig) => {
@@ -1312,6 +1362,7 @@ function AITranslationInnerProvider(props) {
     locale,
     renderVersion: renderVersionManager.getVersion(),
     translationProgress,
+    modelDownloadProgress,
     tool
   };
   return /* @__PURE__ */ jsx(AITranslationContext.Provider, { value: contextValue, children });
@@ -1321,11 +1372,22 @@ function AITranslationProvider(props) {
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(AITranslationInnerProvider, { ...props }) });
 }
 
+// src/hooks/useAITranslation.ts
+function useAITranslation() {
+  const ctx = useContext(AITranslationContext);
+  if (!ctx) {
+    throw new Error(
+      "useAITranslation must be used inside an AITranslationProvider"
+    );
+  }
+  return ctx;
+}
+
 // src/components/AITranslateText.tsx
 import {
   useState as useState2,
   useEffect as useEffect2,
-  useContext,
+  useContext as useContext2,
   useCallback as useCallback2,
   useRef as useRef2
 } from "react";
@@ -1367,7 +1429,7 @@ var AITranslateText = ({
   showHighlight = false,
   translatedIconProps
 }) => {
-  const context = useContext(AITranslationContext);
+  const context = useContext2(AITranslationContext);
   const [displayText, setDisplayText] = useState2(text ?? "");
   const [showHighlightState, setShowHighlightState] = useState2(showHighlight);
   const eventHandlerRef = useRef2(null);
@@ -1444,5 +1506,6 @@ export {
   AITranslationProvider,
   AI_TRANSLATION_FEATURE_FLAG_KEY,
   getAITranslationLDId,
+  useAITranslation,
   useConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/ai-translations",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "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",
@@ -49,6 +49,8 @@
     "cypress:run:component": "cypress run --component --browser chrome ",
     "cypress:run:headed": "cypress run --headed --browser chrome",
     "test:cypress": "yarn cypress:run",
+    "test:integration": "hammer test src/__integration__",
+    "cypress:run:integration": "cypress run --component --browser chrome --spec 'cypress/component/integration/**'",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -87,6 +89,7 @@
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-a11y": "^7.6.20",
     "@procore/storybook-addon": "^4.5.1",
-    "eslint-plugin-storybook": "^0.11.1"
+    "eslint-plugin-storybook": "^0.11.1",
+    "fake-indexeddb": "^6.0.0"
   }
 }