Status

MessageStatus

Status banner with optional sub-steps — typically used to show tool / agent progress inside a streaming response (similar to "Searching the web…" / "Reading file…" patterns). Reads theme.status from ChatContext (or falls back to default).

Imports

import { MessageStatus, MessageStatusItem, StatusIcon } from 'reachat';
import type { MessageStatusState, MessageStatusStep } from 'reachat';

Types

type MessageStatusState = 'loading' | 'complete' | 'error';

interface MessageStatusStep {
  id: string;
  text: string;
  status?: MessageStatusState;  // default 'loading'
}

MessageStatus Props

Animations: enter / exit fade + 10px slide via Framer Motion.

Default usage

<MessageStatus
  status="loading"
  text="Searching the web"
  steps={[
    { id: '1', text: 'Querying index', status: 'complete' },
    { id: '2', text: 'Reading top results', status: 'loading' },
    { id: '3', text: 'Drafting summary' }
  ]}
/>

When the run completes:

<MessageStatus
  status="complete"
  text="Found 12 results"
  steps={steps.map(s => ({ ...s, status: 'complete' }))}
/>

MessageStatusItem

Renders one row of steps — used internally by MessageStatus. Exposed for custom layouts.

StatusIcon

Status-aware icon. Renders different SVGs for loading (spinner), complete (check), error (cross).

Theme keys

theme.status.{base, header}
theme.status.icon.{base, loading, complete, error}
theme.status.text.{base, loading, complete, error}
theme.status.steps.base
theme.status.steps.step.{base, icon, text, loading, complete, error}