Message error

A failed reply with the fix right next to it. Network, rate limit with a live countdown, context too long, content filter and a generic failure.

Markdown

On this page

Each failure with the action that fixes it.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/message-error.json

Usage

tsx

import { MessageError } from "@/components/ui/chatcn/message-error"

<Message from="assistant" state="error">
  <MessageContent>{partialText}</MessageContent>
  <MessageError kind="rate-limit" retryAt={resetAt} onRetry={retry} onSwitchModel={openPicker} />
</Message>

Keep the partial reply above the error. Each kind shows only the actions that fix it, and only those you pass handlers for.

Kinds

Kind	Says	Fix
`network`	Connection lost	Retry
`rate-limit`	Rate limit reached, with the time left	Retry once the countdown ends, Switch model
`context`	This chat is too long	Start new chat, Switch model
`filtered`	Reply withheld	Edit message
`generic`	The reply failed, with optional details	Retry, Switch model

Props

Prop	Type	Notes
`kind`	`MessageErrorKind`	Defaults to `generic`
`title`, `description`	`ReactNode`	Override the copy
`details`	`string`	Status code or request id, behind a disclosure
`retryAt`	`number`	Epoch ms when sending is allowed again
`onRetry`, `onSwitchModel`, `onNewChat`, `onEdit`	`() => void`	Fix actions

Accessibility

The block is an alert, read as soon as it appears.
Red appears on the icon only; the headline says what happened in words.
The countdown ticks once per second with tabular figures, and the disabled Retry says how long is left.

Motion

None beyond the details disclosure chevron. An error should be calm, not dramatic.