update footer implementation (#64)

- footer in ChatPanel will now report analytics event with `WEBSITE` action for any link click
- refactor footer to use the existing Markdown component

NOTE: will publish a new version after merge

J=CLIP-909
TEST=manual

see that footer is rendered as expected and sent an analytics event on click
![Screenshot 2024-01-10 at 1 34 30 PM](https://github.com/yext/chat-ui-react/assets/36055303/c751af55-adea-4de9-ac6b-104a66a8bed4)

Author: yen-tt

docs/chat-ui-react.chatpanelcssclasses.footercssclasses.md renamed to docs/chat-ui-react.chatpanelcssclasses.footer.md

@@ -1,11 +1,11 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@yext/chat-ui-react](./chat-ui-react.md) &gt; [ChatPanelCssClasses](./chat-ui-react.chatpanelcssclasses.md) &gt; [footerCssClasses](./chat-ui-react.chatpanelcssclasses.footercssclasses.md)
+[Home](./index.md) &gt; [@yext/chat-ui-react](./chat-ui-react.md) &gt; [ChatPanelCssClasses](./chat-ui-react.chatpanelcssclasses.md) &gt; [footer](./chat-ui-react.chatpanelcssclasses.footer.md)
 
-## ChatPanelCssClasses.footerCssClasses property
+## ChatPanelCssClasses.footer property
 
 **Signature:**
 
 ```typescript
-footerCssClasses?: string;
+footer?: string;
 ```

docs/chat-ui-react.chatpanelcssclasses.md

@@ -17,7 +17,7 @@ export interface ChatPanelCssClasses
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [container?](./chat-ui-react.chatpanelcssclasses.container.md) |  | string | _(Optional)_ |
-|  [footerCssClasses?](./chat-ui-react.chatpanelcssclasses.footercssclasses.md) |  | string | _(Optional)_ |
+|  [footer?](./chat-ui-react.chatpanelcssclasses.footer.md) |  | string | _(Optional)_ |
 |  [inputContainer?](./chat-ui-react.chatpanelcssclasses.inputcontainer.md) |  | string | _(Optional)_ |
 |  [inputCssClasses?](./chat-ui-react.chatpanelcssclasses.inputcssclasses.md) |  | [ChatInputCssClasses](./chat-ui-react.chatinputcssclasses.md) | _(Optional)_ |
 |  [messageBubbleCssClasses?](./chat-ui-react.chatpanelcssclasses.messagebubblecssclasses.md) |  | [MessageBubbleCssClasses](./chat-ui-react.messagebubblecssclasses.md) | _(Optional)_ |

etc/chat-ui-react.api.md

@@ -71,7 +71,7 @@ export interface ChatPanelCssClasses {
     // (undocumented)
     container?: string;
     // (undocumented)
-    footerCssClasses?: string;
+    footer?: string;
     // (undocumented)
     inputContainer?: string;
     // (undocumented)

package-lock.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.json

@@ -21,7 +21,7 @@ import {
   MessageSuggestionCssClasses,
   MessageSuggestions,
 } from "./MessageSuggestions";
-import ReactMarkdown, { ReactMarkdownOptions } from "react-markdown";
+import { Markdown, MarkdownCssClasses } from "./Markdown";
 
 /**
  * The CSS class interface for the {@link ChatPanel} component.
@@ -36,7 +36,7 @@ export interface ChatPanelCssClasses {
   inputCssClasses?: ChatInputCssClasses;
   messageBubbleCssClasses?: MessageBubbleCssClasses;
   messageSuggestionClasses?: MessageSuggestionCssClasses;
-  footerCssClasses?: string;
+  footer?: string;
 }
 
 const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
@@ -49,8 +49,7 @@ const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
     messageBubbleCssClasses: {
       topContainer: "first:mt-4",
     },
-    footerCssClasses:
-      "text-center text-slate-400 rounded-b-3xl px-4 pb-4 text-[12px]",
+    footer: "text-center text-slate-400 rounded-b-3xl px-4 pb-4 text-[12px]",
   }
 );
 
@@ -148,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}>
@@ -176,42 +183,13 @@ export function ChatPanel(props: ChatPanelProps) {
           <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />
         </div>
         {footer && (
-          <Footer footer={footer} className={cssClasses.footerCssClasses} />
+          <Markdown
+            content={footer}
+            linkClickEvent="WEBSITE"
+            customCssClasses={footerCssClasses}
+          />
         )}
       </div>
     </div>
   );
 }
-
-const Footer = ({
-  footer,
-  className,
-}: {
-  footer: string;
-  className?: string;
-}) => {
-  const components: ReactMarkdownOptions["components"] = useMemo(() => {
-    return {
-      a: ({ node: _, children, ...props }) => {
-        return (
-          <a
-            {...props}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="cursor-pointer hover:underline text-blue-600"
-          >
-            {children}
-          </a>
-        );
-      },
-    };
-  }, []);
-
-  return (
-    <ReactMarkdown
-      children={footer}
-      className={className}
-      components={components}
-    />
-  );
-};

src/components/ChatPanel.tsx

@@ -256,7 +256,9 @@ export function ChatPopUp(props: ChatPopUpProps) {
             onClick={onClick}
             className={
               cssClasses.button +
-              (showHeartBeatAnimation && !!numUnreadMessages ? " animate-heartbeat" : "")
+              (showHeartBeatAnimation && !!numUnreadMessages
+                ? " animate-heartbeat"
+                : "")
             }
           >
             {openPanelButtonIcon ?? (

src/components/ChatPopUp.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}

src/components/Markdown.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 */}