cynarAI/evOo-local
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(web): restore bot bubble accent color and user bubble border after refactor regression

Browse Source 
- Add --bot-accent CSS variable injection from speakerColorDef.hex to all bot bubbles
- Restore colored left border accent on bot bubbles via CSS custom property
- Improve bot bubble background with subtle accent tint (88% card + 12% accent)
- Add colored right border accent to user bubbles
- Add subtle accent halo shadow to bot bubbles for better visual hierarchy
This commit is contained in:
Cynar 2026-10-23 13:28:24 +00:00
parent cd770b9a1d
commit 95d786ef2c
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/src/pages/shell/transcript.tsx
View File

@ -1030,6 +1030,7 @@ const MessageView = memo(function MessageView({
? "max-w-full space-y-2 border-s-2 border-success/35 ps-3 text-ui-body-sm leading-relaxed text-foreground/90" ? "max-w-full space-y-2 border-s-2 border-success/35 ps-3 text-ui-body-sm leading-relaxed text-foreground/90"
: "chat-bubble-bot max-w-full space-y-3 rounded-[24px] px-5 py-3.5 text-ui-body leading-[1.62] text-foreground/95" : "chat-bubble-bot max-w-full space-y-3 rounded-[24px] px-5 py-3.5 text-ui-body leading-[1.62] text-foreground/95"
} }
style={{ ["--bot-accent" as string]: speakerColorDef.hex }}
dir="auto" dir="auto"
> >
{visibleNarrationBlocks.map((block, i) => { {visibleNarrationBlocks.map((block, i) => {
@ -1152,6 +1153,7 @@ const MessageView = memo(function MessageView({
<div <div
data-testid="message-bot-bubble" data-testid="message-bot-bubble"
className="chat-bubble-bot max-w-full rounded-[24px] px-5 py-3.5 text-ui-body leading-[1.62] text-foreground/95" className="chat-bubble-bot max-w-full rounded-[24px] px-5 py-3.5 text-ui-body leading-[1.62] text-foreground/95"
style={{ ["--bot-accent" as string]: speakerColorDef.hex }}
dir="auto" dir="auto"
> >
<ChatMarkdown streaming>{block.text}</ChatMarkdown> <ChatMarkdown streaming>{block.text}</ChatMarkdown>
@ -1378,6 +1380,7 @@ const MessageView = memo(function MessageView({
? "max-w-full space-y-2 border-s-2 border-success/35 ps-3 text-ui-body-sm leading-relaxed text-foreground/90" ? "max-w-full space-y-2 border-s-2 border-success/35 ps-3 text-ui-body-sm leading-relaxed text-foreground/90"
: "chat-bubble-bot max-w-full space-y-3 rounded-[24px] px-6 py-4 text-ui-reading leading-[1.85] text-foreground/95" : "chat-bubble-bot max-w-full space-y-3 rounded-[24px] px-6 py-4 text-ui-reading leading-[1.85] text-foreground/95"
} }
style={{ ["--bot-accent" as string]: speakerColorDef.hex }}
dir="auto" dir="auto"
> >
<ChatMarkdown>{block.text}</ChatMarkdown> <ChatMarkdown>{block.text}</ChatMarkdown>

7
apps/web/src/styles.css
View File

@ -55,17 +55,20 @@ body,
.chat-bubble-user { .chat-bubble-user {
background: var(--chat-user); background: var(--chat-user);
border: 1px solid var(--border); border: 1px solid var(--border);
border-right: 2px solid color-mix(in srgb, var(--ring) 50%, var(--border) 50%);
box-shadow: box-shadow:
0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 8px 24px -4px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.2); inset 0 1px 0 rgba(255, 255, 255, 0.2);
} }
.chat-bubble-bot { .chat-bubble-bot {
background: color-mix(in srgb, var(--card) 72%, transparent); background: color-mix(in srgb, var(--card) 88%, var(--bot-accent, transparent) 12%);
border: 1px solid var(--border); border: 1px solid var(--border);
border-left: 2px solid color-mix(in srgb, var(--bot-accent, var(--ring)) 70%, transparent);
box-shadow: box-shadow:
0 10px 32px -4px rgba(0, 0, 0, 0.35), 0 10px 32px -4px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.08); inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 0 0 1px color-mix(in srgb, var(--bot-accent, transparent) 6%, var(--bot-accent, transparent) 6%);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
} }