Improve image upload in debug drawer

frontend/src/components/assistant-editor/debug-preview.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import {
   AudioLines,
   Braces,
@@ -1636,12 +1636,26 @@ function DebugTranscriptPanel({
   recording?: boolean;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
 
-  // 新消息时滚到底部
-  useEffect(() => {
+  const scrollToBottom = useCallback(() => {
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
-  }, [messages]);
+  }, []);
+
+  // Scroll when message list changes (before paint).
+  useLayoutEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  // Images load after the message row mounts; re-scroll when content height grows.
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content) return;
+    const observer = new ResizeObserver(() => scrollToBottom());
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, [scrollToBottom]);
 
   if (messages.length === 0) {
     return (
@@ -1671,7 +1685,7 @@ function DebugTranscriptPanel({
       ref={scrollRef}
       className="scrollbar-subtle flex min-h-0 flex-1 flex-col overflow-y-auto px-5 py-4"
     >
-      <div className="flex flex-col gap-4">
+      <div ref={contentRef} className="flex flex-col gap-4">
         {messages.map((message) => {
           const time = formatMessageTime(message.timestamp);
           return message.role === "assistant" ? (
@@ -1707,6 +1721,7 @@ function DebugTranscriptPanel({
                     src={attachment.url}
                     alt={attachment.alt}
                     className="max-h-72 w-full rounded-[0.8rem] object-cover"
+                    onLoad={scrollToBottom}
                   />
                 ))}
                 {message.content && (