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.
Hello, I am YH AI
I can help you with coding, translating documents, or creative writing. What can I do for you today?
Write code
Help me write a calculator component using Vue 3
Translate report
Translate this weekly report into natural English
Creative writing
Write a sci-fi short story about future cities
Basic Usage
Custom Icons and Slots
You can customize the Logo icon or completely customize the header content through slots.
Limited Beta AI
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 |