Connection status (#864)

* wip: migrate getUser to getBasicStuff query

* refactor: migrate `group_create` to urql/core

* refactor: unify urql usage

* fix: use group.id when creating a thread.

* fix: linter issues.

* wip: add socket counter and refactor sending messages

* refactor: migration sendMessages to quiries and mutations api

* move thread creation thunks to quires and mutations api.

* refactor: migrate model and experts thunks to api

* refactor: migrate cloud tools request to graphql api

* fix(ui): remove thread

* chore: remove unused thunk

* refactor: pause thread thunk

* refactor: migrate tool confirmation thunk to mutations api

* refactor: move subscriptions to a different file from other graphql calls.

* fix: stability checks warnings.

Author: MarcMcIntosh

refact-agent/gui/src/app/middleware.ts

@@ -34,12 +34,9 @@ import {
   threadMessagesSlice,
 } from "../features/ThreadMessages";
 import {
-  createMessage,
-  createThreadWithMessage,
-  createThreadWitMultipleMessages,
+  graphqlQueriesAndMutations,
   rejectToolUsageAction,
-  toolConfirmationThunk,
-} from "../services/graphql/graphqlThunks";
+} from "../services/graphql";
 import { push } from "../features/Pages/pagesSlice";
 
 const AUTH_ERROR_MESSAGE =
@@ -226,10 +223,17 @@ startListening({
     }
 
     // TODO: thread or message error?
+
     if (
-      (createThreadWitMultipleMessages.rejected.match(action) ||
-        createThreadWithMessage.rejected.match(action) ||
-        createMessage.rejected.match(action)) &&
+      (graphqlQueriesAndMutations.endpoints.createThreadWithSingleMessage.matchRejected(
+        action,
+      ) ||
+        graphqlQueriesAndMutations.endpoints.createThreadWitMultipleMessages.matchRejected(
+          action,
+        ) ||
+        graphqlQueriesAndMutations.endpoints.sendMessages.matchRejected(
+          action,
+        )) &&
       !action.meta.aborted &&
       typeof action.payload === "string"
     ) {
@@ -281,25 +285,33 @@ startListening({
 
 startListening({
   matcher: isAnyOf(
-    createMessage.fulfilled,
-    createThreadWithMessage.fulfilled,
-    createThreadWitMultipleMessages.fulfilled,
+    graphqlQueriesAndMutations.endpoints.sendMessages.matchFulfilled,
+    graphqlQueriesAndMutations.endpoints.createThreadWitMultipleMessages
+      .matchFulfilled,
+    graphqlQueriesAndMutations.endpoints.createThreadWithSingleMessage
+      .matchFulfilled,
   ),
   effect: (action, listenerApi) => {
     const state = listenerApi.getState();
     if (
-      createMessage.fulfilled.match(action) &&
-      action.meta.arg.input.ftm_belongs_to_ft_id ===
+      graphqlQueriesAndMutations.endpoints.sendMessages.matchFulfilled(
+        action,
+      ) &&
+      action.meta.arg.originalArgs.input.ftm_belongs_to_ft_id ===
         state.threadMessages.thread?.ft_id
     ) {
       listenerApi.dispatch(resetAttachedImagesSlice());
     } else if (
-      createThreadWithMessage.fulfilled.match(action) &&
+      graphqlQueriesAndMutations.endpoints.createThreadWithSingleMessage.matchFulfilled(
+        action,
+      ) &&
       action.payload.thread_create.ft_id === state.threadMessages.ft_id
     ) {
       listenerApi.dispatch(resetAttachedImagesSlice());
     } else if (
-      createThreadWitMultipleMessages.fulfilled.match(action) &&
+      graphqlQueriesAndMutations.endpoints.createThreadWitMultipleMessages.matchFulfilled(
+        action,
+      ) &&
       action.payload.thread_create.ft_id !== state.threadMessages.ft_id
     ) {
       listenerApi.dispatch(resetAttachedImagesSlice());
@@ -336,9 +348,11 @@ startListening({
 
 // An integration chat was started.
 startListening({
-  actionCreator: createThreadWitMultipleMessages.fulfilled,
+  matcher:
+    graphqlQueriesAndMutations.endpoints.createThreadWitMultipleMessages
+      .matchFulfilled,
   effect: (action, listenerApi) => {
-    if (action.meta.arg.integration) {
+    if (action.meta.arg.originalArgs.integration) {
       listenerApi.dispatch(integrationsApi.util.resetApiState());
       listenerApi.dispatch(clearError());
       listenerApi.dispatch(
@@ -366,10 +380,11 @@ startListening({
     if (!maybePendingToolCall) return;
 
     if (action.payload.accepted) {
-      const thunk = toolConfirmationThunk({
-        ft_id: action.payload.chatId,
-        confirmation_response: JSON.stringify([action.payload.toolCallId]),
-      });
+      const thunk =
+        graphqlQueriesAndMutations.endpoints.toolConfirmation.initiate({
+          ft_id: action.payload.chatId,
+          confirmation_response: JSON.stringify([action.payload.toolCallId]),
+        });
       void listenerApi.dispatch(thunk);
       return;
     }

refact-agent/gui/src/app/store.ts

@@ -52,9 +52,9 @@ import {
   expertsSlice,
   expertsAndModelsMiddleWare,
 } from "../features/ExpertsAndModels";
-import { toolsSlice } from "../features/Tools";
-import { graphqlQueriesAndMutations } from "../services/graphql/graphqlThunks";
+import { graphqlQueriesAndMutations } from "../services/graphql";
 import { groupsSlice } from "../features/Groups";
+import { connectionStatusSlice } from "../features/ConnectionStatus";
 
 const tipOfTheDayPersistConfig = {
   key: "totd",
@@ -109,8 +109,8 @@ const rootReducer = combineSlices(
   threadListSlice,
   threadMessagesSlice,
   expertsSlice,
-  toolsSlice,
   groupsSlice,
+  connectionStatusSlice,
 );
 
 const rootPersistConfig = {

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

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 import { ChatForm, ChatFormProps } from "../ChatForm";
 import { ChatContent } from "../ChatContent";
 import { Flex } from "@radix-ui/themes";
-import { useAppSelector } from "../../hooks";
+import { useAppSelector, useSendMessages } from "../../hooks";
 import { type Config } from "../../features/Config/configSlice";
 
 import { DropzoneProvider } from "../Dropzone";
@@ -28,7 +28,8 @@ export const Chat: React.FC<ChatProps> = ({ style, maybeSendToSidebar }) => {
 
   const [isViewingRawJSON, setIsViewingRawJSON] = useState(false);
   // const isStreaming = useAppSelector(selectIsStreaming);
-  const { sendMessage } = useMessageSubscription();
+  useMessageSubscription();
+  const { sendMessage } = useSendMessages();
   // const totalMessages = useAppSelector(selectTotalMessagesInThread, {
   //   devModeChecks: { stabilityCheck: "never" },
   // });