Conversation
Chats with an agent and comment threads: the message log, bubbles, tool steps, the message box with attachments, and comments with a Markdown form. Every state carries a word and an icon, and failures that block are announced at once.
7 pages, 7 exports
- MessageThread
- MessageBubble
- ToolLine
- Composer
- AttachmentChips
- CommentItem
- CommentForm
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { MessageThread, MessageBubble, ToolLine, Composer, … } from '@skribly/ui/conversation'Pages in this groupLink to the section Pages in this group
- MessageThreadThe scrolling log of a chat. It keeps the newest message in view, offers a jump button when you scroll up, and shows who is writing. Pick it for any back-and-forth with a person or an agent.MessageThread
- MessageBubbleOne message: your own on the end side in the accent colour, others on the start side. Shows author, time, a typing mark and delivery state with retry.MessageBubble
- ToolLineOne step an agent took between messages, such as reading a file or running a command. Add detail to let people open the output.ToolLine
- ComposerThe message box under a chat: it grows with the text, sends on Enter, attaches files by button, paste or drop, and turns into a stop button while the agent answers. Pick CommentForm for longer Markdown posts.Composer
- AttachmentChipsThe files attached to a message or a comment, with size, upload state and a remove button. Without onRemove it is a read-only list.AttachmentChips
- CommentItemOne comment in a thread, with avatar, author, a badge, time, edited mark and actions. Put the comments of a thread in an ordered list.CommentItem
- CommentFormWrites a Markdown comment with a preview, checks it is not empty, and shows posting, posted and failed states. Pick it under a comment thread or to edit a comment.CommentForm