Response

Preview

In action

When to use

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { Persona, Response, ResponseActions, useResponse } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/response.

Copy the source

npx @noorddev/vlak-cli add response

Adds the component to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/response.json

Installs the same source through the shadcn CLI.

React

"use client";
import { Persona, Response, ResponseActions, useResponse } from "@noorddev/vlak-react";

function CompletedActions({ text }: { text: string }) {
  const { status } = useResponse();
  return status === "complete" ? <ResponseActions text={text} /> : null;
}

export function LeaseExchange() {
  return <>
    <Response from="user">When does the lease renew?</Response>
    <Response from="assistant" status="complete"
      avatar={<Persona variant="orb" size={20} />}
      actions={<CompletedActions text="The lease renews on 1 October." />}
      renderLayout={({ avatar, author, status, content, error, actions }) =>
        <div style={{ display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", gap: 12 }}>
          {avatar}
          <div style={{ minWidth: 0 }}>
            <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>{author}{status}</div>
            {content}{error}{actions}
          </div>
        </div>}
    >
      <p>The lease renews on <strong>1 October</strong>.</p>
    </Response>
  </>;
}

See the integration example to compose these components with your application's model and data.

Props

Response

One message with application-rendered content and a separate status announcement.

Also accepts HTMLAttributes<HTMLElement>.

The ref reaches HTMLElement.

useResponse (hook)

Reads speaker and response status from a custom descendant without threading props.

Keyboard

Accessibility

• A semantic article is named by its visible speaker. from identifies user or assistant without taking over the native role attribute.
• Custom layouts retain a fallback article name. Keep the supplied status part so phase changes remain announced, and give a non-text custom author an explicit accessible name when needed.
• Status is a separate polite, atomic live region. Changing response tokens are ordinary readable content and do not repeat the whole message through a live region.
• The streaming, complete, error, and stopped states are supplied by the application. An errorMessage is visible when status is error; the short response status announces the failure.
• Copy is shown only with copyText. Clipboard denial or unavailability reports a readable failure and allows retry. Pending writes prevent duplicate activation, and stale writes cannot announce success for new content.
• The 44px copy control has a focus outline and forced-colors styling. Native article attributes, className, style, and the article ref are forwarded.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<article class="rs-response" aria-labelledby="response-author"><div class="rs-response-header"><div class="rs-response-identity"><span class="rs-response-avatar" aria-hidden="true"><svg viewBox="0 0 20 20" width="20" height="20" fill="none" stroke="currentColor"><circle cx="10" cy="10" r="7" /></svg></span><span class="rs-response-author" id="response-author">Assistant</span></div><span class="rs-response-status" role="status" aria-live="polite" aria-atomic="true">Complete</span></div><div class="rs-response-content"><p>The lease renews on 1 October.</p></div></article>

Classes

Use elsewhere

More in AI