Add client handler for suggested prompt click (#764)

Author: nlarew

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

@@ -79,6 +79,9 @@ function App() {
           onClose={() => {
             console.log("Docs Chatbot closed");
           }}
+          onSuggestedPromptClick={(prompt) => {
+            console.log("Suggested prompt clicked", prompt);
+          }}
           maxInputCharacters={3000}
         >
           <DocsChatbot suggestedPrompts={SUGGESTED_PROMPTS} />
@@ -101,6 +104,9 @@ function App() {
           onClose={() => {
             console.log("Dev Center Chatbot closed");
           }}
+          onSuggestedPromptClick={(prompt) => {
+            console.log("Suggested prompt clicked", prompt);
+          }}
           sortMessageReferences={makePrioritizeReferenceDomain([
             "https://mongodb.com/developer",
             "https://www.mongodb.com/developer",

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

@@ -38,8 +38,13 @@ export function ChatMessageFeed(props: ChatMessageFeedProps) {
   const { darkMode } = useDarkMode(props.darkMode);
   const { className, disclaimer, disclaimerHeading, initialMessage } = props;
 
-  const { awaitingReply, canSubmit, conversation, handleSubmit } =
-    useChatbotContext();
+  const {
+    awaitingReply,
+    canSubmit,
+    conversation,
+    handleSubmit,
+    onSuggestedPromptClick,
+  } = useChatbotContext();
 
   const messages = initialMessage
     ? [initialMessage, ...conversation.messages]
@@ -87,7 +92,10 @@ 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
             }
-            onSuggestedPromptClick={handleSubmit}
+            onSuggestedPromptClick={(prompt) => {
+              onSuggestedPromptClick?.(prompt);
+              handleSubmit(prompt);
+            }}
             canSubmitSuggestedPrompt={canSubmit}
           />
         );

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

@@ -28,6 +28,7 @@ export function Chatbot({
   isExperimental,
   onOpen,
   onClose,
+  onSuggestedPromptClick,
   sortMessageReferences,
   getClientContext,
   ...props
@@ -61,6 +62,7 @@ export function Chatbot({
               serverBaseUrl={serverBaseUrl}
               shouldStream={shouldStream}
               sortMessageReferences={sortMessageReferences}
+              onSuggestedPromptClick={onSuggestedPromptClick}
             >
               {children}
             </InnerChatbot>
@@ -82,6 +84,7 @@ type InnerChatbotProps = Pick<
   | "name"
   | "onOpen"
   | "onClose"
+  | "onSuggestedPromptClick"
   | "serverBaseUrl"
   | "shouldStream"
   | "sortMessageReferences"

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

@@ -70,6 +70,7 @@ export function InputBarTrigger({
     handleSubmit,
     hasError,
     showError,
+    onSuggestedPromptClick,
   } = useTextInputTrigger({
     fatalErrorMessage,
     placeholder,
@@ -139,6 +140,7 @@ export function InputBarTrigger({
                 <SuggestedPrompt
                   key={suggestedPrompt}
                   onClick={async () => {
+                    onSuggestedPromptClick?.(suggestedPrompt);
                     await handleSubmit(suggestedPrompt);
                   }}
                 >

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

@@ -170,7 +170,9 @@ export const Message = ({
         {showSuggestedPrompts && (
           <MessagePrompts
             prompts={suggestedPrompts}
-            onPromptClick={(prompt) => onSuggestedPromptClick?.(prompt)}
+            onPromptClick={(prompt) => {
+              onSuggestedPromptClick?.(prompt);
+            }}
             canSubmit={canSubmitSuggestedPrompt}
           />
         )}

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

@@ -12,6 +12,7 @@ export type UseChatbotProps = OpenCloseHandlers &
     isExperimental?: boolean;
     maxInputCharacters?: number;
     maxCommentCharacters?: number;
+    onSuggestedPromptClick?: (prompt: string) => void;
   };
 
 export type ChatbotData = {
@@ -30,6 +31,7 @@ export type ChatbotData = {
   open: boolean;
   openChat: () => void;
   setInputText: (text: string) => void;
+  onSuggestedPromptClick?: (prompt: string) => void;
 };
 
 export function useChatbot({
@@ -39,6 +41,7 @@ export function useChatbot({
   isExperimental = true,
   maxInputCharacters,
   maxCommentCharacters,
+  onSuggestedPromptClick,
   ...useConversationArgs
 }: UseChatbotProps): ChatbotData {
   const conversation = useConversation(useConversationArgs);
@@ -132,5 +135,6 @@ export function useChatbot({
     open,
     openChat,
     setInputText,
+    onSuggestedPromptClick,
   };
 }

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

@@ -46,6 +46,7 @@ export function useTextInputTrigger({
     handleSubmit,
     conversation,
     isExperimental,
+    onSuggestedPromptClick,
   } = useChatbotContext();
 
   const [focused, setFocused] = useState(false);
@@ -73,5 +74,6 @@ export function useTextInputTrigger({
     handleSubmit,
     hasError,
     showError,
+    onSuggestedPromptClick,
   };
 }