Welcome Screen

Onboarding component

<loquix-welcome-screen> gives an empty conversation a useful starting point with a heading, guidance, branding, and data-driven prompt suggestions.

loquix-welcome-screenempty statecomposable

Preview

Conversation welcome Live component

L

Usage

import '@loquix/core/define/define-welcome-screen';

<loquix-welcome-screen
  slot="empty-state"
  heading="How can I help you?"
  subheading="Choose a suggestion or write your own prompt."
></loquix-welcome-screen>

const welcome = document.querySelector('loquix-welcome-screen');

welcome.suggestions = [
  { id: 'write', text: 'Write a launch post', icon: '✍️' },
  { id: 'summarize', text: 'Summarize a document', icon: '📝' },
];

Properties

Property	Attribute	Type	Default	Description
heading	heading	string	localized text	Main heading.
subheading	subheading	string	''	Guidance below the heading.
layout	layout	'centered' | 'split'	'centered'	Content arrangement.
suggestions	—	Suggestion[]	[]	Prompt suggestions. Assign as a DOM property.
suggestionVariant	suggestion-variant	'chip' | 'pill' | 'card'	'chip'	Visual form of the built-in suggestions.

Suggestion events

The built-in suggestion strip emits a composed event that bubbles through the welcome screen:

Event	Detail
loquix-suggestion-select	{ suggestion: Suggestion }

welcome.addEventListener('loquix-suggestion-select', (event) => {
  composer.value = event.detail.suggestion.text;
});

Tip

Place the welcome screen in <loquix-message-list slot="empty-state">. The list then handles showing and hiding it as messages appear.

Slots

Slot	Purpose
logo	Brand mark above the heading.
heading	Custom heading markup.
subheading	Custom guidance markup.
suggestions	Replaces the built-in suggestion chips.
footer	Additional content below suggestions.

CSS custom properties

Variable	Purpose
--loquix-welcome-padding	Container padding.
--loquix-welcome-max-width	Content maximum width.
--loquix-welcome-heading-font-size	Heading size.
--loquix-welcome-heading-font-weight	Heading weight.
--loquix-welcome-heading-color	Heading color.
--loquix-welcome-subheading-font-size	Subheading size.
--loquix-welcome-subheading-color	Subheading color.