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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user