wip(chatdb): fetch messages for thread.

Author: MarcMcIntosh

refact-agent/gui/src/components/Chat/Chat.tsx

@@ -11,7 +11,7 @@ import {
   useCapsForToolUse,
   useAgentUsage,
 } from "../../hooks";
-import { type Config } from "../../features/Config/configSlice";
+// import { type Config } from "../../features/Config/configSlice";
 import {
   enableSend,
   selectIsStreaming,
@@ -31,19 +31,15 @@ import { Checkpoints } from "../../features/Checkpoints";
 import { SuggestNewChat } from "../ChatForm/SuggestNewChat";
 
 export type ChatProps = {
-  host: Config["host"];
-  tabbed: Config["tabbed"];
-  backFromChat: () => void;
-  style?: React.CSSProperties;
-  unCalledTools: boolean;
-  maybeSendToSidebar: ChatFormProps["onClose"];
+  // host: Config["host"];
+  // tabbed: Config["tabbed"];
+  // backFromChat: () => void;
+  // style?: React.CSSProperties;
+  // unCalledTools: boolean;
+  // maybeSendToSidebar: ChatFormProps["onClose"];
 };
 
-export const Chat: React.FC<ChatProps> = ({
-  style,
-  unCalledTools,
-  maybeSendToSidebar,
-}) => {
+export const Chat: React.FC<ChatProps> = () => {
   const dispatch = useAppDispatch();
 
   const [isViewingRawJSON, setIsViewingRawJSON] = useState(false);
@@ -58,6 +54,17 @@ export const Chat: React.FC<ChatProps> = ({
 
   const threadNewChatSuggested = useAppSelector(selectThreadNewChatSuggested);
   const messages = useAppSelector(selectMessages);
+
+  // can be a selector
+  const unCalledTools = React.useMemo(() => {
+    if (messages.length === 0) return false;
+    const last = messages[messages.length - 1];
+    if (last.role !== "assistant") return false;
+    const maybeTools = last.tool_calls;
+    if (maybeTools && maybeTools.length > 0) return true;
+    return false;
+  }, [messages]);
+
   const capsForToolUse = useCapsForToolUse();
   const { disableInput } = useAgentUsage();
 
@@ -103,22 +110,21 @@ export const Chat: React.FC<ChatProps> = ({
   return (
     <DropzoneProvider asChild>
       <Flex
-        style={style}
         direction="column"
         flexGrow="1"
         width="100%"
         overflowY="auto"
         justify="between"
         px="1"
       >
+        {" "}
+        {/** change messages? */}
         <ChatContent
           key={`chat-content-${chatId}`}
           onRetry={retryFromIndex}
           onStopStreaming={abort}
         />
-
         {shouldCheckpointsPopupBeShown && <Checkpoints />}
-
         <AgentUsage />
         <SuggestNewChat
           shouldBeVisible={
@@ -138,14 +144,11 @@ export const Chat: React.FC<ChatProps> = ({
             </Card>
           </Flex>
         )}
-
         <ChatForm
           key={chatId} // TODO: think of how can we not trigger re-render on chatId change (checkboxes)
           onSubmit={handleSummit}
-          onClose={maybeSendToSidebar}
           unCalledTools={unCalledTools}
         />
-
         <Flex justify="between" pl="1" pr="1" pt="1">
           {/* Two flexboxes are left for the future UI element on the right side */}
           {messages.length > 0 && (

refact-agent/gui/src/components/ChatHistory/ChatHistory.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { memo, useCallback, useEffect, useMemo } from "react";
 import { Flex, Box } from "@radix-ui/themes";
 import { ScrollArea } from "../ScrollArea";
 import { HistoryItem } from "./HistoryItem";
@@ -13,7 +13,6 @@ import {
   chatDbActions,
 } from "../../features/ChatDB/chatDbSlice";
 import { subscribeToThreadsThunk } from "../../services/refact/chatdb";
-import { restoreChat } from "../../features/Chat/Thread/actions";
 import { push } from "../../features/Pages/pagesSlice";
 import { CThread } from "../../services/refact/types";
 
@@ -25,12 +24,21 @@ import { CThread } from "../../services/refact/types";
 //   currentChatId?: string;
 // };
 
-export const ChatHistory: React.FC = () => {
-  // const sortedHistory = getHistory({ history });
+function useGetHistory() {
+  // todo: search
   const dispatch = useAppDispatch();
-  void dispatch(subscribeToThreadsThunk());
-  const history = useAppSelector(chatDbSelectors.getChats);
-  // TODO: should be a request to the lsp, if supported
+  const history = useAppSelector(chatDbSelectors.getChats, {
+    devModeChecks: { stabilityCheck: "never" },
+  });
+  const isLoading = useAppSelector(chatDbSelectors.getLoading);
+
+  useEffect(() => {
+    const thunk = dispatch(subscribeToThreadsThunk());
+    return () => {
+      thunk.abort("unmounted");
+    };
+  }, [dispatch]);
+
   const onDeleteHistoryItem = useCallback(
     (id: string) => {
       dispatch(chatDbActions.deleteCThread(id));
@@ -40,12 +48,22 @@ export const ChatHistory: React.FC = () => {
 
   const onHistoryItemClick = useCallback(
     (thread: CThread) => {
-      dispatch(restoreChat(thread));
-      dispatch(push({ name: "chat" }));
+      dispatch(push({ name: "chat", threadId: thread.cthread_id }));
     },
     [dispatch],
   );
 
+  return {
+    history,
+    isLoading,
+    onHistoryItemClick,
+    onDeleteHistoryItem,
+  };
+}
+
+export const ChatHistory: React.FC = () => {
+  const { history, onHistoryItemClick, onDeleteHistoryItem } = useGetHistory();
+
   return (
     <Box
       style={{

refact-agent/gui/src/components/Sidebar/Sidebar.tsx

@@ -1,13 +1,9 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { Box, Flex } from "@radix-ui/themes";
 import { ChatHistory, type ChatHistoryProps } from "../ChatHistory";
 import { Spinner } from "@radix-ui/themes";
-import { useAppSelector, useAppDispatch } from "../../hooks";
-import { deleteChatById } from "../../features/History/historySlice";
-import { push } from "../../features/Pages/pagesSlice";
-import { restoreChat, type ChatThread } from "../../features/Chat/Thread";
+
 import { FeatureMenu } from "../../features/Config/FeatureMenu";
-import { subscribeToThreadsThunk } from "../../services/refact/chatdb";
 
 export type SidebarProps = {
   takingNotes: boolean;

refact-agent/gui/src/features/App.tsx

@@ -175,13 +175,7 @@ export const InnerApp: React.FC<AppProps> = ({ style }: AppProps) => {
             }}
           />
         )}
-        {page.name === "chat" && (
-          <Chat
-            host={config.host}
-            tabbed={config.tabbed}
-            backFromChat={goBack}
-          />
-        )}
+        {page.name === "chat" && <Chat threadId={page.threadId} />}
         {page.name === "fill in the middle debug page" && (
           <FIMDebug host={config.host} tabbed={config.tabbed} />
         )}

refact-agent/gui/src/features/Chat/Chat.tsx

@@ -1,49 +1,26 @@
-import React from "react";
-import type { Config } from "../Config/configSlice";
+import React, { useEffect } from "react";
+import { v4 as uuid } from "uuid";
 import { Chat as ChatComponent } from "../../components/Chat";
-import { useAppSelector } from "../../hooks";
-import { selectMessages } from "./Thread";
+import { subscribeToThreadMessagesThunk } from "../../services/refact/chatdb";
+import { useAppDispatch } from "../../hooks";
 
 export type ChatProps = {
-  host: Config["host"];
-  tabbed: Config["tabbed"];
-  style?: React.CSSProperties;
-  backFromChat: () => void;
+  threadId?: string;
 };
 
-export const Chat: React.FC<ChatProps> = ({
-  style,
-  backFromChat,
-  host,
-  tabbed,
-}) => {
-  const messages = useAppSelector(selectMessages);
+function useMessagesForThread(threadId: string) {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    const thunk = dispatch(subscribeToThreadMessagesThunk(threadId));
+    return () => {
+      thunk.abort(threadId);
+    };
+  }, [dispatch, threadId]);
+}
 
-  const sendToSideBar = () => {
-    // TODO:
-  };
-
-  const maybeSendToSideBar =
-    host === "vscode" && tabbed ? sendToSideBar : undefined;
-
-  // can be a selector
-  const unCalledTools = React.useMemo(() => {
-    if (messages.length === 0) return false;
-    const last = messages[messages.length - 1];
-    if (last.role !== "assistant") return false;
-    const maybeTools = last.tool_calls;
-    if (maybeTools && maybeTools.length > 0) return true;
-    return false;
-  }, [messages]);
-
-  return (
-    <ChatComponent
-      style={style}
-      host={host}
-      tabbed={tabbed}
-      backFromChat={backFromChat}
-      unCalledTools={unCalledTools}
-      maybeSendToSidebar={maybeSendToSideBar}
-    />
-  );
+export const Chat: React.FC<ChatProps> = (props) => {
+  // TBD: does sqlite have a uuid function?
+  const threadId = props.threadId ?? uuid();
+  useMessagesForThread(threadId);
+  return <ChatComponent key={threadId} />;
 };

refact-agent/gui/src/features/ChatDB/chatDbMessagesSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { CMessage } from "../../services/refact";
+
+type InitialState = {
+  threadId: string;
+  messages: CMessage[];
+  loading: boolean;
+  error: null | string;
+};
+
+const initialState: InitialState = {
+  threadId: "",
+  messages: [],
+  loading: false,
+  error: null,
+};
+
+export const chatDbMessageSlice = createSlice({
+  name: "chatDbMessages",
+  initialState,
+  reducers: {
+    setThreadId: (state, action: PayloadAction<string>) => {
+      state.threadId = action.payload;
+    },
+  },
+});

refact-agent/gui/src/features/ChatDB/chatDbSlice.ts

@@ -13,8 +13,8 @@ const initialState: ChatDbState = {
   chats: {},
 };
 
-export const chatDbSlice = createSlice({
-  name: "chatDb",
+export const chatDbThreadsSlice = createSlice({
+  name: "chatDbThreads",
   initialState,
   reducers: {
     reset: () => initialState,
@@ -46,5 +46,5 @@ export const chatDbSlice = createSlice({
   },
 });
 
-export const chatDbActions = chatDbSlice.actions;
-export const chatDbSelectors = chatDbSlice.selectors;
+export const chatDbActions = chatDbThreadsSlice.actions;
+export const chatDbSelectors = chatDbThreadsSlice.selectors;

refact-agent/gui/src/features/Pages/pagesSlice.ts

@@ -14,6 +14,7 @@ export interface HistoryList {
 
 export interface ChatPage {
   name: "chat";
+  threadId?: string;
 }
 
 export interface FIMDebugPage {