fix(chat-switch): remount ConversationPage per conversation id
This commit is contained in:
@@ -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>
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user