feat(webui): add initial webui with websocket chat flow

2026-04-18 18:51:53 +00:00
parent 6bfb75ed03
commit 9ed3031a42
76 changed files with 7088 additions and 38 deletions
@@ -0,0 +1,43 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { MessageBubble } from "@/components/MessageBubble";
+import type { UIMessage } from "@/lib/types";
+
+describe("MessageBubble", () => {
+  it("renders user messages as right-aligned pills", () => {
+    const message: UIMessage = {
+      id: "u1",
+      role: "user",
+      content: "hello",
+      createdAt: Date.now(),
+    };
+
+    const { container } = render(<MessageBubble message={message} />);
+    const row = container.firstElementChild;
+    const pill = screen.getByText("hello");
+
+    expect(row).toHaveClass("ml-auto", "flex");
+    expect(pill).toHaveClass("ml-auto", "w-fit", "rounded-[18px]");
+  });
+
+  it("renders trace messages as collapsible tool groups", () => {
+    const message: UIMessage = {
+      id: "t1",
+      role: "tool",
+      kind: "trace",
+      content: 'search "hk weather"',
+      traces: ['weather("get")', 'search "hk weather"'],
+      createdAt: Date.now(),
+    };
+
+    render(<MessageBubble message={message} />);
+    const toggle = screen.getByRole("button", { name: /used 2 tools/i });
+
+    expect(screen.getByText('weather("get")')).toBeInTheDocument();
+    expect(screen.getByText('search "hk weather"')).toBeInTheDocument();
+
+    fireEvent.click(toggle);
+    expect(screen.queryByText('weather("get")')).not.toBeInTheDocument();
+  });
+});