@yext/chat-ui-react 0.5.6 → 0.6.0-alpha.38
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.md +9 -11
- package/THIRD-PARTY-NOTICES +1 -1
- package/lib/commonjs/package.json.js +141 -0
- package/lib/commonjs/package.json.js.map +1 -0
- package/lib/commonjs/src/components/ChatHeader.js +21 -20
- package/lib/commonjs/src/components/ChatHeader.js.map +1 -1
- package/lib/commonjs/src/components/ChatInput.js +24 -26
- package/lib/commonjs/src/components/ChatInput.js.map +1 -1
- package/lib/commonjs/src/components/ChatPanel.d.ts.map +1 -1
- package/lib/commonjs/src/components/ChatPanel.js +28 -28
- package/lib/commonjs/src/components/ChatPanel.js.map +1 -1
- package/lib/commonjs/src/components/ChatPopUp.d.ts.map +1 -1
- package/lib/commonjs/src/components/ChatPopUp.js +24 -23
- package/lib/commonjs/src/components/ChatPopUp.js.map +1 -1
- package/lib/commonjs/src/components/FeedbackButtons.js +21 -20
- package/lib/commonjs/src/components/FeedbackButtons.js.map +1 -1
- package/lib/commonjs/src/components/LoadingDots.js +8 -7
- package/lib/commonjs/src/components/LoadingDots.js.map +1 -1
- package/lib/commonjs/src/components/Markdown.js +19 -21
- package/lib/commonjs/src/components/Markdown.js.map +1 -1
- package/lib/commonjs/src/components/MessageBubble.js +20 -19
- package/lib/commonjs/src/components/MessageBubble.js.map +1 -1
- package/lib/commonjs/src/components/index.d.ts +0 -1
- package/lib/commonjs/src/components/index.d.ts.map +1 -1
- package/lib/commonjs/src/hooks/useComposedCssClasses.js +9 -8
- package/lib/commonjs/src/hooks/useComposedCssClasses.js.map +1 -1
- package/lib/commonjs/src/hooks/useDefaultHandleApiError.js +10 -9
- package/lib/commonjs/src/hooks/useDefaultHandleApiError.js.map +1 -1
- package/lib/commonjs/src/hooks/useReportAnalyticsEvent.js +11 -13
- package/lib/commonjs/src/hooks/useReportAnalyticsEvent.js.map +1 -1
- package/lib/commonjs/src/icons/Arrow.js +7 -6
- package/lib/commonjs/src/icons/Arrow.js.map +1 -1
- package/lib/commonjs/src/icons/Chat.js +7 -6
- package/lib/commonjs/src/icons/Chat.js.map +1 -1
- package/lib/commonjs/src/icons/Cross.js +7 -6
- package/lib/commonjs/src/icons/Cross.js.map +1 -1
- package/lib/commonjs/src/icons/DualSync.js +7 -6
- package/lib/commonjs/src/icons/DualSync.js.map +1 -1
- package/lib/commonjs/src/icons/ThumbsDown.js +7 -6
- package/lib/commonjs/src/icons/ThumbsDown.js.map +1 -1
- package/lib/commonjs/src/icons/ThumbsDownFill.js +7 -6
- package/lib/commonjs/src/icons/ThumbsDownFill.js.map +1 -1
- package/lib/commonjs/src/icons/ThumbsUp.js +7 -6
- package/lib/commonjs/src/icons/ThumbsUp.js.map +1 -1
- package/lib/commonjs/src/icons/ThumbsUpFill.js +7 -6
- package/lib/commonjs/src/icons/ThumbsUpFill.js.map +1 -1
- package/lib/commonjs/src/index.js +18 -19
- package/lib/commonjs/src/index.js.map +1 -1
- package/lib/commonjs/src/utils/withStylelessCssClasses.js +4 -4
- package/lib/commonjs/src/utils/withStylelessCssClasses.js.map +1 -1
- package/lib/esm/index.d.ts +0 -12
- package/lib/esm/package.json.mjs +121 -0
- package/lib/esm/package.json.mjs.map +1 -0
- package/lib/esm/src/components/{ChatHeader.js → ChatHeader.mjs} +14 -11
- package/lib/esm/src/components/ChatHeader.mjs.map +1 -0
- package/lib/esm/src/components/{ChatInput.js → ChatInput.mjs} +14 -11
- package/lib/esm/src/components/ChatInput.mjs.map +1 -0
- package/lib/esm/src/components/ChatPanel.d.ts.map +1 -1
- package/lib/esm/src/components/{ChatPanel.js → ChatPanel.mjs} +16 -14
- package/lib/esm/src/components/ChatPanel.mjs.map +1 -0
- package/lib/esm/src/components/ChatPopUp.d.ts.map +1 -1
- package/lib/esm/src/components/{ChatPopUp.js → ChatPopUp.mjs} +15 -12
- package/lib/esm/src/components/ChatPopUp.mjs.map +1 -0
- package/lib/esm/src/components/{FeedbackButtons.js → FeedbackButtons.mjs} +15 -12
- package/lib/esm/src/components/FeedbackButtons.mjs.map +1 -0
- package/lib/esm/src/components/LoadingDots.mjs +14 -0
- package/lib/esm/src/components/LoadingDots.mjs.map +1 -0
- package/lib/esm/src/components/{Markdown.js → Markdown.mjs} +14 -11
- package/lib/esm/src/components/Markdown.mjs.map +1 -0
- package/lib/esm/src/components/{MessageBubble.js → MessageBubble.mjs} +13 -10
- package/lib/esm/src/components/MessageBubble.mjs.map +1 -0
- package/lib/esm/src/components/index.d.ts +0 -1
- package/lib/esm/src/components/index.d.ts.map +1 -1
- package/lib/esm/src/hooks/{useComposedCssClasses.js → useComposedCssClasses.mjs} +7 -4
- package/lib/esm/src/hooks/useComposedCssClasses.mjs.map +1 -0
- package/lib/esm/src/hooks/{useDefaultHandleApiError.js → useDefaultHandleApiError.mjs} +7 -4
- package/lib/esm/src/hooks/useDefaultHandleApiError.mjs.map +1 -0
- package/lib/esm/src/hooks/{useReportAnalyticsEvent.js → useReportAnalyticsEvent.mjs} +8 -5
- package/lib/esm/src/hooks/useReportAnalyticsEvent.mjs.map +1 -0
- package/lib/esm/src/icons/Arrow.mjs +8 -0
- package/lib/esm/src/icons/Arrow.mjs.map +1 -0
- package/lib/esm/src/icons/Chat.mjs +8 -0
- package/lib/esm/src/icons/Chat.mjs.map +1 -0
- package/lib/esm/src/icons/Cross.mjs +8 -0
- package/lib/esm/src/icons/Cross.mjs.map +1 -0
- package/lib/esm/src/icons/DualSync.mjs +8 -0
- package/lib/esm/src/icons/DualSync.mjs.map +1 -0
- package/lib/esm/src/icons/ThumbsDown.mjs +8 -0
- package/lib/esm/src/icons/ThumbsDown.mjs.map +1 -0
- package/lib/esm/src/icons/ThumbsDownFill.mjs +8 -0
- package/lib/esm/src/icons/ThumbsDownFill.mjs.map +1 -0
- package/lib/esm/src/icons/ThumbsUp.mjs +8 -0
- package/lib/esm/src/icons/ThumbsUp.mjs.map +1 -0
- package/lib/esm/src/icons/ThumbsUpFill.mjs +8 -0
- package/lib/esm/src/icons/ThumbsUpFill.mjs.map +1 -0
- package/lib/esm/src/index.mjs +7 -0
- package/lib/esm/src/index.mjs.map +1 -0
- package/lib/esm/src/utils/{withStylelessCssClasses.js → withStylelessCssClasses.mjs} +4 -2
- package/lib/esm/src/utils/withStylelessCssClasses.mjs.map +1 -0
- package/package.json +9 -6
- package/src/components/ChatPanel.tsx +18 -16
- package/src/components/ChatPopUp.tsx +26 -22
- package/src/components/index.ts +0 -2
- package/lib/commonjs/package.json +0 -99
- package/lib/commonjs/src/components/ChatStyleProvider.d.ts +0 -13
- package/lib/commonjs/src/components/ChatStyleProvider.d.ts.map +0 -1
- package/lib/commonjs/src/components/ChatStyleProvider.js +0 -19
- package/lib/commonjs/src/components/ChatStyleProvider.js.map +0 -1
- package/lib/commonjs/src/components/index.js +0 -16
- package/lib/commonjs/src/components/index.js.map +0 -1
- package/lib/commonjs/src/hooks/index.js +0 -6
- package/lib/commonjs/src/hooks/index.js.map +0 -1
- package/lib/esm/package.json +0 -99
- package/lib/esm/src/components/ChatHeader.js.map +0 -1
- package/lib/esm/src/components/ChatInput.js.map +0 -1
- package/lib/esm/src/components/ChatPanel.js.map +0 -1
- package/lib/esm/src/components/ChatPopUp.js.map +0 -1
- package/lib/esm/src/components/ChatStyleProvider.d.ts +0 -13
- package/lib/esm/src/components/ChatStyleProvider.d.ts.map +0 -1
- package/lib/esm/src/components/ChatStyleProvider.js +0 -15
- package/lib/esm/src/components/ChatStyleProvider.js.map +0 -1
- package/lib/esm/src/components/FeedbackButtons.js.map +0 -1
- package/lib/esm/src/components/LoadingDots.js +0 -11
- package/lib/esm/src/components/LoadingDots.js.map +0 -1
- package/lib/esm/src/components/Markdown.js.map +0 -1
- package/lib/esm/src/components/MessageBubble.js.map +0 -1
- package/lib/esm/src/components/index.js +0 -7
- package/lib/esm/src/components/index.js.map +0 -1
- package/lib/esm/src/hooks/index.js +0 -2
- package/lib/esm/src/hooks/index.js.map +0 -1
- package/lib/esm/src/hooks/useComposedCssClasses.js.map +0 -1
- package/lib/esm/src/hooks/useDefaultHandleApiError.js.map +0 -1
- package/lib/esm/src/hooks/useReportAnalyticsEvent.js.map +0 -1
- package/lib/esm/src/icons/Arrow.js +0 -5
- package/lib/esm/src/icons/Arrow.js.map +0 -1
- package/lib/esm/src/icons/Chat.js +0 -5
- package/lib/esm/src/icons/Chat.js.map +0 -1
- package/lib/esm/src/icons/Cross.js +0 -5
- package/lib/esm/src/icons/Cross.js.map +0 -1
- package/lib/esm/src/icons/DualSync.js +0 -5
- package/lib/esm/src/icons/DualSync.js.map +0 -1
- package/lib/esm/src/icons/ThumbsDown.js +0 -5
- package/lib/esm/src/icons/ThumbsDown.js.map +0 -1
- package/lib/esm/src/icons/ThumbsDownFill.js +0 -5
- package/lib/esm/src/icons/ThumbsDownFill.js.map +0 -1
- package/lib/esm/src/icons/ThumbsUp.js +0 -5
- package/lib/esm/src/icons/ThumbsUp.js.map +0 -1
- package/lib/esm/src/icons/ThumbsUpFill.js +0 -5
- package/lib/esm/src/icons/ThumbsUpFill.js.map +0 -1
- package/lib/esm/src/index.js +0 -3
- package/lib/esm/src/index.js.map +0 -1
- package/lib/esm/src/utils/withStylelessCssClasses.js.map +0 -1
- package/src/components/ChatStyleProvider.tsx +0 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPopUp.js","
|
|
1
|
+
{"version":3,"file":"ChatPopUp.js","sources":["../../../../src/components/ChatPopUp.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { ChatIcon } from \"../icons/Chat\";\nimport { ChatPanel, ChatPanelCssClasses, ChatPanelProps } from \"./ChatPanel\";\nimport {\n ChatHeader,\n ChatHeaderCssClasses,\n ChatHeaderProps,\n} from \"./ChatHeader\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n/**\n * The CSS class interface for the {@link ChatPopUp} component.\n *\n * @public\n */\nexport interface ChatPopUpCssClasses {\n container?: string;\n panel?: string;\n panel__display?: string;\n panel__hidden?: string;\n button?: string;\n button__display?: string;\n button__hidden?: string;\n buttonIcon?: string;\n headerCssClasses?: ChatHeaderCssClasses;\n panelCssClasses?: ChatPanelCssClasses;\n}\n\nconst fixedPosition = \"fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 \";\nconst builtInCssClasses: ChatPopUpCssClasses = withStylelessCssClasses(\n \"PopUp\",\n {\n container: \"transition-all\",\n panel:\n fixedPosition +\n \"w-80 max-[480px]:right-0 max-[480px]:bottom-0 max-[480px]:w-full max-[480px]:h-full lg:w-96 h-[75vh]\",\n panel__display: \"duration-300 translate-y-0\",\n panel__hidden: \"duration-300 translate-y-[20%] opacity-0 invisible\",\n button:\n fixedPosition +\n \"p-2 w-12 h-12 lg:w-16 lg:h-16 flex justify-center items-center text-white shadow-xl rounded-full bg-gradient-to-br from-blue-600 to-blue-700 hover:-translate-y-2 duration-150\",\n button__display: \"duration-300 transform translate-y-0\",\n button__hidden:\n \"duration-300 transform translate-y-[20%] opacity-0 invisible\",\n buttonIcon: \"text-blue-600 w-[28px] h-[28px] lg:w-[40px] lg:h-[40px]\",\n headerCssClasses: {\n container: \"max-[480px]:rounded-none rounded-t-3xl\",\n },\n panelCssClasses: {\n container: \"max-[480px]:rounded-none rounded-3xl\",\n inputContainer: \"max-[480px]:rounded-none rounded-b-3xl\",\n messagesScrollContainer: \"rounded-b-3xl\",\n },\n }\n);\n\n/**\n * The props for the {@link ChatPopUp} component.\n *\n * @public\n */\nexport interface ChatPopUpProps\n extends Omit<ChatHeaderProps, \"showCloseButton\" | \"customCssClasses\">,\n Omit<ChatPanelProps, \"header\" | \"customCssClasses\"> {\n /** Custom icon for the popup button to open the panel. */\n openPanelButtonIcon?: JSX.Element;\n /**\n * CSS classes for customizing the component styling.\n */\n customCssClasses?: ChatPopUpCssClasses;\n}\n\n/**\n * A component that renders a popup button that displays and hides\n * a panel for chat bot interactions.\n *\n * @public\n *\n * @param props - {@link ChatPanelProps}\n */\nexport function ChatPopUp(props: ChatPopUpProps) {\n const {\n openPanelButtonIcon,\n customCssClasses,\n showRestartButton = true,\n onClose: customOnClose,\n title,\n } = props;\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n\n useEffect(() => {\n reportAnalyticsEvent({\n action: \"CHAT_IMPRESSION\",\n });\n }, [reportAnalyticsEvent]);\n\n const [showChat, setShowChat] = useState(false);\n const onClick = useCallback(() => {\n setShowChat(!showChat);\n }, [showChat]);\n\n const onClose = useCallback(() => {\n setShowChat(false);\n customOnClose?.();\n }, [customOnClose]);\n\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const panelCssClasses = twMerge(\n cssClasses.panel,\n showChat ? cssClasses.panel__display : cssClasses.panel__hidden\n );\n const buttonCssClasses = twMerge(\n cssClasses.button,\n showChat ? cssClasses.button__hidden : cssClasses.button__display\n );\n\n return (\n <div className=\"yext-chat\">\n <div className={cssClasses.container}>\n <div className={panelCssClasses} aria-label=\"Chat Popup Panel\">\n <ChatPanel\n {...props}\n customCssClasses={cssClasses.panelCssClasses}\n header={\n <ChatHeader\n title={title}\n showRestartButton={showRestartButton}\n showCloseButton={true}\n onClose={onClose}\n customCssClasses={cssClasses.headerCssClasses}\n />\n }\n />\n </div>\n <button\n aria-label=\"Chat Popup Button\"\n onClick={onClick}\n className={buttonCssClasses}\n >\n {openPanelButtonIcon ?? (\n <ChatIcon className={cssClasses.buttonIcon} />\n )}\n </button>\n </div>\n </div>\n );\n}\n"],"names":["withStylelessCssClasses","useReportAnalyticsEvent","useEffect","useState","useCallback","useComposedCssClasses","twMerge","_jsx","_jsxs","ChatPanel","ChatHeader","ChatIcon"],"mappings":";;;;;;;;;;;;AA+BA,MAAM,aAAa,GAAG,uDAAuD,CAAC;AAC9E,MAAM,iBAAiB,GAAwBA,+CAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,gBAAgB;AAC3B,IAAA,KAAK,EACH,aAAa;QACb,sGAAsG;AACxG,IAAA,cAAc,EAAE,4BAA4B;AAC5C,IAAA,aAAa,EAAE,oDAAoD;AACnE,IAAA,MAAM,EACJ,aAAa;QACb,gLAAgL;AAClL,IAAA,eAAe,EAAE,sCAAsC;AACvD,IAAA,cAAc,EACZ,8DAA8D;AAChE,IAAA,UAAU,EAAE,yDAAyD;AACrE,IAAA,gBAAgB,EAAE;AAChB,QAAA,SAAS,EAAE,wCAAwC;AACpD,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,SAAS,EAAE,sCAAsC;AACjD,QAAA,cAAc,EAAE,wCAAwC;AACxD,QAAA,uBAAuB,EAAE,eAAe;AACzC,KAAA;AACF,CAAA,CACF,CAAC;AAkBF;;;;;;;AAOG;AACG,SAAU,SAAS,CAAC,KAAqB,EAAA;AAC7C,IAAA,MAAM,EACJ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,GAAG,IAAI,EACxB,OAAO,EAAE,aAAa,EACtB,KAAK,GACN,GAAG,KAAK,CAAC;AACV,IAAA,MAAM,oBAAoB,GAAGC,+CAAuB,EAAE,CAAC;IAEvDC,eAAS,CAAC,MAAK;AACb,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,iBAAiB;AAC1B,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AAChD,IAAA,MAAM,OAAO,GAAGC,iBAAW,CAAC,MAAK;AAC/B,QAAA,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;AACzB,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,OAAO,GAAGA,iBAAW,CAAC,MAAK;QAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,aAAa,IAAI,CAAC;AACpB,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAGC,qBAAO,CAC7B,UAAU,CAAC,KAAK,EAChB,QAAQ,GAAG,UAAU,CAAC,cAAc,GAAG,UAAU,CAAC,aAAa,CAChE,CAAC;IACF,MAAM,gBAAgB,GAAGA,qBAAO,CAC9B,UAAU,CAAC,MAAM,EACjB,QAAQ,GAAG,UAAU,CAAC,cAAc,GAAG,UAAU,CAAC,eAAe,CAClE,CAAC;AAEF,IAAA,QACEC,cAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,WAAW,EAAA,QAAA,EACxBC,yBAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClCD,cAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,EAAA,YAAA,EAAa,kBAAkB,EAC5D,QAAA,EAAAA,cAAA,CAACE,mBAAS,EAAA,EAAA,GACJ,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,eAAe,EAC5C,MAAM,EACJF,cAAC,CAAAG,qBAAU,IACT,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAAA,CAC7C,GAEJ,EACE,CAAA,EACNH,yCACa,mBAAmB,EAC9B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,gBAAgB,EAE1B,QAAA,EAAA,mBAAmB,KAClBA,cAAA,CAACI,aAAQ,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,UAAU,EAAI,CAAA,CAC/C,GACM,CACL,EAAA,CAAA,EAAA,CACF,EACN;AACJ;;;;"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const builtInCssClasses =
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var ThumbsDown = require('../icons/ThumbsDown.js');
|
|
5
|
+
var ThumbsUp = require('../icons/ThumbsUp.js');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var ThumbsUpFill = require('../icons/ThumbsUpFill.js');
|
|
8
|
+
var ThumbsDownFill = require('../icons/ThumbsDownFill.js');
|
|
9
|
+
var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
|
|
10
|
+
var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
|
|
11
|
+
var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
|
|
12
|
+
|
|
13
|
+
const builtInCssClasses = withStylelessCssClasses.withStylelessCssClasses("FeedbackButtons", {
|
|
14
14
|
container: "flex gap-x-1 absolute -right-1 -top-3 opacity-0 group-hover:opacity-100 duration-200",
|
|
15
15
|
thumbsUpButton: "w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center",
|
|
16
16
|
thumbsUpIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
|
|
@@ -26,10 +26,10 @@ const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)
|
|
|
26
26
|
* @internal
|
|
27
27
|
*/
|
|
28
28
|
function FeedbackButtons({ customCssClasses, responseId, }) {
|
|
29
|
-
const reportAnalyticsEvent =
|
|
30
|
-
const cssClasses =
|
|
31
|
-
const [selectedThumb, setSelectedThumb] =
|
|
32
|
-
const onClickThumbsUp =
|
|
29
|
+
const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();
|
|
30
|
+
const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
|
|
31
|
+
const [selectedThumb, setSelectedThumb] = react.useState();
|
|
32
|
+
const onClickThumbsUp = react.useCallback(() => {
|
|
33
33
|
setSelectedThumb("UP");
|
|
34
34
|
reportAnalyticsEvent({
|
|
35
35
|
action: "THUMBS_UP",
|
|
@@ -38,7 +38,7 @@ function FeedbackButtons({ customCssClasses, responseId, }) {
|
|
|
38
38
|
},
|
|
39
39
|
});
|
|
40
40
|
}, [reportAnalyticsEvent, responseId]);
|
|
41
|
-
const onClickThumbsDown =
|
|
41
|
+
const onClickThumbsDown = react.useCallback(() => {
|
|
42
42
|
setSelectedThumb("DOWN");
|
|
43
43
|
reportAnalyticsEvent({
|
|
44
44
|
action: "THUMBS_DOWN",
|
|
@@ -47,7 +47,8 @@ function FeedbackButtons({ customCssClasses, responseId, }) {
|
|
|
47
47
|
},
|
|
48
48
|
});
|
|
49
49
|
}, [reportAnalyticsEvent, responseId]);
|
|
50
|
-
return (
|
|
50
|
+
return (jsxRuntime.jsxs("div", { className: cssClasses.container, children: [jsxRuntime.jsx("button", { className: cssClasses.thumbsUpButton, onClick: onClickThumbsUp, children: selectedThumb === "UP" ? (jsxRuntime.jsx(ThumbsUpFill.ThumbsUpFillIcon, { className: cssClasses.thumbsUpFillIcon })) : (jsxRuntime.jsx(ThumbsUp.ThumbsUpIcon, { className: cssClasses.thumbsUpIcon })) }), jsxRuntime.jsx("button", { className: cssClasses.thumbsDownButton, onClick: onClickThumbsDown, children: selectedThumb === "DOWN" ? (jsxRuntime.jsx(ThumbsDownFill.ThumbsDownFillIcon, { className: cssClasses.thumbsDownFillIcon })) : (jsxRuntime.jsx(ThumbsDown.ThumbsDownIcon, { className: cssClasses.thumbsDownIcon })) })] }));
|
|
51
51
|
}
|
|
52
|
+
|
|
52
53
|
exports.FeedbackButtons = FeedbackButtons;
|
|
53
|
-
//# sourceMappingURL=FeedbackButtons.js.map
|
|
54
|
+
//# sourceMappingURL=FeedbackButtons.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeedbackButtons.js","
|
|
1
|
+
{"version":3,"file":"FeedbackButtons.js","sources":["../../../../src/components/FeedbackButtons.tsx"],"sourcesContent":["import { ThumbsDownIcon } from \"../icons/ThumbsDown\";\nimport { ThumbsUpIcon } from \"../icons/ThumbsUp\";\nimport { useCallback, useState } from \"react\";\nimport { ThumbsUpFillIcon } from \"../icons/ThumbsUpFill\";\nimport { ThumbsDownFillIcon } from \"../icons/ThumbsDownFill\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n/**\n * The CSS class interface for the FeedbackButtons component.\n *\n * @public\n */\nexport interface FeedbackButtonsCssClasses {\n container?: string;\n thumbsUpButton?: string;\n thumbsUpIcon?: string;\n thumbsUpFillIcon?: string;\n thumbsDownButton?: string;\n thumbsDownIcon?: string;\n thumbsDownFillIcon?: string;\n}\n\nconst builtInCssClasses: FeedbackButtonsCssClasses =\n withStylelessCssClasses<FeedbackButtonsCssClasses>(\"FeedbackButtons\", {\n container:\n \"flex gap-x-1 absolute -right-1 -top-3 opacity-0 group-hover:opacity-100 duration-200\",\n thumbsUpButton:\n \"w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center\",\n thumbsUpIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n thumbsUpFillIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n thumbsDownButton:\n \"w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center\",\n thumbsDownIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n thumbsDownFillIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n });\n\n/**\n * The props for the FeedbackButtons component.\n *\n * @internal\n */\ninterface FeedbackButtonsProps {\n /** The response ID correlates to the current message to give feedback on. */\n responseId?: string;\n /** CSS classes for customizing the component styling. */\n customCssClasses?: FeedbackButtonsCssClasses;\n}\n\n/**\n * Displays feedback buttons (e.g. thumbs up and thumbs down) that will\n * report analytic events on click.\n *\n * @internal\n */\nexport function FeedbackButtons({\n customCssClasses,\n responseId,\n}: FeedbackButtonsProps) {\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const [selectedThumb, setSelectedThumb] = useState<\n \"UP\" | \"DOWN\" | undefined\n >();\n const onClickThumbsUp = useCallback(() => {\n setSelectedThumb(\"UP\");\n reportAnalyticsEvent({\n action: \"THUMBS_UP\",\n chat: {\n responseId,\n },\n });\n }, [reportAnalyticsEvent, responseId]);\n\n const onClickThumbsDown = useCallback(() => {\n setSelectedThumb(\"DOWN\");\n reportAnalyticsEvent({\n action: \"THUMBS_DOWN\",\n chat: {\n responseId,\n },\n });\n }, [reportAnalyticsEvent, responseId]);\n\n return (\n <div className={cssClasses.container}>\n <button className={cssClasses.thumbsUpButton} onClick={onClickThumbsUp}>\n {selectedThumb === \"UP\" ? (\n <ThumbsUpFillIcon className={cssClasses.thumbsUpFillIcon} />\n ) : (\n <ThumbsUpIcon className={cssClasses.thumbsUpIcon} />\n )}\n </button>\n <button\n className={cssClasses.thumbsDownButton}\n onClick={onClickThumbsDown}\n >\n {selectedThumb === \"DOWN\" ? (\n <ThumbsDownFillIcon className={cssClasses.thumbsDownFillIcon} />\n ) : (\n <ThumbsDownIcon className={cssClasses.thumbsDownIcon} />\n )}\n </button>\n </div>\n );\n}\n"],"names":["withStylelessCssClasses","useReportAnalyticsEvent","useComposedCssClasses","useState","useCallback","_jsxs","_jsx","ThumbsUpFillIcon","ThumbsUpIcon","ThumbsDownFillIcon","ThumbsDownIcon"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,iBAAiB,GACrBA,+CAAuB,CAA4B,iBAAiB,EAAE;AACpE,IAAA,SAAS,EACP,sFAAsF;AACxF,IAAA,cAAc,EACZ,iEAAiE;AACnE,IAAA,YAAY,EAAE,2CAA2C;AACzD,IAAA,gBAAgB,EAAE,2CAA2C;AAC7D,IAAA,gBAAgB,EACd,iEAAiE;AACnE,IAAA,cAAc,EAAE,2CAA2C;AAC3D,IAAA,kBAAkB,EAAE,2CAA2C;AAChE,CAAA,CAAC,CAAC;AAcL;;;;;AAKG;SACa,eAAe,CAAC,EAC9B,gBAAgB,EAChB,UAAU,GACW,EAAA;AACrB,IAAA,MAAM,oBAAoB,GAAGC,+CAAuB,EAAE,CAAC;IACvD,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,EAE/C,CAAC;AACJ,IAAA,MAAM,eAAe,GAAGC,iBAAW,CAAC,MAAK;QACvC,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACvB,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,IAAI,EAAE;gBACJ,UAAU;AACX,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,MAAM,iBAAiB,GAAGA,iBAAW,CAAC,MAAK;QACzC,gBAAgB,CAAC,MAAM,CAAC,CAAC;AACzB,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,IAAI,EAAE;gBACJ,UAAU;AACX,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,QACEC,yBAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClCC,cAAQ,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,OAAO,EAAE,eAAe,EAAA,QAAA,EACnE,aAAa,KAAK,IAAI,IACrBA,eAACC,6BAAgB,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAA,CAAI,KAE5DD,cAAA,CAACE,qBAAY,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,YAAY,GAAI,CACrD,EAAA,CACM,EACTF,cACE,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,OAAO,EAAE,iBAAiB,EAAA,QAAA,EAEzB,aAAa,KAAK,MAAM,IACvBA,cAAA,CAACG,iCAAkB,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAA,CAAI,KAEhEH,cAAC,CAAAI,yBAAc,IAAC,SAAS,EAAE,UAAU,CAAC,cAAc,GAAI,CACzD,EAAA,CACM,CACL,EAAA,CAAA,EACN;AACJ;;;;"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var tailwindMerge = require('tailwind-merge');
|
|
5
|
+
|
|
6
6
|
/**
|
|
7
7
|
* A component that signifies loading status.
|
|
8
8
|
*
|
|
9
9
|
* @internal
|
|
10
10
|
*/
|
|
11
11
|
function LoadingDots({ className }) {
|
|
12
|
-
return (
|
|
12
|
+
return (jsxRuntime.jsxs("div", { "aria-label": "Loading Indicator", className: tailwindMerge.twMerge("flex gap-1 p-2 animate-fade-in", className), children: [jsxRuntime.jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite]" }), jsxRuntime.jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.3s]" }), jsxRuntime.jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.6s]" })] }));
|
|
13
13
|
}
|
|
14
|
+
|
|
14
15
|
exports.LoadingDots = LoadingDots;
|
|
15
|
-
//# sourceMappingURL=LoadingDots.js.map
|
|
16
|
+
//# sourceMappingURL=LoadingDots.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingDots.js","
|
|
1
|
+
{"version":3,"file":"LoadingDots.js","sources":["../../../../src/components/LoadingDots.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\n/**\n * A component that signifies loading status.\n *\n * @internal\n */\nexport function LoadingDots({ className }: { className?: string }) {\n return (\n <div\n aria-label=\"Loading Indicator\"\n className={twMerge(\"flex gap-1 p-2 animate-fade-in\", className)}\n >\n <div className=\"w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite]\" />\n <div className=\"w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.3s]\" />\n <div className=\"w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.6s]\" />\n </div>\n );\n}\n"],"names":["_jsxs","twMerge","_jsx"],"mappings":";;;;;AAEA;;;;AAIG;AACa,SAAA,WAAW,CAAC,EAAE,SAAS,EAA0B,EAAA;AAC/D,IAAA,QACEA,eAAA,CAAA,KAAA,EAAA,EAAA,YAAA,EACa,mBAAmB,EAC9B,SAAS,EAAEC,qBAAO,CAAC,gCAAgC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAE/DC,wBAAK,SAAS,EAAC,gEAAgE,EAAA,CAAG,EAClFA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qEAAqE,EAAG,CAAA,EACvFA,cAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qEAAqE,EAAG,CAAA,CAAA,EAAA,CACnF,EACN;AACJ;;;;"}
|
|
@@ -1,24 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
|
|
12
|
-
const react_1 = require("react");
|
|
13
|
-
const useReportAnalyticsEvent_1 = require("../hooks/useReportAnalyticsEvent");
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var ReactMarkdown = require('react-markdown');
|
|
5
|
+
var remarkGfm = require('remark-gfm');
|
|
6
|
+
var rehypeRaw = require('rehype-raw');
|
|
7
|
+
var rehypeSanitize = require('rehype-sanitize');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
|
|
10
|
+
|
|
14
11
|
// The Remark and Rehype plugins to use in conjunction with ReactMarkdown.
|
|
15
12
|
const unifiedPlugins = {
|
|
16
13
|
remark: [
|
|
17
|
-
|
|
14
|
+
remarkGfm, //renders Github-Flavored Markdown
|
|
18
15
|
],
|
|
19
16
|
rehype: [
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
rehypeRaw,
|
|
18
|
+
rehypeSanitize, //to sanitize HTML content
|
|
22
19
|
],
|
|
23
20
|
};
|
|
24
21
|
/**
|
|
@@ -31,8 +28,8 @@ const unifiedPlugins = {
|
|
|
31
28
|
* @internal
|
|
32
29
|
*/
|
|
33
30
|
function Markdown({ content, responseId, className }) {
|
|
34
|
-
const reportAnalyticsEvent =
|
|
35
|
-
const components =
|
|
31
|
+
const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();
|
|
32
|
+
const components = react.useMemo(() => {
|
|
36
33
|
const createClickHandlerFn = (href) => () => {
|
|
37
34
|
reportAnalyticsEvent({
|
|
38
35
|
action: "CHAT_LINK_CLICK",
|
|
@@ -44,11 +41,12 @@ function Markdown({ content, responseId, className }) {
|
|
|
44
41
|
};
|
|
45
42
|
return {
|
|
46
43
|
a: ({ node: _, children, ...props }) => {
|
|
47
|
-
return (
|
|
44
|
+
return (jsxRuntime.jsx("a", { ...props, onClick: createClickHandlerFn(props.href), target: "_blank", rel: "noopener noreferrer", className: "cursor-pointer", children: children }));
|
|
48
45
|
},
|
|
49
46
|
};
|
|
50
47
|
}, [reportAnalyticsEvent, responseId]);
|
|
51
|
-
return (
|
|
48
|
+
return (jsxRuntime.jsx(ReactMarkdown, { className: className, children: content, remarkPlugins: unifiedPlugins.remark, rehypePlugins: unifiedPlugins.rehype, components: components }));
|
|
52
49
|
}
|
|
50
|
+
|
|
53
51
|
exports.Markdown = Markdown;
|
|
54
|
-
//# sourceMappingURL=Markdown.js.map
|
|
52
|
+
//# sourceMappingURL=Markdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.js","
|
|
1
|
+
{"version":3,"file":"Markdown.js","sources":["../../../../src/components/Markdown.tsx"],"sourcesContent":["import ReactMarkdown, {\n PluggableList,\n ReactMarkdownOptions,\n} from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport rehypeSanitize from \"rehype-sanitize\";\nimport { useMemo } from \"react\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n// The Remark and Rehype plugins to use in conjunction with ReactMarkdown.\nconst unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {\n remark: [\n remarkGfm, //renders Github-Flavored Markdown\n ],\n rehype: [\n rehypeRaw, //to support HTML embedded in markdown\n rehypeSanitize, //to sanitize HTML content\n ],\n};\n\ninterface MarkdownProps {\n /** Stringified markdown. */\n content: string;\n /** The response ID correlates to the current message. */\n responseId?: string;\n /** Classnames for the container. */\n className?: string;\n}\n\n/**\n * Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include\n * arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.\n *\n * @remarks\n * A link click will send a CHAT_LINK_CLICK analytics event\n *\n * @internal\n */\nexport function Markdown({ content, responseId, className }: MarkdownProps) {\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n\n const components: ReactMarkdownOptions[\"components\"] = useMemo(() => {\n const createClickHandlerFn = (href?: string) => () => {\n reportAnalyticsEvent({\n action: \"CHAT_LINK_CLICK\",\n destinationUrl: href,\n chat: {\n responseId,\n },\n });\n };\n return {\n a: ({ node: _, children, ...props }) => {\n return (\n <a\n {...props}\n onClick={createClickHandlerFn(props.href)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"cursor-pointer\"\n >\n {children}\n </a>\n );\n },\n };\n }, [reportAnalyticsEvent, responseId]);\n\n return (\n <ReactMarkdown\n className={className}\n children={content}\n remarkPlugins={unifiedPlugins.remark}\n rehypePlugins={unifiedPlugins.rehype}\n components={components}\n />\n );\n}\n"],"names":["useReportAnalyticsEvent","useMemo","_jsx"],"mappings":";;;;;;;;;;AAUA;AACA,MAAM,cAAc,GAAsD;AACxE,IAAA,MAAM,EAAE;AACN,QAAA,SAAS;AACV,KAAA;AACD,IAAA,MAAM,EAAE;QACN,SAAS;AACT,QAAA,cAAc;AACf,KAAA;CACF,CAAC;AAWF;;;;;;;;AAQG;AACG,SAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAiB,EAAA;AACxE,IAAA,MAAM,oBAAoB,GAAGA,+CAAuB,EAAE,CAAC;AAEvD,IAAA,MAAM,UAAU,GAAuCC,aAAO,CAAC,MAAK;QAClE,MAAM,oBAAoB,GAAG,CAAC,IAAa,KAAK,MAAK;AACnD,YAAA,oBAAoB,CAAC;AACnB,gBAAA,MAAM,EAAE,iBAAiB;AACzB,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,IAAI,EAAE;oBACJ,UAAU;AACX,iBAAA;AACF,aAAA,CAAC,CAAC;AACL,SAAC,CAAC;QACF,OAAO;AACL,YAAA,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KAAI;AACrC,gBAAA,QACEC,cAAA,CAAA,GAAA,EAAA,EAAA,GACM,KAAK,EACT,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,EACzC,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,gBAAgB,EAEzB,QAAA,EAAA,QAAQ,EACP,CAAA,EACJ;aACH;SACF,CAAC;AACJ,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,QACEA,cAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,OAAO,EACjB,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB,EACF;AACJ;;;;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const builtInCssClasses =
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var chatHeadlessReact = require('@yext/chat-headless-react');
|
|
5
|
+
var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
|
|
6
|
+
var tailwindMerge = require('tailwind-merge');
|
|
7
|
+
var Markdown = require('./Markdown.js');
|
|
8
|
+
var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
|
|
9
|
+
var FeedbackButtons = require('./FeedbackButtons.js');
|
|
10
|
+
|
|
11
|
+
const builtInCssClasses = withStylelessCssClasses.withStylelessCssClasses("MessageBubble", {
|
|
12
12
|
topContainer: "w-full animate-fade-in @container",
|
|
13
13
|
subContainer: "flex flex-col @lg:flex-row @lg:items-center @lg:gap-x-2 @lg:m-1",
|
|
14
14
|
subContainer__bot: "",
|
|
@@ -32,22 +32,21 @@ const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)
|
|
|
32
32
|
* @param props - {@link MessageBubbleProps}
|
|
33
33
|
*/
|
|
34
34
|
function MessageBubble({ message, showFeedbackButtons = true, showTimestamp = true, customCssClasses, formatTimestamp = defaultFormatTimestamp, }) {
|
|
35
|
-
const cssClasses =
|
|
36
|
-
const bubbleCssClasses =
|
|
35
|
+
const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
|
|
36
|
+
const bubbleCssClasses = tailwindMerge.twMerge(cssClasses.bubble, message.source === chatHeadlessReact.MessageSource.USER
|
|
37
37
|
? cssClasses.bubble__user
|
|
38
38
|
: cssClasses.bubble__bot);
|
|
39
|
-
const textCssClasses =
|
|
39
|
+
const textCssClasses = tailwindMerge.twMerge(cssClasses.text, message.source === chatHeadlessReact.MessageSource.USER
|
|
40
40
|
? cssClasses.text__user
|
|
41
41
|
: cssClasses.text__bot);
|
|
42
|
-
const subContainerCssClasses =
|
|
42
|
+
const subContainerCssClasses = tailwindMerge.twMerge(cssClasses.subContainer, message.source === chatHeadlessReact.MessageSource.USER
|
|
43
43
|
? cssClasses.subContainer__user
|
|
44
44
|
: cssClasses.subContainer__bot);
|
|
45
|
-
const timestampCssClasses =
|
|
45
|
+
const timestampCssClasses = tailwindMerge.twMerge(cssClasses.timestamp, message.source === chatHeadlessReact.MessageSource.USER
|
|
46
46
|
? cssClasses.timestamp__user
|
|
47
47
|
: cssClasses.timestamp__bot);
|
|
48
|
-
return (
|
|
48
|
+
return (jsxRuntime.jsx("div", { className: cssClasses.topContainer, children: jsxRuntime.jsxs("div", { className: subContainerCssClasses, children: [jsxRuntime.jsxs("div", { className: bubbleCssClasses, children: [showFeedbackButtons && message.source === chatHeadlessReact.MessageSource.BOT && (jsxRuntime.jsx(FeedbackButtons.FeedbackButtons, { customCssClasses: cssClasses.feedbackButtonsCssClasses, responseId: message.responseId })), jsxRuntime.jsx(Markdown.Markdown, { content: message.text, responseId: message.responseId, className: textCssClasses })] }), showTimestamp && (jsxRuntime.jsx("div", { className: timestampCssClasses, children: message.timestamp ? formatTimestamp(message.timestamp) : " " }))] }) }));
|
|
49
49
|
}
|
|
50
|
-
exports.MessageBubble = MessageBubble;
|
|
51
50
|
/**
|
|
52
51
|
* Formats message's timestamp from "2023-05-18T19:33:34.553Z" to "7:33 PM"
|
|
53
52
|
*
|
|
@@ -61,4 +60,6 @@ function defaultFormatTimestamp(timestamp) {
|
|
|
61
60
|
hour12: true,
|
|
62
61
|
});
|
|
63
62
|
}
|
|
64
|
-
|
|
63
|
+
|
|
64
|
+
exports.MessageBubble = MessageBubble;
|
|
65
|
+
//# sourceMappingURL=MessageBubble.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageBubble.js","
|
|
1
|
+
{"version":3,"file":"MessageBubble.js","sources":["../../../../src/components/MessageBubble.tsx"],"sourcesContent":["import { Message, MessageSource } from \"@yext/chat-headless-react\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Markdown } from \"./Markdown\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { FeedbackButtons, FeedbackButtonsCssClasses } from \"./FeedbackButtons\";\n\n/**\n * The CSS class interface for the {@link MessageBubble} component.\n *\n * @public\n */\nexport interface MessageBubbleCssClasses {\n topContainer?: string;\n subContainer?: string;\n subContainer__bot?: string;\n subContainer__user?: string;\n bubble?: string;\n bubble__bot?: string;\n bubble__user?: string;\n text?: string;\n text__bot?: string;\n text__user?: string;\n timestamp?: string;\n timestamp__bot?: string;\n timestamp__user?: string;\n feedbackButtonsCssClasses?: FeedbackButtonsCssClasses;\n}\n\nconst builtInCssClasses: MessageBubbleCssClasses =\n withStylelessCssClasses<MessageBubbleCssClasses>(\"MessageBubble\", {\n topContainer: \"w-full animate-fade-in @container\",\n subContainer:\n \"flex flex-col @lg:flex-row @lg:items-center @lg:gap-x-2 @lg:m-1\",\n subContainer__bot: \"\",\n subContainer__user: \"@lg:flex-row-reverse\",\n bubble: \"relative group peer w-fit max-w-[80%] rounded-2xl p-4\",\n bubble__bot: \"bg-gradient-to-tr from-slate-50 to-slate-100\",\n bubble__user:\n \"ml-auto @lg:ml-0 bg-gradient-to-tr from-blue-600 to-blue-700 text-white\",\n text: \"text-[13px] @[480px]:text-base prose overflow-x-auto\",\n text__bot: \"text-slate-900\",\n text__user: \"text-white break-words\",\n timestamp:\n \"w-fit my-0.5 ml-4 @lg:ml-0 text-slate-400 text-[10px] @[480px]:text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap\",\n timestamp__bot: \"\",\n timestamp__user: \"ml-auto\",\n feedbackButtonsCssClasses: {},\n });\n\n/**\n * The props for the {@link MessageBubble} component.\n *\n * @public\n */\nexport interface MessageBubbleProps {\n /** The message to display. */\n message: Message;\n /**\n * Whether to show the feedback buttons on the message bubble.\n * Defaults to true.\n */\n showFeedbackButtons?: boolean;\n /**\n * Whether to show the timestamp of the message with the message bubble.\n * Defaults to true.\n */\n showTimestamp?: boolean;\n /**\n * A function which is called to format the message's timestamp given in\n * ISO format (e.g. \"2023-05-18T19:33:34.553Z\").\n * Defaults to \"HH:MM A\" (e.g. \"7:33 PM\").\n */\n formatTimestamp?: (timestamp: string) => string;\n /** CSS classes for customizing the component styling. */\n customCssClasses?: MessageBubbleCssClasses;\n}\n\n/**\n * A component that displays the provided message.\n *\n * @public\n *\n * @param props - {@link MessageBubbleProps}\n */\nexport function MessageBubble({\n message,\n showFeedbackButtons = true,\n showTimestamp = true,\n customCssClasses,\n formatTimestamp = defaultFormatTimestamp,\n}: MessageBubbleProps) {\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const bubbleCssClasses = twMerge(\n cssClasses.bubble,\n message.source === MessageSource.USER\n ? cssClasses.bubble__user\n : cssClasses.bubble__bot\n );\n const textCssClasses = twMerge(\n cssClasses.text,\n message.source === MessageSource.USER\n ? cssClasses.text__user\n : cssClasses.text__bot\n );\n const subContainerCssClasses = twMerge(\n cssClasses.subContainer,\n message.source === MessageSource.USER\n ? cssClasses.subContainer__user\n : cssClasses.subContainer__bot\n );\n const timestampCssClasses = twMerge(\n cssClasses.timestamp,\n message.source === MessageSource.USER\n ? cssClasses.timestamp__user\n : cssClasses.timestamp__bot\n );\n\n return (\n <div className={cssClasses.topContainer}>\n <div className={subContainerCssClasses}>\n <div className={bubbleCssClasses}>\n {showFeedbackButtons && message.source === MessageSource.BOT && (\n <FeedbackButtons\n customCssClasses={cssClasses.feedbackButtonsCssClasses}\n responseId={message.responseId}\n />\n )}\n <Markdown\n content={message.text}\n responseId={message.responseId}\n className={textCssClasses}\n />\n </div>\n {/* fallback on empty space here to perserve the height for timestamp div */}\n {showTimestamp && (\n <div className={timestampCssClasses}>\n {message.timestamp ? formatTimestamp(message.timestamp) : \" \"}\n </div>\n )}\n </div>\n </div>\n );\n}\n\n/**\n * Formats message's timestamp from \"2023-05-18T19:33:34.553Z\" to \"7:33 PM\"\n *\n * @param timestamp - the timestamp to convert from\n * @returns formatted timestamp\n */\nfunction defaultFormatTimestamp(timestamp: string): string {\n return new Date(timestamp).toLocaleString(undefined, {\n hour: \"numeric\",\n minute: \"numeric\",\n hour12: true,\n });\n}\n"],"names":["withStylelessCssClasses","useComposedCssClasses","twMerge","MessageSource","_jsx","_jsxs","FeedbackButtons","Markdown"],"mappings":"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"}
|
|
@@ -9,5 +9,4 @@ export { ChatPanel } from "./ChatPanel";
|
|
|
9
9
|
export type { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
|
|
10
10
|
export { ChatPopUp } from "./ChatPopUp";
|
|
11
11
|
export type { ChatPopUpCssClasses, ChatPopUpProps } from "./ChatPopUp";
|
|
12
|
-
export { ChatStyleProvider } from "./ChatStyleProvider";
|
|
13
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
var tailwindMerge = require('tailwind-merge');
|
|
5
|
+
|
|
6
6
|
/**
|
|
7
7
|
* useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes.
|
|
8
8
|
*
|
|
@@ -32,7 +32,7 @@ const tailwind_merge_1 = require("tailwind-merge");
|
|
|
32
32
|
* @returns The composed CSS classes
|
|
33
33
|
*/
|
|
34
34
|
function useComposedCssClasses(builtInClasses, customClasses) {
|
|
35
|
-
return
|
|
35
|
+
return react.useMemo(() => {
|
|
36
36
|
const mergeCssClasses = (builtInClasses, customClasses) => {
|
|
37
37
|
const mergedCssClasses = { ...builtInClasses };
|
|
38
38
|
if (!customClasses) {
|
|
@@ -48,7 +48,7 @@ function useComposedCssClasses(builtInClasses, customClasses) {
|
|
|
48
48
|
mergedCssClasses[key] = mergeCssClasses(builtIn, custom);
|
|
49
49
|
}
|
|
50
50
|
else if (typeof builtIn === "string" && typeof custom === "string") {
|
|
51
|
-
mergedCssClasses[key] =
|
|
51
|
+
mergedCssClasses[key] = tailwindMerge.twMerge(builtIn, custom);
|
|
52
52
|
}
|
|
53
53
|
});
|
|
54
54
|
return mergedCssClasses;
|
|
@@ -56,5 +56,6 @@ function useComposedCssClasses(builtInClasses, customClasses) {
|
|
|
56
56
|
return mergeCssClasses(builtInClasses, customClasses);
|
|
57
57
|
}, [builtInClasses, customClasses]);
|
|
58
58
|
}
|
|
59
|
+
|
|
59
60
|
exports.useComposedCssClasses = useComposedCssClasses;
|
|
60
|
-
//# sourceMappingURL=useComposedCssClasses.js.map
|
|
61
|
+
//# sourceMappingURL=useComposedCssClasses.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComposedCssClasses.js","
|
|
1
|
+
{"version":3,"file":"useComposedCssClasses.js","sources":["../../../../src/hooks/useComposedCssClasses.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes.\n *\n * @remarks\n * Tailwind classes will be merged without conflict, with custom classes having higher priority\n * than built-in ones.\n *\n * @example\n * Suppose a component has built-in classes of `{ container: 'px-4 text-slate-700' }`.\n *\n * Passing in the custom classes:\n *\n * ```ts\n * { container: 'text-red-200 mb-3' }\n * ```\n *\n * results in the merged classes of:\n *\n * ```ts\n * { container: 'px-4 text-red-200 mb-3' }\n * ```\n *\n * @public\n *\n * @param builtInClasses - The component's built-in tailwind classes\n * @param customClasses - The custom tailwind classes to merge with the built-in ones\n * @returns The composed CSS classes\n */\nexport function useComposedCssClasses<\n ClassInterface extends Partial<Record<keyof ClassInterface, string | object>>\n>(\n builtInClasses: Readonly<ClassInterface>,\n customClasses?: Partial<ClassInterface>\n): ClassInterface {\n return useMemo(() => {\n const mergeCssClasses = (\n builtInClasses: Readonly<ClassInterface>,\n customClasses?: Partial<ClassInterface>\n ) => {\n const mergedCssClasses = { ...builtInClasses };\n if (!customClasses) {\n return mergedCssClasses;\n }\n Object.keys(customClasses).forEach((key) => {\n const builtIn = builtInClasses[key];\n const custom = customClasses[key];\n if (!builtIn || !custom) {\n mergedCssClasses[key] = custom || builtIn;\n } else if (typeof builtIn === \"object\" && typeof custom === \"object\") {\n mergedCssClasses[key] = mergeCssClasses(builtIn, custom);\n } else if (typeof builtIn === \"string\" && typeof custom === \"string\") {\n mergedCssClasses[key] = twMerge(builtIn, custom);\n }\n });\n return mergedCssClasses;\n };\n return mergeCssClasses(builtInClasses, customClasses);\n }, [builtInClasses, customClasses]);\n}\n"],"names":["useMemo","twMerge"],"mappings":";;;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AACa,SAAA,qBAAqB,CAGnC,cAAwC,EACxC,aAAuC,EAAA;IAEvC,OAAOA,aAAO,CAAC,MAAK;AAClB,QAAA,MAAM,eAAe,GAAG,CACtB,cAAwC,EACxC,aAAuC,KACrC;AACF,YAAA,MAAM,gBAAgB,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;YAC/C,IAAI,CAAC,aAAa,EAAE;AAClB,gBAAA,OAAO,gBAAgB,CAAC;AACzB,aAAA;YACD,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACzC,gBAAA,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AACpC,gBAAA,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAClC,gBAAA,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,EAAE;AACvB,oBAAA,gBAAgB,CAAC,GAAG,CAAC,GAAG,MAAM,IAAI,OAAO,CAAC;AAC3C,iBAAA;qBAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;oBACpE,gBAAgB,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC1D,iBAAA;qBAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;oBACpE,gBAAgB,CAAC,GAAG,CAAC,GAAGC,qBAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAClD,iBAAA;AACH,aAAC,CAAC,CAAC;AACH,YAAA,OAAO,gBAAgB,CAAC;AAC1B,SAAC,CAAC;AACF,QAAA,OAAO,eAAe,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;AACxD,KAAC,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC;AACtC;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chatHeadlessReact = require('@yext/chat-headless-react');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
6
|
/**
|
|
7
7
|
* Returns a default handler function for API errors. It will log the error and
|
|
8
8
|
* add a default error message to state.
|
|
@@ -10,15 +10,16 @@ const react_1 = require("react");
|
|
|
10
10
|
* @internal
|
|
11
11
|
*/
|
|
12
12
|
function useDefaultHandleApiError() {
|
|
13
|
-
const chat =
|
|
14
|
-
return
|
|
13
|
+
const chat = chatHeadlessReact.useChatActions();
|
|
14
|
+
return react.useCallback((e) => {
|
|
15
15
|
console.error(e);
|
|
16
16
|
chat.addMessage({
|
|
17
17
|
text: "Sorry, I'm unable to respond at the moment. Please try again later!",
|
|
18
|
-
source:
|
|
18
|
+
source: chatHeadlessReact.MessageSource.BOT,
|
|
19
19
|
timestamp: new Date().toISOString(),
|
|
20
20
|
});
|
|
21
21
|
}, [chat]);
|
|
22
22
|
}
|
|
23
|
+
|
|
23
24
|
exports.useDefaultHandleApiError = useDefaultHandleApiError;
|
|
24
|
-
//# sourceMappingURL=useDefaultHandleApiError.js.map
|
|
25
|
+
//# sourceMappingURL=useDefaultHandleApiError.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDefaultHandleApiError.js","
|
|
1
|
+
{"version":3,"file":"useDefaultHandleApiError.js","sources":["../../../../src/hooks/useDefaultHandleApiError.ts"],"sourcesContent":["import { MessageSource, useChatActions } from \"@yext/chat-headless-react\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a default handler function for API errors. It will log the error and\n * add a default error message to state.\n *\n * @internal\n */\nexport function useDefaultHandleApiError() {\n const chat = useChatActions();\n\n return useCallback(\n (e: unknown) => {\n console.error(e);\n chat.addMessage({\n text: \"Sorry, I'm unable to respond at the moment. Please try again later!\",\n source: MessageSource.BOT,\n timestamp: new Date().toISOString(),\n });\n },\n [chat]\n );\n}\n"],"names":["useChatActions","useCallback","MessageSource"],"mappings":";;;;;AAGA;;;;;AAKG;SACa,wBAAwB,GAAA;AACtC,IAAA,MAAM,IAAI,GAAGA,gCAAc,EAAE,CAAC;AAE9B,IAAA,OAAOC,iBAAW,CAChB,CAAC,CAAU,KAAI;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,IAAI,CAAC,UAAU,CAAC;AACd,YAAA,IAAI,EAAE,qEAAqE;YAC3E,MAAM,EAAEC,+BAAa,CAAC,GAAG;AACzB,YAAA,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;AACpC,SAAA,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;AACJ;;;;"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const package_json_1 = __importDefault(require("../../package.json"));
|
|
9
|
-
const react_1 = require("react");
|
|
10
|
-
const { version } = package_json_1.default;
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chatHeadlessReact = require('@yext/chat-headless-react');
|
|
4
|
+
var _package = require('../../package.json.js');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
|
|
7
|
+
const { version } = _package.default;
|
|
11
8
|
/**
|
|
12
9
|
* Returns a function to send requests to Yext Analytics API.
|
|
13
10
|
* The payload will automatically includes chat-ui-react's
|
|
@@ -16,11 +13,12 @@ const { version } = package_json_1.default;
|
|
|
16
13
|
* @internal
|
|
17
14
|
*/
|
|
18
15
|
function useReportAnalyticsEvent() {
|
|
19
|
-
const chat =
|
|
16
|
+
const chat = chatHeadlessReact.useChatActions();
|
|
20
17
|
chat.addClientSdk({
|
|
21
18
|
CHAT_UI_REACT: version,
|
|
22
19
|
});
|
|
23
|
-
return
|
|
20
|
+
return react.useCallback((payload) => chat.report(payload), [chat]);
|
|
24
21
|
}
|
|
22
|
+
|
|
25
23
|
exports.useReportAnalyticsEvent = useReportAnalyticsEvent;
|
|
26
|
-
//# sourceMappingURL=useReportAnalyticsEvent.js.map
|
|
24
|
+
//# sourceMappingURL=useReportAnalyticsEvent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useReportAnalyticsEvent.js","
|
|
1
|
+
{"version":3,"file":"useReportAnalyticsEvent.js","sources":["../../../../src/hooks/useReportAnalyticsEvent.ts"],"sourcesContent":["import { ChatHeadless, useChatActions } from \"@yext/chat-headless-react\";\nimport packageJson from \"../../package.json\";\nimport { useCallback } from \"react\";\nconst { version } = packageJson;\n\n/**\n * Returns a function to send requests to Yext Analytics API.\n * The payload will automatically includes chat-ui-react's\n * package version for \"clientSdk\" field.\n *\n * @internal\n */\nexport function useReportAnalyticsEvent(): ChatHeadless[\"report\"] {\n const chat = useChatActions();\n chat.addClientSdk({\n CHAT_UI_REACT: version,\n });\n return useCallback((payload) => chat.report(payload), [chat]);\n}\n"],"names":["packageJson","useChatActions","useCallback"],"mappings":";;;;;;AAGA,MAAM,EAAE,OAAO,EAAE,GAAGA,gBAAW,CAAC;AAEhC;;;;;;AAMG;SACa,uBAAuB,GAAA;AACrC,IAAA,MAAM,IAAI,GAAGC,gCAAc,EAAE,CAAC;IAC9B,IAAI,CAAC,YAAY,CAAC;AAChB,QAAA,aAAa,EAAE,OAAO;AACvB,KAAA,CAAC,CAAC;AACH,IAAA,OAAOC,iBAAW,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
|
|
5
5
|
function ArrowIcon() {
|
|
6
|
-
return (
|
|
6
|
+
return (jsxRuntime.jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeLinecap: "square", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M10 5V15" }), jsxRuntime.jsx("path", { d: "M15 8.84615L10 4L5 8.84615" })] }));
|
|
7
7
|
}
|
|
8
|
+
|
|
8
9
|
exports.ArrowIcon = ArrowIcon;
|
|
9
|
-
//# sourceMappingURL=Arrow.js.map
|
|
10
|
+
//# sourceMappingURL=Arrow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Arrow.js","
|
|
1
|
+
{"version":3,"file":"Arrow.js","sources":["../../../../src/icons/Arrow.tsx"],"sourcesContent":["export function ArrowIcon(): JSX.Element {\n return (\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M10 5V15\" />\n <path d=\"M15 8.84615L10 4L5 8.84615\" />\n </svg>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;SAAgB,SAAS,GAAA;AACvB,IAAA,QACEA,eACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,QAAQ,EACtB,KAAK,EAAC,4BAA4B,EAAA,QAAA,EAAA,CAElCC,yBAAM,CAAC,EAAC,UAAU,EAAG,CAAA,EACrBA,yBAAM,CAAC,EAAC,4BAA4B,EAAG,CAAA,CAAA,EAAA,CACnC,EACN;AACJ;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
|
|
5
5
|
function ChatIcon({ className }) {
|
|
6
|
-
return (
|
|
6
|
+
return (jsxRuntime.jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M15.3028 12.8082L15.1553 12.9342L15.1729 13.1273L15.3973 15.5959C15.3983 15.6063 15.3964 15.6126 15.3943 15.617C15.3918 15.6223 15.3873 15.6283 15.3805 15.6332C15.3737 15.6382 15.3667 15.6408 15.3608 15.6416C15.356 15.6422 15.3495 15.6422 15.3398 15.6381L12.3578 14.3956L12.245 14.3486L12.1261 14.3771C11.4553 14.5381 10.7412 14.625 10 14.625C5.9718 14.625 2.875 12.099 2.875 9.16667C2.875 6.23436 5.9718 3.70834 10 3.70834C14.0282 3.70834 17.125 6.23436 17.125 9.16667C17.125 10.5493 16.4496 11.8289 15.3028 12.8082Z", fill: "white", stroke: "white", strokeWidth: "0.75" }), jsxRuntime.jsx("path", { d: "M7 7.54584C7 7.38015 7.13431 7.24584 7.3 7.24584H8.725C8.89069 7.24584 9.025 7.38015 9.025 7.54584C9.025 7.71152 8.89069 7.84584 8.725 7.84584H7.3C7.13431 7.84584 7 7.71152 7 7.54584Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.625 7.54584C9.625 7.15233 9.944 6.83334 10.3375 6.83334H12.2875C12.681 6.83334 13 7.15233 13 7.54584C13 7.93934 12.681 8.25834 12.2875 8.25834H10.3375C9.944 8.25834 9.625 7.93934 9.625 7.54584Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M7 9.30834C7 9.14265 7.13431 9.00834 7.3 9.00834H12.7C12.8657 9.00834 13 9.14265 13 9.30834C13 9.47402 12.8657 9.60834 12.7 9.60834H7.3C7.13431 9.60834 7 9.47402 7 9.30834Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M7 11.0708C7 10.6773 7.319 10.3583 7.7125 10.3583H8.1625C8.556 10.3583 8.875 10.6773 8.875 11.0708C8.875 11.4643 8.556 11.7833 8.1625 11.7833H7.7125C7.319 11.7833 7 11.4643 7 11.0708Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.475 11.0708C9.475 10.9052 9.60931 10.7708 9.775 10.7708H12.7C12.8657 10.7708 13 10.9052 13 11.0708C13 11.2365 12.8657 11.3708 12.7 11.3708H9.775C9.60931 11.3708 9.475 11.2365 9.475 11.0708Z", fill: "currentColor" })] }));
|
|
7
7
|
}
|
|
8
|
+
|
|
8
9
|
exports.ChatIcon = ChatIcon;
|
|
9
|
-
//# sourceMappingURL=Chat.js.map
|
|
10
|
+
//# sourceMappingURL=Chat.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.js","
|
|
1
|
+
{"version":3,"file":"Chat.js","sources":["../../../../src/icons/Chat.tsx"],"sourcesContent":["export function ChatIcon({ className }: { className?: string }): JSX.Element {\n return (\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15.3028 12.8082L15.1553 12.9342L15.1729 13.1273L15.3973 15.5959C15.3983 15.6063 15.3964 15.6126 15.3943 15.617C15.3918 15.6223 15.3873 15.6283 15.3805 15.6332C15.3737 15.6382 15.3667 15.6408 15.3608 15.6416C15.356 15.6422 15.3495 15.6422 15.3398 15.6381L12.3578 14.3956L12.245 14.3486L12.1261 14.3771C11.4553 14.5381 10.7412 14.625 10 14.625C5.9718 14.625 2.875 12.099 2.875 9.16667C2.875 6.23436 5.9718 3.70834 10 3.70834C14.0282 3.70834 17.125 6.23436 17.125 9.16667C17.125 10.5493 16.4496 11.8289 15.3028 12.8082Z\"\n fill=\"white\"\n stroke=\"white\"\n strokeWidth=\"0.75\"\n />\n <path\n d=\"M7 7.54584C7 7.38015 7.13431 7.24584 7.3 7.24584H8.725C8.89069 7.24584 9.025 7.38015 9.025 7.54584C9.025 7.71152 8.89069 7.84584 8.725 7.84584H7.3C7.13431 7.84584 7 7.71152 7 7.54584Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.625 7.54584C9.625 7.15233 9.944 6.83334 10.3375 6.83334H12.2875C12.681 6.83334 13 7.15233 13 7.54584C13 7.93934 12.681 8.25834 12.2875 8.25834H10.3375C9.944 8.25834 9.625 7.93934 9.625 7.54584Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M7 9.30834C7 9.14265 7.13431 9.00834 7.3 9.00834H12.7C12.8657 9.00834 13 9.14265 13 9.30834C13 9.47402 12.8657 9.60834 12.7 9.60834H7.3C7.13431 9.60834 7 9.47402 7 9.30834Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M7 11.0708C7 10.6773 7.319 10.3583 7.7125 10.3583H8.1625C8.556 10.3583 8.875 10.6773 8.875 11.0708C8.875 11.4643 8.556 11.7833 8.1625 11.7833H7.7125C7.319 11.7833 7 11.4643 7 11.0708Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.475 11.0708C9.475 10.9052 9.60931 10.7708 9.775 10.7708H12.7C12.8657 10.7708 13 10.9052 13 11.0708C13 11.2365 12.8657 11.3708 12.7 11.3708H9.775C9.60931 11.3708 9.475 11.2365 9.475 11.0708Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAAgB,SAAA,QAAQ,CAAC,EAAE,SAAS,EAA0B,EAAA;IAC5D,QACEA,yBACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElCC,cACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,ugBAAugB,EACzgB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,EACd,WAAW,EAAC,MAAM,EAAA,CAClB,EACFA,cAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,yLAAyL,EAC3L,IAAI,EAAC,cAAc,EAAA,CACnB,EACFA,cACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,sMAAsM,EACxM,IAAI,EAAC,cAAc,GACnB,EACFA,cAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,8KAA8K,EAChL,IAAI,EAAC,cAAc,GACnB,EACFA,cAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,yLAAyL,EAC3L,IAAI,EAAC,cAAc,EACnB,CAAA,EACFA,yBACE,CAAC,EAAC,kMAAkM,EACpM,IAAI,EAAC,cAAc,EAAA,CACnB,CACE,EAAA,CAAA,EACN;AACJ;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
|
|
5
5
|
function CrossIcon({ className }) {
|
|
6
|
-
return (
|
|
6
|
+
return (jsxRuntime.jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", stroke: "currentColor", className: className, xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M14 14L6 6", strokeLinecap: "square", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M14 6L6 14", strokeLinecap: "square", strokeLinejoin: "round" })] }));
|
|
7
7
|
}
|
|
8
|
+
|
|
8
9
|
exports.CrossIcon = CrossIcon;
|
|
9
|
-
//# sourceMappingURL=Cross.js.map
|
|
10
|
+
//# sourceMappingURL=Cross.js.map
|