Feat socket io (#5056)

Co-authored-by: Robert Brennan <[email protected]>
Co-authored-by: Robert Brennan <[email protected]>

frontend/__tests__/components/chat/chat-interface.test.tsx

@@ -6,6 +6,7 @@ import { ChatInterface } from "#/components/chat-interface";
 import { addUserMessage } from "#/state/chat-slice";
 import { SUGGESTIONS } from "#/utils/suggestions";
 import * as ChatSlice from "#/state/chat-slice";
+import { WsClientProviderStatus } from "#/context/ws-client-provider";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const renderChatInterface = (messages: (Message | ErrorMessage)[]) =>
@@ -17,7 +18,7 @@ describe("Empty state", () => {
   }));
 
   const { useWsClient: useWsClientMock } = vi.hoisted(() => ({
-    useWsClient: vi.fn(() => ({ send: sendMock, runtimeActive: true })),
+    useWsClient: vi.fn(() => ({ send: sendMock, status: WsClientProviderStatus.ACTIVE, isLoadingMessages: false })),
   }));
 
   beforeAll(() => {
@@ -83,8 +84,7 @@ describe("Empty state", () => {
     async () => {
       // this is to test that the message is in the UI before the socket is called
       useWsClientMock.mockImplementation(() => ({
-        send: sendMock,
-        runtimeActive: false, // mock an inactive runtime setup
+        send: sendMock, status: WsClientProviderStatus.ACTIVE, isLoadingMessages: false
       }));
       const addUserMessageSpy = vi.spyOn(ChatSlice, "addUserMessage");
       const user = userEvent.setup();
@@ -112,8 +112,7 @@ describe("Empty state", () => {
     "should send the message to the socket only if the runtime is active",
     async () => {
       useWsClientMock.mockImplementation(() => ({
-        send: sendMock,
-        runtimeActive: false, // mock an inactive runtime setup
+        send: sendMock, status: WsClientProviderStatus.ACTIVE, isLoadingMessages: false
       }));
       const user = userEvent.setup();
       const { rerender } = renderWithProviders(<ChatInterface />, {
@@ -122,15 +121,15 @@ describe("Empty state", () => {
         },
       });
 
+
       const suggestions = screen.getByTestId("suggestions");
       const displayedSuggestions = within(suggestions).getAllByRole("button");
 
       await user.click(displayedSuggestions[0]);
       expect(sendMock).not.toHaveBeenCalled();
 
       useWsClientMock.mockImplementation(() => ({
-        send: sendMock,
-        runtimeActive: true, // mock an active runtime setup
+        send: sendMock, status: WsClientProviderStatus.ACTIVE, isLoadingMessages: false
       }));
       rerender(<ChatInterface />);
 
@@ -380,4 +379,4 @@ describe.skip("ChatInterface", () => {
     );
     it.todo("should render the actions once more after new messages are added");
   });
-});
+});

frontend/__tests__/hooks/use-terminal.test.tsx

@@ -4,7 +4,7 @@ import { afterEach } from "node:test";
 import { ReactNode } from "react";
 import { useTerminal } from "#/hooks/use-terminal";
 import { Command } from "#/state/command-slice";
-import { WsClientProvider } from "#/context/ws-client-provider";
+
 
 interface TestTerminalComponentProps {
   commands: Command[];
@@ -25,15 +25,8 @@ interface WrapperProps {
 
 function Wrapper({ children }: WrapperProps) {
   return (
-    <WsClientProvider
-      enabled
-      token="NO_JWT"
-      ghToken="NO_GITHUB"
-      settings={null}
-    >
-      {children}
-    </WsClientProvider>
-  );
+    <div>{children}</div>
+  )
 }
 
 describe("useTerminal", () => {

frontend/package.json

@@ -40,6 +40,7 @@
     "react-textarea-autosize": "^8.5.4",
     "remark-gfm": "^4.0.0",
     "sirv-cli": "^3.0.0",
+    "socket.io-client": "^4.8.1",
     "tailwind-merge": "^2.5.4",
     "vite": "^5.4.9",
     "web-vitals": "^3.5.2",