update/refactor unit tests (#1598)

frontend/src/components/chat/ChatInterface.test.tsx

@@ -21,18 +21,9 @@ const socketSpy = vi.spyOn(Socket, "send");
 // TODO: Move this into test setup
 HTMLElement.prototype.scrollIntoView = vi.fn();
 
-const renderChatInterface = () =>
-  renderWithProviders(<ChatInterface />, {
-    preloadedState: {
-      task: {
-        completed: false,
-      },
-    },
-  });
-
 describe("ChatInterface", () => {
   it("should render the messages and input", () => {
-    renderChatInterface();
+    renderWithProviders(<ChatInterface />);
     expect(screen.queryAllByTestId("message")).toHaveLength(1); // initial welcome message only
   });
 
@@ -80,9 +71,6 @@ describe("ChatInterface", () => {
   it("should send the a start event to the Socket", () => {
     renderWithProviders(<ChatInterface />, {
       preloadedState: {
-        task: {
-          completed: false,
-        },
         agent: {
           curAgentState: AgentState.INIT,
         },
@@ -101,9 +89,6 @@ describe("ChatInterface", () => {
   it("should send the a user message event to the Socket", () => {
     renderWithProviders(<ChatInterface />, {
       preloadedState: {
-        task: {
-          completed: false,
-        },
         agent: {
           curAgentState: AgentState.AWAITING_USER_INPUT,
         },
@@ -125,9 +110,6 @@ describe("ChatInterface", () => {
   it("should disable the user input if agent is not initialized", () => {
     renderWithProviders(<ChatInterface />, {
       preloadedState: {
-        task: {
-          completed: false,
-        },
         agent: {
           curAgentState: AgentState.LOADING,
         },

frontend/src/components/chat/ChatInterface.tsx

@@ -1,18 +1,21 @@
 import React from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { IoMdChatbubbles } from "react-icons/io";
 import ChatInput from "./ChatInput";
 import Chat from "./Chat";
 import { RootState } from "#/store";
 import AgentState from "#/types/AgentState";
 import { sendChatMessage } from "#/services/chatService";
+import { addUserMessage } from "#/state/chatSlice";
 
 function ChatInterface() {
+  const dispatch = useDispatch();
   const { messages } = useSelector((state: RootState) => state.chat);
   const { curAgentState } = useSelector((state: RootState) => state.agent);
 
   const handleSendMessage = (content: string) => {
     const isTask = curAgentState === AgentState.INIT;
+    dispatch(addUserMessage(content));
     sendChatMessage(content, isTask);
   };
 

frontend/src/services/chatService.ts

@@ -6,7 +6,6 @@ import Socket from "./socket";
 import { addUserMessage } from "#/state/chatSlice";
 
 export function sendChatMessage(message: string, isTask: boolean = true): void {
-  store.dispatch(addUserMessage(message));
   let event;
   if (isTask) {
     event = { action: ActionType.START, args: { task: message } };