Quack Bubble
A message that has a voice: the assistant carries the mark, the user gets plain lime vinyl.
SurfacesServer safe
Preview
Which duck component should I use for a file upload?
14:02StickerDrop. It wraps a real file input, so the picker is still there for anyone not dragging.
duck/ui assistantDoes it validate size?
14:03Thinking
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/quack-bubblePulls in @duck/theme, @duck/duck-mark. Already installed items are skipped.
Usage
import { QuackBubble } from "@/components/ui/quack-bubble"The file lands in components/ui/quack-bubble.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| from | assistant | user | assistant | Which side speaks. Assistant gets the mark and the sticker edge. |
| meta | string | - | Timestamp, model name, "edited" — whatever belongs under the message. |
Rules
What keeps this component from turning into noise.
- No CSS triangle tail. A drawn tail cannot survive a 3px sticker edge, and a clip-path notch would cut the edge open — the squared corner does the pointing.
- Only the assistant carries the mark. One voice in the conversation is a character; the other is a person.
- Compose it with StreamText for the message and DuckThinking for the wait.