Chatbot UI Components

51 components: 24 for the chat itself, 5 for the page around it, and 22 in the kit for the rest of the app.

Each one is shown running below, and each page has its variants, its code and its API. The chat’s pieces are custom elements and segments: they work in plain HTML and in every framework. The kit is plain CSS classes for the controls your own page puts around the chat, themed by the same variables.

Chat

The conversation and everything in it: messages, replies, tools, questions, approvals, and the composer.

• Chat

  The whole chat in one tag — a transcript that scrolls, the question panel and a composer — composed for you, or from your own children.

• Conversation

  The transcript — it keeps the messages, renders each as a bubble, streams replies token by token and stays at the bottom while you are there.

• Message

  One message of the conversation — who wrote it, when, and its content as plain text or as a list of segments.

• Message actions

  The row of buttons under a message — copy, retry, edit, feedback, details — on when your app can answer them, in the order you choose.

• Branches

  Every version of a reply is kept — retry forks the conversation instead of overwriting it, and a ‹1/2› picker walks between the versions.

• Attachments

  Files a message carries — images shown as pictures, other files as their name and type — and the pending files in the composer before they are sent.

• Waiting indicator

  The three dots a reply shows between the question and its first word, so the reader knows the model is on it.

• Response

  The text of a reply, rendered as Markdown — headings, lists, tables, links — and written as it streams rather than re-rendered at every token.

• Reasoning

  The model's reasoning, folded above its answer — streamed while it thinks, closed once it is done, opened by the reader who wants to know why.

• Code block

  A block of code in a reply — its file name, its language, a copy button — highlighted as it streams when a highlighter is installed.

• Tool call

  The row a reply shows when the model calls one of your tools — its name, what it was asked, what it returned, and whether it is running, waiting for a person or done.

• Artifact

  A document the model produces — a page, a component, a script, a note — shown as a card with its code, a sandboxed preview, copy and download.

• Error

  A turn that failed, shown inside that turn — what went wrong in words, the technical detail beneath — with whatever had already arrived kept above it.

• Custom view

  A view of your own inside a reply — a card, a chart, a form — drawn by a renderer you register for a segment type you name.

• Approval

  A tool call held until a person decides — the call and its arguments asked at the composer, approve, reject, or a word on what to do instead.

• Question

  A question put to the person mid-conversation — choices, yes or no, a short text, or several at once — answered at the composer and kept in the transcript.

• Composer

  Where the user writes the next message — a field that grows, a send button that turns into stop, attached files and a toolbar, assembled from parts.

• Suggestions

  Prompt starters — a row of ready-made prompts above the input that the reader clicks instead of typing.

• Model selector

  A picker for the provider and model a conversation uses, grouped by provider, searchable, for apps where the reader brings their own key or picks a model.

• Approval mode

  The switch every agent product ends up with — plan, ask, auto-edit, auto — deciding which tool calls run, which ask first, and which are refused.

• Context gauge

  How much of the model's context window the conversation uses, as a bar or a ring that warns before the window is full.

• Status line

  A line under the conversation for what your app is doing — searching, uploading, waiting in a queue — shown and hidden by your code.

• Scroll rail

  A rail of ticks beside a long conversation, one per question, that shows where you are and jumps back to any turn.

• Compaction notice

  The summary that takes the place of the oldest turns when a long conversation fills the model's context, so the conversation can go on.

Layout

The page around a chat: the shell, its header and sidebar, the list of conversations, a split.

• App shell

  The page around a chat — a sidebar beside, a header above, the chat in the rest — as a grid you size once.

• Header

  The bar above the chat — a button for the sidebar, the conversation's title, and room for actions at the end.

• Sidebar

  The column beside the chat — conversations, a new-chat button, a search field, an account row — that folds away and becomes a drawer on a narrow window.

• Conversation list

  The reader's past conversations, grouped by date, each with a menu to rename, pin, archive or delete it.

• Split

  Two panes and a seam you can drag — the chat beside a preview, an editor or a document.

Kit

Buttons, fields, menus, dialogs and the rest, as plain classes on plain elements.

• Button

  Buttons in five fills and seven intents, four sizes, icon and pill shapes, and groups that fuse into one control.

• Field

  Text fields, text areas, checkboxes, radios, switches, ranges and choice cards, with their labels, hints and errors, on native form controls.

• Select

  A dropdown with optional groups and a search field, driven by the keyboard, for choices a native select cannot style or filter.

• Avatar

  A person's picture or initials, in five sizes and two shapes, and a group that overlaps them.

• Icon

  The glyphs the library draws, available in markup as aparte-icon, sized by the place they sit in.

• Badge

  A small pill for a count or a status — live, draft, failed, 12 — in the same intents and fills as the button, or as a dot.

• Tag

  A small chip for a label, a filter or a model name, with an optional button to remove it.

• Thumbnail

  A square tile for a file — an image's picture, or another file's type — with room for a remove button in a corner.

• Spinner

  A rotating indicator for a wait, as a class, or as an element that can also show how far along it is.

• Progress

  A progress bar, filled to a value, or moving across while the length of the wait is unknown.

• Skeleton

  Grey shapes that stand where content will appear, so the page keeps its layout while it loads.

• Divider

  A thin line between two parts, horizontal or vertical, with an optional label in the middle.

• Alert

  A callout with an icon, a title and a message, in seven intents, with an optional button to dismiss it.

• Card

  A bordered surface with an optional header, body and footer, for a summary, a setting or a view of your own in a reply.

• Keyboard key

  A key drawn as a key, for shortcuts in a hint or a menu — Ctrl + K, Esc, Enter.

• Mark

  The tint a settled choice carries — a chosen option, the conversation you are in, an approved call — as one class on your own elements.

• Tabs

  A row of tabs and the panel under it, underlined or segmented, on the markup of the ARIA tab pattern.

• Accordion

  Stacked sections, each a header you press and the panel it reveals, on native details or the ARIA disclosure pattern.

• Menu

  A floating list of commands — items, labels, separators, a checked choice, a two-line item — for a dropdown, a context menu or an overflow menu.

• Popover

  A floating box with a border and a shadow, for a small form, a filter or a card of details above the page.

• Dialog

  A modal box on the native dialog element — header, body, footer — opened and closed by two attributes, with no script of your own.

• Tooltip

  A short label with an arrow, beside the control it describes, legible over any background in either theme.

Looking for a tag rather than a picture? Every element, by tag, links to its page; every segment type and every kit family too.