LeafyGreen UI Kit Message Prompts
npm install @lg-chat/message-prompts``shell`
pnpm add @lg-chat/message-prompts
`shell`
yarn add @lg-chat/message-prompts
`shell`
npm install @lg-chat/message-prompts
`tsx
function MyComponent() {
const [prompts, setPrompts] = useState([
'What is MongoDB?',
'How do I create a database?',
]);
const handleClickRefresh = () => {
// Fetch new prompts
setPrompts(getNewPrompts());
};
return (
onClickRefresh={handleClickRefresh}
enableHideOnSelect
>
{prompts.map(prompt => (
{prompt}
))}
);
}
`
| Prop | Type | Description | Default |
| --------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| enableHideOnSelect _(optional)_ | boolean | When true, the prompts container will transition (fade and shrink) when a prompt is selected. | true |label
| _(optional)_ | string | Optional label displayed above the message prompts. | |onClickRefresh
| _(optional)_ | React.MouseEventHandler | Event handler called when the refresh button is clicked. When provided, a refresh IconButton will be rendered next to the label. The button is disabled when a prompt is selected. | |...
| | HTMLElementProps<'div'> | Props spread on root div element | |
| Prop | Type | Description | Default |
| ----------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------- |
| disabled _(optional)_ | boolean | Specifies that the MessagePrompt is disabled. | |onClick
| _(optional)_ | React.MouseEventHandler | Event handler called onClick. | |selected
| _(optional)_ | boolean | Specifies that the MessagePrompt is selected. When one message prompt is selected, the others are disabled by default. | |...
| | HTMLElementProps<'button'>` | Props spread on button element | |