[LG-5933] feat(message-feed) MessagePrompts Subcomponent

.changeset/dark-pots-tell.md

@@ -3,4 +3,6 @@
 ---
 
 - [LG-5932](https://jira.mongodb.org/browse/LG-5932): Refactor to use `CompoundComponent` pattern
-- [LG-5934](https://jira.mongodb.org/browse/LG-5934): add `MessageFeedProvider` and `useMessageFeedContext`
+- [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.

chat/chat-window/src/ChatWindow.stories.tsx

@@ -215,7 +215,6 @@ const WithMessagePromptsComponent = ({
     <LeafyGreenChatProvider assistantName={assistantName}>
       <ChatWindow {...props}>
         <MessageFeed>
-          <div style={{ flex: 1 }} aria-hidden="true" />
           {messages.map((messageFields, index) => (
             <Message
               key={messageFields.id}
@@ -263,6 +262,101 @@ export const WithMessagePrompts: StoryObj<ChatWindowStoryProps> = {
   },
 };
 
+const WithInitialMessageWithMessagePromptsComponent = ({
+  assistantName,
+  ...props
+}: ChatWindowStoryProps) => {
+  const [messages, setMessages] = useState<Array<any>>([]);
+  const [selectedPromptIndex, setSelectedPromptIndex] = useState<
+    number | undefined
+  >();
+
+  const prompts = [
+    'What is MongoDB?',
+    'How do I create a database?',
+    'Can you explain indexes?',
+  ];
+
+  const handlePromptSelect = (index: number) => {
+    setSelectedPromptIndex(index);
+    const selectedPrompt = prompts[index];
+
+    // Add user message with selected prompt
+    const userMessage = {
+      id: messages.length,
+      messageBody: selectedPrompt,
+      isSender: true,
+    };
+
+    // Add assistant response
+    const assistantMessage = {
+      id: messages.length + 1,
+      messageBody: `Great question! Let me explain about "${selectedPrompt}"...`,
+      isSender: false,
+    };
+
+    setMessages(prev => [...prev, userMessage, assistantMessage]);
+  };
+
+  const handleMessageSend = (messageBody: string) => {
+    const newMessage = {
+      id: messages.length,
+      messageBody,
+      isSender: true,
+    };
+    setMessages(prev => [...prev, newMessage]);
+  };
+
+  return (
+    <LeafyGreenChatProvider assistantName={assistantName}>
+      <ChatWindow {...props}>
+        <MessageFeed>
+          <MessageFeed.InitialMessage>
+            <MessageFeed.InitialMessage.MessagePrompts
+              label="Suggested Prompts"
+              onClickRefresh={() => {
+                // eslint-disable-next-line no-console
+                console.log('Refresh prompts');
+                setSelectedPromptIndex(undefined);
+              }}
+            >
+              {prompts.map((prompt, promptIndex) => (
+                <MessageFeed.InitialMessage.MessagePrompt
+                  key={prompt}
+                  selected={selectedPromptIndex === promptIndex}
+                  onClick={() => handlePromptSelect(promptIndex)}
+                  data-testid={`prompt-${promptIndex}`}
+                >
+                  {prompt}
+                </MessageFeed.InitialMessage.MessagePrompt>
+              ))}
+            </MessageFeed.InitialMessage.MessagePrompts>
+          </MessageFeed.InitialMessage>
+          {messages.map(messageFields => (
+            <Message
+              key={messageFields.id}
+              sourceType="markdown"
+              isSender={messageFields.isSender}
+              messageBody={messageFields.messageBody}
+            />
+          ))}
+        </MessageFeed>
+        <InputBar onMessageSend={handleMessageSend} />
+      </ChatWindow>
+    </LeafyGreenChatProvider>
+  );
+};
+
+export const WithInitialMessageWithMessagePrompts: StoryObj<ChatWindowStoryProps> =
+  {
+    render: WithInitialMessageWithMessagePromptsComponent,
+    parameters: {
+      chromatic: {
+        disableSnapshot: true,
+      },
+    },
+  };
+
 const ChatDrawerContent = ({ assistantName }: { assistantName?: string }) => {
   const [messages, setMessages] = useState<Array<any>>(baseMessages);
 

chat/message-feed/package.json

@@ -14,20 +14,22 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/avatar": "workspace:^",
     "@leafygreen-ui/button": "workspace:^",
     "@leafygreen-ui/compound-component": "workspace:^",
     "@leafygreen-ui/emotion": "workspace:^",
     "@leafygreen-ui/icon": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/palette": "workspace:^",
     "@leafygreen-ui/tokens": "workspace:^",
+    "@leafygreen-ui/typography": "workspace:^",
     "@lg-chat/message": "workspace:^",
+    "@lg-chat/message-prompts": "workspace:^",
     "@lg-chat/message-rating": "workspace:^",
     "react-intersection-observer": "^8.25.1",
     "react-keyed-flatten-children": "^2.2.1"
   },
   "devDependencies": {
-    "@lg-chat/message-prompts": "workspace:^",
     "@lg-tools/build": "workspace:^"
   },
   "peerDependencies": {

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { MessageFeedProvider } from '../../MessageFeedContext';
+
+import {
+  INITIAL_MESSAGE_DESCRIPTION,
+  INITIAL_MESSAGE_TITLE,
+} from './constants';
+import { InitialMessage } from './InitialMessage';
+import { InitialMessageProps } from './InitialMessage.types';
+
+jest.mock('@lg-chat/lg-markdown', () => ({
+  LGMarkdown: jest.fn(({ children }) => <div>{children}</div>),
+}));
+
+const renderInitialMessage = ({
+  shouldHideInitialMessage = false,
+  ...rest
+}: InitialMessageProps & { shouldHideInitialMessage?: boolean }) => {
+  return render(
+    <MessageFeedProvider shouldHideInitialMessage={shouldHideInitialMessage}>
+      <InitialMessage {...rest} />
+    </MessageFeedProvider>,
+  );
+};
+
+describe('InitialMessage', () => {
+  describe('a11y', () => {
+    test('does not have basic accessibility issues', async () => {
+      const { container } = renderInitialMessage({});
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+  });
+
+  test('renders the title and description', () => {
+    renderInitialMessage({});
+    expect(screen.getByText(INITIAL_MESSAGE_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(INITIAL_MESSAGE_DESCRIPTION)).toBeInTheDocument();
+  });
+
+  test('does not render children if its not a subcomponent', () => {
+    renderInitialMessage({
+      children: <div>I heard you like MongoDB</div>,
+    });
+    expect(
+      screen.queryByText('I heard you like MongoDB'),
+    ).not.toBeInTheDocument();
+  });
+
+  test('is hidden when the shouldHideInitialMessage is true', () => {
+    renderInitialMessage({
+      shouldHideInitialMessage: true,
+      children: (
+        <InitialMessage.MessagePrompts>
+          <InitialMessage.MessagePrompt>
+            I heard you like MongoDB
+          </InitialMessage.MessagePrompt>
+        </InitialMessage.MessagePrompts>
+      ),
+    });
+    expect(screen.getByText(INITIAL_MESSAGE_TITLE)).not.toBeVisible();
+    expect(screen.getByText(INITIAL_MESSAGE_DESCRIPTION)).not.toBeVisible();
+    expect(screen.getByText('I heard you like MongoDB')).not.toBeVisible();
+  });
+
+  // renders the MessagePrompts subcomponent
+  test('renders the MessagePrompts subcomponent', () => {
+    renderInitialMessage({
+      children: (
+        <InitialMessage.MessagePrompts>
+          <InitialMessage.MessagePrompt>
+            What is MongoDB?
+          </InitialMessage.MessagePrompt>
+          <InitialMessage.MessagePrompt>
+            How do I query MongoDB?
+          </InitialMessage.MessagePrompt>
+          <InitialMessage.MessagePrompt>
+            What is blue but not heavy?
+          </InitialMessage.MessagePrompt>
+        </InitialMessage.MessagePrompts>
+      ),
+    });
+    expect(screen.getByText('What is MongoDB?')).toBeInTheDocument();
+    expect(screen.getByText('How do I query MongoDB?')).toBeInTheDocument();
+    expect(screen.getByText('What is blue but not heavy?')).toBeInTheDocument();
+  });
+
+  /* eslint-disable jest/no-disabled-tests */
+  describe.skip('types behave as expected', () => {
+    test('does not throw errors', () => {
+      <InitialMessage>
+        <InitialMessage.MessagePrompts label="hello">
+          <InitialMessage.MessagePrompt selected>
+            What is MongoDB?
+          </InitialMessage.MessagePrompt>
+          <InitialMessage.MessagePrompt disabled>
+            How do I query MongoDB?
+          </InitialMessage.MessagePrompt>
+          <InitialMessage.MessagePrompt onClick={() => {}}>
+            What is blue but not heavy?
+          </InitialMessage.MessagePrompt>
+        </InitialMessage.MessagePrompts>
+      </InitialMessage>;
+    });
+
+    test('throws errors when enableHideOnSelect is used', () => {
+      <InitialMessage>
+        {/* @ts-expect-error - enableHideOnSelect is not a prop */}
+        <InitialMessage.MessagePrompts enableHideOnSelect={false}>
+          <InitialMessage.MessagePrompt>
+            What is MongoDB?
+          </InitialMessage.MessagePrompt>
+          <InitialMessage.MessagePrompt>
+            How do I query MongoDB?
+          </InitialMessage.MessagePrompt>
+          <InitialMessage.MessagePrompt>
+            What is blue but not heavy?
+          </InitialMessage.MessagePrompt>
+        </InitialMessage.MessagePrompts>
+      </InitialMessage>;
+    });
+  });
+});

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { storybookArgTypes, StoryMetaType } from '@lg-tools/storybook-utils';
+import { StoryFn } from '@storybook/react';
+
+import { MessageFeedProvider } from '../../MessageFeedContext';
+
+import { InitialMessage, InitialMessageProps } from '.';
+
+const messagePrompts = [
+  <InitialMessage.MessagePrompts
+    key="message-prompts"
+    onClickRefresh={() => {}}
+    label="Suggested Prompts"
+  >
+    <InitialMessage.MessagePrompt>
+      What is MongoDB?
+    </InitialMessage.MessagePrompt>
+    <InitialMessage.MessagePrompt>
+      How do I query MongoDB?
+    </InitialMessage.MessagePrompt>
+  </InitialMessage.MessagePrompts>,
+];
+
+const meta: StoryMetaType<typeof InitialMessage> = {
+  title: 'Composition/Chat/MessageFeed/InitialMessage',
+  component: InitialMessage,
+  parameters: {
+    default: 'LiveExample',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        children: [messagePrompts, undefined],
+      },
+      decorator: Instance => {
+        return (
+          <MessageFeedProvider shouldHideInitialMessage={false}>
+            <Instance />
+          </MessageFeedProvider>
+        );
+      },
+    },
+  },
+  argTypes: {
+    darkMode: storybookArgTypes.darkMode,
+  },
+  decorators: [
+    Instance => (
+      <MessageFeedProvider shouldHideInitialMessage={false}>
+        <Instance />
+      </MessageFeedProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+const Template: StoryFn<InitialMessageProps> = props => (
+  <InitialMessage {...props} />
+);
+
+export const LiveExample = {
+  render: Template,
+  args: {},
+};
+
+export const Generated = () => {};

chat/message-feed/src/Components/InitialMessage/InitialMessage.styles.ts

@@ -0,0 +1,42 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+import { spacing, transitionDuration, typeScales } from '@leafygreen-ui/tokens';
+
+const FOCUS_RING_WIDTH = 4;
+
+const baseOuterWrapperStyles = css`
+  display: grid;
+  grid-template-rows: 1fr;
+  gap: ${spacing[200]}px;
+`;
+
+const transitionStyles = css`
+  transform-origin: top left;
+  transition-property: grid-template-rows, opacity, transform;
+  transition-duration: ${transitionDuration.slower}ms;
+  transition-timing-function: ease-out;
+`;
+
+const hiddenWrapperStyles = css`
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transform: scale(0.8);
+`;
+
+export const getWrapperStyles = ({ shouldHide }: { shouldHide: boolean }) =>
+  cx(baseOuterWrapperStyles, transitionStyles, {
+    [hiddenWrapperStyles]: shouldHide,
+  });
+
+export const titleStyles = css`
+  font-size: ${typeScales.body2.fontSize}px;
+  line-height: ${typeScales.body2.lineHeight}px;
+`;
+
+export const innerWrapperStyles = css`
+  overflow: hidden;
+  margin: -${FOCUS_RING_WIDTH}px;
+  padding: ${FOCUS_RING_WIDTH}px;
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing[400]}px;
+`;