AiMention

Based on the Mention component, specifically designed for AI assistants. Supports common interactions in AI scenarios such as calling Agents (intelligence), referencing Context (documents, tables, knowledge bases) through @ and other triggers.

Basic Usage

Displays the standard style of the AiMention component, including icon differentiation for different types, description info, and type tags.

Basic Usage

Type Filtering

Through the types attribute, you can implement type filtering under different trigger prefixes, such as @ for waking up agents and # for referencing knowledge base files.

Only Agent (@ Call...)

Only Context (# Ref...)

Type Filtering & Custom Prefix

Use in Nuxt

This component perfectly supports Nuxt 3/4 SSR. In Nuxt projects, the component is automatically registered and does not need to be imported manually.

For detailed configuration, please refer to the Nuxt Integration Document.

SSR Friendly

AiMention has passed full SSR testing and supports server-side rendering to ensure first-screen loading performance.

API

Props

Property	Description	Type	Default
v-model	Binding value	string	''
options	Mention options list	AiMentionOption[]	[]
types	Allowed types list	('agent'|'document'|'table'|'knowledge'|'file')[]	['agent', 'document', 'table', 'knowledge', 'file']
triggers	Trigger characters	string[]	['@']
type	Input type	'input' | 'textarea'	'textarea'
placeholder	Placeholder	string	''
disabled	Whether disabled	boolean	false
size	Size	'large' | 'default' | 'small'	default
max-length	Maximum length	number	—
rows	Textarea rows	number	3
loading	Whether in loading state	boolean	false
theme-overrides	Component theme overrides	ComponentThemeVars	{}
filter-option	Custom option filter / disable built-in one	(keyword: string, option: MentionOption) => boolean | false	undefined
enable-file-tree	Enable file tree selector	boolean	true
file-loader	File tree data loader	AiMentionFileLoader	undefined
file-root	File tree root path	string	'/'
file-tree-expanded-level	Default expanded level of file tree	number	2
show-file-icon	Whether to show file icon	boolean	true
show-file-size	Whether to show file size	boolean	true
show-modified-time	Whether to show last modified time	boolean	true
format-file-size	File size formatter	(size: number) => string	Built-in formatter
search-debounce	Search debounce delay (ms)	number	300

AiMentionOption

Property	Description	Type	Default
label	Display text	string	—
value	Selected value	string	—
type	AI type	'agent' | 'document' | 'table' | 'knowledge' | 'file'	—
icon	Custom icon	string	—
description	Description text	string	—
path	File/document path	string	—
size	File size (bytes)	number	—
modifiedAt	Last modified timestamp	number	—
children	Children (for tree)	AiMentionOption[]	—
isFolder	Whether is folder	boolean	—
expanded	Whether expanded	boolean	—

Slots

Slot Name	Description	Parameters
label	Custom option content	{ option: AiMentionOption }
empty	Content when no matches	—
loading	Loading content	—

Theme Variables

Variable	Description	Default
--yh-ai-mention-option-height	Option height	56px
--yh-ai-mention-agent-color	Agent type theme color	var(--yh-color-primary)
--yh-ai-mention-doc-color	Document type theme color	#47c2ff
--yh-ai-mention-table-color	Table type theme color	#10b981
--yh-ai-mention-knowledge-color	Knowledge base type theme color	#f59e0b