fix(chat-switch): remount ConversationPage per conversation id
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import { lazy, Suspense } from 'react';
|
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 { AppShell } from './components/AppShell';
|
||||||
import { CrashToast } from './components/CrashToast';
|
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() {
|
export function App() {
|
||||||
return (
|
return (
|
||||||
<ErrorBoundary scope="root">
|
<ErrorBoundary scope="root">
|
||||||
@@ -114,7 +126,7 @@ export function App() {
|
|||||||
path=":id"
|
path=":id"
|
||||||
element={
|
element={
|
||||||
<ErrorBoundary scope="conversation">
|
<ErrorBoundary scope="conversation">
|
||||||
<ConversationPage />
|
<ConversationRoute />
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user