Projects

src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx

@@ -1,25 +1,14 @@
-import { useMemo, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'react-router';
-import type { LayoutNode, PanelComponents } from '@/components/Workspace';
-import { WorkspaceLayout } from '@/components/Workspace';
+import { WorkspaceView } from '@/components/Workspace';
+import type { LayoutNode } from '@/components/Workspace';
+import { useWorkspacesState } from 'state/useWorkspacesState';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import { useChatSessions } from 'state/useChatSessions';
-
-import { SessionList } from './Screen';
-import { ChatDetailPanel, type SelectedSession } from './ChatDetailPanel';
+import type { SelectedSession } from 'officerdev';
+import { defaultLayout } from './defaultLayout';
 
 export { ChatHistory as ChatHistoryApp } from './Widget';
-export { SessionList };
-
-const layout: LayoutNode = {
-  type: 'group',
-  id: 'chat-history-root',
-  direction: 'horizontal',
-  children: [
-    { node: { type: 'panel', id: 'chat-list', appType: null }, size: 35 },
-    { node: { type: 'panel', id: 'chat-detail', appType: null }, size: 65 },
-  ],
-};
 
 type SessionListPageProps = {
   isNew?: boolean;
@@ -29,6 +18,7 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
   const { sessionId } = useParams<{ sessionId: string }>();
   const { sessions } = useChatSessions();
   const [, setSelected] = usePanelChannel<SelectedSession>('chat:selected-session', null);
+  const workspace = useWorkspacesState<LayoutNode>('screens/chat', defaultLayout);
 
   useEffect(() => {
     if (isNew) {
@@ -40,17 +30,9 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
     setSelected({ id: sessionId, model: session?.model ?? null });
   }, [sessionId, isNew]);
 
-  const panelComponents: PanelComponents = useMemo(
-    () => ({
-      'chat-list': SessionList,
-      'chat-detail': ChatDetailPanel,
-    }),
-    [],
-  );
-
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
+      <WorkspaceView workspace={workspace} />
     </div>
   );
 };