Chat UI components
The pieces of a chat or AI assistant interface: messages with avatars and actions, chat bubbles with grouped corners and reactions, a scroller that follows new messages but keeps your place while you read back, file and image attachments, and date and event markers.
They are the free foundation of the HextaUI Pro AI blocks, which add the composer, streaming, tool calls and the rest of the conversation.
- AttachmentFile and image cards for uploads, with progress, states, actions, a full-card trigger and names that keep their extension.
- BubbleChat message bubbles with variants, grouped corners, reactions and room for interactive content.
- MarkerQuiet notes between content, like date dividers and system events, with sticky dates and times that read as Today or Yesterday.
- MessageA chat message row with an avatar, name, bubbles and status, where new messages rise in from the sender's side.
- Message scrollerA chat scroll area that follows new messages, keeps your place while you read back, and counts what you missed on the jump button.
Built into Pro blocks
Blocks for AI products that are built from these components.
- Chat ThreadThe conversation view of an AI chat. Handles replies that stream, edit and retry, and versions of a reply you can switch between.
- Prompt InputA chat composer that grows as you type. Handles file uploads, @ and / menus at the caret and messages typed while a reply streams.
- Agent TodosThe plan an agent keeps while it works, one line per step. Handles steps in progress, failed steps and plan changes mid-run.
- Chat SidebarThe sidebar of a chat app, with pinned chats, projects and recents. Handles rename in place, delete with undo and chats still replying.
- Code BlockCode blocks for AI answers. Highlighting keeps up with streaming, diffs can be accepted or rejected, and commands run in a terminal.
- Diff ReviewA review of an agent’s file edits before they land. Handles accept or reject per change, comments back to the agent and edits still streaming.