LG-5307: [Chat] Add callback for rich link clicks

.changeset/perfect-candles-refuse.md

@@ -0,0 +1,6 @@
+---
+'@lg-chat/rich-links': minor
+'@lg-chat/message': minor
+---
+
+Add the onLinkClick prop to support callbacks whenever a rich link is clicked

chat/message/src/Message/Message.tsx

@@ -49,6 +49,7 @@ export const Message = forwardRef(
       componentOverrides,
       links,
       linksHeading,
+      onLinkClick,
       markdownProps,
       verified,
       darkMode: darkModeProp,
@@ -146,6 +147,7 @@ export const Message = forwardRef(
                   as={componentOverrides?.MessageLinks ?? MessageLinks}
                   headingText={linksHeading}
                   links={links}
+                  onLinkClick={onLinkClick}
                 />
               ) : null}
               {children}

chat/message/src/Message/Message.types.ts

@@ -70,6 +70,11 @@ export interface MessageProps
    * The heading text to display for the links section.
    */
   linksHeading?: string;
+
+  /**
+   * A callback function that is called when any link is clicked.
+   */
+  onLinkClick?: RichLinkProps['onLinkClick'];
 }
 
 export interface VerificationInfo {

chat/message/src/MessageLinks/MessageLinks.tsx

@@ -16,14 +16,15 @@ export function MessageLinks({
   darkMode: darkModeProp,
   headingText = 'Related Resources',
   links,
+  onLinkClick,
   ...divProps
 }: MessageLinksProps) {
   const { theme } = useDarkMode(darkModeProp);
   return (
     <div className={cx(baseStyles)} {...divProps}>
       <hr className={cx(dividingLineStyles[theme])} />
       <Subtitle className={cx(linksHeadingStyles)}>{headingText}</Subtitle>
-      <RichLinksArea links={links} />
+      <RichLinksArea links={links} onLinkClick={onLinkClick} />
     </div>
   );
 }

chat/message/src/MessageLinks/MessageLinks.types.ts

@@ -10,6 +10,11 @@ export interface MessageLinksProps
    */
   headingText?: string;
 
+  /**
+   * A callback function that is called when any link is clicked.
+   */
+  onLinkClick?: RichLinkProps['onLinkClick'];
+
   /**
    * An list of link data to render in the links section.
    */

chat/rich-links/src/RichLink/RichLink.spec.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-import { RichLinkVariantName } from '../../dist';
-
-import { RichLink } from '.';
+import { RichLink, type RichLinkVariantName } from '.';
 
 describe('@lg-chat/rich-links', () => {
   describe('RichLink', () => {
@@ -95,5 +94,46 @@ describe('@lg-chat/rich-links', () => {
 
       expect(screen.queryByText('Undefined Variant Link')).toBeInTheDocument();
     });
+
+    it('calls the onLinkClick prop when the link is clicked', () => {
+      const onLinkClick = jest.fn();
+      render(
+        <>
+          <RichLink
+            href="https://mongodb.design/built-in"
+            onLinkClick={onLinkClick}
+            variant="Website"
+          >
+            Built-in Variant Link
+          </RichLink>
+          <RichLink
+            href="https://mongodb.design/custom"
+            onLinkClick={onLinkClick}
+            badgeGlyph="ArrowRight"
+            badgeLabel="Custom Label"
+            badgeColor="blue"
+          >
+            Custom Link
+          </RichLink>
+        </>,
+      );
+      const link = screen.getByText('Built-in Variant Link');
+      userEvent.click(link);
+      expect(onLinkClick).toHaveBeenCalledWith({
+        href: 'https://mongodb.design/built-in',
+        children: 'Built-in Variant Link',
+        variant: 'Website',
+      });
+
+      const customLink = screen.getByText('Custom Link');
+      userEvent.click(customLink);
+      expect(onLinkClick).toHaveBeenCalledWith({
+        href: 'https://mongodb.design/custom',
+        children: 'Custom Link',
+        badgeGlyph: 'ArrowRight',
+        badgeLabel: 'Custom Label',
+        badgeColor: 'blue',
+      });
+    });
   });
 });

chat/rich-links/src/RichLink/RichLink.tsx

@@ -18,7 +18,7 @@ import { RichLinkBadge } from './RichLinkBadge';
 import { richLinkVariants } from './richLinkVariants';
 
 export const RichLink = forwardRef<HTMLAnchorElement, RichLinkProps>(
-  ({ darkMode: darkModeProp, ...props }, ref) => {
+  ({ darkMode: darkModeProp, onLinkClick, ...props }, ref) => {
     const { darkMode, theme } = useDarkMode(darkModeProp);
 
     const richLinkVariantProps =
@@ -64,6 +64,7 @@ export const RichLink = forwardRef<HTMLAnchorElement, RichLinkProps>(
           [imageBackgroundStyles(imageUrl ?? '')]: showImageBackground,
         })}
         {...conditionalProps}
+        onClick={() => onLinkClick?.(props)}
       >
         <Body className={richLinkTextClassName} darkMode={darkMode}>
           {children}

chat/rich-links/src/RichLink/RichLink.types.ts

@@ -15,6 +15,11 @@ export interface BaseRichLinkProps
    * A URL for the background image of the rich link
    */
   imageUrl?: string;
+
+  /**
+   * A callback function that is called when the link is clicked.
+   */
+  onLinkClick?: (props: Omit<BaseRichLinkProps, 'onLinkClick'>) => void;
 }
 
 export interface RichLinkVariantControlProps {

chat/rich-links/src/RichLinksArea/RichLinksArea.tsx

@@ -13,14 +13,21 @@ import { type RichLinksAreaProps } from './RichLinksArea.types';
 export function RichLinksArea({
   links,
   darkMode: darkModeProp,
+  onLinkClick,
   ...props
 }: RichLinksAreaProps) {
   const { darkMode } = useDarkMode(darkModeProp);
   return (
     <LeafygreenProvider darkMode={darkMode}>
       <div className={cx(baseStyles)} {...props}>
         {links.map(richLinkProps => {
-          return <RichLink key={richLinkProps.href} {...richLinkProps} />;
+          return (
+            <RichLink
+              key={richLinkProps.href}
+              onClick={() => onLinkClick?.(richLinkProps)}
+              {...richLinkProps}
+            />
+          );
         })}
       </div>
     </LeafygreenProvider>

chat/rich-links/src/RichLinksArea/RichLinksArea.types.ts

@@ -7,4 +7,9 @@ export interface RichLinksAreaProps
   extends HTMLElementProps<'div', never>,
     DarkModeProps {
   links: Array<RichLinkProps>;
+
+  /**
+   * A callback function that is called when any link is clicked.
+   */
+  onLinkClick?: RichLinkProps['onLinkClick'];
 }