Chatbot UI Components

Every element is a plain custom element: no framework, no runtime dependency, and the same object whatever you mount it with. A component made of parts is documented on one page, with its parts as sections. Segments are the other family and a different kind of thing — data somebody renders, with no tag at all.

There is a third family: the UI kit

Buttons, fields, switches, tags, alerts, menus, tabs and avatars ship as plain classes on plain elements — no tag, themed by the same variables as the chat — for the controls your own page puts around it. They are listed with their HTML in the UI kit, one page per family with its live preview; a consumer who started here rewrote his own before finding them.

The conversation

Component	What it is
Chat	AparteChat - The Shell The container element for a chat.
Chat viewport	The transcript surface: a light-DOM container with sticky scrolling, token streaming and segment-aware rendering.
Chat bubble	One message: plain content or a list of rich segments, in light DOM.
Chat status	A standalone status line — a light-DOM indicator the APP owns.
Context	A gauge of the model’s context window: how much of it the conversation uses.
Conversation list	Conversation-history sidebar — a framework-agnostic web component.
Scroll rail	A rail of ticks beside the transcript — one per turn — that shows where you are in a long conversation and jumps back to any message on a click.

Input

Component	What it is
Composer (+7 parts)	The root context for every aparte-composer-* primitive.
Elicitation	The default presenter for a request to the human.
Suggestions	Prompt starters — a row of suggested prompts a reader clicks instead of typing.

The shell

Component	What it is
Sidebar	The column beside the chat — conversations, a new-chat button, a search field, an account row — as an element, because it has behaviour: it collapses, it becomes a drawer on a narrow window, and its s
Split	Two panes and a draggable seam — a chat beside a preview, an editor, an artifact card.

Utility

Component	What it is
Select (+2 parts)	Dropdown select for aparté — a vanilla web component with optional grouping, a search filter and a keyboard-driven listbox.
Icon	AparteIcon The library’s icon set, reachable from MARKUP.
Progress spinner	AparteProgressSpinner Circular progress spinner web component.