Chat Composer Drawer
@astryxdesign/core v0.7.1 · ChatComposerDrawer
Usage
Use ChatComposerDrawer in the ChatComposer drawer slot for supplementary content such as attachments, context chips, or previews. Provide count only when people should be able to collapse that content.
import { ChatComposerDrawer } from '@astryx-vue/core/Chat'Anatomy
| Element | Description |
|---|---|
| Root surface | The drawer surface that composes above the ChatComposer body. |
| Disclosure toggle | The keyboard- and pointer-operable collapse control rendered when count is provided. |
| Collapsed summary | The default count Badge and label, or caller-provided visual content, presented while the drawer is collapsed. |
| Content area | The caller-provided supplementary content; collapsed descendants are unavailable to keyboard and assistive technology. |
Best practices
| Guidance | Practices |
|---|---|
| Do | Give label a concrete plural noun such as “Attachments” so the expand and collapse actions have a useful accessible name. |
| Do | Use controlled v-model:is-collapsed with collapsedChange when another part of the page owns drawer state; otherwise use defaultIsCollapsed. |
| Don't | Put primary composer actions in the drawer; use ChatComposer footerActions or sendActions so those controls remain available when the drawer is collapsed. |
Examples
Common configurations, variations, and states.
ChatComposerDrawer — Attachments
Drawer with two rows: a scrollable carousel of image thumbnails and a row of removable file tokens. Omit count to keep the drawer always expanded.
ChatComposerDrawer — Collapsible
Drawer with many items and a collapse toggle. Pass count to enable the toggle; collapsed state shows a badge with the total count and a label.
ChatComposerDrawer — Feedback
- Do you want to proceed?
- A
- B
- C
Chat composer drawer with a feedback prompt and selectable lettered options. Use for user confirmation workflows that require explicit action before proceeding.
ChatComposerDrawer — With Progress
Drawer paired with a context progress bar in the header. Show context window usage when attachments consume part of the available token budget.