[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/MessageFeed.stories.tsx

@@ -4,9 +4,11 @@ import { MessagePrompt, MessagePrompts } from '@lg-chat/message-prompts';
 import { MessageRating } from '@lg-chat/message-rating';
 import { storybookArgTypes, StoryMetaType } from '@lg-tools/storybook-utils';
 import { StoryFn, StoryObj } from '@storybook/react';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 
+import { InitialMessageProps } from './components/InitialMessage/InitialMessage.types';
 import {
   baseMessages,
   type MessageFields,
@@ -161,6 +163,107 @@ const ChangingMessagesComponent = ({ darkMode, ...rest }: MessageFeedProps) => {
   );
 };
 
+export const InitialMessage = ({ ...rest }: MessageFeedProps) => {
+  return (
+    <div>
+      <MessageFeed style={{ width: 700, height: 400 }} {...rest}>
+        <MessageFeed.InitialMessage>
+          Filler content for initial message
+        </MessageFeed.InitialMessage>
+      </MessageFeed>
+    </div>
+  );
+};
+
+export const InitialMessageWithMessages = ({ ...rest }: MessageFeedProps) => {
+  return (
+    <div>
+      <MessageFeed style={{ width: 700, height: 400 }} {...rest}>
+        <MessageFeed.InitialMessage>
+          Filler content for initial message
+        </MessageFeed.InitialMessage>
+        {baseMessages.slice(0, 2).map(message => {
+          const { id, messageBody, userName } = message as MessageFields;
+          return (
+            <Message
+              key={id}
+              sourceType="markdown"
+              isSender={!!userName}
+              messageBody={messageBody}
+            />
+          );
+        })}
+      </MessageFeed>
+    </div>
+  );
+};
+
+export const InitialMessageWithNewMessage = ({ ...rest }: MessageFeedProps) => {
+  const [messages, setMessages] = useState<Array<any>>([]);
+
+  const handleButtonClick = () => {
+    setMessages([...messages, baseMessages[1]]);
+  };
+
+  return (
+    <div>
+      <MessageFeed style={{ width: 700, height: 400 }} {...rest}>
+        <MessageFeed.InitialMessage>
+          Filler content for initial message
+        </MessageFeed.InitialMessage>
+        {messages.map(message => {
+          const { id, messageBody, userName } = message as MessageFields;
+          return (
+            <Message
+              key={id}
+              sourceType="markdown"
+              isSender={!!userName}
+              messageBody={messageBody}
+            />
+          );
+        })}
+      </MessageFeed>
+      <button
+        data-testid="add-message-button"
+        onClick={() => handleButtonClick()}
+      >
+        Click me to add a message
+      </button>
+    </div>
+  );
+};
+
 export const ChangingMessages: StoryObj<MessageFeedProps> = {
   render: ChangingMessagesComponent,
 };
+
+export const InitialMessageTransition: StoryObj<InitialMessageProps> = {
+  render: InitialMessageWithNewMessage,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(
+      canvas.getByText('Filler content for initial message'),
+    ).toBeVisible();
+
+    // Click add message button
+    const addMessageButton = canvas.getByTestId('add-message-button');
+
+    // Click the message button to add a message
+    await userEvent.click(addMessageButton);
+
+    await waitFor(() =>
+      expect(
+        canvas.getByText('Filler content for initial message'),
+      ).not.toBeVisible(),
+    );
+    await waitFor(() =>
+      expect(canvas.getByText(baseMessages[1].messageBody)).toBeVisible(),
+    );
+  },
+  parameters: {
+    chromatic: {
+      delay: 300,
+    },
+  },
+};

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import {
+  INITIAL_MESSAGE_DESCRIPTION,
+  INITIAL_MESSAGE_TITLE,
+} from '../components/InitialMessage/constants';
+
+import { MessageFeed } from './MessageFeed';
+
+jest.mock('@lg-chat/lg-markdown', () => ({
+  LGMarkdown: jest.fn(({ children }) => <div>{children}</div>),
+}));
+
+describe('MessageFeed', () => {
+  const originalScrollTo = Element.prototype.scrollTo;
+
+  beforeAll(() => {
+    // Mock scrollTo since it's not implemented in JSDOM
+    Element.prototype.scrollTo = jest.fn(function mock(
+      this: Element,
+      x?: number | ScrollToOptions,
+      y?: number,
+    ) {
+      if (typeof x === 'object' && x !== null) {
+        // Handle ScrollToOptions
+        if ('top' in x) {
+          (this as HTMLElement).scrollTop = x.top ?? 0;
+        }
+
+        if ('left' in x) {
+          (this as HTMLElement).scrollLeft = x.left ?? 0;
+        }
+      } else if (typeof x === 'number' && typeof y === 'number') {
+        // Handle two number arguments
+        (this as HTMLElement).scrollLeft = x;
+        (this as HTMLElement).scrollTop = y;
+      }
+    });
+  });
+
+  afterAll(() => {
+    // Restore original scrollTo if it existed, otherwise delete the mock
+    if (originalScrollTo) {
+      Element.prototype.scrollTo = originalScrollTo;
+    } else {
+      delete (Element.prototype as Partial<Element>).scrollTo;
+    }
+  });
+
+  test('renders children', () => {
+    render(
+      <MessageFeed>
+        <div>Hello, how can I help you today?</div>
+        <div>Hello, fellow message</div>
+      </MessageFeed>,
+    );
+    expect(
+      screen.getByText('Hello, how can I help you today?'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Hello, fellow message')).toBeInTheDocument();
+  });
+
+  test('renders the initial message if the initial message is a child and there are no other children', () => {
+    render(
+      <MessageFeed>
+        <MessageFeed.InitialMessage>
+          <div>I heard you like MongoDB</div>
+        </MessageFeed.InitialMessage>
+      </MessageFeed>,
+    );
+    expect(screen.getByText(INITIAL_MESSAGE_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(INITIAL_MESSAGE_DESCRIPTION)).toBeInTheDocument();
+    expect(screen.getByText('I heard you like MongoDB')).toBeInTheDocument();
+  });
+
+  test('hides the initial message if the initial message is a child and there are other children', () => {
+    render(
+      <MessageFeed>
+        <MessageFeed.InitialMessage>
+          <div>I heard you like MongoDB</div>
+        </MessageFeed.InitialMessage>
+        <div>Hello, fellow message</div>
+      </MessageFeed>,
+    );
+    expect(screen.queryByText(INITIAL_MESSAGE_TITLE)).not.toBeVisible();
+    expect(screen.queryByText(INITIAL_MESSAGE_DESCRIPTION)).not.toBeVisible();
+    expect(screen.queryByText('I heard you like MongoDB')).not.toBeVisible();
+    expect(screen.getByText('Hello, fellow message')).toBeInTheDocument();
+  });
+
+  test('hides the initial message when a new message is added', () => {
+    const { rerender } = render(
+      <MessageFeed>
+        <MessageFeed.InitialMessage>
+          <div>I heard you like MongoDB</div>
+        </MessageFeed.InitialMessage>
+      </MessageFeed>,
+    );
+
+    expect(screen.getByText(INITIAL_MESSAGE_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(INITIAL_MESSAGE_DESCRIPTION)).toBeInTheDocument();
+    expect(screen.getByText('I heard you like MongoDB')).toBeInTheDocument();
+
+    rerender(
+      <MessageFeed>
+        <MessageFeed.InitialMessage>
+          <div>I heard you like MongoDB</div>
+        </MessageFeed.InitialMessage>
+        <div>Hello, how can I help you today?</div>
+      </MessageFeed>,
+    );
+
+    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();
+    expect(
+      screen.getByText('Hello, how can I help you today?'),
+    ).toBeInTheDocument();
+  });
+});