From 21e9b9a3dd6acf8e0437935beb04912d37492747 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Wed, 18 Feb 2026 21:41:56 +0800
Subject: [PATCH] fix: prevent canvas assistant bubbles from clipping long
 history text

---
 components/canvas/CanvasChatPanel.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 4082dde99..553aac771 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -3285,7 +3285,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
 
               {/* 消息气泡 */}
               <div className={cn(
-                "flex flex-col gap-2 max-w-[85%]",
+                "flex min-w-0 flex-col gap-2 max-w-[85%]",
                 message.role === 'user' ? "items-end" : "items-start"
               )}>
                 {message.role === 'user' ? (
@@ -3379,7 +3379,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                     )}
                   >
                     {/* 消息内容 */}
-                    <div className="whitespace-pre-wrap break-words leading-relaxed">
+                    <div className="min-w-0 whitespace-pre-wrap break-words [overflow-wrap:anywhere] leading-relaxed">
                       {cleanedMessage.parts?.map((part: any, i: number) => {
                         if (part.type === 'text') {
                           // 提取并显示图片
@@ -3390,7 +3390,11 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                           
                           return (
                             <div key={i}>
-                              {textWithoutImages && <span>{textWithoutImages}</span>}
+                              {textWithoutImages && (
+                                <span className="break-words [overflow-wrap:anywhere]">
+                                  {textWithoutImages}
+                                </span>
+                              )}
                               {imageUrls.length > 0 && (
                                 <div className={cn("flex flex-wrap gap-2", textWithoutImages ? "mt-3" : "mt-0")}>
                                   {imageUrls.map((url, idx) => (