LocalMode /ui
Conversation

In-Message Error

A per-message inline error/retry block with auto-extracted error text and a classified hint for local inference failures.

In-Message Error

The InMessageError is an accessible per-message error/retry block rendered inline on a failed assistant message — not a global toast. It auto-extracts a readable message from the error and classifies common local-inference failures (OOM, WebGPU lost, model load) into a short hint, with a retry action that re-invokes generation. Data source: useChat (error state).

Preview

Open in

Installation

pnpm dlx shadcn@latest add @localmode/ui/conversation/in-message-error
npx shadcn@latest add @localmode/ui/conversation/in-message-error
yarn dlx shadcn@latest add @localmode/ui/conversation/in-message-error
bunx --bun shadcn@latest add @localmode/ui/conversation/in-message-error

Data source & dependencies

Data source: renders the error + retry callback you pass — works with any backend. Recommended producer: useChat().error and useChat().regenerate() from @localmode/react (on-device, optional).

  • clsx + tailwind-merge — via the shared cn() util (installed automatically as a registry dependency)

Files installed

  • in-message-error.tsxInMessageError + extractErrorMessage
  • lib/utils.ts — the cn() helper (if not already present)

Props

InMessageError

Prop

Type

Examples

Inline error on a failed turn

import { useChat } from '@localmode/react';
import { InMessageError } from '@/components/in-message-error';

const { status, error, regenerate } = useChat({ model });

{status === 'error' && error && (
  <InMessageError error={error} onRetry={() => regenerate()} />
)}

useChat().regenerate() re-runs the last turn in place — on failure it restores the previous reply, so retry is safe to wire directly.

Customization

The classify() helper maps error text to friendly hints — extend it for your provider’s error strings. extractErrorMessage is exported for reuse elsewhere.

These primitives are presentational and hook-driven: they render props and emit callbacks, holding only local view state. The orchestration state (e.g. useChat) lives in your app. Every surface uses shadcn/ui CSS-variable utilities, so it inherits your theme — restyle the copied file freely.

On this page