Assistant panel

Frames an assistant exchange with a user message, reply, suggestion, and input row.

Preview

Make the intro tighter.

Done. Two sentences, same claim.

In action

Ask

On the sheet

Make the intro tighter.

Done. Two sentences, same claim.

When to use

Use it for

A chat panel with a head, a message thread, and an input row.
AssistantCard and AssistantTag for a suggestion the reply proposes.

Not for

Long transcripts without a ScrollArea.
Notifications; use toast.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Assistant, AssistantHead, AssistantInput, AssistantMsg, AssistantReply, AssistantSend, AssistantStatus, AssistantTitle, AssistantUserBlock } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/assistant.

2. Vendor the source

npx @noorddev/vlak-cli add assistant

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

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

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Assistant, AssistantHead, AssistantInput, AssistantMsg, AssistantReply, AssistantSend, AssistantStatus, AssistantTitle, AssistantUserBlock } from "@noorddev/vlak-react";

<Assistant>
  <AssistantHead>
    <AssistantTitle>Assistant</AssistantTitle>
    <AssistantStatus>Ready</AssistantStatus>
  </AssistantHead>
  <AssistantMsg user>
    <AssistantUserBlock>Make the intro tighter.</AssistantUserBlock>
  </AssistantMsg>
  <AssistantReply>Done. Two sentences, same claim.</AssistantReply>
  <AssistantInput>
    <input aria-label="Message" placeholder="Ask anything" />
    <AssistantSend>Send</AssistantSend>
  </AssistantInput>
</Assistant>

Props

Assistant

Chat panel: user block, reply, suggestion card, input row.

Also accepts HTMLAttributes<HTMLDivElement>.

AssistantCard

Also accepts HTMLAttributes<HTMLDivElement>.

AssistantDone

Also accepts HTMLAttributes<HTMLDivElement>.

AssistantHead

Also accepts HTMLAttributes<HTMLDivElement>.

AssistantInput

Also accepts HTMLAttributes<HTMLDivElement>.

AssistantMsg

Prop	Type	Default	Description
`user`	`boolean`

Also accepts HTMLAttributes<HTMLDivElement>.

AssistantReply

Also accepts HTMLAttributes<HTMLParagraphElement>.

AssistantSend

Also accepts HTMLAttributes<HTMLSpanElement>.

AssistantStatus

Also accepts HTMLAttributes<HTMLSpanElement>.

AssistantTag

Also accepts HTMLAttributes<HTMLSpanElement>.

AssistantText

Also accepts HTMLAttributes<HTMLParagraphElement>.

AssistantTitle

Also accepts HTMLAttributes<HTMLSpanElement>.

AssistantUserBlock

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

Layout parts only. Give the thread aria-live="polite" if replies stream in, and make the input a real <input> with a name and the send a <button>.

Markup

<div class="rs-ai"><div class="rs-ai-msg rs-ai-user"><div class="rs-ai-user-block">Make the intro tighter.</div></div><p class="rs-ai-reply">Done. Two sentences, same claim.</p></div>

Classes

.rs-ai.rs-ai-head.rs-ai-title.rs-ai-status.rs-ai-msg.rs-ai-user.rs-ai-user-block.rs-ai-reply.rs-ai-card.rs-ai-tag.rs-ai-text.rs-ai-done.rs-ai-input.rs-ai-send.rs-ai-status-dot