fix(canvas): resolve first-load chat clipping in panel

components/canvas/CanvasChatPanel.tsx

@@ -587,6 +587,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
   const [activeChatId, setActiveChatId] = useState<string>(chatId);
   const [chatSessions, setChatSessions] = useState<CanvasChatSession[]>([]);
   const [isSessionMenuOpen, setIsSessionMenuOpen] = useState(false);
+  const [messageViewportKey, setMessageViewportKey] = useState(0);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const videoSlotInputRefs = useRef<Array<HTMLInputElement | null>>([]);
@@ -1617,6 +1618,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
 
     loadedHistorySignatureRef.current = signature;
     setMessages(historyMessages);
+    setMessageViewportKey((prev) => prev + 1);
     console.log("[CanvasChat] 已同步历史消息:", historyMessages.length, signature);
 
     requestAnimationFrame(() => {
@@ -1646,6 +1648,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     hiddenPromptRef.current = null;
     autoContextRef.current = null;
     pendingLaunchRef.current = null;
+    setMessageViewportKey((prev) => prev + 1);
     setMessages([]);
     setInput("");
     setAttachments([]);
@@ -3139,14 +3142,15 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
         <div className="h-16 shrink-0" />
       ) : (
       <ScrollArea
+        key={`${activeChatId}-${messageViewportKey}`}
         className={cn(
-          "flex-1 p-4",
+          "flex-1 min-h-0 p-4",
           isDetailGenerationMode && visibleMessages.length === 0
             ? "pt-10"
             : "pt-4"
         )}
       >
-        <div className="space-y-6 pb-24">
+        <div className="space-y-6 overflow-x-hidden pb-24 pr-1">
           {!isDetailGenerationMode && visibleMessages.length === 0 && (
             <div className={cn("flex flex-col h-full", isDetailGenerationMode ? "pt-0" : "pt-4")}>
               {/* Greeting */}
@@ -3260,7 +3264,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
             <div
               key={message.id}
               className={cn(
-                "flex gap-3",
+                "flex w-full min-w-0 gap-3",
                 message.role === 'user' ? "flex-row-reverse" : "flex-row"
               )}
             >
@@ -3285,8 +3289,10 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
 
               {/* 消息气泡 */}
               <div className={cn(
-                "flex min-w-0 flex-col gap-2 max-w-[85%]",
-                message.role === 'user' ? "items-end" : "items-start"
+                "flex min-w-0 flex-col gap-2",
+                message.role === 'user'
+                  ? "ml-auto max-w-[85%] items-end"
+                  : "mr-auto max-w-[85%] items-start"
               )}>
                 {message.role === 'user' ? (
                   // 🆕 用户消息：使用图片标签样式（类似竞品，按 parts 原始顺序渲染）
@@ -3372,14 +3378,14 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                   // AI 消息：保持原样式
                   <div
                     className={cn(
-                      "text-card-foreground text-sm",
+                      "min-w-0 max-w-full text-card-foreground text-sm",
                       isImageOnlyAssistant
                         ? "bg-transparent border-0 rounded-none px-0 py-0 shadow-none"
                         : "bg-card border rounded-2xl rounded-tl-sm px-4 py-2.5 shadow-sm"
                     )}
                   >
                     {/* 消息内容 */}
-                    <div className="min-w-0 whitespace-pre-wrap break-words [overflow-wrap:anywhere] leading-relaxed">
+                    <div className="w-full min-w-0 whitespace-pre-wrap break-words [overflow-wrap:anywhere] leading-relaxed">
                       {cleanedMessage.parts?.map((part: any, i: number) => {
                         if (part.type === 'text') {
                           // 提取并显示图片