core-lead/molecule-core
1
0
Fork 0
forked from molecule-ai/molecule-core
Code Pull Requests Activity

fix(canvas): agent chat bubble dark-mode prose contrast

Browse Source 
Regression from PR #2618 (chat dark-contrast).

PR #2618 switched the agent bubble bg to `dark:bg-zinc-700` so it
visibly elevates against the dark panel — but the inner ReactMarkdown
prose div only got `prose-invert` for USER messages. Result: in dark
mode the agent's markdown text rendered with the Tailwind Typography
plugin's default dark body color on top of the new dark bg = invisible
text. User reported empty-looking gray rectangles where agent replies
should be.

Fix: apply `dark:prose-invert` to agent bubbles so prose body text
flips light alongside the bg. Light mode unchanged (default prose
colors against the warm `bg-surface-card`).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hongming Wang 2026-05-03 12:36:44 -07:00
parent 8d5e78d629
commit ffcffa1375
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
canvas/src/components/tabs/ChatTab.tsx
View File

@ -792,7 +792,18 @@ function MyChatPanel({ workspaceId, data }: Props) {
}`}
>
{msg.content && (
<div className={`prose prose-sm max-w-none [&>p]:mb-1 [&>p:last-child]:mb-0 ${msg.role === "user" ? "prose-invert" : ""}`}>
<div
className={`prose prose-sm max-w-none [&>p]:mb-1 [&>p:last-child]:mb-0 ${
msg.role === "user"
? "prose-invert"
// Agent bubbles use bg-zinc-700 in dark mode; without
// prose-invert the Tailwind Typography plugin keeps
// its default DARK body color → unreadable dark-on-dark.
// Light mode keeps default prose colors against the
// warm surface-card bg.
: "dark:prose-invert"
}`}
>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
</div>
)}