Refactor chat components and implement agent service

- Removed the Agent class and integrated its functionality into the new AgentService.
- Added BubbleContainer component for consistent message display.
- Enhanced ChatWindow to manage chat state using MobX and handle AI message processing.
- Introduced ThinkingBubble for loading states and Spinner component for visual feedback.
- Updated ChatMessages to show a prompt when no messages are present and display loading state.
- Implemented ToolResults component to handle and display results from tool calls.
- Improved Textarea component to support disabled state styling.

Author: Dylan Huang

vite-app/src/agent/agent.ts

@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import Button from "./Button";
+import { Tooltip } from "./Tooltip";
+
+interface BubbleContainerProps {
+  role: "user" | "assistant" | "system" | "tool" | "thinking";
+  children: ReactNode;
+  onCopy?: () => void;
+  copySuccess?: boolean;
+  showCopyButton?: boolean;
+}
+
+export const BubbleContainer = ({
+  role,
+  children,
+  onCopy,
+  copySuccess = false,
+  showCopyButton = true,
+}: BubbleContainerProps) => {
+  const isUser = role === "user";
+  const isSystem = role === "system";
+  const isTool = role === "tool";
+  const isAssistant = role === "assistant";
+  const isThinking = role === "thinking";
+
+  const handleCopy = async () => {
+    if (onCopy) {
+      await onCopy();
+    }
+  };
+
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"} mb-1`}>
+      <div
+        className={`max-w-sm lg:max-w-md xl:max-w-lg px-2 py-1 border text-xs relative overflow-scroll ${
+          isUser
+            ? "bg-blue-50 border-blue-200 text-blue-900"
+            : isAssistant
+            ? "bg-gray-50 border-gray-200 text-gray-800"
+            : isSystem
+            ? "bg-gray-50 border-gray-200 text-gray-800"
+            : isTool
+            ? "bg-green-50 border-green-200 text-green-900"
+            : isThinking
+            ? "bg-gray-100 border-gray-200 text-gray-800"
+            : "bg-yellow-50 border-yellow-200 text-yellow-900"
+        }`}
+      >
+        {/* Copy button positioned in top-right corner */}
+        {showCopyButton && onCopy && (
+          <div className="absolute top-1 right-1">
+            <Tooltip
+              content={copySuccess ? "Copied!" : "Copy message to clipboard"}
+              position="top"
+            >
+              <Button
+                onClick={handleCopy}
+                size="sm"
+                variant="secondary"
+                className={`p-0.5 h-5 text-[10px] opacity-60 hover:opacity-100 transition-opacity cursor-pointer ${
+                  isUser
+                    ? "text-blue-600 hover:bg-blue-100"
+                    : isSystem
+                    ? "text-gray-600 hover:bg-gray-100"
+                    : isTool
+                    ? "text-green-600 hover:bg-green-100"
+                    : isThinking
+                    ? "text-gray-600 hover:bg-gray-100"
+                    : "text-yellow-600 hover:bg-yellow-100"
+                }`}
+              >
+                Copy
+              </Button>
+            </Tooltip>
+          </div>
+        )}
+
+        <div className="font-semibold text-xs mb-0.5 capitalize pr-8">
+          {role}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};

vite-app/src/components/BubbleContainer.tsx

@@ -1,12 +1,17 @@
 import { useRef, useEffect } from "react";
 import type { Message } from "../types/eval-protocol";
 import { MessageBubble } from "./MessageBubble";
+import { ThinkingBubble } from "./ThinkingBubble";
 
 interface ChatMessagesProps {
   messages: Message[];
+  isLoading?: boolean;
 }
 
-export const ChatMessages = ({ messages }: ChatMessagesProps) => {
+export const ChatMessages = ({
+  messages,
+  isLoading = false,
+}: ChatMessagesProps) => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const prevMessagesLengthRef = useRef(0);
 
@@ -40,9 +45,25 @@ export const ChatMessages = ({ messages }: ChatMessagesProps) => {
       ref={scrollContainerRef}
       className="flex-1 overflow-y-auto p-3 space-y-2"
     >
-      {messages.map((message, msgIndex) => (
-        <MessageBubble key={msgIndex} message={message} />
-      ))}
+      {messages.length === 0 ? (
+        <div className="flex items-center justify-center h-full text-gray-500">
+          <div className="text-center">
+            <div className="text-lg mb-2">🤖</div>
+            <div className="text-sm">
+              Start a conversation with the AI assistant
+            </div>
+            <div className="text-xs mt-1">
+              Ask about your evaluation data, trends, or insights
+            </div>
+          </div>
+        </div>
+      ) : (
+        messages.map((message, index) => (
+          <MessageBubble key={index} message={message} />
+        ))
+      )}
+
+      {isLoading && <ThinkingBubble />}
     </div>
   );
 };