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

Merge pull request #2604 from Molecule-AI/ui/canvas-chat-contrast

Browse Source 
fix(canvas): chat bubble + sub-tab contrast in light theme
This commit is contained in:
Hongming Wang 2026-05-03 17:00:54 +00:00 committed by GitHub
commit 4e72f1d1db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
canvas/src/components/SidePanel.tsx
View File

@ -202,7 +202,7 @@ export function SidePanel() {
{/* Tabs — relative wrapper lets the fade gradient position against the scroll container */} {/* Tabs — relative wrapper lets the fade gradient position against the scroll container */}
<div className="relative border-b border-line/40"> <div className="relative border-b border-line/40">
{/* Right-edge fade: signals more tabs are hidden off-screen when the bar overflows */} {/* Right-edge fade: signals more tabs are hidden off-screen when the bar overflows */}
<div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-zinc-950 to-transparent z-10" aria-hidden="true" /> <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-surface to-transparent z-10" aria-hidden="true" />
<div <div
role="tablist" role="tablist"
aria-label="Workspace panel tabs" aria-label="Workspace panel tabs"
@ -232,8 +232,8 @@ export function SidePanel() {
onClick={() => setPanelTab(tab.id)} onClick={() => setPanelTab(tab.id)}
className={`shrink-0 px-3 py-2.5 text-[10px] font-medium tracking-wide transition-all rounded-t-lg mx-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 ${ className={`shrink-0 px-3 py-2.5 text-[10px] font-medium tracking-wide transition-all rounded-t-lg mx-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 ${
panelTab === tab.id panelTab === tab.id
? "text-ink bg-surface-card/40 border-b-2 border-accent" ? "text-ink bg-surface-card border-b-2 border-accent"
: "text-ink-soft hover:text-ink hover:bg-surface-card/40" : "text-ink-mid hover:text-ink hover:bg-surface-card/60"
}`} }`}
> >
<span className="mr-1 opacity-50" aria-hidden="true">{tab.icon}</span> <span className="mr-1 opacity-50" aria-hidden="true">{tab.icon}</span>

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

@ -773,14 +773,14 @@ function MyChatPanel({ workspaceId, data }: Props) {
<div <div
className={`max-w-[85%] rounded-lg px-3 py-2 text-xs ${ className={`max-w-[85%] rounded-lg px-3 py-2 text-xs ${
msg.role === "user" msg.role === "user"
? "bg-accent-strong/30 text-blue-100 border border-accent/20" ? "bg-accent text-white border border-accent-strong"
: msg.role === "system" : msg.role === "system"
? "bg-red-900/30 text-red-200 border border-red-800/30" ? "bg-bad/10 text-bad border border-bad/40"
: "bg-surface-card/80 text-ink border border-line/30" : "bg-surface-card text-ink border border-line"
}`} }`}
> >
{msg.content && ( {msg.content && (
<div className="prose prose-sm prose-invert max-w-none [&>p]:mb-1 [&>p:last-child]:mb-0"> <div className={`prose prose-sm max-w-none [&>p]:mb-1 [&>p:last-child]:mb-0 ${msg.role === "user" ? "prose-invert" : ""}`}>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown> <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
</div> </div>
)} )}
@ -796,7 +796,7 @@ function MyChatPanel({ workspaceId, data }: Props) {
))} ))}
</div> </div>
)} )}
<div className="text-[9px] text-ink-soft mt-1"> <div className={`text-[9px] mt-1 ${msg.role === "user" ? "text-white/70" : "text-ink-mid"}`}>
{new Date(msg.timestamp).toLocaleTimeString()} {new Date(msg.timestamp).toLocaleTimeString()}
</div> </div>
</div> </div>