[LG-5935] feat(message-feed) InitialMessage Subcomponent

.changeset/dark-pots-tell.md

@@ -3,4 +3,5 @@
 ---
 
 - [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

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,103 @@ 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>
+            {/* TODO: will replace with MessageFeed.MessagePrompts in next PR */}
+            <MessagePrompts
+              label="Suggested Prompts"
+              onClickRefresh={() => {
+                // eslint-disable-next-line no-console
+                console.log('Refresh prompts');
+                setSelectedPromptIndex(undefined);
+              }}
+              enableHideOnSelect={false}
+            >
+              {prompts.map((prompt, promptIndex) => (
+                <MessagePrompt
+                  key={prompt}
+                  selected={selectedPromptIndex === promptIndex}
+                  onClick={() => handlePromptSelect(promptIndex)}
+                  data-testid={`prompt-${promptIndex}`}
+                >
+                  {prompt}
+                </MessagePrompt>
+              ))}
+            </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,13 +14,15 @@
     "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-rating": "workspace:^",
     "react-intersection-observer": "^8.25.1",

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

@@ -0,0 +1,60 @@
+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('renders the children', () => {
+    renderInitialMessage({
+      children: <div>I heard you like MongoDB</div>,
+    });
+    expect(screen.getByText('I heard you like MongoDB')).toBeInTheDocument();
+  });
+
+  test('is hidden when the shouldHideInitialMessage is true', () => {
+    renderInitialMessage({
+      shouldHideInitialMessage: true,
+      children: <div>I heard you like MongoDB</div>,
+    });
+    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();
+  });
+});

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

@@ -0,0 +1,53 @@
+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 meta: StoryMetaType<typeof InitialMessage> = {
+  title: 'Composition/Chat/MessageFeed/InitialMessage',
+  component: InitialMessage,
+  parameters: {
+    default: 'LiveExample',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+      },
+      decorator: Instance => {
+        return (
+          <MessageFeedProvider shouldHideInitialMessage={false}>
+            <Instance />
+          </MessageFeedProvider>
+        );
+      },
+    },
+  },
+  argTypes: {
+    darkMode: storybookArgTypes.darkMode,
+  },
+  args: {
+    children: <div>I heard you like MongoDB</div>, // TODO: will replace with a real content in the next PR
+  },
+  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;
+`;

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

@@ -0,0 +1,58 @@
+import React, { forwardRef } from 'react';
+import { Message } from '@lg-chat/message';
+
+import { AssistantAvatar } from '@leafygreen-ui/avatar';
+import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
+import { Body } from '@leafygreen-ui/typography';
+
+import { useMessageFeedContext } from '../../MessageFeedContext';
+import { MessageFeedSubcomponentProperty } from '../../shared.types';
+
+import {
+  INITIAL_MESSAGE_DESCRIPTION,
+  INITIAL_MESSAGE_TITLE,
+} from './constants';
+import {
+  getWrapperStyles,
+  innerWrapperStyles,
+  titleStyles,
+} from './InitialMessage.styles';
+import { type InitialMessageProps } from './InitialMessage.types';
+/**
+ * Renders an initial message in the message feed.
+ *
+ * @returns The rendered initial message component.
+ */
+export const InitialMessage = CompoundSubComponent(
+  // eslint-disable-next-line react/display-name
+  forwardRef<HTMLDivElement, InitialMessageProps>(
+    ({ children, ...rest }, fwdRef) => {
+      const { shouldHideInitialMessage } = useMessageFeedContext();
+
+      return (
+        <Message sourceType="markdown" isSender={false} ref={fwdRef} {...rest}>
+          <div
+            className={getWrapperStyles({
+              shouldHide: shouldHideInitialMessage,
+            })}
+          >
+            <div className={innerWrapperStyles}>
+              <div>
+                <AssistantAvatar size={20} />
+                <Body weight="semiBold" className={titleStyles}>
+                  {INITIAL_MESSAGE_TITLE}
+                </Body>
+                <Body>{INITIAL_MESSAGE_DESCRIPTION}</Body>
+              </div>
+              {children}
+            </div>
+          </div>
+        </Message>
+      );
+    },
+  ),
+  {
+    displayName: 'InitialMessage',
+    key: MessageFeedSubcomponentProperty.InitialMessage,
+  },
+);

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

@@ -0,0 +1,4 @@
+import { MessageProps } from '@lg-chat/message';
+
+export interface InitialMessageProps
+  extends Omit<MessageProps, 'messageBody' | 'isSender'> {}

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

@@ -0,0 +1,3 @@
+export const INITIAL_MESSAGE_TITLE = 'Hello! How can I help you?';
+export const INITIAL_MESSAGE_DESCRIPTION =
+  "I'm here to give expert guidance and recommendations for all things MongoDB.";

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

@@ -0,0 +1,2 @@
+export { InitialMessage } from './InitialMessage';
+export { type InitialMessageProps } from './InitialMessage.types';

chat/message-feed/src/Components/index.ts

@@ -0,0 +1 @@
+export { InitialMessage } from './InitialMessage';