Thinking

Usage

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

<Thinking
  working={!done}
  steps={[
    { label: 'Reading the brief' },
    { label: 'Comparing the last flows', meta: '3 flows' },
  ]}
/>

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

Props

stepsThinkingStep[]

What it’s done so far, each with a label and a quieter meta beside it. Add to it as things happen. For reasoning, each label is a paragraph, and the last can grow as it’s written.

workingboolean = false

Still going. The header shines and counts, and the newest step works with its label shining. Reasoning or a query still arriving keeps it going until they’re in.

kind'steps' | 'reasoning' | 'search' | 'tools' = 'steps'

A checklist, reasoning in prose, the pages a search read, with href and icon, or tools with the lines they added and took away.

label, doneLabelstring

The header while it works, and once it’s done. By default, done says how long it took or how much it did.

querystring

For a search: what it searched for. It types itself out, and the pages wait for it.

morestring

Under the steps once it’s done, such as how many more pages it read.

stayOpenboolean = false

Stays open once it’s done, rather than folding a moment later, for a trace that’s worth keeping in view.

pacenumber = 100

For reasoning: roughly how long a word takes to arrive, in ms, so 100 is about ten words a second. It’s never quite even.

Notes

• The header counts real time while it works. In the demo, each step works for one and a half to three seconds before its tick, so it ends on Thought for 9 seconds. A tool takes what it would, a read under a second, an edit two and a build nearly five, and its lines added and taken away come in with its tick.
• Reasoning streams in a word or two at a time out of a soft blur, about ten words a second, with a beat of a third of a second after each sentence and about a second between paragraphs. A search types its query out at about 55ms a letter before the pages come. It counts as working until the last word is in, so the header never says it’s done over words still arriving.
• It opens by itself while it works, stays open 1.8 seconds once it’s done so the last step can be seen landing, then folds. Once someone opens or shuts it, it stays how they left it. The fold animates the grid’s rows, so it’s right however long the trace gets.
• Only the header is announced, so a screen reader hears it start and finish rather than every word.
• A trace that was never working, such as one from earlier in a conversation, shows whole. With reduced motion, reasoning and the query appear whole, steps arrive without the blur, and the fold doesn’t animate.