@lg-chat/suggestions

Suggestion Card

View on MongoDB.design

Installation

PNPM

pnpm add @lg-chat/suggestions

Yarn

yarn add @lg-chat/suggestions

NPM

npm install @lg-chat/suggestions

Example

import { SuggestedActions, State } from '@lg-chat/suggestions';

const configurationParameters = [
  { key: 'Cluster Tier', value: 'M10 ($9.00/month)' },
  { key: 'Provider', value: 'AWS / N. Virginia (us-east-1)' },
  { key: 'Storage', value: '10 GB' },
  { key: 'RAM', value: '2 GB' },
  { key: 'vCPUs', value: '2 vCPUs' },
];

// Basic suggestion card
<SuggestedActions
  state={State.Unset}
  configurationParameters={configurationParameters}
  onClickApply={() => console.log('Apply clicked')}
/>

// Apply state with apply button
<SuggestedActions
  state={State.Apply}
  configurationParameters={configurationParameters}
  onClickApply={() => console.log('Apply clicked')}
/>

// Success state with applied parameters
<SuggestedActions
  state={State.Success}
  configurationParameters={[
    { key: 'Cluster Tier', value: 'M10 ($9.00/month)' },
    { key: 'Provider', value: 'AWS / N. Virginia (us-east-1)' },
    { key: 'Cloud Provider & Region', value: 'AWS / N. Virginia (us-east-1)', state: State.Success },
    { key: 'Cluster Tier', value: 'M10 ($9.00/month)', state: State.Success },
  ]}
  onClickApply={() => console.log('Apply clicked')}
/>

// Error state with failed parameters
<SuggestedActions
  state={State.Error}
  configurationParameters={[
    { key: 'Cluster Tier', value: 'M30 ($31.00/month)' },
    { key: 'Provider', value: 'GCP / Iowa (us-central1)' },
    { key: 'Cloud Provider & Region', value: 'GCP / Iowa (us-central1)', state: State.Error },
    { key: 'Cluster Tier', value: 'M30 ($31.00/month)', state: State.Error },
  ]}
  onClickApply={() => console.log('Apply clicked')}
/>

State Types

The State enum provides the following options:

State	Value	Description
Unset	'unset'	Shows configuration suggestions
Apply	'apply'	Shows configuration suggestions with an "Apply" button
Success	'success'	Shows success banner with applied parameters
Error	'error'	Shows error banner with failed parameters

Configuration Parameters

Each configuration parameter is an object with the following structure:

interface ConfigurationParameter {
  key: string; // The parameter name
  value: string; // The parameter value
  state?: State; // The parameter state (defaults to 'unset')
}

The component automatically filters and displays parameters based on their state:

• Table: Shows parameters with unset or apply state (or no state)
• Success Banner: Shows parameters with success state
• Error Banner: Shows parameters with error state

Properties

Prop	Type	Description	Default
configurationParameters	ConfigurationParameters	Array of configuration parameters, each with key, value, and optional state
darkMode	boolean	Determines if the component is rendered in dark mode	false
onClickApply	() => void	Callback fired when the user clicks the "Apply" button (shown when state is State.Apply)
state	State	Determines the current state and rendering behavior of the suggestion card
...	HTMLElementProps<'div'>	Props spread on root element