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]>
2.6 KiB
2.6 KiB
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-collist - 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.