ONE MESSAGE MODEL
Conversation or prompt
Switch alignment and labels with mode while keeping the same source data shape.
DISPLAY
ChatBox
ChatBox turns a typed Signal array into a portable conversation surface with native input, status, streaming, and action states.
ONE MESSAGE MODEL
Conversation or prompt
Switch alignment and labels with mode while keeping the same source data shape.
PLAYGROUND
Wire a complete chat workflow
The preview binds every reactive state and exposes the optional attachment, voice, camera, load-more, send, and stop actions.
type ChatMessage
id:string
role:string
userId:string
text:string
status:string
signal messages type:ChatMessage[] value:[{ id:"1" role:"assistant" userId:"assistant" text:"Welcome" status:"sent" }]
signal loading value:false
signal sending value:false
signal streaming value:false
signal hasMore value:true
ChatBox messages:messages mode:"conversation" currentUserId:"ada" userName:"Ada" assistantName:"Dowe" loading:loading sending:sending streaming:streaming hasMore:hasMore onSend:sendMessageMODES
Reuse the message contract
Conversation mode aligns messages around currentUserId. Prompt mode treats user, assistant, and system roles as an assistant-oriented prompt timeline.
CONVERSATION
Use sender identity when the screen reads like a person-to-person thread.
PROMPT
Use role values to present an assistant workflow or generation prompt.
ChatBox messages:messages mode:"conversation" currentUserId:"ada" userName:"Ada" assistantName:"Dowe" onSend:sendMessage
ChatBox messages:messages mode:"prompt" showHeader:false showAttachments:false showVoiceNote:false placeholder:"Refine the prompt"LOAD MORE
Paginate history
Bind hasMore and onLoadMore to a function that appends older rows to the messages Signal.
STREAMING
Stop deliberately
When streaming is true, onStop gives the user a target-neutral escape hatch for an in-flight response.
TOOLS
Keep host actions explicit
Voice, file, and camera actions are named Dowe functions; ChatBox does not assume a remote AI provider.
API
Props
ChatBox also accepts common spacing, sizing, border, visibility, and accessibility props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||