story-kit: merge 178_story_fix_chat_textarea_input_lag

frontend/src/components/MessageItem.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { MessageItem } from "./MessageItem";
+
+describe("MessageItem component (Story 178 AC3)", () => {
+	it("renders user message as a bubble", () => {
+		render(<MessageItem msg={{ role: "user", content: "Hello there!" }} />);
+
+		expect(screen.getByText("Hello there!")).toBeInTheDocument();
+	});
+
+	it("renders assistant message with markdown-body class", () => {
+		render(
+			<MessageItem
+				msg={{ role: "assistant", content: "Here is my response." }}
+			/>,
+		);
+
+		expect(screen.getByText("Here is my response.")).toBeInTheDocument();
+		const text = screen.getByText("Here is my response.");
+		expect(text.closest(".markdown-body")).toBeTruthy();
+	});
+
+	it("renders tool message as collapsible details", () => {
+		render(
+			<MessageItem
+				msg={{
+					role: "tool",
+					content: "tool output content",
+					tool_call_id: "toolu_1",
+				}}
+			/>,
+		);
+
+		expect(screen.getByText(/Tool Output/)).toBeInTheDocument();
+	});
+
+	it("renders tool call badges for assistant messages with tool_calls", () => {
+		render(
+			<MessageItem
+				msg={{
+					role: "assistant",
+					content: "I will read the file.",
+					tool_calls: [
+						{
+							id: "toolu_1",
+							type: "function",
+							function: {
+								name: "Read",
+								arguments: '{"file_path":"src/main.rs"}',
+							},
+						},
+					],
+				}}
+			/>,
+		);
+
+		expect(screen.getByText("I will read the file.")).toBeInTheDocument();
+		expect(screen.getByText("Read(src/main.rs)")).toBeInTheDocument();
+	});
+
+	it("is wrapped in React.memo (has displayName or $$typeof memo)", () => {
+		// React.memo wraps the component — verify the export is memoized
+		// by checking that the component has a memo wrapper
+		const { type } = { type: MessageItem };
+		// React.memo returns an object with $$typeof === Symbol(react.memo)
+		// biome-ignore lint/suspicious/noExplicitAny: checking React internals for test
+		expect((type as any).$$typeof).toBeDefined();
+		// biome-ignore lint/suspicious/noExplicitAny: checking React internals for test
+		const typeofStr = String((type as any).$$typeof);
+		expect(typeofStr).toContain("memo");
+	});
+});