@procore/ai-translations 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.internal.md +257 -0
- package/README.md +158 -1
- package/dist/legacy/index.d.mts +103 -1
- package/dist/legacy/index.d.ts +103 -1
- package/dist/legacy/index.js +164 -14
- package/dist/legacy/index.mjs +153 -9
- package/dist/modern/index.d.mts +103 -1
- package/dist/modern/index.d.ts +103 -1
- package/dist/modern/index.js +164 -14
- package/dist/modern/index.mjs +153 -9
- package/package.json +1 -1
package/dist/legacy/index.js
CHANGED
|
@@ -22,10 +22,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
22
22
|
// src/index.ts
|
|
23
23
|
var index_exports = {};
|
|
24
24
|
__export(index_exports, {
|
|
25
|
+
ACTION: () => ACTION,
|
|
25
26
|
AITranslateText: () => AITranslateText,
|
|
26
27
|
AITranslationProvider: () => AITranslationProvider,
|
|
27
28
|
AI_TRANSLATION_FEATURE_FLAG_KEY: () => AI_TRANSLATION_FEATURE_FLAG_KEY,
|
|
29
|
+
BUTTON_TYPE: () => BUTTON_TYPE,
|
|
30
|
+
buildAnalyticEvent: () => buildAnalyticEvent,
|
|
31
|
+
buildEventKey: () => buildEventKey,
|
|
32
|
+
buildObject: () => buildObject,
|
|
28
33
|
getAITranslationLDId: () => getAITranslationLDId,
|
|
34
|
+
useAIAnalytics: () => useAIAnalytics,
|
|
29
35
|
useAITranslation: () => useAITranslation,
|
|
30
36
|
useConfig: () => useConfig
|
|
31
37
|
});
|
|
@@ -1472,7 +1478,12 @@ function AITranslationInnerProvider(props) {
|
|
|
1472
1478
|
companyId,
|
|
1473
1479
|
userId,
|
|
1474
1480
|
projectId,
|
|
1475
|
-
enableAIT = true
|
|
1481
|
+
enableAIT = true,
|
|
1482
|
+
companyLocale,
|
|
1483
|
+
projectLocale,
|
|
1484
|
+
onTrackAnalyticsEvent,
|
|
1485
|
+
page,
|
|
1486
|
+
scope
|
|
1476
1487
|
} = props;
|
|
1477
1488
|
const [translationProgress, setTranslationProgress] = (0, import_react.useState)(null);
|
|
1478
1489
|
const [modelDownloadProgress, setModelDownloadProgress] = (0, import_react.useState)(null);
|
|
@@ -1549,10 +1560,15 @@ function AITranslationInnerProvider(props) {
|
|
|
1549
1560
|
const contextValue = {
|
|
1550
1561
|
ait,
|
|
1551
1562
|
locale,
|
|
1563
|
+
companyLocale,
|
|
1564
|
+
projectLocale,
|
|
1552
1565
|
renderVersion: renderVersionManager.getVersion(),
|
|
1553
1566
|
translationProgress,
|
|
1554
1567
|
modelDownloadProgress,
|
|
1555
|
-
tool
|
|
1568
|
+
tool,
|
|
1569
|
+
onTrackAnalyticsEvent,
|
|
1570
|
+
page,
|
|
1571
|
+
scope
|
|
1556
1572
|
};
|
|
1557
1573
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AITranslationContext.Provider, { value: contextValue, children });
|
|
1558
1574
|
}
|
|
@@ -1572,15 +1588,143 @@ function useAITranslation() {
|
|
|
1572
1588
|
return ctx;
|
|
1573
1589
|
}
|
|
1574
1590
|
|
|
1591
|
+
// src/hooks/useAIAnalytics.ts
|
|
1592
|
+
var import_react3 = require("react");
|
|
1593
|
+
|
|
1594
|
+
// src/analytics/events.ts
|
|
1595
|
+
var BUTTON_TYPE = {
|
|
1596
|
+
TRANSLATE: "translate",
|
|
1597
|
+
HIGHLIGHT: "highlight"
|
|
1598
|
+
};
|
|
1599
|
+
var ACTION = {
|
|
1600
|
+
CLICKED: "clicked"
|
|
1601
|
+
};
|
|
1602
|
+
function buildObject(pageContext, buttonType) {
|
|
1603
|
+
return `${pageContext}_${buttonType}_button`;
|
|
1604
|
+
}
|
|
1605
|
+
function buildEventKey(parts) {
|
|
1606
|
+
const { scope, tool, object, action } = parts;
|
|
1607
|
+
return `ux.web.feature.${scope}.${tool}.${object}.${action}`;
|
|
1608
|
+
}
|
|
1609
|
+
function buildAnalyticEvent(params) {
|
|
1610
|
+
const {
|
|
1611
|
+
scope,
|
|
1612
|
+
tool,
|
|
1613
|
+
pageContext,
|
|
1614
|
+
buttonType,
|
|
1615
|
+
baseProperties,
|
|
1616
|
+
action,
|
|
1617
|
+
additionalProperties
|
|
1618
|
+
} = params;
|
|
1619
|
+
const resolvedAction = action ?? ACTION.CLICKED;
|
|
1620
|
+
const object = buildObject(pageContext, buttonType);
|
|
1621
|
+
const key = buildEventKey({
|
|
1622
|
+
scope,
|
|
1623
|
+
tool,
|
|
1624
|
+
object,
|
|
1625
|
+
action: resolvedAction
|
|
1626
|
+
});
|
|
1627
|
+
const properties = {
|
|
1628
|
+
...baseProperties,
|
|
1629
|
+
...additionalProperties
|
|
1630
|
+
};
|
|
1631
|
+
return { key, properties };
|
|
1632
|
+
}
|
|
1633
|
+
|
|
1634
|
+
// src/hooks/useAIAnalytics.ts
|
|
1635
|
+
function useAIAnalytics() {
|
|
1636
|
+
const ctx = (0, import_react3.useContext)(AITranslationContext);
|
|
1637
|
+
if (!ctx) {
|
|
1638
|
+
throw new Error(
|
|
1639
|
+
"useAIAnalytics must be used inside an AITranslationProvider"
|
|
1640
|
+
);
|
|
1641
|
+
}
|
|
1642
|
+
const {
|
|
1643
|
+
locale,
|
|
1644
|
+
companyLocale,
|
|
1645
|
+
projectLocale,
|
|
1646
|
+
tool,
|
|
1647
|
+
page,
|
|
1648
|
+
scope,
|
|
1649
|
+
onTrackAnalyticsEvent
|
|
1650
|
+
} = ctx;
|
|
1651
|
+
const isTrackingEnabled = Boolean(onTrackAnalyticsEvent);
|
|
1652
|
+
const buildBaseProperties = (0, import_react3.useCallback)(() => {
|
|
1653
|
+
const props = {
|
|
1654
|
+
user_locale: locale,
|
|
1655
|
+
tool,
|
|
1656
|
+
page: page ?? ""
|
|
1657
|
+
};
|
|
1658
|
+
if (companyLocale) props.company_locale = companyLocale;
|
|
1659
|
+
if (projectLocale) props.project_locale = projectLocale;
|
|
1660
|
+
return props;
|
|
1661
|
+
}, [locale, tool, page, companyLocale, projectLocale]);
|
|
1662
|
+
const trackTranslateButtonClicked = (0, import_react3.useCallback)(
|
|
1663
|
+
(additionalProperties) => {
|
|
1664
|
+
if (!onTrackAnalyticsEvent || !page || !scope) return;
|
|
1665
|
+
onTrackAnalyticsEvent(
|
|
1666
|
+
buildAnalyticEvent({
|
|
1667
|
+
scope,
|
|
1668
|
+
tool,
|
|
1669
|
+
pageContext: page,
|
|
1670
|
+
buttonType: BUTTON_TYPE.TRANSLATE,
|
|
1671
|
+
baseProperties: buildBaseProperties(),
|
|
1672
|
+
additionalProperties
|
|
1673
|
+
})
|
|
1674
|
+
);
|
|
1675
|
+
},
|
|
1676
|
+
[onTrackAnalyticsEvent, tool, page, scope, buildBaseProperties]
|
|
1677
|
+
);
|
|
1678
|
+
const trackHighlightButtonClicked = (0, import_react3.useCallback)(
|
|
1679
|
+
(additionalProperties) => {
|
|
1680
|
+
if (!onTrackAnalyticsEvent || !page || !scope) return;
|
|
1681
|
+
onTrackAnalyticsEvent(
|
|
1682
|
+
buildAnalyticEvent({
|
|
1683
|
+
scope,
|
|
1684
|
+
tool,
|
|
1685
|
+
pageContext: page,
|
|
1686
|
+
buttonType: BUTTON_TYPE.HIGHLIGHT,
|
|
1687
|
+
baseProperties: buildBaseProperties(),
|
|
1688
|
+
additionalProperties
|
|
1689
|
+
})
|
|
1690
|
+
);
|
|
1691
|
+
},
|
|
1692
|
+
[onTrackAnalyticsEvent, tool, page, scope, buildBaseProperties]
|
|
1693
|
+
);
|
|
1694
|
+
const trackCustomEvent = (0, import_react3.useCallback)(
|
|
1695
|
+
(buttonType, action, additionalProperties) => {
|
|
1696
|
+
if (!onTrackAnalyticsEvent || !page || !scope) return;
|
|
1697
|
+
onTrackAnalyticsEvent(
|
|
1698
|
+
buildAnalyticEvent({
|
|
1699
|
+
scope,
|
|
1700
|
+
tool,
|
|
1701
|
+
pageContext: page,
|
|
1702
|
+
buttonType,
|
|
1703
|
+
baseProperties: buildBaseProperties(),
|
|
1704
|
+
action,
|
|
1705
|
+
additionalProperties
|
|
1706
|
+
})
|
|
1707
|
+
);
|
|
1708
|
+
},
|
|
1709
|
+
[onTrackAnalyticsEvent, tool, page, scope, buildBaseProperties]
|
|
1710
|
+
);
|
|
1711
|
+
return {
|
|
1712
|
+
trackTranslateButtonClicked,
|
|
1713
|
+
trackHighlightButtonClicked,
|
|
1714
|
+
trackCustomEvent,
|
|
1715
|
+
isTrackingEnabled
|
|
1716
|
+
};
|
|
1717
|
+
}
|
|
1718
|
+
|
|
1575
1719
|
// src/components/AITranslateText.tsx
|
|
1576
|
-
var
|
|
1720
|
+
var import_react5 = require("react");
|
|
1577
1721
|
|
|
1578
1722
|
// src/components/TranslatedIcon.tsx
|
|
1579
|
-
var
|
|
1723
|
+
var import_react4 = require("react");
|
|
1580
1724
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
1581
1725
|
var TranslatedIcon = ({
|
|
1582
|
-
width =
|
|
1583
|
-
height =
|
|
1726
|
+
width = 24,
|
|
1727
|
+
height = 24,
|
|
1584
1728
|
className,
|
|
1585
1729
|
color = "#000000"
|
|
1586
1730
|
}) => {
|
|
@@ -1598,7 +1742,7 @@ var TranslatedIcon = ({
|
|
|
1598
1742
|
"path",
|
|
1599
1743
|
{
|
|
1600
1744
|
fill: color,
|
|
1601
|
-
d: "
|
|
1745
|
+
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"
|
|
1602
1746
|
}
|
|
1603
1747
|
)
|
|
1604
1748
|
}
|
|
@@ -1613,11 +1757,11 @@ var AITranslateText = ({
|
|
|
1613
1757
|
showHighlight = false,
|
|
1614
1758
|
translatedIconProps
|
|
1615
1759
|
}) => {
|
|
1616
|
-
const context = (0,
|
|
1617
|
-
const [displayText, setDisplayText] = (0,
|
|
1618
|
-
const [showHighlightState, setShowHighlightState] = (0,
|
|
1619
|
-
const eventHandlerRef = (0,
|
|
1620
|
-
(0,
|
|
1760
|
+
const context = (0, import_react5.useContext)(AITranslationContext);
|
|
1761
|
+
const [displayText, setDisplayText] = (0, import_react5.useState)(text ?? "");
|
|
1762
|
+
const [showHighlightState, setShowHighlightState] = (0, import_react5.useState)(showHighlight);
|
|
1763
|
+
const eventHandlerRef = (0, import_react5.useRef)(null);
|
|
1764
|
+
(0, import_react5.useEffect)(() => {
|
|
1621
1765
|
if (!context) return;
|
|
1622
1766
|
if (!eventHandlerRef.current) {
|
|
1623
1767
|
eventHandlerRef.current = new EventHandler(context.tool);
|
|
@@ -1636,14 +1780,14 @@ var AITranslateText = ({
|
|
|
1636
1780
|
);
|
|
1637
1781
|
return () => unsubscribe();
|
|
1638
1782
|
}, [context, text, showHighlight]);
|
|
1639
|
-
const reset = (0,
|
|
1783
|
+
const reset = (0, import_react5.useCallback)(
|
|
1640
1784
|
(displayValue = text) => {
|
|
1641
1785
|
setDisplayText(displayValue);
|
|
1642
1786
|
setShowHighlightState(false);
|
|
1643
1787
|
},
|
|
1644
1788
|
[text]
|
|
1645
1789
|
);
|
|
1646
|
-
(0,
|
|
1790
|
+
(0, import_react5.useEffect)(() => {
|
|
1647
1791
|
if (text == null || text === "") {
|
|
1648
1792
|
reset(text ?? "");
|
|
1649
1793
|
return;
|
|
@@ -1695,10 +1839,16 @@ var getAITranslationLDId = (domain) => {
|
|
|
1695
1839
|
};
|
|
1696
1840
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1697
1841
|
0 && (module.exports = {
|
|
1842
|
+
ACTION,
|
|
1698
1843
|
AITranslateText,
|
|
1699
1844
|
AITranslationProvider,
|
|
1700
1845
|
AI_TRANSLATION_FEATURE_FLAG_KEY,
|
|
1846
|
+
BUTTON_TYPE,
|
|
1847
|
+
buildAnalyticEvent,
|
|
1848
|
+
buildEventKey,
|
|
1849
|
+
buildObject,
|
|
1701
1850
|
getAITranslationLDId,
|
|
1851
|
+
useAIAnalytics,
|
|
1702
1852
|
useAITranslation,
|
|
1703
1853
|
useConfig
|
|
1704
1854
|
});
|
package/dist/legacy/index.mjs
CHANGED
|
@@ -1449,7 +1449,12 @@ function AITranslationInnerProvider(props) {
|
|
|
1449
1449
|
companyId,
|
|
1450
1450
|
userId,
|
|
1451
1451
|
projectId,
|
|
1452
|
-
enableAIT = true
|
|
1452
|
+
enableAIT = true,
|
|
1453
|
+
companyLocale,
|
|
1454
|
+
projectLocale,
|
|
1455
|
+
onTrackAnalyticsEvent,
|
|
1456
|
+
page,
|
|
1457
|
+
scope
|
|
1453
1458
|
} = props;
|
|
1454
1459
|
const [translationProgress, setTranslationProgress] = useState(null);
|
|
1455
1460
|
const [modelDownloadProgress, setModelDownloadProgress] = useState(null);
|
|
@@ -1526,10 +1531,15 @@ function AITranslationInnerProvider(props) {
|
|
|
1526
1531
|
const contextValue = {
|
|
1527
1532
|
ait,
|
|
1528
1533
|
locale,
|
|
1534
|
+
companyLocale,
|
|
1535
|
+
projectLocale,
|
|
1529
1536
|
renderVersion: renderVersionManager.getVersion(),
|
|
1530
1537
|
translationProgress,
|
|
1531
1538
|
modelDownloadProgress,
|
|
1532
|
-
tool
|
|
1539
|
+
tool,
|
|
1540
|
+
onTrackAnalyticsEvent,
|
|
1541
|
+
page,
|
|
1542
|
+
scope
|
|
1533
1543
|
};
|
|
1534
1544
|
return /* @__PURE__ */ jsx(AITranslationContext.Provider, { value: contextValue, children });
|
|
1535
1545
|
}
|
|
@@ -1549,12 +1559,140 @@ function useAITranslation() {
|
|
|
1549
1559
|
return ctx;
|
|
1550
1560
|
}
|
|
1551
1561
|
|
|
1562
|
+
// src/hooks/useAIAnalytics.ts
|
|
1563
|
+
import { useContext as useContext2, useCallback as useCallback2 } from "react";
|
|
1564
|
+
|
|
1565
|
+
// src/analytics/events.ts
|
|
1566
|
+
var BUTTON_TYPE = {
|
|
1567
|
+
TRANSLATE: "translate",
|
|
1568
|
+
HIGHLIGHT: "highlight"
|
|
1569
|
+
};
|
|
1570
|
+
var ACTION = {
|
|
1571
|
+
CLICKED: "clicked"
|
|
1572
|
+
};
|
|
1573
|
+
function buildObject(pageContext, buttonType) {
|
|
1574
|
+
return `${pageContext}_${buttonType}_button`;
|
|
1575
|
+
}
|
|
1576
|
+
function buildEventKey(parts) {
|
|
1577
|
+
const { scope, tool, object, action } = parts;
|
|
1578
|
+
return `ux.web.feature.${scope}.${tool}.${object}.${action}`;
|
|
1579
|
+
}
|
|
1580
|
+
function buildAnalyticEvent(params) {
|
|
1581
|
+
const {
|
|
1582
|
+
scope,
|
|
1583
|
+
tool,
|
|
1584
|
+
pageContext,
|
|
1585
|
+
buttonType,
|
|
1586
|
+
baseProperties,
|
|
1587
|
+
action,
|
|
1588
|
+
additionalProperties
|
|
1589
|
+
} = params;
|
|
1590
|
+
const resolvedAction = action ?? ACTION.CLICKED;
|
|
1591
|
+
const object = buildObject(pageContext, buttonType);
|
|
1592
|
+
const key = buildEventKey({
|
|
1593
|
+
scope,
|
|
1594
|
+
tool,
|
|
1595
|
+
object,
|
|
1596
|
+
action: resolvedAction
|
|
1597
|
+
});
|
|
1598
|
+
const properties = {
|
|
1599
|
+
...baseProperties,
|
|
1600
|
+
...additionalProperties
|
|
1601
|
+
};
|
|
1602
|
+
return { key, properties };
|
|
1603
|
+
}
|
|
1604
|
+
|
|
1605
|
+
// src/hooks/useAIAnalytics.ts
|
|
1606
|
+
function useAIAnalytics() {
|
|
1607
|
+
const ctx = useContext2(AITranslationContext);
|
|
1608
|
+
if (!ctx) {
|
|
1609
|
+
throw new Error(
|
|
1610
|
+
"useAIAnalytics must be used inside an AITranslationProvider"
|
|
1611
|
+
);
|
|
1612
|
+
}
|
|
1613
|
+
const {
|
|
1614
|
+
locale,
|
|
1615
|
+
companyLocale,
|
|
1616
|
+
projectLocale,
|
|
1617
|
+
tool,
|
|
1618
|
+
page,
|
|
1619
|
+
scope,
|
|
1620
|
+
onTrackAnalyticsEvent
|
|
1621
|
+
} = ctx;
|
|
1622
|
+
const isTrackingEnabled = Boolean(onTrackAnalyticsEvent);
|
|
1623
|
+
const buildBaseProperties = useCallback2(() => {
|
|
1624
|
+
const props = {
|
|
1625
|
+
user_locale: locale,
|
|
1626
|
+
tool,
|
|
1627
|
+
page: page ?? ""
|
|
1628
|
+
};
|
|
1629
|
+
if (companyLocale) props.company_locale = companyLocale;
|
|
1630
|
+
if (projectLocale) props.project_locale = projectLocale;
|
|
1631
|
+
return props;
|
|
1632
|
+
}, [locale, tool, page, companyLocale, projectLocale]);
|
|
1633
|
+
const trackTranslateButtonClicked = useCallback2(
|
|
1634
|
+
(additionalProperties) => {
|
|
1635
|
+
if (!onTrackAnalyticsEvent || !page || !scope) return;
|
|
1636
|
+
onTrackAnalyticsEvent(
|
|
1637
|
+
buildAnalyticEvent({
|
|
1638
|
+
scope,
|
|
1639
|
+
tool,
|
|
1640
|
+
pageContext: page,
|
|
1641
|
+
buttonType: BUTTON_TYPE.TRANSLATE,
|
|
1642
|
+
baseProperties: buildBaseProperties(),
|
|
1643
|
+
additionalProperties
|
|
1644
|
+
})
|
|
1645
|
+
);
|
|
1646
|
+
},
|
|
1647
|
+
[onTrackAnalyticsEvent, tool, page, scope, buildBaseProperties]
|
|
1648
|
+
);
|
|
1649
|
+
const trackHighlightButtonClicked = useCallback2(
|
|
1650
|
+
(additionalProperties) => {
|
|
1651
|
+
if (!onTrackAnalyticsEvent || !page || !scope) return;
|
|
1652
|
+
onTrackAnalyticsEvent(
|
|
1653
|
+
buildAnalyticEvent({
|
|
1654
|
+
scope,
|
|
1655
|
+
tool,
|
|
1656
|
+
pageContext: page,
|
|
1657
|
+
buttonType: BUTTON_TYPE.HIGHLIGHT,
|
|
1658
|
+
baseProperties: buildBaseProperties(),
|
|
1659
|
+
additionalProperties
|
|
1660
|
+
})
|
|
1661
|
+
);
|
|
1662
|
+
},
|
|
1663
|
+
[onTrackAnalyticsEvent, tool, page, scope, buildBaseProperties]
|
|
1664
|
+
);
|
|
1665
|
+
const trackCustomEvent = useCallback2(
|
|
1666
|
+
(buttonType, action, additionalProperties) => {
|
|
1667
|
+
if (!onTrackAnalyticsEvent || !page || !scope) return;
|
|
1668
|
+
onTrackAnalyticsEvent(
|
|
1669
|
+
buildAnalyticEvent({
|
|
1670
|
+
scope,
|
|
1671
|
+
tool,
|
|
1672
|
+
pageContext: page,
|
|
1673
|
+
buttonType,
|
|
1674
|
+
baseProperties: buildBaseProperties(),
|
|
1675
|
+
action,
|
|
1676
|
+
additionalProperties
|
|
1677
|
+
})
|
|
1678
|
+
);
|
|
1679
|
+
},
|
|
1680
|
+
[onTrackAnalyticsEvent, tool, page, scope, buildBaseProperties]
|
|
1681
|
+
);
|
|
1682
|
+
return {
|
|
1683
|
+
trackTranslateButtonClicked,
|
|
1684
|
+
trackHighlightButtonClicked,
|
|
1685
|
+
trackCustomEvent,
|
|
1686
|
+
isTrackingEnabled
|
|
1687
|
+
};
|
|
1688
|
+
}
|
|
1689
|
+
|
|
1552
1690
|
// src/components/AITranslateText.tsx
|
|
1553
1691
|
import {
|
|
1554
1692
|
useState as useState2,
|
|
1555
1693
|
useEffect as useEffect2,
|
|
1556
|
-
useContext as
|
|
1557
|
-
useCallback as
|
|
1694
|
+
useContext as useContext3,
|
|
1695
|
+
useCallback as useCallback3,
|
|
1558
1696
|
useRef as useRef2
|
|
1559
1697
|
} from "react";
|
|
1560
1698
|
|
|
@@ -1562,8 +1700,8 @@ import {
|
|
|
1562
1700
|
import "react";
|
|
1563
1701
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
1564
1702
|
var TranslatedIcon = ({
|
|
1565
|
-
width =
|
|
1566
|
-
height =
|
|
1703
|
+
width = 24,
|
|
1704
|
+
height = 24,
|
|
1567
1705
|
className,
|
|
1568
1706
|
color = "#000000"
|
|
1569
1707
|
}) => {
|
|
@@ -1581,7 +1719,7 @@ var TranslatedIcon = ({
|
|
|
1581
1719
|
"path",
|
|
1582
1720
|
{
|
|
1583
1721
|
fill: color,
|
|
1584
|
-
d: "
|
|
1722
|
+
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"
|
|
1585
1723
|
}
|
|
1586
1724
|
)
|
|
1587
1725
|
}
|
|
@@ -1596,7 +1734,7 @@ var AITranslateText = ({
|
|
|
1596
1734
|
showHighlight = false,
|
|
1597
1735
|
translatedIconProps
|
|
1598
1736
|
}) => {
|
|
1599
|
-
const context =
|
|
1737
|
+
const context = useContext3(AITranslationContext);
|
|
1600
1738
|
const [displayText, setDisplayText] = useState2(text ?? "");
|
|
1601
1739
|
const [showHighlightState, setShowHighlightState] = useState2(showHighlight);
|
|
1602
1740
|
const eventHandlerRef = useRef2(null);
|
|
@@ -1619,7 +1757,7 @@ var AITranslateText = ({
|
|
|
1619
1757
|
);
|
|
1620
1758
|
return () => unsubscribe();
|
|
1621
1759
|
}, [context, text, showHighlight]);
|
|
1622
|
-
const reset =
|
|
1760
|
+
const reset = useCallback3(
|
|
1623
1761
|
(displayValue = text) => {
|
|
1624
1762
|
setDisplayText(displayValue);
|
|
1625
1763
|
setShowHighlightState(false);
|
|
@@ -1677,10 +1815,16 @@ var getAITranslationLDId = (domain) => {
|
|
|
1677
1815
|
}
|
|
1678
1816
|
};
|
|
1679
1817
|
export {
|
|
1818
|
+
ACTION,
|
|
1680
1819
|
AITranslateText,
|
|
1681
1820
|
AITranslationProvider,
|
|
1682
1821
|
AI_TRANSLATION_FEATURE_FLAG_KEY,
|
|
1822
|
+
BUTTON_TYPE,
|
|
1823
|
+
buildAnalyticEvent,
|
|
1824
|
+
buildEventKey,
|
|
1825
|
+
buildObject,
|
|
1683
1826
|
getAITranslationLDId,
|
|
1827
|
+
useAIAnalytics,
|
|
1684
1828
|
useAITranslation,
|
|
1685
1829
|
useConfig
|
|
1686
1830
|
};
|
package/dist/modern/index.d.mts
CHANGED
|
@@ -2,6 +2,35 @@ import * as _tanstack_react_query from '@tanstack/react-query';
|
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
import React, { ReactNode } from 'react';
|
|
4
4
|
|
|
5
|
+
/** Shape of an analytic event passed to the MFE's `onTrackAnalyticsEvent` callback. */
|
|
6
|
+
interface AnalyticEvent {
|
|
7
|
+
key: string;
|
|
8
|
+
properties: Record<string, unknown>;
|
|
9
|
+
}
|
|
10
|
+
/** Function provided by the MFE that sends the event to the analytics destination. */
|
|
11
|
+
type AIAnalyticsTracker = (event: AnalyticEvent) => void;
|
|
12
|
+
/** Feature scope: `'project'` for project-level tools, `'company'` for company-level tools. */
|
|
13
|
+
type Scope = 'project' | 'company';
|
|
14
|
+
/**
|
|
15
|
+
* Parts needed to build an event key following the pattern:
|
|
16
|
+
* `ux.web.feature.{scope}.{tool}.{object}.{action}`
|
|
17
|
+
*/
|
|
18
|
+
interface EventKeyParts {
|
|
19
|
+
scope: Scope;
|
|
20
|
+
tool: string;
|
|
21
|
+
object: string;
|
|
22
|
+
action: string;
|
|
23
|
+
}
|
|
24
|
+
/** Standard properties included in every AI analytics event. */
|
|
25
|
+
interface AIAnalyticsEventProperties {
|
|
26
|
+
user_locale: string;
|
|
27
|
+
project_locale?: string;
|
|
28
|
+
company_locale?: string;
|
|
29
|
+
tool: string;
|
|
30
|
+
page: string;
|
|
31
|
+
[key: string]: unknown;
|
|
32
|
+
}
|
|
33
|
+
|
|
5
34
|
interface TranslationProgress {
|
|
6
35
|
/**
|
|
7
36
|
* Progress percentage (0-100)
|
|
@@ -39,12 +68,22 @@ interface ModelDownloadProgress {
|
|
|
39
68
|
interface AITranslationContextValue {
|
|
40
69
|
ait: (text: string) => Promise<string>;
|
|
41
70
|
locale: string;
|
|
71
|
+
/** Company-level locale from environment metadata (e.g. `"de-DE"`). */
|
|
72
|
+
companyLocale?: string;
|
|
73
|
+
/** Project-level locale from environment metadata (e.g. `"fr-CA"`). */
|
|
74
|
+
projectLocale?: string;
|
|
42
75
|
renderVersion?: number;
|
|
43
76
|
/** Batch-translation progress; `null` while the queue is idle. */
|
|
44
77
|
translationProgress: TranslationProgress | null;
|
|
45
78
|
/** Chrome AI model download progress; `null` until a download begins. */
|
|
46
79
|
modelDownloadProgress: ModelDownloadProgress | null;
|
|
47
80
|
tool: string;
|
|
81
|
+
/** Called by `useAIAnalytics` with a fully assembled event. The MFE is responsible for sending it. */
|
|
82
|
+
onTrackAnalyticsEvent?: AIAnalyticsTracker;
|
|
83
|
+
/** Page context used to build the event key object segment (e.g. `'view'`, `'list_column_description'`). */
|
|
84
|
+
page?: string;
|
|
85
|
+
/** Feature scope: `'project'` or `'company'`. */
|
|
86
|
+
scope?: Scope;
|
|
48
87
|
}
|
|
49
88
|
|
|
50
89
|
interface ConfigurationResponse {
|
|
@@ -117,6 +156,59 @@ declare function useConfig(toolName: string, options?: UseConfigOptions): _tanst
|
|
|
117
156
|
*/
|
|
118
157
|
declare function useAITranslation(): AITranslationContextValue;
|
|
119
158
|
|
|
159
|
+
/** Button type identifiers for the event key `object` segment. */
|
|
160
|
+
declare const BUTTON_TYPE: {
|
|
161
|
+
readonly TRANSLATE: "translate";
|
|
162
|
+
readonly HIGHLIGHT: "highlight";
|
|
163
|
+
};
|
|
164
|
+
type ButtonType = (typeof BUTTON_TYPE)[keyof typeof BUTTON_TYPE];
|
|
165
|
+
/** Action identifiers for the event key `action` segment. */
|
|
166
|
+
declare const ACTION: {
|
|
167
|
+
readonly CLICKED: "clicked";
|
|
168
|
+
};
|
|
169
|
+
type Action = (typeof ACTION)[keyof typeof ACTION];
|
|
170
|
+
/**
|
|
171
|
+
* Builds the `object` segment: `{pageContext}_{buttonType}_button`
|
|
172
|
+
* e.g. `buildObject('view', 'translate')` → `'view_translate_button'`
|
|
173
|
+
*/
|
|
174
|
+
declare function buildObject(pageContext: string, buttonType: ButtonType): string;
|
|
175
|
+
/**
|
|
176
|
+
* Builds a fully-qualified event key:
|
|
177
|
+
* `ux.web.feature.{scope}.{tool}.{object}.{action}`
|
|
178
|
+
*/
|
|
179
|
+
declare function buildEventKey(parts: EventKeyParts): string;
|
|
180
|
+
interface BuildAnalyticEventParams {
|
|
181
|
+
scope: Scope;
|
|
182
|
+
tool: string;
|
|
183
|
+
/** Prefix for the object segment, matches the Provider `page` prop (e.g. `'view'`). */
|
|
184
|
+
pageContext: string;
|
|
185
|
+
buttonType: ButtonType;
|
|
186
|
+
baseProperties: AIAnalyticsEventProperties;
|
|
187
|
+
/** Defaults to `'clicked'` if omitted. */
|
|
188
|
+
action?: Action;
|
|
189
|
+
additionalProperties?: Record<string, unknown>;
|
|
190
|
+
}
|
|
191
|
+
/** Assembles a complete `AnalyticEvent` (key + merged properties) ready for `onTrackAnalyticsEvent`. */
|
|
192
|
+
declare function buildAnalyticEvent(params: BuildAnalyticEventParams): AnalyticEvent;
|
|
193
|
+
|
|
194
|
+
interface UseAIAnalyticsReturn {
|
|
195
|
+
/** Fires `ux.web.feature.{scope}.{tool}.{page}_translate_button.clicked`. */
|
|
196
|
+
trackTranslateButtonClicked: (additionalProperties?: Record<string, unknown>) => void;
|
|
197
|
+
/** Fires `ux.web.feature.{scope}.{tool}.{page}_highlight_button.clicked`. */
|
|
198
|
+
trackHighlightButtonClicked: (additionalProperties?: Record<string, unknown>) => void;
|
|
199
|
+
/** Generic tracking for custom button types or actions. */
|
|
200
|
+
trackCustomEvent: (buttonType: ButtonType | string, action?: Action | string, additionalProperties?: Record<string, unknown>) => void;
|
|
201
|
+
/** `true` when `onTrackAnalyticsEvent` was provided to `AITranslationProvider`. */
|
|
202
|
+
isTrackingEnabled: boolean;
|
|
203
|
+
}
|
|
204
|
+
/**
|
|
205
|
+
* Returns analytics tracking helpers pre-wired to the Provider context.
|
|
206
|
+
* All functions no-op if `onTrackAnalyticsEvent` was not supplied.
|
|
207
|
+
*
|
|
208
|
+
* @throws if called outside of an `AITranslationProvider`.
|
|
209
|
+
*/
|
|
210
|
+
declare function useAIAnalytics(): UseAIAnalyticsReturn;
|
|
211
|
+
|
|
120
212
|
interface AITranslationProviderProps {
|
|
121
213
|
children: ReactNode;
|
|
122
214
|
locale: string;
|
|
@@ -125,6 +217,16 @@ interface AITranslationProviderProps {
|
|
|
125
217
|
userId: number;
|
|
126
218
|
projectId: number;
|
|
127
219
|
enableAIT?: boolean;
|
|
220
|
+
/** Company-level locale from environment metadata (e.g. `"de-DE"`). Passed through to context for downstream consumers such as Amplitude. */
|
|
221
|
+
companyLocale?: string;
|
|
222
|
+
/** Project-level locale from environment metadata (e.g. `"fr-CA"`). Passed through to context for downstream consumers such as Amplitude. */
|
|
223
|
+
projectLocale?: string;
|
|
224
|
+
/** Called by `useAIAnalytics` with a pre-assembled event. The MFE sends it to the analytics API. */
|
|
225
|
+
onTrackAnalyticsEvent?: AIAnalyticsTracker;
|
|
226
|
+
/** Page context for the event key object segment (e.g. `'view'`, `'list_column_description'`). */
|
|
227
|
+
page?: string;
|
|
228
|
+
/** Feature scope: `'project'` or `'company'`. */
|
|
229
|
+
scope?: Scope;
|
|
128
230
|
}
|
|
129
231
|
declare function AITranslationProvider(props: AITranslationProviderProps): react_jsx_runtime.JSX.Element;
|
|
130
232
|
|
|
@@ -177,4 +279,4 @@ declare global {
|
|
|
177
279
|
var _BACKEND_AI_TRANSLATION_IN_PROGRESS_: boolean;
|
|
178
280
|
}
|
|
179
281
|
|
|
180
|
-
export { AITranslateText, type AITranslateTextProps, AITranslationProvider, AI_TRANSLATION_FEATURE_FLAG_KEY, type TranslatedIconProps, type UseConfigOptions, getAITranslationLDId, useAITranslation, useConfig };
|
|
282
|
+
export { ACTION, type AIAnalyticsEventProperties, type AIAnalyticsTracker, AITranslateText, type AITranslateTextProps, AITranslationProvider, AI_TRANSLATION_FEATURE_FLAG_KEY, type Action, type AnalyticEvent, BUTTON_TYPE, type BuildAnalyticEventParams, type ButtonType, type EventKeyParts, type Scope, type TranslatedIconProps, type UseAIAnalyticsReturn, type UseConfigOptions, buildAnalyticEvent, buildEventKey, buildObject, getAITranslationLDId, useAIAnalytics, useAITranslation, useConfig };
|