Message
One turn in a conversation: who said it, what, and what you can do with it.
import { Message } from "@flinbu/seed";You and Pluto
Check my Dark theme for contrast.
Three pairs fall below AA in Dark. The worst is text-accent-primary on bg-accent-primary at 3.1:1. I drafted a fix that moves it one step lighter.
And Light?
Not sent
import { Button, Message } from "@flinbu/seed";
<div className="flex w-full max-w-xl flex-col gap-lg">
<Message from="user">Check my Dark theme for contrast.</Message>
<Message from="assistant" actions={actions}>Three pairs fall below AA in Dark. The worst is text-accent-primary on bg-accent-primary at 3.1:1. I drafted a fix that moves it one step lighter.</Message>
<Message from="user" status="error" footer={<Button variant="ghost" size="sm">Retry</Button>}>And Light?</Message>
</div>Use it for
- Pluto's chat: your turns as bubbles on the right, Pluto's answers as reading text on the left.
- Chats between people, with avatar, name and time.
Use something else for
- Avatars in Pluto's chat.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
from | 'user''assistant''system' | 'assistant' | Sets side and look. |
children | stringReactNode | – | A string becomes a Bubble. |
actions | ReactNode | – | Ghost Buttons, three or fewer. |
status | 'sending''error' | – | Send state. |
avatar / name / time / footer | ReactNode | – | Optional parts. |
scrollAnchor | boolean | – | For MessageScroller. |
Accessibility
- Icon-only actions need an aria-label; they show on hover and focus, and always on touch screens.
- A failed send says 'Not sent' with an icon, not only color.