ChatPanel: add support for footer (#61)

J=CLIP-879
TEST=manual

added footer to test-site and verified that it appears as expected

Author: anguyen-yext2

docs/chat-ui-react.chatpanelcssclasses.footercssclasses.md

@@ -0,0 +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)
+
+## ChatPanelCssClasses.footerCssClasses property
+
+**Signature:**
+
+```typescript
+footerCssClasses?: string;
+```

docs/chat-ui-react.chatpanelcssclasses.md

@@ -17,6 +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)_ |
 |  [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)_ |

docs/chat-ui-react.chatpanelprops.footer.md

@@ -0,0 +1,13 @@
+<!-- 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; [ChatPanelProps](./chat-ui-react.chatpanelprops.md) &gt; [footer](./chat-ui-react.chatpanelprops.footer.md)
+
+## ChatPanelProps.footer property
+
+A footer markdown string to render at the bottom of the panel.
+
+**Signature:**
+
+```typescript
+footer?: string;
+```

docs/chat-ui-react.chatpanelprops.md

@@ -18,6 +18,7 @@ export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClass
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [customCssClasses?](./chat-ui-react.chatpanelprops.customcssclasses.md) |  | [ChatPanelCssClasses](./chat-ui-react.chatpanelcssclasses.md) | _(Optional)_ CSS classes for customizing the component styling. |
+|  [footer?](./chat-ui-react.chatpanelprops.footer.md) |  | string | _(Optional)_ A footer markdown string to render at the bottom of the panel. |
 |  [header?](./chat-ui-react.chatpanelprops.header.md) |  | ReactNode | _(Optional)_ A header to render at the top of the panel. |
 |  [messageSuggestions?](./chat-ui-react.chatpanelprops.messagesuggestions.md) |  | string\[\] | _(Optional)_ A set of pre-written initial messages that the user can click on instead of typing their own. |
 

etc/chat-ui-react.api.md

@@ -70,6 +70,8 @@ export interface ChatPanelCssClasses {
     // (undocumented)
     container?: string;
     // (undocumented)
+    footerCssClasses?: string;
+    // (undocumented)
     inputContainer?: string;
     // (undocumented)
     inputCssClasses?: ChatInputCssClasses;
@@ -86,6 +88,7 @@ export interface ChatPanelCssClasses {
 // @public
 export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClasses" | "message">, Omit<ChatInputProps, "customCssClasses"> {
     customCssClasses?: ChatPanelCssClasses;
+    footer?: string;
     header?: ReactNode;
     messageSuggestions?: string[];
 }

src/components/ChatPanel.tsx

@@ -21,6 +21,7 @@ import {
   MessageSuggestionCssClasses,
   MessageSuggestions,
 } from "./MessageSuggestions";
+import ReactMarkdown from "react-markdown";
 
 /**
  * The CSS class interface for the {@link ChatPanel} component.
@@ -35,6 +36,7 @@ export interface ChatPanelCssClasses {
   inputCssClasses?: ChatInputCssClasses;
   messageBubbleCssClasses?: MessageBubbleCssClasses;
   messageSuggestionClasses?: MessageSuggestionCssClasses;
+  footerCssClasses?: string;
 }
 
 const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
@@ -47,6 +49,8 @@ const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
     messageBubbleCssClasses: {
       topContainer: "first:mt-4",
     },
+    footerCssClasses:
+      "text-center text-slate-400 rounded-b-3xl px-4 pb-4 text-[12px] [&>*>a]:text-blue-600",
   }
 );
 
@@ -60,6 +64,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 +87,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(
@@ -163,6 +175,12 @@ export function ChatPanel(props: ChatPanelProps) {
           )}
           <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />
         </div>
+        {footer && (
+          <ReactMarkdown
+            children={footer}
+            className={cssClasses.footerCssClasses}
+          />
+        )}
       </div>
     </div>
   );

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>

test-site/src/App.tsx

@@ -31,6 +31,7 @@ function App() {
                 "What locations are nearby?",
                 "I'd like to learn more about a location in Arlington",
               ]}
+              footer="This is a test footer with [link](https://yext.com) and [another link](https://yext.com)"
             />
           </div>
         </ChatHeadlessProvider>