Loading…

AI Chat

Block

A complete chat surface: transcript, reasoning, tool calls, sources and composer.

AI
11 components
1 file

You said:
How do I make an overflowing table keyboard-scrollable?
Assistant said:
Give the scrolling wrapper tabindex="0", a role of "region" and an accessible name. Without a focus stop, the columns past the edge are unreachable without a pointer.
148 tokens

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add ai-chat

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { AiChatBlock } from "@/components/blocks/ai-chat";

Built from

Every piece is a component you already have documentation for, and can change independently.

API

<AiChatBlock>

Prop	Type	Default
`messages` (required)	`ChatMessage[]`	—
`busy` A response is in flight.	`boolean`	`false`
`empty` Shown when the transcript is empty.	`ReactNode`	—
`model`	`string`	—
`models`	`ModelOption[]`	—
`onModelChange`	`(model: string) => void`	—
`onSend`	`(message: string) => void`	—
`onStop`	`() => void`	—
`placeholder`	`string`	`"Ask anything…"`
`waiting` Shown before the first token arrives.	`boolean`	`false`
`className`	`string`	—

Accessibility

Assembled from the AI components rather than reimplementing them, so their decisions still hold: the transcript is a list and not a live region, state is announced separately through ConversationStatus, and the composer will not send while an IME composition is active. Tool payloads are named per tool, so two open tool calls do not present two regions called "Result".