Component reference

ChatReasoning

A model's visible reasoning before it answers.

Preview

A model working before it answers

While active the newest lines stay in view and older ones fade under the top edge; when the host marks it done it folds to one row the reader can reopen.

packages/meowtail/stories/agent-progress.stories.tsxline 101tsx

render() {
  const shown = signal(2);
  const active = signal(true);
  const text = signal(reasoning.slice(0, 2).join("\n\n"));
  return (
    <Measure width="content">
      <Specimens>
        <Specimen label="Streaming">
          <ChatReasoning
            label="Drafting the rollout policy"
            doneLabel="Thought for 12s"
            text={text}
            active={active}
          />
          <ActionRow>
            <Button
              size="small"
              variant="outline"
              data-reasoning-stream
              onClick={() => {
                shown.value = Math.min(shown.value + 1, reasoning.length);
                text.value = reasoning.slice(0, shown.value).join("\n\n");
              }}
            >
              Stream a line
            </Button>
            <Button
              size="small"
              variant="quiet"
              data-reasoning-finish
              onClick={() => {
                active.value = !active.value;
              }}
            >
              Toggle finished
            </Button>
          </ActionRow>
        </Specimen>
        <Specimen label="Finished">
          <ChatReasoning
            label="Comparing the rollout options"
            doneLabel="Thought for 8s"
            text={reasoning.join("\n\n")}
          />
        </Specimen>
      </Specimens>
    </Measure>
  );
}

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { ChatReasoning } from "meowtail";

<ChatReasoning
  label="Comparing the rollout options"
  doneLabel="Thought for 8s"
  text={reasoning.join("\n\n")}
/>

API reference

While active it stays open and shows the newest lines under a fading edge; when the host marks it inactive it folds to one disclosure row like ChatProcess. Unrelated to the composer's reasoning-effort picker (reasoningOptions), which chooses how much to reason.

Props

Prop	Type	Default
`label`RequiredWhat the model is doing now, for example "Drafting the rollout policy".	`MaybeSignal<string>`	–
`doneLabel`The summary once the work stops, for example "Thought for 12s"; the host measures it.	`MaybeSignal<string>`	–
`text`RequiredThe reasoning text the host streams in; shown as plain text, never as markup.	`MaybeSignal<string>`	–
`active`	`MaybeSignal<boolean>`	`false`

Also takes className, children and the attributes and events of its root element.

DOM parts

rootsummaryiconlabelbodytext

Registry

The component is registered as chat-reasoning in the meowtail component registry.