From d14fb262ea2eaecca608399920c7d063feb8a699 Mon Sep 17 00:00:00 2001
From: JeffJiang <for-eleven@hotmail.com>
Date: Wed, 28 May 2025 19:11:20 +0800
Subject: [PATCH] fix: message block width (#257)

---
 .../app/chat/components/message-list-view.tsx |  2 +-
 .../components/deer-flow/scroll-container.tsx | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/web/src/app/chat/components/message-list-view.tsx b/web/src/app/chat/components/message-list-view.tsx
index 9c455eb..8a44638 100644
--- a/web/src/app/chat/components/message-list-view.tsx
+++ b/web/src/app/chat/components/message-list-view.tsx
@@ -173,7 +173,7 @@ function MessageListItem({
             )}
           >
             <MessageBubble message={message}>
-              <div className="flex w-full flex-col">
+              <div className="flex w-full flex-col text-wrap break-words">
                 <Markdown
                   className={cn(
                     message.role === "user" &&
diff --git a/web/src/components/deer-flow/scroll-container.tsx b/web/src/components/deer-flow/scroll-container.tsx
index 795bdee..83aa931 100644
--- a/web/src/components/deer-flow/scroll-container.tsx
+++ b/web/src/components/deer-flow/scroll-container.tsx
@@ -1,7 +1,14 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { useEffect, useImperativeHandle, useRef, type ReactNode, type RefObject } from "react";
+import {
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  type ReactNode,
+  type RefObject,
+} from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
 
 import { ScrollArea } from "~/components/ui/scroll-area";
@@ -26,15 +33,16 @@ export function ScrollContainer({
   scrollShadow = true,
   scrollShadowColor = "var(--background)",
   autoScrollToBottom = false,
-  ref
+  ref,
 }: ScrollContainerProps) {
-  const { scrollRef, contentRef, scrollToBottom, isAtBottom } = useStickToBottom({ initial: "instant" });
+  const { scrollRef, contentRef, scrollToBottom, isAtBottom } =
+    useStickToBottom({ initial: "instant" });
   useImperativeHandle(ref, () => ({
     scrollToBottom() {
       if (isAtBottom) {
         scrollToBottom();
       }
-    }
+    },
   }));
 
   const tempScrollRef = useRef<HTMLElement>(null);
@@ -51,6 +59,14 @@ export function ScrollContainer({
     }
   }, [autoScrollToBottom, contentRef, scrollRef]);
 
+  useLayoutEffect(() => {
+    if (contentRef.current) {
+      if (contentRef.current.parentElement) {
+        contentRef.current.parentElement.style.display = "block";
+      }
+    }
+  }, [contentRef]);
+
   return (
     <div className={cn("relative", className)}>
       {scrollShadow && (