feat(chat): style improvements

.changeset/chat-styles-chat-window.md

@@ -0,0 +1,9 @@
+---
+'@lg-chat/chat-window': major
+---
+
+Updated height of outer container to ensure `ChatWindow` takes up the full vertical space of its parent container element. Also, added a hidden spacer element to ensure messages vertically flow from the bottom of the scroll container when child `MessageFeed` instance does not take up the full vertical space.
+
+Note: this should be upgraded with the following packages to avoid UI regressions:
+  - `@lg-chat/leafygreen-chat-provider@5.1.0`
+  - `@lg-chat/message-feed@8.0.0`

.changeset/chat-styles-fixed-chat-window.md

@@ -0,0 +1,11 @@
+---
+'@lg-chat/fixed-chat-window': minor
+---
+
+Added fixed height of 640px to `FixedChatWindow` popover element. The latest version of `MessageFeed` no longer has a fixed height which requires setting a fixed height in `FixedChatWindow` to prevent the popover element from growing to the full height of its parent container.
+
+However, please note that this is a maintenance change, and this package will be deprecated shortly. It is recommended to migrate to `@lg-chat/chat-window`.
+
+Note: if using this package, it should be upgraded with the following packages to avoid UI regressions:
+  - `@lg-chat/leafygreen-chat-provider@5.1.0`
+  - `@lg-chat/message-feed@8.0.0`

.changeset/chat-styles-leafygreen-chat-provider.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/leafygreen-chat-provider': minor
+---
+
+Added `height: 100%;` to wrapper div in `LeafyGreenChatProvider`

.changeset/chat-styles-message-feed.md

@@ -0,0 +1,9 @@
+---
+'@lg-chat/message-feed': major
+---
+
+Removed fixed default height of 500px from `MessageFeed` component. Now, `MessageFeed` will grow to the bounds of its parent container.
+
+Note: this should be upgraded with the following packages to avoid UI regressions:
+  - `@lg-chat/leafygreen-chat-provider@5.1.0`
+  - `@lg-chat/chat-window@5.0.0`

.changeset/odd-kiwis-run.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/drawer': patch
+---
+
+Fix `scrollable` prop so overflow shadow does not ever render if `scrollable={false}`

.changeset/stupid-vans-stare.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/input-bar': patch
+---
+
+Fix disclaimer text alignment to be centered below input

chat/chat-window/package.json

@@ -22,13 +22,15 @@
     "react-keyed-flatten-children": "^2.2.1"
   },
   "devDependencies": {
+    "@leafygreen-ui/drawer": "workspace:^",
     "@lg-chat/avatar": "workspace:^",
     "@lg-chat/input-bar": "workspace:^",
     "@lg-chat/message": "workspace:^",
     "@lg-chat/message-feed": "workspace:^",
     "@lg-chat/message-feedback": "workspace:^",
     "@lg-chat/message-prompts": "workspace:^",
-    "@lg-tools/build": "workspace:^"
+    "@lg-tools/build": "workspace:^",
+    "@storybook/test": "^8.6.14"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "workspace:^",

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

@@ -7,16 +7,32 @@ import {
 } from '@lg-chat/leafygreen-chat-provider';
 import { Message } from '@lg-chat/message';
 import { MessageFeed } from '@lg-chat/message-feed';
-import { WithMessageRating as MessageFeedbackStory } from '@lg-chat/message-feedback/stories';
 import { MessagePrompt, MessagePrompts } from '@lg-chat/message-prompts';
 import { storybookArgTypes, StoryMetaType } from '@lg-tools/storybook-utils';
 import { StoryFn, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
 
+import { DisplayMode, DrawerLayout } from '@leafygreen-ui/drawer';
+import { css } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { spacing } from '@leafygreen-ui/tokens';
 
 import baseMessages from './utils/baseMessages';
 import { ChatWindow, ChatWindowProps } from '.';
 
+const getActionsChild = () => (
+  <Message.Actions
+    // eslint-disable-next-line no-console
+    onClickCopy={() => console.log('Copy clicked')}
+    // eslint-disable-next-line no-console
+    onClickRetry={() => console.log('Retry clicked')}
+    // eslint-disable-next-line no-console
+    onRatingChange={() => console.log('Rating changed')}
+    // eslint-disable-next-line no-console
+    onSubmitFeedback={() => console.log('Feedback submitted')}
+  />
+);
+
 const meta: StoryMetaType<typeof ChatWindow> = {
   title: 'Composition/Chat/ChatWindow',
   component: ChatWindow,
@@ -61,7 +77,7 @@ const MyMessage = ({
   isMongo,
   messageBody,
   userName,
-  hasMessageRating,
+  hasMessageActions,
 }: any) => {
   return (
     <Message
@@ -82,7 +98,7 @@ const MyMessage = ({
         </MessagePrompts>
       )}
       {/* @ts-ignore onChange is passed in the story itself */}
-      {hasMessageRating && <MessageFeedbackStory />}
+      {hasMessageActions && getActionsChild()}
     </Message>
   );
 };
@@ -142,16 +158,24 @@ const EmptyComponent = ({ variant, ...props }: ChatWindowStoryProps) => {
   };
 
   return (
-    <LeafyGreenChatProvider variant={variant}>
-      <ChatWindow {...props}>
-        <MessageFeed>
-          {messages.map(messageFields => (
-            <MyMessage key={messageFields.id} {...messageFields} />
-          ))}
-        </MessageFeed>
-        <InputBar onMessageSend={handleMessageSend} />
-      </ChatWindow>
-    </LeafyGreenChatProvider>
+    <div
+      className={css`
+        height: 100vh;
+        width: 100vw;
+        margin: -100px;
+      `}
+    >
+      <LeafyGreenChatProvider variant={variant}>
+        <ChatWindow {...props}>
+          <MessageFeed>
+            {messages.map(messageFields => (
+              <MyMessage key={messageFields.id} {...messageFields} />
+            ))}
+          </MessageFeed>
+          <InputBar onMessageSend={handleMessageSend} />
+        </ChatWindow>
+      </LeafyGreenChatProvider>
+    </div>
   );
 };
 export const Empty: StoryObj<ChatWindowStoryProps> = {
@@ -301,3 +325,125 @@ export const WithMessagePrompts: StoryObj<ChatWindowStoryProps> = {
     },
   },
 };
+
+const ChatDrawerContent = ({
+  assistantName,
+  variant,
+}: {
+  assistantName?: string;
+  variant: Variant;
+}) => {
+  const [messages, setMessages] = useState<Array<any>>(baseMessages);
+
+  const handleMessageSend = (messageBody: string) => {
+    const newMessage = {
+      id: messages.length,
+      messageBody,
+      userName: 'User',
+    };
+    setMessages(prevMessages => [...prevMessages, newMessage]);
+  };
+
+  return (
+    <LeafyGreenChatProvider assistantName={assistantName} variant={variant}>
+      <ChatWindow>
+        <MessageFeed>
+          {messages.map(messageFields => (
+            <MyMessage key={messageFields.id} {...messageFields} />
+          ))}
+        </MessageFeed>
+        <InputBar onMessageSend={handleMessageSend} />
+      </ChatWindow>
+    </LeafyGreenChatProvider>
+  );
+};
+
+const MainContent = () => {
+  return (
+    <main
+      className={css`
+        padding: ${spacing[400]}px;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        gap: ${spacing[200]}px;
+      `}
+    >
+      <div>
+        <h2>Chat Demo with Drawer</h2>
+        <p>Sample chat interface in drawer layout</p>
+        <p>
+          This example demonstrates how to use the ChatWindow component within a
+          Drawer layout. The chat interface is displayed in the drawer panel,
+          which can be toggled open or closed by clicking the chat icon in the
+          toolbar.
+        </p>
+      </div>
+    </main>
+  );
+};
+
+const getToolbarData = ({
+  assistantName,
+  variant,
+}: {
+  assistantName?: string;
+  variant: Variant;
+}) => [
+  {
+    id: 'assistant',
+    label: 'MongoDB Assistant',
+    glyph: 'Sparkle' as const,
+    title: 'MongoDB Assistant',
+    content: (
+      <ChatDrawerContent assistantName={assistantName} variant={variant} />
+    ),
+    hasPadding: false,
+    resizable: true,
+    scrollable: false,
+  },
+];
+
+const InDrawerLayoutComponent: StoryFn<ChatWindowStoryProps> = ({
+  assistantName,
+  variant: _variant,
+  darkMode,
+}) => {
+  return (
+    <LeafyGreenProvider darkMode={darkMode}>
+      <div
+        className={css`
+          margin: -100px;
+          height: 100vh;
+        `}
+      >
+        <DrawerLayout
+          displayMode={DisplayMode.Embedded}
+          toolbarData={getToolbarData({
+            assistantName,
+            variant: Variant.Compact,
+          })}
+        >
+          <MainContent />
+        </DrawerLayout>
+      </div>
+    </LeafyGreenProvider>
+  );
+};
+
+export const InDrawerLayout: StoryObj<ChatWindowStoryProps> = {
+  render: InDrawerLayoutComponent,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const chatButton = canvas.getByRole('button', {
+      name: /MongoDB Assistant/i,
+    });
+    await userEvent.click(chatButton);
+  },
+  parameters: {
+    chromatic: {
+      delay: 400,
+    },
+  },
+};

chat/chat-window/src/ChatWindow/ChatWindow.styles.ts

@@ -11,12 +11,15 @@ import {
 } from '@leafygreen-ui/tokens';
 
 const baseContainerStyles = css`
+  overflow: hidden;
+  position: relative;
   width: 100%;
+  height: 100%;
+  max-height: 100%;
   justify-self: center;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  position: relative;
+  align-items: center;
 `;
 
 const getSpaciousContainerStyles = (theme: Theme) => css`
@@ -47,10 +50,8 @@ export const getContainerStyles = ({
     className,
   );
 
-export const contentContainerStyles = css`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+export const hiddenSpacerStyles = css`
+  flex: 1;
 `;
 
 const baseInputBarWrapperStyles = css`

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

@@ -13,10 +13,10 @@ import { isComponentType } from '@leafygreen-ui/lib';
 import { breakpoints } from '@leafygreen-ui/tokens';
 
 import {
-  contentContainerStyles,
   getContainerStyles,
   getInputBarStyles,
   getInputBarWrapperStyles,
+  hiddenSpacerStyles,
 } from './ChatWindow.styles';
 import { ChatWindowProps } from './ChatWindow.types';
 
@@ -77,7 +77,9 @@ export const ChatWindow = forwardRef<HTMLDivElement, ChatWindowProps>(
               iconSlot={iconSlot}
             />
           )}
-          <div className={contentContainerStyles}>{renderedChildren}</div>
+          {/* Hidden spacer to push messages and input bar to bottom when content is shorter than container */}
+          <div aria-hidden="true" className={hiddenSpacerStyles} />
+          {renderedChildren}
         </div>
       </LeafyGreenProvider>
     );

chat/chat-window/src/utils/baseMessages.ts

@@ -12,37 +12,29 @@ const baseMessages: Array<unknown> = [
   },
   {
     id: 2,
-    messageBody: `This thing is \`something\`.`,
-    isMongo: true,
-    sourceType: 'text',
-  },
-  {
-    id: 3,
     messageBody: `This should do the trick.\n
 \`\`\`typescript
 type HelloWorld = "Hello, world!"
 
 function helloWorld() {
 return "Hello, world!" satisfies HelloWorld;
 }
-\`\`\`
-      `,
+\`\`\``,
     isMongo: true,
-    hasMessageRating: true,
+    hasMessageActions: true,
   },
   {
-    id: 4,
+    id: 3,
     messageBody: 'How about another question?',
     userName: 'Sean Park',
   },
   {
-    id: 5,
+    id: 4,
     messageBody: `Sorry, MongoAI can't do that right now.
 
-Refer to [LeafyGreen UI](mongodb.design) or [LeafyGreen UI](mongodb.design) for more details. I'm filling out this space to see if the message will line up to the right side.
-    `,
+Refer to [LeafyGreen UI](mongodb.design) or [LeafyGreen UI](mongodb.design) for more details. I'm filling out this space to see if the message will line up to the right side.`,
     isMongo: true,
-    hasMessageRating: true,
+    hasMessageActions: true,
   },
 ];
 

chat/chat-window/tsconfig.json

@@ -50,6 +50,9 @@
     {
       "path": "../../packages/code"
     },
+    {
+      "path": "../../packages/drawer"
+    },
     {
       "path": "../../packages/emotion"
     },