{message.content_type === 'text' || message.content_type === 'Text' ? (
- {/* Thinking/reasoning section — collapsible, DeepSeek-style */}
- {thinkingContent && (
-
-
- {thinkingExpanded && (
-
- {thinkingContent}
-
- )}
-
- )}
- {/* Answer content — always visible */}
- {displayContent && (
-
+ ) : parseSavedChunks(message.thinking_content) ? (
+ /* Saved ordered chunks — render in original order */
+
+ ) : (
+ /* Legacy: aggregated thinking at top, content at bottom */
+ <>
+ {thinkingContent && (
+
+
+ {thinkingExpanded && (
+
+ {thinkingContent}
+
+ )}
+
+ )}
+ {message.content && (
+
+ )}
+
)}
- {/* Streaming cursor */}
- {isStreaming &&
}
-
{/* Collapse gradient */}
{isTextCollapsed && (
| null>(null);
const isRestoringScrollRef = useRef(false);
const firstVisibleMessageIdRef = useRef(null);
- const isInitialLoadRef = useRef(true);
const wasNearBottomRef = useRef(true);
+ const didInitialLayoutRef = useRef(false);
- // Reset initial load flag when switching rooms
+ // Reset scroll flags when switching rooms
useEffect(() => {
- isInitialLoadRef.current = true;
wasNearBottomRef.current = true;
+ didInitialLayoutRef.current = false;
}, [roomId]);
const replyMap = useMemo(() => {
@@ -153,13 +153,6 @@ export const MessageList = memo(function MessageList({
return result;
}, [messages, replyMap]);
- const scrollToBottom = useCallback((smooth = true) => {
- const container = scrollContainerRef.current;
- if (container) {
- container.scrollTo({ top: container.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
- }
- }, []);
-
const handleScroll = useCallback(() => {
const container = scrollContainerRef.current;
if (!container) return;
@@ -192,32 +185,6 @@ export const MessageList = memo(function MessageList({
};
}, [handleScroll]);
- useEffect(() => {
- if (messages.length === 0) return;
- const container = scrollContainerRef.current;
- if (!container) return;
-
- // On initial load, jump to bottom instantly (no animation)
- if (isInitialLoadRef.current) {
- isInitialLoadRef.current = false;
- wasNearBottomRef.current = true;
- // Use requestAnimationFrame to wait for virtualizer to layout
- requestAnimationFrame(() => {
- requestAnimationFrame(() => {
- scrollToBottom(false);
- });
- });
- return;
- }
-
- // For new messages: auto-scroll only if user was near bottom
- const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
- if (distanceFromBottom < 150) {
- wasNearBottomRef.current = true;
- requestAnimationFrame(() => scrollToBottom(false));
- }
- }, [messages.length, scrollToBottom]);
-
const virtualizer = useVirtualizer({
count: rows.length,
getScrollElement: () => scrollContainerRef.current,
@@ -231,6 +198,31 @@ export const MessageList = memo(function MessageList({
gap: 0,
});
+ const scrollToBottom = useCallback((smooth = true) => {
+ if (rows.length === 0) return;
+ virtualizer.scrollToIndex(rows.length - 1, { align: 'end', smooth });
+ }, [virtualizer, rows.length]);
+
+ // Ensure scroll-to-bottom fires after virtualizer measures all rows
+ useEffect(() => {
+ if (messages.length === 0) return;
+ if (didInitialLayoutRef.current) return;
+
+ const container = scrollContainerRef.current;
+ if (!container) return;
+
+ // Only fire when virtualizer has a meaningful total size
+ if (virtualizer.getTotalSize() < 10) return;
+
+ didInitialLayoutRef.current = true;
+ wasNearBottomRef.current = true;
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ scrollToBottom(false);
+ });
+ });
+ }, [virtualizer.getTotalSize(), messages.length, scrollToBottom]);
+
const virtualItems = virtualizer.getVirtualItems();
// IntersectionObserver for load more
diff --git a/src/contexts/room-context.tsx b/src/contexts/room-context.tsx
index 8c931e4..a505023 100644
--- a/src/contexts/room-context.tsx
+++ b/src/contexts/room-context.tsx
@@ -98,6 +98,7 @@ function wsMessageToUiMessage(wsMsg: RoomMessagePayload): MessageWithMeta {
display_content: wsMsg.content,
is_streaming: false,
reactions: wsMsg.reactions,
+ thinking_content: wsMsg.thinking_content,
};
}
@@ -157,9 +158,8 @@ interface RoomContextValue {
createRoom: (name: string, isPublic: boolean, categoryId?: string) => Promise;
updateRoom: (roomId: string, name?: string, isPublic?: boolean, categoryId?: string) => Promise;
deleteRoom: (roomId: string) => Promise;
- streamingMessages: Map;
- /** Streaming thinking/reasoning content keyed by message_id */
- streamingThinkingContent: Map;
+ /** Streaming chunks in arrival order per message_id — preserves think/answer interleaving */
+ streamingChunks: Map>;
/** Active AI stream info for typing indicator */
activeAiStream: { message_id: string; display_name: string } | null;
@@ -440,16 +440,15 @@ export function RoomProvider({
- const [streamingContent, setStreamingContent] = useState>(new Map());
- const [streamingThinkingContent, setStreamingThinkingContent] = useState>(new Map());
+ const [streamingChunks, setStreamingChunks] = useState>>(new Map());
const [activeAiStream, setActiveAiStream] = useState<{ message_id: string; display_name: string } | null>(null);
// Streaming timeout: if no chunk received for 60s, force-end the stream
// to prevent UI hanging forever when done=true is never delivered.
const streamingTimersRef = useRef>>(new Map());
- // Ref to latest streamingThinkingContent so done handler can read it (setState is async)
- const streamingThinkingContentRef = useRef>(new Map());
+ // Ref to latest streamingChunks so done handler can read accumulated thinking (setState is async)
+ const streamingChunksRef = useRef>>(new Map());
const clearStreamingTimer = useCallback((msgId: string) => {
const timer = streamingTimersRef.current.get(msgId);
@@ -464,15 +463,11 @@ export function RoomProvider({
const timer = setTimeout(() => {
// Force-end: mark message as not-streaming and keep whatever content we have
setActiveAiStream((prev) => prev?.message_id === msgId ? null : prev);
- setStreamingContent((prev) => {
+ setStreamingChunks((prev) => {
prev.delete(msgId);
return new Map(prev);
});
- setStreamingThinkingContent((prev) => {
- prev.delete(msgId);
- return new Map(prev);
- });
- streamingThinkingContentRef.current.delete(msgId);
+ streamingChunksRef.current.delete(msgId);
setMessages((prev) =>
prev.map((m) =>
m.id === msgId && m.is_streaming
@@ -514,18 +509,20 @@ export function RoomProvider({
const existingIdx = prev.findIndex((m) => m.id === payload.id);
if (existingIdx !== -1) {
// Message already exists (e.g. created by streaming chunk) —
- // merge server-side fields (display_name, reactions) that the
+ // merge server-side fields (display_name, reactions, thinking_content) that the
// chunk didn't have.
const existing = prev[existingIdx];
const needsUpdate =
(!existing.display_name && payload.display_name) ||
- (payload.reactions !== undefined && existing.reactions === undefined);
+ (payload.reactions !== undefined && existing.reactions === undefined) ||
+ (payload.thinking_content && !existing.thinking_content);
if (needsUpdate) {
const updated = [...prev];
updated[existingIdx] = {
...existing,
display_name: payload.display_name ?? existing.display_name,
reactions: payload.reactions ?? existing.reactions,
+ thinking_content: payload.thinking_content ?? existing.thinking_content,
};
return updated;
}
@@ -571,27 +568,32 @@ export function RoomProvider({
clearStreamingTimer(chunk.message_id);
// Set activeAiStream to null since streaming is done
setActiveAiStream(null);
- // Clear streaming content maps
- setStreamingContent((prev) => {
+
+ // Get the ordered chunk list for this message.
+ // Build final content/thinking_content from ordered chunks for persistence.
+ const orderedChunks = streamingChunksRef.current.get(chunk.message_id) ?? [];
+ // For thinking_content: concatenate all thinking chunks in order
+ const thinkingText = orderedChunks
+ .filter(c => c.type === 'thinking')
+ .map(c => c.content)
+ .join('');
+
+ // Clear streaming state
+ setStreamingChunks((prev) => {
prev.delete(chunk.message_id);
return new Map(prev);
});
- setStreamingThinkingContent((prev) => {
- prev.delete(chunk.message_id);
- return new Map(prev);
- });
- // Finalize message: keep thinking_content from accumulator, set content from done chunk
+
+ // Finalize message with ordered content
setMessages((prev) =>
prev.map((m) => {
if (m.id !== chunk.message_id) return m;
- // Get thinking_content from the accumulator before it was cleared
- const tc = streamingThinkingContentRef.current.get(chunk.message_id);
return {
...m,
content: chunk.content,
display_content: chunk.content,
is_streaming: false,
- thinking_content: tc ?? m.thinking_content,
+ thinking_content: thinkingText || m.thinking_content,
chunk_type: chunk.chunk_type,
};
}),
@@ -604,78 +606,36 @@ export function RoomProvider({
setActiveAiStream({ message_id: chunk.message_id, display_name: chunk.display_name });
}
- if (chunk.chunk_type === 'thinking') {
- // Accumulate thinking content separately
- setStreamingThinkingContent((prev) => {
- const next = new Map(prev);
- const prevContent = next.get(chunk.message_id) ?? '';
- const newContent =
- prevContent === '' || !chunk.content.startsWith(prevContent)
- ? chunk.content
- : prevContent + chunk.content.slice(prevContent.length);
- next.set(chunk.message_id, newContent);
- // Sync ref for done handler access
- streamingThinkingContentRef.current = new Map(next);
- return next;
- });
- // Ensure message entry exists (with minimal content to show streaming state)
- setMessages((msgs) => {
- const idx = msgs.findIndex((m) => m.id === chunk.message_id);
- if (idx !== -1) return msgs;
- const newMsg: MessageWithMeta = {
- id: chunk.message_id,
- room: chunk.room_id,
- seq: 0,
- sender_type: 'ai',
- display_name: chunk.display_name,
- content: '',
- display_content: '',
- content_type: 'text',
- send_at: new Date().toISOString(),
- is_streaming: true,
- chunk_type: 'thinking',
- };
- return [...msgs, newMsg];
- });
- } else if (chunk.chunk_type === 'answer') {
- // Accumulate answer content (existing behavior)
- setStreamingContent((prev) => {
- const next = new Map(prev);
- const prevContent = next.get(chunk.message_id) ?? '';
- const newContent =
- prevContent === '' || !chunk.content.startsWith(prevContent)
- ? chunk.content
- : prevContent + chunk.content.slice(prevContent.length);
- next.set(chunk.message_id, newContent);
- setMessages((msgs) => {
- const idx = msgs.findIndex((m) => m.id === chunk.message_id);
- if (idx !== -1) {
- const m = msgs[idx];
- if (m.content === newContent && m.is_streaming === true) return msgs;
- const updated = [...msgs];
- updated[idx] = { ...m, content: newContent, display_content: newContent };
- return updated;
- }
- if (!newContent) return msgs;
- const newMsg: MessageWithMeta = {
- id: chunk.message_id,
- room: chunk.room_id,
- seq: 0,
- sender_type: 'ai',
- display_name: chunk.display_name,
- content: newContent,
- display_content: newContent,
- content_type: 'text',
- send_at: new Date().toISOString(),
- is_streaming: true,
- chunk_type: chunk.chunk_type,
- };
- return [...msgs, newMsg];
- });
- return next;
- });
- }
- // tool_call / tool_result: skip content update entirely — don't pollute display
+ // Append chunk to ordered list — preserves think/answer/tool interleaving.
+ setStreamingChunks((prev) => {
+ const next = new Map(prev);
+ const existing = next.get(chunk.message_id) ?? [];
+ const newChunks = [...existing, { type: chunk.chunk_type ?? 'answer', content: chunk.content }];
+ next.set(chunk.message_id, newChunks);
+ // Sync ref for done handler access
+ streamingChunksRef.current = new Map(next);
+ return next;
+ });
+
+ // Ensure message entry exists (with minimal content to show streaming state)
+ setMessages((msgs) => {
+ const idx = msgs.findIndex((m) => m.id === chunk.message_id);
+ if (idx !== -1) return msgs;
+ const newMsg: MessageWithMeta = {
+ id: chunk.message_id,
+ room: chunk.room_id,
+ seq: 0,
+ sender_type: 'ai',
+ display_name: chunk.display_name,
+ content: '',
+ display_content: '',
+ content_type: 'text',
+ send_at: new Date().toISOString(),
+ is_streaming: true,
+ chunk_type: chunk.chunk_type,
+ };
+ return [...msgs, newMsg];
+ });
}
},
onRoomReactionUpdated: (payload: RoomReactionUpdatedPayload) => {
@@ -1478,8 +1438,7 @@ export function RoomProvider({
createRoom,
updateRoom,
deleteRoom,
- streamingMessages: streamingContent,
- streamingThinkingContent,
+ streamingChunks,
activeAiStream,
projectRepos,
reposLoading,
@@ -1534,8 +1493,7 @@ export function RoomProvider({
createRoom,
updateRoom,
deleteRoom,
- streamingContent,
- streamingThinkingContent,
+ streamingChunks,
activeAiStream,
projectRepos,
reposLoading,