bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

UI: flip bubble hierarchy — responses elevated, prompts recessed

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ChatMessage.vue
+13 -23
View File
@@ -121,13 +121,19 @@ const timingParts = computed((): string[] => {
border-radius: 18px;
}
/* User prompts: recessed, muted — margin notes */
.role-user .message-bubble {
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: #fff;
background: var(--color-bubble-user-bg);
border: 1px solid var(--color-bubble-user-border);
color: var(--color-bubble-user-text);
border-bottom-right-radius: 4px;
}
/* Assistant responses: elevated, lit — the primary text */
.role-assistant .message-bubble {
background: var(--color-bg-card);
border-left: 2px solid var(--color-primary);
box-shadow: var(--color-bubble-asst-shadow);
border-bottom-left-radius: 4px;
}
@@ -144,16 +150,17 @@ const timingParts = computed((): string[] => {
letter-spacing: 0.03em;
}
.role-user .role-label {
color: rgba(255, 255, 255, 0.7);
color: var(--color-text-muted);
opacity: 0.6;
}
.role-assistant .role-label {
color: var(--color-text-muted);
color: var(--color-primary);
}
.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 {
@@ -191,7 +198,6 @@ details[open] .thinking-summary::before {
max-height: 300px;
overflow-y: auto;
background: var(--color-bg-secondary);
border-top: 1px solid var(--color-border);
}
.message-content {
font-size: 0.95rem;
@@ -202,22 +208,6 @@ details[open] .thinking-summary::before {
margin-bottom: 0;
}
/* User bubble content overrides for readability on primary bg */
.role-user .message-content :deep(a) {
color: rgba(255, 255, 255, 0.9);
text-decoration: underline;
}
.role-user .message-content :deep(code) {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.role-user .message-content :deep(pre) {
background: rgba(0, 0, 0, 0.2);
}
.role-user .message-content :deep(blockquote) {
border-left-color: rgba(255, 255, 255, 0.4);
color: rgba(255, 255, 255, 0.85);
}
.message-actions {
display: flex;