43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import {HStack} from '@astryxdesign/core/Layout';
|
|
import {SUGGESTIONS} from '@/features/loyaly-ai/utils/suggestions';
|
|
|
|
/**
|
|
* The opening moves, as a wrapped row of chips.
|
|
*
|
|
* Chips rather than the stacked button list this replaces: six full-width
|
|
* secondary buttons read as a menu of commands, which is what made the old
|
|
* panel feel like a dashboard. A wrapped row of quiet pills reads as
|
|
* suggestions — the same distinction ChatGPT, Claude and Gemini all make.
|
|
*
|
|
* Hand-built rather than Astryx's Token: Token is a data chip with a
|
|
* dismiss/selected vocabulary that does not apply here, and Button carries a
|
|
* control's weight. What is wanted is a quiet, fully-rounded, tappable label —
|
|
* three token-backed utilities, and no component contract to fight.
|
|
*/
|
|
const CHIP = [
|
|
'rounded-full border border-border bg-card',
|
|
'px-3.5 py-2 text-sm text-secondary text-left',
|
|
'transition-colors duration-150 cursor-pointer',
|
|
'hover:bg-muted hover:text-primary hover:border-border-strong',
|
|
'focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2',
|
|
].join(' ');
|
|
|
|
export function SuggestionChips({onPick}: {onPick: (prompt: string) => void}) {
|
|
return (
|
|
<HStack gap={2} wrap="wrap" hAlign="center">
|
|
{SUGGESTIONS.map((s) => (
|
|
<button
|
|
key={s.id}
|
|
type="button"
|
|
className={CHIP}
|
|
onClick={() => onPick(s.prompt)}
|
|
>
|
|
{s.label}
|
|
</button>
|
|
))}
|
|
</HStack>
|
|
);
|
|
}
|