molecule-ai/molecule-core
35
0
Fork 2
Code Issues 16 Pull Requests Actions 49 Packages Projects Releases Wiki 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 */}
<div className="relative border-b border-line/40">
{/* 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
role="tablist"
aria-label="Workspace panel tabs"
@ -232,8 +232,8 @@ export function SidePanel() {
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 ${
panelTab === tab.id
? "text-ink bg-surface-card/40 border-b-2 border-accent"
: "text-ink-soft hover:text-ink hover:bg-surface-card/40"
? "text-ink bg-surface-card border-b-2 border-accent"
: "text-ink-mid hover:text-ink hover:bg-surface-card/60"
}`}
>
<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
className={`max-w-[85%] rounded-lg px-3 py-2 text-xs ${
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"
? "bg-red-900/30 text-red-200 border border-red-800/30"
: "bg-surface-card/80 text-ink border border-line/30"
? "bg-bad/10 text-bad border border-bad/40"
: "bg-surface-card text-ink border border-line"
}`}
>
{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>
</div>
)}
@ -796,7 +796,7 @@ function MyChatPanel({ workspaceId, data }: Props) {
))}
</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()}
</div>
</div>