lg-chat Message Feed
npm install @lg-chat/message-feed``shell`
pnpm add @lg-chat/message-feed
`shell`
yarn add @lg-chat/message-feed
`shell`
npm install @lg-chat/message-feed
`tsx
import { MessageFeed } from '@lg-chat/message-feed';
import { Message } from '@lg-chat/message';
return (
label="Suggested Prompts"
>
What is MongoDB?
How do I query MongoDB?
What is MongoDB's astrology sign?
{messages.map(({ id, messageBody, userName }) => (
))}
);
`
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
`tsxreact
import React from @lg-chat/message
import { Message } from ;@lg-chat/message-feed
import { MessageFeed } from ;
const [messages, setMessages] = useState([]);
...
return (
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
`tsxreact
import React from @lg-chat/message
import { Message } from ;@lg-chat/message-feed
import { MessageFeed } from ;
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 }) => (
))}
);
`
| Prop | Type | Description | Default |
| ---------- | ------------------------- | ------------------------------------------------------ | ------- |
| darkMode | boolean | Determines if the component should render in dark mode | false |...
| | HTMLElementProps<'div'> | Props spread on root element | |
MessageFeed.InitialMessage is a wrapper around Message from @lg-chat/message and accepts the same props except for messageBody, isSender, sourceType, and markdownProps.
MessageFeed.InitialMessage.MessagePrompts is a wrapper around MessagePrompts from @lg-chat/message-prompts and accepts the same props except for enableHideOnSelect.
MessageFeed.InitialMessage.MessagePromptsItem is a wrapper around MessagePrompt from @lg-chat/message-prompts and accepts the same props.
| Prop | Type | Description | Default |
| ---------- | ------------------------ | ------------------------------------------------------ | ------- |
| darkMode | boolean | Determines if the component should render in dark mode | false |...
| | HTMLElementProps<'ul'> | Props spread on root element | |
| 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 | |