Skip to main content
Urbicon UI
source

ReasoningDisclosureexperimental

Collapsed, muted disclosure for a model's thinking trace — a pulsing 'Thinking' label while streaming, 'Thought for Xs' once settled, rendered through StreamingMarkdown.

The user wants a range, not a single date.

  • DatePicker binds one Date; the range preset keeps one popover for both bounds.

  • I'll point them at mode="range" and the onValueChange shape.

Loading syntax highlighting...

01 Examples

Settled trace with a duration

Once the model finishes thinking, pass the elapsed time as durationMs and the header reads 'Thought for Xs'. It stays collapsed — the reader expands it only if they care how the answer was reached. Inside, the trace renders through StreamingMarkdown in a damped tertiary tone.

The user is asking for a date range, so a single DatePicker will not do.

  • DatePicker binds one Date.

  • For two bounds I want the range preset, keeping one popover.

I'll suggest DatePicker with mode="range" and note the onValueChange shape.

Loading syntax highlighting...

Streaming: the label pulses 'Thinking'

While the caller sets streaming, the header shows 'Thinking' with a gentle pulse (disabled under prefers-reduced-motion) and the trace grows live. When the stream ends, swap streaming off and hand it a durationMs — the label settles to 'Thought for Xs' without a layout jump.
Loading syntax highlighting...

Localized header

The whole header is text-driven: formatDuration receives whole seconds, thinkingLabel and reasoningLabel cover the streaming and no-duration cases. Override all three to localize — here in German.

Kurz abgewogen: Toast fuer die Bestaetigung, kein Dialog — die Aktion ist nicht destruktiv.

Loading syntax highlighting...

02 Accessibility

Disclosure semantics

The header is a real <button> carrying aria-expanded and aria-controls for the trace region — the standard Collapsible contract. Tab to reach it, Enter or Space to toggle. Focus rings use focus-visible:.

Reduced motion

The "Thinking" pulse is guarded by motion-reduce:animate-none — readers who set prefers-reduced-motion get the same label without the animation. The label change itself is enough of a status cue.

Untrusted output

The trace is model output, so it renders through StreamingMarkdown — never {@html} — and any links inherit the same strict urlPolicy as the rest of the chat surface.

03 API Reference

14 props
14 props 1 required

No matching properties

No matching properties

04 Installation

Import

Loading syntax highlighting...
llm.txt