@yext/chat-ui-react 0.8.0 → 0.8.1-alpha

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 (79) hide show
  1. package/lib/commonjs/package.json.js +1 -1
  2. package/lib/commonjs/src/components/ChatInput.js +1 -1
  3. package/lib/commonjs/src/components/ChatPanel.d.ts.map +1 -1
  4. package/lib/commonjs/src/components/ChatPanel.js +6 -28
  5. package/lib/commonjs/src/components/ChatPanel.js.map +1 -1
  6. package/lib/commonjs/src/components/ChatPopUp.js +3 -3
  7. package/lib/commonjs/src/components/FeedbackButtons.d.ts +3 -4
  8. package/lib/commonjs/src/components/FeedbackButtons.d.ts.map +1 -1
  9. package/lib/commonjs/src/components/FeedbackButtons.js +2 -1
  10. package/lib/commonjs/src/components/FeedbackButtons.js.map +1 -1
  11. package/lib/commonjs/src/components/InitialMessagePopUp.js +1 -1
  12. package/lib/commonjs/src/components/Markdown.d.ts +7 -3
  13. package/lib/commonjs/src/components/Markdown.d.ts.map +1 -1
  14. package/lib/commonjs/src/components/Markdown.js +1 -1
  15. package/lib/commonjs/src/components/Markdown.js.map +1 -1
  16. package/lib/commonjs/src/components/index.d.ts +4 -1
  17. package/lib/commonjs/src/components/index.d.ts.map +1 -1
  18. package/lib/commonjs/src/hooks/index.d.ts +4 -0
  19. package/lib/commonjs/src/hooks/index.d.ts.map +1 -1
  20. package/lib/commonjs/src/hooks/useDefaultHandleApiError.d.ts +1 -1
  21. package/lib/commonjs/src/hooks/useDefaultHandleApiError.js +1 -1
  22. package/lib/commonjs/src/hooks/useDefaultHandleApiError.js.map +1 -1
  23. package/lib/commonjs/src/hooks/useFetchInitialMessage.d.ts +1 -1
  24. package/lib/commonjs/src/hooks/useFetchInitialMessage.js +1 -1
  25. package/lib/commonjs/src/hooks/useFetchInitialMessage.js.map +1 -1
  26. package/lib/commonjs/src/hooks/useReportAnalyticsEvent.d.ts +1 -1
  27. package/lib/commonjs/src/hooks/useReportAnalyticsEvent.js +1 -1
  28. package/lib/commonjs/src/hooks/useReportAnalyticsEvent.js.map +1 -1
  29. package/lib/commonjs/src/hooks/useScrollToLastMessage.d.ts +15 -0
  30. package/lib/commonjs/src/hooks/useScrollToLastMessage.d.ts.map +1 -0
  31. package/lib/commonjs/src/hooks/useScrollToLastMessage.js +45 -0
  32. package/lib/commonjs/src/hooks/useScrollToLastMessage.js.map +1 -0
  33. package/lib/commonjs/src/index.js +12 -0
  34. package/lib/commonjs/src/index.js.map +1 -1
  35. package/lib/esm/index.d.ts +90 -0
  36. package/lib/esm/package.json.mjs +1 -1
  37. package/lib/esm/src/components/ChatInput.mjs +1 -1
  38. package/lib/esm/src/components/ChatPanel.d.ts.map +1 -1
  39. package/lib/esm/src/components/ChatPanel.mjs +7 -29
  40. package/lib/esm/src/components/ChatPanel.mjs.map +1 -1
  41. package/lib/esm/src/components/ChatPopUp.mjs +3 -3
  42. package/lib/esm/src/components/FeedbackButtons.d.ts +3 -4
  43. package/lib/esm/src/components/FeedbackButtons.d.ts.map +1 -1
  44. package/lib/esm/src/components/FeedbackButtons.mjs +2 -1
  45. package/lib/esm/src/components/FeedbackButtons.mjs.map +1 -1
  46. package/lib/esm/src/components/InitialMessagePopUp.mjs +1 -1
  47. package/lib/esm/src/components/Markdown.d.ts +7 -3
  48. package/lib/esm/src/components/Markdown.d.ts.map +1 -1
  49. package/lib/esm/src/components/Markdown.mjs +1 -1
  50. package/lib/esm/src/components/Markdown.mjs.map +1 -1
  51. package/lib/esm/src/components/index.d.ts +4 -1
  52. package/lib/esm/src/components/index.d.ts.map +1 -1
  53. package/lib/esm/src/hooks/index.d.ts +4 -0
  54. package/lib/esm/src/hooks/index.d.ts.map +1 -1
  55. package/lib/esm/src/hooks/useDefaultHandleApiError.d.ts +1 -1
  56. package/lib/esm/src/hooks/useDefaultHandleApiError.mjs +1 -1
  57. package/lib/esm/src/hooks/useDefaultHandleApiError.mjs.map +1 -1
  58. package/lib/esm/src/hooks/useFetchInitialMessage.d.ts +1 -1
  59. package/lib/esm/src/hooks/useFetchInitialMessage.mjs +1 -1
  60. package/lib/esm/src/hooks/useFetchInitialMessage.mjs.map +1 -1
  61. package/lib/esm/src/hooks/useReportAnalyticsEvent.d.ts +1 -1
  62. package/lib/esm/src/hooks/useReportAnalyticsEvent.mjs +1 -1
  63. package/lib/esm/src/hooks/useReportAnalyticsEvent.mjs.map +1 -1
  64. package/lib/esm/src/hooks/useScrollToLastMessage.d.ts +15 -0
  65. package/lib/esm/src/hooks/useScrollToLastMessage.d.ts.map +1 -0
  66. package/lib/esm/src/hooks/useScrollToLastMessage.mjs +43 -0
  67. package/lib/esm/src/hooks/useScrollToLastMessage.mjs.map +1 -0
  68. package/lib/esm/src/index.mjs +6 -0
  69. package/lib/esm/src/index.mjs.map +1 -1
  70. package/package.json +1 -1
  71. package/src/components/ChatPanel.tsx +10 -34
  72. package/src/components/FeedbackButtons.tsx +3 -3
  73. package/src/components/Markdown.tsx +7 -2
  74. package/src/components/index.ts +6 -1
  75. package/src/hooks/index.ts +4 -0
  76. package/src/hooks/useDefaultHandleApiError.ts +1 -1
  77. package/src/hooks/useFetchInitialMessage.ts +1 -1
  78. package/src/hooks/useReportAnalyticsEvent.ts +1 -1
  79. package/src/hooks/useScrollToLastMessage.ts +47 -0
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var version = "0.8.0";
3
+ var version = "0.8.1-alpha";
4
4
 
5
5
  exports.version = version;
6
6
  //# sourceMappingURL=package.json.js.map
@@ -4,8 +4,8 @@ var React = require('react');
4
4
  var chatHeadlessReact = require('@yext/chat-headless-react');
5
5
  var Arrow = require('../icons/Arrow.js');
6
6
  var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
7
- var TextareaAutosize = require('react-textarea-autosize');
8
7
  var useDefaultHandleApiError = require('../hooks/useDefaultHandleApiError.js');
8
+ var TextareaAutosize = require('react-textarea-autosize');
9
9
  var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
10
10
 
11
11
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -1 +1 @@
1
- {"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO7E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAeD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAkE9C"}
1
+ {"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAU7E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAeD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAuC9C"}
@@ -6,9 +6,10 @@ var MessageBubble = require('./MessageBubble.js');
6
6
  var ChatInput = require('./ChatInput.js');
7
7
  var LoadingDots = require('./LoadingDots.js');
8
8
  var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
9
- var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
10
- var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
11
9
  var useFetchInitialMessage = require('../hooks/useFetchInitialMessage.js');
10
+ var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
11
+ var useScrollToLastMessage = require('../hooks/useScrollToLastMessage.js');
12
+ var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
12
13
 
13
14
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
14
15
 
@@ -39,41 +40,18 @@ function ChatPanel(props) {
39
40
  const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
40
41
  const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();
41
42
  useFetchInitialMessage.useFetchInitialMessage(handleError, stream);
43
+ const [messagesContainerRef, setMessageRef] = useScrollToLastMessage.useScrollToLastMessage();
42
44
  React.useEffect(() => {
43
45
  reportAnalyticsEvent({
44
46
  action: "CHAT_IMPRESSION",
45
47
  });
46
48
  }, [reportAnalyticsEvent]);
47
- const messagesRef = React.useRef([]);
48
- const messagesContainer = React.useRef(null);
49
- // Handle scrolling when messages change
50
- React.useEffect(() => {
51
- let scrollTop = 0;
52
- messagesRef.current = messagesRef.current.slice(0, messages.length);
53
- // Sums up scroll heights of all messages except the last one
54
- if (messagesRef?.current.length > 1) {
55
- scrollTop = messagesRef.current
56
- .slice(0, -1)
57
- .map((elem, _) => elem?.scrollHeight ?? 0)
58
- .reduce((total, height) => total + height);
59
- }
60
- // Scroll to the top of the last message
61
- messagesContainer.current?.scroll({
62
- top: scrollTop,
63
- behavior: "smooth",
64
- });
65
- }, [messages]);
66
- const setMessagesRef = React.useCallback((index) => {
67
- if (!messagesRef?.current)
68
- return null;
69
- return (message) => (messagesRef.current[index] = message);
70
- }, []);
71
49
  return (React__default.default.createElement("div", { className: "yext-chat w-full h-full" },
72
50
  React__default.default.createElement("div", { className: cssClasses.container },
73
51
  header,
74
52
  React__default.default.createElement("div", { className: cssClasses.messagesScrollContainer },
75
- React__default.default.createElement("div", { ref: messagesContainer, className: cssClasses.messagesContainer },
76
- messages.map((message, index) => (React__default.default.createElement("div", { key: index, ref: setMessagesRef(index) },
53
+ React__default.default.createElement("div", { ref: messagesContainerRef, className: cssClasses.messagesContainer },
54
+ messages.map((message, index) => (React__default.default.createElement("div", { key: index, ref: setMessageRef(index) },
77
55
  React__default.default.createElement(MessageBubble.MessageBubble, { ...props, customCssClasses: cssClasses.messageBubbleCssClasses, message: message })))),
78
56
  loading && React__default.default.createElement(LoadingDots.LoadingDots, null))),
79
57
  React__default.default.createElement("div", { className: cssClasses.inputContainer },
@@ -1 +1 @@
1
- {"version":3,"file":"ChatPanel.js","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport {\n MessageBubble,\n MessageBubbleCssClasses,\n MessageBubbleProps,\n} from \"./MessageBubble\";\nimport { ChatInput, ChatInputCssClasses, ChatInputProps } from \"./ChatInput\";\nimport { LoadingDots } from \"./LoadingDots\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\nimport { useFetchInitialMessage } from \"../hooks/useFetchInitialMessage\";\n\n/**\n * The CSS class interface for the {@link ChatPanel} component.\n *\n * @public\n */\nexport interface ChatPanelCssClasses {\n container?: string;\n messagesContainer?: string;\n messagesScrollContainer?: string;\n inputContainer?: string;\n inputCssClasses?: ChatInputCssClasses;\n messageBubbleCssClasses?: MessageBubbleCssClasses;\n}\n\nconst builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(\n \"Panel\",\n {\n container: \"h-full w-full flex flex-col relative shadow-2xl bg-white\",\n messagesScrollContainer: \"flex flex-col mt-auto overflow-hidden\",\n messagesContainer: \"flex flex-col gap-y-1 px-4 overflow-auto\",\n inputContainer: \"w-full p-4\",\n messageBubbleCssClasses: {\n topContainer: \"first:mt-4\",\n },\n }\n);\n\n/**\n * The props for the {@link ChatPanel} component.\n *\n * @public\n */\nexport interface ChatPanelProps\n extends Omit<MessageBubbleProps, \"customCssClasses\" | \"message\">,\n Omit<ChatInputProps, \"customCssClasses\"> {\n /** A header to render at the top of the panel. */\n header?: JSX.Element;\n /**\n * CSS classes for customizing the component styling.\n */\n customCssClasses?: ChatPanelCssClasses;\n}\n\n/**\n * A component that renders a full panel for chat bot interactions. This includes\n * the message bubbles for the conversation, input box with send button, and header\n * (if provided).\n *\n * @public\n *\n * @param props - {@link ChatPanelProps}\n */\nexport function ChatPanel(props: ChatPanelProps) {\n const { header, customCssClasses, stream, handleError } = props;\n const messages = useChatState((state) => state.conversation.messages);\n const loading = useChatState((state) => state.conversation.isLoading);\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n useFetchInitialMessage(handleError, stream);\n\n useEffect(() => {\n reportAnalyticsEvent({\n action: \"CHAT_IMPRESSION\",\n });\n }, [reportAnalyticsEvent]);\n\n const messagesRef = useRef<Array<HTMLDivElement | null>>([]);\n const messagesContainer = useRef<HTMLDivElement>(null);\n\n // Handle scrolling when messages change\n useEffect(() => {\n let scrollTop = 0;\n messagesRef.current = messagesRef.current.slice(0, messages.length);\n\n // Sums up scroll heights of all messages except the last one\n if (messagesRef?.current.length > 1) {\n scrollTop = messagesRef.current\n .slice(0, -1)\n .map((elem, _) => elem?.scrollHeight ?? 0)\n .reduce((total, height) => total + height);\n }\n\n // Scroll to the top of the last message\n messagesContainer.current?.scroll({\n top: scrollTop,\n behavior: \"smooth\",\n });\n }, [messages]);\n\n const setMessagesRef = useCallback((index) => {\n if (!messagesRef?.current) return null;\n return (message) => (messagesRef.current[index] = message);\n }, []);\n\n return (\n <div className=\"yext-chat w-full h-full\">\n <div className={cssClasses.container}>\n {header}\n <div className={cssClasses.messagesScrollContainer}>\n <div ref={messagesContainer} className={cssClasses.messagesContainer}>\n {messages.map((message, index) => (\n <div key={index} ref={setMessagesRef(index)}>\n <MessageBubble\n {...props}\n customCssClasses={cssClasses.messageBubbleCssClasses}\n message={message}\n />\n </div>\n ))}\n {loading && <LoadingDots />}\n </div>\n </div>\n <div className={cssClasses.inputContainer}>\n <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />\n </div>\n </div>\n </div>\n );\n}\n"],"names":["withStylelessCssClasses","useChatState","useComposedCssClasses","useReportAnalyticsEvent","useFetchInitialMessage","useEffect","useRef","useCallback","React","MessageBubble","LoadingDots","ChatInput"],"mappings":";;;;;;;;;;;;;;;;AA4BA,MAAM,iBAAiB,GAAwBA,+CAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,0DAA0D;AACrE,IAAA,uBAAuB,EAAE,uCAAuC;AAChE,IAAA,iBAAiB,EAAE,0CAA0C;AAC7D,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,uBAAuB,EAAE;AACvB,QAAA,YAAY,EAAE,YAAY;AAC3B,KAAA;AACF,CAAA,CACF,CAAC;AAkBF;;;;;;;;AAQG;AACG,SAAU,SAAS,CAAC,KAAqB,EAAA;IAC7C,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;AAChE,IAAA,MAAM,QAAQ,GAAGC,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,OAAO,GAAGA,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACtE,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAC9E,IAAA,MAAM,oBAAoB,GAAGC,+CAAuB,EAAE,CAAC;AACvD,IAAAC,6CAAsB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAE5CC,eAAS,CAAC,MAAK;AACb,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,iBAAiB;AAC1B,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAE3B,IAAA,MAAM,WAAW,GAAGC,YAAM,CAA+B,EAAE,CAAC,CAAC;AAC7D,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAiB,IAAI,CAAC,CAAC;;IAGvDD,eAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,CAAC,CAAC;AAClB,QAAA,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;;AAGpE,QAAA,IAAI,WAAW,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,SAAS,GAAG,WAAW,CAAC,OAAO;AAC5B,iBAAA,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACZ,iBAAA,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,EAAE,YAAY,IAAI,CAAC,CAAC;AACzC,iBAAA,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,MAAM,CAAC,CAAC;AAC9C,SAAA;;AAGD,QAAA,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC;AAChC,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,cAAc,GAAGE,iBAAW,CAAC,CAAC,KAAK,KAAI;QAC3C,IAAI,CAAC,WAAW,EAAE,OAAO;AAAE,YAAA,OAAO,IAAI,CAAC;AACvC,QAAA,OAAO,CAAC,OAAO,MAAM,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC;KAC5D,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA;AACtC,QAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;YACjC,MAAM;AACP,YAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAAA;gBAChDA,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAA;oBACjE,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAC3BA,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,cAAc,CAAC,KAAK,CAAC,EAAA;AACzC,wBAAAA,sBAAA,CAAA,aAAA,CAACC,2BAAa,EACR,EAAA,GAAA,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,uBAAuB,EACpD,OAAO,EAAE,OAAO,EAChB,CAAA,CACE,CACP,CAAC;AACD,oBAAA,OAAO,IAAID,sBAAA,CAAA,aAAA,CAACE,uBAAW,EAAA,IAAA,CAAG,CACvB,CACF;AACN,YAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA;AACvC,gBAAAA,sBAAA,CAAA,aAAA,CAACG,mBAAS,EAAA,EAAA,GAAK,KAAK,EAAE,gBAAgB,EAAE,UAAU,CAAC,eAAe,EAAI,CAAA,CAClE,CACF,CACF,EACN;AACJ;;;;"}
1
+ {"version":3,"file":"ChatPanel.js","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport {\n MessageBubble,\n MessageBubbleCssClasses,\n MessageBubbleProps,\n} from \"./MessageBubble\";\nimport { ChatInput, ChatInputCssClasses, ChatInputProps } from \"./ChatInput\";\nimport { LoadingDots } from \"./LoadingDots\";\nimport {\n useComposedCssClasses,\n useReportAnalyticsEvent,\n useFetchInitialMessage,\n useScrollToLastMessage,\n } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\n\n/**\n * The CSS class interface for the {@link ChatPanel} component.\n *\n * @public\n */\nexport interface ChatPanelCssClasses {\n container?: string;\n messagesContainer?: string;\n messagesScrollContainer?: string;\n inputContainer?: string;\n inputCssClasses?: ChatInputCssClasses;\n messageBubbleCssClasses?: MessageBubbleCssClasses;\n}\n\nconst builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(\n \"Panel\",\n {\n container: \"h-full w-full flex flex-col relative shadow-2xl bg-white\",\n messagesScrollContainer: \"flex flex-col mt-auto overflow-hidden\",\n messagesContainer: \"flex flex-col gap-y-1 px-4 overflow-auto\",\n inputContainer: \"w-full p-4\",\n messageBubbleCssClasses: {\n topContainer: \"first:mt-4\",\n },\n }\n);\n\n/**\n * The props for the {@link ChatPanel} component.\n *\n * @public\n */\nexport interface ChatPanelProps\n extends Omit<MessageBubbleProps, \"customCssClasses\" | \"message\">,\n Omit<ChatInputProps, \"customCssClasses\"> {\n /** A header to render at the top of the panel. */\n header?: JSX.Element;\n /**\n * CSS classes for customizing the component styling.\n */\n customCssClasses?: ChatPanelCssClasses;\n}\n\n/**\n * A component that renders a full panel for chat bot interactions. This includes\n * the message bubbles for the conversation, input box with send button, and header\n * (if provided).\n *\n * @public\n *\n * @param props - {@link ChatPanelProps}\n */\nexport function ChatPanel(props: ChatPanelProps) {\n const { header, customCssClasses, stream, handleError } = props;\n const messages = useChatState((state) => state.conversation.messages);\n const loading = useChatState((state) => state.conversation.isLoading);\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n useFetchInitialMessage(handleError, stream);\n const [messagesContainerRef, setMessageRef] = useScrollToLastMessage();\n\n useEffect(() => {\n reportAnalyticsEvent({\n action: \"CHAT_IMPRESSION\",\n });\n }, [reportAnalyticsEvent]);\n\n return (\n <div className=\"yext-chat w-full h-full\">\n <div className={cssClasses.container}>\n {header}\n <div className={cssClasses.messagesScrollContainer}>\n <div ref={messagesContainerRef} className={cssClasses.messagesContainer}>\n {messages.map((message, index) => (\n <div key={index} ref={setMessageRef(index)}>\n <MessageBubble\n {...props}\n customCssClasses={cssClasses.messageBubbleCssClasses}\n message={message}\n />\n </div>\n ))}\n {loading && <LoadingDots />}\n </div>\n </div>\n <div className={cssClasses.inputContainer}>\n <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />\n </div>\n </div>\n </div>\n );\n}\n"],"names":["withStylelessCssClasses","useChatState","useComposedCssClasses","useReportAnalyticsEvent","useFetchInitialMessage","useScrollToLastMessage","useEffect","React","MessageBubble","LoadingDots","ChatInput"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,MAAM,iBAAiB,GAAwBA,+CAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,0DAA0D;AACrE,IAAA,uBAAuB,EAAE,uCAAuC;AAChE,IAAA,iBAAiB,EAAE,0CAA0C;AAC7D,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,uBAAuB,EAAE;AACvB,QAAA,YAAY,EAAE,YAAY;AAC3B,KAAA;AACF,CAAA,CACF,CAAC;AAkBF;;;;;;;;AAQG;AACG,SAAU,SAAS,CAAC,KAAqB,EAAA;IAC7C,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;AAChE,IAAA,MAAM,QAAQ,GAAGC,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,OAAO,GAAGA,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACtE,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAC9E,IAAA,MAAM,oBAAoB,GAAGC,+CAAuB,EAAE,CAAC;AACvD,IAAAC,6CAAsB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAC5C,MAAM,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAGC,6CAAsB,EAAE,CAAC;IAEvEC,eAAS,CAAC,MAAK;AACb,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,iBAAiB;AAC1B,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAE3B,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA;AACtC,QAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;YACjC,MAAM;AACP,YAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAAA;gBAChDA,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,oBAAoB,EAAE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAA;oBACpE,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAC3BA,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EAAA;AACxC,wBAAAA,sBAAA,CAAA,aAAA,CAACC,2BAAa,EACR,EAAA,GAAA,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,uBAAuB,EACpD,OAAO,EAAE,OAAO,EAChB,CAAA,CACE,CACP,CAAC;AACD,oBAAA,OAAO,IAAID,sBAAA,CAAA,aAAA,CAACE,uBAAW,EAAA,IAAA,CAAG,CACvB,CACF;AACN,YAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA;AACvC,gBAAAA,sBAAA,CAAA,aAAA,CAACG,mBAAS,EAAA,EAAA,GAAK,KAAK,EAAE,gBAAgB,EAAE,UAAU,CAAC,eAAe,EAAI,CAAA,CAClE,CACF,CACF,EACN;AACJ;;;;"}
@@ -6,11 +6,11 @@ var ChatPanel = require('./ChatPanel.js');
6
6
  var ChatHeader = require('./ChatHeader.js');
7
7
  var tailwindMerge = require('tailwind-merge');
8
8
  var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
9
- var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
10
- var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
11
- var InitialMessagePopUp = require('./InitialMessagePopUp.js');
12
9
  var chatHeadlessReact = require('@yext/chat-headless-react');
13
10
  var useFetchInitialMessage = require('../hooks/useFetchInitialMessage.js');
11
+ var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
12
+ var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
13
+ var InitialMessagePopUp = require('./InitialMessagePopUp.js');
14
14
 
15
15
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
16
16
 
@@ -16,9 +16,9 @@ export interface FeedbackButtonsCssClasses {
16
16
  /**
17
17
  * The props for the FeedbackButtons component.
18
18
  *
19
- * @internal
19
+ * @public
20
20
  */
21
- interface FeedbackButtonsProps {
21
+ export interface FeedbackButtonsProps {
22
22
  /** The response ID correlates to the current message to give feedback on. */
23
23
  responseId?: string;
24
24
  /** CSS classes for customizing the component styling. */
@@ -28,8 +28,7 @@ interface FeedbackButtonsProps {
28
28
  * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
29
29
  * report analytic events on click.
30
30
  *
31
- * @internal
31
+ * @public
32
32
  */
33
33
  export declare function FeedbackButtons({ customCssClasses, responseId, }: FeedbackButtonsProps): React.JSX.Element;
34
- export {};
35
34
  //# sourceMappingURL=FeedbackButtons.d.ts.map
@@ -1 +1 @@
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
+ {"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,MAAM,WAAW,oBAAoB;IACnC,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"}
@@ -7,6 +7,7 @@ var ThumbsUpFill = require('../icons/ThumbsUpFill.js');
7
7
  var ThumbsDownFill = require('../icons/ThumbsDownFill.js');
8
8
  var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
9
9
  var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
10
+ require('@yext/chat-headless-react');
10
11
  var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
11
12
 
12
13
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -26,7 +27,7 @@ const builtInCssClasses = withStylelessCssClasses.withStylelessCssClasses("Feedb
26
27
  * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
27
28
  * report analytic events on click.
28
29
  *
29
- * @internal
30
+ * @public
30
31
  */
31
32
  function FeedbackButtons({ customCssClasses, responseId, }) {
32
33
  const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();
@@ -1 +1 @@
1
- {"version":3,"file":"FeedbackButtons.js","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 opacity-0 group-hover:opacity-100 duration-200\",\n thumbsUpButton:\n \"w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center\",\n thumbsUpIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n thumbsUpFillIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n thumbsDownButton:\n \"w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center\",\n thumbsDownIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n thumbsDownFillIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n });\n\n/**\n * The props for the FeedbackButtons component.\n *\n * @internal\n */\ninterface FeedbackButtonsProps {\n /** The response ID correlates to the current message to give feedback on. */\n responseId?: string;\n /** CSS classes for customizing the component styling. */\n customCssClasses?: FeedbackButtonsCssClasses;\n}\n\n/**\n * Displays feedback buttons (e.g. thumbs up and thumbs down) that will\n * report analytic events on click.\n *\n * @internal\n */\nexport function FeedbackButtons({\n customCssClasses,\n responseId,\n}: FeedbackButtonsProps) {\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const [selectedThumb, setSelectedThumb] = useState<\n \"UP\" | \"DOWN\" | undefined\n >();\n const onClickThumbsUp = useCallback(() => {\n setSelectedThumb(\"UP\");\n reportAnalyticsEvent({\n action: \"THUMBS_UP\",\n chat: {\n responseId,\n },\n });\n }, [reportAnalyticsEvent, responseId]);\n\n const onClickThumbsDown = useCallback(() => {\n setSelectedThumb(\"DOWN\");\n reportAnalyticsEvent({\n action: \"THUMBS_DOWN\",\n chat: {\n responseId,\n },\n });\n }, [reportAnalyticsEvent, responseId]);\n\n return (\n <div className={cssClasses.container}>\n <button className={cssClasses.thumbsUpButton} onClick={onClickThumbsUp}>\n {selectedThumb === \"UP\" ? (\n <ThumbsUpFillIcon className={cssClasses.thumbsUpFillIcon} />\n ) : (\n <ThumbsUpIcon className={cssClasses.thumbsUpIcon} />\n )}\n </button>\n <button\n className={cssClasses.thumbsDownButton}\n onClick={onClickThumbsDown}\n >\n {selectedThumb === \"DOWN\" ? (\n <ThumbsDownFillIcon className={cssClasses.thumbsDownFillIcon} />\n ) : (\n <ThumbsDownIcon className={cssClasses.thumbsDownIcon} />\n )}\n </button>\n </div>\n );\n}\n"],"names":["withStylelessCssClasses","useReportAnalyticsEvent","useComposedCssClasses","useState","useCallback","React","ThumbsUpFillIcon","ThumbsUpIcon","ThumbsDownFillIcon","ThumbsDownIcon"],"mappings":";;;;;;;;;;;;;;;AAwBA,MAAM,iBAAiB,GACrBA,+CAAuB,CAA4B,iBAAiB,EAAE;AACpE,IAAA,SAAS,EACP,sFAAsF;AACxF,IAAA,cAAc,EACZ,iEAAiE;AACnE,IAAA,YAAY,EAAE,2CAA2C;AACzD,IAAA,gBAAgB,EAAE,2CAA2C;AAC7D,IAAA,gBAAgB,EACd,iEAAiE;AACnE,IAAA,cAAc,EAAE,2CAA2C;AAC3D,IAAA,kBAAkB,EAAE,2CAA2C;AAChE,CAAA,CAAC,CAAC;AAcL;;;;;AAKG;SACa,eAAe,CAAC,EAC9B,gBAAgB,EAChB,UAAU,GACW,EAAA;AACrB,IAAA,MAAM,oBAAoB,GAAGC,+CAAuB,EAAE,CAAC;IACvD,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,EAE/C,CAAC;AACJ,IAAA,MAAM,eAAe,GAAGC,iBAAW,CAAC,MAAK;QACvC,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACvB,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,IAAI,EAAE;gBACJ,UAAU;AACX,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,MAAM,iBAAiB,GAAGA,iBAAW,CAAC,MAAK;QACzC,gBAAgB,CAAC,MAAM,CAAC,CAAC;AACzB,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,IAAI,EAAE;gBACJ,UAAU;AACX,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,QACEC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AAClC,QAAAA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,OAAO,EAAE,eAAe,EACnE,EAAA,aAAa,KAAK,IAAI,IACrBA,qCAACC,6BAAgB,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAI,KAE5DD,qCAACE,qBAAY,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,YAAY,EAAA,CAAI,CACrD,CACM;QACTF,sBACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,OAAO,EAAE,iBAAiB,EAAA,EAEzB,aAAa,KAAK,MAAM,IACvBA,sBAAC,CAAA,aAAA,CAAAG,iCAAkB,IAAC,SAAS,EAAE,UAAU,CAAC,kBAAkB,GAAI,KAEhEH,qCAACI,yBAAc,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA,CAAI,CACzD,CACM,CACL,EACN;AACJ;;;;"}
1
+ {"version":3,"file":"FeedbackButtons.js","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 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 * @public\n */\nexport interface 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 * @public\n */\nexport function FeedbackButtons({\n customCssClasses,\n responseId,\n}: FeedbackButtonsProps) {\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const [selectedThumb, setSelectedThumb] = useState<\n \"UP\" | \"DOWN\" | undefined\n >();\n const onClickThumbsUp = useCallback(() => {\n setSelectedThumb(\"UP\");\n reportAnalyticsEvent({\n action: \"THUMBS_UP\",\n chat: {\n responseId,\n },\n });\n }, [reportAnalyticsEvent, responseId]);\n\n const onClickThumbsDown = useCallback(() => {\n setSelectedThumb(\"DOWN\");\n reportAnalyticsEvent({\n action: \"THUMBS_DOWN\",\n chat: {\n responseId,\n },\n });\n }, [reportAnalyticsEvent, responseId]);\n\n return (\n <div className={cssClasses.container}>\n <button className={cssClasses.thumbsUpButton} onClick={onClickThumbsUp}>\n {selectedThumb === \"UP\" ? (\n <ThumbsUpFillIcon className={cssClasses.thumbsUpFillIcon} />\n ) : (\n <ThumbsUpIcon className={cssClasses.thumbsUpIcon} />\n )}\n </button>\n <button\n className={cssClasses.thumbsDownButton}\n onClick={onClickThumbsDown}\n >\n {selectedThumb === \"DOWN\" ? (\n <ThumbsDownFillIcon className={cssClasses.thumbsDownFillIcon} />\n ) : (\n <ThumbsDownIcon className={cssClasses.thumbsDownIcon} />\n )}\n </button>\n </div>\n );\n}\n"],"names":["withStylelessCssClasses","useReportAnalyticsEvent","useComposedCssClasses","useState","useCallback","React","ThumbsUpFillIcon","ThumbsUpIcon","ThumbsDownFillIcon","ThumbsDownIcon"],"mappings":";;;;;;;;;;;;;;;;AAwBA,MAAM,iBAAiB,GACrBA,+CAAuB,CAA4B,iBAAiB,EAAE;AACpE,IAAA,SAAS,EACP,sFAAsF;AACxF,IAAA,cAAc,EACZ,iEAAiE;AACnE,IAAA,YAAY,EAAE,2CAA2C;AACzD,IAAA,gBAAgB,EAAE,2CAA2C;AAC7D,IAAA,gBAAgB,EACd,iEAAiE;AACnE,IAAA,cAAc,EAAE,2CAA2C;AAC3D,IAAA,kBAAkB,EAAE,2CAA2C;AAChE,CAAA,CAAC,CAAC;AAcL;;;;;AAKG;SACa,eAAe,CAAC,EAC9B,gBAAgB,EAChB,UAAU,GACW,EAAA;AACrB,IAAA,MAAM,oBAAoB,GAAGC,+CAAuB,EAAE,CAAC;IACvD,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,EAE/C,CAAC;AACJ,IAAA,MAAM,eAAe,GAAGC,iBAAW,CAAC,MAAK;QACvC,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACvB,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,IAAI,EAAE;gBACJ,UAAU;AACX,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,MAAM,iBAAiB,GAAGA,iBAAW,CAAC,MAAK;QACzC,gBAAgB,CAAC,MAAM,CAAC,CAAC;AACzB,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,IAAI,EAAE;gBACJ,UAAU;AACX,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,QACEC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AAClC,QAAAA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,OAAO,EAAE,eAAe,EACnE,EAAA,aAAa,KAAK,IAAI,IACrBA,qCAACC,6BAAgB,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAI,KAE5DD,qCAACE,qBAAY,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,YAAY,EAAA,CAAI,CACrD,CACM;QACTF,sBACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,OAAO,EAAE,iBAAiB,EAAA,EAEzB,aAAa,KAAK,MAAM,IACvBA,sBAAC,CAAA,aAAA,CAAAG,iCAAkB,IAAC,SAAS,EAAE,UAAU,CAAC,kBAAkB,GAAI,KAEhEH,qCAACI,yBAAc,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA,CAAI,CACzD,CACM,CACL,EACN;AACJ;;;;"}
@@ -3,8 +3,8 @@
3
3
  var React = require('react');
4
4
  var Cross = require('../icons/Cross.js');
5
5
  var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
6
- var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
7
6
  var chatHeadlessReact = require('@yext/chat-headless-react');
7
+ var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
8
8
 
9
9
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
10
 
@@ -1,5 +1,10 @@
1
1
  import React from "react";
2
- interface MarkdownProps {
2
+ /**
3
+ * The props for the {@link Markdown} component.
4
+ *
5
+ * @public
6
+ */
7
+ export interface MarkdownProps {
3
8
  /** Stringified markdown. */
4
9
  content: string;
5
10
  /** The response ID correlates to the current message. */
@@ -14,8 +19,7 @@ interface MarkdownProps {
14
19
  * @remarks
15
20
  * A link click will send a CHAT_LINK_CLICK analytics event
16
21
  *
17
- * @internal
22
+ * @public
18
23
  */
19
24
  export declare function Markdown({ content, responseId, className }: MarkdownProps): React.JSX.Element;
20
- export {};
21
25
  //# sourceMappingURL=Markdown.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Markdown.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAcvC,UAAU,aAAa;IACrB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,aAAa,qBAuCzE"}
1
+ {"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Markdown.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAcvC;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,aAAa,qBAuCzE"}
@@ -32,7 +32,7 @@ const unifiedPlugins = {
32
32
  * @remarks
33
33
  * A link click will send a CHAT_LINK_CLICK analytics event
34
34
  *
35
- * @internal
35
+ * @public
36
36
  */
37
37
  function Markdown({ content, responseId, className }) {
38
38
  const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();
@@ -1 +1 @@
1
- {"version":3,"file":"Markdown.js","sources":["../../../../src/components/Markdown.tsx"],"sourcesContent":["import ReactMarkdown, {\n PluggableList,\n ReactMarkdownOptions,\n} from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport rehypeSanitize from \"rehype-sanitize\";\nimport React, { useMemo } from \"react\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n// The Remark and Rehype plugins to use in conjunction with ReactMarkdown.\nconst unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {\n remark: [\n remarkGfm, //renders Github-Flavored Markdown\n ],\n rehype: [\n rehypeRaw, //to support HTML embedded in markdown\n rehypeSanitize, //to sanitize HTML content\n ],\n};\n\ninterface MarkdownProps {\n /** Stringified markdown. */\n content: string;\n /** The response ID correlates to the current message. */\n responseId?: string;\n /** Classnames for the container. */\n className?: string;\n}\n\n/**\n * Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include\n * arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.\n *\n * @remarks\n * A link click will send a CHAT_LINK_CLICK analytics event\n *\n * @internal\n */\nexport function Markdown({ content, responseId, className }: MarkdownProps) {\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n\n const components: ReactMarkdownOptions[\"components\"] = useMemo(() => {\n const createClickHandlerFn = (href?: string) => () => {\n reportAnalyticsEvent({\n action: \"CHAT_LINK_CLICK\",\n destinationUrl: href,\n chat: {\n responseId,\n },\n });\n };\n return {\n a: ({ node: _, children, ...props }) => {\n return (\n <a\n {...props}\n onClick={createClickHandlerFn(props.href)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"cursor-pointer\"\n >\n {children}\n </a>\n );\n },\n };\n }, [reportAnalyticsEvent, responseId]);\n\n return (\n <ReactMarkdown\n className={className}\n children={content}\n remarkPlugins={unifiedPlugins.remark}\n rehypePlugins={unifiedPlugins.rehype}\n components={components}\n />\n );\n}\n"],"names":["remarkGfm","rehypeRaw","rehypeSanitize","useReportAnalyticsEvent","useMemo","React","ReactMarkdown"],"mappings":";;;;;;;;;;;;;;;;;AAUA;AACA,MAAM,cAAc,GAAsD;AACxE,IAAA,MAAM,EAAE;AACN,QAAAA,0BAAS;AACV,KAAA;AACD,IAAA,MAAM,EAAE;QACNC,0BAAS;AACT,QAAAC,+BAAc;AACf,KAAA;CACF,CAAC;AAWF;;;;;;;;AAQG;AACG,SAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAiB,EAAA;AACxE,IAAA,MAAM,oBAAoB,GAAGC,+CAAuB,EAAE,CAAC;AAEvD,IAAA,MAAM,UAAU,GAAuCC,aAAO,CAAC,MAAK;QAClE,MAAM,oBAAoB,GAAG,CAAC,IAAa,KAAK,MAAK;AACnD,YAAA,oBAAoB,CAAC;AACnB,gBAAA,MAAM,EAAE,iBAAiB;AACzB,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,IAAI,EAAE;oBACJ,UAAU;AACX,iBAAA;AACF,aAAA,CAAC,CAAC;AACL,SAAC,CAAC;QACF,OAAO;AACL,YAAA,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KAAI;AACrC,gBAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,GACM,KAAK,EACT,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,EACzC,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,gBAAgB,EAEzB,EAAA,QAAQ,CACP,EACJ;aACH;SACF,CAAC;AACJ,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,8BAAa,EAAA,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,OAAO,EACjB,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB,EACF;AACJ;;;;"}
1
+ {"version":3,"file":"Markdown.js","sources":["../../../../src/components/Markdown.tsx"],"sourcesContent":["import ReactMarkdown, {\n PluggableList,\n ReactMarkdownOptions,\n} from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport rehypeSanitize from \"rehype-sanitize\";\nimport React, { useMemo } from \"react\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n// The Remark and Rehype plugins to use in conjunction with ReactMarkdown.\nconst unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {\n remark: [\n remarkGfm, //renders Github-Flavored Markdown\n ],\n rehype: [\n rehypeRaw, //to support HTML embedded in markdown\n rehypeSanitize, //to sanitize HTML content\n ],\n};\n\n/**\n * The props for the {@link Markdown} component.\n * \n * @public\n */\nexport interface MarkdownProps {\n /** Stringified markdown. */\n content: string;\n /** The response ID correlates to the current message. */\n responseId?: string;\n /** Classnames for the container. */\n className?: string;\n}\n\n/**\n * Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include\n * arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.\n *\n * @remarks\n * A link click will send a CHAT_LINK_CLICK analytics event\n *\n * @public\n */\nexport function Markdown({ content, responseId, className }: MarkdownProps) {\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n\n const components: ReactMarkdownOptions[\"components\"] = useMemo(() => {\n const createClickHandlerFn = (href?: string) => () => {\n reportAnalyticsEvent({\n action: \"CHAT_LINK_CLICK\",\n destinationUrl: href,\n chat: {\n responseId,\n },\n });\n };\n return {\n a: ({ node: _, children, ...props }) => {\n return (\n <a\n {...props}\n onClick={createClickHandlerFn(props.href)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"cursor-pointer\"\n >\n {children}\n </a>\n );\n },\n };\n }, [reportAnalyticsEvent, responseId]);\n\n return (\n <ReactMarkdown\n className={className}\n children={content}\n remarkPlugins={unifiedPlugins.remark}\n rehypePlugins={unifiedPlugins.rehype}\n components={components}\n />\n );\n}\n"],"names":["remarkGfm","rehypeRaw","rehypeSanitize","useReportAnalyticsEvent","useMemo","React","ReactMarkdown"],"mappings":";;;;;;;;;;;;;;;;;AAUA;AACA,MAAM,cAAc,GAAsD;AACxE,IAAA,MAAM,EAAE;AACN,QAAAA,0BAAS;AACV,KAAA;AACD,IAAA,MAAM,EAAE;QACNC,0BAAS;AACT,QAAAC,+BAAc;AACf,KAAA;CACF,CAAC;AAgBF;;;;;;;;AAQG;AACG,SAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAiB,EAAA;AACxE,IAAA,MAAM,oBAAoB,GAAGC,+CAAuB,EAAE,CAAC;AAEvD,IAAA,MAAM,UAAU,GAAuCC,aAAO,CAAC,MAAK;QAClE,MAAM,oBAAoB,GAAG,CAAC,IAAa,KAAK,MAAK;AACnD,YAAA,oBAAoB,CAAC;AACnB,gBAAA,MAAM,EAAE,iBAAiB;AACzB,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,IAAI,EAAE;oBACJ,UAAU;AACX,iBAAA;AACF,aAAA,CAAC,CAAC;AACL,SAAC,CAAC;QACF,OAAO;AACL,YAAA,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KAAI;AACrC,gBAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,GACM,KAAK,EACT,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,EACzC,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,gBAAgB,EAEzB,EAAA,QAAQ,CACP,EACJ;aACH;SACF,CAAC;AACJ,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,8BAAa,EAAA,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,OAAO,EACjB,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB,EACF;AACJ;;;;"}
@@ -8,6 +8,9 @@ export { ChatPanel } from "./ChatPanel";
8
8
  export type { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
9
9
  export { ChatPopUp } from "./ChatPopUp";
10
10
  export type { ChatPopUpCssClasses, ChatPopUpProps } from "./ChatPopUp";
11
- export type { FeedbackButtonsCssClasses } from "./FeedbackButtons";
11
+ export { FeedbackButtons } from "./FeedbackButtons";
12
+ export type { FeedbackButtonsCssClasses, FeedbackButtonsProps } from "./FeedbackButtons";
13
+ export { Markdown } from "./Markdown";
14
+ export { MarkdownProps } from "./Markdown";
12
15
  export type { InitialMessagePopUpCssClasses } from "./InitialMessagePopUp";
13
16
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,YAAY,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAEzF,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,YAAY,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC"}
@@ -1,2 +1,6 @@
1
1
  export { useComposedCssClasses } from "./useComposedCssClasses";
2
+ export { useDefaultHandleApiError } from "./useDefaultHandleApiError";
3
+ export { useFetchInitialMessage } from "./useFetchInitialMessage";
4
+ export { useReportAnalyticsEvent } from "./useReportAnalyticsEvent";
5
+ export { useScrollToLastMessage } from "./useScrollToLastMessage";
2
6
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}
@@ -2,7 +2,7 @@
2
2
  * Returns a default handler function for API errors. It will log the error and
3
3
  * add a default error message to state.
4
4
  *
5
- * @internal
5
+ * @public
6
6
  */
7
7
  export declare function useDefaultHandleApiError(): (e: unknown) => void;
8
8
  //# sourceMappingURL=useDefaultHandleApiError.d.ts.map
@@ -7,7 +7,7 @@ var React = require('react');
7
7
  * Returns a default handler function for API errors. It will log the error and
8
8
  * add a default error message to state.
9
9
  *
10
- * @internal
10
+ * @public
11
11
  */
12
12
  function useDefaultHandleApiError() {
13
13
  const chat = chatHeadlessReact.useChatActions();
@@ -1 +1 @@
1
- {"version":3,"file":"useDefaultHandleApiError.js","sources":["../../../../src/hooks/useDefaultHandleApiError.ts"],"sourcesContent":["import { MessageSource, useChatActions } from \"@yext/chat-headless-react\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a default handler function for API errors. It will log the error and\n * add a default error message to state.\n *\n * @internal\n */\nexport function useDefaultHandleApiError() {\n const chat = useChatActions();\n\n return useCallback(\n (e: unknown) => {\n console.error(e);\n chat.addMessage({\n text: \"Sorry, I'm unable to respond at the moment. Please try again later!\",\n source: MessageSource.BOT,\n timestamp: new Date().toISOString(),\n });\n },\n [chat]\n );\n}\n"],"names":["useChatActions","useCallback","MessageSource"],"mappings":";;;;;AAGA;;;;;AAKG;SACa,wBAAwB,GAAA;AACtC,IAAA,MAAM,IAAI,GAAGA,gCAAc,EAAE,CAAC;AAE9B,IAAA,OAAOC,iBAAW,CAChB,CAAC,CAAU,KAAI;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,IAAI,CAAC,UAAU,CAAC;AACd,YAAA,IAAI,EAAE,qEAAqE;YAC3E,MAAM,EAAEC,+BAAa,CAAC,GAAG;AACzB,YAAA,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;AACpC,SAAA,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;AACJ;;;;"}
1
+ {"version":3,"file":"useDefaultHandleApiError.js","sources":["../../../../src/hooks/useDefaultHandleApiError.ts"],"sourcesContent":["import { MessageSource, useChatActions } from \"@yext/chat-headless-react\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a default handler function for API errors. It will log the error and\n * add a default error message to state.\n *\n * @public\n */\nexport function useDefaultHandleApiError() {\n const chat = useChatActions();\n\n return useCallback(\n (e: unknown) => {\n console.error(e);\n chat.addMessage({\n text: \"Sorry, I'm unable to respond at the moment. Please try again later!\",\n source: MessageSource.BOT,\n timestamp: new Date().toISOString(),\n });\n },\n [chat]\n );\n}\n"],"names":["useChatActions","useCallback","MessageSource"],"mappings":";;;;;AAGA;;;;;AAKG;SACa,wBAAwB,GAAA;AACtC,IAAA,MAAM,IAAI,GAAGA,gCAAc,EAAE,CAAC;AAE9B,IAAA,OAAOC,iBAAW,CAChB,CAAC,CAAU,KAAI;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,IAAI,CAAC,UAAU,CAAC;AACd,YAAA,IAAI,EAAE,qEAAqE;YAC3E,MAAM,EAAEC,+BAAa,CAAC,GAAG;AACzB,YAAA,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;AACpC,SAAA,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;AACJ;;;;"}
@@ -2,7 +2,7 @@
2
2
  * Sends a request to Chat API to fetch the initial message when the
3
3
  * conversation first start or when the message history is reset.
4
4
  *
5
- * @internal
5
+ * @public
6
6
  *
7
7
  * @param handleError - A function which is called when an error occurs while fetching for initial message.
8
8
  * By default, the error is logged to the console and an error message is added to state.
@@ -8,7 +8,7 @@ var useDefaultHandleApiError = require('./useDefaultHandleApiError.js');
8
8
  * Sends a request to Chat API to fetch the initial message when the
9
9
  * conversation first start or when the message history is reset.
10
10
  *
11
- * @internal
11
+ * @public
12
12
  *
13
13
  * @param handleError - A function which is called when an error occurs while fetching for initial message.
14
14
  * By default, the error is logged to the console and an error message is added to state.
@@ -1 +1 @@
1
- {"version":3,"file":"useFetchInitialMessage.js","sources":["../../../../src/hooks/useFetchInitialMessage.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useChatState, useChatActions } from \"@yext/chat-headless-react\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\n\n/**\n * Sends a request to Chat API to fetch the initial message when the\n * conversation first start or when the message history is reset.\n *\n * @internal\n *\n * @param handleError - A function which is called when an error occurs while fetching for initial message.\n * By default, the error is logged to the console and an error message is added to state.\n * @param stream - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.\n * @param customCondition - additional condition for when to fetch initial message\n */\nexport function useFetchInitialMessage(\n handleError?: (e: unknown) => void,\n stream = false,\n customCondition = true\n) {\n const chat = useChatActions();\n const defaultHandleApiError = useDefaultHandleApiError();\n const messages = useChatState((state) => state.conversation.messages);\n const [fetchInitialMessage, setFetchInitialMessage] = useState(\n messages.length === 0\n );\n const [messagesLength, setMessagesLength] = useState(messages.length);\n const canSendMessage = useChatState(\n (state) => state.conversation.canSendMessage\n );\n\n //handle message history resets\n useEffect(() => {\n const newMessagesLength = messages.length;\n // Fetch data only when the conversation messages changes from non-zero to zero\n if (messagesLength > 0 && newMessagesLength === 0) {\n setFetchInitialMessage(true);\n }\n setMessagesLength(newMessagesLength);\n }, [messages.length, messagesLength]);\n\n useEffect(() => {\n if (!fetchInitialMessage || !canSendMessage || !customCondition) {\n return;\n }\n setFetchInitialMessage(false);\n const res = stream ? chat.streamNextMessage() : chat.getNextMessage();\n res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));\n }, [\n chat,\n stream,\n handleError,\n defaultHandleApiError,\n fetchInitialMessage,\n canSendMessage,\n customCondition,\n ]);\n}\n"],"names":["useChatActions","useDefaultHandleApiError","useChatState","useState","useEffect"],"mappings":";;;;;;AAIA;;;;;;;;;;AAUG;AACG,SAAU,sBAAsB,CACpC,WAAkC,EAClC,MAAM,GAAG,KAAK,EACd,eAAe,GAAG,IAAI,EAAA;AAEtB,IAAA,MAAM,IAAI,GAAGA,gCAAc,EAAE,CAAC;AAC9B,IAAA,MAAM,qBAAqB,GAAGC,iDAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,QAAQ,GAAGC,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAGC,cAAQ,CAC5D,QAAQ,CAAC,MAAM,KAAK,CAAC,CACtB,CAAC;AACF,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AACtE,IAAA,MAAM,cAAc,GAAGD,8BAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;;IAGFE,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC;;AAE1C,QAAA,IAAI,cAAc,GAAG,CAAC,IAAI,iBAAiB,KAAK,CAAC,EAAE;YACjD,sBAAsB,CAAC,IAAI,CAAC,CAAC;AAC9B,SAAA;QACD,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtC,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAEtCA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,mBAAmB,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,EAAE;YAC/D,OAAO;AACR,SAAA;QACD,sBAAsB,CAAC,KAAK,CAAC,CAAC;AAC9B,QAAA,MAAM,GAAG,GAAG,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACtE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9E,KAAC,EAAE;QACD,IAAI;QACJ,MAAM;QACN,WAAW;QACX,qBAAqB;QACrB,mBAAmB;QACnB,cAAc;QACd,eAAe;AAChB,KAAA,CAAC,CAAC;AACL;;;;"}
1
+ {"version":3,"file":"useFetchInitialMessage.js","sources":["../../../../src/hooks/useFetchInitialMessage.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useChatState, useChatActions } from \"@yext/chat-headless-react\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\n\n/**\n * Sends a request to Chat API to fetch the initial message when the\n * conversation first start or when the message history is reset.\n *\n * @public\n *\n * @param handleError - A function which is called when an error occurs while fetching for initial message.\n * By default, the error is logged to the console and an error message is added to state.\n * @param stream - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.\n * @param customCondition - additional condition for when to fetch initial message\n */\nexport function useFetchInitialMessage(\n handleError?: (e: unknown) => void,\n stream = false,\n customCondition = true\n) {\n const chat = useChatActions();\n const defaultHandleApiError = useDefaultHandleApiError();\n const messages = useChatState((state) => state.conversation.messages);\n const [fetchInitialMessage, setFetchInitialMessage] = useState(\n messages.length === 0\n );\n const [messagesLength, setMessagesLength] = useState(messages.length);\n const canSendMessage = useChatState(\n (state) => state.conversation.canSendMessage\n );\n\n //handle message history resets\n useEffect(() => {\n const newMessagesLength = messages.length;\n // Fetch data only when the conversation messages changes from non-zero to zero\n if (messagesLength > 0 && newMessagesLength === 0) {\n setFetchInitialMessage(true);\n }\n setMessagesLength(newMessagesLength);\n }, [messages.length, messagesLength]);\n\n useEffect(() => {\n if (!fetchInitialMessage || !canSendMessage || !customCondition) {\n return;\n }\n setFetchInitialMessage(false);\n const res = stream ? chat.streamNextMessage() : chat.getNextMessage();\n res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));\n }, [\n chat,\n stream,\n handleError,\n defaultHandleApiError,\n fetchInitialMessage,\n canSendMessage,\n customCondition,\n ]);\n}\n"],"names":["useChatActions","useDefaultHandleApiError","useChatState","useState","useEffect"],"mappings":";;;;;;AAIA;;;;;;;;;;AAUG;AACG,SAAU,sBAAsB,CACpC,WAAkC,EAClC,MAAM,GAAG,KAAK,EACd,eAAe,GAAG,IAAI,EAAA;AAEtB,IAAA,MAAM,IAAI,GAAGA,gCAAc,EAAE,CAAC;AAC9B,IAAA,MAAM,qBAAqB,GAAGC,iDAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,QAAQ,GAAGC,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAGC,cAAQ,CAC5D,QAAQ,CAAC,MAAM,KAAK,CAAC,CACtB,CAAC;AACF,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AACtE,IAAA,MAAM,cAAc,GAAGD,8BAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;;IAGFE,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC;;AAE1C,QAAA,IAAI,cAAc,GAAG,CAAC,IAAI,iBAAiB,KAAK,CAAC,EAAE;YACjD,sBAAsB,CAAC,IAAI,CAAC,CAAC;AAC9B,SAAA;QACD,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtC,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAEtCA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,mBAAmB,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,EAAE;YAC/D,OAAO;AACR,SAAA;QACD,sBAAsB,CAAC,KAAK,CAAC,CAAC;AAC9B,QAAA,MAAM,GAAG,GAAG,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACtE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9E,KAAC,EAAE;QACD,IAAI;QACJ,MAAM;QACN,WAAW;QACX,qBAAqB;QACrB,mBAAmB;QACnB,cAAc;QACd,eAAe;AAChB,KAAA,CAAC,CAAC;AACL;;;;"}
@@ -4,7 +4,7 @@ import { ChatHeadless } from "@yext/chat-headless-react";
4
4
  * The payload will automatically includes chat-ui-react's
5
5
  * package version for "clientSdk" field.
6
6
  *
7
- * @internal
7
+ * @public
8
8
  */
9
9
  export declare function useReportAnalyticsEvent(): ChatHeadless["report"];
10
10
  //# sourceMappingURL=useReportAnalyticsEvent.d.ts.map
@@ -9,7 +9,7 @@ var React = require('react');
9
9
  * The payload will automatically includes chat-ui-react's
10
10
  * package version for "clientSdk" field.
11
11
  *
12
- * @internal
12
+ * @public
13
13
  */
14
14
  function useReportAnalyticsEvent() {
15
15
  const chat = chatHeadlessReact.useChatActions();
@@ -1 +1 @@
1
- {"version":3,"file":"useReportAnalyticsEvent.js","sources":["../../../../src/hooks/useReportAnalyticsEvent.ts"],"sourcesContent":["import { ChatHeadless, useChatActions } from \"@yext/chat-headless-react\";\nimport { version } from \"../../package.json\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a function to send requests to Yext Analytics API.\n * The payload will automatically includes chat-ui-react's\n * package version for \"clientSdk\" field.\n *\n * @internal\n */\nexport function useReportAnalyticsEvent(): ChatHeadless[\"report\"] {\n const chat = useChatActions();\n chat.addClientSdk({\n CHAT_UI_REACT: version,\n });\n return useCallback((payload) => chat.report(payload), [chat]);\n}\n"],"names":["useChatActions","version","useCallback"],"mappings":";;;;;;AAIA;;;;;;AAMG;SACa,uBAAuB,GAAA;AACrC,IAAA,MAAM,IAAI,GAAGA,gCAAc,EAAE,CAAC;IAC9B,IAAI,CAAC,YAAY,CAAC;AAChB,QAAA,aAAa,EAAEC,gBAAO;AACvB,KAAA,CAAC,CAAC;AACH,IAAA,OAAOC,iBAAW,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE;;;;"}
1
+ {"version":3,"file":"useReportAnalyticsEvent.js","sources":["../../../../src/hooks/useReportAnalyticsEvent.ts"],"sourcesContent":["import { ChatHeadless, useChatActions } from \"@yext/chat-headless-react\";\nimport { version } from \"../../package.json\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a function to send requests to Yext Analytics API.\n * The payload will automatically includes chat-ui-react's\n * package version for \"clientSdk\" field.\n *\n * @public\n */\nexport function useReportAnalyticsEvent(): ChatHeadless[\"report\"] {\n const chat = useChatActions();\n chat.addClientSdk({\n CHAT_UI_REACT: version,\n });\n return useCallback((payload) => chat.report(payload), [chat]);\n}\n"],"names":["useChatActions","version","useCallback"],"mappings":";;;;;;AAIA;;;;;;AAMG;SACa,uBAAuB,GAAA;AACrC,IAAA,MAAM,IAAI,GAAGA,gCAAc,EAAE,CAAC;IAC9B,IAAI,CAAC,YAAY,CAAC;AAChB,QAAA,aAAa,EAAEC,gBAAO;AACvB,KAAA,CAAC,CAAC;AACH,IAAA,OAAOC,iBAAW,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE;;;;"}
@@ -0,0 +1,15 @@
1
+ import React from "react";
2
+ /**
3
+ * Scroll the messsages container to the top of the last message whenever there's
4
+ * an update to the messages state.
5
+ *
6
+ * @public
7
+ *
8
+ * @returns a ref to set on the messages container element and
9
+ * a function to set ref on individual message element
10
+ */
11
+ export declare function useScrollToLastMessage(): [
12
+ React.RefObject<HTMLDivElement>,
13
+ (index: number) => ((message: HTMLDivElement) => void) | undefined
14
+ ];
15
+ //# sourceMappingURL=useScrollToLastMessage.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useScrollToLastMessage.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useScrollToLastMessage.ts"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,IAAI;IACxC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC/B,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS;CACnE,CA+BA"}
@@ -0,0 +1,45 @@
1
+ 'use strict';
2
+
3
+ var chatHeadlessReact = require('@yext/chat-headless-react');
4
+ var React = require('react');
5
+
6
+ /**
7
+ * Scroll the messsages container to the top of the last message whenever there's
8
+ * an update to the messages state.
9
+ *
10
+ * @public
11
+ *
12
+ * @returns a ref to set on the messages container element and
13
+ * a function to set ref on individual message element
14
+ */
15
+ function useScrollToLastMessage() {
16
+ const messagesRef = React.useRef([]);
17
+ const messagesContainerRef = React.useRef(null);
18
+ const messages = chatHeadlessReact.useChatState((state) => state.conversation.messages);
19
+ // Handle scrolling when messages change
20
+ React.useEffect(() => {
21
+ let scrollTop = 0;
22
+ messagesRef.current = messagesRef.current.slice(0, messages.length);
23
+ // Sums up scroll heights of all messages except the last one
24
+ if (messagesRef?.current.length > 1) {
25
+ scrollTop = messagesRef.current
26
+ .slice(0, -1)
27
+ .map((elem, _) => elem?.scrollHeight ?? 0)
28
+ .reduce((total, height) => total + height);
29
+ }
30
+ // Scroll to the top of the last message
31
+ messagesContainerRef.current?.scroll({
32
+ top: scrollTop,
33
+ behavior: "smooth",
34
+ });
35
+ }, [messages]);
36
+ const setMessageRef = React.useCallback((index) => {
37
+ if (!messagesRef?.current)
38
+ return undefined;
39
+ return (message) => (messagesRef.current[index] = message);
40
+ }, []);
41
+ return [messagesContainerRef, setMessageRef];
42
+ }
43
+
44
+ exports.useScrollToLastMessage = useScrollToLastMessage;
45
+ //# sourceMappingURL=useScrollToLastMessage.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useScrollToLastMessage.js","sources":["../../../../src/hooks/useScrollToLastMessage.ts"],"sourcesContent":["import { useChatState } from \"@yext/chat-headless-react\";\nimport React, { useCallback, useEffect, useRef } from \"react\";\n\n/**\n * Scroll the messsages container to the top of the last message whenever there's\n * an update to the messages state.\n * \n * @public\n * \n * @returns a ref to set on the messages container element and\n * a function to set ref on individual message element\n */\nexport function useScrollToLastMessage(): [\n React.RefObject<HTMLDivElement>,\n (index: number) => ((message: HTMLDivElement) => void) | undefined\n] {\n const messagesRef = useRef<Array<HTMLDivElement | null>>([]);\n const messagesContainerRef = useRef<HTMLDivElement>(null);\n const messages = useChatState((state) => state.conversation.messages);\n\n // Handle scrolling when messages change\n useEffect(() => {\n let scrollTop = 0;\n messagesRef.current = messagesRef.current.slice(0, messages.length);\n\n // Sums up scroll heights of all messages except the last one\n if (messagesRef?.current.length > 1) {\n scrollTop = messagesRef.current\n .slice(0, -1)\n .map((elem, _) => elem?.scrollHeight ?? 0)\n .reduce((total, height) => total + height);\n }\n\n // Scroll to the top of the last message\n messagesContainerRef.current?.scroll({\n top: scrollTop,\n behavior: \"smooth\",\n });\n }, [messages]);\n\n const setMessageRef = useCallback((index) => {\n if (!messagesRef?.current) return undefined;\n return (message: HTMLDivElement) => (messagesRef.current[index] = message);\n }, []);\n\n return [messagesContainerRef, setMessageRef]\n}"],"names":["useRef","useChatState","useEffect","useCallback"],"mappings":";;;;;AAGA;;;;;;;;AAQG;SACa,sBAAsB,GAAA;AAIpC,IAAA,MAAM,WAAW,GAAGA,YAAM,CAA+B,EAAE,CAAC,CAAC;AAC7D,IAAA,MAAM,oBAAoB,GAAGA,YAAM,CAAiB,IAAI,CAAC,CAAC;AAC1D,IAAA,MAAM,QAAQ,GAAGC,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;;IAGtEC,eAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,CAAC,CAAC;AAClB,QAAA,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;;AAGpE,QAAA,IAAI,WAAW,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,SAAS,GAAG,WAAW,CAAC,OAAO;AAC5B,iBAAA,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACZ,iBAAA,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,EAAE,YAAY,IAAI,CAAC,CAAC;AACzC,iBAAA,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,MAAM,CAAC,CAAC;AAC9C,SAAA;;AAGD,QAAA,oBAAoB,CAAC,OAAO,EAAE,MAAM,CAAC;AACnC,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,aAAa,GAAGC,iBAAW,CAAC,CAAC,KAAK,KAAI;QAC1C,IAAI,CAAC,WAAW,EAAE,OAAO;AAAE,YAAA,OAAO,SAAS,CAAC;AAC5C,QAAA,OAAO,CAAC,OAAuB,MAAM,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC;KAC5E,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,OAAO,CAAC,oBAAoB,EAAE,aAAa,CAAC,CAAA;AAC9C;;;;"}
@@ -5,7 +5,13 @@ var ChatHeader = require('./components/ChatHeader.js');
5
5
  var MessageBubble = require('./components/MessageBubble.js');
6
6
  var ChatPanel = require('./components/ChatPanel.js');
7
7
  var ChatPopUp = require('./components/ChatPopUp.js');
8
+ var FeedbackButtons = require('./components/FeedbackButtons.js');
9
+ var Markdown = require('./components/Markdown.js');
8
10
  var useComposedCssClasses = require('./hooks/useComposedCssClasses.js');
11
+ var useDefaultHandleApiError = require('./hooks/useDefaultHandleApiError.js');
12
+ var useFetchInitialMessage = require('./hooks/useFetchInitialMessage.js');
13
+ var useReportAnalyticsEvent = require('./hooks/useReportAnalyticsEvent.js');
14
+ var useScrollToLastMessage = require('./hooks/useScrollToLastMessage.js');
9
15
 
10
16
 
11
17
 
@@ -14,5 +20,11 @@ exports.ChatHeader = ChatHeader.ChatHeader;
14
20
  exports.MessageBubble = MessageBubble.MessageBubble;
15
21
  exports.ChatPanel = ChatPanel.ChatPanel;
16
22
  exports.ChatPopUp = ChatPopUp.ChatPopUp;
23
+ exports.FeedbackButtons = FeedbackButtons.FeedbackButtons;
24
+ exports.Markdown = Markdown.Markdown;
17
25
  exports.useComposedCssClasses = useComposedCssClasses.useComposedCssClasses;
26
+ exports.useDefaultHandleApiError = useDefaultHandleApiError.useDefaultHandleApiError;
27
+ exports.useFetchInitialMessage = useFetchInitialMessage.useFetchInitialMessage;
28
+ exports.useReportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent;
29
+ exports.useScrollToLastMessage = useScrollToLastMessage.useScrollToLastMessage;
18
30
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}