Tool call

Tool running with steps that go from pending to done.

data-u="ai-tool"Demo

Example

search_customerssegment: "agri" Done

Validate parameters0.3s
Query the database0.5s
Filter results0.4s
Build the answer0.2s

Tool call

Pending, running and done states, with the step list moving forward one at a time.

<article class="u-ai-card">
  <div class="u-ai-card__panel" data-u="ai-tool" role="group" aria-label="Demo: tool call">
    <div class="u-ai-tile u-ai-tool">
      <div class="u-ai-tool__head">
        <span class="u-ai-tool__icon"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6l6 6-6 6M12 18h8"/></svg></span>
        <span class="u-ai-tool__name"><span>search_customers</span><small>segment: "agri"</small></span>
        <span class="u-ai-badge" data-state="done"><span class="u-ai-spin"></span><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span class="u-ai-badge__l">Done</span></span>
      </div>
      <ul class="u-ai-steps">
        <li class="u-ai-step" data-state="done"><span class="u-ai-step__st"><i class="pend"></i><i class="u-ai-spin run"></i><svg class="u-ai-ico ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Validate parameters<span class="u-ai-step__t">0.3s</span></li>
        <li class="u-ai-step" data-state="done"><span class="u-ai-step__st"><i class="pend"></i><i class="u-ai-spin run"></i><svg class="u-ai-ico ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Query the database<span class="u-ai-step__t">0.5s</span></li>
        <li class="u-ai-step" data-state="done"><span class="u-ai-step__st"><i class="pend"></i><i class="u-ai-spin run"></i><svg class="u-ai-ico ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Filter results<span class="u-ai-step__t">0.4s</span></li>
        <li class="u-ai-step" data-state="done"><span class="u-ai-step__st"><i class="pend"></i><i class="u-ai-spin run"></i><svg class="u-ai-ico ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Build the answer<span class="u-ai-step__t">0.2s</span></li>
      </ul>
    </div>
  </div>
  <div class="u-ai-card__text">
    <h3 class="u-ai-card__title">Tool call</h3>
    <p class="u-ai-card__desc">Pending, running and done states, with the step list moving forward one at a time.</p>
  </div>
</article>

Installation

Tool call 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-tool

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-tool`	The block, with __head and __name.
`.u-ai-badge[data-state]`	running or done.
`ul.u-ai-steps > li.u-ai-step[data-state]`	running or done. Without `data-state` it's pending.

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.
steps	`data-state`	The state is an attribute, also read by the CSS.

Keyboard

Key	Does
Tab	enters the card and pauses the animation while focus is there

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.