Chat refactoring

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

@@ -1,11 +1,9 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router';
 import { Trash2 } from 'lucide-react';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import { useChatSessions } from '@/state/useChatSessions';
-import { useVisiblePiModels } from '@/state/useModels';
-import { usePi } from '@/Screens/Dashboard/Chat/usePi';
-import { EmbeddableChat } from '@/Screens/Dashboard/Chat/EmbeddableChat';
+import { usePi, EmbeddableChat } from 'apps/Chat';
 
 export type SelectedSession = {
   id: string;
@@ -66,12 +64,14 @@ type SessionChatProps = {
 };
 
 function SessionChat({ sessionId, model }: SessionChatProps) {
-  const chat = usePi(sessionId, model, { replaceUrl: false });
-  const models = useVisiblePiModels();
   const { sessions, deleteSession } = useChatSessions();
   const [, setSelected] = usePanelChannel<SelectedSession>(CHANNEL, null);
   const sessionTitle = sessions.find((s) => s.id === sessionId)?.title;
 
+  // We need connection status for the DetailBar, so we still call usePi here
+  // TODO: Consider moving DetailBar into EmbeddableChat or exposing status from it
+  const chat = usePi(sessionId, model, { replaceUrl: false });
+
   return (
     <div className="flex flex-col h-full">
       <DetailBar
@@ -84,7 +84,11 @@ function SessionChat({ sessionId, model }: SessionChatProps) {
           window.history.replaceState(null, '', '/chat');
         }}
       />
-      <EmbeddableChat chat={chat} availableModels={models} className="flex-1 min-h-0" />
+      <EmbeddableChat 
+        sessionId={sessionId}
+        initialModel={model ?? undefined}
+        className="flex-1 min-h-0" 
+      />
     </div>
   );
 }
@@ -92,30 +96,25 @@ function SessionChat({ sessionId, model }: SessionChatProps) {
 function NewChat() {
   const location = useLocation();
   const locationState = location.state as ChatLocationState;
-  const initialSentRef = useRef(false);
-  const chat = usePi();
-  const models = useVisiblePiModels();
   const [, setSelected] = usePanelChannel<SelectedSession>(CHANNEL, null);
 
+  // We need connection status for DetailBar, so call usePi
+  const chat = usePi();
+
   useEffect(() => {
     if (chat.sessionId) {
       setSelected({ id: chat.sessionId, model: chat.model });
     }
   }, [chat.sessionId]);
 
-  useEffect(() => {
-    if (!locationState || initialSentRef.current || !chat.isConnected) return;
-    if (locationState.prefillInput) {
-      initialSentRef.current = true;
-      window.history.replaceState({}, '', location.pathname);
-      return;
-    }
-    if (!locationState.initialMessage) return;
-    initialSentRef.current = true;
-    if (locationState.model) chat.setSelectedModel(locationState.model);
-    chat.sendPrompt(locationState.initialMessage, locationState.attachmentIds, locationState.images, locationState.cwd);
-    window.history.replaceState({}, '', location.pathname);
-  }, [chat.isConnected, location.state]);
+  const initialMessage = locationState?.initialMessage
+    ? {
+        text: locationState.initialMessage,
+        attachmentIds: locationState.attachmentIds,
+        images: locationState.images,
+        cwd: locationState.cwd,
+      }
+    : undefined;
 
   return (
     <div className="flex flex-col h-full">
@@ -126,8 +125,9 @@ function NewChat() {
         onDelete={undefined}
       />
       <EmbeddableChat
-        chat={chat}
-        availableModels={models}
+        sessionId={undefined}
+        initialModel={locationState?.model ?? undefined}
+        initialMessage={initialMessage}
         defaultInput={locationState?.prefillInput ?? ''}
         cwd={locationState?.cwd}
         className="flex-1 min-h-0"