From a5f7447f4f2c3bedd02a80188b79acf221886f6a Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Fri, 7 Feb 2025 17:42:49 +0000
Subject: [PATCH] Refactor MessageBubble component to enhance Markdown
 rendering for list items and paragraphs

---
 src/components/MessageBubble.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/MessageBubble.tsx b/src/components/MessageBubble.tsx
index 6bf5c25..59edfb8 100644
--- a/src/components/MessageBubble.tsx
+++ b/src/components/MessageBubble.tsx
@@ -376,6 +376,13 @@ export default function Message(props: { messageIndex: number }) {
                     ul: ({ children }) => (
                       <ul className="list-disc ml-6 space-y-2">{children}</ul>
                     ),
+                    li: ({ children }) => <li>{children}</li>,
+                    p: ({ children, node }: any) => {
+                      if (node?.parent?.type === "listItem") {
+                        return <>{children}</>;
+                      }
+                      return <p>{children}</p>;
+                    },
                     h1: ({ children }) => (
                       <h1 className="text-2xl font-bold mt-6 mb-4">
                         {children}
@@ -469,7 +476,18 @@ export default function Message(props: { messageIndex: number }) {
             ) : chat.role === "tool" ? (
               <MessageToolResp chat={chat} copyToClipboard={copyToClipboard} />
             ) : renderMarkdown ? (
-              <Markdown>{getMessageText(chat)}</Markdown>
+              <Markdown
+                components={{
+                  p: ({ children, node }: any) => {
+                    if (node?.parent?.type === "listItem") {
+                      return <>{children}</>;
+                    }
+                    return <p>{children}</p>;
+                  },
+                }}
+              >
+                {getMessageText(chat)}
+              </Markdown>
             ) : (
               <div className="message-content">
                 {chat.content &&