@yext/chat-ui-react 0.8.5 → 0.8.6

package/lib/esm/src/components/MessageBubble.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.mjs","sources":["../../../../src/components/MessageBubble.tsx"],"sourcesContent":["import React from \"react\";\nimport { Message, MessageSource } from \"@yext/chat-headless-react\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Markdown } from \"./Markdown\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { FeedbackButtons, FeedbackButtonsCssClasses } from \"./FeedbackButtons\";\n\n/**\n * The CSS class interface for the {@link MessageBubble} component.\n *\n * @public\n */\nexport interface MessageBubbleCssClasses {\n  topContainer?: string;\n  subContainer?: string;\n  subContainer__bot?: string;\n  subContainer__user?: string;\n  bubble?: string;\n  bubble__bot?: string;\n  bubble__user?: string;\n  text?: string;\n  text__bot?: string;\n  text__user?: string;\n  timestamp?: string;\n  timestamp__bot?: string;\n  timestamp__user?: string;\n  feedbackButtonsCssClasses?: FeedbackButtonsCssClasses;\n}\n\nconst builtInCssClasses: MessageBubbleCssClasses =\n  withStylelessCssClasses<MessageBubbleCssClasses>(\"MessageBubble\", {\n    topContainer: \"w-full animate-fade-in @container\",\n    subContainer:\n      \"flex flex-col @lg:flex-row @lg:items-center @lg:gap-x-2 @lg:m-1\",\n    subContainer__bot: \"\",\n    subContainer__user: \"@lg:flex-row-reverse\",\n    bubble: \"relative group peer w-fit max-w-[80%] rounded-2xl p-4\",\n    bubble__bot: \"bg-gradient-to-tr from-slate-50 to-slate-100\",\n    bubble__user:\n      \"ml-auto @lg:ml-0 bg-gradient-to-tr from-blue-600 to-blue-700 text-white\",\n    text: \"text-[13px] @[480px]:text-base prose overflow-x-auto\",\n    text__bot: \"text-slate-900\",\n    text__user: \"text-white break-words\",\n    timestamp:\n      \"w-fit my-0.5 ml-4 @lg:ml-0 text-slate-400 text-[10px] @[480px]:text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap\",\n    timestamp__bot: \"\",\n    timestamp__user: \"ml-auto\",\n    feedbackButtonsCssClasses: {},\n  });\n\n/**\n * The props for the {@link MessageBubble} component.\n *\n * @public\n */\nexport interface MessageBubbleProps {\n  /** The message to display. */\n  message: Message;\n  /**\n   * Whether to show the feedback buttons on the message bubble.\n   * Defaults to true.\n   */\n  showFeedbackButtons?: boolean;\n  /**\n   * Whether to show the timestamp of the message with the message bubble.\n   * Defaults to true.\n   */\n  showTimestamp?: boolean;\n  /**\n   * A function which is called to format the message's timestamp given in\n   * ISO format (e.g. \"2023-05-18T19:33:34.553Z\").\n   * Defaults to \"HH:MM A\" (e.g. \"7:33 PM\").\n   */\n  formatTimestamp?: (timestamp: string) => string;\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: MessageBubbleCssClasses;\n}\n\n/**\n * A component that displays the provided message.\n *\n * @public\n *\n * @param props - {@link MessageBubbleProps}\n */\nexport function MessageBubble({\n  message,\n  showFeedbackButtons = true,\n  showTimestamp = true,\n  customCssClasses,\n  formatTimestamp = defaultFormatTimestamp,\n}: MessageBubbleProps) {\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n  const bubbleCssClasses = twMerge(\n    cssClasses.bubble,\n    message.source === MessageSource.USER\n      ? cssClasses.bubble__user\n      : cssClasses.bubble__bot\n  );\n  const textCssClasses = twMerge(\n    cssClasses.text,\n    message.source === MessageSource.USER\n      ? cssClasses.text__user\n      : cssClasses.text__bot\n  );\n  const subContainerCssClasses = twMerge(\n    cssClasses.subContainer,\n    message.source === MessageSource.USER\n      ? cssClasses.subContainer__user\n      : cssClasses.subContainer__bot\n  );\n  const timestampCssClasses = twMerge(\n    cssClasses.timestamp,\n    message.source === MessageSource.USER\n      ? cssClasses.timestamp__user\n      : cssClasses.timestamp__bot\n  );\n\n  return (\n    <div className={cssClasses.topContainer}>\n      <div className={subContainerCssClasses}>\n        <div className={bubbleCssClasses}>\n          {showFeedbackButtons && message.source === MessageSource.BOT && (\n            <FeedbackButtons\n              customCssClasses={cssClasses.feedbackButtonsCssClasses}\n              responseId={message.responseId}\n            />\n          )}\n          <Markdown\n            content={message.text}\n            responseId={message.responseId}\n            className={textCssClasses}\n          />\n        </div>\n        {/* fallback on empty space here to perserve the height for timestamp div */}\n        {showTimestamp && (\n          <div className={timestampCssClasses}>\n            {message.timestamp ? formatTimestamp(message.timestamp) : \" \"}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Formats message's timestamp from \"2023-05-18T19:33:34.553Z\" to \"7:33 PM\"\n *\n * @param timestamp - the timestamp to convert from\n * @returns formatted timestamp\n */\nfunction defaultFormatTimestamp(timestamp: string): string {\n  return new Date(timestamp).toLocaleString(undefined, {\n    hour: \"numeric\",\n    minute: \"numeric\",\n    hour12: true,\n  });\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MessageBubble.mjs","sources":["../../../../src/components/MessageBubble.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Message, MessageSource } from \"@yext/chat-headless-react\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Markdown, MarkdownCssClasses } from \"./Markdown\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { FeedbackButtons, FeedbackButtonsCssClasses } from \"./FeedbackButtons\";\n\n/**\n * The CSS class interface for the {@link MessageBubble} component.\n *\n * @public\n */\nexport interface MessageBubbleCssClasses {\n  topContainer?: string;\n  subContainer?: string;\n  subContainer__bot?: string;\n  subContainer__user?: string;\n  bubble?: string;\n  bubble__bot?: string;\n  bubble__user?: string;\n  text?: string;\n  text__bot?: string;\n  text__user?: string;\n  timestamp?: string;\n  timestamp__bot?: string;\n  timestamp__user?: string;\n  feedbackButtonsCssClasses?: FeedbackButtonsCssClasses;\n}\n\nconst builtInCssClasses: MessageBubbleCssClasses =\n  withStylelessCssClasses<MessageBubbleCssClasses>(\"MessageBubble\", {\n    topContainer: \"w-full animate-fade-in @container\",\n    subContainer:\n      \"flex flex-col @lg:flex-row @lg:items-center @lg:gap-x-2 @lg:m-1\",\n    subContainer__bot: \"\",\n    subContainer__user: \"@lg:flex-row-reverse\",\n    bubble: \"relative group peer w-fit max-w-[80%] rounded-2xl p-4\",\n    bubble__bot: \"bg-gradient-to-tr from-slate-50 to-slate-100\",\n    bubble__user:\n      \"ml-auto @lg:ml-0 bg-gradient-to-tr from-blue-600 to-blue-700 text-white\",\n    text: \"text-[13px] @[480px]:text-base prose overflow-x-auto\",\n    text__bot: \"text-slate-900\",\n    text__user: \"text-white break-words\",\n    timestamp:\n      \"w-fit my-0.5 ml-4 @lg:ml-0 text-slate-400 text-[10px] @[480px]:text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap\",\n    timestamp__bot: \"\",\n    timestamp__user: \"ml-auto\",\n    feedbackButtonsCssClasses: {},\n  });\n\n/**\n * The props for the {@link MessageBubble} component.\n *\n * @public\n */\nexport interface MessageBubbleProps {\n  /** The message to display. */\n  message: Message;\n  /**\n   * Whether to show the feedback buttons on the message bubble.\n   * Defaults to true.\n   */\n  showFeedbackButtons?: boolean;\n  /**\n   * Whether to show the timestamp of the message with the message bubble.\n   * Defaults to true.\n   */\n  showTimestamp?: boolean;\n  /**\n   * A function which is called to format the message's timestamp given in\n   * ISO format (e.g. \"2023-05-18T19:33:34.553Z\").\n   * Defaults to \"HH:MM A\" (e.g. \"7:33 PM\").\n   */\n  formatTimestamp?: (timestamp: string) => string;\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: MessageBubbleCssClasses;\n}\n\n/**\n * A component that displays the provided message.\n *\n * @public\n *\n * @param props - {@link MessageBubbleProps}\n */\nexport function MessageBubble({\n  message,\n  showFeedbackButtons = true,\n  showTimestamp = true,\n  customCssClasses,\n  formatTimestamp = defaultFormatTimestamp,\n}: MessageBubbleProps) {\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n  const bubbleCssClasses = twMerge(\n    cssClasses.bubble,\n    message.source === MessageSource.USER\n      ? cssClasses.bubble__user\n      : cssClasses.bubble__bot\n  );\n  const textCssClasses = twMerge(\n    cssClasses.text,\n    message.source === MessageSource.USER\n      ? cssClasses.text__user\n      : cssClasses.text__bot\n  );\n  const subContainerCssClasses = twMerge(\n    cssClasses.subContainer,\n    message.source === MessageSource.USER\n      ? cssClasses.subContainer__user\n      : cssClasses.subContainer__bot\n  );\n  const timestampCssClasses = twMerge(\n    cssClasses.timestamp,\n    message.source === MessageSource.USER\n      ? cssClasses.timestamp__user\n      : cssClasses.timestamp__bot\n  );\n\n  const markdownCssClasses: MarkdownCssClasses = useMemo(\n    () => ({\n      container: textCssClasses,\n    }),\n    [textCssClasses]\n  );\n\n  return (\n    <div className={cssClasses.topContainer}>\n      <div className={subContainerCssClasses}>\n        <div className={bubbleCssClasses}>\n          {showFeedbackButtons && message.source === MessageSource.BOT && (\n            <FeedbackButtons\n              customCssClasses={cssClasses.feedbackButtonsCssClasses}\n              responseId={message.responseId}\n            />\n          )}\n          <Markdown\n            content={message.text}\n            responseId={message.responseId}\n            customCssClasses={markdownCssClasses}\n          />\n        </div>\n        {/* fallback on empty space here to perserve the height for timestamp div */}\n        {showTimestamp && (\n          <div className={timestampCssClasses}>\n            {message.timestamp ? formatTimestamp(message.timestamp) : \" \"}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Formats message's timestamp from \"2023-05-18T19:33:34.553Z\" to \"7:33 PM\"\n *\n * @param timestamp - the timestamp to convert from\n * @returns formatted timestamp\n */\nfunction defaultFormatTimestamp(timestamp: string): string {\n  return new Date(timestamp).toLocaleString(undefined, {\n    hour: \"numeric\",\n    minute: \"numeric\",\n    hour12: true,\n  });\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",

package/src/components/ChatInput.tsx

@@ -56,6 +56,8 @@ export interface ChatInputProps {
   sendButtonIcon?: JSX.Element;
   /** CSS classes for customizing the component styling. */
   customCssClasses?: ChatInputCssClasses;
+  /** A callback which is called when user sends a message. */
+  onSend?: (message: string) => void;
 }
 
 /**
@@ -76,6 +78,7 @@ export function ChatInput({
   handleError,
   sendButtonIcon = <ArrowIcon />,
   customCssClasses,
+  onSend,
 }: ChatInputProps) {
   const chat = useChatActions();
   const [input, setInput] = useState("");
@@ -91,8 +94,10 @@ export function ChatInput({
       ? chat.streamNextMessage(input)
       : chat.getNextMessage(input);
     setInput("");
-    res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
-  }, [chat, input, handleError, defaultHandleApiError, stream]);
+    res.then(() => {
+      onSend?.(input)
+    }).catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
+  }, [chat, input, handleError, defaultHandleApiError, stream, onSend]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {

package/src/components/ChatPanel.tsx

@@ -21,6 +21,7 @@ import {
   MessageSuggestionCssClasses,
   MessageSuggestions,
 } from "./MessageSuggestions";
+import { Markdown, MarkdownCssClasses } from "./Markdown";
 
 /**
  * The CSS class interface for the {@link ChatPanel} component.
@@ -35,6 +36,7 @@ export interface ChatPanelCssClasses {
   inputCssClasses?: ChatInputCssClasses;
   messageBubbleCssClasses?: MessageBubbleCssClasses;
   messageSuggestionClasses?: MessageSuggestionCssClasses;
+  footer?: string;
 }
 
 const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
@@ -47,6 +49,7 @@ const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
     messageBubbleCssClasses: {
       topContainer: "first:mt-4",
     },
+    footer: "text-center text-slate-400 rounded-b-3xl px-4 pb-4 text-[12px]",
   }
 );
 
@@ -60,6 +63,8 @@ export interface ChatPanelProps
     Omit<ChatInputProps, "customCssClasses"> {
   /** A header to render at the top of the panel. */
   header?: ReactNode;
+  /** A footer markdown string to render at the bottom of the panel. */
+  footer?: string;
   /**
    * CSS classes for customizing the component styling.
    */
@@ -81,8 +86,14 @@ export interface ChatPanelProps
  * @param props - {@link ChatPanelProps}
  */
 export function ChatPanel(props: ChatPanelProps) {
-  const { header, customCssClasses, stream, handleError, messageSuggestions } =
-    props;
+  const {
+    header,
+    footer,
+    customCssClasses,
+    stream,
+    handleError,
+    messageSuggestions,
+  } = props;
   const messages = useChatState((state) => state.conversation.messages);
   const loading = useChatState((state) => state.conversation.isLoading);
   const suggestedReplies = useChatState(
@@ -136,6 +147,14 @@ export function ChatPanel(props: ChatPanelProps) {
     return (message) => (messagesRef.current[index] = message);
   }, []);
 
+  const footerCssClasses: MarkdownCssClasses = useMemo(
+    () => ({
+      container: cssClasses.footer,
+      link: "cursor-pointer hover:underline text-blue-600",
+    }),
+    [cssClasses]
+  );
+
   return (
     <div className="yext-chat w-full h-full">
       <div className={cssClasses.container}>
@@ -163,6 +182,13 @@ export function ChatPanel(props: ChatPanelProps) {
           )}
           <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />
         </div>
+        {footer && (
+          <Markdown
+            content={footer}
+            linkClickEvent="WEBSITE"
+            customCssClasses={footerCssClasses}
+          />
+        )}
       </div>
     </div>
   );

package/src/components/ChatPopUp.tsx

@@ -133,6 +133,7 @@ export function ChatPopUp(props: ChatPopUpProps) {
     showUnreadNotification = false,
     ctaLabel,
     title,
+    footer,
   } = props;
 
   const reportAnalyticsEvent = useReportAnalyticsEvent();
@@ -224,6 +225,7 @@ export function ChatPopUp(props: ChatPopUpProps) {
                   customCssClasses={cssClasses.headerCssClasses}
                 />
               }
+              footer={footer}
             />
           )}
         </div>
@@ -254,7 +256,9 @@ export function ChatPopUp(props: ChatPopUpProps) {
             onClick={onClick}
             className={
               cssClasses.button +
-              (showHeartBeatAnimation && !!numUnreadMessages ? " animate-heartbeat" : "")
+              (showHeartBeatAnimation && !!numUnreadMessages
+                ? " animate-heartbeat"
+                : "")
             }
           >
             {openPanelButtonIcon ?? (

package/src/components/Markdown.tsx

@@ -7,6 +7,7 @@ import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
 import React, { useMemo } from "react";
 import { useReportAnalyticsEvent } from "../hooks/useReportAnalyticsEvent";
+import { useComposedCssClasses } from "../hooks/useComposedCssClasses";
 
 // The Remark and Rehype plugins to use in conjunction with ReactMarkdown.
 const unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {
@@ -19,13 +20,32 @@ const unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {
   ],
 };
 
+/**
+ * The CSS class interface for the Markdown component.
+ *
+ * @internal
+ */
+export interface MarkdownCssClasses {
+  container?: string;
+  link?: string;
+}
+
+const builtInCssClasses: MarkdownCssClasses = {
+  link: "cursor-pointer",
+};
+
 interface MarkdownProps {
   /** Stringified markdown. */
   content: string;
   /** The response ID correlates to the current message. */
   responseId?: string;
-  /** Classnames for the container. */
-  className?: string;
+  /** CSS classes for customizing the component styling. */
+  customCssClasses?: MarkdownCssClasses;
+  /**
+   * Action to report for analytics event when a link is clicked.
+   * Defaults to 'CHAT_LINK_CLICK'.
+   */
+  linkClickEvent?: "WEBSITE" | "CHAT_LINK_CLICK";
 }
 
 /**
@@ -37,13 +57,19 @@ interface MarkdownProps {
  *
  * @internal
  */
-export function Markdown({ content, responseId, className }: MarkdownProps) {
+export function Markdown({
+  content,
+  responseId,
+  customCssClasses,
+  linkClickEvent = "CHAT_LINK_CLICK",
+}: MarkdownProps) {
   const reportAnalyticsEvent = useReportAnalyticsEvent();
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
 
   const components: ReactMarkdownOptions["components"] = useMemo(() => {
     const createClickHandlerFn = (href?: string) => () => {
       reportAnalyticsEvent({
-        action: "CHAT_LINK_CLICK",
+        action: linkClickEvent,
         destinationUrl: href,
         chat: {
           responseId,
@@ -58,18 +84,18 @@ export function Markdown({ content, responseId, className }: MarkdownProps) {
             onClick={createClickHandlerFn(props.href)}
             target="_blank"
             rel="noopener noreferrer"
-            className="cursor-pointer"
+            className={cssClasses.link}
           >
             {children}
           </a>
         );
       },
     };
-  }, [reportAnalyticsEvent, responseId]);
+  }, [reportAnalyticsEvent, linkClickEvent, responseId, cssClasses]);
 
   return (
     <ReactMarkdown
-      className={className}
+      className={cssClasses.container}
       children={content}
       remarkPlugins={unifiedPlugins.remark}
       rehypePlugins={unifiedPlugins.rehype}

package/src/components/MessageBubble.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Message, MessageSource } from "@yext/chat-headless-react";
 import { useComposedCssClasses } from "../hooks";
 import { twMerge } from "tailwind-merge";
-import { Markdown } from "./Markdown";
+import { Markdown, MarkdownCssClasses } from "./Markdown";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 import { FeedbackButtons, FeedbackButtonsCssClasses } from "./FeedbackButtons";
 
@@ -117,6 +117,13 @@ export function MessageBubble({
       : cssClasses.timestamp__bot
   );
 
+  const markdownCssClasses: MarkdownCssClasses = useMemo(
+    () => ({
+      container: textCssClasses,
+    }),
+    [textCssClasses]
+  );
+
   return (
     <div className={cssClasses.topContainer}>
       <div className={subContainerCssClasses}>
@@ -130,7 +137,7 @@ export function MessageBubble({
           <Markdown
             content={message.text}
             responseId={message.responseId}
-            className={textCssClasses}
+            customCssClasses={markdownCssClasses}
           />
         </div>
         {/* fallback on empty space here to perserve the height for timestamp div */}