A scrolling conversation with per-turn actions, announced as a polite log restricted to additions — so a streaming reply is not re-read on every token — and auto-scroll that only pins when the user is already at the bottom.
components/chat-thread-panel.tsxnpx hoverlab add chat-thread-panel
Or over MCP, from your editor's agent — no account needed.
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Start a page with this section — add more, order them, and leave with the page source.
Revenue assistant
Connected to Warehouse · gpt-class model
Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.
/**
* <ChatThreadPanel> — the conversation itself: a scrolling thread with a
* composer pinned under it.
*
* The part every hand-rolled chat gets wrong is the announcement. A thread
* is a log, so it wants `role="log"` with `aria-live="polite"` — new turns
* are read when they arrive and the reader is not interrupted mid-sentence.
* What it must NOT be is `aria-live="assertive"`, which is what most
* examples reach for and which makes a screen reader talk over the user
* while they are still typing the next message.
*
* `aria-relevant="additions"` matters just as much: without it, a streaming
* assistant message re-announces the whole answer on every token, because
* every token is a text mutation inside the live region. Restricting the
* region to additions is the difference between "one new message" and the
* same paragraph read forty times.
*
* The other half is scroll. Pinning to the bottom on every new message is
* correct only while the user is already at the bottom; doing it
* unconditionally yanks them out of the message they scrolled up to read.
* `stuck` tracks that, and the jump-to-latest button appears when it is
* false, which is the affordance the auto-scroll replaced.
*/
'use client'
import * as React from 'react'
import { ArrowDown, Bot, Copy, RefreshCw, Send, ThumbsDown, ThumbsUp, User } from 'lucide-react'
export interface ChatMessage {
id: string
role: 'user' | 'assistant'
content: string
/** Shown under an assistant turn, e.g. "Searched 3 sources · 1.4s". */
meta?: string
}
export interface ChatThreadPanelProps {
title?: string
subtitle?: string
messages?: ChatMessage[]
placeholder?: string
/**
* Skip the mount-time scroll to the newest message. A thread previewing
* itself inside a grid would otherwise scroll the host page to this card.
*/
embedded?: boolean
className?: string
}
const DEFAULT_MESSAGES: ChatMessage[] = [
{
id: '1',
role: 'user',
content: 'Which of our regions missed their Q3 target, and by how much?',
},
{
id: '2',
role: 'assistant',
content:
'Two of the five missed. EMEA came in at 91% of target (−$412k) and APAC at 88% (−$260k). AMER, LATAM and ANZ all cleared, with LATAM the strongest at 118%. The EMEA gap is almost entirely one deal that slipped into October.',
meta: 'Queried 2 tables · 1.4s',
},
{
id: '3',
role: 'user',
content: 'Is that slipped deal still open?',
},
{
id: '4',
role: 'assistant',
content:
'Yes — it moved to Contracting on 4 October and is forecast to close this quarter. Booking it in Q3 would have put EMEA at 103%.',
meta: 'Queried 1 table · 0.8s',
},
]
export function ChatThreadPanel({
title = 'Revenue assistant',
subtitle = 'Connected to Warehouse · gpt-class model',
messages = DEFAULT_MESSAGES,
placeholder = 'Ask a follow-up…',
embedded = false,
className = '',
}: ChatThreadPanelProps) {
const [draft, setDraft] = React.useState('')
const [stuck, setStuck] = React.useState(true)
const scrollRef = React.useRef<HTMLDivElement>(null)
// "Near" rather than "at" — subpixel scroll heights mean an exact equality
// check is false on a thread the user is, visually, at the bottom of.
function onScroll() {
const el = scrollRef.current
if (!el) return
setStuck(el.scrollHeight - el.scrollTop - el.clientHeight < 32)
}
function scrollToLatest(behavior: ScrollBehavior = 'smooth') {
const el = scrollRef.current
if (!el) return
el.scrollTo({ top: el.scrollHeight, behavior })
}
React.useEffect(() => {
// `scrollTo` on the container, never `scrollIntoView` on the message —
// the latter walks every scrollable ancestor including the document.
if (!embedded) scrollToLatest('auto')
}, [embedded])
return (
<div
className={`mx-auto flex h-[34rem] w-full max-w-2xl flex-col overflow-hidden rounded-2xl border border-border/60 bg-card ${className}`}
>
{/* -- Header ----------------------------------------------------- */}
<div className="flex items-center gap-3 border-b border-border/60 px-5 py-3.5">
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10 text-primary">
<Bot aria-hidden className="h-4 w-4" />
</span>
<div className="min-w-0">
<p className="truncate text-sm font-semibold">{title}</p>
<p className="truncate text-xs text-muted-foreground">{subtitle}</p>
</div>
</div>
{/* -- Thread ----------------------------------------------------- */}
<div className="relative min-h-0 flex-1">
<div
ref={scrollRef}
onScroll={onScroll}
role="log"
aria-live="polite"
aria-relevant="additions"
aria-label="Conversation"
className="h-full space-y-5 overflow-y-auto px-5 py-5"
>
{messages.map((message) =>
message.role === 'user' ? (
<div key={message.id} className="flex justify-end gap-3">
<div className="max-w-[80%] rounded-2xl rounded-ee-md bg-primary px-4 py-2.5 text-sm leading-relaxed text-primary-foreground">
{/* Named for a reader that lands here out of context. */}
<span className="sr-only">You said: </span>
{message.content}
</div>
<span
aria-hidden
className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-border/60 bg-muted text-muted-foreground"
>
<User className="h-3.5 w-3.5" />
</span>
</div>
) : (
<div key={message.id} className="flex gap-3">
<span
aria-hidden
className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary"
>
<Bot className="h-3.5 w-3.5" />
</span>
<div className="min-w-0 max-w-[85%]">
<div className="rounded-2xl rounded-es-md border border-border/60 bg-background px-4 py-2.5 text-sm leading-relaxed">
<span className="sr-only">Assistant said: </span>
{message.content}
</div>
<div className="mt-1.5 flex items-center gap-1">
{message.meta ? (
<span className="me-1 text-xs text-muted-foreground">{message.meta}</span>
) : null}
<TurnAction icon={<Copy className="h-3.5 w-3.5" />} label="Copy reply" />
<TurnAction icon={<RefreshCw className="h-3.5 w-3.5" />} label="Regenerate" />
<TurnAction icon={<ThumbsUp className="h-3.5 w-3.5" />} label="Good reply" />
<TurnAction icon={<ThumbsDown className="h-3.5 w-3.5" />} label="Bad reply" />
</div>
</div>
</div>
),
)}
</div>
{/* Only offered while it is needed — a permanent button here reads
as a broken scroll position. */}
{stuck ? null : (
<button
type="button"
onClick={() => scrollToLatest()}
className="absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-border/60 bg-card px-3 py-1.5 text-xs font-medium shadow-lg transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
<ArrowDown aria-hidden className="h-3.5 w-3.5" />
Jump to latest
</button>
)}
</div>
{/* -- Composer --------------------------------------------------- */}
<form
onSubmit={(e) => {
e.preventDefault()
setDraft('')
}}
className="border-t border-border/60 p-3"
>
<div className="flex items-end gap-2 rounded-xl border border-border/60 bg-background p-2 focus-within:ring-2 focus-within:ring-ring">
<textarea
rows={1}
value={draft}
onChange={(e) => setDraft(e.target.value)}
onKeyDown={(e) => {
// Enter sends, Shift-Enter breaks the line — and the IME guard
// stops Enter-to-commit-a-candidate from firing a send in
// Japanese, Chinese and Korean input.
if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
e.preventDefault()
e.currentTarget.form?.requestSubmit()
}
}}
placeholder={placeholder}
aria-label={placeholder}
className="max-h-32 min-h-9 flex-1 resize-none bg-transparent px-1.5 py-1.5 text-sm outline-none placeholder:text-muted-foreground border border-transparent"
/>
<button
type="submit"
disabled={draft.trim().length === 0}
className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-opacity disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
<Send aria-hidden className="h-4 w-4 rtl:rotate-180" />
<span className="sr-only">Send message</span>
</button>
</div>
</form>
</div>
)
}
/**
* An icon-only action under an assistant turn.
*
* The label is `sr-only` rather than a `title`: a tooltip attribute is not
* reliably read, and an icon button with no accessible name is announced as
* "button" four times in a row.
*/
function TurnAction({ icon, label }: { icon: React.ReactNode; label: string }) {
return (
<button
type="button"
className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
<span aria-hidden>{icon}</span>
<span className="sr-only">{label}</span>
</button>
)
}
bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.Drop it at components/chat-thread-panel.tsx and import it where you need the section:
import { ChatThreadPanel } from '@/components/chat-thread-panel'4 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.
Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.
| Prop | Type | Default |
|---|---|---|
title | string | 'Revenue assistant' |
subtitle | string | 'Connected to Warehouse · gpt-class model' |
messages | ChatMessage[] | DEFAULT_MESSAGES |
placeholder | string | 'Ask a follow-up…' |
embeddedSkip the mount-time scroll to the newest message. A thread previewing itself inside a grid would otherwise scroll the host page to this card. | boolean | false |
className | string | '' |
The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.
This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.
<!--
Assistant Thread with Composer — markup from the Hoverlab catalog.
This is the block rendered once to HTML and wrapped as a component
file. It is not a port of the React source: the Tailwind classes carry
the design, which is the part that took the work, and they are the same
in every framework.
This block is interactive in React and the handlers are NOT here.
Buttons, toggles and menus render in their initial state and do
nothing until you wire them up.
-->
<div class="mx-auto flex h-[34rem] w-full max-w-2xl flex-col overflow-hidden rounded-2xl border border-border/60 bg-card ">
<div class="flex items-center gap-3 border-b border-border/60 px-5 py-3.5">
<span class="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10 text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot h-4 w-4" aria-hidden="true">
<path d="M12 8V4H8"></path>
<rect width="16" height="12" x="4" y="8" rx="2"></rect>
<path d="M2 14h2"></path>
<path d="M20 14h2"></path>
<path d="M15 13v2"></path>
<path d="M9 13v2"></path>
</svg>
</span>
<div class="min-w-0">
<p class="truncate text-sm font-semibold">Revenue assistant</p>
<p class="truncate text-xs text-muted-foreground">Connected to Warehouse · gpt-class model</p>
</div>
</div>
<div class="relative min-h-0 flex-1">
<div role="log" aria-live="polite" aria-relevant="additions" aria-label="Conversation" class="h-full space-y-5 overflow-y-auto px-5 py-5">
<div class="flex justify-end gap-3">
<div class="max-w-[80%] rounded-2xl rounded-ee-md bg-primary px-4 py-2.5 text-sm leading-relaxed text-primary-foreground"><span class="sr-only">You said: </span>Which of our regions missed their Q3 target, and by how much?</div>
<span aria-hidden="true" class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-border/60 bg-muted text-muted-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user h-3.5 w-3.5" aria-hidden="true">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</span>
</div>
<div class="flex gap-3">
<span aria-hidden="true" class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot h-3.5 w-3.5" aria-hidden="true">
<path d="M12 8V4H8"></path>
<rect width="16" height="12" x="4" y="8" rx="2"></rect>
<path d="M2 14h2"></path>
<path d="M20 14h2"></path>
<path d="M15 13v2"></path>
<path d="M9 13v2"></path>
</svg>
</span>
<div class="min-w-0 max-w-[85%]">
<div class="rounded-2xl rounded-es-md border border-border/60 bg-background px-4 py-2.5 text-sm leading-relaxed"><span class="sr-only">Assistant said: </span>Two of the five missed. EMEA came in at 91% of target (−$412k) and APAC at 88% (−$260k). AMER, LATAM and ANZ all cleared, with LATAM the strongest at 118%. The EMEA gap is almost entirely one deal that slipped into October.</div>
<div class="mt-1.5 flex items-center gap-1">
<span class="me-1 text-xs text-muted-foreground">Queried 2 tables · 1.4s</span>
<button type="button" class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" aria-hidden="true">
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
</svg>
</span>
<span class="sr-only">Copy reply</span>
</button>
<button type="button" class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw h-3.5 w-3.5" aria-hidden="true">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
<path d="M21 3v5h-5"></path>
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
<path d="M8 16H3v5"></path>
</svg>
</span>
<span class="sr-only">Regenerate</span>
</button>
<button type="button" class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-up h-3.5 w-3.5" aria-hidden="true">
<path d="M7 10v12"></path>
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path>
</svg>
</span>
<span class="sr-only">Good reply</span>
</button>
<button type="button" class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-down h-3.5 w-3.5" aria-hidden="true">
<path d="M17 14V2"></path>
<path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"></path>
</svg>
</span>
<span class="sr-only">Bad reply</span>
</button>
</div>
</div>
</div>
<div class="flex justify-end gap-3">
<div class="max-w-[80%] rounded-2xl rounded-ee-md bg-primary px-4 py-2.5 text-sm leading-relaxed text-primary-foreground"><span class="sr-only">You said: </span>Is that slipped deal still open?</div>
<span aria-hidden="true" class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-border/60 bg-muted text-muted-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user h-3.5 w-3.5" aria-hidden="true">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</span>
</div>
<div class="flex gap-3">
<span aria-hidden="true" class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot h-3.5 w-3.5" aria-hidden="true">
<path d="M12 8V4H8"></path>
<rect width="16" height="12" x="4" y="8" rx="2"></rect>
<path d="M2 14h2"></path>
<path d="M20 14h2"></path>
<path d="M15 13v2"></path>
<path d="M9 13v2"></path>
</svg>
</span>
<div class="min-w-0 max-w-[85%]">
<div class="rounded-2xl rounded-es-md border border-border/60 bg-background px-4 py-2.5 text-sm leading-relaxed"><span class="sr-only">Assistant said: </span>Yes — it moved to Contracting on 4 October and is forecast to close this quarter. Booking it in Q3 would have put EMEA at 103%.</div>
<div class="mt-1.5 flex items-center gap-1">
<span class="me-1 text-xs text-muted-foreground">Queried 1 table · 0.8s</span>
<button type="button" class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" aria-hidden="true">
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
</svg>
</span>
<span class="sr-only">Copy reply</span>
</button>
<button type="button" class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw h-3.5 w-3.5" aria-hidden="true">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
<path d="M21 3v5h-5"></path>
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
<path d="M8 16H3v5"></path>
</svg>
</span>
<span class="sr-only">Regenerate</span>
</button>
<button type="button" class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-up h-3.5 w-3.5" aria-hidden="true">
<path d="M7 10v12"></path>
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path>
</svg>
</span>
<span class="sr-only">Good reply</span>
</button>
<button type="button" class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-down h-3.5 w-3.5" aria-hidden="true">
<path d="M17 14V2"></path>
<path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"></path>
</svg>
</span>
<span class="sr-only">Bad reply</span>
</button>
</div>
</div>
</div>
</div>
</div>
<form class="border-t border-border/60 p-3">
<div class="flex items-end gap-2 rounded-xl border border-border/60 bg-background p-2 focus-within:ring-2 focus-within:ring-ring">
<textarea rows="1" placeholder="Ask a follow-up…" aria-label="Ask a follow-up…" class="max-h-32 min-h-9 flex-1 resize-none bg-transparent px-1.5 py-1.5 text-sm outline-none placeholder:text-muted-foreground border border-transparent"></textarea>
<button type="submit" disabled="" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-opacity disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send h-4 w-4 rtl:rotate-180" aria-hidden="true">
<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path>
<path d="m21.854 2.147-10.94 10.939"></path>
</svg>
<span class="sr-only">Send message</span>
</button>
</div>
</form>
</div>
What each framework gets across the whole catalog — effects convert properly; this rung is markup.
The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
Want the whole screen instead of this one section? Open a page and copy it entire.
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Agent ChatCopying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
The trigger menus done properly: @ and / open only at a token boundary, the query is derived from the caret so the menu closes itself, and focus never leaves the textarea — the combobox pattern, not a floating div.
Token-by-token text with linked citations, follow-up chips and a caret that stops the moment the stream does. The status is announced once; the prose is deliberately outside every live region.
The blank thread, answered: grouped starter prompts as real lists of buttons, each group labelled, so the highest-leverage screen in an AI product is not a centred logo.
The answers a regenerate throws away — siblings rather than replacements, an edited question that branches in place, and a plain sentence about what happens to the replies below.
The two-pane assistant layout, with the mismatch nobody else states: the canvas names the version it is showing and says so when that is not the one the conversation is about. Versions link back to the turn that made them.
Model selection with the three numbers the choice actually turns on — capability, latency and cost per message — and locked models explained rather than greyed out.
Files staged against a prompt with a running context-token budget, unreadable files flagged before send, removal allowed mid-upload, and a send button that names its one blocker.