ChatPanel: add onLinkClick handler for footer

J=CLIP-432
TEST=auto,manual

tested manually on test site by passing a print statement to the
handler and verified that the link is printed when it's clicked.
added auto test and ran `npm run test`.

docs/chat-ui-react.chatpanelprops.md

@@ -21,4 +21,5 @@ export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClass
 |  [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. |
+|  [onLinkClick?](./chat-ui-react.chatpanelprops.onlinkclick.md) |  | (href?: string) =&gt; void | _(Optional)_ A callback which is called when user clicks a footer link. |
 

docs/chat-ui-react.chatpanelprops.onlinkclick.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; [onLinkClick](./chat-ui-react.chatpanelprops.onlinkclick.md)
+
+## ChatPanelProps.onLinkClick property
+
+A callback which is called when user clicks a footer link.
+
+**Signature:**
+
+```typescript
+onLinkClick?: (href?: string) => void;
+```

etc/chat-ui-react.api.md

@@ -92,6 +92,7 @@ export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClass
     footer?: string;
     header?: ReactNode;
     messageSuggestions?: string[];
+    onLinkClick?: (href?: string) => void;
 }
 
 // @public

src/components/ChatPanel.tsx

@@ -74,6 +74,8 @@ export interface ChatPanelProps
    * can click on instead of typing their own.
    */
   messageSuggestions?: string[];
+  /** A callback which is called when user clicks a footer link. */
+  onLinkClick?: (href?: string) => void;
 }
 
 /**
@@ -93,6 +95,7 @@ export function ChatPanel(props: ChatPanelProps) {
     stream,
     handleError,
     messageSuggestions,
+    onLinkClick,
   } = props;
   const messages = useChatState((state) => state.conversation.messages);
   const loading = useChatState((state) => state.conversation.isLoading);
@@ -186,6 +189,7 @@ export function ChatPanel(props: ChatPanelProps) {
           <Markdown
             content={footer}
             linkClickEvent="WEBSITE"
+            onLinkClick={onLinkClick}
             customCssClasses={footerCssClasses}
           />
         )}

src/components/Markdown.tsx

@@ -46,6 +46,8 @@ interface MarkdownProps {
    * Defaults to 'CHAT_LINK_CLICK'.
    */
   linkClickEvent?: "WEBSITE" | "CHAT_LINK_CLICK";
+  /** A callback which is called when a link is clicked. */
+  onLinkClick?: (href?: string) => void;
 }
 
 /**
@@ -62,6 +64,7 @@ export function Markdown({
   responseId,
   customCssClasses,
   linkClickEvent = "CHAT_LINK_CLICK",
+  onLinkClick,
 }: MarkdownProps) {
   const reportAnalyticsEvent = useReportAnalyticsEvent();
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
@@ -75,6 +78,7 @@ export function Markdown({
           responseId,
         },
       });
+      onLinkClick?.(href)
     };
     return {
       a: ({ node: _, children, ...props }) => {

tests/components/ChatPanel.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { ChatPanel } from "../../src";
 import {
   mockChatActions,
@@ -122,3 +123,12 @@ it("displays message bubbles based on messages in state", () => {
   render(<ChatPanel />);
   expect(screen.getByText(dummyMessage.text)).toBeInTheDocument();
 });
+
+it("executes onLinkClick if provided", async () => {
+  const onLinkClickCb = jest.fn();
+  render(<ChatPanel 
+    footer="Test footer [link](https://yext.com)"
+    onLinkClick={href => onLinkClickCb(href)} />);
+  await act(() => userEvent.click(screen.getByRole("link")));
+  expect(onLinkClickCb).toBeCalledWith("https://yext.com");
+});