fix(chat): avoid final stream remount

src/components/chat/AgentWorkspace.tsx

@@ -40,6 +40,7 @@ type AgentWorkspaceProps = {
 type TurnListProps = {
   messages: Message[];
   isStreaming: boolean;
+  streamingMessageId: string | null;
   speakingMessageId: string | null;
   speechState: SpeechState;
   onSpeak: (messageId: string, text: string) => void;
@@ -60,9 +61,12 @@ const sameMessages = (left: Message[], right: Message[]) =>
   left.length === right.length &&
   left.every((message, index) => message === right[index]);
 
+const TurnItem = React.memo(AgentTurn);
+
 const TurnListInner = ({
   messages,
   isStreaming,
+  streamingMessageId,
   speakingMessageId,
   speechState,
   onSpeak,
@@ -78,10 +82,10 @@ const TurnListInner = ({
   return (
     <>
       {messages.map((message) => (
-        <AgentTurn
+        <TurnItem
           key={message.id}
           message={message}
-          isStreaming={isStreaming}
+          isStreaming={isStreaming && message.id === streamingMessageId}
           messageSpeechState={speakingMessageId === message.id ? speechState : "idle"}
           onSpeak={onSpeak}
           onPause={onPauseSpeech}
@@ -103,6 +107,7 @@ const TurnList = React.memo(
   (prevProps, nextProps) =>
     sameMessages(prevProps.messages, nextProps.messages) &&
     prevProps.isStreaming === nextProps.isStreaming &&
+    prevProps.streamingMessageId === nextProps.streamingMessageId &&
     prevProps.speakingMessageId === nextProps.speakingMessageId &&
     prevProps.speechState === nextProps.speechState &&
     prevProps.onSpeak === nextProps.onSpeak &&
@@ -326,8 +331,6 @@ export const AgentWorkspace = ({
     isStreaming && messages.at(-1)?.role === "assistant"
       ? messages.at(-1)
       : undefined;
-  const historyMessages =
-    streamingMessage !== undefined ? messages.slice(0, -1) : messages;
   const handleScroll = React.useCallback(
     (event: React.UIEvent<HTMLDivElement>) => {
       if (!onScrollStateChange) return;
@@ -368,8 +371,9 @@ export const AgentWorkspace = ({
           {messages.length > 0 ? (
             <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
               <TurnList
-                messages={historyMessages}
-                isStreaming={false}
+                messages={messages}
+                isStreaming={isStreaming}
+                streamingMessageId={streamingMessage?.id ?? null}
                 speakingMessageId={speakingMessageId}
                 speechState={speechState}
                 onSpeak={onSpeak}
@@ -382,26 +386,6 @@ export const AgentWorkspace = ({
                 onReplyQuestion={onReplyQuestion}
                 onRejectQuestion={onRejectQuestion}
               />
-
-              {streamingMessage ? (
-                <Box sx={{ width: "100%" }}>
-                  <TurnList
-                    messages={[streamingMessage]}
-                    isStreaming={isStreaming}
-                    speakingMessageId={speakingMessageId}
-                    speechState={speechState}
-                    onSpeak={onSpeak}
-                    onPauseSpeech={onPauseSpeech}
-                    onResumeSpeech={onResumeSpeech}
-                    onStopSpeech={onStopSpeech}
-                    isTtsSupported={isTtsSupported}
-                    onCreateBranch={onCreateBranch}
-                    onReplyPermission={onReplyPermission}
-                    onReplyQuestion={onReplyQuestion}
-                    onRejectQuestion={onRejectQuestion}
-                  />
-                </Box>
-              ) : null}
             </Box>
           ) : null}
         </>