# Components

> One page per component of the package, per group of the panel's parts, and per card, with how it looks in the example shop and its props.

Each page shows a component in the example shop, in your docs theme: what it lends the assistant, its smallest usage, the exact text the model receives, its states, and its props. Everything here comes from `@super-assist/react`.

## Package

What a page lends the assistant, from `@super-assist/react` and `@super-assist/react/devtools`:

- [AssistedProvider](https://superassist.app/components/package/assisted-provider.md): the runtime, the universal instructions, the built-in tools and the cards. With `useAssisted`.
- [AssistedPage](https://superassist.app/components/package/assisted-page.md): a page, or a dialog over it, introduces itself.
- [AssistedAction](https://superassist.app/components/package/assisted-action.md): an element the assistant presses, rings or asks about. With `useAssistedAction`, `ring` and `useRing`.
- [AssistedInput](https://superassist.app/components/package/assisted-input.md): a native field the assistant fills. With `useAssistedInput`.
- [AssistedField](https://superassist.app/components/package/assisted-field.md): a control that keeps its value in state.
- [useAssistedTool](https://superassist.app/components/package/use-assisted-tool.md): a tool that runs in the browser.
- [AssistedDevtools](https://superassist.app/components/package/assisted-devtools.md): the devtools with an Assisted pages tab.

## Panel

`AssistedPanel` and its parts, one page per group:

- [Roots and window](https://superassist.app/components/panel/roots-and-window.md): the one-liner, `Floating`, `Sheet`, `Embedded`, `Launcher`, `Trigger` and `WindowControls`.
- [Header](https://superassist.app/components/panel/header.md): `Header`, `Footer`, `Icon`, `Title`, `PageLine`, `Close` and `Devtools`.
- [Threads](https://superassist.app/components/panel/threads.md): `ThreadMenu`, `ThreadSelect`, `ThreadDrawerToggle`, `ThreadDrawer`, `ThreadTitle`, `NewThread` and `DeleteThread`.
- [Conversation](https://superassist.app/components/panel/conversation.md): `Conversation`, `EmptyState`, `Messages`, `FollowUps`, `HandoffOffer`, `Resolution`, `ScrollToBottom`, `HistorySkeleton`, `ConversationSearch` and its toggle.
- [Composer](https://superassist.app/components/panel/composer.md): `Composer`, `Input`, `Attachments`, `AddAttachment`, `Dictate`, `ModelSelector` and `Send`.
- [Data parts](https://superassist.app/components/panel/data-parts.md): `SettingsToggle`, `SettingsPanel`, `ContextDisplay`, `ContextBreakdown` and `QuotaBanner`.

## Cards

How a tool's call shows in the conversation. The package brings them, and `cards` on `AssistedProvider` swaps them:

- [Confirm card](https://superassist.app/components/cards/confirm-card.md): asks before a consequential action or tool goes ahead.
- [Choices card](https://superassist.app/components/cards/choices-card.md): the question `offer_choices` asks, with two to four answers.
- [Links card](https://superassist.app/components/cards/links-card.md): the pages `show_links` offers to open.
- [Table card](https://superassist.app/components/cards/table-card.md): records of one kind, from `show_table`.
- [Spec card](https://superassist.app/components/cards/spec-card.md): one thing's properties, from `show_spec`.
- [Comparison card](https://superassist.app/components/cards/comparison-card.md): two or three options side by side, from `show_comparison`.
- [Sources card](https://superassist.app/components/cards/sources-card.md): the knowledge base passages under an answer, from `search_knowledge`.

The screenshots are of the example app. Its tool calls run in the page as they would for a model, but the conversations are seeded, so the user's and the assistant's sentences are written for the picture.