(EAI-1086) [UI] Add client handler for reference link click

packages/mongodb-chatbot-ui/package.json

@@ -69,34 +69,34 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.2",
-    "@leafygreen-ui/badge": "^9.0.2",
-    "@leafygreen-ui/banner": "^9.0.2",
-    "@leafygreen-ui/box": "^4.0.2",
-    "@leafygreen-ui/button": "^22.0.2",
-    "@leafygreen-ui/card": "^12.0.2",
-    "@leafygreen-ui/code": "^16.0.2",
-    "@leafygreen-ui/icon": "^13.1.2",
-    "@leafygreen-ui/icon-button": "^16.0.2",
-    "@leafygreen-ui/leafygreen-provider": "^4.0.2",
-    "@leafygreen-ui/menu": "^28.0.2",
-    "@leafygreen-ui/modal": "^17.0.2",
-    "@leafygreen-ui/palette": "^4.0.10",
-    "@leafygreen-ui/skeleton-loader": "^2.0.2",
-    "@leafygreen-ui/text-input": "^14.0.2",
-    "@leafygreen-ui/toggle": "^11.0.2",
-    "@leafygreen-ui/typography": "^20.0.2",
-    "@lg-chat/avatar": "^4.0.2",
-    "@lg-chat/chat-disclaimer": "^3.0.5",
-    "@lg-chat/chat-window": "^3.0.2",
-    "@lg-chat/fixed-chat-window": "^3.0.2",
-    "@lg-chat/input-bar": "^7.0.2",
-    "@lg-chat/leafygreen-chat-provider": "^3.0.1",
-    "@lg-chat/message": "^5.0.2",
-    "@lg-chat/message-feed": "^4.1.0",
-    "@lg-chat/message-feedback": "^3.0.2",
-    "@lg-chat/message-prompts": "^3.0.2",
-    "@lg-chat/message-rating": "^3.0.2",
-    "@lg-chat/rich-links": "^2.0.2",
+    "@leafygreen-ui/badge": "^10.0.3",
+    "@leafygreen-ui/banner": "^10.0.3",
+    "@leafygreen-ui/box": "^5.0.0",
+    "@leafygreen-ui/button": "^25.0.0",
+    "@leafygreen-ui/card": "^13.0.3",
+    "@leafygreen-ui/code": "^20.0.2",
+    "@leafygreen-ui/icon": "^14.1.0",
+    "@leafygreen-ui/icon-button": "^17.0.3",
+    "@leafygreen-ui/leafygreen-provider": "^5.0.2",
+    "@leafygreen-ui/menu": "^31.0.1",
+    "@leafygreen-ui/modal": "^19.0.1",
+    "@leafygreen-ui/palette": "^5.0.0",
+    "@leafygreen-ui/skeleton-loader": "^3.0.3",
+    "@leafygreen-ui/text-input": "^16.0.1",
+    "@leafygreen-ui/toggle": "^12.0.3",
+    "@leafygreen-ui/typography": "^22.0.1",
+    "@lg-chat/avatar": "^5.0.3",
+    "@lg-chat/chat-disclaimer": "^4.0.4",
+    "@lg-chat/chat-window": "^4.0.3",
+    "@lg-chat/fixed-chat-window": "^4.0.3",
+    "@lg-chat/input-bar": "^8.0.5",
+    "@lg-chat/leafygreen-chat-provider": "^4.0.0",
+    "@lg-chat/message": "^6.1.2",
+    "@lg-chat/message-feed": "^5.0.4",
+    "@lg-chat/message-feedback": "^5.0.4",
+    "@lg-chat/message-prompts": "^4.0.3",
+    "@lg-chat/message-rating": "^4.0.3",
+    "@lg-chat/rich-links": "^3.1.1",
     "@microsoft/fetch-event-source": "^2.0.1",
     "bson": "^5.5.1",
     "buffer": "^6.0.3",

packages/mongodb-chatbot-ui/src/App.tsx

@@ -79,6 +79,9 @@ function App() {
           onClose={() => {
             console.log("Docs Chatbot closed");
           }}
+          onReferenceClick={(reference) => {
+            console.log("Reference clicked", reference);
+          }}
           onSuggestedPromptClick={(prompt) => {
             console.log("Suggested prompt clicked", prompt);
           }}
@@ -104,6 +107,9 @@ function App() {
           onClose={() => {
             console.log("Dev Center Chatbot closed");
           }}
+          onReferenceClick={(reference) => {
+            console.log("Reference clicked", reference);
+          }}
           onSuggestedPromptClick={(prompt) => {
             console.log("Suggested prompt clicked", prompt);
           }}

packages/mongodb-chatbot-ui/src/ChatMessageFeed.tsx

@@ -43,6 +43,7 @@ export function ChatMessageFeed(props: ChatMessageFeedProps) {
     canSubmit,
     conversation,
     handleSubmit,
+    onReferenceClick,
     onSuggestedPromptClick,
   } = useChatbotContext();
 
@@ -92,6 +93,7 @@ export function ChatMessageFeed(props: ChatMessageFeedProps) {
               // For now we'll only show suggested prompts for the initial message and hide them once the user submits anything
               isInitialMessage && conversation.messages.length === 0
             }
+            onReferenceClick={onReferenceClick}
             onSuggestedPromptClick={(prompt) => {
               onSuggestedPromptClick?.(prompt);
               handleSubmit(prompt);

packages/mongodb-chatbot-ui/src/Chatbot.tsx

@@ -27,6 +27,7 @@ export function Chatbot({
   fetchOptions,
   onOpen,
   onClose,
+  onReferenceClick,
   onSuggestedPromptClick,
   sortMessageReferences,
   getClientContext,
@@ -60,6 +61,7 @@ export function Chatbot({
               serverBaseUrl={serverBaseUrl}
               shouldStream={shouldStream}
               sortMessageReferences={sortMessageReferences}
+              onReferenceClick={onReferenceClick}
               onSuggestedPromptClick={onSuggestedPromptClick}
             >
               {children}
@@ -81,6 +83,7 @@ type InnerChatbotProps = Pick<
   | "name"
   | "onOpen"
   | "onClose"
+  | "onReferenceClick"
   | "onSuggestedPromptClick"
   | "serverBaseUrl"
   | "shouldStream"

packages/mongodb-chatbot-ui/src/Message.tsx

@@ -15,6 +15,7 @@ import { useChatbotContext } from "./useChatbotContext";
 import { useLinkData } from "./useLinkData";
 import { getMessageLinks } from "./messageLinks";
 import { type RatingCommentStatus } from "./MessageRating";
+import { Reference } from "./references";
 
 const MessageRatingWithFeedbackComment = lazy(async () => ({
   default: (await import("./MessageRating")).MessageRatingWithFeedbackComment,
@@ -43,6 +44,7 @@ export type MessageProps = {
   messageData: MessageData;
   suggestedPrompts?: string[];
   showSuggestedPrompts?: boolean;
+  onReferenceClick?: (reference: Reference) => void;
   onSuggestedPromptClick?: (prompt: string) => void;
   canSubmitSuggestedPrompt?: (prompt: string) => boolean;
   isLoading: boolean;
@@ -64,6 +66,7 @@ export const Message = ({
   suggestedPrompts = [],
   showSuggestedPrompts = true,
   canSubmitSuggestedPrompt = () => true,
+  onReferenceClick,
   onSuggestedPromptClick,
   isLoading,
   showRating,
@@ -112,7 +115,10 @@ export const Message = ({
     : undefined;
 
   const { tck } = useLinkData();
-  const messageLinks = getMessageLinks(messageData, { tck });
+  const messageLinks = getMessageLinks(messageData, {
+    tck,
+    onReferenceClick,
+  });
 
   return (
     <Fragment key={messageData.id}>

packages/mongodb-chatbot-ui/src/messageLinks.test.ts

@@ -51,25 +51,30 @@ describe("formatReferences", () => {
       {
         href: "https://mongodb.com/developer/products/atlas/foobar",
         children: "Some MongoDB Developer Center Article",
+        onLinkClick: expect.any(Function),
         variant: "Article",
       },
       {
         href: "https://mongodb.com/docs/manual",
         children: "MongoDB Manual",
+        onLinkClick: expect.any(Function),
         variant: "Docs",
       },
       {
         href: "https://www.example123.com",
         children: "Example 123",
+        onLinkClick: expect.any(Function),
       },
       {
         href: "https://mongodb.com/docs/atlas",
         children: "MongoDB Atlas Docs",
+        onLinkClick: expect.any(Function),
         variant: "Docs",
       },
       {
         href: "https://www.example.com",
         children: "Example",
+        onLinkClick: expect.any(Function),
       },
     ]);
   });
@@ -90,24 +95,29 @@ describe("getMessageLinks", () => {
         href: "https://mongodb.com/developer/products/atlas/foobar",
         children: "Some MongoDB Developer Center Article",
         variant: "Article",
+        onLinkClick: expect.any(Function),
       },
       {
         href: "https://mongodb.com/docs/manual",
         children: "MongoDB Manual",
         variant: "Docs",
+        onLinkClick: expect.any(Function),
       },
       {
         href: "https://www.example123.com",
         children: "Example 123",
+        onLinkClick: expect.any(Function),
       },
       {
         href: "https://mongodb.com/docs/atlas",
         children: "MongoDB Atlas Docs",
         variant: "Docs",
+        onLinkClick: expect.any(Function),
       },
       {
         href: "https://www.example.com",
         children: "Example",
+        onLinkClick: expect.any(Function),
       },
     ]);
   });

packages/mongodb-chatbot-ui/src/messageLinks.ts

@@ -2,6 +2,7 @@ import { isRichLinkVariantName, type RichLinkProps } from "@lg-chat/rich-links";
 import {
   isReferenceToDomain,
   makePrioritizeReferenceDomain,
+  Reference,
   type References,
   SortReferences,
 } from "./references";
@@ -10,16 +11,20 @@ import { MessageData } from "./services/conversations";
 
 export type FormatReferencesOptions = {
   tck?: string;
+  onReferenceClick?: (reference: Reference) => void;
 };
 
 export function formatReferences(
   references: References,
-  { tck }: FormatReferencesOptions = {}
+  { tck, onReferenceClick }: FormatReferencesOptions = {}
 ): RichLinkProps[] {
   return references.map((reference) => {
     const richLinkProps = {
       href: tck ? addQueryParams(reference.url, { tck }) : reference.url,
       children: reference.title,
+      onLinkClick: () => {
+        onReferenceClick?.(reference);
+      },
     };
     const { sourceType } = reference.metadata ?? {};
     if (sourceType && isRichLinkVariantName(sourceType)) {
@@ -34,10 +39,16 @@ export function formatReferences(
 
 export function getMessageLinks(
   messageData: MessageData,
-  options: { tck?: string } = {}
+  options: {
+    tck?: string;
+    onReferenceClick?: (reference: Reference) => void;
+  } = {}
 ): RichLinkProps[] | undefined {
   return messageData.references && messageData.references.length > 0
-    ? formatReferences(messageData.references, { tck: options.tck })
+    ? formatReferences(messageData.references, {
+        tck: options.tck,
+        onReferenceClick: options.onReferenceClick,
+      })
     : undefined;
 }
 

packages/mongodb-chatbot-ui/src/useChatbot.tsx

@@ -1,5 +1,6 @@
 import { startTransition, useRef, useState } from "react";
 import { useConversation, type UseConversationParams } from "./useConversation";
+import { Reference } from "./references";
 
 export type OpenCloseHandlers = {
   onOpen?: () => void;
@@ -11,6 +12,7 @@ export type UseChatbotProps = OpenCloseHandlers &
     chatbotName?: string;
     maxInputCharacters?: number;
     maxCommentCharacters?: number;
+    onReferenceClick?: (reference: Reference) => void;
     onSuggestedPromptClick?: (prompt: string) => void;
   };
 
@@ -29,6 +31,7 @@ export type ChatbotData = {
   open: boolean;
   openChat: () => void;
   setInputText: (text: string) => void;
+  onReferenceClick?: (reference: Reference) => void;
   onSuggestedPromptClick?: (prompt: string) => void;
 };
 
@@ -38,6 +41,7 @@ export function useChatbot({
   chatbotName,
   maxInputCharacters,
   maxCommentCharacters,
+  onReferenceClick,
   onSuggestedPromptClick,
   ...useConversationArgs
 }: UseChatbotProps): ChatbotData {
@@ -131,6 +135,7 @@ export function useChatbot({
     open,
     openChat,
     setInputText,
+    onReferenceClick,
     onSuggestedPromptClick,
   };
 }