AiActionGroup

AiActionGroup is a collection of action buttons for the bottom of AI reply bubbles, commonly used for message copying, regenerating, evaluation, etc., providing a compact and elegant layout.

Basic Usage

You can quickly generate action groups with preset styles through simple string arrays.

Basic Usage

Vertical Layout and Customization

Support custom icons, labels, and click logic.

Vertical Layout and Customization

Use with AiBubble

Place the action group at the bottom of the conversation bubble.

Use with AiBubble

API

Props

Name	Description	Type	Default
items	Action items list	ActionItem[]	[]
size	Button size	'small' | 'default' | 'large'	'small'
direction	Layout direction	'horizontal' | 'vertical'	'horizontal'

ActionItem Type

If it's a string, presets are supported: 'copy' | 'refresh' | 'regenerate' | 'share' | 'thumb-up' | 'thumb-down' | 'edit' | 'delete'. If it's an object:

Name	Description	Type
key	Unique identifier	string
icon	Icon name	string
label	Text label	string
disabled	Whether disabled	boolean
tooltip	Hover tooltip text	string

Events

Event Name	Description	Callback Parameters
click	Triggered when a button is clicked	(key: string, item: ActionItem)

Slots

Slot Name	Description
default	Append custom content after the action list

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-action-gap	Button spacing	8px
--yh-ai-action-icon-size	Icon size	16px
--yh-ai-action-hover-bg	Hover background color	var(--yh-fill-color-light)
--yh-ai-action-btn-radius	Button radius	4px