Grayscale/nanobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webui): stabilize live thread rendering and navigation

Browse Source
This commit is contained in:
Xubin Ren
2026-05-13 16:39:07 +00:00
parent 6a4ed255de
commit 5d7f3f2751
14 changed files with 876 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/thread/ThreadShell.tsx
+59 -8
View File
@@ -81,19 +81,33 @@ export function ThreadShell({
const { t } = useTranslation();
const chatId = session?.chatId ?? null;
const historyKey = session?.key ?? null;
const { messages: historical, loading, hasPendingToolCalls } = useSessionHistory(historyKey);
const { modelName, token } = useClient();
const {
messages: historical,
loading,
hasPendingToolCalls,
refresh: refreshHistory,
version: historyVersion,
} = useSessionHistory(historyKey);
const { client, modelName, token } = useClient();
const [booting, setBooting] = useState(false);
const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
const [heroImageMode, setHeroImageMode] = useState(false);
const [scrollToBottomSignal, setScrollToBottomSignal] = useState(0);
const pendingFirstRef = useRef<PendingFirstMessage | null>(null);
const messageCacheRef = useRef<Map<string, UIMessage[]>>(new Map());
const lastCachedChatIdRef = useRef<string | null>(null);
const appliedHistoryVersionRef = useRef<Map<string, number>>(new Map());
const pendingCanonicalHydrateRef = useRef<Set<string>>(new Set());
const initial = useMemo(() => {
if (!chatId) return historical;
return messageCacheRef.current.get(chatId) ?? historical;
}, [chatId, historical]);
const handleTurnEnd = useCallback(() => {
if (chatId) pendingCanonicalHydrateRef.current.add(chatId);
refreshHistory();
onTurnEnd?.();
}, [chatId, onTurnEnd, refreshHistory]);
const {
messages,
isStreaming,
@@ -102,22 +116,48 @@ export function ThreadShell({
setMessages,
streamError,
dismissStreamError,
} = useNanobotStream(chatId, initial, hasPendingToolCalls, onTurnEnd);
} = useNanobotStream(chatId, initial, hasPendingToolCalls, handleTurnEnd);
const showHeroComposer = messages.length === 0 && !loading;
useEffect(() => {
if (!chatId || loading) return;
const cached = messageCacheRef.current.get(chatId);
const appliedVersion = appliedHistoryVersionRef.current.get(chatId) ?? 0;
const hasPendingCanonicalHydrate = pendingCanonicalHydrateRef.current.has(chatId);
const hasNewCanonicalHistory = hasPendingCanonicalHydrate && historyVersion > appliedVersion;
// When the user switches away and back, keep the local in-memory thread
// state (including not-yet-persisted messages) instead of replacing it with
// whatever the history endpoint currently knows about.
// whatever the history endpoint currently knows about. Once a fresh
// canonical replay arrives after turn_end, prefer it so live Markdown/tool
// rendering converges to the same shape as a manual refresh.
setMessages((prev) => {
if (hasNewCanonicalHistory && historical.length > 0) {
pendingCanonicalHydrateRef.current.delete(chatId);
appliedHistoryVersionRef.current.set(chatId, historyVersion);
messageCacheRef.current.set(chatId, historical);
return historical;
}
if (cached && cached.length > 0) return cached;
if (historical.length === 0 && prev.length > 0) return prev;
appliedHistoryVersionRef.current.set(chatId, historyVersion);
return historical;
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loading, chatId, historical]);
}, [loading, chatId, historical, historyVersion]);
useEffect(() => {
if (!chatId) return;
return client.onSessionUpdate((updatedChatId) => {
if (updatedChatId !== chatId) return;
pendingCanonicalHydrateRef.current.add(chatId);
refreshHistory();
});
}, [chatId, client, refreshHistory]);
useEffect(() => {
if (!chatId || loading) return;
setScrollToBottomSignal((value) => value + 1);
}, [chatId, loading, historical]);
useEffect(() => {
if (chatId) return;
@@ -148,6 +188,7 @@ export function ThreadShell({
const pending = pendingFirstRef.current;
if (!pending) return;
pendingFirstRef.current = null;
setScrollToBottomSignal((value) => value + 1);
send(pending.content, pending.images, pending.options);
setBooting(false);
}, [chatId, send]);
@@ -181,18 +222,26 @@ export function ThreadShell({
[booting, onCreateChat],
);
const handleThreadSend = useCallback(
(content: string, images?: SendImage[], options?: SendOptions) => {
setScrollToBottomSignal((value) => value + 1);
send(content, images, options);
},
[send],
);
const handleQuickAction = useCallback(
(prompt: string) => {
const options: SendOptions | undefined = heroImageMode
? { imageGeneration: { enabled: true, aspect_ratio: null } }
: undefined;
if (session) {
send(prompt, undefined, options);
handleThreadSend(prompt, undefined, options);
return;
}
void handleWelcomeSend(prompt, undefined, options);
},
[handleWelcomeSend, heroImageMode, send, session],
[handleThreadSend, handleWelcomeSend, heroImageMode, session],
);
const quickActionItems = heroImageMode ? IMAGE_QUICK_ACTION_KEYS : QUICK_ACTION_KEYS;
@@ -233,7 +282,7 @@ export function ThreadShell({
) : null}
{session ? (
<ThreadComposer
onSend={send}
onSend={handleThreadSend}
disabled={!chatId}
isStreaming={isStreaming}
placeholder={
@@ -296,6 +345,8 @@ export function ThreadShell({
isStreaming={isStreaming}
emptyState={emptyState}
composer={composer}
scrollToBottomSignal={scrollToBottomSignal}
conversationKey={historyKey}
/>
</section>
);
webui/src/components/thread/ThreadViewport.tsx
+79 -10
View File
@@ -1,4 +1,4 @@
import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { ArrowDown } from "lucide-react";
import { useTranslation } from "react-i18next";
@@ -12,6 +12,8 @@ interface ThreadViewportProps {
isStreaming: boolean;
composer: ReactNode;
emptyState?: ReactNode;
scrollToBottomSignal?: number;
conversationKey?: string | null;
}
const NEAR_BOTTOM_PX = 48;
@@ -21,26 +23,92 @@ export function ThreadViewport({
isStreaming,
composer,
emptyState,
scrollToBottomSignal = 0,
conversationKey = null,
}: ThreadViewportProps) {
const { t } = useTranslation();
const scrollRef = useRef<HTMLDivElement>(null);
const contentRef = useRef<HTMLDivElement>(null);
const bottomRef = useRef<HTMLDivElement>(null);
const lastConversationKeyRef = useRef<string | null>(conversationKey);
const pendingConversationScrollRef = useRef(true);
const scrollFrameIdsRef = useRef<number[]>([]);
const forceBottomUntilRef = useRef(0);
const [atBottom, setAtBottom] = useState(true);
const hasMessages = messages.length > 0;
const scrollToBottom = useCallback((smooth = false) => {
const el = scrollRef.current;
if (!el) return;
el.scrollTo({
top: el.scrollHeight,
behavior: smooth ? "smooth" : "auto",
});
const cancelScheduledBottomScroll = useCallback(() => {
for (const id of scrollFrameIdsRef.current) {
window.cancelAnimationFrame(id);
}
scrollFrameIdsRef.current = [];
}, []);
const scrollToBottomNow = useCallback((smooth = false) => {
const el = scrollRef.current;
const marker = bottomRef.current;
const behavior: ScrollBehavior = smooth ? "smooth" : "auto";
if (marker) {
marker.scrollIntoView({ block: "end", behavior });
} else if (el) {
el.scrollTo({ top: el.scrollHeight, behavior });
}
setAtBottom(true);
}, []);
const scrollToBottom = useCallback((smooth = false, frames = 1) => {
cancelScheduledBottomScroll();
scrollToBottomNow(smooth);
for (let i = 1; i < frames; i += 1) {
const id = window.requestAnimationFrame(() => scrollToBottomNow(smooth));
scrollFrameIdsRef.current.push(id);
}
}, [cancelScheduledBottomScroll, scrollToBottomNow]);
useEffect(() => {
if (!atBottom) return;
scrollToBottom(!isStreaming);
}, [messages, isStreaming, atBottom, scrollToBottom]);
useEffect(() => {
if (scrollToBottomSignal <= 0) return;
forceBottomUntilRef.current = Date.now() + 2_000;
scrollToBottom(true, 8);
}, [scrollToBottomSignal, scrollToBottom]);
useLayoutEffect(() => {
if (lastConversationKeyRef.current === conversationKey) return;
lastConversationKeyRef.current = conversationKey;
pendingConversationScrollRef.current = true;
forceBottomUntilRef.current = Date.now() + 2_000;
setAtBottom(true);
}, [conversationKey]);
useLayoutEffect(() => {
if (!pendingConversationScrollRef.current) return;
if (!conversationKey) {
pendingConversationScrollRef.current = false;
scrollToBottom(false, 4);
return;
}
scrollToBottom(false, 8);
if (!hasMessages) return;
pendingConversationScrollRef.current = false;
}, [conversationKey, hasMessages, messages, scrollToBottom]);
useEffect(() => cancelScheduledBottomScroll, [cancelScheduledBottomScroll]);
useEffect(() => {
const target = contentRef.current;
if (!target || typeof ResizeObserver === "undefined") return;
const observer = new ResizeObserver(() => {
if (!atBottom && Date.now() > forceBottomUntilRef.current) return;
scrollToBottom(false, 4);
});
observer.observe(target);
return () => observer.disconnect();
}, [atBottom, hasMessages, scrollToBottom]);
useEffect(() => {
const el = scrollRef.current;
if (!el) return;
@@ -68,7 +136,7 @@ export function ThreadViewport({
)}
>
{hasMessages ? (
<div className="mx-auto flex min-h-full w-full max-w-[64rem] flex-col">
<div ref={contentRef} className="mx-auto flex min-h-full w-full max-w-[64rem] flex-col">
<div className="flex-1 px-4 pb-20 pt-4">
<div className="mx-auto w-full max-w-[49.5rem]">
<ThreadMessages messages={messages} />
@@ -82,7 +150,7 @@ export function ThreadViewport({
</div>
</div>
) : (
<div className="mx-auto flex min-h-full w-full max-w-[72rem] flex-col px-4">
<div ref={contentRef} className="mx-auto flex min-h-full w-full max-w-[72rem] flex-col px-4">
<div className="flex w-full flex-1 items-center justify-center pb-[7vh] pt-8">
<div className="flex w-full max-w-[58rem] flex-col gap-6">
{emptyState}
@@ -91,6 +159,7 @@ export function ThreadViewport({
</div>
</div>
)}
<div ref={bottomRef} aria-hidden className="h-px" />
</div>
<div