Force chat view to follow new content

Author: IM.codes

web/src/components/ChatView.tsx

@@ -474,12 +474,12 @@ export function ChatView({ events, loading, refreshing: _refreshing, loadingOlde
     }
   }, [lastVisibleTs]);
 
-  // Preview cards should always show the latest content, including streaming
-  // updates that mutate the last visible event without changing its timestamp.
+  // Any visible content update should force-follow to the latest message.
+  // Skip while prepending older history so anchor restoration can preserve position.
   useLayoutEffect(() => {
-    if (!preview) return;
+    if (loadingOlder || scrollAnchorRef.current) return;
     scrollToBottom();
-  }, [preview, viewItems, loading]);
+  }, [preview, viewItems, loading, loadingOlder]);
 
   // Restore scroll position after Load Older prepends events
   useLayoutEffect(() => {
@@ -492,14 +492,14 @@ export function ChatView({ events, loading, refreshing: _refreshing, loadingOlde
     scrollAnchorRef.current = null;
   }, [events]);
 
-  // Subsequent auto-scroll (new messages while at bottom) — use rAF for smooth updates.
+  // Fallback for timestamp-based message additions. The layout effect above handles
+  // streaming edits and other view changes that do not advance timestamps.
   useEffect(() => {
     const changed = lastVisibleTs !== prevVisibleTsRef.current;
     prevVisibleTsRef.current = lastVisibleTs;
     if (!changed && !preview) return;
     requestAnimationFrame(() => {
-      if (preview) { scrollToBottom(); return; }
-      if (autoScrollRef.current) scrollToBottom();
+      scrollToBottom();
     });
   }, [lastVisibleTs, preview]);
 

web/test/components/ChatView.test.tsx

@@ -80,4 +80,54 @@ describe('ChatView', () => {
       expect(scrollEl.scrollTop).toBe(1600);
     });
   });
+
+  it('forces the main chat view to follow streamed updates with the same timestamp', async () => {
+    const initialEvents = [
+      {
+        eventId: 'evt-1',
+        type: 'assistant.text',
+        ts: 1000,
+        payload: { text: 'hello' },
+      },
+    ] as any;
+
+    const { container, rerender } = render(
+      <ChatView
+        events={initialEvents}
+        loading={false}
+        sessionId="deck_main_brain"
+      />,
+    );
+
+    const scrollEl = container.querySelector('.chat-view') as HTMLDivElement;
+    Object.defineProperty(scrollEl, 'scrollTop', { configurable: true, writable: true, value: 0 });
+    Object.defineProperty(scrollEl, 'scrollHeight', { configurable: true, value: 1200 });
+    Object.defineProperty(scrollEl, 'clientHeight', { configurable: true, value: 200 });
+
+    await waitFor(() => {
+      expect(scrollEl.scrollTop).toBe(1200);
+    });
+
+    scrollEl.scrollTop = 50;
+    Object.defineProperty(scrollEl, 'scrollHeight', { configurable: true, value: 1800 });
+
+    rerender(
+      <ChatView
+        events={[
+          {
+            eventId: 'evt-1',
+            type: 'assistant.text',
+            ts: 1000,
+            payload: { text: 'hello world' },
+          },
+        ] as any}
+        loading={false}
+        sessionId="deck_main_brain"
+      />,
+    );
+
+    await waitFor(() => {
+      expect(scrollEl.scrollTop).toBe(1800);
+    });
+  });
 });