AiWelcome

AiWelcome is a component designed for the start page of AI chat conversations, providing a friendly first impression and interaction guide through beautiful gradients and glassmorphism design.

Basic Usage

Display Logo, title, and a list of suggested Prompts.

Basic Usage

Custom Icons and Slots

You can customize the Logo icon or completely customize the header content through slots.

Custom Icons and 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-welcome-padding	Container padding	var(--yh-spacing-xl)
--yh-ai-welcome-max-width	Max width	800px
--yh-ai-welcome-primary-gradient	Brand gradient color	linear-gradient(135deg, var(--yh-color-primary) 0%, #a855f7 100%)
--yh-ai-welcome-card-bg	Suggestion card background	var(--yh-bg-color-overlay)
--yh-ai-welcome-card-radius	Card border radius	var(--yh-border-radius-base)

API

Props

Name	Description	Type	Default
title	Title text	string	''
description	Description text	string	''
suggestions	Suggested items list	AiSuggestion[]	[]
showIcon	Whether to show the icon	boolean	true
icon	Icon name	string	'sparkles'

AiSuggestion Item

Name	Description	Type
icon	Icon name	string
title	Suggestion title	string
description	Detailed description	string
prompt	Command text passed when clicked	string

Events

Event Name	Description	Callback Parameters
select	Triggered when a suggestion card is clicked	(item: AiSuggestion)

Slots

Slot Name	Description
default	Bottom custom content
icon	Custom Logo
title	Custom Title
description	Custom Description