Chat - AI Chat

These blocks are the front end of an AI assistant. Replies are simulated with timers so you can see how streaming, thinking and tool steps look and feel. Replace the timers with a call to your own model endpoint and append tokens to the last message the same way.

They share the message, bubble and message scroller components. The scroller keeps the view anchored to the latest user message, so a long streaming answer does not push the question out of sight, and it shows a jump to latest button when you scroll away. Spinners and carets stop animating for people who prefer reduced motion, and thinking and tool call states are exposed to assistive tech with role="status" or labelled controls.

Style One

Centered chat in the style of popular assistants. User messages in muted bubbles, assistant replies as plain text with copy and feedback buttons, an auto growing prompt box and a stop button while streaming.

Style Two

Welcome screen with four suggestion cards. Clicking a card starts the conversation, and the new chat button brings the welcome screen back.

Style Three

Thinking and streaming. Skeleton lines while the assistant thinks, a collapsible reasoning summary, text that streams in with a caret and a stop generating button.

Style Four

Tool call steps. A collapsible trace shows each step the assistant took with its arguments and result, followed by the answer and a list of sources, with a replay button.

Style Five

Model picker. A dropdown with radio items and speed and capability badges, the selected model shown in the prompt box and on every answer.

Style Six

History sidebar with a new chat button, search, conversations grouped by day and a menu with rename and delete. The sidebar is hidden on small screens, where you would put it in a drawer.