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

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-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)

API

Props

Name	Description	Type	Default
modelValue	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[]	[]
showWordLimit	Whether to show word limit	boolean	true
maxLength	Maximum word limit	number	undefined
rows	Default initial rows	number	1

Events

Name	Description	Callback Parameters
update:modelValue	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	()

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