fix(chat-switch): remount ConversationPage per conversation id

This commit is contained in:
byGalax
2026-05-17 14:51:22 +02:00
parent faa12a4ebb
commit 65d2446804
+14 -2
View File
@@ -1,5 +1,5 @@
import { lazy, Suspense } from 'react';
import { HashRouter, Navigate, Outlet, Route, Routes } from 'react-router-dom';
import { HashRouter, Navigate, Outlet, Route, Routes, useParams } from 'react-router-dom';
import { AppShell } from './components/AppShell';
import { CrashToast } from './components/CrashToast';
@@ -60,6 +60,18 @@ function RouteBoundary({ scope }: { scope: string }) {
);
}
// Forces a fresh `ConversationPage` instance per `:id` so React unmounts
// the previous conversation entirely on switch. Without this, the same
// component instance handles every conversation, which leaks state
// between chats (messages, scroll position, composer drafts) for one
// render frame and gives the "flicker" we're trying to remove.
// `useConversationMessages` re-hydrates from `messageMemoryCache` on the
// fresh mount so previously-visited chats still render instantly.
function ConversationRoute() {
const { id } = useParams<{ id: string }>();
return <ConversationPage key={id ?? '__no_id__'} />;
}
export function App() {
return (
<ErrorBoundary scope="root">
@@ -114,7 +126,7 @@ export function App() {
path=":id"
element={
<ErrorBoundary scope="conversation">
<ConversationPage />
<ConversationRoute />
</ErrorBoundary>
}
/>