Omar SobhandClaude Opus 4.8
48730abd78
Add the WorkClaw design-reference docs (specs, manifests, tokens, motion, icon/asset references, gifs) under docs/, and move the platform spec/PRD/roadmap from the repo root into docs/. Co-Authored-By: Claude Opus 4.8 <[email protected]>
47 lines
2.6 KiB
Markdown
47 lines
2.6 KiB
Markdown
# WorkClaw — Chat Message Components (MEASURED)
|
||
> Captured live via a throwaway test message on an empty WorkClaw conversation.
|
||
> No transcript content reproduced — only component geometry/style.
|
||
|
||
## Layout model
|
||
The thread uses an **asymmetric** chat pattern:
|
||
- **User messages** = a filled rounded "pill" bubble, **right-aligned**.
|
||
- **Assistant messages** = **NO bubble**. Avatar + plain text on transparent bg, **left-aligned**.
|
||
|
||
## User message bubble
|
||
- Wrapper row: `flex w-full justify-end`
|
||
- Bubble column: `flex flex-col w-fit max-w-full md:max-w-[75%] items-end` → caps at **75%** desktop, full-width mobile
|
||
- Bubble element classes: `bg-white dark:bg-[#1A1A1A] ring-1 ring-inset ring-black/[0.06] dark:ring-white/[0.07] text-neutral-600 dark:text-neutral-300 whitespace-pre-wrap wrap-anywhere`
|
||
- Background (dark): **#1A1A1A** (rgb 26,26,26)
|
||
- Ring/border: 1px inset `rgba(255,255,255,0.07)` (dark) / `rgba(0,0,0,0.06)` (light)
|
||
- Text color (dark): neutral-300 (≈ lab 84.9 → ~#D4D4D4)
|
||
- Font: **Geist**, 14px / line-height 23.8px, weight 400, letter-spacing normal
|
||
- Padding: **10px 14px**
|
||
- Border-radius: **24px 24px 4px** (TL TR BR; bottom-right tucks to 4px → "tail" toward sender side)
|
||
- Box-shadow (subtle dual): `rgba(0,0,0,0.03) 0 2px 5px, rgba(255,255,255,0.03) 0 -10.4px 16px`
|
||
- No max-width on bubble itself (controlled by 75% column)
|
||
|
||
## Assistant message
|
||
- Row: `flex items-start`, **gap 15px**, transparent bg
|
||
- Avatar: **50×50px**, img (rounded via image asset — agent face), left of text
|
||
- Text: `<span>`, Geist 14px / 23.8px, weight 400, color neutral ≈ lab 91 (~#E8E8E8 / neutral-200)
|
||
- No bubble, no padding, no border — text flows directly in the row
|
||
- Row max content width inherits the thread column (≈768px content rail)
|
||
|
||
## Thread column / message list
|
||
- Message rows stack in a `flex flex-col` list
|
||
- Content rail ≈ **768px** max (matches main chat shell content width)
|
||
- Vertical rhythm between turns: gap-2 (8px) at the turn-group level; rows themselves are spaced by the wrapper
|
||
|
||
## Tokens to add
|
||
- `--bubble-user-bg: #1A1A1A;`
|
||
- `--bubble-user-ring: rgba(255,255,255,0.07);`
|
||
- `--bubble-user-text: #D4D4D4;` (neutral-300)
|
||
- `--bubble-radius: 24px 24px 4px;`
|
||
- `--assistant-avatar-size: 50px;`
|
||
- `--assistant-row-gap: 15px;`
|
||
- `--msg-font-size: 14px; --msg-line-height: 23.8px;`
|
||
|
||
## Notes
|
||
- The assistant returned a generic system error ("Sorry, I encountered an error…") — this is just the empty/no-backend response and is NOT real content. We only used it to measure the assistant text node geometry.
|
||
- Brand avatar images = replace with our own agent art.
|