Message Feed

Installation

$3

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

$3

`shell
yarn add @lg-chat/message-feed
`

$3

`shell
npm install @lg-chat/message-feed
`

Example

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

return (


onClickRefresh={() => {}}
label="Suggested Prompts"
>
{}}>
What is MongoDB?

{}}>
How do I query MongoDB?

{}}>
What is MongoDB's astrology sign?



{messages.map(({ id, messageBody, userName }) => (

))}

);
`

$3

The MessageFeed component uses a compound component pattern. MessageFeed.InitialMessage is the initial message component, which also uses a compound pattern for its subcomponents: MessageFeed.InitialMessage.MessagePrompts, MessageFeed.InitialMessage.MessagePromptsItem, MessageFeed.InitialMessage.ResourceList, and MessageFeed.InitialMessage.ResourceListItem.

MessageFeed.InitialMessage does not need to be conditionally rendered. It only displays when there are no other children. As soon as other children are rendered, MessageFeed.InitialMessage animates off the page and only the children remain.

Additionally, MessageFeed.InitialMessage only renders its subcomponents. All other children will be ignored.

#### MessageFeed.InitialMessage.MessagePrompts and MessageFeed.InitialMessage.MessagePromptsItem

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

const [messages, setMessages] = useState([]);

...

return (


onClickRefresh={() => {}}
label="Suggested Prompts"
>
{}}>
What is MongoDB?

{}}>
How do I query MongoDB?

{}}>
What is MongoDB's astrology sign?



{messages.map(({ id, messageBody, userName }) => (

))}

);
`

#### MessageFeed.InitialMessage.ResourceList and MessageFeed.InitialMessage.ResourceListItem

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

const [messages, setMessages] = useState([]);

...

return (




Ask me technical questions


Learn best practices


Note: I won’t have access to any of your data unless you provide
it



{messages.map(({ id, messageBody, userName }) => (

))}

);
`

Properties

$3

| Prop | Type | Description | Default |
| ---------- | ------------------------- | ------------------------------------------------------ | ------- |
| darkMode | boolean | Determines if the component should render in dark mode | false |
| ... | HTMLElementProps<'div'> | Props spread on root element | |

$3

MessageFeed.InitialMessage is a wrapper around Message from @lg-chat/message and accepts the same props except for messageBody, isSender, sourceType, and markdownProps.

$3

MessageFeed.InitialMessage.MessagePrompts is a wrapper around MessagePrompts from @lg-chat/message-prompts and accepts the same props except for enableHideOnSelect.

$3

MessageFeed.InitialMessage.MessagePromptsItem is a wrapper around MessagePrompt from @lg-chat/message-prompts and accepts the same props.

$3

| Prop | Type | Description | Default |
| ---------- | ------------------------ | ------------------------------------------------------ | ------- |
| darkMode | boolean | Determines if the component should render in dark mode | false |
| ... | HTMLElementProps<'ul'> | Props spread on root element | |

$3

| Prop | Type | Description | Default |
| ---------- | ------------------------ | --------------------------------------------------------- | ------- |
| glyph | GlyphName | The LeafyGreen icon glyph name to render in the list item | |
| children | React.ReactNode | The text that will appear in the list item | |
| ... | HTMLElementProps<'li'>` | Props spread on root element | |