@lg-chat/message NPM

Message

Installation

Yarn

yarn add @lg-chat/message

NPM

npm install @lg-chat/message

Example

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

return (
  <Message avatar={Avatar} darkMode={darkMode}>
    # Heading 1
  </Message>
);

Output HTML

<div>
  <div class="leafygreen-ui-14v23mv">
    <div class="">
      <div class="leafygreen-ui-wirl5q">
        <h1 class="leafygreen-ui-yk169t">Heading 1</h1>
      </div>
    </div>
  </div>
</div>

Properties

Prop	Type	Description	Default
`align`	`'left', 'right'`	Determines whether the message is aligned to the left or right	if `isSender === true`, the message is aligned to the right, and otherwise to the left. This prop overrides that behavior
`avatar`	`ReactElement`	Avatar element
`componentOverrides`	`Record<MarkdownComponent, ComponentType>`	Uses value to override key'ed markdown elements in terms of how they are rendered
`children`	`string`	Rendered children; only string children are supported
`isSender`	`boolean`	Indicates if the message is from the current user	`true`
`markdownProps`	`LGMarkdownProps`	Props passed to the internal ReactMarkdown instance
`messageRatingProps`	`MessageRatingProps`	Props to MessageRating component
`sourceType`	`'markdown', 'text'`	Determines the rendering method of the message
`messageBody`	`string`	Message body text passed to LGMarkdown
`verified`	`{ verifier?: string; verifiedAt?: Date; learnMoreUrl?: string; }`	Sets if an answer is "verified" and controls the content of the message banner.
`links`	`{ url: string; text: string; imageUrl?: string; variant: string; }[]`	A list of links to show in a section at the end of the message.
`linksHeading`	`string`	The heading text to display for the links section.	"Related Resources"
`...`	`HTMLElementProps<'div'>`	Props spread on the root element

Message Links

The message component includes the following built-in variant values for the links prop:

"Blog"
"Book"
"Code"
"Docs"
"Learn"
"Video"
"Website"

These map to pre-defined badge glyphs, labels, and colors for specific use cases. If no variant serves your use case, you can create a custom link by omitting the variant prop and defining the badgeGlyph, badgeLabel, and optionally badgeVariant props.