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.