style: normalize formatting (tabs) in ChatStream tests + index.css from review pass
This commit is contained in:
+66
-31
@@ -63,10 +63,7 @@ function stream(p: {
|
||||
describe("Bubble", () => {
|
||||
it("renders plain text per role class", () => {
|
||||
const { container } = render(
|
||||
<Bubble
|
||||
msg={msg({ role: "user", text: "hi there" })}
|
||||
tools={new Map()}
|
||||
/>,
|
||||
<Bubble msg={msg({ role: "user", text: "hi there" })} tools={new Map()} />,
|
||||
);
|
||||
expect(container.querySelector(".bubble-row.user")).not.toBeNull();
|
||||
expect(container.textContent).toContain("hi there");
|
||||
@@ -94,10 +91,7 @@ describe("Bubble", () => {
|
||||
it("toolResult collapses to a one-line preview, expands to full text", async () => {
|
||||
const long = `${"x".repeat(200)}`;
|
||||
render(
|
||||
<Bubble
|
||||
msg={msg({ role: "toolResult", text: long })}
|
||||
tools={new Map()}
|
||||
/>,
|
||||
<Bubble msg={msg({ role: "toolResult", text: long })} tools={new Map()} />,
|
||||
);
|
||||
const details = screen
|
||||
.getByText("result")
|
||||
@@ -160,9 +154,7 @@ describe("Bubble", () => {
|
||||
expect(screen.getByText("🛠 bash")).toBeInTheDocument();
|
||||
expect(screen.getByText("finished")).toBeInTheDocument();
|
||||
|
||||
const summary = screen
|
||||
.getByText("🛠 bash")
|
||||
.closest("summary") as HTMLElement;
|
||||
const summary = screen.getByText("🛠 bash").closest("summary") as HTMLElement;
|
||||
const card = summary.closest("details") as HTMLDetailsElement;
|
||||
expect(card.open).toBe(false);
|
||||
await userEvent.click(summary);
|
||||
@@ -256,9 +248,7 @@ describe("ChatStream", () => {
|
||||
}),
|
||||
);
|
||||
expect(container.querySelector(".typing")).toBeNull();
|
||||
rerender(
|
||||
stream({ messages: [msg({ key: "a", text: "one" })], busy: false }),
|
||||
);
|
||||
rerender(stream({ messages: [msg({ key: "a", text: "one" })], busy: false }));
|
||||
expect(container.querySelector(".typing")).toBeNull();
|
||||
});
|
||||
|
||||
@@ -767,15 +757,34 @@ describe("copy button", () => {
|
||||
|
||||
describe("pretty tool args", () => {
|
||||
const tool = (args: string): ToolState => ({
|
||||
id: "t1", name: "bash", args, running: false, isError: false, preview: "out",
|
||||
id: "t1",
|
||||
name: "bash",
|
||||
args,
|
||||
running: false,
|
||||
isError: false,
|
||||
preview: "out",
|
||||
});
|
||||
|
||||
it("bash command renders as the bare command, no JSON braces", () => {
|
||||
render(<Bubble msg={{ key: "k", role: "assistant", text: "", thinking: null,
|
||||
toolCalls: [{ id: "t1", name: "bash", argsJson: "{}" }], toolCallId: null, streaming: false, ts: 0 }}
|
||||
tools={new Map([["t1", tool('{"command":"ls -la","foo":1}')]])} />);
|
||||
render(
|
||||
<Bubble
|
||||
msg={{
|
||||
key: "k",
|
||||
role: "assistant",
|
||||
text: "",
|
||||
thinking: null,
|
||||
toolCalls: [{ id: "t1", name: "bash", argsJson: "{}" }],
|
||||
toolCallId: null,
|
||||
streaming: false,
|
||||
ts: 0,
|
||||
}}
|
||||
tools={new Map([["t1", tool('{"command":"ls -la","foo":1}')]])}
|
||||
/>,
|
||||
);
|
||||
expect(document.querySelector(".tool-summary")?.textContent).toBe("ls -la");
|
||||
expect(document.querySelector(".tool-args")?.textContent).not.toContain('"command"');
|
||||
expect(document.querySelector(".tool-args")?.textContent).not.toContain(
|
||||
'"command"',
|
||||
);
|
||||
});
|
||||
|
||||
it("priority ordering puts command first even when not first in JSON", () => {
|
||||
@@ -785,10 +794,24 @@ describe("pretty tool args", () => {
|
||||
});
|
||||
|
||||
it("single string arg renders label-less; multi-field keeps labels", () => {
|
||||
render(<Bubble msg={{ key: "k", role: "assistant", text: "", thinking: null,
|
||||
toolCalls: [{ id: "t1", name: "read", argsJson: "{}" }], toolCallId: null, streaming: false, ts: 0 }}
|
||||
tools={new Map([["t1", tool('{"path":"src/main.ts"}')]])} />);
|
||||
expect(document.querySelector(".tool-summary")?.textContent).toBe("src/main.ts");
|
||||
render(
|
||||
<Bubble
|
||||
msg={{
|
||||
key: "k",
|
||||
role: "assistant",
|
||||
text: "",
|
||||
thinking: null,
|
||||
toolCalls: [{ id: "t1", name: "read", argsJson: "{}" }],
|
||||
toolCallId: null,
|
||||
streaming: false,
|
||||
ts: 0,
|
||||
}}
|
||||
tools={new Map([["t1", tool('{"path":"src/main.ts"}')]])}
|
||||
/>,
|
||||
);
|
||||
expect(document.querySelector(".tool-summary")?.textContent).toBe(
|
||||
"src/main.ts",
|
||||
);
|
||||
expect(document.querySelector(".tool-args .arg-k")).toBeNull();
|
||||
});
|
||||
|
||||
@@ -839,7 +862,9 @@ describe("tool summary + diff", () => {
|
||||
tools={new Map([["t1", tool('{"path":"src/main.ts"}', "read")]])}
|
||||
/>,
|
||||
);
|
||||
expect(document.querySelector(".tool-summary")?.textContent).toBe("src/main.ts");
|
||||
expect(document.querySelector(".tool-summary")?.textContent).toBe(
|
||||
"src/main.ts",
|
||||
);
|
||||
});
|
||||
|
||||
it("long summary is truncated with ellipsis", () => {
|
||||
@@ -863,7 +888,8 @@ describe("tool summary + diff", () => {
|
||||
msg={msg({
|
||||
toolCalls: [{ id: "t1", name: "edit", argsJson: "{}" }],
|
||||
})}
|
||||
tools={new Map([
|
||||
tools={
|
||||
new Map([
|
||||
[
|
||||
"t1",
|
||||
tool(
|
||||
@@ -871,12 +897,19 @@ describe("tool summary + diff", () => {
|
||||
"edit",
|
||||
),
|
||||
],
|
||||
])}
|
||||
])
|
||||
}
|
||||
/>,
|
||||
);
|
||||
expect(document.querySelector(".diff-del")?.textContent).toContain("-const a = 1;");
|
||||
expect(document.querySelector(".diff-add")?.textContent).toContain("+const a = 3;");
|
||||
expect(document.querySelector(".diff-ctx")?.textContent).toContain(" const b = 2;");
|
||||
expect(document.querySelector(".diff-del")?.textContent).toContain(
|
||||
"-const a = 1;",
|
||||
);
|
||||
expect(document.querySelector(".diff-add")?.textContent).toContain(
|
||||
"+const a = 3;",
|
||||
);
|
||||
expect(document.querySelector(".diff-ctx")?.textContent).toContain(
|
||||
" const b = 2;",
|
||||
);
|
||||
expect(document.querySelector(".tool-args")).toBeNull();
|
||||
});
|
||||
|
||||
@@ -886,9 +919,11 @@ describe("tool summary + diff", () => {
|
||||
msg={msg({
|
||||
toolCalls: [{ id: "t1", name: "write", argsJson: "{}" }],
|
||||
})}
|
||||
tools={new Map([
|
||||
tools={
|
||||
new Map([
|
||||
["t1", tool('{"path":"new.ts","content":"hello\\nworld"}', "write")],
|
||||
])}
|
||||
])
|
||||
}
|
||||
/>,
|
||||
);
|
||||
const adds = document.querySelectorAll(".diff-add");
|
||||
|
||||
+18
-6
@@ -25,8 +25,7 @@
|
||||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||
--shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45);
|
||||
font-family:
|
||||
ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter,
|
||||
sans-serif;
|
||||
ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -1455,14 +1454,27 @@ mark.hit {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@keyframes busy-pulse {
|
||||
0%, 100% { transform: scale(0.55); opacity: 0.45; box-shadow: 0 0 0 0 rgba(108, 140, 255, 0.5); }
|
||||
50% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 5px rgba(108, 140, 255, 0); }
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0.55);
|
||||
opacity: 0.45;
|
||||
box-shadow: 0 0 0 0 rgba(108, 140, 255, 0.5);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 5px rgba(108, 140, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- pretty tool args ---------- */
|
||||
|
||||
.tool-args { margin-bottom: 10px; }
|
||||
.tool-arg { margin-bottom: 6px; }
|
||||
.tool-args {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tool-arg {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.arg-k {
|
||||
display: block;
|
||||
font-size: 10.5px;
|
||||
|
||||
Reference in New Issue
Block a user