AiSender
AiSender is a smart input component with multi-line auto-resize, integrated icons, slash commands, and file attachment previews.
Basic Usage
Supports automatic submission when pressing Enter.
Loading State
Use :loading to indicate that AI is processing and input is disabled.
Advanced Features & Multi-modal
Provides high-level capabilities such as max-length, show-word-limit, and clearable. Easily implement complex input containers by utilizing prefix and actions slots.
Preset Interactions (AiInputAction Pattern)
Via the #actions slot, you can easily integrate common preset instructions such as summarization, polishing, etc.
Fully Custom Submit Slot
You can completely take over the submit area view logic via the #submit slot.
Slash Commands
Type / to trigger the command panel. Quickly select preset Prompt templates.
Attachments Preview
Supports previewing images and files before sending, with built-in upload progress and removal capability.
API
Props
| Property | Description | Type | Default |
|---|---|---|---|
modelValue / v-model | Input content binding | string | '' |
placeholder | Placeholder text | string | 'Send a message...' |
loading | Whether AI is responding | boolean | false |
disabled | Whether disabled | boolean | false |
maxLength | Native maxlength limit | number | — |
clearable | Whether to show clear button | boolean | false |
showWordLimit | Whether to show character count | boolean | false |
commands | Slash command list | AiCommand[] | [] |
attachments | Selected attachment list | AiAttachment[] | [] |
themeOverrides | Theme variable overrides | ComponentThemeVars | — |
AiCommand
| Property | Description | Type |
|---|---|---|
key | Command keyword (e.g. summary) | string |
label | Display name | string |
icon | Icon name | string |
description | Short description | string |
prompt | Prompt prefix to fill in | string |
AiAttachment
| Property | Description | Type |
|---|---|---|
id | Unique identifier | string |
name | Filename | string |
type | File type | string |
url | Preview image or URL | string |
status | Status | 'uploading' | 'success' | 'error' |
progress | Upload progress (0-100) | number |
Events
| Name | Description | Parameters |
|---|---|---|
send | Fired on send button or Enter | (value: string) => void |
clear | Fired when clear button is clicked | — |
command | Fired when command is selected | (command: AiCommand) => void |
remove-attachment | Fired when attachment is removed | (file: AiAttachment) => void |
Use in Nuxt
This component fully supports Nuxt 3/4. In Nuxt projects, the component will be automatically imported.
For detailed configuration, please see Nuxt Integration.
Theme Variables
| Variable Name | Description | Default Value |
|---|---|---|
--yh-ai-sender-bg | Input background color | var(--yh-bg-color) |
--yh-ai-sender-border-color | Border color | var(--yh-border-color) |
--yh-ai-sender-border-radius | Border radius | var(--yh-border-radius-base) |
--yh-ai-sender-focus-border-color | Focus border color | var(--yh-color-primary) |
--yh-ai-sender-text-color | Input text color | var(--yh-text-color-primary) |
--yh-ai-sender-placeholder-color | Placeholder text color | var(--yh-text-color-placeholder) |
Slots
| Name | Description |
|---|---|
prefix | Prefix content at top-left |
actions | Wrapper around send button |
submit | Custom submit button, exposes disabled, loading, submit |