Reasoning

Reasoning block that writes, counts the time and collapses at the end.

data-u="ai-thinking"Demo

Example

Compare three component libraries for me.

The user wants to compare three component libraries. First I list the criteria: size, accessibility and license. Then I cross-check the sources and put together a short table with the final recommendation.

Collapsible reasoning

The agent's thinking arrives word by word and collapses when it's done.

<article class="u-ai-card">
  <div class="u-ai-card__panel" data-u="ai-thinking" role="group" aria-label="Demo: agent reasoning">
    <div class="u-ai-ask">Compare three component libraries for me.</div>
    <div class="u-ai-tile u-ai-think">
      <button class="u-ai-think__head" type="button" aria-expanded="true">
        <svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>
        <span><span class="u-ai-think__label">Thought for</span> <span class="u-ai-think__time">4s</span></span>
        <svg class="u-ai-ico u-ai-think__chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      <div class="u-ai-think__body" data-open="true"><div class="u-ai-think__inner">
        <p class="u-ai-think__text">The user wants to compare three component libraries. First I list the criteria: size, accessibility and license. Then I cross-check the sources and put together a short table with the final recommendation.</p>
      </div></div>
    </div>
  </div>
  <div class="u-ai-card__text">
    <h3 class="u-ai-card__title">Collapsible reasoning</h3>
    <p class="u-ai-card__desc">The agent's thinking arrives word by word and collapses when it's done.</p>
  </div>
</article>

Installation

Reasoning ships in the full package, along with the skill:

curl -fsSL unslop.leallabs.dev/i | sh

The example HTML, to paste:

curl -fsSL unslop.leallabs.dev/i | sh -s add ai-thinking

Uses The block is just HTML. The CSS and JS come from the full package's unslop.css and unslop.js.

Classes and variants

Class	What it does
`.u-ai-think`	The block.
`.u-ai-think__head`	Button that opens and closes, with the time in __time.
`.u-ai-think__body[data-open]`	Body, with __inner and __text.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
.`u-ai-`card__panel	`role="group"` and `aria-label`	Says it's a demo and of what.
header	`aria-expanded`	Open or collapsed. Clicking toggles it.

Keyboard

Key	Does
Tab	focuses the header and pauses the animation
Enter or Space	opens and collapses

Motion

Plays on its own when it enters the viewport, for up to 3 cycles, and stops in its final state. Hovering or focusing inside pauses it. With reduced motion, it shows the final state right away.

Events and API

No public events. For a real chat, copy the markup and wire up your own state, without relying on data-u for logic.