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

package/lib/commonjs/src/components/InitialMessagePopUp.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+/**
+ * The CSS class interface for the InitialMessagePopUp component.
+ *
+ * @public
+ */
+export interface InitialMessagePopUpCssClasses {
+    container?: string;
+    closeButton?: string;
+    closeButtonIcon?: string;
+    message?: string;
+}
+/**
+ * The props for the {@link InitialMessagePopUp} component.
+ *
+ * @internal
+ */
+interface InitialMessagePopUpProps {
+    /** CSS classes for customizing the component styling. */
+    customCssClasses?: InitialMessagePopUpCssClasses;
+    /** Function to call when user click on the close button */
+    onClose: () => void;
+}
+/**
+ * A component that renders a popup bubble displaying the initial message from chat bot.
+ *
+ * @internal
+ *
+ * @param props - {@link InitialMessagePopUpProps}
+ */
+export declare function InitialMessagePopUp({ onClose, customCssClasses, }: InitialMessagePopUpProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=InitialMessagePopUp.d.ts.map

package/lib/commonjs/src/components/InitialMessagePopUp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InitialMessagePopUp.d.ts","sourceRoot":"","sources":["../../../../src/components/InitialMessagePopUp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC;;;;GAIG;AACH,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,UAAU,wBAAwB;IAChC,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,6BAA6B,CAAC;IACjD,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAWD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,gBAAgB,GACjB,EAAE,wBAAwB,qBA0B1B"}

package/lib/commonjs/src/components/InitialMessagePopUp.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var React = require('react');
+var Cross = require('../icons/Cross.js');
+var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
+var chatHeadlessReact = require('@yext/chat-headless-react');
+var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const builtInCssClasses = withStylelessCssClasses.withStylelessCssClasses("InitialMessagePopUp", {
+    container: "flex gap-x-1 animate-fade-in",
+    closeButton: "bg-white w-4 h-4 rounded-full border border-slate-300",
+    closeButtonIcon: "",
+    message: "line-clamp-2 w-60 p-2.5 bg-white rounded-xl shadow-xl text-sm lg:text-base",
+});
+/**
+ * A component that renders a popup bubble displaying the initial message from chat bot.
+ *
+ * @internal
+ *
+ * @param props - {@link InitialMessagePopUpProps}
+ */
+function InitialMessagePopUp({ onClose, customCssClasses, }) {
+    const messages = chatHeadlessReact.useChatState((s) => s.conversation.messages);
+    const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const firstBotMessage = React.useMemo(() => {
+        return messages.length !== 0 && messages[0].source === chatHeadlessReact.MessageSource.BOT
+            ? messages[0].text
+            : "";
+    }, [messages]);
+    if (firstBotMessage.length === 0) {
+        return React__default.default.createElement(React__default.default.Fragment, null);
+    }
+    return (React__default.default.createElement("div", { className: cssClasses.container },
+        React__default.default.createElement("button", { "aria-label": "Close Initial Message", onClick: onClose, className: cssClasses.closeButton },
+            React__default.default.createElement(Cross.CrossIcon, { className: cssClasses.closeButtonIcon })),
+        React__default.default.createElement("div", { className: cssClasses.message }, firstBotMessage)));
+}
+
+exports.InitialMessagePopUp = InitialMessagePopUp;
+//# sourceMappingURL=InitialMessagePopUp.js.map

package/lib/commonjs/src/components/InitialMessagePopUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InitialMessagePopUp.js","sources":["../../../../src/components/InitialMessagePopUp.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { CrossIcon } from \"../icons/Cross\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { MessageSource, useChatState } from \"@yext/chat-headless-react\";\n\n/**\n * The CSS class interface for the InitialMessagePopUp component.\n *\n * @public\n */\nexport interface InitialMessagePopUpCssClasses {\n  container?: string;\n  closeButton?: string;\n  closeButtonIcon?: string;\n  message?: string;\n}\n\n/**\n * The props for the {@link InitialMessagePopUp} component.\n *\n * @internal\n */\ninterface InitialMessagePopUpProps {\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: InitialMessagePopUpCssClasses;\n  /** Function to call when user click on the close button */\n  onClose: () => void;\n}\n\nconst builtInCssClasses: InitialMessagePopUpCssClasses =\n  withStylelessCssClasses(\"InitialMessagePopUp\", {\n    container: \"flex gap-x-1 animate-fade-in\",\n    closeButton: \"bg-white w-4 h-4 rounded-full border border-slate-300\",\n    closeButtonIcon: \"\",\n    message:\n      \"line-clamp-2 w-60 p-2.5 bg-white rounded-xl shadow-xl text-sm lg:text-base\",\n  });\n\n/**\n * A component that renders a popup bubble displaying the initial message from chat bot.\n *\n * @internal\n *\n * @param props - {@link InitialMessagePopUpProps}\n */\nexport function InitialMessagePopUp({\n  onClose,\n  customCssClasses,\n}: InitialMessagePopUpProps) {\n  const messages = useChatState((s) => s.conversation.messages);\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n  const firstBotMessage: string = useMemo(() => {\n    return messages.length !== 0 && messages[0].source === MessageSource.BOT\n      ? messages[0].text\n      : \"\";\n  }, [messages]);\n\n  if (firstBotMessage.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <div className={cssClasses.container}>\n      <button\n        aria-label=\"Close Initial Message\"\n        onClick={onClose}\n        className={cssClasses.closeButton}\n      >\n        <CrossIcon className={cssClasses.closeButtonIcon} />\n      </button>\n      <div className={cssClasses.message}>{firstBotMessage}</div>\n    </div>\n  );\n}\n"],"names":["withStylelessCssClasses","useChatState","useComposedCssClasses","useMemo","MessageSource","React","CrossIcon"],"mappings":";;;;;;;;;;;;AA8BA,MAAM,iBAAiB,GACrBA,+CAAuB,CAAC,qBAAqB,EAAE;AAC7C,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,WAAW,EAAE,uDAAuD;AACpE,IAAA,eAAe,EAAE,EAAE;AACnB,IAAA,OAAO,EACL,4EAA4E;AAC/E,CAAA,CAAC,CAAC;AAEL;;;;;;AAMG;SACa,mBAAmB,CAAC,EAClC,OAAO,EACP,gBAAgB,GACS,EAAA;AACzB,IAAA,MAAM,QAAQ,GAAGC,8BAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,eAAe,GAAWC,aAAO,CAAC,MAAK;AAC3C,QAAA,OAAO,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,KAAKC,+BAAa,CAAC,GAAG;AACtE,cAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI;cAChB,EAAE,CAAC;AACT,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,QAAA,OAAOC,2EAAK,CAAC;AACd,KAAA;AAED,IAAA,QACEA,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QAClCA,sBACa,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAA,uBAAuB,EAClC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,EAAA;YAEjCA,sBAAC,CAAA,aAAA,CAAAC,eAAS,IAAC,SAAS,EAAE,UAAU,CAAC,eAAe,GAAI,CAC7C;QACTD,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,OAAO,IAAG,eAAe,CAAO,CACvD,EACN;AACJ;;;;"}

package/lib/commonjs/src/components/Markdown.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
-interface MarkdownProps {
+/**
+ * The props for the {@link Markdown} component.
+ *
+ * @public
+ */
+export interface MarkdownProps {
     /** Stringified markdown. */
     content: string;
     /** The response ID correlates to the current message. */
@@ -14,8 +19,7 @@ interface MarkdownProps {
  * @remarks
  * A link click will send a CHAT_LINK_CLICK analytics event
  *
- * @internal
+ * @public
  */
 export declare function Markdown({ content, responseId, className }: MarkdownProps): React.JSX.Element;
-export {};
 //# sourceMappingURL=Markdown.d.ts.map

package/lib/commonjs/src/components/Markdown.d.ts.map

@@ -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"}
+{"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"}

package/lib/commonjs/src/components/Markdown.js

@@ -32,7 +32,7 @@ const unifiedPlugins = {
  * @remarks
  * A link click will send a CHAT_LINK_CLICK analytics event
  *
- * @internal
+ * @public
  */
 function Markdown({ content, responseId, className }) {
     const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();

package/lib/commonjs/src/components/Markdown.js.map

@@ -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;;;;"}
+{"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;;;;"}

package/lib/commonjs/src/components/index.d.ts

@@ -4,9 +4,13 @@ export { ChatHeader } from "./ChatHeader";
 export type { ChatHeaderCssClasses, ChatHeaderProps } from "./ChatHeader";
 export { MessageBubble } from "./MessageBubble";
 export type { MessageBubbleCssClasses, MessageBubbleProps, } from "./MessageBubble";
-export type { FeedbackButtonsCssClasses } from "./FeedbackButtons";
 export { ChatPanel } from "./ChatPanel";
 export type { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
 export { ChatPopUp } from "./ChatPopUp";
 export type { ChatPopUpCssClasses, ChatPopUpProps } from "./ChatPopUp";
+export { FeedbackButtons } from "./FeedbackButtons";
+export type { FeedbackButtonsCssClasses, FeedbackButtonsProps } from "./FeedbackButtons";
+export { Markdown } from "./Markdown";
+export { MarkdownProps } from "./Markdown";
+export type { InitialMessagePopUpCssClasses } from "./InitialMessagePopUp";
 //# sourceMappingURL=index.d.ts.map

package/lib/commonjs/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"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"}

package/lib/commonjs/src/hooks/index.d.ts

@@ -1,2 +1,6 @@
 export { useComposedCssClasses } from "./useComposedCssClasses";
+export { useDefaultHandleApiError } from "./useDefaultHandleApiError";
+export { useFetchInitialMessage } from "./useFetchInitialMessage";
+export { useReportAnalyticsEvent } from "./useReportAnalyticsEvent";
+export { useScrollToLastMessage } from "./useScrollToLastMessage";
 //# sourceMappingURL=index.d.ts.map

package/lib/commonjs/src/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"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"}

package/lib/commonjs/src/hooks/useDefaultHandleApiError.d.ts

@@ -2,7 +2,7 @@
  * Returns a default handler function for API errors. It will log the error and
  * add a default error message to state.
  *
- * @internal
+ * @public
  */
 export declare function useDefaultHandleApiError(): (e: unknown) => void;
 //# sourceMappingURL=useDefaultHandleApiError.d.ts.map

package/lib/commonjs/src/hooks/useDefaultHandleApiError.js

@@ -7,7 +7,7 @@ var React = require('react');
  * Returns a default handler function for API errors. It will log the error and
  * add a default error message to state.
  *
- * @internal
+ * @public
  */
 function useDefaultHandleApiError() {
     const chat = chatHeadlessReact.useChatActions();

package/lib/commonjs/src/hooks/useDefaultHandleApiError.js.map

@@ -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;;;;"}
+{"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;;;;"}

package/lib/commonjs/src/hooks/useFetchInitialMessage.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Sends a request to Chat API to fetch the initial message when the
+ * conversation first start or when the message history is reset.
+ *
+ * @public
+ *
+ * @param handleError - A function which is called when an error occurs while fetching for initial message.
+ *                      By default, the error is logged to the console and an error message is added to state.
+ * @param stream      - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.
+ * @param customCondition - additional condition for when to fetch initial message
+ */
+export declare function useFetchInitialMessage(handleError?: (e: unknown) => void, stream?: boolean, customCondition?: boolean): void;
+//# sourceMappingURL=useFetchInitialMessage.d.ts.map

package/lib/commonjs/src/hooks/useFetchInitialMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchInitialMessage.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useFetchInitialMessage.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,EAClC,MAAM,UAAQ,EACd,eAAe,UAAO,QAuCvB"}

package/lib/commonjs/src/hooks/useFetchInitialMessage.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var chatHeadlessReact = require('@yext/chat-headless-react');
+var useDefaultHandleApiError = require('./useDefaultHandleApiError.js');
+
+/**
+ * Sends a request to Chat API to fetch the initial message when the
+ * conversation first start or when the message history is reset.
+ *
+ * @public
+ *
+ * @param handleError - A function which is called when an error occurs while fetching for initial message.
+ *                      By default, the error is logged to the console and an error message is added to state.
+ * @param stream      - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.
+ * @param customCondition - additional condition for when to fetch initial message
+ */
+function useFetchInitialMessage(handleError, stream = false, customCondition = true) {
+    const chat = chatHeadlessReact.useChatActions();
+    const defaultHandleApiError = useDefaultHandleApiError.useDefaultHandleApiError();
+    const messages = chatHeadlessReact.useChatState((state) => state.conversation.messages);
+    const [fetchInitialMessage, setFetchInitialMessage] = React.useState(messages.length === 0);
+    const [messagesLength, setMessagesLength] = React.useState(messages.length);
+    const canSendMessage = chatHeadlessReact.useChatState((state) => state.conversation.canSendMessage);
+    //handle message history resets
+    React.useEffect(() => {
+        const newMessagesLength = messages.length;
+        // Fetch data only when the conversation messages changes from non-zero to zero
+        if (messagesLength > 0 && newMessagesLength === 0) {
+            setFetchInitialMessage(true);
+        }
+        setMessagesLength(newMessagesLength);
+    }, [messages.length, messagesLength]);
+    React.useEffect(() => {
+        if (!fetchInitialMessage || !canSendMessage || !customCondition) {
+            return;
+        }
+        setFetchInitialMessage(false);
+        const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
+        res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
+    }, [
+        chat,
+        stream,
+        handleError,
+        defaultHandleApiError,
+        fetchInitialMessage,
+        canSendMessage,
+        customCondition,
+    ]);
+}
+
+exports.useFetchInitialMessage = useFetchInitialMessage;
+//# sourceMappingURL=useFetchInitialMessage.js.map

package/lib/commonjs/src/hooks/useFetchInitialMessage.js.map

@@ -0,0 +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;;;;"}

package/lib/commonjs/src/hooks/useReportAnalyticsEvent.d.ts

@@ -4,7 +4,7 @@ import { ChatHeadless } from "@yext/chat-headless-react";
  * The payload will automatically includes chat-ui-react's
  * package version for "clientSdk" field.
  *
- * @internal
+ * @public
  */
 export declare function useReportAnalyticsEvent(): ChatHeadless["report"];
 //# sourceMappingURL=useReportAnalyticsEvent.d.ts.map

package/lib/commonjs/src/hooks/useReportAnalyticsEvent.js

@@ -9,7 +9,7 @@ var React = require('react');
  * The payload will automatically includes chat-ui-react's
  * package version for "clientSdk" field.
  *
- * @internal
+ * @public
  */
 function useReportAnalyticsEvent() {
     const chat = chatHeadlessReact.useChatActions();

package/lib/commonjs/src/hooks/useReportAnalyticsEvent.js.map

@@ -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;;;;"}
+{"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;;;;"}

package/lib/commonjs/src/hooks/useScrollToLastMessage.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+/**
+ * Scroll the messsages container to the top of the last message whenever there's
+ * an update to the messages state.
+ *
+ * @public
+ *
+ * @returns a ref to set on the messages container element and
+ *  a function to set ref on individual message element
+ */
+export declare function useScrollToLastMessage(): [
+    React.RefObject<HTMLDivElement>,
+    (index: number) => ((message: HTMLDivElement) => void) | undefined
+];
+//# sourceMappingURL=useScrollToLastMessage.d.ts.map

package/lib/commonjs/src/hooks/useScrollToLastMessage.d.ts.map

@@ -0,0 +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"}

package/lib/commonjs/src/hooks/useScrollToLastMessage.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var chatHeadlessReact = require('@yext/chat-headless-react');
+var React = require('react');
+
+/**
+ * Scroll the messsages container to the top of the last message whenever there's
+ * an update to the messages state.
+ *
+ * @public
+ *
+ * @returns a ref to set on the messages container element and
+ *  a function to set ref on individual message element
+ */
+function useScrollToLastMessage() {
+    const messagesRef = React.useRef([]);
+    const messagesContainerRef = React.useRef(null);
+    const messages = chatHeadlessReact.useChatState((state) => state.conversation.messages);
+    // Handle scrolling when messages change
+    React.useEffect(() => {
+        let scrollTop = 0;
+        messagesRef.current = messagesRef.current.slice(0, messages.length);
+        // Sums up scroll heights of all messages except the last one
+        if (messagesRef?.current.length > 1) {
+            scrollTop = messagesRef.current
+                .slice(0, -1)
+                .map((elem, _) => elem?.scrollHeight ?? 0)
+                .reduce((total, height) => total + height);
+        }
+        // Scroll to the top of the last message
+        messagesContainerRef.current?.scroll({
+            top: scrollTop,
+            behavior: "smooth",
+        });
+    }, [messages]);
+    const setMessageRef = React.useCallback((index) => {
+        if (!messagesRef?.current)
+            return undefined;
+        return (message) => (messagesRef.current[index] = message);
+    }, []);
+    return [messagesContainerRef, setMessageRef];
+}
+
+exports.useScrollToLastMessage = useScrollToLastMessage;
+//# sourceMappingURL=useScrollToLastMessage.js.map

package/lib/commonjs/src/hooks/useScrollToLastMessage.js.map

@@ -0,0 +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;;;;"}

package/lib/commonjs/src/index.js

@@ -5,7 +5,13 @@ var ChatHeader = require('./components/ChatHeader.js');
 var MessageBubble = require('./components/MessageBubble.js');
 var ChatPanel = require('./components/ChatPanel.js');
 var ChatPopUp = require('./components/ChatPopUp.js');
+var FeedbackButtons = require('./components/FeedbackButtons.js');
+var Markdown = require('./components/Markdown.js');
 var useComposedCssClasses = require('./hooks/useComposedCssClasses.js');
+var useDefaultHandleApiError = require('./hooks/useDefaultHandleApiError.js');
+var useFetchInitialMessage = require('./hooks/useFetchInitialMessage.js');
+var useReportAnalyticsEvent = require('./hooks/useReportAnalyticsEvent.js');
+var useScrollToLastMessage = require('./hooks/useScrollToLastMessage.js');
 
 
 
@@ -14,5 +20,11 @@ exports.ChatHeader = ChatHeader.ChatHeader;
 exports.MessageBubble = MessageBubble.MessageBubble;
 exports.ChatPanel = ChatPanel.ChatPanel;
 exports.ChatPopUp = ChatPopUp.ChatPopUp;
+exports.FeedbackButtons = FeedbackButtons.FeedbackButtons;
+exports.Markdown = Markdown.Markdown;
 exports.useComposedCssClasses = useComposedCssClasses.useComposedCssClasses;
+exports.useDefaultHandleApiError = useDefaultHandleApiError.useDefaultHandleApiError;
+exports.useFetchInitialMessage = useFetchInitialMessage.useFetchInitialMessage;
+exports.useReportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent;
+exports.useScrollToLastMessage = useScrollToLastMessage.useScrollToLastMessage;
 //# sourceMappingURL=index.js.map

package/lib/commonjs/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/index.d.ts

@@ -1,3 +1,4 @@
+import { ChatHeadless } from '@yext/chat-headless-react';
 import { Message } from '@yext/chat-headless-react';
 import { default as React_2 } from 'react';
 
@@ -169,11 +170,16 @@ export declare interface ChatPopUpCssClasses {
     panel__display?: string;
     panel__hidden?: string;
     button?: string;
-    button__display?: string;
-    button__hidden?: string;
     buttonIcon?: string;
+    ctaLabelContainer?: string;
+    ctaLabel?: string;
+    notification?: string;
+    closedPopupContainer?: string;
+    closedPopupContainer__display?: string;
+    closedPopupContainer__hidden?: string;
     headerCssClasses?: ChatHeaderCssClasses;
     panelCssClasses?: ChatPanelCssClasses;
+    initialMessagePopUpCssClasses?: InitialMessagePopUpCssClasses;
 }
 
 /**
@@ -184,12 +190,41 @@ export declare interface ChatPopUpCssClasses {
 export declare interface ChatPopUpProps extends Omit<ChatHeaderProps, "showCloseButton" | "customCssClasses">, Omit<ChatPanelProps, "header" | "customCssClasses"> {
     /** Custom icon for the popup button to open the panel. */
     openPanelButtonIcon?: JSX.Element;
+    /** CSS classes for customizing the component styling. */
+    customCssClasses?: ChatPopUpCssClasses;
+    /** Whether to show the panel on load. Defaults to false. */
+    openOnLoad?: boolean;
     /**
-     * CSS classes for customizing the component styling.
+     * Whether to show the initial message popup when the panel is hidden on load.
+     * Defaults to false.
      */
-    customCssClasses?: ChatPopUpCssClasses;
+    showInitialMessagePopUp?: boolean;
+    /**
+     * Whether to show a heartbeat animation on the popup button when the panel is hidden.
+     * Defaults to false.
+     */
+    showHeartBeatAnimation?: boolean;
+    /**
+     * Whether to show notification showing number of unread messages.
+     * Defaults to false.
+     */
+    showUnreadNotification?: boolean;
+    /**
+     * The "Call to Action" label to be displayed next to the popup button.
+     * By default, the CTA is not shown.
+     * This prop will override the "showInitialMessagePopUp" prop, if specified.
+     */
+    ctaLabel?: string;
 }
 
+/**
+ * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
+ * report analytic events on click.
+ *
+ * @public
+ */
+export declare function FeedbackButtons({ customCssClasses, responseId, }: FeedbackButtonsProps): React_2.JSX.Element;
+
 /**
  * The CSS class interface for the FeedbackButtons component.
  *
@@ -205,6 +240,55 @@ export declare interface FeedbackButtonsCssClasses {
     thumbsDownFillIcon?: string;
 }
 
+/**
+ * The props for the FeedbackButtons component.
+ *
+ * @public
+ */
+export declare interface FeedbackButtonsProps {
+    /** The response ID correlates to the current message to give feedback on. */
+    responseId?: string;
+    /** CSS classes for customizing the component styling. */
+    customCssClasses?: FeedbackButtonsCssClasses;
+}
+
+/**
+ * The CSS class interface for the InitialMessagePopUp component.
+ *
+ * @public
+ */
+export declare interface InitialMessagePopUpCssClasses {
+    container?: string;
+    closeButton?: string;
+    closeButtonIcon?: string;
+    message?: string;
+}
+
+/**
+ * Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include
+ * arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.
+ *
+ * @remarks
+ * A link click will send a CHAT_LINK_CLICK analytics event
+ *
+ * @public
+ */
+export declare function Markdown({ content, responseId, className }: MarkdownProps): React_2.JSX.Element;
+
+/**
+ * The props for the {@link Markdown} component.
+ *
+ * @public
+ */
+export declare interface MarkdownProps {
+    /** Stringified markdown. */
+    content: string;
+    /** The response ID correlates to the current message. */
+    responseId?: string;
+    /** Classnames for the container. */
+    className?: string;
+}
+
 /**
  * A component that displays the provided message.
  *
@@ -294,4 +378,48 @@ export declare interface MessageBubbleProps {
  */
 export declare function useComposedCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface, string | object>>>(builtInClasses: Readonly<ClassInterface>, customClasses?: Partial<ClassInterface>): ClassInterface;
 
+/**
+ * Returns a default handler function for API errors. It will log the error and
+ * add a default error message to state.
+ *
+ * @public
+ */
+export declare function useDefaultHandleApiError(): (e: unknown) => void;
+
+/**
+ * Sends a request to Chat API to fetch the initial message when the
+ * conversation first start or when the message history is reset.
+ *
+ * @public
+ *
+ * @param handleError - A function which is called when an error occurs while fetching for initial message.
+ *                      By default, the error is logged to the console and an error message is added to state.
+ * @param stream      - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.
+ * @param customCondition - additional condition for when to fetch initial message
+ */
+export declare function useFetchInitialMessage(handleError?: (e: unknown) => void, stream?: boolean, customCondition?: boolean): void;
+
+/**
+ * Returns a function to send requests to Yext Analytics API.
+ * The payload will automatically includes chat-ui-react's
+ * package version for "clientSdk" field.
+ *
+ * @public
+ */
+export declare function useReportAnalyticsEvent(): ChatHeadless["report"];
+
+/**
+ * Scroll the messsages container to the top of the last message whenever there's
+ * an update to the messages state.
+ *
+ * @public
+ *
+ * @returns a ref to set on the messages container element and
+ *  a function to set ref on individual message element
+ */
+export declare function useScrollToLastMessage(): [
+React_2.RefObject<HTMLDivElement>,
+(index: number) => ((message: HTMLDivElement) => void) | undefined
+];
+
 export { }

package/lib/esm/package.json.mjs

@@ -1,4 +1,4 @@
-var version = "0.7.3";
+var version = "0.8.1-alpha";
 
 export { version };
 //# sourceMappingURL=package.json.mjs.map

package/lib/esm/src/components/ChatInput.mjs

@@ -2,8 +2,8 @@ import React, { useState, useCallback } from 'react';
 import { useChatActions, useChatState } from '@yext/chat-headless-react';
 import { ArrowIcon } from '../icons/Arrow.mjs';
 import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
-import TextareaAutosize from 'react-textarea-autosize';
 import { useDefaultHandleApiError } from '../hooks/useDefaultHandleApiError.mjs';
+import TextareaAutosize from 'react-textarea-autosize';
 import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
 
 const builtInCssClasses = withStylelessCssClasses("Input", {

package/lib/esm/src/components/ChatPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,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,qBAsF9C"}
+{"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"}