diff --git a/ui/src/components/task-chat/TaskChatBubble.test.tsx b/ui/src/components/task-chat/TaskChatBubble.test.tsx index e16c4a20f9..9b3c041200 100644 --- a/ui/src/components/task-chat/TaskChatBubble.test.tsx +++ b/ui/src/components/task-chat/TaskChatBubble.test.tsx @@ -66,6 +66,48 @@ describe("TaskChatBubble attachment chips", () => { }); }); +describe("TaskChatBubble accent-bubble text color", () => { + let container: HTMLDivElement; + let root: Root | null = null; + + beforeEach(() => { + container = document.createElement("div"); + document.body.appendChild(container); + root = createRoot(container); + }); + + afterEach(() => { + flushSync(() => root?.unmount()); + root = null; + container.remove(); + }); + + function render(item: TaskChatMessageItem) { + flushSync(() => + root!.render( + + + , + ), + ); + } + + it("marks the human bubble's markdown as on-accent so prose text follows text-white", () => { + render({ id: "m1", kind: "message", author: "human", text: "when a new task is created…" }); + const body = container.querySelector(".paperclip-markdown"); + expect(body).not.toBeNull(); + // Without this class the light-mode prose body color reads as black on blue. + expect(body?.className).toContain("paperclip-markdown-on-accent"); + }); + + it("leaves the neutral agent bubble on default prose colors", () => { + render({ id: "m1", kind: "message", author: "agent", authorName: "CEO", text: "Final reply." }); + const body = container.querySelector(".paperclip-markdown"); + expect(body).not.toBeNull(); + expect(body?.className).not.toContain("paperclip-markdown-on-accent"); + }); +}); + describe("TaskChatBubble interstitial self-talk (PAP-357)", () => { let container: HTMLDivElement; let root: Root | null = null; diff --git a/ui/src/components/task-chat/TaskChatBubble.tsx b/ui/src/components/task-chat/TaskChatBubble.tsx index 549877d381..af8f71e3bb 100644 --- a/ui/src/components/task-chat/TaskChatBubble.tsx +++ b/ui/src/components/task-chat/TaskChatBubble.tsx @@ -99,7 +99,17 @@ export function TaskChatBubble({ item, attachedTurn }: TaskChatBubbleProps) { item.optimistic ? "opacity-80" : null, )} > - + {bodyText} diff --git a/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx b/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx index 025d101f25..28c874ac06 100644 --- a/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx +++ b/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx @@ -148,7 +148,14 @@ export function TaskChatDescriptionBubble({ brief }: TaskChatDescriptionBubblePr // toggle's muted colors need a lift on the solid blue bubble. toggleClassName={isHuman ? "text-white/80 hover:text-white hover:bg-white/10" : undefined} > - + {brief.description}