From 0f85636779d106457e1da6d0271332cce6fbb60a Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 29 May 2026 13:15:26 +0800
Subject: [PATCH] refactor(bot-form): enhance message rendering logic for user
 and assistant roles

---
 src/features/problems/bot/components/form.tsx | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/features/problems/bot/components/form.tsx b/src/features/problems/bot/components/form.tsx
index f0e83af..d4bd08d 100644
--- a/src/features/problems/bot/components/form.tsx
+++ b/src/features/problems/bot/components/form.tsx
@@ -108,6 +108,7 @@ export const BotForm = ({
                       message.role === "user" || message.role === "assistant"
                   )
                   .map((message) => {
+                    const isUserMessage = message.role === "user";
                     const isEmptyAssistantMessage =
                       message.role === "assistant" &&
                       !message.content.trim() &&
@@ -116,17 +117,26 @@ export const BotForm = ({
                     return (
                       <ChatBubble
                         key={message.id}
-                        layout="ai"
-                        className="border-b pb-4"
+                        variant={isUserMessage ? "sent" : "received"}
+                        className={isUserMessage ? "self-end" : "max-w-full"}
                       >
                         <ChatBubbleMessage
-                          layout="ai"
+                          variant={isUserMessage ? "sent" : "received"}
                           isLoading={isEmptyAssistantMessage}
+                          className={
+                            isUserMessage
+                              ? "max-w-[85%] rounded-2xl px-3 py-2"
+                              : "w-full rounded-none bg-transparent p-0"
+                          }
                         >
-                          <MdxPreview
-                            source={message.content}
-                            components={{ ...MdxComponents, pre: PreDetail }}
-                          />
+                          {isUserMessage ? (
+                            message.content
+                          ) : (
+                            <MdxPreview
+                              source={message.content}
+                              components={{ ...MdxComponents, pre: PreDetail }}
+                            />
+                          )}
                         </ChatBubbleMessage>
                       </ChatBubble>
                     );