fix: restore presentation chat contrast

This commit is contained in:
lda
2026-07-08 09:13:53 +07:00 Verified
parent e75562e30d
commit f709b41b2a
4 changed files with 49 additions and 3 deletions
@@ -8,6 +8,14 @@ import type { AgentMessage } from "../demo/agent/events.js";
afterEach(() => cleanup());
describe("OperatorChat", () => {
it("exposes chat theme and readable surface attributes", () => {
render(<OperatorChat state={initialPresentationState} />);
const chat = screen.getByLabelText("scripted operator chat");
expect(chat).toHaveAttribute("data-chat-theme");
expect(chat).toHaveAttribute("data-readable-surface");
});
it("renders standard agent message parts", () => {
const messages: ReadonlyArray<AgentMessage> = [
{ id: "u1", role: "user", parts: [{ type: "text", text: "Prepare the report." }] },
@@ -112,7 +112,13 @@ export const OperatorChat = ({ state, messages, onApprove, onDeny }: OperatorCha
const visibleMessages = messages && messages.length > 0 ? messages : fallbackMessages(state);
const composition = compositionForState(state);
return (
<aside className="operator-chat" data-mode={composition.chatMode} aria-label="scripted operator chat">
<aside
className="operator-chat"
data-mode={composition.chatMode}
data-chat-theme={composition.chatTheme}
data-readable-surface={composition.chatTheme === "light" ? "light" : "dark"}
aria-label="scripted operator chat"
>
{visibleMessages.map((message) => (
<div key={message.id} className={`chat-message chat-message--${message.role === "user" ? "operator" : "system"}`}>
<strong>{message.role === "user" ? "Operator" : "lda.chat"}</strong>
@@ -4,6 +4,7 @@ import {
findScene,
type BeatEvidencePresentation,
type ChatMode,
type ChatTheme,
type DiscussionBranchId,
type EvidencePresentation,
type MainLocation,
@@ -58,11 +59,13 @@ const compositionForLocation = (
evidenceOverride: EvidencePresentation | null,
): {
readonly chatMode: ChatMode;
readonly chatTheme: ChatTheme;
readonly evidencePresentation: EvidencePresentation;
} => {
if (location.kind === "discussion") {
return {
chatMode: "hidden",
chatTheme: "dark",
evidencePresentation: evidenceOverride ?? "hidden",
};
}
@@ -70,6 +73,7 @@ const compositionForLocation = (
const beat = scene?.beats.find((b) => b.id === location.beatId);
return {
chatMode: beat?.chatMode ?? "hidden",
chatTheme: beat?.chatTheme ?? "dark",
evidencePresentation: evidenceOverride ?? beat?.evidencePresentation ?? "hidden",
};
};
@@ -149,12 +149,35 @@
.chat-message {
border: 1px solid oklch(0.34 0.035 250);
background: oklch(0.18 0.025 250);
padding: 0.65rem 0.75rem;
border-radius: 0.65rem;
padding: 0.65rem 0.75rem;
background: oklch(0.18 0.025 250);
color: var(--text-primary);
font-size: 0.85rem;
}
.chat-message strong {
display: block;
margin-bottom: 0.35rem;
color: var(--text-primary);
}
.chat-message p,
.chat-message span,
.chat-message code {
color: inherit;
}
.operator-chat[data-readable-surface="light"] .chat-message {
border-color: color-mix(in oklch, var(--color-editorial-muted, oklch(0.48 0.025 65)) 35%, transparent);
background: color-mix(in oklch, var(--color-editorial-paper, oklch(0.975 0.012 82)) 92%, white);
color: var(--color-editorial-ink, oklch(0.19 0.015 65));
}
.operator-chat[data-readable-surface="light"] .chat-message strong {
color: var(--color-editorial-ink, oklch(0.19 0.015 65));
}
.operation-block {
border: 1px solid var(--stage-line);
background: var(--stage-surface);
@@ -610,6 +633,11 @@
border: 1px solid oklch(0.36 0.04 250);
border-radius: 0.35rem;
font-size: 0.75rem;
color: var(--text-primary);
}
.operator-chat[data-readable-surface="light"] .chat-tool-part {
color: var(--color-editorial-ink, oklch(0.19 0.015 65));
}
.chat-tool-part span {