Conversation
Messages, attachments, code blocks and the pieces of a chat interface.
Message
One turn in a conversation: the avatar, the sender, the words and a status line.
Message scroller
Holds a long thread, opens at the latest message and follows new replies while you are at the bottom.
Bubble
The surface of a message. Warm for the person writing, plain text for the reply.
Attachment
A file sent in a conversation, with its name, size, upload state and actions.
Select a finished file to open it.
Code block
Code, terminal commands and diffs, with the file name and a copy button.
<script lang="ts"> import { Button } from '$lib/components/ui/button';
let held = $state(false);</script>
<!-- Keep a pre-order in the cold store until the ground thaws. --><Button variant="outline" disabled={held} onclick={() => (held = true)}> {held ? 'Held in the cold store' : 'Hold my order'}</Button># Add the button, then start the dev servernpx shadcn-svelte@latest add buttonnpm run dev -- --open{ "order": "#4474", "customer": "Marguerite Lowe", "status": "Out for delivery", "due": "2026-10-22", "slot": "9:00 AM to 12:00 PM", "van": "Van 1", "note": null "note": "Leave by the side gate if nobody is in."}Marker
A small note between messages: a date, a status, someone joining.
Trace
The steps an assistant took before it replied, each one open for detail.
{ "order": "#4471", "customer": "Hal Jennings", "address": "14 Ferry Lane", "items": [ "3 × Bare-root rose ‘Gertrude Jekyll’" ], "status": "Open", "due": "2026-11-12", "slot": "9:00 AM to 12:00 PM", "van": "Van 1", "delivery": 0, "total": 65.25}Hi Hal, your three roses land here on Tuesday, November 10, and Priya brings them on Thursday, November 12 between 9:00 AM and 12:00 PM. The total is $65.25 with free delivery. Frost is forecast tonight, down to 27°F, so cover the bed with chopped leaves to keep it workable.
Questionnaire
A few questions asked inside the chat, one at a time, with a progress bar.