UI: flip bubble hierarchy — responses elevated, prompts recessed

Design direction: "Illuminated Transcript" — the AI response is the
primary artifact; user prompts are subordinate margin notes.

ChatMessage.vue:
- User bubble: ghosted background (rgba 3-4% opacity), muted text,
  thin near-invisible border. De-emphasized, recessed.
- Assistant bubble: left indigo accent border (2px), elevated shadow
  via --color-bubble-asst-shadow. Commands attention.
- Assistant role label: indigo (var(--color-primary)); user label muted.
- Removed old white-override content rules (no longer on dark bg).
- Thinking block: full border → left-only indigo accent bar (35% opacity),
  removed inner top border.

ChatView.vue:
- Streaming bubble: same left accent + shadow as assistant bubbles.
- Streaming role label: indigo to match ChatMessage.
- Thinking block in streaming: same treatment as ChatMessage.

theme.css:
- Added --color-bubble-user-bg/border/text for light + dark.
- Added --color-bubble-asst-shadow for light + dark.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-10 15:02:39 -04:00
parent 4a3899d103
commit 5d9085d564
3 changed files with 26 additions and 27 deletions
+5 -4
View File
@@ -1222,6 +1222,8 @@ onUnmounted(() => {
border-radius: 18px;
border-bottom-left-radius: 4px;
background: var(--color-bg-card);
border-left: 2px solid var(--color-primary);
box-shadow: var(--color-bubble-asst-shadow);
}
.streaming-bubble .message-header {
display: flex;
@@ -1231,7 +1233,7 @@ onUnmounted(() => {
.streaming-bubble .role-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
@@ -1258,8 +1260,8 @@ onUnmounted(() => {
}
.thinking-block {
margin-bottom: 0.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
border-left: 2px solid rgba(129, 140, 248, 0.35);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
overflow: hidden;
}
.thinking-summary {
@@ -1297,7 +1299,6 @@ details[open] .thinking-summary::before {
max-height: 300px;
overflow-y: auto;
background: var(--color-bg-secondary);
border-top: 1px solid var(--color-border);
}
.streaming-status-dot {
display: inline-block;