Skip to contentSkip to navigation
DocsDocs

Conversation

Talk with an assistant or with other people, and follow each reply as it arrives.

BetaSince 1.0.0
On this page

Overview

Show code, AssistantChat.tsx

Variants

Between people

Each message from someone else names its author and time.

  • Replies arrive whole, so there is nothing to stop.
  • A message on its way says so until the server takes it.
Show code, BetweenPeople.tsx

Anatomy

  1. Log

  2. Formatted reply

  3. Reply actions

  4. Your message

  5. Composer

  6. Send or stop

Show code, ConversationAnatomy.tsx

The log of messages takes the space and scrolls, and the composer stays at its foot, so the draft is always in reach.

  • An assistant's answers are formatted text.
  • Copy comes once an answer is complete.

Behaviour

The first message

Before anything is said, the log's place holds a short question and a few suggestions.

  • Pressing one sends it as the first message.
  • The composer is there from the start.
Show code, FirstMessage.tsx

A reply as it arrives

An assistant's reply shows in the log at once and grows as it is written.

  • While it runs, the composer's send button is Stop.
  • Copy waits until the reply is complete.

Stopping a reply

Stop keeps what has arrived, marked as stopped, with Try again beside it. People can also simply write their next message.

Show code, StoppedReply.tsx

Failed sends

The message stays in the log where it was written, marked as not sent, with Try again beside it.

  • Nothing people wrote is lost.
  • The composer is free for the next message.
Show code, FailedSend.tsx

Scrolling

While people are at the end of the log, each new line keeps the newest in view.

  • Once they scroll up to read, the log stays where they are.
  • A Latest button takes them back to the end.

Rules

A conversation shows what happens to a reply in the log itself, where people are reading.

Use it when

  • A chat with an assistant whose replies stream in
  • Messages between people, such as a support chat or a team thread

Built from

Message, Composer, Markdown, Button, Spinner

DoThe reply in the log as it arrives, so people read while it is written.
Show code, ReplyAsItArrives.tsx
Don’tA spinner until the whole reply is ready: people wait with nothing to read.
Show code, WholeReplyAtOnce.tsx

Failed replies

Say so in the log, in the reply's place, keep any part that arrived, and offer Try again. A notice that comes and goes is easy to miss, and leaves a gap in the conversation.

One column

Keep the conversation one column that reads easily, even in a wide window, with the composer as wide as the log above it.

Content

Name the assistant plainly, and say in words what happens around a reply.

  • Suggestions written as whole questions, "What is still open for the launch?"
  • "Stopped" on a reply people stopped, with "Try again"
  • "Copy answer" as the name of the copy action

Accessibility

Focus and keyboard

Focus stays in the composer after a send, while a reply runs and after Stop, so people keep writing without looking for the field.

  • The log announces each new message once it is complete.
  • Tab reaches the log and its actions before the composer.
  • Where an action leaves as it is pressed, such as Try again, focus goes back to the composer.

Related