AiEditorSender Panel Input

AiEditorSender is a powerful AI conversation input component inspired by Element Plus X EditorSender. It integrates attachment display, toolbars, and custom slots, making it suitable for complex AI interaction scenarios.

Basic Usage

Included default input box, word count, and send button.

Basic Usage

Attachment Display and Operations

Built-in attachment list layout (for display only, upload logic needs external control), supports preview and removal.

code-snippet.ts

ui-prototype.png

Attachment Display and Operations

Status and Toolbar Slots

Through toolbar and actions slots, you can freely extend the business logic at the bottom of the input box.

gpt4

Status and Toolbar Slots

Command Panel

Trigger the command panel by typing /. Supports fuzzy search, icons, descriptions and cascade sub-commands.

Basic Command Panel

Basic Command Panel

Commands with Description

Commands with Description

Cascade Command Menu

Cascade Command Menu

Custom Trigger Character

Custom Trigger Character

API

Props

Name	Description	Type	Default
model-value	V-model for input content	string	''
placeholder	Placeholder text	string	''
disabled	Whether to disable	boolean	false
loading	Whether in loading/sending state	boolean	false
attachments	Attachment list	AttachmentItem[]	[]
show-word-limit	Whether to show word limit	boolean	true
max-length	Maximum word limit	number	undefined
rows	Default initial rows	number	1

Command Panel Props

Name	Description	Type	Default
enable-commands	Enable command panel	boolean	true
command-trigger	Command trigger character	string	'/'
commands	Command list	AiCommandItem[]	[]
command-panel-position	Panel position	'top' | 'bottom'	'bottom'
command-panel-align	Panel alignment	'start' | 'center' | 'end'	'start'
command-panel-width	Panel width	string | number	320
command-panel-max-height	Panel max height (px)	number	400
show-command-description	Show command description	boolean	true
show-command-icon	Show command icon	boolean	true
command-search-delay	Search debounce delay (ms)	number	150
enable-command-cascade	Enable cascade sub-menu	boolean	true
cascade-offset	Cascade panel offset (px)	number	4

Events

Name	Description	Callback Parameters
update:model-value	Triggered when content changes	(value: string)
send	Triggered when clicking send or pressing Enter (without Shift)	(value: string)
change	Triggered when content change is complete	(value: string)
remove-attachment	Triggered when clicking attachment remove button	(index: number, item: AttachmentItem)
clear	Triggered when clearing content	()

Command Panel Events

Name	Description	Callback Parameters
command-select	Triggered when selecting a command	(command: AiCommandItem, parentCommand?: AiCommandItem)
command-search	Triggered when searching commands	(keyword: string)
command-panel-show	Triggered when panel shows	()
command-panel-hide	Triggered when panel hides	()
command-cascade	Triggered when cascade sub-menu opens	(command: AiCommandItem, parentCommand: AiCommandItem)

Slots

Name	Description
header	Top attachment display area slot
toolbar	Bottom left shortcut toolbar slot
actions	Bottom right additional operation slot (after word count, before send button)
submit	Custom send button

AiCommandItem

Property	Description	Type	Required
id	Unique identifier	string	✅
label	Display text	string	✅
keywords	Fuzzy search keywords	string[]	❌
icon	Icon name	string	❌
description	Command description text	string	❌
disabled	Whether this command is disabled	boolean	❌
children	Sub-command list (cascade menu)	AiCommandItem[]	❌
level	Hierarchy depth level	number	❌
data	Custom extension data	Record<string, unknown>	❌

AttachmentItem

Property	Description	Type
name	File name	string
url	File URL	string
status	Upload status	'uploading' | 'success' | 'error'
percentage	Upload progress	number

Use in Nuxt

This component fully supports Nuxt 3/4. In Nuxt projects, the component and its types will be automatically imported on demand.

For detailed configuration, please see Nuxt Integration.

Theme Variables

Variable Name	Description	Default Value
--yh-ai-editor-sender-bg	Panel background color	var(--yh-bg-color-overlay)
--yh-ai-editor-sender-radius	Border radius	12px
--yh-ai-editor-sender-border	Border style	1px solid var(--yh-border-color)
--yh-ai-editor-sender-shadow	Panel shadow	0 4px 16px rgba(0, 0, 0, 0.08)
--yh-ai-editor-sender-focus-border	Focus border style	1px solid var(--yh-color-primary)