42 accounts have had no activity for 90 days or more.
CopyGood work!Needs work!ShareRead aloud
ChatMessage
One turn in a chat with the assistant: what the person asked, or what the assistant answered, with its workings, buttons and suggestions.
Master
Switch the author for a person’s turn or the assistant’s. Turn on the whole conversation for a question and an answer with its workings, buttons and suggestions, where the vote and the menu work.
Usage
Use ChatMessage for each turn in an assistant panel. It is one component: pass author user or assistant. A person's turn sits on the right in a grey bubble with their avatar, and can carry a More menu for Edit and Copy. The assistant answers on the left under the AI mark, in a brand bubble of its own; pass bubble false for a long answer that should run as plain text down the panel. status shows the bubble glowing while it works, like Analyzing your request. sections opens its workings, like Reasoning 1 and Tool References 2. actions draws the row of buttons at the very bottom of an answer (copy, good work, needs work, share, read aloud), after the workings and the suggestions, never above the answer, and pressed keeps the one that was picked lit. suggestions writes what to ask next, each one a kit Button that sends itself, lined up on the left under the answer. See contracts/chatmessage.json for the full contract.
Do's
- A turn in an assistant panel or a full-screen chat.
- An answer that needs its workings, a vote and suggestions.
Don'ts
- Do not build a bubble from your own divs, or add a ChatBubble, MessageRow or AiAvatar. Pass the props.
- Do not use it for an alert or a system notice. Use Callout or Toast.
- Do not put more than one action row on a turn.
- Do not use Accordion for the workings; sections already opens them.
- Do not use raw hex.
<ChatMessage author="assistant" />