From 2bbe659897320f3d0f7f391b27e18017e06717ba Mon Sep 17 00:00:00 2001
From: Xin Wang <wangx184@chinatelecom.cn>
Date: Mon, 9 Feb 2026 13:18:36 +0800
Subject: [PATCH] Text records scrollable

---
 web/pages/Assistants.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/pages/Assistants.tsx b/web/pages/Assistants.tsx
index 8d575ef..9a00440 100644
--- a/web/pages/Assistants.tsx
+++ b/web/pages/Assistants.tsx
@@ -1599,7 +1599,7 @@ export const DebugDrawer: React.FC<{
   }, [isOpen, assistant, voices, llmModels, asrModels]);
 
   const TranscriptionLog = ({ className = '' }: { className?: string }) => (
-    <div ref={scrollRef} className={`overflow-y-auto space-y-4 p-2 border border-white/5 rounded-md bg-black/20 min-h-0 ${className}`}>
+    <div ref={scrollRef} className={`overflow-y-auto overflow-x-hidden space-y-4 p-2 border border-white/5 rounded-md bg-black/20 min-h-0 custom-scrollbar ${className}`}>
         {messages.length === 0 && <div className="text-center text-muted-foreground text-xs py-4">暂无转写记录</div>}
         {messages.map((m, i) => (
         <div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
@@ -1699,9 +1699,9 @@ export const DebugDrawer: React.FC<{
             <div className={`flex-1 overflow-hidden flex flex-col min-h-0 ${mode === 'text' && textSessionStarted ? 'mb-0' : 'mb-4'}`}>
               {mode === 'text' ? (
                 textSessionStarted ? (
-                  <div className="flex-1 min-h-0 overflow-hidden animate-in fade-in">
-                    <div className="h-[68vh] min-h-[420px] max-h-[68vh] w-full overflow-hidden">
-                      <TranscriptionLog className="h-full" />
+                  <div className="flex-1 min-h-0 overflow-hidden animate-in fade-in flex flex-col">
+                    <div className="h-[68vh] min-h-[420px] max-h-[68vh] w-full flex flex-col min-h-0 overflow-hidden">
+                      <TranscriptionLog className="flex-1 min-h-0 h-full" />
                     </div>
                   </div>
                 ) : wsStatus === 'connecting' ? (
@@ -1766,18 +1766,18 @@ export const DebugDrawer: React.FC<{
               ) : (
                 <div className="flex-1 flex flex-col min-h-0 space-y-2">
                   {mode === 'voice' ? (
-                    <div className="flex flex-col h-full animate-in fade-in">
+                    <div className="flex flex-col h-full min-h-0 animate-in fade-in">
                       <div className="h-1/3 min-h-[150px] shrink-0 border border-white/5 rounded-md bg-black/20 flex flex-col items-center justify-center text-muted-foreground space-y-4 mb-2 relative overflow-hidden">
                         <div className="h-24 w-24 rounded-full bg-primary/10 flex items-center justify-center animate-pulse relative z-10">
                           <Mic className="h-10 w-10 text-primary" />
                         </div>
                         <p className="text-sm relative z-10">通话中...</p>
                       </div>
-                      <h4 className="text-xs font-medium text-muted-foreground px-1 mb-1 uppercase tracking-tight">转写日志</h4>
-                      <TranscriptionLog className="flex-1 min-h-0" />
+                      <h4 className="text-xs font-medium text-muted-foreground px-1 mb-1 uppercase tracking-tight shrink-0">转写日志</h4>
+                      <TranscriptionLog className="flex-1 min-h-0 overflow-y-auto" />
                     </div>
                   ) : (
-                    <div className="flex flex-col h-full space-y-2 animate-in fade-in">
+                    <div className="flex flex-col h-full min-h-0 space-y-2 animate-in fade-in">
                       <div className="h-3/5 shrink-0 flex flex-col gap-2">
                         <div className="flex gap-2 shrink-0">
                           <select className="flex-1 text-xs bg-white/5 border border-white/10 rounded px-2 py-1 text-foreground" value={selectedCamera} onChange={e => setSelectedCamera(e.target.value)}>
@@ -1793,7 +1793,7 @@ export const DebugDrawer: React.FC<{
                           <button className="absolute top-2 right-2 z-20 h-8 w-8 rounded-full bg-black/50 backdrop-blur flex items-center justify-center text-white border border-white/10 hover:bg-primary/80" onClick={() => setIsSwapped(!isSwapped)}><ArrowLeftRight className="h-3.5 w-3.5" /></button>
                         </div>
                       </div>
-                      <TranscriptionLog className="flex-1 min-h-0" />
+                      <TranscriptionLog className="flex-1 min-h-0 overflow-y-auto" />
                     </div>
                   )}
                   <Button variant="destructive" size="sm" className="w-full h-10 font-bold" onClick={handleHangup}>