Follow-up Suggestions

Onboarding component

<loquix-follow-up-suggestions> presents likely next questions below an assistant response and delegates rendering to the shared suggestion chip system.

loquix-follow-up-suggestionsmessage-awaredata-driven

Preview

Suggested next steps Live component

Usage

import '@loquix/core/define/define-follow-up-suggestions';

<loquix-follow-up-suggestions
  variant="inline"
  message-id="answer_42"
  max-visible="3"
  label="You might also ask"
></loquix-follow-up-suggestions>

const followUps = document.querySelector('loquix-follow-up-suggestions');

followUps.suggestions = [
  { id: 'example', text: 'Can you give an example?' },
  { id: 'compare', text: 'What are the alternatives?' },
  { id: 'details', text: 'Tell me more about this' },
];

Properties

Property	Attribute	Type	Default	Description
`suggestions`	—	`Suggestion[]`	`[]`	Follow-up prompts. Assign as a DOM property.
`variant`	`variant`	`'inline' \| 'stacked' \| 'carousel'`	`'inline'`	Layout behavior.
`messageId`	`message-id`	`string`	`''`	ID of the associated assistant message.
`maxVisible`	`max-visible`	`number`	`3`	Prompts shown before the overflow control.
`label`	`label`	`string`	`''`	Optional heading above the prompts.

Variants

Variant	Behavior
`inline`	Compact chips that wrap to additional lines.
`stacked`	Pill treatment for a more prominent vertical group.
`carousel`	One horizontal, scrollable row.

Events

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

followUps.addEventListener('loquix-suggestion-select', (event) => {
  sendPrompt(event.detail.suggestion.text);
});

CSS custom properties

Variable	Purpose
`--loquix-followup-gap`	Gap between prompts.
`--loquix-followup-font-size`	Prompt text size.
`--loquix-followup-margin-top`	Space above the component.
`--loquix-followup-label-font-size`	Label size.
`--loquix-followup-label-color`	Label color.