(refactor|test)(frontend): chat

frontend/src/App.tsx

@@ -2,7 +2,7 @@ import { useDisclosure } from "@nextui-org/react";
 import React, { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 import CogTooth from "#/assets/cog-tooth";
-import ChatInterface from "#/components/ChatInterface";
+import ChatInterface from "#/components/chat/ChatInterface";
 import Errors from "#/components/Errors";
 import { Container, Orientation } from "#/components/Resizable";
 import Workspace from "#/components/Workspace";

frontend/src/components/AgentControlBar.tsx

@@ -6,10 +6,10 @@ import PauseIcon from "#/assets/pause";
 import PlayIcon from "#/assets/play";
 import { changeTaskState } from "#/services/agentStateService";
 import { clearMsgs } from "#/services/session";
-import { clearMessages } from "#/state/chatSlice";
 import store, { RootState } from "#/store";
 import AgentTaskAction from "#/types/AgentTaskAction";
 import AgentTaskState from "#/types/AgentTaskState";
+import { clearMessages } from "#/state/chatSlice";
 
 const TaskStateActionMap = {
   [AgentTaskAction.START]: AgentTaskState.RUNNING,

frontend/src/components/ChatInput.tsx

@@ -42,7 +42,7 @@ function ChatInput({ disabled, onSendMessage }: ChatInputProps) {
         onCompositionStart={() => setIsComposing(true)}
         onCompositionEnd={() => setIsComposing(false)}
         placeholder={t(I18nKey.CHAT_INTERFACE$INPUT_PLACEHOLDER)}
-        className="pt-2 pb-3 px-3"
+        className="pb-3 px-3"
         classNames={{
           inputWrapper: "bg-neutral-700 border border-neutral-600 rounded-lg",
           input: "pr-16 text-neutral-400",

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { act, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import Chat from "./Chat";
+
+const MESSAGES: Message[] = [
+  { sender: "assistant", content: "Hello!" },
+  { sender: "user", content: "Hi!" },
+  { sender: "assistant", content: "How can I help you today?" },
+];
+
+HTMLElement.prototype.scrollIntoView = vi.fn();
+
+describe("Chat", () => {
+  it("should render chat messages", () => {
+    render(<Chat messages={MESSAGES} />);
+
+    const messages = screen.getAllByTestId("message");
+
+    expect(messages).toHaveLength(MESSAGES.length);
+  });
+
+  it("should scroll to the newest message", () => {
+    const { rerender } = render(<Chat messages={MESSAGES} />);
+
+    const newMessages: Message[] = [
+      ...MESSAGES,
+      { sender: "user", content: "Create a spaceship" },
+    ];
+
+    act(() => {
+      rerender(<Chat messages={newMessages} />);
+    });
+
+    expect(HTMLElement.prototype.scrollIntoView).toHaveBeenCalled();
+  });
+});

frontend/src/components/chat/Chat.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import ChatMessage from "./ChatMessage";
+
+interface ChatProps {
+  messages: Message[];
+}
+
+function Chat({ messages }: ChatProps) {
+  const endOfMessagesRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    endOfMessagesRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      {messages.map((message, index) => (
+        <ChatMessage key={index} message={message} />
+      ))}
+      <div ref={endOfMessagesRef} />
+    </div>
+  );
+}
+
+export default Chat;

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

@@ -0,0 +1,91 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { act } from "react-dom/test-utils";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "test-utils";
+import ChatInterface from "./ChatInterface";
+import Socket from "#/services/socket";
+import ActionType from "#/types/ActionType";
+import { addAssistantMessage } from "#/state/chatSlice";
+import AgentTaskState from "#/types/AgentTaskState";
+import { changeTaskState } from "#/state/agentSlice";
+
+// avoid typing side-effect
+vi.mock("#/hooks/useTyping", () => ({
+  useTyping: vi.fn((text: string) => text),
+}));
+
+const socketSpy = vi.spyOn(Socket, "send");
+
+// This is for the scrollview ref in Chat.tsx
+// TODO: Move this into test setup
+HTMLElement.prototype.scrollIntoView = vi.fn();
+
+describe("ChatInterface", () => {
+  it("should render the messages and input", () => {
+    renderWithProviders(<ChatInterface />);
+    expect(screen.queryAllByTestId("message")).toHaveLength(1); // initial welcome message only
+  });
+
+  it("should render the new message the user has typed", async () => {
+    renderWithProviders(<ChatInterface />);
+
+    const input = screen.getByRole("textbox");
+
+    act(() => {
+      userEvent.type(input, "my message{enter}");
+    });
+
+    expect(screen.getByText("my message")).toBeInTheDocument();
+  });
+
+  it("should render user and assistant messages", () => {
+    const { store } = renderWithProviders(<ChatInterface />, {
+      preloadedState: {
+        chat: {
+          messages: [{ sender: "user", content: "Hello" }],
+        },
+      },
+    });
+
+    expect(screen.getAllByTestId("message")).toHaveLength(1);
+    expect(screen.getByText("Hello")).toBeInTheDocument();
+
+    act(() => {
+      store.dispatch(addAssistantMessage("Hello to you!"));
+    });
+
+    expect(screen.getAllByTestId("message")).toHaveLength(2);
+    expect(screen.getByText("Hello to you!")).toBeInTheDocument();
+  });
+
+  it("should send the a user message event to the Socket", () => {
+    renderWithProviders(<ChatInterface />);
+    const input = screen.getByRole("textbox");
+    act(() => {
+      userEvent.type(input, "my message{enter}");
+    });
+
+    const event = { action: ActionType.START, args: { task: "my message" } };
+    expect(socketSpy).toHaveBeenCalledWith(JSON.stringify(event));
+  });
+
+  it("should display a typing indicator when waiting for assistant response", () => {
+    const { store } = renderWithProviders(<ChatInterface />, {
+      preloadedState: {
+        chat: {
+          messages: [{ sender: "assistant", content: "Hello" }],
+        },
+      },
+    });
+
+    expect(screen.queryByTestId("typing")).not.toBeInTheDocument();
+
+    act(() => {
+      store.dispatch(changeTaskState(AgentTaskState.RUNNING));
+    });
+
+    expect(screen.getByTestId("typing")).toBeInTheDocument();
+  });
+});

frontend/src/components/chat/ChatInterface.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+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 AgentTaskState from "#/types/AgentTaskState";
+import { addUserMessage } from "#/state/chatSlice";
+import ActionType from "#/types/ActionType";
+import Socket from "#/services/socket";
+
+function ActionBanner() {
+  return (
+    <div
+      data-testid="typing"
+      className="flex items-center justify-center gap-2 bg-neutral-700 border-y border-neutral-500 py-1.5 px-4"
+    >
+      <div className="flex h-5 w-5 items-center justify-center" />
+      <p className="text-sm text-gray-200 dark:text-gray-200">Working...</p>
+    </div>
+  );
+}
+
+function ChatInterface() {
+  const { messages } = useSelector((state: RootState) => state.chat);
+  const { curTaskState } = useSelector((state: RootState) => state.agent);
+
+  const dispatch = useDispatch();
+
+  const handleSendMessage = (content: string) => {
+    dispatch(addUserMessage(content));
+
+    let event;
+    if (curTaskState === AgentTaskState.INIT) {
+      event = { action: ActionType.START, args: { task: content } };
+    } else {
+      event = { action: ActionType.USER_MESSAGE, args: { content } };
+    }
+
+    Socket.send(JSON.stringify(event));
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-neutral-800">
+      <div className="flex items-center gap-2 border-b border-neutral-600 text-sm px-4 py-2">
+        <IoMdChatbubbles />
+        Chat
+      </div>
+      <div className="flex-1 flex flex-col relative min-h-0">
+        <div className="overflow-x-auto p-3">
+          <Chat messages={messages} />
+        </div>
+        {curTaskState === AgentTaskState.RUNNING && <ActionBanner />}
+        {/* Fade between messages and input */}
+        <div className="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-b from-transparent to-neutral-800" />
+      </div>
+      <ChatInput onSendMessage={handleSendMessage} />
+    </div>
+  );
+}
+
+export default ChatInterface;