Message Prompts

View on MongoDB.design

Installation

PNPM

pnpm add @lg-chat/message-prompts

Yarn

yarn add @lg-chat/message-prompts

NPM

npm install @lg-chat/message-prompts

Example

function MyComponent() {
  const [prompts, setPrompts] = useState([
    'What is MongoDB?',
    'How do I create a database?',
  ]);

  const handleClickRefresh = () => {
    // Fetch new prompts
    setPrompts(getNewPrompts());
  };

  return (
    <MessagePrompts
      label="Suggested Prompts"
      onClickRefresh={handleClickRefresh}
      enableHideOnSelect
    >
      {prompts.map(prompt => (
        <MessagePrompt key={prompt} onClick={() => console.log(prompt)}>
          {prompt}
        </MessagePrompt>
      ))}
    </MessagePrompts>
  );
}

MessagePrompts Properties

| 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<HTMLButtonElement> | 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 | |

MessagePrompt Properties

| Prop | Type | Description | Default | | ----------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------- | | disabled (optional) | boolean | Specifies that the MessagePrompt is disabled. | | | onClick (optional) | React.MouseEventHandler<HTMLButtonElement> | 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 | |