From f17e5bd6c84acb3781430af6dc61bf1d8d6d6ed0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=81=93=E5=BF=83=E5=9D=9A=E5=AE=9A=E9=9F=A9=E9=81=93?=
 =?UTF-8?q?=E5=8F=8B?= <yuehuazhang@tencent.com>
Date: Thu, 21 Aug 2025 10:31:54 +0800
Subject: [PATCH] FIX/Adapt message box to handle long text in frontend (#466)

* fix:ui

* fix:ui bug

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
---
 .../app/chat/components/message-list-view.tsx | 66 ++++++++++++-------
 .../components/deer-flow/message-input.tsx    |  2 +-
 web/src/styles/prosemirror.css                |  9 +++
 3 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/web/src/app/chat/components/message-list-view.tsx b/web/src/app/chat/components/message-list-view.tsx
index ed94319..1a25e35 100644
--- a/web/src/app/chat/components/message-list-view.tsx
+++ b/web/src/app/chat/components/message-list-view.tsx
@@ -185,7 +185,7 @@ function MessageListItem({
             )}
           >
             <MessageBubble message={message}>
-              <div className="flex w-full flex-col text-wrap break-words">
+              <div className="flex w-full flex-col break-words">
                 <Markdown
                   className={cn(
                     message.role === "user" &&
@@ -233,11 +233,12 @@ function MessageBubble({
   return (
     <div
       className={cn(
-        `group flex w-fit max-w-[85%] flex-col rounded-2xl px-4 py-3 text-nowrap shadow`,
+        "group flex w-auto max-w-[90vw] flex-col rounded-2xl px-4 py-3 break-words",
         message.role === "user" && "bg-brand rounded-ee-none",
         message.role === "assistant" && "bg-card rounded-es-none",
         className,
       )}
+      style={{ wordBreak: "break-all" }}
     >
       {children}
     </div>
@@ -492,27 +493,46 @@ function PlanCard({
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <Markdown className="opacity-80" animated={message.isStreaming}>
-                {plan.thought}
-              </Markdown>
-              {plan.steps && (
-                <ul className="my-2 flex list-decimal flex-col gap-4 border-l-[2px] pl-8">
-                  {plan.steps.map((step, i) => (
-                    <li key={`step-${i}`}>
-                      <h3 className="mb text-lg font-medium">
-                        <Markdown animated={message.isStreaming}>
-                          {step.title}
-                        </Markdown>
-                      </h3>
-                      <div className="text-muted-foreground text-sm">
-                        <Markdown animated={message.isStreaming}>
-                          {step.description}
-                        </Markdown>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              )}
+              <div style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>
+                <Markdown className="opacity-80" animated={message.isStreaming}>
+                  {plan.thought}
+                </Markdown>
+                {plan.steps && (
+                  <ul className="my-2 flex list-decimal flex-col gap-4 border-l-[2px] pl-8">
+                    {plan.steps.map((step, i) => (
+                      <li key={`step-${i}`} style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>
+                        <div className="flex items-start gap-2">
+                          <div className="flex-1">
+                            <h3 className="mb flex items-center gap-2 text-lg font-medium">
+                              <Markdown animated={message.isStreaming}>
+                                {step.title}
+                              </Markdown>
+                              {step.tools && step.tools.length > 0 && (
+                                <Tooltip
+                                  title={`Uses ${step.tools.length} MCP tool${step.tools.length > 1 ? "s" : ""}`}
+                                >
+                                  <div className="flex items-center gap-1 rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-800">
+                                    <Wrench size={12} />
+                                    <span>{step.tools.length}</span>
+                                  </div>
+                                </Tooltip>
+                              )}
+                            </h3>
+                            <div className="text-muted-foreground text-sm" style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>
+                              <Markdown animated={message.isStreaming}>
+                                {step.description}
+                              </Markdown>
+                            </div>
+                            {step.tools && step.tools.length > 0 && (
+                              <ToolsDisplay tools={step.tools} />
+                            )}
+                          </div>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
             </CardContent>
             <CardFooter className="flex justify-end">
               {!message.isStreaming && interruptMessage?.options?.length && (
diff --git a/web/src/components/deer-flow/message-input.tsx b/web/src/components/deer-flow/message-input.tsx
index 9b4ab5e..0a68fb8 100644
--- a/web/src/components/deer-flow/message-input.tsx
+++ b/web/src/components/deer-flow/message-input.tsx
@@ -185,7 +185,7 @@ const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
           <EditorContent
             immediatelyRender={false}
             extensions={extensions}
-            className="border-muted h-full w-full overflow-auto"
+            className="border-muted h-full w-full overflow-auto break-words"
             editorProps={{
               attributes: {
                 class:
diff --git a/web/src/styles/prosemirror.css b/web/src/styles/prosemirror.css
index 21ed89b..90f3673 100644
--- a/web/src/styles/prosemirror.css
+++ b/web/src/styles/prosemirror.css
@@ -304,3 +304,12 @@ span[style] > strong {
 mark[style] > strong {
   color: inherit;
 }
+
+.prose ol, .prose ul {
+  margin-left: 1.2em;
+  color: #b0b0b0;
+  font-size: 0.98em;
+}
+.prose ol > li::marker, .prose ul > li::marker {
+  color: #b0b0b0;
+}