Thinking Bar

kai-thinking-bar

A shimmering “thinking” indicator that signals the assistant is still reasoning. Add stoppable and it gains a stop button that fires kai-stop so users can skip to an answer.

• Shadow DOM
• Animated shimmer
• Optional stop affordance
• 1 event
• Fully attribute-driven

Preview

When to use

Place <kai-thinking-bar> in the message thread while the assistant is generating a response — it sits naturally above the streaming reply. Enable stoppable whenever users should be able to cut a long reasoning step short; handle kai-stop to cancel the in-flight request and prompt the model to answer with what it has.

Usage

<kai-thinking-bar text="Thinking" stoppable stop-label="Answer now"></kai-thinking-bar>

All three props are attributes — no JavaScript needed.

• stoppable — bare boolean attribute; shows the stop button.
• kai-stop — fires with no payload when the stop button is clicked; cancel the in-flight request in your handler.

Examples

Default

Remove the element from the DOM once the assistant reply arrives.

Code

Custom Label

Override text for a specific task like web search or code analysis.

Code

Stoppable

Code

Custom Stop Label

Code

Props

Property	Type	Default	Notes
text	string	'Thinking'	The shimmering label, e.g. "Thinking…".
stoppable	boolean	false	When true, show a "stop" affordance that fires a `stop` event.
stopLabel	string	'Answer now'	Label for the stop affordance.

Events

Event	Detail	Notes
kai-stop	—	The "stop / answer now" affordance was clicked.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ThinkingBar

---

Need a hand? Report a bug Ask for help