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>

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>
+              <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}`}>
+                      <li key={`step-${i}`} style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>
-                      <h3 className="mb text-lg font-medium">
+                        <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">
+                            <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 && (

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:

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;
+}