@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 +0,0 @@
1
- {"version":3,"file":"ThumbsUpFill.js","sources":["../../../../src/icons/ThumbsUpFill.tsx"],"sourcesContent":["import React from \"react\";\n\nexport function ThumbsUpFillIcon({\n className,\n}: {\n className?: string;\n}): 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=\"M14.059 10.5061C14.5293 11.8877 13.2864 12.5128 13.2864 12.5128C13.5887 13.7299 12.4802 14.322 12.4802 14.322C12.413 16.0655 10.8006 15.9997 10.8006 15.9997C9.89359 15.9997 8.85223 15.9997 8.85223 15.9997C7.91166 15.901 7.27341 15.5391 7.27341 15.5391C6.29924 15.0457 5.79536 14.5852 5.52663 14.2233C5.52663 14.2233 4.51887 11.6904 5.29148 8.89426C5.33673 8.73052 5.35867 8.69688 5.39226 8.63109C5.45944 8.43372 5.52663 8.36793 5.52663 8.36793C6.0641 8.00608 6.73594 7.18369 6.73594 7.18369C7.27341 6.69026 7.7437 5.27576 7.7437 5.27576C8.07962 4.12442 8.88583 4.02573 8.88583 4.02573C11.0357 3.76257 11.0021 5.60471 11.0021 5.60471C11.0021 6.32841 10.4982 7.41396 10.4982 7.41396H13.5215C15.0668 7.71002 14.9996 9.05873 14.9996 9.05873C14.9996 10.1772 14.0254 10.539 14.0254 10.539L14.059 10.5061Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"],"names":["React"],"mappings":";;;;;;;;AAEgB,SAAA,gBAAgB,CAAC,EAC/B,SAAS,GAGV,EAAA;IACC,QACEA,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,EAAA;QAElCA,sBACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gyBAAgyB,EAClyB,IAAI,EAAC,cAAc,EAAA,CACnB,CACE,EACN;AACJ;;;;"}
@@ -1,3 +0,0 @@
1
- export * from "./components";
2
- export * from "./hooks";
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
@@ -1,20 +0,0 @@
1
- 'use strict';
2
-
3
- var ChatInput = require('./components/ChatInput.js');
4
- var ChatHeader = require('./components/ChatHeader.js');
5
- var MessageBubble = require('./components/MessageBubble.js');
6
- var ChatPanel = require('./components/ChatPanel.js');
7
- var ChatPopUp = require('./components/ChatPopUp.js');
8
- var useComposedCssClasses = require('./hooks/useComposedCssClasses.js');
9
- var useReportAnalyticsEvent = require('./hooks/useReportAnalyticsEvent.js');
10
-
11
-
12
-
13
- exports.ChatInput = ChatInput.ChatInput;
14
- exports.ChatHeader = ChatHeader.ChatHeader;
15
- exports.MessageBubble = MessageBubble.MessageBubble;
16
- exports.ChatPanel = ChatPanel.ChatPanel;
17
- exports.ChatPopUp = ChatPopUp.ChatPopUp;
18
- exports.useComposedCssClasses = useComposedCssClasses.useComposedCssClasses;
19
- exports.useReportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent;
20
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
@@ -1,11 +0,0 @@
1
- // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
- // It should be published with your NPM package. It should not be tracked by Git.
3
- {
4
- "tsdocVersion": "0.12",
5
- "toolPackages": [
6
- {
7
- "packageName": "@microsoft/api-extractor",
8
- "packageVersion": "7.35.1"
9
- }
10
- ]
11
- }
@@ -1,17 +0,0 @@
1
- /**
2
- * Append styleless css classnames that user can target to add custom styling to components.
3
- * The classes follows a format of "yext-chat-component-name__css-interface-field-name".
4
- *
5
- * @example
6
- * the styleless css class name for {@link MessageBubble}'s "message__bot" field defined
7
- * in its {@link MessageBubbleCssClasses} interface is "yext-chat-message-bubble__message__bot"
8
- *
9
- * @internal
10
- *
11
- * @param componentName - the component name
12
- * @param builtInClasses - built in css classnames of the component
13
- *
14
- * @returns builtInClasses with styleless css classnames
15
- */
16
- export declare function withStylelessCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface, string | object>>>(componentName: string, builtInClasses: Readonly<Required<ClassInterface>>): ClassInterface;
17
- //# sourceMappingURL=withStylelessCssClasses.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"withStylelessCssClasses.d.ts","sourceRoot":"","sources":["../../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,SAAS,OAAO,CAAC,MAAM,CAAC,MAAM,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAE7E,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,QAAQ,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,GACjD,cAAc,CAYhB"}
@@ -1,30 +0,0 @@
1
- 'use strict';
2
-
3
- /**
4
- * Append styleless css classnames that user can target to add custom styling to components.
5
- * The classes follows a format of "yext-chat-component-name__css-interface-field-name".
6
- *
7
- * @example
8
- * the styleless css class name for {@link MessageBubble}'s "message__bot" field defined
9
- * in its {@link MessageBubbleCssClasses} interface is "yext-chat-message-bubble__message__bot"
10
- *
11
- * @internal
12
- *
13
- * @param componentName - the component name
14
- * @param builtInClasses - built in css classnames of the component
15
- *
16
- * @returns builtInClasses with styleless css classnames
17
- */
18
- function withStylelessCssClasses(componentName, builtInClasses) {
19
- const formatString = (str) => str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
20
- const classes = { ...builtInClasses };
21
- Object.keys(builtInClasses).forEach((key) => {
22
- if (typeof classes[key] === "string") {
23
- classes[key] = `${classes[key]} yext-chat${formatString(componentName)}__${formatString(key)}`;
24
- }
25
- });
26
- return classes;
27
- }
28
-
29
- exports.withStylelessCssClasses = withStylelessCssClasses;
30
- //# sourceMappingURL=withStylelessCssClasses.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"withStylelessCssClasses.js","sources":["../../../../src/utils/withStylelessCssClasses.ts"],"sourcesContent":["/**\n * Append styleless css classnames that user can target to add custom styling to components.\n * The classes follows a format of \"yext-chat-component-name__css-interface-field-name\".\n *\n * @example\n * the styleless css class name for {@link MessageBubble}'s \"message__bot\" field defined\n * in its {@link MessageBubbleCssClasses} interface is \"yext-chat-message-bubble__message__bot\"\n *\n * @internal\n *\n * @param componentName - the component name\n * @param builtInClasses - built in css classnames of the component\n *\n * @returns builtInClasses with styleless css classnames\n */\nexport function withStylelessCssClasses<\n ClassInterface extends Partial<Record<keyof ClassInterface, string | object>>\n>(\n componentName: string,\n builtInClasses: Readonly<Required<ClassInterface>>\n): ClassInterface {\n const formatString = (str: string) =>\n str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);\n const classes = { ...builtInClasses };\n Object.keys(builtInClasses).forEach((key) => {\n if (typeof classes[key] === \"string\") {\n classes[key] = `${classes[key]} yext-chat${formatString(\n componentName\n )}__${formatString(key)}`;\n }\n });\n return classes;\n}\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AACa,SAAA,uBAAuB,CAGrC,aAAqB,EACrB,cAAkD,EAAA;IAElD,MAAM,YAAY,GAAG,CAAC,GAAW,KAC/B,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAC,WAAW,EAAE,CAAE,CAAA,CAAC,CAAC;AAC9D,IAAA,MAAM,OAAO,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AAC1C,QAAA,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;YACpC,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA,UAAA,EAAa,YAAY,CACrD,aAAa,CACd,CAAK,EAAA,EAAA,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;AAC3B,SAAA;AACH,KAAC,CAAC,CAAC;AACH,IAAA,OAAO,OAAO,CAAC;AACjB;;;;"}
@@ -1,411 +0,0 @@
1
- import { ChatHeadless } from '@yext/chat-headless-react';
2
- import { Message } from '@yext/chat-headless-react';
3
- import { default as React_2 } from 'react';
4
- import { ReactNode } from 'react';
5
-
6
- /**
7
- * A component that renders the header of a chat bot panel,
8
- * including the title and a button to reset the conversation.
9
- *
10
- * @public
11
- *
12
- * @param props - {@link ChatHeaderProps}
13
- */
14
- export declare function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): React_2.JSX.Element;
15
-
16
- /**
17
- * The CSS class interface for the {@link ChatHeader} component.
18
- *
19
- * @public
20
- */
21
- export declare interface ChatHeaderCssClasses {
22
- container?: string;
23
- title?: string;
24
- restartButton?: string;
25
- restartButtonIcon?: string;
26
- closeButton?: string;
27
- closeButtonIcon?: string;
28
- }
29
-
30
- /**
31
- * The props for the {@link ChatHeader} component.
32
- *
33
- * @public
34
- */
35
- export declare interface ChatHeaderProps {
36
- /**
37
- * The headers's title text, essentially how the chat window identifies itself to the user.
38
- */
39
- title: string;
40
- /**
41
- * Displays a restart button which allows the user to restart the conversation.
42
- * Defaults to false.
43
- */
44
- showRestartButton?: boolean;
45
- /**
46
- * Displays a close button which will invoke {@link ChatHeaderProps.onClose} on click.
47
- * Default to false.
48
- */
49
- showCloseButton?: boolean;
50
- /** A function which is called when the close button is clicked. */
51
- onClose?: () => void;
52
- /** Custom icon for for restart button. */
53
- restartButtonIcon?: JSX.Element;
54
- /** Custom icon for for close button. */
55
- closeButtonIcon?: JSX.Element;
56
- /** CSS classes for customizing the component styling. */
57
- customCssClasses?: ChatHeaderCssClasses;
58
- }
59
-
60
- /**
61
- * A component that allows user to input message and send to Chat API.
62
- *
63
- * @remarks
64
- * Pressing "Enter" key will send the current message.
65
- * To add a newline, press "Shift" and "Enter".
66
- *
67
- * @public
68
- *
69
- * @param props - {@link ChatInputProps}
70
- */
71
- export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, onSend, onRetry, }: ChatInputProps): React_2.JSX.Element;
72
-
73
- /**
74
- * The CSS class interface for the {@link ChatInput} component.
75
- *
76
- * @public
77
- */
78
- export declare interface ChatInputCssClasses {
79
- container?: string;
80
- textArea?: string;
81
- sendButton?: string;
82
- }
83
-
84
- /**
85
- * The props for the {@link ChatInput} component.
86
- *
87
- * @public
88
- */
89
- export declare interface ChatInputProps {
90
- /**
91
- * The input's placeholder text when no text has been entered by the user.
92
- * Defaults to "Type a message...".
93
- */
94
- placeholder?: string;
95
- /**
96
- * Enable streaming behavior by making a request to Chat Streaming API.
97
- * This feature is experimental, and is subject to change.
98
- * Defaults to false.
99
- */
100
- stream?: boolean;
101
- /** Enable auto focus for the input box. Defaults to false. */
102
- inputAutoFocus?: boolean;
103
- /**
104
- * A function which is called when an error occurs from Chat API while processing the user's message.
105
- * By default, the error is logged to the console and an error message is added to state.
106
- */
107
- handleError?: (e: unknown) => void;
108
- /** Custom icon for the send button. */
109
- sendButtonIcon?: JSX.Element;
110
- /** CSS classes for customizing the component styling. */
111
- customCssClasses?: ChatInputCssClasses;
112
- /** A callback which is called when user sends a message. */
113
- onSend?: (message: string) => void;
114
- /**
115
- * A function which is called when a retryable error occurs from
116
- * Chat API while processing the user's message.
117
- */
118
- onRetry?: (e: unknown) => void;
119
- }
120
-
121
- /**
122
- * A component that renders a full panel for chat bot interactions. This includes
123
- * the message bubbles for the conversation, input box with send button, and header
124
- * (if provided).
125
- *
126
- * @public
127
- *
128
- * @param props - {@link ChatPanelProps}
129
- */
130
- export declare function ChatPanel(props: ChatPanelProps): React_2.JSX.Element;
131
-
132
- /**
133
- * The CSS class interface for the {@link ChatPanel} component.
134
- *
135
- * @public
136
- */
137
- export declare interface ChatPanelCssClasses {
138
- container?: string;
139
- messagesContainer?: string;
140
- messagesScrollContainer?: string;
141
- inputContainer?: string;
142
- inputCssClasses?: ChatInputCssClasses;
143
- messageBubbleCssClasses?: MessageBubbleCssClasses;
144
- messageSuggestionClasses?: MessageSuggestionCssClasses;
145
- footer?: string;
146
- }
147
-
148
- /**
149
- * The props for the {@link ChatPanel} component.
150
- *
151
- * @public
152
- */
153
- export declare interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClasses" | "message">, Omit<ChatInputProps, "customCssClasses"> {
154
- /** A header to render at the top of the panel. */
155
- header?: ReactNode;
156
- /** A footer markdown string to render at the bottom of the panel. */
157
- footer?: string;
158
- /**
159
- * CSS classes for customizing the component styling.
160
- */
161
- customCssClasses?: ChatPanelCssClasses;
162
- /**
163
- * A set of pre-written initial messages that the user
164
- * can click on instead of typing their own.
165
- */
166
- messageSuggestions?: string[];
167
- /** Link target open behavior on click.
168
- * Defaults to "_blank".
169
- */
170
- linkTarget?: string;
171
- /** A callback which is called when user clicks a link. */
172
- onLinkClick?: (href?: string) => void;
173
- /**
174
- * Text to display when retrying.
175
- * Defaults to "Error occurred. Retrying".
176
- */
177
- retryText?: string;
178
- }
179
-
180
- /**
181
- * A component that renders a popup button that displays and hides
182
- * a panel for chat bot interactions.
183
- *
184
- * @public
185
- *
186
- * @param props - {@link ChatPanelProps}
187
- */
188
- export declare function ChatPopUp(props: ChatPopUpProps): React_2.JSX.Element;
189
-
190
- /**
191
- * The CSS class interface for the {@link ChatPopUp} component.
192
- *
193
- * @public
194
- */
195
- export declare interface ChatPopUpCssClasses {
196
- container?: string;
197
- panel?: string;
198
- panel__display?: string;
199
- panel__hidden?: string;
200
- button?: string;
201
- buttonIcon?: string;
202
- ctaLabelContainer?: string;
203
- ctaLabel?: string;
204
- notification?: string;
205
- closedPopupContainer?: string;
206
- closedPopupContainer__display?: string;
207
- closedPopupContainer__hidden?: string;
208
- headerCssClasses?: ChatHeaderCssClasses;
209
- panelCssClasses?: ChatPanelCssClasses;
210
- initialMessagePopUpCssClasses?: InitialMessagePopUpCssClasses;
211
- }
212
-
213
- /**
214
- * The props for the {@link ChatPopUp} component.
215
- *
216
- * @public
217
- */
218
- export declare interface ChatPopUpProps extends Omit<ChatHeaderProps, "showCloseButton" | "customCssClasses">, Omit<ChatPanelProps, "header" | "customCssClasses"> {
219
- /** Custom icon for the popup button to open the panel. */
220
- openPanelButtonIcon?: JSX.Element;
221
- /** CSS classes for customizing the component styling. */
222
- customCssClasses?: ChatPopUpCssClasses;
223
- /** Whether to show the panel on load. Defaults to false. */
224
- openOnLoad?: boolean;
225
- /**
226
- * Whether to show the initial message popup when the panel is hidden on load.
227
- * Defaults to false.
228
- */
229
- showInitialMessagePopUp?: boolean;
230
- /**
231
- * Whether to show a heartbeat animation on the popup button when the panel is hidden.
232
- * Defaults to false.
233
- */
234
- showHeartBeatAnimation?: boolean;
235
- /**
236
- * Whether to show notification showing number of unread messages.
237
- * Defaults to false.
238
- */
239
- showUnreadNotification?: boolean;
240
- /**
241
- * The "Call to Action" label to be displayed next to the popup button.
242
- * By default, the CTA is not shown.
243
- * This prop will override the "showInitialMessagePopUp" prop, if specified.
244
- */
245
- ctaLabel?: string;
246
- /**
247
- * A controlled prop to open or close the panel. If provided, the prop
248
- * will override the openOnLoad prop and the panel will be controlled
249
- * by the parent component.
250
- */
251
- isOpen?: boolean;
252
- }
253
-
254
- /**
255
- * The CSS class interface for the FeedbackButtons component.
256
- *
257
- * @public
258
- */
259
- export declare interface FeedbackButtonsCssClasses {
260
- container?: string;
261
- thumbsUpButton?: string;
262
- thumbsUpIcon?: string;
263
- thumbsUpFillIcon?: string;
264
- thumbsDownButton?: string;
265
- thumbsDownIcon?: string;
266
- thumbsDownFillIcon?: string;
267
- }
268
-
269
- /**
270
- * The CSS class interface for the InitialMessagePopUp component.
271
- *
272
- * @public
273
- */
274
- export declare interface InitialMessagePopUpCssClasses {
275
- container?: string;
276
- closeButton?: string;
277
- closeButtonIcon?: string;
278
- message?: string;
279
- }
280
-
281
- /**
282
- * A component that displays the provided message.
283
- *
284
- * @public
285
- *
286
- * @param props - {@link MessageBubbleProps}
287
- */
288
- export declare function MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, linkTarget, onLinkClick, }: MessageBubbleProps): React_2.JSX.Element;
289
-
290
- /**
291
- * The CSS class interface for the {@link MessageBubble} component.
292
- *
293
- * @public
294
- */
295
- export declare interface MessageBubbleCssClasses {
296
- topContainer?: string;
297
- subContainer?: string;
298
- subContainer__bot?: string;
299
- subContainer__user?: string;
300
- bubble?: string;
301
- bubble__bot?: string;
302
- bubble__user?: string;
303
- text?: string;
304
- text__bot?: string;
305
- text__user?: string;
306
- timestamp?: string;
307
- timestamp__bot?: string;
308
- timestamp__user?: string;
309
- feedbackButtonsCssClasses?: FeedbackButtonsCssClasses;
310
- }
311
-
312
- /**
313
- * The props for the {@link MessageBubble} component.
314
- *
315
- * @public
316
- */
317
- export declare interface MessageBubbleProps {
318
- /** The message to display. */
319
- message: Message;
320
- /**
321
- * Whether to show the feedback buttons on the message bubble.
322
- * Defaults to true.
323
- */
324
- showFeedbackButtons?: boolean;
325
- /**
326
- * Whether to show the timestamp of the message with the message bubble.
327
- * Defaults to true.
328
- */
329
- showTimestamp?: boolean;
330
- /**
331
- * A function which is called to format the message's timestamp given in
332
- * ISO format (e.g. "2023-05-18T19:33:34.553Z").
333
- * Defaults to "HH:MM A" (e.g. "7:33 PM").
334
- */
335
- formatTimestamp?: (timestamp: string) => string;
336
- /** CSS classes for customizing the component styling. */
337
- customCssClasses?: MessageBubbleCssClasses;
338
- /** Link target open behavior on click. */
339
- linkTarget?: string;
340
- /** A callback which is called when user clicks a link. */
341
- onLinkClick?: (href?: string) => void;
342
- }
343
-
344
- /**
345
- * The CSS class interface for the MessageSuggestion component.
346
- *
347
- * @public
348
- */
349
- export declare interface MessageSuggestionCssClasses {
350
- container?: string;
351
- suggestion?: string;
352
- }
353
-
354
- /**
355
- * The props for the MessageSuggestions component.
356
- *
357
- * @public
358
- */
359
- export declare interface MessageSuggestionsProps {
360
- /** List of clickable message suggestions to render. */
361
- suggestions: string[];
362
- /** {@inheritdoc ChatInputProps.handleError} */
363
- handleError?: (e: unknown) => void;
364
- /** CSS classes for customizing the component styling. */
365
- customCssClasses?: MessageSuggestionCssClasses;
366
- /** {@inheritdoc ChatInputProps.stream} */
367
- stream?: boolean;
368
- /** {@inheritdoc ChatInputProps.onSend} */
369
- onSend?: (message: string) => void;
370
- /** {@inheritdoc ChatInputProps.onRetry} */
371
- onRetry?: (e: unknown) => void;
372
- }
373
-
374
- /**
375
- * useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes.
376
- *
377
- * @remarks
378
- * Tailwind classes will be merged without conflict, with custom classes having higher priority
379
- * than built-in ones.
380
- *
381
- * @example
382
- * Suppose a component has built-in classes of `{ container: 'px-4 text-slate-700' }`.
383
- *
384
- * Passing in the custom classes:
385
- *
386
- * ```ts
387
- * { container: 'text-red-200 mb-3' }
388
- * ```
389
- *
390
- * results in the merged classes of:
391
- *
392
- * ```ts
393
- * { container: 'px-4 text-red-200 mb-3' }
394
- * ```
395
- *
396
- * @public
397
- *
398
- * @param builtInClasses - The component's built-in tailwind classes
399
- * @param customClasses - The custom tailwind classes to merge with the built-in ones
400
- * @returns The composed CSS classes
401
- */
402
- export declare function useComposedCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface, string | object>>>(builtInClasses: Readonly<ClassInterface>, customClasses?: Partial<ClassInterface>): ClassInterface;
403
-
404
- /**
405
- * Returns a function to send requests to Yext Analytics API.
406
- *
407
- * @public
408
- */
409
- export declare function useReportAnalyticsEvent(): ChatHeadless["report"];
410
-
411
- export { }
@@ -1,4 +0,0 @@
1
- var version = "0.12.1";
2
-
3
- export { version };
4
- //# sourceMappingURL=package.json.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"package.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,53 +0,0 @@
1
- import React from "react";
2
- /**
3
- * The CSS class interface for the {@link ChatHeader} component.
4
- *
5
- * @public
6
- */
7
- export interface ChatHeaderCssClasses {
8
- container?: string;
9
- title?: string;
10
- restartButton?: string;
11
- restartButtonIcon?: string;
12
- closeButton?: string;
13
- closeButtonIcon?: string;
14
- }
15
- /**
16
- * The props for the {@link ChatHeader} component.
17
- *
18
- * @public
19
- */
20
- export interface ChatHeaderProps {
21
- /**
22
- * The headers's title text, essentially how the chat window identifies itself to the user.
23
- */
24
- title: string;
25
- /**
26
- * Displays a restart button which allows the user to restart the conversation.
27
- * Defaults to false.
28
- */
29
- showRestartButton?: boolean;
30
- /**
31
- * Displays a close button which will invoke {@link ChatHeaderProps.onClose} on click.
32
- * Default to false.
33
- */
34
- showCloseButton?: boolean;
35
- /** A function which is called when the close button is clicked. */
36
- onClose?: () => void;
37
- /** Custom icon for for restart button. */
38
- restartButtonIcon?: JSX.Element;
39
- /** Custom icon for for close button. */
40
- closeButtonIcon?: JSX.Element;
41
- /** CSS classes for customizing the component styling. */
42
- customCssClasses?: ChatHeaderCssClasses;
43
- }
44
- /**
45
- * A component that renders the header of a chat bot panel,
46
- * including the title and a button to reset the conversation.
47
- *
48
- * @public
49
- *
50
- * @param props - {@link ChatHeaderProps}
51
- */
52
- export declare function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): React.JSX.Element;
53
- //# sourceMappingURL=ChatHeader.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAcD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,yCAAyC;IACzC,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;CACzC;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,OAAO,EACP,gBAAgB,GACjB,EAAE,eAAe,qBAgDjB"}
@@ -1,46 +0,0 @@
1
- import { useChatActions } from '@yext/chat-headless-react';
2
- import { DualSyncIcon } from '../icons/DualSync.mjs';
3
- import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
4
- import React, { useState, useRef, useCallback } from 'react';
5
- import { twMerge } from 'tailwind-merge';
6
- import { CrossIcon } from '../icons/Cross.mjs';
7
- import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
8
-
9
- const builtInCssClasses = withStylelessCssClasses("Header", {
10
- container: "w-full pl-4 pr-3 py-3 flex justify-between bg-gradient-to-tr from-blue-600 to-blue-800",
11
- title: "text-white text-xl font-medium truncate pr-1",
12
- restartButton: "w-8 h-8 ml-auto shrink-0 flex justify-center items-center",
13
- restartButtonIcon: "text-white stroke-[0.2] w-[26px] h-[26px]",
14
- closeButton: "w-8 h-8 hover:scale-110 shrink-0 flex justify-center items-center",
15
- closeButtonIcon: "text-white w-[26px] h-[26px]",
16
- });
17
- /**
18
- * A component that renders the header of a chat bot panel,
19
- * including the title and a button to reset the conversation.
20
- *
21
- * @public
22
- *
23
- * @param props - {@link ChatHeaderProps}
24
- */
25
- function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }) {
26
- const chat = useChatActions();
27
- const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
28
- const [isSpinning, setIsSpinning] = useState(false);
29
- const restartButtonCssClasses = twMerge(cssClasses.restartButton, isSpinning ? "animate-[spin_0.3s_linear]" : "hover:scale-110");
30
- const clearTimerRef = useRef();
31
- const onRestart = useCallback(async () => {
32
- clearTimeout(clearTimerRef.current);
33
- setIsSpinning(true);
34
- clearTimerRef.current = setTimeout(() => {
35
- setIsSpinning(false);
36
- }, 1000);
37
- chat.restartConversation();
38
- }, [chat]);
39
- return (React.createElement("div", { className: cssClasses.container },
40
- React.createElement("h1", { className: cssClasses.title }, title),
41
- showRestartButton && (React.createElement("button", { "aria-label": "Restart Conversation", onClick: onRestart, className: restartButtonCssClasses }, restartButtonIcon ?? (React.createElement(DualSyncIcon, { className: cssClasses.restartButtonIcon })))),
42
- showCloseButton && (React.createElement("button", { "aria-label": "Close Chat", onClick: onClose, className: cssClasses.closeButton }, closeButtonIcon ?? (React.createElement(CrossIcon, { className: cssClasses.closeButtonIcon }))))));
43
- }
44
-
45
- export { ChatHeader };
46
- //# sourceMappingURL=ChatHeader.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChatHeader.mjs","sources":["../../../../src/components/ChatHeader.tsx"],"sourcesContent":["import { useChatActions } from \"@yext/chat-headless-react\";\nimport { DualSyncIcon } from \"../icons/DualSync\";\nimport { useComposedCssClasses } from \"../hooks/useComposedCssClasses\";\nimport React, { useCallback, useRef, useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { CrossIcon } from \"../icons/Cross\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\n\n/**\n * The CSS class interface for the {@link ChatHeader} component.\n *\n * @public\n */\nexport interface ChatHeaderCssClasses {\n container?: string;\n title?: string;\n restartButton?: string;\n restartButtonIcon?: string;\n closeButton?: string;\n closeButtonIcon?: string;\n}\n\nconst builtInCssClasses: Readonly<ChatHeaderCssClasses> =\n withStylelessCssClasses(\"Header\", {\n container:\n \"w-full pl-4 pr-3 py-3 flex justify-between bg-gradient-to-tr from-blue-600 to-blue-800\",\n title: \"text-white text-xl font-medium truncate pr-1\",\n restartButton: \"w-8 h-8 ml-auto shrink-0 flex justify-center items-center\",\n restartButtonIcon: \"text-white stroke-[0.2] w-[26px] h-[26px]\",\n closeButton:\n \"w-8 h-8 hover:scale-110 shrink-0 flex justify-center items-center\",\n closeButtonIcon: \"text-white w-[26px] h-[26px]\",\n });\n\n/**\n * The props for the {@link ChatHeader} component.\n *\n * @public\n */\nexport interface ChatHeaderProps {\n /**\n * The headers's title text, essentially how the chat window identifies itself to the user.\n */\n title: string;\n /**\n * Displays a restart button which allows the user to restart the conversation.\n * Defaults to false.\n */\n showRestartButton?: boolean;\n /**\n * Displays a close button which will invoke {@link ChatHeaderProps.onClose} on click.\n * Default to false.\n */\n showCloseButton?: boolean;\n /** A function which is called when the close button is clicked. */\n onClose?: () => void;\n /** Custom icon for for restart button. */\n restartButtonIcon?: JSX.Element;\n /** Custom icon for for close button. */\n closeButtonIcon?: JSX.Element;\n /** CSS classes for customizing the component styling. */\n customCssClasses?: ChatHeaderCssClasses;\n}\n\n/**\n * A component that renders the header of a chat bot panel,\n * including the title and a button to reset the conversation.\n *\n * @public\n *\n * @param props - {@link ChatHeaderProps}\n */\nexport function ChatHeader({\n title,\n showRestartButton,\n restartButtonIcon,\n showCloseButton,\n closeButtonIcon,\n onClose,\n customCssClasses,\n}: ChatHeaderProps) {\n const chat = useChatActions();\n\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n const [isSpinning, setIsSpinning] = useState(false);\n const restartButtonCssClasses = twMerge(\n cssClasses.restartButton,\n isSpinning ? \"animate-[spin_0.3s_linear]\" : \"hover:scale-110\"\n );\n\n const clearTimerRef = useRef<ReturnType<typeof setTimeout>>();\n const onRestart = useCallback(async () => {\n clearTimeout(clearTimerRef.current);\n setIsSpinning(true);\n clearTimerRef.current = setTimeout(() => {\n setIsSpinning(false);\n }, 1000);\n chat.restartConversation();\n }, [chat]);\n\n return (\n <div className={cssClasses.container}>\n <h1 className={cssClasses.title}>{title}</h1>\n {showRestartButton && (\n <button\n aria-label=\"Restart Conversation\"\n onClick={onRestart}\n className={restartButtonCssClasses}\n >\n {restartButtonIcon ?? (\n <DualSyncIcon className={cssClasses.restartButtonIcon} />\n )}\n </button>\n )}\n {showCloseButton && (\n <button\n aria-label=\"Close Chat\"\n onClick={onClose}\n className={cssClasses.closeButton}\n >\n {closeButtonIcon ?? (\n <CrossIcon className={cssClasses.closeButtonIcon} />\n )}\n </button>\n )}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAsBA,MAAM,iBAAiB,GACrB,uBAAuB,CAAC,QAAQ,EAAE;AAChC,IAAA,SAAS,EACP,wFAAwF;AAC1F,IAAA,KAAK,EAAE,8CAA8C;AACrD,IAAA,aAAa,EAAE,2DAA2D;AAC1E,IAAA,iBAAiB,EAAE,2CAA2C;AAC9D,IAAA,WAAW,EACT,mEAAmE;AACrE,IAAA,eAAe,EAAE,8BAA8B;AAChD,CAAA,CAAC,CAAC;AAgCL;;;;;;;AAOG;SACa,UAAU,CAAC,EACzB,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,OAAO,EACP,gBAAgB,GACA,EAAA;AAChB,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAE9B,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAE9E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpD,IAAA,MAAM,uBAAuB,GAAG,OAAO,CACrC,UAAU,CAAC,aAAa,EACxB,UAAU,GAAG,4BAA4B,GAAG,iBAAiB,CAC9D,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,MAAM,EAAiC,CAAC;AAC9D,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,YAAW;AACvC,QAAA,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpC,aAAa,CAAC,IAAI,CAAC,CAAC;AACpB,QAAA,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;YACtC,aAAa,CAAC,KAAK,CAAC,CAAC;SACtB,EAAE,IAAI,CAAC,CAAC;QACT,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAC7B,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAEX,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AAClC,QAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,EAAG,KAAK,CAAM;QAC5C,iBAAiB,KAChB,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,sBAAsB,EACjC,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,uBAAuB,EAAA,EAEjC,iBAAiB,KAChB,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAA,CAAI,CAC1D,CACM,CACV;AACA,QAAA,eAAe,KACd,KACa,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAA,YAAY,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,EAEhC,EAAA,eAAe,KACd,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,eAAe,EAAA,CAAI,CACrD,CACM,CACV,CACG,EACN;AACJ;;;;"}