src/components/chat/AgentTurn.tsx

@@ -39,6 +39,7 @@ import StopRounded from "@mui/icons-material/StopRounded";
 
 type AgentTurnProps = {
   message: Message;
+  isStreaming: boolean;
   messageSpeechState: SpeechState;
   onSpeak: (messageId: string, text: string) => void;
   onPause: () => void;
@@ -54,6 +55,7 @@ type AgentTurnProps = {
 export const AgentTurn = React.memo(
   ({
     message,
+    isStreaming,
     messageSpeechState,
     onSpeak,
     onPause,
@@ -277,7 +279,7 @@ export const AgentTurn = React.memo(
             </Stack>
 
             <AnimatePresence>
-              {isHovered && (
+              {isHovered && !isStreaming && (
                 <motion.div
                   initial={{ opacity: 0, scale: 0.9, y: 5 }}
                   animate={{ opacity: 1, scale: 1, y: 0 }}

src/components/chat/AgentWorkspace.tsx

@@ -36,6 +36,7 @@ type AgentWorkspaceProps = {
 
 type TurnListProps = {
   messages: Message[];
+  isStreaming: boolean;
   speakingMessageId: string | null;
   speechState: SpeechState;
   onSpeak: (messageId: string, text: string) => void;
@@ -55,6 +56,7 @@ const sameMessages = (left: Message[], right: Message[]) =>
 
 const TurnListInner = ({
   messages,
+  isStreaming,
   speakingMessageId,
   speechState,
   onSpeak,
@@ -73,6 +75,7 @@ const TurnListInner = ({
         <AgentTurn
           key={message.id}
           message={message}
+          isStreaming={isStreaming}
           messageSpeechState={speakingMessageId === message.id ? speechState : "idle"}
           onSpeak={onSpeak}
           onPause={onPauseSpeech}
@@ -93,6 +96,7 @@ const TurnList = React.memo(
   TurnListInner,
   (prevProps, nextProps) =>
     sameMessages(prevProps.messages, nextProps.messages) &&
+    prevProps.isStreaming === nextProps.isStreaming &&
     prevProps.speakingMessageId === nextProps.speakingMessageId &&
     prevProps.speechState === nextProps.speechState &&
     prevProps.onSpeak === nextProps.onSpeak &&
@@ -274,6 +278,7 @@ export const AgentWorkspace = ({
         <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
           <TurnList
             messages={historyMessages}
+            isStreaming={isStreaming}
             speakingMessageId={speakingMessageId}
             speechState={speechState}
             onSpeak={onSpeak}
@@ -290,6 +295,7 @@ export const AgentWorkspace = ({
           {streamingMessage ? (
             <TurnList
               messages={[streamingMessage]}
+              isStreaming={isStreaming}
               speakingMessageId={speakingMessageId}
               speechState={speechState}
               onSpeak={onSpeak}