[LG-5643] feat(message): hide unselected rating button and add fade after submit

.changeset/chat-layout.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/chat-layout': minor
+---
+
+Initial release of `ChatLayout`

README.md

@@ -149,6 +149,7 @@ import Button from '@leafygreen-ui/button';
 | [@lg-charts/legend](./charts/legend)                                 | [![version](https://img.shields.io/npm/v/@lg-charts/legend)](https://www.npmjs.com/package/@lg-charts/legend)                                   | ![downloads](https://img.shields.io/npm/dm/@lg-charts/legend?color=white)                  | [Live Example](http://mongodb.design/component/legend/live-example)                   |
 | [@lg-charts/series-provider](./charts/series-provider)               | [![version](https://img.shields.io/npm/v/@lg-charts/series-provider)](https://www.npmjs.com/package/@lg-charts/series-provider)                 | ![downloads](https://img.shields.io/npm/dm/@lg-charts/series-provider?color=white)         | [Live Example](http://mongodb.design/component/series-provider/live-example)          |
 | [@lg-chat/avatar](./chat/avatar)                                     | [![version](https://img.shields.io/npm/v/@lg-chat/avatar)](https://www.npmjs.com/package/@lg-chat/avatar)                                       | ![downloads](https://img.shields.io/npm/dm/@lg-chat/avatar?color=white)                    | [Live Example](http://mongodb.design/component/avatar/live-example)                   |
+| [@lg-chat/chat-layout](./chat/chat-layout)                           | [![version](https://img.shields.io/npm/v/@lg-chat/chat-layout)](https://www.npmjs.com/package/@lg-chat/chat-layout)                             | ![downloads](https://img.shields.io/npm/dm/@lg-chat/chat-layout?color=white)               | [Live Example](http://mongodb.design/component/chat-layout/live-example)              |
 | [@lg-chat/chat-window](./chat/chat-window)                           | [![version](https://img.shields.io/npm/v/@lg-chat/chat-window)](https://www.npmjs.com/package/@lg-chat/chat-window)                             | ![downloads](https://img.shields.io/npm/dm/@lg-chat/chat-window?color=white)               | [Live Example](http://mongodb.design/component/chat-window/live-example)              |
 | [@lg-chat/fixed-chat-window](./chat/fixed-chat-window)               | [![version](https://img.shields.io/npm/v/@lg-chat/fixed-chat-window)](https://www.npmjs.com/package/@lg-chat/fixed-chat-window)                 | ![downloads](https://img.shields.io/npm/dm/@lg-chat/fixed-chat-window?color=white)         | [Live Example](http://mongodb.design/component/fixed-chat-window/live-example)        |
 | [@lg-chat/input-bar](./chat/input-bar)                               | [![version](https://img.shields.io/npm/v/@lg-chat/input-bar)](https://www.npmjs.com/package/@lg-chat/input-bar)                                 | ![downloads](https://img.shields.io/npm/dm/@lg-chat/input-bar?color=white)                 | [Live Example](http://mongodb.design/component/input-bar/live-example)                |

chat/chat-layout/README.md

@@ -0,0 +1,128 @@
+# Chat Layout
+
+![npm (scoped)](https://img.shields.io/npm/v/@lg-chat/chat-layout.svg)
+
+#### [View on MongoDB.design](https://www.mongodb.design/component/chat-layout/live-example/)
+
+## Installation
+
+### PNPM
+
+```shell
+pnpm add @lg-chat/chat-layout
+```
+
+### Yarn
+
+```shell
+yarn add @lg-chat/chat-layout
+```
+
+### NPM
+
+```shell
+npm install @lg-chat/chat-layout
+```
+
+## Overview
+
+`@lg-chat/chat-layout` provides a CSS Grid-based layout system for building full-screen chat interfaces with a side nav that can be collapsed or pinned.
+
+This package exports:
+
+- `ChatLayout`: The grid container and context provider
+- `ChatMain`: Content area component that positions itself in the grid
+- `useChatLayoutContext`: Hook for accessing layout state
+
+## Examples
+
+### Basic
+
+```tsx
+import { ChatLayout, ChatMain } from '@lg-chat/chat-layout';
+
+function MyChatApp() {
+  return (
+    <ChatLayout>
+      {/* ChatSideNav will go here */}
+      <ChatMain>
+        <div>Your chat content</div>
+      </ChatMain>
+    </ChatLayout>
+  );
+}
+```
+
+### With Initial State and Toggle Pinned Callback
+
+```tsx
+import { ChatLayout, ChatMain } from '@lg-chat/chat-layout';
+
+function MyChatApp() {
+  const handleTogglePinned = (isPinned: boolean) => {
+    console.log('Side nav is now:', isPinned ? 'pinned' : 'collapsed');
+  };
+
+  return (
+    <ChatLayout initialIsPinned={false} onTogglePinned={handleTogglePinned}>
+      {/* ChatSideNav will go here */}
+      <ChatMain>
+        <div>Your chat content</div>
+      </ChatMain>
+    </ChatLayout>
+  );
+}
+```
+
+## Properties
+
+### ChatLayout
+
+| Prop                           | Type                          | Description                                                                                   | Default |
+| ------------------------------ | ----------------------------- | --------------------------------------------------------------------------------------------- | ------- |
+| `children`                     | `ReactNode`                   | The content to render inside the grid layout (`ChatSideNav` and `ChatMain` components)        | -       |
+| `className` _(optional)_       | `string`                      | Custom CSS class to apply to the grid container                                               | -       |
+| `initialIsPinned` _(optional)_ | `boolean`                     | Initial state for whether the side nav is pinned (expanded)                                   | `true`  |
+| `onTogglePinned` _(optional)_  | `(isPinned: boolean) => void` | Callback fired when the side nav is toggled. Receives the new `isPinned` state as an argument | -       |
+
+All other props are passed through to the underlying `<div>` element.
+
+### ChatMain
+
+| Prop       | Type        | Description                | Default |
+| ---------- | ----------- | -------------------------- | ------- |
+| `children` | `ReactNode` | The main content to render | -       |
+
+All other props are passed through to the underlying `<div>` element.
+
+**Note:** `ChatMain` must be used as a direct child of `ChatLayout` to work correctly within the grid system.
+
+## Context API
+
+### useChatLayoutContext
+
+Hook that returns the current chat layout context:
+
+```tsx
+const { isPinned, togglePin } = useChatLayoutContext();
+```
+
+**Returns:**
+
+| Property    | Type         | Description                              |
+| ----------- | ------------ | ---------------------------------------- |
+| `isPinned`  | `boolean`    | Whether the side nav is currently pinned |
+| `togglePin` | `() => void` | Function to toggle the pinned state      |
+
+## Behavior
+
+### State Management
+
+- `ChatLayout` manages the `isPinned` state internally and provides it to all descendants via `ChatLayoutContext`
+- When `togglePin` is called:
+  1. The `isPinned` state updates
+  2. Grid columns resize smoothly via CSS transition
+  3. The `onTogglePinned` callback fires (if provided) with the new state value
+- Descendant components can consume the context to:
+  - Read the current `isPinned` state
+  - Call `togglePin()` to toggle the sidebar

chat/chat-layout/package.json

@@ -0,0 +1,54 @@
+
+{
+  "name": "@lg-chat/chat-layout",
+  "version": "0.0.1",
+  "description": "LeafyGreen UI Kit Chat Layout",
+  "main": "./dist/umd/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "license": "Apache-2.0",
+  "exports": {
+    ".": {
+      "require": "./dist/umd/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./testing": {
+      "require": "./dist/umd/testing/index.js",
+      "import": "./dist/esm/testing/index.js",
+      "types": "./dist/types/testing/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "lg-build bundle",
+    "tsc": "lg-build tsc",
+    "docs": "lg-build docs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/lib": "workspace:^",
+    "@leafygreen-ui/tokens": "workspace:^",
+    "@lg-tools/test-harnesses": "workspace:^"
+  },
+  "peerDependencies": {
+    "@lg-chat/leafygreen-chat-provider": "workspace:^"
+  },
+  "devDependencies": {
+    "@lg-chat/chat-window": "workspace:^",
+    "@lg-chat/input-bar": "workspace:^",
+    "@lg-chat/message": "workspace:^",
+    "@lg-chat/message-feed": "workspace:^",
+    "@lg-chat/title-bar": "workspace:^"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/chat/chat-layout",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/LG/summary"
+  }
+}

chat/chat-layout/src/ChatLayout.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { ChatWindow } from '@lg-chat/chat-window';
+import { InputBar } from '@lg-chat/input-bar';
+import {
+  LeafyGreenChatProvider,
+  Variant,
+} from '@lg-chat/leafygreen-chat-provider';
+import { Message } from '@lg-chat/message';
+import { MessageFeed } from '@lg-chat/message-feed';
+import { TitleBar } from '@lg-chat/title-bar';
+import { StoryMetaType } from '@lg-tools/storybook-utils';
+import { StoryFn, StoryObj } from '@storybook/react';
+
+import { css } from '@leafygreen-ui/emotion';
+
+import { ChatLayout, type ChatLayoutProps, ChatMain } from '.';
+
+const meta: StoryMetaType<typeof ChatLayout> = {
+  title: 'Composition/Chat/ChatLayout',
+  component: ChatLayout,
+  parameters: {
+    default: 'LiveExample',
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          margin: '-100px',
+          height: '100vh',
+          width: '100vw',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+
+const sideNavPlaceholderStyles = css`
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 16px;
+  min-width: 200px;
+`;
+
+const testMessages = [
+  {
+    id: '1',
+    messageBody: 'Hello! How can I help you today?',
+    isSender: false,
+  },
+  {
+    id: '2',
+    messageBody: 'I need help with my database query.',
+  },
+  {
+    id: '3',
+    messageBody:
+      'Sure! I can help with that. What specific issue are you encountering?',
+    isSender: false,
+  },
+];
+
+const Template: StoryFn<ChatLayoutProps> = props => (
+  <LeafyGreenChatProvider variant={Variant.Compact}>
+    <ChatLayout {...props}>
+      <div className={sideNavPlaceholderStyles}>ChatSideNav Placeholder</div>
+      <ChatMain>
+        <TitleBar title="Chat Assistant" />
+        <ChatWindow>
+          <MessageFeed>
+            {testMessages.map(msg => (
+              <Message
+                key={msg.id}
+                messageBody={msg.messageBody}
+                isSender={msg.isSender}
+              />
+            ))}
+          </MessageFeed>
+          <InputBar onMessageSend={() => {}} />
+        </ChatWindow>
+      </ChatMain>
+    </ChatLayout>
+  </LeafyGreenChatProvider>
+);
+
+export const LiveExample: StoryObj<ChatLayoutProps> = {
+  render: Template,
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};