@yext/chat-ui-react 0.12.1 → 0.12.3

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.
Files changed (217) hide show
  1. package/THIRD-PARTY-NOTICES +3 -3
  2. package/package.json +15 -4
  3. package/lib/bundle.css +0 -1
  4. package/lib/commonjs/package.json.js +0 -6
  5. package/lib/commonjs/package.json.js.map +0 -1
  6. package/lib/commonjs/src/components/ChatHeader.d.ts +0 -53
  7. package/lib/commonjs/src/components/ChatHeader.d.ts.map +0 -1
  8. package/lib/commonjs/src/components/ChatHeader.js +0 -52
  9. package/lib/commonjs/src/components/ChatHeader.js.map +0 -1
  10. package/lib/commonjs/src/components/ChatInput.d.ts +0 -60
  11. package/lib/commonjs/src/components/ChatInput.d.ts.map +0 -1
  12. package/lib/commonjs/src/components/ChatInput.js +0 -76
  13. package/lib/commonjs/src/components/ChatInput.js.map +0 -1
  14. package/lib/commonjs/src/components/ChatPanel.d.ts +0 -74
  15. package/lib/commonjs/src/components/ChatPanel.d.ts.map +0 -1
  16. package/lib/commonjs/src/components/ChatPanel.js +0 -178
  17. package/lib/commonjs/src/components/ChatPanel.js.map +0 -1
  18. package/lib/commonjs/src/components/ChatPopUp.d.ts +0 -76
  19. package/lib/commonjs/src/components/ChatPopUp.d.ts.map +0 -1
  20. package/lib/commonjs/src/components/ChatPopUp.js +0 -160
  21. package/lib/commonjs/src/components/ChatPopUp.js.map +0 -1
  22. package/lib/commonjs/src/components/FeedbackButtons.d.ts +0 -35
  23. package/lib/commonjs/src/components/FeedbackButtons.d.ts.map +0 -1
  24. package/lib/commonjs/src/components/FeedbackButtons.js +0 -59
  25. package/lib/commonjs/src/components/FeedbackButtons.js.map +0 -1
  26. package/lib/commonjs/src/components/InitialMessagePopUp.d.ts +0 -33
  27. package/lib/commonjs/src/components/InitialMessagePopUp.d.ts.map +0 -1
  28. package/lib/commonjs/src/components/InitialMessagePopUp.js +0 -44
  29. package/lib/commonjs/src/components/InitialMessagePopUp.js.map +0 -1
  30. package/lib/commonjs/src/components/LoadingDots.d.ts +0 -10
  31. package/lib/commonjs/src/components/LoadingDots.d.ts.map +0 -1
  32. package/lib/commonjs/src/components/LoadingDots.js +0 -23
  33. package/lib/commonjs/src/components/LoadingDots.js.map +0 -1
  34. package/lib/commonjs/src/components/Markdown.d.ts +0 -39
  35. package/lib/commonjs/src/components/Markdown.d.ts.map +0 -1
  36. package/lib/commonjs/src/components/Markdown.js +0 -72
  37. package/lib/commonjs/src/components/Markdown.js.map +0 -1
  38. package/lib/commonjs/src/components/MessageBubble.d.ts +0 -64
  39. package/lib/commonjs/src/components/MessageBubble.d.ts.map +0 -1
  40. package/lib/commonjs/src/components/MessageBubble.js +0 -77
  41. package/lib/commonjs/src/components/MessageBubble.js.map +0 -1
  42. package/lib/commonjs/src/components/MessageSuggestions.d.ts +0 -37
  43. package/lib/commonjs/src/components/MessageSuggestions.d.ts.map +0 -1
  44. package/lib/commonjs/src/components/MessageSuggestions.js +0 -55
  45. package/lib/commonjs/src/components/MessageSuggestions.js.map +0 -1
  46. package/lib/commonjs/src/components/index.d.ts +0 -14
  47. package/lib/commonjs/src/components/index.d.ts.map +0 -1
  48. package/lib/commonjs/src/hooks/index.d.ts +0 -3
  49. package/lib/commonjs/src/hooks/index.d.ts.map +0 -1
  50. package/lib/commonjs/src/hooks/useComposedCssClasses.d.ts +0 -30
  51. package/lib/commonjs/src/hooks/useComposedCssClasses.d.ts.map +0 -1
  52. package/lib/commonjs/src/hooks/useComposedCssClasses.js +0 -61
  53. package/lib/commonjs/src/hooks/useComposedCssClasses.js.map +0 -1
  54. package/lib/commonjs/src/hooks/useDefaultHandleApiError.d.ts +0 -8
  55. package/lib/commonjs/src/hooks/useDefaultHandleApiError.d.ts.map +0 -1
  56. package/lib/commonjs/src/hooks/useDefaultHandleApiError.js +0 -25
  57. package/lib/commonjs/src/hooks/useDefaultHandleApiError.js.map +0 -1
  58. package/lib/commonjs/src/hooks/useFetchInitialMessage.d.ts +0 -13
  59. package/lib/commonjs/src/hooks/useFetchInitialMessage.d.ts.map +0 -1
  60. package/lib/commonjs/src/hooks/useFetchInitialMessage.js +0 -41
  61. package/lib/commonjs/src/hooks/useFetchInitialMessage.js.map +0 -1
  62. package/lib/commonjs/src/hooks/useReportAnalyticsEvent.d.ts +0 -8
  63. package/lib/commonjs/src/hooks/useReportAnalyticsEvent.d.ts.map +0 -1
  64. package/lib/commonjs/src/hooks/useReportAnalyticsEvent.js +0 -21
  65. package/lib/commonjs/src/hooks/useReportAnalyticsEvent.js.map +0 -1
  66. package/lib/commonjs/src/hooks/useSendMessageWithRetries.d.ts +0 -17
  67. package/lib/commonjs/src/hooks/useSendMessageWithRetries.d.ts.map +0 -1
  68. package/lib/commonjs/src/hooks/useSendMessageWithRetries.js +0 -54
  69. package/lib/commonjs/src/hooks/useSendMessageWithRetries.js.map +0 -1
  70. package/lib/commonjs/src/icons/Arrow.d.ts +0 -3
  71. package/lib/commonjs/src/icons/Arrow.d.ts.map +0 -1
  72. package/lib/commonjs/src/icons/Arrow.js +0 -16
  73. package/lib/commonjs/src/icons/Arrow.js.map +0 -1
  74. package/lib/commonjs/src/icons/Chat.d.ts +0 -5
  75. package/lib/commonjs/src/icons/Chat.d.ts.map +0 -1
  76. package/lib/commonjs/src/icons/Chat.js +0 -20
  77. package/lib/commonjs/src/icons/Chat.js.map +0 -1
  78. package/lib/commonjs/src/icons/Cross.d.ts +0 -5
  79. package/lib/commonjs/src/icons/Cross.d.ts.map +0 -1
  80. package/lib/commonjs/src/icons/Cross.js +0 -16
  81. package/lib/commonjs/src/icons/Cross.js.map +0 -1
  82. package/lib/commonjs/src/icons/DualSync.d.ts +0 -5
  83. package/lib/commonjs/src/icons/DualSync.d.ts.map +0 -1
  84. package/lib/commonjs/src/icons/DualSync.js +0 -16
  85. package/lib/commonjs/src/icons/DualSync.js.map +0 -1
  86. package/lib/commonjs/src/icons/ThumbsDown.d.ts +0 -5
  87. package/lib/commonjs/src/icons/ThumbsDown.d.ts.map +0 -1
  88. package/lib/commonjs/src/icons/ThumbsDown.js +0 -15
  89. package/lib/commonjs/src/icons/ThumbsDown.js.map +0 -1
  90. package/lib/commonjs/src/icons/ThumbsDownFill.d.ts +0 -5
  91. package/lib/commonjs/src/icons/ThumbsDownFill.d.ts.map +0 -1
  92. package/lib/commonjs/src/icons/ThumbsDownFill.js +0 -15
  93. package/lib/commonjs/src/icons/ThumbsDownFill.js.map +0 -1
  94. package/lib/commonjs/src/icons/ThumbsUp.d.ts +0 -5
  95. package/lib/commonjs/src/icons/ThumbsUp.d.ts.map +0 -1
  96. package/lib/commonjs/src/icons/ThumbsUp.js +0 -15
  97. package/lib/commonjs/src/icons/ThumbsUp.js.map +0 -1
  98. package/lib/commonjs/src/icons/ThumbsUpFill.d.ts +0 -5
  99. package/lib/commonjs/src/icons/ThumbsUpFill.d.ts.map +0 -1
  100. package/lib/commonjs/src/icons/ThumbsUpFill.js +0 -15
  101. package/lib/commonjs/src/icons/ThumbsUpFill.js.map +0 -1
  102. package/lib/commonjs/src/index.d.ts +0 -3
  103. package/lib/commonjs/src/index.d.ts.map +0 -1
  104. package/lib/commonjs/src/index.js +0 -20
  105. package/lib/commonjs/src/index.js.map +0 -1
  106. package/lib/commonjs/src/tsdoc-metadata.json +0 -11
  107. package/lib/commonjs/src/utils/withStylelessCssClasses.d.ts +0 -17
  108. package/lib/commonjs/src/utils/withStylelessCssClasses.d.ts.map +0 -1
  109. package/lib/commonjs/src/utils/withStylelessCssClasses.js +0 -30
  110. package/lib/commonjs/src/utils/withStylelessCssClasses.js.map +0 -1
  111. package/lib/esm/index.d.ts +0 -411
  112. package/lib/esm/package.json.mjs +0 -4
  113. package/lib/esm/package.json.mjs.map +0 -1
  114. package/lib/esm/src/components/ChatHeader.d.ts +0 -53
  115. package/lib/esm/src/components/ChatHeader.d.ts.map +0 -1
  116. package/lib/esm/src/components/ChatHeader.mjs +0 -46
  117. package/lib/esm/src/components/ChatHeader.mjs.map +0 -1
  118. package/lib/esm/src/components/ChatInput.d.ts +0 -60
  119. package/lib/esm/src/components/ChatInput.d.ts.map +0 -1
  120. package/lib/esm/src/components/ChatInput.mjs +0 -69
  121. package/lib/esm/src/components/ChatInput.mjs.map +0 -1
  122. package/lib/esm/src/components/ChatPanel.d.ts +0 -74
  123. package/lib/esm/src/components/ChatPanel.d.ts.map +0 -1
  124. package/lib/esm/src/components/ChatPanel.mjs +0 -169
  125. package/lib/esm/src/components/ChatPanel.mjs.map +0 -1
  126. package/lib/esm/src/components/ChatPopUp.d.ts +0 -76
  127. package/lib/esm/src/components/ChatPopUp.d.ts.map +0 -1
  128. package/lib/esm/src/components/ChatPopUp.mjs +0 -154
  129. package/lib/esm/src/components/ChatPopUp.mjs.map +0 -1
  130. package/lib/esm/src/components/FeedbackButtons.d.ts +0 -35
  131. package/lib/esm/src/components/FeedbackButtons.d.ts.map +0 -1
  132. package/lib/esm/src/components/FeedbackButtons.mjs +0 -53
  133. package/lib/esm/src/components/FeedbackButtons.mjs.map +0 -1
  134. package/lib/esm/src/components/InitialMessagePopUp.d.ts +0 -33
  135. package/lib/esm/src/components/InitialMessagePopUp.d.ts.map +0 -1
  136. package/lib/esm/src/components/InitialMessagePopUp.mjs +0 -38
  137. package/lib/esm/src/components/InitialMessagePopUp.mjs.map +0 -1
  138. package/lib/esm/src/components/LoadingDots.d.ts +0 -10
  139. package/lib/esm/src/components/LoadingDots.d.ts.map +0 -1
  140. package/lib/esm/src/components/LoadingDots.mjs +0 -17
  141. package/lib/esm/src/components/LoadingDots.mjs.map +0 -1
  142. package/lib/esm/src/components/Markdown.d.ts +0 -39
  143. package/lib/esm/src/components/Markdown.d.ts.map +0 -1
  144. package/lib/esm/src/components/Markdown.mjs +0 -62
  145. package/lib/esm/src/components/Markdown.mjs.map +0 -1
  146. package/lib/esm/src/components/MessageBubble.d.ts +0 -64
  147. package/lib/esm/src/components/MessageBubble.d.ts.map +0 -1
  148. package/lib/esm/src/components/MessageBubble.mjs +0 -71
  149. package/lib/esm/src/components/MessageBubble.mjs.map +0 -1
  150. package/lib/esm/src/components/MessageSuggestions.d.ts +0 -37
  151. package/lib/esm/src/components/MessageSuggestions.d.ts.map +0 -1
  152. package/lib/esm/src/components/MessageSuggestions.mjs +0 -49
  153. package/lib/esm/src/components/MessageSuggestions.mjs.map +0 -1
  154. package/lib/esm/src/components/index.d.ts +0 -14
  155. package/lib/esm/src/components/index.d.ts.map +0 -1
  156. package/lib/esm/src/hooks/index.d.ts +0 -3
  157. package/lib/esm/src/hooks/index.d.ts.map +0 -1
  158. package/lib/esm/src/hooks/useComposedCssClasses.d.ts +0 -30
  159. package/lib/esm/src/hooks/useComposedCssClasses.d.ts.map +0 -1
  160. package/lib/esm/src/hooks/useComposedCssClasses.mjs +0 -59
  161. package/lib/esm/src/hooks/useComposedCssClasses.mjs.map +0 -1
  162. package/lib/esm/src/hooks/useDefaultHandleApiError.d.ts +0 -8
  163. package/lib/esm/src/hooks/useDefaultHandleApiError.d.ts.map +0 -1
  164. package/lib/esm/src/hooks/useDefaultHandleApiError.mjs +0 -23
  165. package/lib/esm/src/hooks/useDefaultHandleApiError.mjs.map +0 -1
  166. package/lib/esm/src/hooks/useFetchInitialMessage.d.ts +0 -13
  167. package/lib/esm/src/hooks/useFetchInitialMessage.d.ts.map +0 -1
  168. package/lib/esm/src/hooks/useFetchInitialMessage.mjs +0 -39
  169. package/lib/esm/src/hooks/useFetchInitialMessage.mjs.map +0 -1
  170. package/lib/esm/src/hooks/useReportAnalyticsEvent.d.ts +0 -8
  171. package/lib/esm/src/hooks/useReportAnalyticsEvent.d.ts.map +0 -1
  172. package/lib/esm/src/hooks/useReportAnalyticsEvent.mjs +0 -19
  173. package/lib/esm/src/hooks/useReportAnalyticsEvent.mjs.map +0 -1
  174. package/lib/esm/src/hooks/useSendMessageWithRetries.d.ts +0 -17
  175. package/lib/esm/src/hooks/useSendMessageWithRetries.d.ts.map +0 -1
  176. package/lib/esm/src/hooks/useSendMessageWithRetries.mjs +0 -52
  177. package/lib/esm/src/hooks/useSendMessageWithRetries.mjs.map +0 -1
  178. package/lib/esm/src/icons/Arrow.d.ts +0 -3
  179. package/lib/esm/src/icons/Arrow.d.ts.map +0 -1
  180. package/lib/esm/src/icons/Arrow.mjs +0 -10
  181. package/lib/esm/src/icons/Arrow.mjs.map +0 -1
  182. package/lib/esm/src/icons/Chat.d.ts +0 -5
  183. package/lib/esm/src/icons/Chat.d.ts.map +0 -1
  184. package/lib/esm/src/icons/Chat.mjs +0 -14
  185. package/lib/esm/src/icons/Chat.mjs.map +0 -1
  186. package/lib/esm/src/icons/Cross.d.ts +0 -5
  187. package/lib/esm/src/icons/Cross.d.ts.map +0 -1
  188. package/lib/esm/src/icons/Cross.mjs +0 -10
  189. package/lib/esm/src/icons/Cross.mjs.map +0 -1
  190. package/lib/esm/src/icons/DualSync.d.ts +0 -5
  191. package/lib/esm/src/icons/DualSync.d.ts.map +0 -1
  192. package/lib/esm/src/icons/DualSync.mjs +0 -10
  193. package/lib/esm/src/icons/DualSync.mjs.map +0 -1
  194. package/lib/esm/src/icons/ThumbsDown.d.ts +0 -5
  195. package/lib/esm/src/icons/ThumbsDown.d.ts.map +0 -1
  196. package/lib/esm/src/icons/ThumbsDown.mjs +0 -9
  197. package/lib/esm/src/icons/ThumbsDown.mjs.map +0 -1
  198. package/lib/esm/src/icons/ThumbsDownFill.d.ts +0 -5
  199. package/lib/esm/src/icons/ThumbsDownFill.d.ts.map +0 -1
  200. package/lib/esm/src/icons/ThumbsDownFill.mjs +0 -9
  201. package/lib/esm/src/icons/ThumbsDownFill.mjs.map +0 -1
  202. package/lib/esm/src/icons/ThumbsUp.d.ts +0 -5
  203. package/lib/esm/src/icons/ThumbsUp.d.ts.map +0 -1
  204. package/lib/esm/src/icons/ThumbsUp.mjs +0 -9
  205. package/lib/esm/src/icons/ThumbsUp.mjs.map +0 -1
  206. package/lib/esm/src/icons/ThumbsUpFill.d.ts +0 -5
  207. package/lib/esm/src/icons/ThumbsUpFill.d.ts.map +0 -1
  208. package/lib/esm/src/icons/ThumbsUpFill.mjs +0 -9
  209. package/lib/esm/src/icons/ThumbsUpFill.mjs.map +0 -1
  210. package/lib/esm/src/index.d.ts +0 -3
  211. package/lib/esm/src/index.d.ts.map +0 -1
  212. package/lib/esm/src/index.mjs +0 -8
  213. package/lib/esm/src/index.mjs.map +0 -1
  214. package/lib/esm/src/utils/withStylelessCssClasses.d.ts +0 -17
  215. package/lib/esm/src/utils/withStylelessCssClasses.d.ts.map +0 -1
  216. package/lib/esm/src/utils/withStylelessCssClasses.mjs +0 -28
  217. package/lib/esm/src/utils/withStylelessCssClasses.mjs.map +0 -1
@@ -1,154 +0,0 @@
1
- import React, { useEffect, useState, useCallback } from 'react';
2
- import { ChatIcon } from '../icons/Chat.mjs';
3
- import { ChatPanel } from './ChatPanel.mjs';
4
- import { ChatHeader } from './ChatHeader.mjs';
5
- import { twMerge } from 'tailwind-merge';
6
- import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
7
- import { useReportAnalyticsEvent } from '../hooks/useReportAnalyticsEvent.mjs';
8
- import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
9
- import { InitialMessagePopUp } from './InitialMessagePopUp.mjs';
10
- import { useChatState } from '@yext/chat-headless-react';
11
- import { useFetchInitialMessage } from '../hooks/useFetchInitialMessage.mjs';
12
-
13
- const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 ";
14
- const builtInCssClasses = withStylelessCssClasses("PopUp", {
15
- container: "transition-all",
16
- panel: fixedPosition +
17
- "w-80 max-[480px]:right-0 max-[480px]:bottom-0 max-[480px]:w-full max-[480px]:h-full lg:w-96 h-[75vh]",
18
- panel__display: "duration-300 translate-y-0",
19
- panel__hidden: "duration-300 translate-y-[20%] opacity-0 invisible",
20
- closedPopupContainer: fixedPosition +
21
- "flex gap-x-2.5 items-center hover:-translate-y-2 duration-150",
22
- closedPopupContainer__display: "duration-300 transform translate-y-0",
23
- closedPopupContainer__hidden: "duration-300 transform translate-y-[20%] opacity-0 invisible",
24
- button: "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",
25
- buttonIcon: "text-blue-600 w-[28px] h-[28px] lg:w-[40px] lg:h-[40px]",
26
- ctaLabelContainer: "max-w-60 -mr-8 line-clamp-1",
27
- ctaLabel: "p-3 pr-8 flex items-center whitespace-nowrap animate-expand-left font-bold rounded-l-full bg-white text-blue-700 h-10 lg:h-14 text-sm lg:text-base",
28
- notification: "fixed animate-fade-in bg-red-700 -right-1 top-0 rounded-full w-5 lg:w-6 h-5 lg:h-6 items-center flex justify-center text-sm lg:text-base text-white",
29
- headerCssClasses: {
30
- container: "max-[480px]:rounded-none rounded-t-3xl",
31
- },
32
- panelCssClasses: {
33
- container: "max-[480px]:rounded-none rounded-3xl",
34
- inputContainer: "max-[480px]:rounded-none rounded-b-3xl",
35
- },
36
- });
37
- const popupLocalStorageKey = "YEXT_CHAT_OPEN_ON_LOAD";
38
- /**
39
- * A component that renders a popup button that displays and hides
40
- * a panel for chat bot interactions.
41
- *
42
- * @public
43
- *
44
- * @param props - {@link ChatPanelProps}
45
- */
46
- function ChatPopUp(props) {
47
- const { openPanelButtonIcon, customCssClasses, showRestartButton = true, onClose: customOnClose, handleError, openOnLoad = false, showInitialMessagePopUp = false, showHeartBeatAnimation = false, showUnreadNotification = false, ctaLabel, title, footer, isOpen, } = props;
48
- const reportAnalyticsEvent = useReportAnalyticsEvent();
49
- useEffect(() => {
50
- reportAnalyticsEvent({
51
- action: "CHAT_IMPRESSION",
52
- });
53
- }, [reportAnalyticsEvent]);
54
- const messages = useChatState((s) => s.conversation.messages);
55
- const [numReadMessages, setNumReadMessagesLength] = useState(0);
56
- const [numUnreadMessages, setNumUnreadMessagesLength] = useState(0);
57
- // Set the initial value of the local storage flag for opening on load only if it doesn't already exist
58
- if (window.localStorage.getItem(popupLocalStorageKey) === null) {
59
- window.localStorage.setItem(popupLocalStorageKey, openOnLoad ? "true" : "false");
60
- }
61
- const openOnLoadLocalStorage = window.localStorage.getItem(popupLocalStorageKey);
62
- /* Open panel on load if:
63
- - openOnLoad prop is true or there are messages in state (from browser storage), and local storage flag is true */
64
- const isOpenOnLoad = (messages.length > 1 && openOnLoadLocalStorage === "true") || openOnLoad;
65
- const { renderChat, showChat, showInitialMessage, toggleChat, closeChat, closeInitialMessage, } = usePanelState(isOpen, isOpenOnLoad, !ctaLabel && showInitialMessagePopUp);
66
- // only fetch initial message when ChatPanel is closed on load (otherwise, it will be fetched in ChatPanel)
67
- useFetchInitialMessage(showInitialMessagePopUp ? console.error : handleError, false, (showUnreadNotification || showInitialMessagePopUp) &&
68
- !renderChat &&
69
- !isOpenOnLoad);
70
- const onClick = useCallback(() => {
71
- toggleChat();
72
- window.localStorage.setItem(popupLocalStorageKey, "true");
73
- }, [toggleChat]);
74
- const onClose = useCallback(() => {
75
- closeChat();
76
- customOnClose?.();
77
- // consider all the messages are read while the panel was open
78
- setNumReadMessagesLength(messages.length);
79
- window.localStorage.setItem(popupLocalStorageKey, "false");
80
- }, [closeChat, customOnClose, messages.length]);
81
- useEffect(() => {
82
- // update number of unread messages if there are new messages added while the panel is closed
83
- setNumUnreadMessagesLength(messages.length - numReadMessages);
84
- }, [messages.length, numReadMessages]);
85
- const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
86
- const panelCssClasses = twMerge(cssClasses.panel, showChat ? cssClasses.panel__display : cssClasses.panel__hidden);
87
- const closedPopupContainerCssClasses = twMerge(cssClasses.closedPopupContainer, showChat
88
- ? cssClasses.closedPopupContainer__hidden
89
- : cssClasses.closedPopupContainer__display);
90
- return (React.createElement("div", { className: "yext-chat w-full h-full" },
91
- React.createElement("div", { className: cssClasses.container },
92
- React.createElement("div", { className: panelCssClasses, "aria-label": "Chat Popup Panel" }, renderChat && (React.createElement(ChatPanel, { ...props, customCssClasses: cssClasses.panelCssClasses, header: React.createElement(ChatHeader, { title: title, showRestartButton: showRestartButton, showCloseButton: true, onClose: onClose, customCssClasses: cssClasses.headerCssClasses }), footer: footer }))),
93
- React.createElement("div", { className: closedPopupContainerCssClasses, "aria-label": "Chat Closed Popup Container" },
94
- showInitialMessage && (React.createElement(InitialMessagePopUp, { onClose: closeInitialMessage, customCssClasses: cssClasses.initialMessagePopUpCssClasses })),
95
- ctaLabel && (
96
- // the div container is needed to islate the expand CSS animation
97
- React.createElement("div", { className: cssClasses.ctaLabelContainer },
98
- React.createElement("button", { onClick: onClick, "aria-label": "CTA Label", className: cssClasses.ctaLabel }, ctaLabel))),
99
- React.createElement("button", { "aria-label": "Chat Popup Button", onClick: onClick, className: cssClasses.button +
100
- (showHeartBeatAnimation && !!numUnreadMessages
101
- ? " animate-heartbeat"
102
- : "") },
103
- openPanelButtonIcon ?? (React.createElement(ChatIcon, { className: cssClasses.buttonIcon })),
104
- showUnreadNotification && !!numUnreadMessages && (React.createElement("div", { "aria-label": "Unread Messages Notification", className: cssClasses.notification }, numUnreadMessages)))))));
105
- }
106
- function usePanelState(isOpen, isOpenOnLoad, initialMessageVisible) {
107
- // control CSS behavior (fade-in/out animation) on open/close state of the panel.
108
- const [showChat, setShowChat] = useState(false);
109
- // control the actual DOM rendering of the panel. Start rendering on first open state
110
- // to avoid message requests immediately on load while the popup is still "hidden"
111
- const [renderChat, setRenderChat] = useState(false);
112
- const [showInitialMessage, setshowInitialMessage] = useState(initialMessageVisible);
113
- useEffect(() => {
114
- if (isOpen !== undefined) {
115
- setShowChat(isOpen);
116
- setRenderChat(isOpen);
117
- }
118
- }, [isOpen]);
119
- useEffect(() => {
120
- if (!renderChat && isOpenOnLoad && isOpen === undefined) {
121
- setShowChat(true);
122
- setRenderChat(true);
123
- setshowInitialMessage(false);
124
- }
125
- }, [renderChat, isOpen, isOpenOnLoad]);
126
- const toggleChat = useCallback(() => {
127
- if (isOpen !== undefined) {
128
- return;
129
- }
130
- setShowChat((prev) => !prev);
131
- setRenderChat(true);
132
- setshowInitialMessage(false);
133
- }, [isOpen]);
134
- const closeChat = useCallback(() => {
135
- if (isOpen !== undefined) {
136
- return;
137
- }
138
- setShowChat(false);
139
- }, [isOpen]);
140
- const closeInitialMessage = useCallback(() => {
141
- setshowInitialMessage(false);
142
- }, []);
143
- return {
144
- showChat,
145
- renderChat,
146
- showInitialMessage,
147
- toggleChat,
148
- closeChat,
149
- closeInitialMessage,
150
- };
151
- }
152
-
153
- export { ChatPopUp };
154
- //# sourceMappingURL=ChatPopUp.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChatPopUp.mjs","sources":["../../../../src/components/ChatPopUp.tsx"],"sourcesContent":["import React, { 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\";\nimport {\n InitialMessagePopUp,\n InitialMessagePopUpCssClasses,\n} from \"./InitialMessagePopUp\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport { useFetchInitialMessage } from \"../hooks/useFetchInitialMessage\";\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 buttonIcon?: string;\n ctaLabelContainer?: string;\n ctaLabel?: string;\n notification?: string;\n closedPopupContainer?: string;\n closedPopupContainer__display?: string;\n closedPopupContainer__hidden?: string;\n headerCssClasses?: ChatHeaderCssClasses;\n panelCssClasses?: ChatPanelCssClasses;\n initialMessagePopUpCssClasses?: InitialMessagePopUpCssClasses;\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 closedPopupContainer:\n fixedPosition +\n \"flex gap-x-2.5 items-center hover:-translate-y-2 duration-150\",\n closedPopupContainer__display: \"duration-300 transform translate-y-0\",\n closedPopupContainer__hidden:\n \"duration-300 transform translate-y-[20%] opacity-0 invisible\",\n button:\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\",\n buttonIcon: \"text-blue-600 w-[28px] h-[28px] lg:w-[40px] lg:h-[40px]\",\n ctaLabelContainer: \"max-w-60 -mr-8 line-clamp-1\",\n ctaLabel:\n \"p-3 pr-8 flex items-center whitespace-nowrap animate-expand-left font-bold rounded-l-full bg-white text-blue-700 h-10 lg:h-14 text-sm lg:text-base\",\n notification:\n \"fixed animate-fade-in bg-red-700 -right-1 top-0 rounded-full w-5 lg:w-6 h-5 lg:h-6 items-center flex justify-center text-sm lg:text-base text-white\",\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 },\n }\n);\nconst popupLocalStorageKey = \"YEXT_CHAT_OPEN_ON_LOAD\";\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 /** CSS classes for customizing the component styling. */\n customCssClasses?: ChatPopUpCssClasses;\n /** Whether to show the panel on load. Defaults to false. */\n openOnLoad?: boolean;\n /**\n * Whether to show the initial message popup when the panel is hidden on load.\n * Defaults to false.\n */\n showInitialMessagePopUp?: boolean;\n /**\n * Whether to show a heartbeat animation on the popup button when the panel is hidden.\n * Defaults to false.\n */\n showHeartBeatAnimation?: boolean;\n /**\n * Whether to show notification showing number of unread messages.\n * Defaults to false.\n */\n showUnreadNotification?: boolean;\n /**\n * The \"Call to Action\" label to be displayed next to the popup button.\n * By default, the CTA is not shown.\n * This prop will override the \"showInitialMessagePopUp\" prop, if specified.\n */\n ctaLabel?: string;\n /**\n * A controlled prop to open or close the panel. If provided, the prop\n * will override the openOnLoad prop and the panel will be controlled\n * by the parent component.\n */\n isOpen?: boolean;\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 handleError,\n openOnLoad = false,\n showInitialMessagePopUp = false,\n showHeartBeatAnimation = false,\n showUnreadNotification = false,\n ctaLabel,\n title,\n footer,\n isOpen,\n } = props;\n\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n useEffect(() => {\n reportAnalyticsEvent({\n action: \"CHAT_IMPRESSION\",\n });\n }, [reportAnalyticsEvent]);\n\n const messages = useChatState((s) => s.conversation.messages);\n const [numReadMessages, setNumReadMessagesLength] = useState<number>(0);\n const [numUnreadMessages, setNumUnreadMessagesLength] = useState<number>(0);\n\n // Set the initial value of the local storage flag for opening on load only if it doesn't already exist\n if (window.localStorage.getItem(popupLocalStorageKey) === null) {\n window.localStorage.setItem(\n popupLocalStorageKey,\n openOnLoad ? \"true\" : \"false\"\n );\n }\n const openOnLoadLocalStorage =\n window.localStorage.getItem(popupLocalStorageKey);\n\n /* Open panel on load if: \n - openOnLoad prop is true or there are messages in state (from browser storage), and local storage flag is true */\n const isOpenOnLoad =\n (messages.length > 1 && openOnLoadLocalStorage === \"true\") || openOnLoad;\n\n const {\n renderChat,\n showChat,\n showInitialMessage,\n toggleChat,\n closeChat,\n closeInitialMessage,\n } = usePanelState(isOpen, isOpenOnLoad, !ctaLabel && showInitialMessagePopUp);\n\n // only fetch initial message when ChatPanel is closed on load (otherwise, it will be fetched in ChatPanel)\n useFetchInitialMessage(\n showInitialMessagePopUp ? console.error : handleError,\n false,\n (showUnreadNotification || showInitialMessagePopUp) &&\n !renderChat &&\n !isOpenOnLoad\n );\n\n const onClick = useCallback(() => {\n toggleChat();\n window.localStorage.setItem(popupLocalStorageKey, \"true\");\n }, [toggleChat]);\n\n const onClose = useCallback(() => {\n closeChat();\n customOnClose?.();\n // consider all the messages are read while the panel was open\n setNumReadMessagesLength(messages.length);\n window.localStorage.setItem(popupLocalStorageKey, \"false\");\n }, [closeChat, customOnClose, messages.length]);\n\n useEffect(() => {\n // update number of unread messages if there are new messages added while the panel is closed\n setNumUnreadMessagesLength(messages.length - numReadMessages);\n }, [messages.length, numReadMessages]);\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 closedPopupContainerCssClasses = twMerge(\n cssClasses.closedPopupContainer,\n showChat\n ? cssClasses.closedPopupContainer__hidden\n : cssClasses.closedPopupContainer__display\n );\n\n return (\n <div className=\"yext-chat w-full h-full\">\n <div className={cssClasses.container}>\n <div className={panelCssClasses} aria-label=\"Chat Popup Panel\">\n {renderChat && (\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 footer={footer}\n />\n )}\n </div>\n <div\n className={closedPopupContainerCssClasses}\n aria-label=\"Chat Closed Popup Container\"\n >\n {showInitialMessage && (\n <InitialMessagePopUp\n onClose={closeInitialMessage}\n customCssClasses={cssClasses.initialMessagePopUpCssClasses}\n />\n )}\n {ctaLabel && (\n // the div container is needed to islate the expand CSS animation\n <div className={cssClasses.ctaLabelContainer}>\n <button\n onClick={onClick}\n aria-label=\"CTA Label\"\n className={cssClasses.ctaLabel}\n >\n {ctaLabel}\n </button>\n </div>\n )}\n <button\n aria-label=\"Chat Popup Button\"\n onClick={onClick}\n className={\n cssClasses.button +\n (showHeartBeatAnimation && !!numUnreadMessages\n ? \" animate-heartbeat\"\n : \"\")\n }\n >\n {openPanelButtonIcon ?? (\n <ChatIcon className={cssClasses.buttonIcon} />\n )}\n {showUnreadNotification && !!numUnreadMessages && (\n <div\n aria-label=\"Unread Messages Notification\"\n className={cssClasses.notification}\n >\n {numUnreadMessages}\n </div>\n )}\n </button>\n </div>\n </div>\n </div>\n );\n}\n\nfunction usePanelState(\n isOpen: boolean | undefined,\n isOpenOnLoad: boolean | undefined,\n initialMessageVisible: boolean | undefined\n) {\n // control CSS behavior (fade-in/out animation) on open/close state of the panel.\n const [showChat, setShowChat] = useState(false);\n // control the actual DOM rendering of the panel. Start rendering on first open state\n // to avoid message requests immediately on load while the popup is still \"hidden\"\n const [renderChat, setRenderChat] = useState(false);\n const [showInitialMessage, setshowInitialMessage] = useState(\n initialMessageVisible\n );\n\n useEffect(() => {\n if (isOpen !== undefined) {\n setShowChat(isOpen);\n setRenderChat(isOpen);\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (!renderChat && isOpenOnLoad && isOpen === undefined) {\n setShowChat(true);\n setRenderChat(true);\n setshowInitialMessage(false);\n }\n }, [renderChat, isOpen, isOpenOnLoad]);\n\n const toggleChat = useCallback(() => {\n if (isOpen !== undefined) {\n return;\n }\n setShowChat((prev) => !prev);\n setRenderChat(true);\n setshowInitialMessage(false);\n }, [isOpen]);\n\n const closeChat = useCallback(() => {\n if (isOpen !== undefined) {\n return;\n }\n setShowChat(false);\n }, [isOpen]);\n\n const closeInitialMessage = useCallback(() => {\n setshowInitialMessage(false);\n }, []);\n\n return {\n showChat,\n renderChat,\n showInitialMessage,\n toggleChat,\n closeChat,\n closeInitialMessage,\n };\n}\n"],"names":[],"mappings":"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"}
@@ -1,35 +0,0 @@
1
- import React from "react";
2
- /**
3
- * The CSS class interface for the FeedbackButtons component.
4
- *
5
- * @public
6
- */
7
- export interface FeedbackButtonsCssClasses {
8
- container?: string;
9
- thumbsUpButton?: string;
10
- thumbsUpIcon?: string;
11
- thumbsUpFillIcon?: string;
12
- thumbsDownButton?: string;
13
- thumbsDownIcon?: string;
14
- thumbsDownFillIcon?: string;
15
- }
16
- /**
17
- * The props for the FeedbackButtons component.
18
- *
19
- * @internal
20
- */
21
- interface FeedbackButtonsProps {
22
- /** The response ID correlates to the current message to give feedback on. */
23
- responseId?: string;
24
- /** CSS classes for customizing the component styling. */
25
- customCssClasses?: FeedbackButtonsCssClasses;
26
- }
27
- /**
28
- * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
29
- * report analytic events on click.
30
- *
31
- * @internal
32
- */
33
- export declare function FeedbackButtons({ customCssClasses, responseId, }: FeedbackButtonsProps): React.JSX.Element;
34
- export {};
35
- //# sourceMappingURL=FeedbackButtons.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FeedbackButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/FeedbackButtons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAgBD;;;;GAIG;AACH,UAAU,oBAAoB;IAC5B,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;CAC9C;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,gBAAgB,EAChB,UAAU,GACX,EAAE,oBAAoB,qBA+CtB"}
@@ -1,53 +0,0 @@
1
- import { ThumbsDownIcon } from '../icons/ThumbsDown.mjs';
2
- import { ThumbsUpIcon } from '../icons/ThumbsUp.mjs';
3
- import React, { useState, useCallback } from 'react';
4
- import { ThumbsUpFillIcon } from '../icons/ThumbsUpFill.mjs';
5
- import { ThumbsDownFillIcon } from '../icons/ThumbsDownFill.mjs';
6
- import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
7
- import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
8
- import { useReportAnalyticsEvent } from '../hooks/useReportAnalyticsEvent.mjs';
9
-
10
- const builtInCssClasses = withStylelessCssClasses("FeedbackButtons", {
11
- container: "flex gap-x-1 absolute -right-1 -top-3 [@media(hover:hover)]:opacity-0 group-hover:opacity-100 duration-200",
12
- thumbsUpButton: "w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center",
13
- thumbsUpIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
14
- thumbsUpFillIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
15
- thumbsDownButton: "w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center",
16
- thumbsDownIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
17
- thumbsDownFillIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
18
- });
19
- /**
20
- * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
21
- * report analytic events on click.
22
- *
23
- * @internal
24
- */
25
- function FeedbackButtons({ customCssClasses, responseId, }) {
26
- const reportAnalyticsEvent = useReportAnalyticsEvent();
27
- const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
28
- const [selectedThumb, setSelectedThumb] = useState();
29
- const onClickThumbsUp = useCallback(() => {
30
- setSelectedThumb("UP");
31
- reportAnalyticsEvent({
32
- action: "THUMBS_UP",
33
- chat: {
34
- responseId,
35
- },
36
- });
37
- }, [reportAnalyticsEvent, responseId]);
38
- const onClickThumbsDown = useCallback(() => {
39
- setSelectedThumb("DOWN");
40
- reportAnalyticsEvent({
41
- action: "THUMBS_DOWN",
42
- chat: {
43
- responseId,
44
- },
45
- });
46
- }, [reportAnalyticsEvent, responseId]);
47
- return (React.createElement("div", { className: cssClasses.container },
48
- React.createElement("button", { className: cssClasses.thumbsUpButton, onClick: onClickThumbsUp }, selectedThumb === "UP" ? (React.createElement(ThumbsUpFillIcon, { className: cssClasses.thumbsUpFillIcon })) : (React.createElement(ThumbsUpIcon, { className: cssClasses.thumbsUpIcon }))),
49
- React.createElement("button", { className: cssClasses.thumbsDownButton, onClick: onClickThumbsDown }, selectedThumb === "DOWN" ? (React.createElement(ThumbsDownFillIcon, { className: cssClasses.thumbsDownFillIcon })) : (React.createElement(ThumbsDownIcon, { className: cssClasses.thumbsDownIcon })))));
50
- }
51
-
52
- export { FeedbackButtons };
53
- //# sourceMappingURL=FeedbackButtons.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FeedbackButtons.mjs","sources":["../../../../src/components/FeedbackButtons.tsx"],"sourcesContent":["import { ThumbsDownIcon } from \"../icons/ThumbsDown\";\nimport { ThumbsUpIcon } from \"../icons/ThumbsUp\";\nimport React, { 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 [@media(hover:hover)]: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":[],"mappings":";;;;;;;;;AAwBA,MAAM,iBAAiB,GACrB,uBAAuB,CAA4B,iBAAiB,EAAE;AACpE,IAAA,SAAS,EACP,4GAA4G;AAC9G,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,GAAG,uBAAuB,EAAE,CAAC;IACvD,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAE/C,CAAC;AACJ,IAAA,MAAM,eAAe,GAAG,WAAW,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,GAAG,WAAW,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;AAEvC,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AAClC,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,OAAO,EAAE,eAAe,EACnE,EAAA,aAAa,KAAK,IAAI,IACrB,oBAAC,gBAAgB,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAI,KAE5D,oBAAC,YAAY,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,YAAY,EAAA,CAAI,CACrD,CACM;QACT,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,OAAO,EAAE,iBAAiB,EAAA,EAEzB,aAAa,KAAK,MAAM,IACvB,KAAC,CAAA,aAAA,CAAA,kBAAkB,IAAC,SAAS,EAAE,UAAU,CAAC,kBAAkB,GAAI,KAEhE,oBAAC,cAAc,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA,CAAI,CACzD,CACM,CACL,EACN;AACJ;;;;"}
@@ -1,33 +0,0 @@
1
- import React from "react";
2
- /**
3
- * The CSS class interface for the InitialMessagePopUp component.
4
- *
5
- * @public
6
- */
7
- export interface InitialMessagePopUpCssClasses {
8
- container?: string;
9
- closeButton?: string;
10
- closeButtonIcon?: string;
11
- message?: string;
12
- }
13
- /**
14
- * The props for the {@link InitialMessagePopUp} component.
15
- *
16
- * @internal
17
- */
18
- interface InitialMessagePopUpProps {
19
- /** CSS classes for customizing the component styling. */
20
- customCssClasses?: InitialMessagePopUpCssClasses;
21
- /** Function to call when user click on the close button */
22
- onClose: () => void;
23
- }
24
- /**
25
- * A component that renders a popup bubble displaying the initial message from chat bot.
26
- *
27
- * @internal
28
- *
29
- * @param props - {@link InitialMessagePopUpProps}
30
- */
31
- export declare function InitialMessagePopUp({ onClose, customCssClasses, }: InitialMessagePopUpProps): React.JSX.Element;
32
- export {};
33
- //# sourceMappingURL=InitialMessagePopUp.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"InitialMessagePopUp.d.ts","sourceRoot":"","sources":["../../../../src/components/InitialMessagePopUp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC;;;;GAIG;AACH,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,UAAU,wBAAwB;IAChC,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,6BAA6B,CAAC;IACjD,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAWD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,gBAAgB,GACjB,EAAE,wBAAwB,qBA0B1B"}
@@ -1,38 +0,0 @@
1
- import React, { useMemo } from 'react';
2
- import { CrossIcon } from '../icons/Cross.mjs';
3
- import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
4
- import { useChatState, MessageSource } from '@yext/chat-headless-react';
5
- import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
6
-
7
- const builtInCssClasses = withStylelessCssClasses("InitialMessagePopUp", {
8
- container: "flex gap-x-1 animate-fade-in",
9
- closeButton: "bg-white w-4 h-4 rounded-full border border-slate-300",
10
- closeButtonIcon: "",
11
- message: "line-clamp-2 w-60 p-2.5 bg-white rounded-xl shadow-xl text-sm lg:text-base",
12
- });
13
- /**
14
- * A component that renders a popup bubble displaying the initial message from chat bot.
15
- *
16
- * @internal
17
- *
18
- * @param props - {@link InitialMessagePopUpProps}
19
- */
20
- function InitialMessagePopUp({ onClose, customCssClasses, }) {
21
- const messages = useChatState((s) => s.conversation.messages);
22
- const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
23
- const firstBotMessage = useMemo(() => {
24
- return messages.length !== 0 && messages[0].source === MessageSource.BOT
25
- ? messages[0].text
26
- : "";
27
- }, [messages]);
28
- if (firstBotMessage.length === 0) {
29
- return React.createElement(React.Fragment, null);
30
- }
31
- return (React.createElement("div", { className: cssClasses.container },
32
- React.createElement("button", { "aria-label": "Close Initial Message", onClick: onClose, className: cssClasses.closeButton },
33
- React.createElement(CrossIcon, { className: cssClasses.closeButtonIcon })),
34
- React.createElement("div", { className: cssClasses.message }, firstBotMessage)));
35
- }
36
-
37
- export { InitialMessagePopUp };
38
- //# sourceMappingURL=InitialMessagePopUp.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"InitialMessagePopUp.mjs","sources":["../../../../src/components/InitialMessagePopUp.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { CrossIcon } from \"../icons/Cross\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { MessageSource, useChatState } from \"@yext/chat-headless-react\";\n\n/**\n * The CSS class interface for the InitialMessagePopUp component.\n *\n * @public\n */\nexport interface InitialMessagePopUpCssClasses {\n container?: string;\n closeButton?: string;\n closeButtonIcon?: string;\n message?: string;\n}\n\n/**\n * The props for the {@link InitialMessagePopUp} component.\n *\n * @internal\n */\ninterface InitialMessagePopUpProps {\n /** CSS classes for customizing the component styling. */\n customCssClasses?: InitialMessagePopUpCssClasses;\n /** Function to call when user click on the close button */\n onClose: () => void;\n}\n\nconst builtInCssClasses: InitialMessagePopUpCssClasses =\n withStylelessCssClasses(\"InitialMessagePopUp\", {\n container: \"flex gap-x-1 animate-fade-in\",\n closeButton: \"bg-white w-4 h-4 rounded-full border border-slate-300\",\n closeButtonIcon: \"\",\n message:\n \"line-clamp-2 w-60 p-2.5 bg-white rounded-xl shadow-xl text-sm lg:text-base\",\n });\n\n/**\n * A component that renders a popup bubble displaying the initial message from chat bot.\n *\n * @internal\n *\n * @param props - {@link InitialMessagePopUpProps}\n */\nexport function InitialMessagePopUp({\n onClose,\n customCssClasses,\n}: InitialMessagePopUpProps) {\n const messages = useChatState((s) => s.conversation.messages);\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n const firstBotMessage: string = useMemo(() => {\n return messages.length !== 0 && messages[0].source === MessageSource.BOT\n ? messages[0].text\n : \"\";\n }, [messages]);\n\n if (firstBotMessage.length === 0) {\n return <></>;\n }\n\n return (\n <div className={cssClasses.container}>\n <button\n aria-label=\"Close Initial Message\"\n onClick={onClose}\n className={cssClasses.closeButton}\n >\n <CrossIcon className={cssClasses.closeButtonIcon} />\n </button>\n <div className={cssClasses.message}>{firstBotMessage}</div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;AA8BA,MAAM,iBAAiB,GACrB,uBAAuB,CAAC,qBAAqB,EAAE;AAC7C,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,WAAW,EAAE,uDAAuD;AACpE,IAAA,eAAe,EAAE,EAAE;AACnB,IAAA,OAAO,EACL,4EAA4E;AAC/E,CAAA,CAAC,CAAC;AAEL;;;;;;AAMG;SACa,mBAAmB,CAAC,EAClC,OAAO,EACP,gBAAgB,GACS,EAAA;AACzB,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,eAAe,GAAW,OAAO,CAAC,MAAK;AAC3C,QAAA,OAAO,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,aAAa,CAAC,GAAG;AACtE,cAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI;cAChB,EAAE,CAAC;AACT,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,QAAA,OAAO,yCAAK,CAAC;AACd,KAAA;AAED,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QAClC,KACa,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAA,uBAAuB,EAClC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,EAAA;YAEjC,KAAC,CAAA,aAAA,CAAA,SAAS,IAAC,SAAS,EAAE,UAAU,CAAC,eAAe,GAAI,CAC7C;QACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,OAAO,IAAG,eAAe,CAAO,CACvD,EACN;AACJ;;;;"}
@@ -1,10 +0,0 @@
1
- import React from "react";
2
- /**
3
- * A component that signifies loading status.
4
- *
5
- * @internal
6
- */
7
- export declare function LoadingDots({ className }: {
8
- className?: string;
9
- }): React.JSX.Element;
10
- //# sourceMappingURL=LoadingDots.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../src/components/LoadingDots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAWhE"}
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- import { twMerge } from 'tailwind-merge';
3
-
4
- /**
5
- * A component that signifies loading status.
6
- *
7
- * @internal
8
- */
9
- function LoadingDots({ className }) {
10
- return (React.createElement("div", { "aria-label": "Loading Indicator", className: twMerge("flex gap-1 p-2 animate-fade-in", className) },
11
- React.createElement("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite]" }),
12
- React.createElement("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.3s]" }),
13
- React.createElement("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.6s]" })));
14
- }
15
-
16
- export { LoadingDots };
17
- //# sourceMappingURL=LoadingDots.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LoadingDots.mjs","sources":["../../../../src/components/LoadingDots.tsx"],"sourcesContent":["import React from \"react\";\nimport { 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":[],"mappings":";;;AAGA;;;;AAIG;AACa,SAAA,WAAW,CAAC,EAAE,SAAS,EAA0B,EAAA;IAC/D,QACE,KACa,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,YAAA,EAAA,mBAAmB,EAC9B,SAAS,EAAE,OAAO,CAAC,gCAAgC,EAAE,SAAS,CAAC,EAAA;QAE/D,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gEAAgE,EAAG,CAAA;QAClF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qEAAqE,EAAG,CAAA;AACvF,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qEAAqE,EAAG,CAAA,CACnF,EACN;AACJ;;;;"}
@@ -1,39 +0,0 @@
1
- import React from "react";
2
- /**
3
- * The CSS class interface for the Markdown component.
4
- *
5
- * @internal
6
- */
7
- export interface MarkdownCssClasses {
8
- container?: string;
9
- link?: string;
10
- }
11
- interface MarkdownProps {
12
- /** Stringified markdown. */
13
- content: string;
14
- /** The response ID correlates to the current message. */
15
- responseId?: string;
16
- /** CSS classes for customizing the component styling. */
17
- customCssClasses?: MarkdownCssClasses;
18
- /**
19
- * Action to report for analytics event when a link is clicked.
20
- * Defaults to 'CHAT_LINK_CLICK'.
21
- */
22
- linkClickEvent?: "WEBSITE" | "CHAT_LINK_CLICK";
23
- /** Link target open behavior on click. */
24
- linkTarget?: string;
25
- /** A callback which is called when a link is clicked. */
26
- onLinkClick?: (href?: string) => void;
27
- }
28
- /**
29
- * Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include
30
- * arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.
31
- *
32
- * @remarks
33
- * A link click will send a CHAT_LINK_CLICK analytics event
34
- *
35
- * @internal
36
- */
37
- export declare function Markdown({ content, responseId, customCssClasses, linkClickEvent, linkTarget, onLinkClick, }: MarkdownProps): React.JSX.Element;
38
- export {};
39
- //# sourceMappingURL=Markdown.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Markdown.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAevC;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAMD,UAAU,aAAa;IACrB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;IAC/C,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,cAAkC,EAClC,UAAU,EACV,WAAW,GACZ,EAAE,aAAa,qBAgDf"}
@@ -1,62 +0,0 @@
1
- import ReactMarkdown from 'react-markdown';
2
- import remarkGfm from 'remark-gfm';
3
- import rehypeRaw from 'rehype-raw';
4
- import rehypeSanitize from 'rehype-sanitize';
5
- import React, { useMemo } from 'react';
6
- import { useReportAnalyticsEvent } from '../hooks/useReportAnalyticsEvent.mjs';
7
- import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
8
-
9
- // The Remark and Rehype plugins to use in conjunction with ReactMarkdown.
10
- const unifiedPlugins = {
11
- remark: [
12
- remarkGfm, //renders Github-Flavored Markdown
13
- ],
14
- rehype: [
15
- rehypeRaw,
16
- rehypeSanitize, //to sanitize HTML content
17
- ],
18
- };
19
- const builtInCssClasses = {
20
- link: "cursor-pointer",
21
- };
22
- /**
23
- * Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include
24
- * arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.
25
- *
26
- * @remarks
27
- * A link click will send a CHAT_LINK_CLICK analytics event
28
- *
29
- * @internal
30
- */
31
- function Markdown({ content, responseId, customCssClasses, linkClickEvent = "CHAT_LINK_CLICK", linkTarget, onLinkClick, }) {
32
- const reportAnalyticsEvent = useReportAnalyticsEvent();
33
- const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
34
- const components = useMemo(() => {
35
- const createClickHandlerFn = (href) => () => {
36
- reportAnalyticsEvent({
37
- action: linkClickEvent,
38
- destinationUrl: href,
39
- chat: {
40
- responseId,
41
- },
42
- });
43
- onLinkClick?.(href);
44
- };
45
- return {
46
- a: ({ node: _, children, ...props }) => {
47
- return (React.createElement("a", { ...props, onClick: createClickHandlerFn(props.href), target: linkTarget, rel: "noopener noreferrer", className: cssClasses.link }, children));
48
- },
49
- };
50
- }, [
51
- reportAnalyticsEvent,
52
- linkClickEvent,
53
- responseId,
54
- cssClasses,
55
- linkTarget,
56
- onLinkClick,
57
- ]);
58
- return (React.createElement(ReactMarkdown, { className: cssClasses.container, children: content, remarkPlugins: unifiedPlugins.remark, rehypePlugins: unifiedPlugins.rehype, components: components }));
59
- }
60
-
61
- export { Markdown };
62
- //# sourceMappingURL=Markdown.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Markdown.mjs","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 React, { useMemo } from \"react\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\nimport { useComposedCssClasses } from \"../hooks/useComposedCssClasses\";\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\n/**\n * The CSS class interface for the Markdown component.\n *\n * @internal\n */\nexport interface MarkdownCssClasses {\n container?: string;\n link?: string;\n}\n\nconst builtInCssClasses: MarkdownCssClasses = {\n link: \"cursor-pointer\",\n};\n\ninterface MarkdownProps {\n /** Stringified markdown. */\n content: string;\n /** The response ID correlates to the current message. */\n responseId?: string;\n /** CSS classes for customizing the component styling. */\n customCssClasses?: MarkdownCssClasses;\n /**\n * Action to report for analytics event when a link is clicked.\n * Defaults to 'CHAT_LINK_CLICK'.\n */\n linkClickEvent?: \"WEBSITE\" | \"CHAT_LINK_CLICK\";\n /** Link target open behavior on click. */\n linkTarget?: string;\n /** A callback which is called when a link is clicked. */\n onLinkClick?: (href?: string) => void;\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({\n content,\n responseId,\n customCssClasses,\n linkClickEvent = \"CHAT_LINK_CLICK\",\n linkTarget,\n onLinkClick,\n}: MarkdownProps) {\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n const components: ReactMarkdownOptions[\"components\"] = useMemo(() => {\n const createClickHandlerFn = (href?: string) => () => {\n reportAnalyticsEvent({\n action: linkClickEvent,\n destinationUrl: href,\n chat: {\n responseId,\n },\n });\n onLinkClick?.(href);\n };\n return {\n a: ({ node: _, children, ...props }) => {\n return (\n <a\n {...props}\n onClick={createClickHandlerFn(props.href)}\n target={linkTarget}\n rel=\"noopener noreferrer\"\n className={cssClasses.link}\n >\n {children}\n </a>\n );\n },\n };\n }, [\n reportAnalyticsEvent,\n linkClickEvent,\n responseId,\n cssClasses,\n linkTarget,\n onLinkClick,\n ]);\n\n return (\n <ReactMarkdown\n className={cssClasses.container}\n children={content}\n remarkPlugins={unifiedPlugins.remark}\n rehypePlugins={unifiedPlugins.rehype}\n components={components}\n />\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAWA;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;AAYF,MAAM,iBAAiB,GAAuB;AAC5C,IAAA,IAAI,EAAE,gBAAgB;CACvB,CAAC;AAoBF;;;;;;;;AAQG;SACa,QAAQ,CAAC,EACvB,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,cAAc,GAAG,iBAAiB,EAClC,UAAU,EACV,WAAW,GACG,EAAA;AACd,IAAA,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;IACvD,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,UAAU,GAAuC,OAAO,CAAC,MAAK;QAClE,MAAM,oBAAoB,GAAG,CAAC,IAAa,KAAK,MAAK;AACnD,YAAA,oBAAoB,CAAC;AACnB,gBAAA,MAAM,EAAE,cAAc;AACtB,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,IAAI,EAAE;oBACJ,UAAU;AACX,iBAAA;AACF,aAAA,CAAC,CAAC;AACH,YAAA,WAAW,GAAG,IAAI,CAAC,CAAC;AACtB,SAAC,CAAC;QACF,OAAO;AACL,YAAA,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KAAI;AACrC,gBAAA,QACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,GACM,KAAK,EACT,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,EACzC,MAAM,EAAE,UAAU,EAClB,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAE,UAAU,CAAC,IAAI,EAAA,EAEzB,QAAQ,CACP,EACJ;aACH;SACF,CAAC;AACJ,KAAC,EAAE;QACD,oBAAoB;QACpB,cAAc;QACd,UAAU;QACV,UAAU;QACV,UAAU;QACV,WAAW;AACZ,KAAA,CAAC,CAAC;AAEH,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,QAAQ,EAAE,OAAO,EACjB,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB,EACF;AACJ;;;;"}
@@ -1,64 +0,0 @@
1
- import React from "react";
2
- import { Message } from "@yext/chat-headless-react";
3
- import { FeedbackButtonsCssClasses } from "./FeedbackButtons";
4
- /**
5
- * The CSS class interface for the {@link MessageBubble} component.
6
- *
7
- * @public
8
- */
9
- export interface MessageBubbleCssClasses {
10
- topContainer?: string;
11
- subContainer?: string;
12
- subContainer__bot?: string;
13
- subContainer__user?: string;
14
- bubble?: string;
15
- bubble__bot?: string;
16
- bubble__user?: string;
17
- text?: string;
18
- text__bot?: string;
19
- text__user?: string;
20
- timestamp?: string;
21
- timestamp__bot?: string;
22
- timestamp__user?: string;
23
- feedbackButtonsCssClasses?: FeedbackButtonsCssClasses;
24
- }
25
- /**
26
- * The props for the {@link MessageBubble} component.
27
- *
28
- * @public
29
- */
30
- export interface MessageBubbleProps {
31
- /** The message to display. */
32
- message: Message;
33
- /**
34
- * Whether to show the feedback buttons on the message bubble.
35
- * Defaults to true.
36
- */
37
- showFeedbackButtons?: boolean;
38
- /**
39
- * Whether to show the timestamp of the message with the message bubble.
40
- * Defaults to true.
41
- */
42
- showTimestamp?: boolean;
43
- /**
44
- * A function which is called to format the message's timestamp given in
45
- * ISO format (e.g. "2023-05-18T19:33:34.553Z").
46
- * Defaults to "HH:MM A" (e.g. "7:33 PM").
47
- */
48
- formatTimestamp?: (timestamp: string) => string;
49
- /** CSS classes for customizing the component styling. */
50
- customCssClasses?: MessageBubbleCssClasses;
51
- /** Link target open behavior on click. */
52
- linkTarget?: string;
53
- /** A callback which is called when user clicks a link. */
54
- onLinkClick?: (href?: string) => void;
55
- }
56
- /**
57
- * A component that displays the provided message.
58
- *
59
- * @public
60
- *
61
- * @param props - {@link MessageBubbleProps}
62
- */
63
- export declare function MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, linkTarget, onLinkClick, }: MessageBubbleProps): React.JSX.Element;
64
- //# sourceMappingURL=MessageBubble.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,EAAiB,MAAM,2BAA2B,CAAC;AAKnE,OAAO,EAAmB,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAE/E;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yBAAyB,CAAC,EAAE,yBAAyB,CAAC;CACvD;AAuBD;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,mBAA0B,EAC1B,aAAoB,EACpB,gBAAgB,EAChB,eAAwC,EACxC,UAAU,EACV,WAAW,GACZ,EAAE,kBAAkB,qBA6DpB"}