Chat Composer

Usage

import { ChatComposer } from '@wdzyi/ui';

<div style={{ height: 420 }}>
  <ChatComposer
    turns={turns}
    tabs={['This doc', 'Workspace']}
    suggestions={['What changed since Monday?']}
    onSend={(text) => ask(text)}
    onStop={stop}
    onNew={() => setTurns([])}
  />
</div>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

turnsChatComposerTurn[]

The conversation. Each turn has an id, the prompt, and its sections, each with a label, a meta, a time and a body. Add sections as they arrive, and mark the turn working until it’s done.

onSend(text: string) => void

Called with what was asked. The field empties itself after.

onStop() => void

While a turn works, Send becomes Stop, and Escape in the field stops it too.

onNew() => void

Shows a button in the header to start again.

tabs, tab, defaultTab, onTabChangestring[], string

What it can be asked about, as a switch in the header, such as this doc or the whole workspace.

suggestionsstring[]

Questions to start from while the thread is empty. Pressing one sends it.

title, placeholderstring = 'Ask about anything here', 'Ask a question'

Over the suggestions, and in the empty field.

value, defaultValue, onValueChangestring

The text in the field, if you’d rather hold it yourself.

pacenumber = 100

Roughly how long a word of a forming section takes to arrive, in ms, so 100 is about ten words a second.

Notes

• It fills the height it’s given, so give it a box with one. The thread keeps to its newest line while a reply grows, unless it’s been scrolled back to read.
• Until the first section, a line says what it’s doing, shining. A section that’s still forming streams its words in at the pace, a little faint, with the pixels working where its number goes. It settles to full ink over 700ms once the next one arrives or the turn ends, and any words still to come arrive at once.
• In the demo, the question is typed at a person’s pace, and each section comes after a look that takes longer the longer it says it took, so the first arrives after 1.7 seconds of reading the plan.
• The switch in the header is a radio group, so the arrow keys move between its choices. Enter sends, Shift and Enter starts a new line, and Escape stops a reply. The thread is a log, so a screen reader hears each section as it arrives.
• With reduced motion, sections arrive whole and settle without easing, and the plate in the switch doesn’t glide.