@butlerw/vellum 0.1.0

package/src/tui/components/Messages/__tests__/MessageBubble.test.tsx

@@ -0,0 +1,268 @@
+/**
+ * MessageBubble Component Tests
+ *
+ * Tests for the MessageBubble component which renders styled message bubbles
+ * with role-specific formatting and alignment.
+ *
+ * @module tui/components/Messages/__tests__/MessageBubble.test
+ */
+
+import { getIcons } from "@vellum/shared";
+import { render } from "ink-testing-library";
+import type React from "react";
+import { describe, expect, it } from "vitest";
+import type { Message } from "../../../context/MessagesContext.js";
+import { ThemeProvider } from "../../../theme/index.js";
+import { MessageBubble } from "../MessageBubble.js";
+
+// Get icons for test assertions
+const icons = getIcons();
+
+// =============================================================================
+// Test Helpers
+// =============================================================================
+
+/**
+ * Wrap component with ThemeProvider for testing.
+ */
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+/**
+ * Create a test message with default values.
+ */
+function createTestMessage(overrides: Partial<Message> = {}): Message {
+  return {
+    id: "test-1",
+    role: "user",
+    content: "Test message content",
+    timestamp: new Date("2025-01-01T12:00:00Z"),
+    ...overrides,
+  };
+}
+
+// =============================================================================
+// Tests
+// =============================================================================
+
+describe("MessageBubble", () => {
+  describe("rendering", () => {
+    it("renders user message content", () => {
+      const message = createTestMessage({
+        role: "user",
+        content: "Hello from user",
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      expect(lastFrame()).toContain("Hello from user");
+      expect(lastFrame()).toContain("You");
+    });
+
+    it("renders assistant message content", () => {
+      const message = createTestMessage({
+        role: "assistant",
+        content: "Hello from assistant",
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      expect(lastFrame()).toContain("Hello from assistant");
+      expect(lastFrame()).toContain("Vellum");
+    });
+
+    it("renders system message content", () => {
+      const message = createTestMessage({
+        role: "system",
+        content: "System notification",
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      expect(lastFrame()).toContain("System notification");
+      expect(lastFrame()).toContain("System");
+    });
+
+    it("renders tool message content", () => {
+      const message = createTestMessage({
+        role: "tool",
+        content: "Tool output",
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      expect(lastFrame()).toContain("Tool output");
+      expect(lastFrame()).toContain("Tool");
+    });
+
+    it("renders empty message placeholder", () => {
+      const message = createTestMessage({
+        content: "",
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      expect(lastFrame()).toContain("(empty)");
+    });
+
+    it("renders streaming indicator", () => {
+      const message = createTestMessage({
+        content: "",
+        isStreaming: true,
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      expect(lastFrame()).toContain("streaming");
+      expect(lastFrame()).toContain("...");
+    });
+  });
+
+  describe("timestamp display", () => {
+    it("does not show timestamp by default", () => {
+      const message = createTestMessage();
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      // Should not contain time format like "12:00"
+      expect(lastFrame()).not.toContain("•");
+    });
+
+    it("shows timestamp when showTimestamp is true", () => {
+      const message = createTestMessage({
+        timestamp: new Date("2025-01-01T14:30:00Z"),
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} showTimestamp />);
+
+      expect(lastFrame()).toContain("•");
+    });
+  });
+
+  describe("avatar display", () => {
+    it("does not show avatar by default", () => {
+      const message = createTestMessage({ role: "user" });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      // User icon should not appear
+      expect(lastFrame()).not.toContain(icons.user);
+    });
+
+    it("shows user avatar when showAvatar is true", () => {
+      const message = createTestMessage({ role: "user" });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} showAvatar />);
+
+      expect(lastFrame()).toContain(icons.user);
+    });
+
+    it("shows assistant avatar when showAvatar is true", () => {
+      const message = createTestMessage({ role: "assistant" });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} showAvatar />);
+
+      expect(lastFrame()).toContain(icons.assistant);
+    });
+
+    it("shows system avatar when showAvatar is true", () => {
+      const message = createTestMessage({ role: "system" });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} showAvatar />);
+
+      expect(lastFrame()).toContain(icons.system);
+    });
+
+    it("shows tool avatar when showAvatar is true", () => {
+      const message = createTestMessage({ role: "tool" });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} showAvatar />);
+
+      expect(lastFrame()).toContain(icons.tool);
+    });
+  });
+
+  describe("compact mode", () => {
+    it("renders in compact mode", () => {
+      const message = createTestMessage({
+        content: "Compact message",
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} compact />);
+
+      expect(lastFrame()).toContain("Compact message");
+    });
+
+    it("renders assistant message in compact mode without extra spacing", () => {
+      const message = createTestMessage({
+        role: "assistant",
+        content: "Compact assistant message",
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} compact />);
+
+      expect(lastFrame()).toContain("Compact assistant message");
+      expect(lastFrame()).toContain("Vellum");
+    });
+  });
+
+  describe("unknown/unhandled roles", () => {
+    it("renders unknown role with fallback label", () => {
+      // tool_group role is not handled by MessageBubble (use ToolGroupItem instead)
+      // This tests the fallback behavior for unrecognized roles
+      const message = createTestMessage({
+        role: "tool_group", // Not handled by MessageBubble
+        content: "Some content",
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      // Shows "Unknown" label for unhandled roles
+      expect(lastFrame()).toContain("Unknown");
+      expect(lastFrame()).toContain("Some content");
+    });
+
+    it("renders unknown role with empty content placeholder", () => {
+      const message = createTestMessage({
+        role: "tool_group",
+        content: "",
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      // Empty content shows placeholder
+      expect(lastFrame()).toContain("(empty)");
+    });
+  });
+
+  describe("combined props", () => {
+    it("renders with all props enabled", () => {
+      const message = createTestMessage({
+        role: "assistant",
+        content: "Full featured message",
+      });
+
+      const { lastFrame } = renderWithTheme(
+        <MessageBubble message={message} showTimestamp showAvatar />
+      );
+
+      expect(lastFrame()).toContain("Full featured message");
+      expect(lastFrame()).toContain(icons.assistant); // Avatar
+      expect(lastFrame()).toContain("Vellum");
+      expect(lastFrame()).toContain("•"); // Timestamp separator
+    });
+
+    it("renders message with thinking content", () => {
+      const message = createTestMessage({
+        role: "assistant",
+        content: "Final response",
+        thinking: "Let me think about this...",
+      });
+
+      const { lastFrame } = renderWithTheme(<MessageBubble message={message} />);
+
+      expect(lastFrame()).toContain("Final response");
+    });
+  });
+});

package/src/tui/components/Messages/__tests__/MessageList.test.tsx

@@ -0,0 +1,324 @@
+/**
+ * MessageList Component Tests (T017)
+ *
+ * Tests for the MessageList component with auto-scroll functionality.
+ */
+
+import { getIcons } from "@vellum/shared";
+import { render } from "ink-testing-library";
+import type React from "react";
+import { describe, expect, it } from "vitest";
+import type { Message } from "../../../context/MessagesContext.js";
+import { ThemeProvider } from "../../../theme/index.js";
+import { MessageList } from "../MessageList.js";
+
+// Get icons for test assertions
+const icons = getIcons();
+
+/**
+ * Wrapper to provide theme context for tests
+ */
+function renderWithTheme(element: React.ReactElement) {
+  return render(<ThemeProvider>{element}</ThemeProvider>);
+}
+
+/**
+ * Create a test message with defaults
+ */
+function createMessage(overrides: Partial<Message> = {}): Message {
+  return {
+    id: `msg-${Math.random().toString(36).slice(2)}`,
+    role: "user",
+    content: "Test message content",
+    timestamp: new Date(),
+    ...overrides,
+  };
+}
+
+describe("MessageList", () => {
+  describe("Rendering", () => {
+    it("should render without crashing with empty messages", () => {
+      const { lastFrame } = renderWithTheme(<MessageList messages={[]} />);
+
+      expect(lastFrame()).toBeDefined();
+      expect(lastFrame()).toContain("No messages yet");
+    });
+
+    it("should render a single message", () => {
+      const messages = [createMessage({ content: "Hello, world!" })];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("Hello, world!");
+      expect(frame).toContain("You"); // User role label
+      expect(frame).toContain(icons.user); // User role icon
+    });
+
+    it("should render multiple messages in order", () => {
+      const messages = [
+        createMessage({ id: "1", content: "First message", role: "user" }),
+        createMessage({ id: "2", content: "Second message", role: "assistant" }),
+        createMessage({ id: "3", content: "Third message", role: "user" }),
+      ];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("First message");
+      expect(frame).toContain("Second message");
+      expect(frame).toContain("Third message");
+    });
+
+    it("should render different role icons correctly", () => {
+      const messages = [
+        createMessage({ role: "user", content: "User msg" }),
+        createMessage({ role: "assistant", content: "Assistant msg" }),
+        createMessage({ role: "system", content: "System msg" }),
+        createMessage({ role: "tool", content: "Tool msg" }),
+      ];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain(icons.user); // user
+      expect(frame).toContain(icons.assistant); // assistant
+      expect(frame).toContain(icons.system); // system
+      expect(frame).toContain(icons.tool); // tool
+    });
+
+    it("should render role labels correctly", () => {
+      const messages = [
+        createMessage({ role: "user" }),
+        createMessage({ role: "assistant" }),
+        createMessage({ role: "system" }),
+        createMessage({ role: "tool" }),
+      ];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("You");
+      expect(frame).toContain("Vellum");
+      expect(frame).toContain("System");
+      expect(frame).toContain("Tool");
+    });
+
+    it("should show streaming indicator when message is streaming", () => {
+      const messages = [createMessage({ content: "Typing...", isStreaming: true })];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("streaming");
+    });
+
+    it("should show placeholder for empty content in non-streaming message", () => {
+      const messages = [createMessage({ content: "", isStreaming: false })];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("(empty)");
+    });
+
+    it("should show ellipsis for empty content in streaming message", () => {
+      const messages = [createMessage({ content: "", isStreaming: true })];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("...");
+    });
+  });
+
+  describe("Tool Group Messages", () => {
+    it("should render tool_group message as inline tool rows", () => {
+      const messages = [
+        createMessage({
+          role: "assistant",
+          content: "Let me read that file",
+        }),
+        createMessage({
+          id: "tool-group-1",
+          role: "tool_group",
+          content: "",
+          toolCalls: [
+            {
+              id: "tc-1",
+              name: "read_file",
+              arguments: { path: "/test.txt" },
+              status: "completed",
+            },
+          ],
+        }),
+      ];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("Let me read that file");
+      expect(frame).toContain("read_file");
+    });
+
+    it("should render tool_group when multiple tool calls present", () => {
+      const messages = [
+        createMessage({
+          role: "assistant",
+          content: "Processing multiple files",
+        }),
+        createMessage({
+          id: "tool-group-1",
+          role: "tool_group",
+          content: "",
+          toolCalls: [
+            {
+              id: "tc-1",
+              name: "read_file",
+              arguments: {},
+              status: "completed",
+            },
+            {
+              id: "tc-2",
+              name: "write_file",
+              arguments: {},
+              status: "running",
+            },
+          ],
+        }),
+      ];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("Processing multiple files");
+      expect(frame).toContain("read_file");
+      expect(frame).toContain("write_file");
+    });
+
+    it("should not render a Tools header for tool_group rows", () => {
+      const messages = [
+        createMessage({
+          id: "tool-group-1",
+          role: "tool_group",
+          content: "",
+          toolCalls: [
+            {
+              id: "tc-1",
+              name: "bash",
+              arguments: { command: "ls" },
+              status: "pending",
+            },
+          ],
+        }),
+      ];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      const frame = lastFrame() ?? "";
+      expect(frame).toContain("bash");
+      expect(frame).not.toContain("Tools");
+    });
+  });
+
+  describe("Auto-Scroll Behavior", () => {
+    it("should have autoScroll enabled by default", () => {
+      const messages = [createMessage()];
+
+      // Just verify the component renders with autoScroll defaulting to true
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      // If autoScroll was false and we scrolled up, we'd see the pause indicator
+      // Since autoScroll defaults to true and we haven't scrolled, no indicator
+      const frame = lastFrame() ?? "";
+      expect(frame).not.toContain("Auto-scroll paused");
+    });
+
+    it("should report being at bottom when all messages are visible", () => {
+      const messages = [createMessage(), createMessage(), createMessage()];
+
+      // Without maxHeight, all messages are visible, so we're always "at bottom"
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      // Should render without scroll indicators since no maxHeight
+      const frame = lastFrame() ?? "";
+      expect(frame).not.toContain("more above");
+      expect(frame).not.toContain("more below");
+    });
+
+    it("should show scroll indicator when messages exceed maxHeight", () => {
+      // Create more messages than maxHeight
+      const messages = Array.from({ length: 10 }, (_, i) =>
+        createMessage({ id: `msg-${i}`, content: `Message ${i}` })
+      );
+
+      const { lastFrame } = renderWithTheme(
+        <MessageList messages={messages} maxHeight={3} autoScroll={false} />
+      );
+
+      const frame = lastFrame() ?? "";
+      // Should show scroll down indicator since we're at top (autoScroll=false)
+      // The component should show some messages but not all
+      expect(frame).toBeDefined();
+    });
+
+    it("should accept autoScroll prop set to false", () => {
+      const messages = [createMessage()];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} autoScroll={false} />);
+
+      expect(lastFrame()).toBeDefined();
+    });
+  });
+
+  describe("Props Validation", () => {
+    it("should handle undefined optional props", () => {
+      const messages = [createMessage()];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      expect(lastFrame()).toBeDefined();
+    });
+
+    it("should handle maxHeight of 0", () => {
+      const messages = [createMessage()];
+
+      // maxHeight of 0 should be treated as "no max height"
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} maxHeight={0} />);
+
+      expect(lastFrame()).toBeDefined();
+    });
+
+    it("should handle empty message content", () => {
+      const messages = [createMessage({ content: "" })];
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      expect(lastFrame()).toBeDefined();
+    });
+  });
+
+  describe("Performance", () => {
+    it("should render many messages without error", () => {
+      const messages = Array.from({ length: 100 }, (_, i) =>
+        createMessage({ id: `msg-${i}`, content: `Message number ${i}` })
+      );
+
+      const { lastFrame } = renderWithTheme(<MessageList messages={messages} />);
+
+      expect(lastFrame()).toBeDefined();
+    });
+
+    it("should handle messages with windowed rendering", () => {
+      const messages = Array.from({ length: 50 }, (_, i) =>
+        createMessage({ id: `msg-${i}`, content: `Message ${i}` })
+      );
+
+      const { lastFrame } = renderWithTheme(
+        <MessageList messages={messages} maxHeight={10} autoScroll={true} />
+      );
+
+      expect(lastFrame()).toBeDefined();
+    });
+  });
+});