AI chat

Chat patterns mapped to installable Ward components.

You What changed in the latest draft?

Assistant The heading is shorter and the primary action is clearer.

Ready for another question

Build the parts

Prompt Bar captures input. Streaming Text handles progressive output. Thinking presents work in progress.

How to build

Make a live assistant conversation understandable while it waits, streams and fails.

Keep user and assistant turns distinct. Announce status in a live region, provide Stop while generating, and preserve a failed prompt for retry. Do not represent a model response as a verified source without citations.

Original starting point

<section aria-label="Conversation">
  <ol>{messages.map(message => <li key={message.id}>{message.text}</li>)}</ol>
  <p role="status">{streaming ? "Generating response" : "Ready"}</p>
  <form onSubmit={send}><input aria-label="Message" /><button>Send</button></form>
</section>

Open Ward Chat →