Chat

Question, an answer arriving bit by bit and the copy, regenerate and like actions.

data-u="ai-chat"Demo

Example

Summarize this month's report.

Revenue grew 12% over last month, driven by annual plans. Support costs went down and churn held steady at 2%. I'd keep the pace and revisit pricing next quarter.

Chat with the agent

User bubble, a streaming answer and copy, regenerate and like actions at the end.

<article class="u-ai-card">
  <div class="u-ai-card__panel" data-u="ai-chat" role="group" aria-label="Demo: chat with the agent">
    <div class="u-ai-chat">
      <div class="u-ai-ask u-ai-x">Summarize this month's report.</div>
      <div class="u-ai-reply">
        <span class="u-ai-reply__av"><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>
        <div class="u-ai-reply__body">
          <span class="u-ai-dots u-ai-reply__typing" aria-hidden="true" hidden><i></i><i></i><i></i></span>
          <p class="u-ai-reply__text">Revenue grew 12% over last month, driven by annual plans. Support costs went down and churn held steady at 2%. I'd keep the pace and revisit pricing next quarter.</p>
          <div class="u-ai-acts">
            <button class="u-ai-act u-ai-x" type="button" data-act="copy" aria-label="Copy answer"><svg class="u-ai-ico cp" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h8"/></svg><svg class="u-ai-ico ok" viewBox="0 0 24 24" aria-hidden="true" style="stroke-width:2.2"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></button>
            <button class="u-ai-act u-ai-x" type="button" data-act="redo" aria-label="Regenerate answer"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 0 0-14.5-3.5M4 4v4h4M4 13a8 8 0 0 0 14.5 3.5M20 20v-4h-4"/></svg></button>
            <button class="u-ai-act u-ai-x" type="button" data-act="like" aria-pressed="false" aria-label="Like answer"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 11v9H4v-9zM7 11l4-8c1.5 0 2.5 1 2.2 2.5L12.7 9H19a2 2 0 0 1 2 2.4l-1.3 6.6A2 2 0 0 1 17.7 20H7"/></svg></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="u-ai-card__text">
    <h3 class="u-ai-card__title">Chat with the agent</h3>
    <p class="u-ai-card__desc">User bubble, a streaming answer and copy, regenerate and like actions at the end.</p>
  </div>
</article>

Installation

Chat 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-chat

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-ask`	Question bubble.
`.u-ai-reply`	Answer: __av (avatar), __body, __text, __typing.
`.u-ai-acts > button.u-ai-act`	Actions, with `data-act` copy, redo or like.

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.
like button	`aria-pressed`	Toggles liked.

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.