@procore/ai-translations 0.6.0 → 0.6.2

package/dist/modern/index.mjs

@@ -1401,6 +1401,7 @@ var aitFunction = async (text, translationRegistry, config2, tool) => {
 };
 
 // src/utils/browser.ts
+var supportedBrowsers = ["chrome", "arc", "opera"];
 function detectBrowser() {
   const ua = navigator.userAgent;
   if (ua.includes("Arc/")) return "arc";
@@ -1411,6 +1412,10 @@ function detectBrowser() {
   if (ua.includes("Chrome/")) return "chrome";
   return "unknown";
 }
+function isSupportedBrowser() {
+  const browser = detectBrowser();
+  return supportedBrowsers.includes(browser);
+}
 
 // src/Provider.tsx
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
@@ -1424,7 +1429,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);
@@ -1501,10 +1511,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 });
 }
@@ -1524,12 +1539,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";
 
@@ -1537,8 +1680,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"
 }) => {
@@ -1556,7 +1699,7 @@ var TranslatedIcon = ({
         "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: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 19.93C7.05 19.44 4 16.08 4 12C4 11.38 4.08 10.79 4.21 10.21L9 15V16C9 17.1 9.9 18 11 18V19.93ZM17.9 17.39C17.64 16.58 16.9 16 16 16H15V13C15 12.45 14.55 12 14 12H8V10H10C10.55 10 11 9.55 11 9V7H13C14.1 7 15 6.1 15 5V4.59C17.93 5.78 20 8.65 20 12C20 14.08 19.2 15.97 17.9 17.39Z"
         }
       )
     }
@@ -1571,7 +1714,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);
@@ -1594,7 +1737,7 @@ var AITranslateText = ({
     );
     return () => unsubscribe();
   }, [context, text, showHighlight]);
-  const reset = useCallback2(
+  const reset = useCallback3(
     (displayValue = text) => {
       setDisplayText(displayValue);
       setShowHighlightState(false);
@@ -1652,10 +1795,17 @@ var getAITranslationLDId = (domain) => {
   }
 };
 export {
+  ACTION,
   AITranslateText,
   AITranslationProvider,
   AI_TRANSLATION_FEATURE_FLAG_KEY,
+  BUTTON_TYPE,
+  buildAnalyticEvent,
+  buildEventKey,
+  buildObject,
   getAITranslationLDId,
+  isSupportedBrowser,
+  useAIAnalytics,
   useAITranslation,
   useConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/ai-translations",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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",