Message

Installation

$3

``shell
pnpm add @lg-chat/message
`

$3

`shell
yarn add @lg-chat/message
`

$3

`shell
npm install @lg-chat/message
`

Example

`tsx
import { Message } from '@lg-chat/message';

return (



);
`

$3

The Message component uses a compound component pattern, allowing you to compose different parts of a message using subcomponents like Message.Actions, Message.Links, Message.Promotion, Message.ActionCard, and Message.VerifiedBanner.

Note: The layout and order of compound components are enforced by the Message component itself. Even if you change the order of subcomponents in your JSX, they will be rendered in the correct, intended order within the message bubble. This ensures consistent UI and accessibility regardless of how you compose your message children.

#### Message.Actions

`tsx
import React from 'react';
import { Message } from '@lg-chat/message';
import { MessageRatingValue } from '@lg-chat/message-rating';

const MessageWithActions = () => {
const handleCopy = () => console.log('Message copied');
const handleRetry = () => console.log('Message retried');

const handleRatingChange = (
e: React.ChangeEvent,
options: { rating: MessageRatingValue },
) => {
console.log('Rating changed:', options.rating);
};

const handleSubmitFeedback = async (
e: React.FormEvent,
options: { rating: MessageRatingValue; feedback?: string },
) => {
console.log('Feedback submitted:', options);
};

return (

onClickCopy={handleCopy}
onClickRetry={handleRetry}
onRatingChange={handleRatingChange}
onSubmitFeedback={handleSubmitFeedback}
/>

);
};
`

$3

`tsx
import React from 'react';
import { Message } from '@lg-chat/message';

const MessageWithLinks = () => {
const links = [
{
href: 'https://mongodb.design',
children: 'LeafyGreen UI',
variant: 'Website',
},
{
href: 'https://mongodb.github.io/leafygreen-ui/?path=/docs/overview-introduction--docs',
children: 'LeafyGreen UI Docs',
variant: 'Docs',
},
{
href: 'https://learn.mongodb.com/',
children: 'MongoDB University',
variant: 'Learn',
},
];

const handleLinkClick = () => console.log('Link clicked');

return (

links={links}
onLinkClick={handleLinkClick}
headingText="Related Resources"
/>

);
};
`

$3

`tsx
import React from 'react';
import { Message } from '@lg-chat/message';

const MessageWithPromotion = () => {
const handlePromotionClick = () => console.log('Promotion clicked');

return (

promotionText="Go learn more about this skill!"
promotionUrl="https://learn.mongodb.com/skills"
onPromotionLinkClick={handlePromotionClick}
/>

);
};
`

$3

`tsx
import React from 'react';
import { Message, ActionCardState } from '@lg-chat/message';
import DatabaseIcon from '@leafygreen-ui/icon/dist/Database';

const MessageWithActionCard = () => {
const handleCancel = () => console.log('Cancel clicked');
const handleRun = () => console.log('Run clicked');
const handleToggleExpanded = (isOpen: boolean) => {
console.log('Expanded state:', isOpen);
};

return (

chips={[{ label: 'MongoDB', glyph: }]}
initialIsExpanded={false}
onToggleExpanded={handleToggleExpanded}
showExpandButton={true}
state={ActionCardState.Idle}
title="Run list-databases?"
>

{# Tool Execution Result

This is a markdown content example showing tool execution results.

\\\javascript
const result = await tool.execute();
console.log(result);
\\\}


Cancel


Run



);
};
`

$3

`tsx
import React from 'react';
import { Message } from '@lg-chat/message';

const MessageWithVerifiedBanner = () => {
return (

verifier="MongoDB Staff"
verifiedAt={new Date('2024-03-24T16:20:00Z')}
learnMoreUrl="https://mongodb.com/docs"
/>

);
};
`

$3

`tsx
import React from 'react';
import { Message, ActionCardState } from '@lg-chat/message';
import { MessageRatingValue } from '@lg-chat/message-rating';

const Example = () => {
const handleCopy = () => console.log('Message copied');
const handleRetry = () => console.log('Message retried');

const handleRatingChange = (
e: React.ChangeEvent,
options: { rating: MessageRatingValue },
) => {
console.log('Rating changed:', options.rating);
};

const handleSubmitFeedback = async (
e: React.FormEvent,
options: { rating: MessageRatingValue; feedback?: string },
) => {
console.log('Feedback submitted:', options);
};

const links = [
{
href: 'https://mongodb.design',
children: 'LeafyGreen UI',
variant: 'Website',
},
{
href: 'https://mongodb.com/docs',
children: 'MongoDB Docs',
variant: 'Docs',
},
];

const handleLinkClick = () => console.log('Link clicked');
const handlePromotionClick = () => console.log('Promotion clicked');

const handleCancel = () => console.log('Cancel clicked');
const handleRun = () => console.log('Run clicked');

return (

title="Run list-databases?"
state={ActionCardState.Idle}
>

{# Tool Execution Result

This is a markdown content example showing tool execution results.}


Cancel


Run


promotionText="Go learn more about this skill!"
promotionUrl="https://learn.mongodb.com/skills"
onPromotionLinkClick={handlePromotionClick}
/>
onClickCopy={handleCopy}
onClickRetry={handleRetry}
onRatingChange={handleRatingChange}
onSubmitFeedback={handleSubmitFeedback}
/>
verifier="MongoDB Staff"
verifiedAt={new Date('2024-03-24T16:20:00Z')}
learnMoreUrl="https://mongodb.com/docs"
/>


);
};
`

Properties

$3

| Prop | Type | Description | Default |
| --------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------- |
| isSender | boolean | Indicates if the message is from the current user | true |
| markdownProps | LGMarkdownProps | Props passed to the internal ReactMarkdown instance | |
| messageBody | string | Message body text passed to LGMarkdown | |
| sourceType | 'markdown' \| 'text' | Determines the rendering method of the message | |
| ... | HTMLElementProps<'div'> | Props spread on the root element | |

$3

| Prop | Type | Description | Default |
| ------------------------------- | ----------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| errorMessage _(optional)_ | ReactNode | Optional error message to display when feedback submission fails. | 'Oops, please try again.' |
| onClickCopy _(optional)_ | MouseEventHandler | Callback fired when the copy button is clicked. | |
| onClickRetry _(optional)_ | MouseEventHandler | Callback fired when the retry button is clicked. If not provided, the retry button will not be rendered | |
| onCloseFeedback _(optional)_ | MouseEventHandler | Callback fired when the feedback form is closed by clicking the close button | |
| onRatingChange _(optional)_ | (e: ChangeEvent, options: { rating: MessageRatingValue }) => void | Callback fired when the user clicks the like or dislike button. Receives the original change event and an options object with the rating. If not provided, the rating buttons will not be rendered | |
| onSubmitFeedback _(optional)_ | (e: FormEvent, options: { rating: MessageRatingValue; feedback?: string }) => void | Callback when the user submits the feedback form. Receives the original form event, plus an options object with rating and feedback. If not provided, the feedback form will not be rendered | |
| submitButtonText _(optional)_ | string | Optional text for the feedback form's submit button | 'Submit' |
| submittedMessage _(optional)_ | ReactNode | Optional success message to display after feedback is submitted. | 'Thanks for your feedback!' |

$3

| Prop | Type | Description | Default |
| -------------------------- | -------------------------------- | ------------------------------------------------------------ | --------------------- |
| headingText _(optional)_ | string | The text to display as the heading of the links section. | 'Related Resources' |
| links | Array | An array of link data to render in the links section. | |
| onLinkClick _(optional)_ | ({ children: string }) => void | A callback function that is called when any link is clicked. | |
| ... | HTMLElementProps<'div'> | Props spread on the root element | |

$3

| Prop | Type | Description | Default |
| ----------------------------------- | ------------------------- | ---------------------------------------- | ------- |
| promotionText | string | Promotion text content. | |
| promotionUrl | string | Promotion URL for the "Learn More" link. | |
| onPromotionLinkClick _(optional)_ | () => void | Promotion onClick callback handler. | |
| ... | HTMLElementProps<'div'> | Props spread on the root element | |

$3

| Prop | Type | Description | Default |
| -------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| chips _(optional)_ | Array<{ label: ReactNode; glyph?: ReactNode; formatTooltip?: (label: ReactNode) => ReactNode }> | Metadata chips displayed in the header. Each chip supports label, optional glyph icon, and optional formatTooltip function to customize tooltip content. Tooltips are always shown on hover for chips in ActionCard. | [] |
| darkMode _(optional)_ | boolean | Determines if the component will render in dark mode | false |
| description _(optional)_ | ReactNode | Optional description text displayed below the title row in the Header. | |
| initialIsExpanded _(optional)_ | boolean | Initial state of the expandable section. Ignored when showExpandButton is false. | false |
| onToggleExpanded _(optional)_ | (isOpen: boolean) => void | Callback fired when the expansion toggle is clicked. Receives the new open state as a parameter. | |
| showExpandButton _(optional)_ | boolean | Whether the toggle button is visible. | true |
| state | 'idle' \| 'running' \| 'success' \| 'error' \| 'canceled' | The current lifecycle state of the interaction. Can use string literals or import ActionCardState enum from @lg-chat/message. | |
| title | ReactNode | Primary label displayed in the Header. | |
| ... | HTMLElementProps<'div'> | Props spread on the container div element | |

#### Message.ActionCard.Button

Message.ActionCard.Button accepts all props from @leafygreen-ui/button, except for the size prop which cannot be configured and is always set to 'small'.

#### Message.ActionCard.ExpandableContent

| Prop | Type | Description | Default |
| ---------- | ------------------------- | ---------------------------------------------------------------------------- | ------- |
| children | string | Markdown content to render in the expandable content area. Must be a string. | |
| ... | HTMLElementProps<'div'> | Props spread on the container div element | |

$3

| Prop | Type | Description | Default |
| --------------------------- | -------- | ------------------------------------------------- | ------- |
| learnMoreUrl _(optional)_ | string | URL to learn more about the verification. | |
| verifiedAt _(optional)_ | Date | The time the message was last verified. | |
| verifier _(optional)_ | string | The name of the entity that verified the message. | |

Behavior

$3

The Message.Actions component provides a comprehensive set of actions for chat messages.

#### Rendering Behavior

- If only some optional props are provided, only those corresponding buttons/functionality are rendered:
- Copy Button: Always renders
- Retry Button: Renders when onClickRetry is provided
- Rating Buttons: Render when onRatingChange is provided
- Feedback Form: Shows when a rating is selected and onSubmitFeedback is provided

#### Context Integration

The component relies on MessageContext to access the message body for copy functionality.

#### Rating and Feedback Flow

1. Rating Only: User clicks thumbs up or thumbs down (only visible when onRatingChange is provided)

- Calls onRatingChange with the selected rating
- No feedback form appears

2. Rating + Feedback: User clicks thumbs up or thumbs down, then feedback form appears
- Calls onRatingChange with the selected rating
- Feedback form appears with a textarea for additional comments
- User can optionally provide feedback text
- User clicks submit to send feedback
- Form shows success message and calls onSubmitFeedback with rating and feedback

#### State Management

The component manages its own internal state for:

- Message rating: 'unselected' | 'disliked' | 'liked'
- Feedback text input
- Form state: 'unset' | 'submitting' | 'submitted' | 'error'

Form state is reset when the feedback form is closed or when a new rating is selected.

$3

The Message.Links component provides an expandable/collapsible section for displaying related links.

#### Rendering Behavior

- If the links array is empty, the component returns null and does not render anything
- Links are displayed in an expandable section with a chevron toggle button
- The section starts collapsed by default and can be expanded to show all links
- The link objects provided to the Message.Links component's links prop can leverage the following variant values which map to pre-defined badge glyphs, labels, and colors.
- "Blog"
- "Book"
- "Code"
- "Docs"
- "Learn"
- "Video"
- "Website"

#### State Management

The component manages its own internal state for:

- Expansion state: Controls whether the links section is expanded or collapsed

$3

The Message.Promotion component displays promotional content with an award icon and "Learn More" link.

$3

The Message.ActionCard component displays actionable, stateful cards with expandable content and buttons.

#### Rendering Behavior

- Buttons only render when state="idle"
- Multiple Message.ActionCard.Button components can be used to render buttons

#### State Management

The component manages its own internal state for:

- Expansion state: Controls whether the expandable content section is expanded or collapsed
- The expansion state can be configured via initialIsExpanded and onToggleExpanded props

$3

The Message.VerifiedBanner component displays verification information for messages.

#### Rendering Behavior

- If no verification props (verifier, verifiedAt, learnMoreUrl) are provided, basic "Verified" text is displayed
- The banner automatically formats the verification date using toLocaleDateString()
- "Learn More" link is displayed when optional learnMoreUrl` is provided