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')[]	['agent', 'document', 'table']
prefix	Trigger prefix	string | string[]	@
show-icon	Whether to show icon	boolean	true
show-description	Whether to show description	boolean	true
theme-overrides	Component theme overrides	ComponentThemeVars	—

AiMentionOption

Property	Description	Type	Default
label	Display text	string	—
value	Selected value	string	—
type	AI Type	'agent' | 'document' | 'table' | 'knowledge'	—
icon	Custom icon	string	—
description	Description text	string	—

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