[LG-5936] feat(message-feed): ResourceList Subcomponent (#3495)

* refactor(MessageFeed): convert to CompoundComponent and temp remove assistant name

* refactor(MessageFeed): enhance component structure

* feat(MessageFeed): add MessageFeedContext

* docs(MessageFeed): add changeset

* fix(MessageFeed): update error message for context provider

* refactor(Message): undo message changes

* chore(MessageFeed): add compound-component dependency

* chore(pnpm-lock): add compound-component to dependencies

* chore(MessageFeed): update dependencies for compound-component integration

* refactor(MessageFeed): move shared types

* refactor(InitialMessage): update import path for shared types and use enum for key

* feat(InitialMessage): integrate MessageFeedContext to manage initial message visibility

* chore(changeset): update dependency version for @lg-chat/message-feed

* fix(tsconfig): add missing newline at end of file

* fix(MessageFeedContext): handle error boundary for React 17 in context hook tests

* feat(InitialMessage): implement styles and update component structure for initial message display

* feat(InitialMessage): enhance initial message component with structured content and styles

* refactor(InitialMessage): replace hardcoded title and description with constants for improved maintainability

* feat(ChatWindow): add initial message prompts and enhance message handling in chat window stories

* refactor(ChatWindow): remove enableHideOnSelect prop from Suggested Prompts in initial message component

* test(InitialMessage): add unit tests for accessibility, rendering, and visibility behavior

* test(MessageFeed): enhance tests with scrollTo mock and update query methods for initial message visibility

* refactor(InitialMessage): simplify getWrapperStyles function and remove unused props

* chore(MessageFeed): update dependencies and tsconfig to include new LeafyGreen UI components

* refactor(ChatWindow): rename initial message component and update props for message prompts

* chore(MessageFeed): remove unused @leafygreen-ui/hooks dependency from package.json and pnpm-lock.yaml

* refactor(MessageFeed): remove commented-out MyMessage component from InitialMessage story

* chore(MessageFeed): update changeset

* refactor(MessageFeed): integrate MessagePrompts and MessagePrompt components into InitialMessage

* refactor(InitialMessage): update styles for title and description components

* refactor(InitialMessage): adjust inner wrapper styles with focus ring for improved layout

* test(InitialMessage, MessagePrompt, MessagePrompts): enhance tests for rendering and type validation

* refactor(InitialMessage): rename component and add message prompts for enhanced user interaction

* chore(pnpm-lock): add '@lg-chat/message-prompts' dependency and clean up unused entries

* test(InitialMessage, MessagePrompts): improve error handling tests for enableHideOnSelect prop

* chore(changeset): update to include new components

* test(InitialMessage): fix JSX syntax in type validation tests for proper rendering

* test(MessageFeed): add tests for rendering MessagePrompts and its child MessagePrompt components

* feat(MessageFeed): add ResourceLists and ResourceList properties to MessageFeedSubcomponentProperty

* feat(MessageFeed): add InitialMessageWithResourceList story and update InitialMessage component to include ResourceList and ResourceListItem

* refactor(InitialMessage): restructure inner wrapper and remove description styles for cleaner layout

* refactor(ResourceListItem): update styles to use theme-based icon colors and improve structure

* refactor(InitialMessage): integrate LeafyGreenProvider for dark mode support and simplify props in stories

* test(InitialMessage, MessageFeed): update tests to ensure proper rendering of MessagePrompts and prevent rendering of children when not a subcomponent

* refactor(InitialMessage): remove LeafyGreenProvider and simplify component structure for improved readability

* refactor(InitialMessage): remove LeafyGreenProvider and streamline component structure for improved readability

* feat(InitialMessage): add generated story for initialMessage

* feat(InitialMessage): enhance story with interactive MessagePrompts and update children prop for better demonstration

* chore(ALL_PACKAGES): revert ALL_PACKAGES

* fix(InitialMessage): remove unused darkMode prop from story and include resourceList in the InitialMessage component

* feat(ResourceList): integrate LeafyGreenProvider for dark mode support and update ResourceListProps to include DarkModeProps

* feat(InitialMessage): add additional resource list items and update story configuration for enhanced interactivity

* fix(ResourceListItem): update prop documentation for glyph and children to clarify usage

* docs(MessageFeed): update changeset

* refactor(InitialMessage): update AssistantAvatar size and adjust props in InitialMessage types for improved clarity

* fix(InitialMessage): export InitialMessageProps type for better type safety

* refactor(InitialMessage): Components to components

* refactor(InitialMessage): update import paths from Components to components

* feat(InitialMessage): add interactive story for message addition with state management

* fix(InitialMessage): add visibility property to transition styles for improved animation handling

* feat(MessageFeed): enhance InitialMessage stories with new message handling and improve visibility checks in tests

* feat(InitialMessage): rename Components to components

* fix(InitialMessage): update import paths from Components to components for consistency

* refactor(InitialMessage): replace MessageFeedSubcomponentProperty with InitialMessageSubcomponentProperty in relevant components

* feat(MessagePromptsItem): add MessagePromptsItem component with associated types and tests

* refactor(MessagePrompts): rename MessagePrompt to MessagePromptsItem across components and update related tests and stories

* feat(InitialMessage): implement InitialMessage component with accessibility tests, styles, and subcomponents for prompts and resource lists

* fix(MessageFeed): correct import paths for InitialMessage component

* feat(ResourceListItem): export ResourceListItemProps type for improved type safety

* test(InitialMessage): add tests for ResourceList subcomponent and update existing tests

* refactor(MessageFeed): simplify initial message handling by removing unnecessary state and improving readability

* refactor(MessageFeed): export InitialMessageProps type for better accessibility in message feed components

* feat(index): export ResourceList and its props for improved component accessibility

* refactor(MessageFeed): export additional message prompts types for improved component integration

Author: shaneeza

.changeset/dark-pots-tell.md

@@ -6,3 +6,4 @@
 - [LG-5934](https://jira.mongodb.org/browse/LG-5934): add `MessageFeedProvider` and `useMessageFeedContext`
 - [LG-5935](https://jira.mongodb.org/browse/LG-5935): add `MessageFeed.InitialMessage` component
 - [LG-5933](https://jira.mongodb.org/browse/LG-5933): add `MessageFeed.InitialMessage.MessagePrompts` and `MessageFeed.InitialMessage.MessagePrompt` components.
+- [LG-5936](https://jira.mongodb.org/browse/LG-5936): add `MessageFeed.InitialMessage.ResourceList` and `MessageFeed.InitialMessage.ResourceListItem` components.

chat/message-feed/src/MessageFeed.stories.tsx

@@ -163,6 +163,31 @@ const ChangingMessagesComponent = ({ darkMode, ...rest }: MessageFeedProps) => {
   );
 };
 
+export const InitialMessageWithResourceList = ({
+  ...rest
+}: MessageFeedProps) => {
+  return (
+    <div>
+      <MessageFeed style={{ width: 400, height: 400 }} {...rest}>
+        <MessageFeed.InitialMessage>
+          <MessageFeed.InitialMessage.ResourceList>
+            <MessageFeed.InitialMessage.ResourceListItem glyph="QuestionMarkWithCircle">
+              Ask me technical questions
+            </MessageFeed.InitialMessage.ResourceListItem>
+            <MessageFeed.InitialMessage.ResourceListItem glyph="Bulb">
+              Learn best practices
+            </MessageFeed.InitialMessage.ResourceListItem>
+            <MessageFeed.InitialMessage.ResourceListItem glyph="InfoWithCircle">
+              Note: I won’t have access to any of your data unless you provide
+              it
+            </MessageFeed.InitialMessage.ResourceListItem>
+          </MessageFeed.InitialMessage.ResourceList>
+        </MessageFeed.InitialMessage>
+      </MessageFeed>
+    </div>
+  );
+};
+
 export const InitialMessageWithMessagePrompts = ({
   ...rest
 }: MessageFeedProps) => {

chat/message-feed/src/components/InitialMessage/InitialMessage.spec.tsx

@@ -88,9 +88,35 @@ describe('InitialMessage', () => {
     expect(screen.getByText('What is blue but not heavy?')).toBeInTheDocument();
   });
 
+  // renders the ResourceList subcomponent
+  test('renders the ResourceList subcomponent', () => {
+    renderInitialMessage({
+      children: (
+        <InitialMessage.ResourceList>
+          <InitialMessage.ResourceListItem glyph="QuestionMarkWithCircle">
+            Ask me technical questions
+          </InitialMessage.ResourceListItem>
+          <InitialMessage.ResourceListItem glyph="Bulb">
+            Learn best practices
+          </InitialMessage.ResourceListItem>
+          <InitialMessage.ResourceListItem glyph="InfoWithCircle">
+            Note: I won’t have access to any of your data unless you provide it
+          </InitialMessage.ResourceListItem>
+        </InitialMessage.ResourceList>
+      ),
+    });
+    expect(screen.getByText('Ask me technical questions')).toBeInTheDocument();
+    expect(screen.getByText('Learn best practices')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'Note: I won’t have access to any of your data unless you provide it',
+      ),
+    ).toBeInTheDocument();
+  });
+
   /* eslint-disable jest/no-disabled-tests */
   describe.skip('types behave as expected', () => {
-    test('does not throw errors', () => {
+    test('does not throw errors with MessagePrompts subcomponent', () => {
       <InitialMessage>
         <InitialMessage.MessagePrompts label="hello">
           <InitialMessage.MessagePromptsItem selected>
@@ -106,6 +132,16 @@ describe('InitialMessage', () => {
       </InitialMessage>;
     });
 
+    test('does not throw errors with ResourceList subcomponent', () => {
+      <InitialMessage>
+        <InitialMessage.ResourceList>
+          <InitialMessage.ResourceListItem glyph="QuestionMarkWithCircle">
+            Ask me technical questions
+          </InitialMessage.ResourceListItem>
+        </InitialMessage.ResourceList>
+      </InitialMessage>;
+    });
+
     test('throws errors when enableHideOnSelect is used', () => {
       <InitialMessage>
         {/* @ts-expect-error - enableHideOnSelect is not a prop */}

chat/message-feed/src/components/InitialMessage/InitialMessage.stories.tsx

@@ -18,9 +18,26 @@ const messagePrompts = [
     <InitialMessage.MessagePromptsItem>
       How do I query MongoDB?
     </InitialMessage.MessagePromptsItem>
+    <InitialMessage.MessagePromptsItem>
+      What is MongoDB&apos;s favorite color?
+    </InitialMessage.MessagePromptsItem>
   </InitialMessage.MessagePrompts>,
 ];
 
+const resourceList = [
+  <InitialMessage.ResourceList key="resource-list">
+    <InitialMessage.ResourceListItem glyph="QuestionMarkWithCircle">
+      Ask me technical questions
+    </InitialMessage.ResourceListItem>
+    <InitialMessage.ResourceListItem glyph="Bulb">
+      Learn best practices
+    </InitialMessage.ResourceListItem>
+    <InitialMessage.ResourceListItem glyph="InfoWithCircle">
+      Note: I won’t have access to any of your data unless you provide it
+    </InitialMessage.ResourceListItem>
+  </InitialMessage.ResourceList>,
+];
+
 const meta: StoryMetaType<typeof InitialMessage> = {
   title: 'Composition/Chat/MessageFeed/InitialMessage',
   component: InitialMessage,
@@ -29,7 +46,7 @@ const meta: StoryMetaType<typeof InitialMessage> = {
     generate: {
       combineArgs: {
         darkMode: [false, true],
-        children: [messagePrompts, undefined],
+        children: [messagePrompts, resourceList, undefined],
       },
       decorator: Instance => {
         return (

chat/message-feed/src/components/InitialMessage/InitialMessage.tsx

@@ -12,6 +12,8 @@ import { useMessageFeedContext } from '../../MessageFeedContext';
 import { MessageFeedSubcomponentProperty } from '../../shared.types';
 import { MessagePrompts } from '../MessagePrompts';
 import { MessagePromptsItem } from '../MessagePromptsItem';
+import { ResourceList } from '../ResourceList';
+import { ResourceListItem } from '../ResourceListItem';
 
 import {
   INITIAL_MESSAGE_DESCRIPTION,
@@ -42,6 +44,11 @@ export const InitialMessage = CompoundSubComponent(
         InitialMessageSubcomponentProperty.MessagePrompts,
       );
 
+      const resourceList = findChild(
+        children,
+        InitialMessageSubcomponentProperty.ResourceList,
+      );
+
       return (
         <Message isSender={false} ref={fwdRef} {...rest}>
           <div
@@ -58,6 +65,7 @@ export const InitialMessage = CompoundSubComponent(
                 <Body>{INITIAL_MESSAGE_DESCRIPTION}</Body>
               </div>
               {messagePrompts}
+              {resourceList}
             </div>
           </div>
         </Message>
@@ -69,5 +77,7 @@ export const InitialMessage = CompoundSubComponent(
     key: MessageFeedSubcomponentProperty.InitialMessage,
     MessagePrompts,
     MessagePromptsItem,
+    ResourceList,
+    ResourceListItem,
   },
 );

chat/message-feed/src/components/InitialMessage/InitialMessage.types.ts

@@ -13,6 +13,8 @@ export interface InitialMessageProps
 export const InitialMessageSubcomponentProperty = {
   MessagePrompts: 'isLGInitialMessageMessagePrompts',
   MessagePromptsItem: 'isLGInitialMessageMessagePromptsItem',
+  ResourceList: 'isLGInitialMessageResourceList',
+  ResourceListItem: 'isLGInitialMessageResourceListItem',
 } as const;
 
 /**

chat/message-feed/src/components/ResourceList/ResourceList.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { storybookArgTypes, StoryMetaType } from '@lg-tools/storybook-utils';
+import { StoryFn } from '@storybook/react';
+
+import { ResourceListItem } from '../ResourceListItem';
+
+import { ResourceList, ResourceListProps } from '.';
+
+const meta: StoryMetaType<typeof ResourceList> = {
+  title: 'Composition/Chat/MessageFeed/ResourceList',
+  component: ResourceList,
+  parameters: {
+    default: 'LiveExample',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+      },
+    },
+  },
+  argTypes: {
+    darkMode: storybookArgTypes.darkMode,
+  },
+  args: {
+    children: [
+      <ResourceListItem
+        key="resource-list-item-1"
+        glyph="QuestionMarkWithCircle"
+      >
+        Ask me technical questions
+      </ResourceListItem>,
+      <ResourceListItem key="resource-list-item-2" glyph="Bulb">
+        Learn best practices
+      </ResourceListItem>,
+      <ResourceListItem key="resource-list-item-3" glyph="InfoWithCircle">
+        Note: I won’t have access to any of your data unless you provide it
+      </ResourceListItem>,
+    ],
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<ResourceListProps> = props => (
+  <ResourceList {...props} />
+);
+
+export const LiveExample = {
+  render: Template,
+  args: {},
+};
+
+export const Generated = () => {};

chat/message-feed/src/components/ResourceList/ResourceList.styles.ts

@@ -0,0 +1,14 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
+export const getListStyles = ({ className }: { className?: string }) =>
+  cx(
+    css`
+      display: flex;
+      flex-direction: column;
+      gap: ${spacing[400]}px;
+      padding: 0;
+      margin: 0;
+    `,
+    className,
+  );

chat/message-feed/src/components/ResourceList/ResourceList.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react';
+
+import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
+import LeafyGreenProvider, {
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
+
+import { InitialMessageSubcomponentProperty } from '../InitialMessage/InitialMessage.types';
+
+import { getListStyles } from './ResourceList.styles';
+import { type ResourceListProps } from './ResourceList.types';
+
+/**
+ * Renders a resource list in the message feed.
+ *
+ * @returns The rendered resource list component.
+ */
+export const ResourceList = CompoundSubComponent(
+  // eslint-disable-next-line react/display-name
+  forwardRef<HTMLUListElement, ResourceListProps>(
+    ({ children, className, darkMode: darkModeProp, ...rest }, fwdRef) => {
+      const { darkMode } = useDarkMode(darkModeProp);
+      return (
+        <LeafyGreenProvider darkMode={darkMode}>
+          <ul ref={fwdRef} className={getListStyles({ className })} {...rest}>
+            {children}
+          </ul>
+        </LeafyGreenProvider>
+      );
+    },
+  ),
+  {
+    displayName: 'ResourceList',
+    key: InitialMessageSubcomponentProperty.ResourceList,
+  },
+);

chat/message-feed/src/components/ResourceList/ResourceList.types.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef } from 'react';
+
+import { DarkModeProps } from '@leafygreen-ui/lib';
+
+export interface ResourceListProps
+  extends ComponentPropsWithRef<'ul'>,
+    DarkModeProps {}