Components / AI chat
Activity disclosure
Collapsible reasoning, search steps and tool activity inside an answer.
@fabrials/ai-ui
Comparing the two layer orders before choosing one.
- Searched webcss cascade layers component libraries
- Searched webcolor-mix oklab browser support 2026
Ran a calculation
Installation
Import the control from
@fabrials/ai-ui, after setting the app up.TypeScript import { ActivityDisclosure, ActivityIcon, ReasoningDisclosure, SearchStepsDisclosure } from "@fabrials/ai-ui";import "@fabrials/ai-ui/styles.css";
API reference
| Prop / export | Type | Description |
|---|---|---|
streaming | boolean | ReasoningDisclosure shows Thinking, then Thought for durationSeconds. |
phase | SearchPhase | For search steps: searching, reading or done, with steps and sourceCount. |
live | boolean | ActivityDisclosure for any other activity. ActivityIcon marks the live state. |
open | boolean | Controlled open state. defaultOpen works uncontrolled. |
Behavior
Presentational. The host maps its stream events to these props. Live indicators stop under reduced motion.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.