(EAI-1175) Add slot to messages below message rating (#840)

nlarew · web-flow · commit 64bcf4af11ca · 2025-07-25T09:30:40.000-05:00
* wip - message bottom content * (EAI-1175) Add slot to messages below message rating
diff --git a/packages/mongodb-chatbot-ui/src/App.tsx b/packages/mongodb-chatbot-ui/src/App.tsx
@@ -5,14 +5,15 @@ import LeafyGreenProvider, {
   useDarkModeContext,
 } from "@leafygreen-ui/leafygreen-provider";
 import { canUseServerSentEvents } from "./utils";
-import { Overline, Link } from "@leafygreen-ui/typography";
+import { Overline, Link, Body } from "@leafygreen-ui/typography";
 import Toggle from "@leafygreen-ui/toggle";
 import { Chatbot } from "./Chatbot";
 import { DocsChatbot } from "./DocsChatbot";
 import { DevCenterChatbot } from "./DevCenterChatbot";
 import { HotkeyTrigger } from "./HotkeyTrigger";
 import { makePrioritizeReferenceDomain } from "./references";
 import { getSegmentIdHeaders } from "./segment";
+import Button from "@leafygreen-ui/button";
 
 const prefersDarkMode = () =>
   window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
@@ -121,6 +122,17 @@ function App() {
           <DevCenterChatbot
             initialMessageSuggestedPrompts={SUGGESTED_PROMPTS}
             initialMessageReferences={initialMessageReferences}
+            messageBottomContent={
+              <div>
+                <Body as="i">
+                  This is custom message bottom content. It can contain a{" "}
+                  <Button size="xsmall" onClick={() => alert("button clicked")}>
+                    button
+                  </Button>{" "}
+                  or any other ReactNode!
+                </Body>
+              </div>
+            }
           />
           <HotkeyTrigger onKey="/" />
         </Chatbot>
diff --git a/packages/mongodb-chatbot-ui/src/ChatMessageFeed.tsx b/packages/mongodb-chatbot-ui/src/ChatMessageFeed.tsx
@@ -32,11 +32,18 @@ export type ChatMessageFeedProps = DarkModeProps & {
   disclaimer?: React.ReactNode;
   disclaimerHeading?: string;
   initialMessage?: MessageData | null;
+  messageBottomContent?: React.ReactNode;
 };
 
 export function ChatMessageFeed(props: ChatMessageFeedProps) {
   const { darkMode } = useDarkMode(props.darkMode);
-  const { className, disclaimer, disclaimerHeading, initialMessage } = props;
+  const {
+    className,
+    disclaimer,
+    disclaimerHeading,
+    initialMessage,
+    messageBottomContent,
+  } = props;
 
   const {
     awaitingReply,
@@ -72,20 +79,23 @@ export function ChatMessageFeed(props: ChatMessageFeedProps) {
 
         const isInitialMessage = idx === 0;
 
+        const showRatingAndBottomContent =
+          !isLoading &&
+          // If we've sent a request but the response hasn't started streaming yet, don't show the rating
+          !(awaitingReply && conversation.streamingMessageId === message.id) &&
+          // Users can rate assistant messages that have started streaming
+          message.role === "assistant" &&
+          // We don't want users to rate the initial message (and they can't because it's not in the database)
+          !isInitialMessage;
+
         return (
           <Message
             key={message.id}
             messageData={message}
             isLoading={isLoading}
-            showRating={
-              // Users can rate assistant messages that have started streaming
-              message.role === "assistant" &&
-              !isLoading &&
-              !(
-                awaitingReply && conversation.streamingMessageId === message.id
-              ) &&
-              // We don't want users to rate the initial message (and they can't because it's not in the database)
-              !isInitialMessage
+            showRating={showRatingAndBottomContent}
+            bottomContent={
+              showRatingAndBottomContent ? messageBottomContent : null
             }
             conversation={conversation}
             suggestedPrompts={message.suggestedPrompts}
diff --git a/packages/mongodb-chatbot-ui/src/ChatWindow.tsx b/packages/mongodb-chatbot-ui/src/ChatWindow.tsx
@@ -33,6 +33,7 @@ export function ChatWindow(props: ChatWindowProps) {
     initialMessageSuggestedPrompts,
     inputBarId = "chatbot-input-bar",
     inputBottomText,
+    messageBottomContent,
     windowTitle,
   } = props;
 
@@ -70,6 +71,7 @@ export function ChatWindow(props: ChatWindowProps) {
             disclaimer={disclaimer}
             disclaimerHeading={disclaimerHeading}
             initialMessage={initialMessage}
+            messageBottomContent={messageBottomContent}
           />
         </Suspense>
         <ChatInput
diff --git a/packages/mongodb-chatbot-ui/src/ChatbotView.tsx b/packages/mongodb-chatbot-ui/src/ChatbotView.tsx
@@ -11,5 +11,6 @@ export type ChatbotViewProps = DarkModeProps &
     inputBarId?: string;
     inputBarPlaceholder?: string;
     inputBottomText?: string;
+    messageBottomContent?: React.ReactNode;
     windowTitle?: string;
   };
diff --git a/packages/mongodb-chatbot-ui/src/DevCenterChatbot.tsx b/packages/mongodb-chatbot-ui/src/DevCenterChatbot.tsx
@@ -16,6 +16,7 @@ export type DevCenterChatbotProps = DarkModeProps & {
   initialMessageText?: string;
   initialMessageSuggestedPrompts?: string[];
   initialMessageReferences?: References;
+  messageBottomContent?: React.ReactNode;
 };
 
 const ModalView = lazy(() =>
@@ -34,6 +35,7 @@ export function DevCenterChatbot(props: DevCenterChatbotProps) {
       "Hi! I'm the MongoDB AI. What can I help you with today?",
     initialMessageReferences: props.initialMessageReferences,
     initialMessageSuggestedPrompts: props.initialMessageSuggestedPrompts ?? [],
+    messageBottomContent: props.messageBottomContent,
     disclaimer: (
       <>
         <MongoDbLegalDisclosure />
diff --git a/packages/mongodb-chatbot-ui/src/Message.tsx b/packages/mongodb-chatbot-ui/src/Message.tsx
@@ -44,6 +44,7 @@ export type MessageProps = {
   messageData: MessageData;
   suggestedPrompts?: string[];
   showSuggestedPrompts?: boolean;
+  bottomContent?: React.ReactNode;
   onReferenceClick?: (reference: Reference) => void;
   onSuggestedPromptClick?: (prompt: string) => void;
   canSubmitSuggestedPrompt?: (prompt: string) => boolean;
@@ -71,6 +72,7 @@ export const Message = ({
   isLoading,
   showRating,
   conversation,
+  bottomContent,
 }: MessageProps) => {
   const { maxCommentCharacters } = useChatbotContext();
   const user = useUser();
@@ -171,6 +173,7 @@ export const Message = ({
             />
           ) : null}
         </Suspense>
+        {bottomContent ?? null}
       </LGMessage>
       <Suspense fallback={null}>
         {showSuggestedPrompts && (
diff --git a/packages/mongodb-chatbot-ui/src/MessageRating.tsx b/packages/mongodb-chatbot-ui/src/MessageRating.tsx
@@ -59,13 +59,17 @@ export function MessageRatingWithFeedbackComment(
       className={css`
         & > div + div {
           margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
         }
       `}
     >
       <MessageRating {...messageRatingProps} />
       {hasRating && status !== "abandoned" ? (
         <>
           <InlineMessageFeedback
+            className={
+              "" /* For now this is unsupported - use the > div + div selector above instead https://jira.mongodb.org/browse/LG-3965 */
+            }
             ref={ratingCommentRef}
             cancelButtonText="Cancel"
             onCancel={() => abandon()}
