From 8db892caf73734bf7abb25a48b03f5db3ba9e6dc Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Fri, 7 Feb 2025 21:37:53 +0000
Subject: [PATCH] Update MessageBubble component to adjust Markdown styling and
 improve responsiveness

---
 src/components/MessageBubble.tsx | 60 +++++++++++++++-----------------
 1 file changed, 29 insertions(+), 31 deletions(-)

diff --git a/src/components/MessageBubble.tsx b/src/components/MessageBubble.tsx
index 591c4f7..6d61a06 100644
--- a/src/components/MessageBubble.tsx
+++ b/src/components/MessageBubble.tsx
@@ -336,37 +336,35 @@ export default function Message(props: { messageIndex: number }) {
             ) : chat.tool_calls ? (
               <MessageToolCall chat={chat} copyToClipboard={copyToClipboard} />
             ) : renderMarkdown ? (
-              <div className="max-w-full md:max-w-[100%]">
-                <Markdown
-                  remarkPlugins={[remarkMath]}
-                  rehypePlugins={[rehypeKatex]}
-                  disallowedElements={[
-                    "script",
-                    "iframe",
-                    "object",
-                    "embed",
-                    "hr",
-                  ]}
-                  // allowElement={(element) => {
-                  //   return [
-                  //     "p",
-                  //     "em",
-                  //     "strong",
-                  //     "del",
-                  //     "code",
-                  //     "inlineCode",
-                  //     "blockquote",
-                  //     "ul",
-                  //     "ol",
-                  //     "li",
-                  //     "pre",
-                  //   ].includes(element.tagName);
-                  // }}
-                  className={"prose"}
-                >
-                  {getMessageText(chat)}
-                </Markdown>
-              </div>
+              <Markdown
+                remarkPlugins={[remarkMath]}
+                rehypePlugins={[rehypeKatex]}
+                disallowedElements={[
+                  "script",
+                  "iframe",
+                  "object",
+                  "embed",
+                  "hr",
+                ]}
+                // allowElement={(element) => {
+                //   return [
+                //     "p",
+                //     "em",
+                //     "strong",
+                //     "del",
+                //     "code",
+                //     "inlineCode",
+                //     "blockquote",
+                //     "ul",
+                //     "ol",
+                //     "li",
+                //     "pre",
+                //   ].includes(element.tagName);
+                // }}
+                className={"prose max-w-none md:max-w-[75%]"}
+              >
+                {getMessageText(chat)}
+              </Markdown>
             ) : (
               <div className="message-content max-w-full md:max-w-[100%]">
                 {chat.content &&