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.

DoweOnline
dowe
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:sendMessage

MODES

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

D
DoweOnline

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.

dowe
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 data

There are no records to display