mongodb · nlarew · Jun 30, 2025 · Jun 9, 2025 · Jun 13, 2025 · Jun 16, 2025
@@ -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
diff --git a/chat/message/src/Message/Message.stories.tsx b/chat/message/src/Message/Message.stories.tsx
@@ -199,6 +199,9 @@ WithRichLinks.args = {
   messageBody: MongoText,
   avatar: <Avatar variant="mongo" />,
   children: <MessageFeedback />,
+  onLinkClick: props => {
+    alert(`Link clicked: ${props.href}`);
+  },
   links: [
     {
       href: 'https://mongodb.design',

@@ -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}

@@ -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 {

@@ -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>
   );
 }

@@ -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.
    */

diff --git a/chat/rich-links/src/RichLink/RichLink.stories.tsx b/chat/rich-links/src/RichLink/RichLink.stories.tsx
@@ -94,3 +94,13 @@ ExplicitlyUndefinedVariant.args = {
   children: 'Example Link (variant undefined)',
   variant: undefined,
 };
+
+export const ClickHandler = Template.bind({});
+ClickHandler.args = {
+  href: 'https://example.com',
+  children: 'Example Link (variant undefined)',
+  variant: undefined,
+  onLinkClick: props => {
+    alert(`Link clicked: ${props.href}`);
+  },
+};
@@ -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}

@@ -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 {

@@ -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>

@@ -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'];
 }