dave/storkit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

story-kit: merge 178_story_fix_chat_textarea_input_lag

Browse Source
This commit is contained in:
Dave
2026-02-25 11:41:44 +00:00
parent fb29327cea
commit 71691a63ce
5 changed files with 696 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

458
frontend/src/components/Chat.tsx
View File

@@ -5,13 +5,15 @@ import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
import type { PipelineState } from "../api/client"; import type { PipelineState } from "../api/client";
import { api, ChatWebSocket } from "../api/client"; import { api, ChatWebSocket } from "../api/client";
import { useChatHistory } from "../hooks/useChatHistory"; import { useChatHistory } from "../hooks/useChatHistory";
import type { Message, ProviderConfig, ToolCall } from "../types"; import type { Message, ProviderConfig } from "../types";
import { AgentPanel } from "./AgentPanel"; import { AgentPanel } from "./AgentPanel";
import { ChatHeader } from "./ChatHeader"; import { ChatHeader } from "./ChatHeader";
import { ChatInput } from "./ChatInput";
import { LozengeFlyProvider } from "./LozengeFlyContext"; import { LozengeFlyProvider } from "./LozengeFlyContext";
import { MessageItem } from "./MessageItem";
import { StagePanel } from "./StagePanel"; import { StagePanel } from "./StagePanel";
const { useCallback, useEffect, useRef, useState } = React; const { useCallback, useEffect, useMemo, useRef, useState } = React;
/** Fixed-height thinking trace block that auto-scrolls to bottom as text arrives. */ /** Fixed-height thinking trace block that auto-scrolls to bottom as text arrives. */
function ThinkingBlock({ text }: { text: string }) { function ThinkingBlock({ text }: { text: string }) {
@@ -63,6 +65,37 @@ function ThinkingBlock({ text }: { text: string }) {
); );
} }
/** Streaming message renderer — stable component to avoid recreation on each render. */
function StreamingMessage({ content }: { content: string }) {
return (
<Markdown
components={{
// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
code: ({ className, children, ...props }: any) => {
const match = /language-(\w+)/.exec(className || "");
const isInline = !className;
return !isInline && match ? (
<SyntaxHighlighter
// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
style={oneDark as any}
language={match[1]}
PreTag="div"
>
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
>
{content}
</Markdown>
);
}
const NARROW_BREAKPOINT = 900; const NARROW_BREAKPOINT = 900;
function formatToolActivity(toolName: string): string { function formatToolActivity(toolName: string): string {
@@ -100,6 +133,16 @@ function formatToolActivity(toolName: string): string {
} }
} }
const estimateTokens = (text: string): number => Math.ceil(text.length / 4);
const getContextWindowSize = (modelName: string): number => {
if (modelName.startsWith("claude-")) return 200000;
if (modelName.includes("llama3")) return 8192;
if (modelName.includes("qwen2.5")) return 32768;
if (modelName.includes("deepseek")) return 16384;
return 8192;
};
interface ChatProps { interface ChatProps {
projectPath: string; projectPath: string;
onCloseProject: () => void; onCloseProject: () => void;
@@ -107,7 +150,6 @@ interface ChatProps {
export function Chat({ projectPath, onCloseProject }: ChatProps) { export function Chat({ projectPath, onCloseProject }: ChatProps) {
const { messages, setMessages, clearMessages } = useChatHistory(projectPath); const { messages, setMessages, clearMessages } = useChatHistory(projectPath);
const [input, setInput] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [model, setModel] = useState("llama3.1"); const [model, setModel] = useState("llama3.1");
const [enableTools, setEnableTools] = useState(true); const [enableTools, setEnableTools] = useState(true);
@@ -155,30 +197,14 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
const wsRef = useRef<ChatWebSocket | null>(null); const wsRef = useRef<ChatWebSocket | null>(null);
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLTextAreaElement>(null);
const scrollContainerRef = useRef<HTMLDivElement>(null); const scrollContainerRef = useRef<HTMLDivElement>(null);
const shouldAutoScrollRef = useRef(true); const shouldAutoScrollRef = useRef(true);
const lastScrollTopRef = useRef(0); const lastScrollTopRef = useRef(0);
const userScrolledUpRef = useRef(false); const userScrolledUpRef = useRef(false);
const pendingMessageRef = useRef<string>(""); const pendingMessageRef = useRef<string>("");
const estimateTokens = (text: string): number => Math.ceil(text.length / 4); const contextUsage = useMemo(() => {
const getContextWindowSize = (modelName: string): number => {
if (modelName.startsWith("claude-")) return 200000;
if (modelName.includes("llama3")) return 8192;
if (modelName.includes("qwen2.5")) return 32768;
if (modelName.includes("deepseek")) return 16384;
return 8192;
};
const calculateContextUsage = (): {
used: number;
total: number;
percentage: number;
} => {
let totalTokens = 0; let totalTokens = 0;
totalTokens += 200; totalTokens += 200;
for (const msg of messages) { for (const msg of messages) {
@@ -200,9 +226,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
total: contextWindow, total: contextWindow,
percentage, percentage,
}; };
}; }, [messages, streamingContent, model]);
const contextUsage = calculateContextUsage();
useEffect(() => { useEffect(() => {
api api
@@ -371,10 +395,6 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
} }
}, [autoScrollKey, scrollToBottom]); }, [autoScrollKey, scrollToBottom]);
useEffect(() => {
inputRef.current?.focus();
}, []);
// Auto-send queued message when loading ends // Auto-send queued message when loading ends
useEffect(() => { useEffect(() => {
if (pendingAutoSend) { if (pendingAutoSend) {
@@ -415,21 +435,17 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
} }
}; };
const sendMessage = async (messageOverride?: string) => { const sendMessage = async (messageText: string) => {
const messageToSend = messageOverride ?? input; if (!messageText.trim()) return;
if (!messageToSend.trim()) return;
// Agent is busy — queue the message instead of dropping it // Agent is busy — queue the message instead of dropping it
if (loading) { if (loading) {
const newItem = { const newItem = {
id: String(queueIdCounterRef.current++), id: String(queueIdCounterRef.current++),
text: messageToSend, text: messageText,
}; };
queuedMessagesRef.current = [...queuedMessagesRef.current, newItem]; queuedMessagesRef.current = [...queuedMessagesRef.current, newItem];
setQueuedMessages([...queuedMessagesRef.current]); setQueuedMessages([...queuedMessagesRef.current]);
if (!messageOverride || messageOverride === input) {
setInput("");
}
return; return;
} }
@@ -437,19 +453,16 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
if (!isClaudeCode && model.startsWith("claude-")) { if (!isClaudeCode && model.startsWith("claude-")) {
const hasKey = await api.getAnthropicApiKeyExists(); const hasKey = await api.getAnthropicApiKeyExists();
if (!hasKey) { if (!hasKey) {
pendingMessageRef.current = messageToSend; pendingMessageRef.current = messageText;
setShowApiKeyDialog(true); setShowApiKeyDialog(true);
return; return;
} }
} }
const userMsg: Message = { role: "user", content: messageToSend }; const userMsg: Message = { role: "user", content: messageText };
const newHistory = [...messages, userMsg]; const newHistory = [...messages, userMsg];
setMessages(newHistory); setMessages(newHistory);
if (!messageOverride || messageOverride === input) {
setInput("");
}
setLoading(true); setLoading(true);
setStreamingContent(""); setStreamingContent("");
setStreamingThinking(""); setStreamingThinking("");
@@ -536,6 +549,13 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
} }
}; };
const handleRemoveQueuedMessage = useCallback((id: string) => {
queuedMessagesRef.current = queuedMessagesRef.current.filter(
(item) => item.id !== id,
);
setQueuedMessages([...queuedMessagesRef.current]);
}, []);
return ( return (
<div <div
className="chat-container" className="chat-container"
@@ -667,158 +687,10 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
</div> </div>
)} )}
{messages.map((msg: Message, idx: number) => ( {messages.map((msg: Message, idx: number) => (
<div <MessageItem
key={`msg-${idx}-${msg.role}-${msg.content.substring(0, 20)}`} key={`msg-${idx}-${msg.role}-${msg.content.substring(0, 20)}`}
style={{ msg={msg}
display: "flex", />
flexDirection: "column",
alignItems: msg.role === "user" ? "flex-end" : "flex-start",
}}
>
<div
style={{
maxWidth: "100%",
padding: msg.role === "user" ? "10px 16px" : "0",
borderRadius: msg.role === "user" ? "20px" : "0",
background:
msg.role === "user"
? "#2f2f2f"
: msg.role === "tool"
? "#222"
: "transparent",
color: "#ececec",
border: msg.role === "tool" ? "1px solid #333" : "none",
fontFamily: msg.role === "tool" ? "monospace" : "inherit",
fontSize: msg.role === "tool" ? "0.85em" : "1em",
fontWeight: "500",
whiteSpace: msg.role === "tool" ? "pre-wrap" : "normal",
lineHeight: "1.6",
}}
>
{msg.role === "user" ? (
msg.content
) : msg.role === "tool" ? (
<details style={{ cursor: "pointer" }}>
<summary
style={{
color: "#aaa",
fontSize: "0.9em",
marginBottom: "8px",
listStyle: "none",
display: "flex",
alignItems: "center",
gap: "6px",
}}
>
<span style={{ fontSize: "0.8em" }}>▶</span>
<span>
Tool Output
{msg.tool_call_id && ` (${msg.tool_call_id})`}
</span>
</summary>
<pre
style={{
maxHeight: "300px",
overflow: "auto",
margin: 0,
padding: "8px",
background: "#1a1a1a",
borderRadius: "4px",
fontSize: "0.85em",
whiteSpace: "pre-wrap",
wordBreak: "break-word",
}}
>
{msg.content}
</pre>
</details>
) : (
<div className="markdown-body">
<Markdown
components={{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
code: ({ className, children, ...props }: any) => {
const match = /language-(\w+)/.exec(
className || "",
);
const isInline = !className;
return !isInline && match ? (
<SyntaxHighlighter
// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
style={oneDark as any}
language={match[1]}
PreTag="div"
>
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
>
{msg.content}
</Markdown>
</div>
)}
{msg.tool_calls && (
<div
style={{
marginTop: "12px",
fontSize: "0.85em",
color: "#aaa",
display: "flex",
flexDirection: "column",
gap: "8px",
}}
>
{msg.tool_calls.map((tc: ToolCall, i: number) => {
let argsSummary = "";
try {
const args = JSON.parse(tc.function.arguments);
const firstKey = Object.keys(args)[0];
if (firstKey && args[firstKey]) {
argsSummary = String(args[firstKey]);
if (argsSummary.length > 50) {
argsSummary = `${argsSummary.substring(0, 47)}...`;
}
}
} catch (_e) {
// ignore
}
return (
<div
key={`tool-${i}-${tc.function.name}`}
style={{
display: "flex",
alignItems: "center",
gap: "8px",
fontFamily: "monospace",
}}
>
<span style={{ color: "#888" }}>▶</span>
<span
style={{
background: "#333",
padding: "2px 6px",
borderRadius: "4px",
}}
>
{tc.function.name}
{argsSummary && `(${argsSummary})`}
</span>
</div>
);
})}
</div>
)}
</div>
</div>
))} ))}
{loading && streamingThinking && ( {loading && streamingThinking && (
<ThinkingBlock text={streamingThinking} /> <ThinkingBlock text={streamingThinking} />
@@ -847,34 +719,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
}} }}
> >
<div className="markdown-body"> <div className="markdown-body">
<Markdown <StreamingMessage content={streamingContent} />
components={{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
code: ({ className, children, ...props }: any) => {
const match = /language-(\w+)/.exec(
className || "",
);
const isInline = !className;
return !isInline && match ? (
<SyntaxHighlighter
// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
style={oneDark as any}
language={match[1]}
PreTag="div"
>
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
>
{streamingContent}
</Markdown>
</div> </div>
</div> </div>
</div> </div>
@@ -947,176 +792,13 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
)} )}
{/* Chat input pinned at bottom of left column */} {/* Chat input pinned at bottom of left column */}
<div <ChatInput
style={{ loading={loading}
padding: "24px", queuedMessages={queuedMessages}
background: "#171717", onSubmit={sendMessage}
display: "flex", onCancel={cancelGeneration}
justifyContent: "center", onRemoveQueuedMessage={handleRemoveQueuedMessage}
}} />
>
<div
style={{
maxWidth: "768px",
width: "100%",
display: "flex",
flexDirection: "column",
gap: "8px",
}}
>
{/* Queued message indicators */}
{queuedMessages.map(({ id, text }) => (
<div
key={id}
data-testid="queued-message-indicator"
style={{
display: "flex",
alignItems: "center",
gap: "8px",
padding: "8px 12px",
background: "#1e1e1e",
border: "1px solid #3a3a3a",
borderRadius: "12px",
fontSize: "0.875rem",
}}
>
<span
style={{
color: "#666",
flexShrink: 0,
fontSize: "0.7rem",
fontWeight: 700,
letterSpacing: "0.05em",
textTransform: "uppercase",
}}
>
Queued
</span>
<span
style={{
color: "#888",
flex: 1,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{text}
</span>
<button
type="button"
title="Edit queued message"
onClick={() => {
setInput(text);
queuedMessagesRef.current =
queuedMessagesRef.current.filter(
(item) => item.id !== id,
);
setQueuedMessages([...queuedMessagesRef.current]);
inputRef.current?.focus();
}}
style={{
background: "none",
border: "none",
color: "#666",
cursor: "pointer",
padding: "2px 6px",
fontSize: "0.8rem",
flexShrink: 0,
borderRadius: "4px",
}}
>
Edit
</button>
<button
type="button"
title="Cancel queued message"
onClick={() => {
queuedMessagesRef.current =
queuedMessagesRef.current.filter(
(item) => item.id !== id,
);
setQueuedMessages([...queuedMessagesRef.current]);
}}
style={{
background: "none",
border: "none",
color: "#666",
cursor: "pointer",
padding: "2px 4px",
fontSize: "0.875rem",
flexShrink: 0,
borderRadius: "4px",
}}
>
✕
</button>
</div>
))}
{/* Input row */}
<div
style={{
display: "flex",
gap: "8px",
alignItems: "center",
}}
>
<textarea
ref={inputRef}
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
}}
placeholder="Send a message..."
rows={1}
style={{
flex: 1,
padding: "14px 20px",
borderRadius: "24px",
border: "1px solid #333",
outline: "none",
fontSize: "1rem",
fontWeight: "500",
background: "#2f2f2f",
color: "#ececec",
boxShadow: "0 2px 6px rgba(0,0,0,0.02)",
resize: "none",
overflowY: "auto",
fontFamily: "inherit",
}}
/>
<button
type="button"
onClick={
loading && !input.trim()
? cancelGeneration
: () => sendMessage()
}
disabled={!loading && !input.trim()}
style={{
background: "#ececec",
color: "black",
border: "none",
borderRadius: "50%",
width: "32px",
height: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
opacity: !loading && !input.trim() ? 0.5 : 1,
flexShrink: 0,
}}
>
{loading && !input.trim() ? "■" : "↑"}
</button>
</div>
</div>
</div>
</div> </div>
{/* Right column: panels independently scrollable */} {/* Right column: panels independently scrollable */}

202
frontend/src/components/ChatInput.test.tsx Normal file
View File

@@ -0,0 +1,202 @@
import { act, fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { ChatInput } from "./ChatInput";
describe("ChatInput component (Story 178 AC1)", () => {
it("renders a textarea with Send a message... placeholder", () => {
render(
<ChatInput
loading={false}
queuedMessages={[]}
onSubmit={vi.fn()}
onCancel={vi.fn()}
onRemoveQueuedMessage={vi.fn()}
/>,
);
const textarea = screen.getByPlaceholderText("Send a message...");
expect(textarea.tagName.toLowerCase()).toBe("textarea");
});
it("manages input state internally — typing updates value without calling onSubmit", async () => {
const onSubmit = vi.fn();
render(
<ChatInput
loading={false}
queuedMessages={[]}
onSubmit={onSubmit}
onCancel={vi.fn()}
onRemoveQueuedMessage={vi.fn()}
/>,
);
const textarea = screen.getByPlaceholderText("Send a message...");
await act(async () => {
fireEvent.change(textarea, { target: { value: "hello world" } });
});
expect((textarea as HTMLTextAreaElement).value).toBe("hello world");
expect(onSubmit).not.toHaveBeenCalled();
});
it("calls onSubmit with the input text on Enter key press", async () => {
const onSubmit = vi.fn();
render(
<ChatInput
loading={false}
queuedMessages={[]}
onSubmit={onSubmit}
onCancel={vi.fn()}
onRemoveQueuedMessage={vi.fn()}
/>,
);
const textarea = screen.getByPlaceholderText("Send a message...");
await act(async () => {
fireEvent.change(textarea, { target: { value: "test message" } });
});
await act(async () => {
fireEvent.keyDown(textarea, { key: "Enter", shiftKey: false });
});
expect(onSubmit).toHaveBeenCalledWith("test message");
});
it("clears input after submitting", async () => {
render(
<ChatInput
loading={false}
queuedMessages={[]}
onSubmit={vi.fn()}
onCancel={vi.fn()}
onRemoveQueuedMessage={vi.fn()}
/>,
);
const textarea = screen.getByPlaceholderText("Send a message...");
await act(async () => {
fireEvent.change(textarea, { target: { value: "hello" } });
});
await act(async () => {
fireEvent.keyDown(textarea, { key: "Enter", shiftKey: false });
});
expect((textarea as HTMLTextAreaElement).value).toBe("");
});
it("does not submit on Shift+Enter", async () => {
const onSubmit = vi.fn();
render(
<ChatInput
loading={false}
queuedMessages={[]}
onSubmit={onSubmit}
onCancel={vi.fn()}
onRemoveQueuedMessage={vi.fn()}
/>,
);
const textarea = screen.getByPlaceholderText("Send a message...");
await act(async () => {
fireEvent.change(textarea, { target: { value: "multiline" } });
});
await act(async () => {
fireEvent.keyDown(textarea, { key: "Enter", shiftKey: true });
});
expect(onSubmit).not.toHaveBeenCalled();
expect((textarea as HTMLTextAreaElement).value).toBe("multiline");
});
it("calls onCancel when stop button is clicked while loading with empty input", async () => {
const onCancel = vi.fn();
render(
<ChatInput
loading={true}
queuedMessages={[]}
onSubmit={vi.fn()}
onCancel={onCancel}
onRemoveQueuedMessage={vi.fn()}
/>,
);
const stopButton = screen.getByRole("button", { name: "■" });
await act(async () => {
fireEvent.click(stopButton);
});
expect(onCancel).toHaveBeenCalled();
});
it("renders queued message indicators", () => {
render(
<ChatInput
loading={true}
queuedMessages={[
{ id: "1", text: "first message" },
{ id: "2", text: "second message" },
]}
onSubmit={vi.fn()}
onCancel={vi.fn()}
onRemoveQueuedMessage={vi.fn()}
/>,
);
const indicators = screen.getAllByTestId("queued-message-indicator");
expect(indicators).toHaveLength(2);
expect(indicators[0]).toHaveTextContent("first message");
expect(indicators[1]).toHaveTextContent("second message");
});
it("calls onRemoveQueuedMessage when cancel button is clicked", async () => {
const onRemove = vi.fn();
render(
<ChatInput
loading={true}
queuedMessages={[{ id: "q1", text: "to remove" }]}
onSubmit={vi.fn()}
onCancel={vi.fn()}
onRemoveQueuedMessage={onRemove}
/>,
);
const cancelBtn = screen.getByTitle("Cancel queued message");
await act(async () => {
fireEvent.click(cancelBtn);
});
expect(onRemove).toHaveBeenCalledWith("q1");
});
it("edit button restores queued message text to input and removes from queue", async () => {
const onRemove = vi.fn();
render(
<ChatInput
loading={true}
queuedMessages={[{ id: "q1", text: "edit me back" }]}
onSubmit={vi.fn()}
onCancel={vi.fn()}
onRemoveQueuedMessage={onRemove}
/>,
);
const editBtn = screen.getByTitle("Edit queued message");
await act(async () => {
fireEvent.click(editBtn);
});
const textarea = screen.getByPlaceholderText("Send a message...");
expect((textarea as HTMLTextAreaElement).value).toBe("edit me back");
expect(onRemove).toHaveBeenCalledWith("q1");
});
});

191
frontend/src/components/ChatInput.tsx Normal file
View File

@@ -0,0 +1,191 @@
import * as React from "react";
const { useEffect, useRef, useState } = React;
interface ChatInputProps {
loading: boolean;
queuedMessages: { id: string; text: string }[];
onSubmit: (message: string) => void;
onCancel: () => void;
onRemoveQueuedMessage: (id: string) => void;
}
export function ChatInput({
loading,
queuedMessages,
onSubmit,
onCancel,
onRemoveQueuedMessage,
}: ChatInputProps) {
const [input, setInput] = useState("");
const inputRef = useRef<HTMLTextAreaElement>(null);
useEffect(() => {
inputRef.current?.focus();
}, []);
const handleSubmit = () => {
if (!input.trim()) return;
onSubmit(input);
setInput("");
};
return (
<div
style={{
padding: "24px",
background: "#171717",
display: "flex",
justifyContent: "center",
}}
>
<div
style={{
maxWidth: "768px",
width: "100%",
display: "flex",
flexDirection: "column",
gap: "8px",
}}
>
{/* Queued message indicators */}
{queuedMessages.map(({ id, text }) => (
<div
key={id}
data-testid="queued-message-indicator"
style={{
display: "flex",
alignItems: "center",
gap: "8px",
padding: "8px 12px",
background: "#1e1e1e",
border: "1px solid #3a3a3a",
borderRadius: "12px",
fontSize: "0.875rem",
}}
>
<span
style={{
color: "#666",
flexShrink: 0,
fontSize: "0.7rem",
fontWeight: 700,
letterSpacing: "0.05em",
textTransform: "uppercase",
}}
>
Queued
</span>
<span
style={{
color: "#888",
flex: 1,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{text}
</span>
<button
type="button"
title="Edit queued message"
onClick={() => {
setInput(text);
onRemoveQueuedMessage(id);
inputRef.current?.focus();
}}
style={{
background: "none",
border: "none",
color: "#666",
cursor: "pointer",
padding: "2px 6px",
fontSize: "0.8rem",
flexShrink: 0,
borderRadius: "4px",
}}
>
Edit
</button>
<button
type="button"
title="Cancel queued message"
onClick={() => onRemoveQueuedMessage(id)}
style={{
background: "none",
border: "none",
color: "#666",
cursor: "pointer",
padding: "2px 4px",
fontSize: "0.875rem",
flexShrink: 0,
borderRadius: "4px",
}}
>
✕
</button>
</div>
))}
{/* Input row */}
<div
style={{
display: "flex",
gap: "8px",
alignItems: "center",
}}
>
<textarea
ref={inputRef}
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
handleSubmit();
}
}}
placeholder="Send a message..."
rows={1}
style={{
flex: 1,
padding: "14px 20px",
borderRadius: "24px",
border: "1px solid #333",
outline: "none",
fontSize: "1rem",
fontWeight: "500",
background: "#2f2f2f",
color: "#ececec",
boxShadow: "0 2px 6px rgba(0,0,0,0.02)",
resize: "none",
overflowY: "auto",
fontFamily: "inherit",
}}
/>
<button
type="button"
onClick={loading && !input.trim() ? onCancel : handleSubmit}
disabled={!loading && !input.trim()}
style={{
background: "#ececec",
color: "black",
border: "none",
borderRadius: "50%",
width: "32px",
height: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
opacity: !loading && !input.trim() ? 0.5 : 1,
flexShrink: 0,
}}
>
{loading && !input.trim() ? "■" : "↑"}
</button>
</div>
</div>
</div>
);
}

73
frontend/src/components/MessageItem.test.tsx Normal file
View File

@@ -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");
});
});

160
frontend/src/components/MessageItem.tsx Normal file
View File

@@ -0,0 +1,160 @@
import * as React from "react";
import Markdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
import type { Message, ToolCall } from "../types";
// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
function CodeBlock({ className, children, ...props }: any) {
const match = /language-(\w+)/.exec(className || "");
const isInline = !className;
return !isInline && match ? (
<SyntaxHighlighter
// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
style={oneDark as any}
language={match[1]}
PreTag="div"
>
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
}
interface MessageItemProps {
msg: Message;
}
function MessageItemInner({ msg }: MessageItemProps) {
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: msg.role === "user" ? "flex-end" : "flex-start",
}}
>
<div
style={{
maxWidth: "100%",
padding: msg.role === "user" ? "10px 16px" : "0",
borderRadius: msg.role === "user" ? "20px" : "0",
background:
msg.role === "user"
? "#2f2f2f"
: msg.role === "tool"
? "#222"
: "transparent",
color: "#ececec",
border: msg.role === "tool" ? "1px solid #333" : "none",
fontFamily: msg.role === "tool" ? "monospace" : "inherit",
fontSize: msg.role === "tool" ? "0.85em" : "1em",
fontWeight: "500",
whiteSpace: msg.role === "tool" ? "pre-wrap" : "normal",
lineHeight: "1.6",
}}
>
{msg.role === "user" ? (
msg.content
) : msg.role === "tool" ? (
<details style={{ cursor: "pointer" }}>
<summary
style={{
color: "#aaa",
fontSize: "0.9em",
marginBottom: "8px",
listStyle: "none",
display: "flex",
alignItems: "center",
gap: "6px",
}}
>
<span style={{ fontSize: "0.8em" }}>▶</span>
<span>
Tool Output
{msg.tool_call_id && ` (${msg.tool_call_id})`}
</span>
</summary>
<pre
style={{
maxHeight: "300px",
overflow: "auto",
margin: 0,
padding: "8px",
background: "#1a1a1a",
borderRadius: "4px",
fontSize: "0.85em",
whiteSpace: "pre-wrap",
wordBreak: "break-word",
}}
>
{msg.content}
</pre>
</details>
) : (
<div className="markdown-body">
<Markdown components={{ code: CodeBlock }}>{msg.content}</Markdown>
</div>
)}
{msg.tool_calls && (
<div
style={{
marginTop: "12px",
fontSize: "0.85em",
color: "#aaa",
display: "flex",
flexDirection: "column",
gap: "8px",
}}
>
{msg.tool_calls.map((tc: ToolCall, i: number) => {
let argsSummary = "";
try {
const args = JSON.parse(tc.function.arguments);
const firstKey = Object.keys(args)[0];
if (firstKey && args[firstKey]) {
argsSummary = String(args[firstKey]);
if (argsSummary.length > 50) {
argsSummary = `${argsSummary.substring(0, 47)}...`;
}
}
} catch (_e) {
// ignore
}
return (
<div
key={`tool-${i}-${tc.function.name}`}
style={{
display: "flex",
alignItems: "center",
gap: "8px",
fontFamily: "monospace",
}}
>
<span style={{ color: "#888" }}>▶</span>
<span
style={{
background: "#333",
padding: "2px 6px",
borderRadius: "4px",
}}
>
{tc.function.name}
{argsSummary && `(${argsSummary})`}
</span>
</div>
);
})}
</div>
)}
</div>
</div>
);
}
export const MessageItem = React.memo(MessageItemInner);