diff --git a/.changeset/rms-chat-layout.md b/.changeset/rms-chat-layout.md new file mode 100644 index 0000000000..9cc48fa281 --- /dev/null +++ b/.changeset/rms-chat-layout.md @@ -0,0 +1,7 @@ +--- +'@lg-chat/chat-layout': minor +--- + +[LG-5575](https://jira.mongodb.org/browse/LG-5575) + +- Added compatibility with `@lg-chat/leafygreen-chat-provider@6.0.0`. We recommend new projects use `@lg-chat/leafygreen-chat-provider` v6; support for v5 will be removed in a future major version. diff --git a/.changeset/rms-chat-provider.md b/.changeset/rms-chat-provider.md new file mode 100644 index 0000000000..dd45149c92 --- /dev/null +++ b/.changeset/rms-chat-provider.md @@ -0,0 +1,8 @@ +--- +'@lg-chat/leafygreen-chat-provider': major +--- + +- Removed `variant` prop and `Variant` enum export. The provider no longer supports variant selection (spacious/compact). All components now use a single, consistent design. +- Removed `containerWidth` from context value. This was only used in spacious variants. +- Removed wrapper `div` element from `LeafyGreenChatProvider`. +- Removed `use-resize-observer` dependency. diff --git a/.changeset/rms-chat-window.md b/.changeset/rms-chat-window.md new file mode 100644 index 0000000000..05868d40f4 --- /dev/null +++ b/.changeset/rms-chat-window.md @@ -0,0 +1,9 @@ +--- +'@lg-chat/chat-window': major +--- + +[LG-5575](https://jira.mongodb.org/browse/LG-5575) + +- Added compatibility with `@lg-chat/leafygreen-chat-provider@6.0.0`. We recommend new projects use `@lg-chat/leafygreen-chat-provider` v6; support for v5 will be removed in a future major version. +- All chat components have been simplified by removing variant-specific conditional logic. + - Removed `onClose` and `iconSlot` props from `ChatWindowProps`. These props were only used in the spacious variant. diff --git a/.changeset/rms-input-bar.md b/.changeset/rms-input-bar.md new file mode 100644 index 0000000000..5c33234a91 --- /dev/null +++ b/.changeset/rms-input-bar.md @@ -0,0 +1,12 @@ +--- +'@lg-chat/input-bar': major +--- + +[LG-5575](https://jira.mongodb.org/browse/LG-5575) + +- Added compatibility with `@lg-chat/leafygreen-chat-provider@6.0.0`. We recommend new projects use `@lg-chat/leafygreen-chat-provider` v6; support for v5 will be removed in a future major version. +- Removed deprecated `lgInputBarStyles` export. +- All chat components have been simplified by removing variant-specific conditional logic. + - Removed props: `badgeText`, `shouldRenderGradient`, and `shouldRenderHotKeyIndicator` +- Added min-width of 150px to `textarea` element to ensure proper height calculation. +- Updated `react-textarea-autosize` from `^8.3.2` to `^8.5.9`. diff --git a/.changeset/rms-lg-markdown.md b/.changeset/rms-lg-markdown.md new file mode 100644 index 0000000000..2f520f4f6d --- /dev/null +++ b/.changeset/rms-lg-markdown.md @@ -0,0 +1,5 @@ +--- +'@lg-chat/lg-markdown': major +--- + +- Removed deprecated `lgMarkdownStyles` export. diff --git a/.changeset/rms-message-feed.md b/.changeset/rms-message-feed.md new file mode 100644 index 0000000000..42e75a053e --- /dev/null +++ b/.changeset/rms-message-feed.md @@ -0,0 +1,9 @@ +--- +'@lg-chat/message-feed': major +--- + +[LG-5575](https://jira.mongodb.org/browse/LG-5575) + +- Added compatibility with `@lg-chat/leafygreen-chat-provider@6.0.0`. We recommend new projects use `@lg-chat/leafygreen-chat-provider` v6; support for v5 will be removed in a future major version. +- Removed deprecated `lgMessageFeedStyles` export. +- All chat components have been simplified by removing variant-specific conditional logic. diff --git a/.changeset/rms-message-feedback.md b/.changeset/rms-message-feedback.md new file mode 100644 index 0000000000..27726b395a --- /dev/null +++ b/.changeset/rms-message-feedback.md @@ -0,0 +1,8 @@ +--- +'@lg-chat/message-feedback': major +--- + +[LG-5575](https://jira.mongodb.org/browse/LG-5575) + +- Added compatibility with `@lg-chat/leafygreen-chat-provider@6.0.0`. We recommend new projects use `@lg-chat/leafygreen-chat-provider` v6; support for v5 will be removed in a future major version. +- Removed `PopoverMessageFeedback` component and `PopoverMessageFeedbackProps` type exports. diff --git a/.changeset/rms-message-rating.md b/.changeset/rms-message-rating.md new file mode 100644 index 0000000000..fdf2225862 --- /dev/null +++ b/.changeset/rms-message-rating.md @@ -0,0 +1,11 @@ +--- +'@lg-chat/message-rating': major +--- + +[LG-5575](https://jira.mongodb.org/browse/LG-5575) + +- Added compatibility with `@lg-chat/leafygreen-chat-provider@6.0.0`. We recommend new projects use `@lg-chat/leafygreen-chat-provider` v6; support for v5 will be removed in a future major version. +- Removed deprecated `lgMessageRatingStyles` export. +- All chat components have been simplified by removing variant-specific conditional logic. + - Removed `description` prop. + - Removed `RadioButton` component and related exports (`lgRadioButtonStyles`, `RadioButtonProps` type). diff --git a/.changeset/rms-message.md b/.changeset/rms-message.md new file mode 100644 index 0000000000..e3de448598 --- /dev/null +++ b/.changeset/rms-message.md @@ -0,0 +1,14 @@ +--- +'@lg-chat/message': major +--- + +[LG-5575](https://jira.mongodb.org/browse/LG-5575) + +- Added compatibility with `@lg-chat/leafygreen-chat-provider@6.0.0`. We recommend new projects use `@lg-chat/leafygreen-chat-provider` v6; support for v5 will be removed in a future major version. +- Removed the following exports: + - `lgMessageStyles` + - `MessageContainer` component, `lgMessageContainerStyles`, and `MessageContainerProps` type + - `MessageContent` component and `MessageContentProps` type + - `MessageLinks` component +- All chat components have been simplified by removing variant-specific conditional logic. + - Removed props: `align`, `avatar`, `baseFontSize`, `componentOverrides`, `links`, `linksHeading`, `onLinkClick`, and `verified` diff --git a/.changeset/rms-title-bar.md b/.changeset/rms-title-bar.md new file mode 100644 index 0000000000..54312df8c3 --- /dev/null +++ b/.changeset/rms-title-bar.md @@ -0,0 +1,10 @@ +--- +'@lg-chat/title-bar': major +--- + +[LG-5575](https://jira.mongodb.org/browse/LG-5575) + +- Added compatibility with `@lg-chat/leafygreen-chat-provider@6.0.0`. We recommend new projects use `@lg-chat/leafygreen-chat-provider` v6; support for v5 will be removed in a future major version. +- All chat components have been simplified by removing variant-specific conditional logic. + - Removed `align`, `iconSlot`, and `onClose` props. + - Removed `Align` enum export. diff --git a/chat/chat-layout/package.json b/chat/chat-layout/package.json index e7a9653c91..69dffe4102 100644 --- a/chat/chat-layout/package.json +++ b/chat/chat-layout/package.json @@ -41,7 +41,7 @@ }, "peerDependencies": { "@leafygreen-ui/leafygreen-provider": "workspace:^3.2.0 || workspace:^4.0.0 || workspace:^5.0.0", - "@lg-chat/leafygreen-chat-provider": "workspace:^" + "@lg-chat/leafygreen-chat-provider": "workspace:^5.1.0 || workspace:^6.0.0" }, "devDependencies": { "@lg-chat/chat-window": "workspace:^", diff --git a/chat/chat-layout/src/ChatLayout.stories.tsx b/chat/chat-layout/src/ChatLayout.stories.tsx index 42b1e62ba8..580bb04408 100644 --- a/chat/chat-layout/src/ChatLayout.stories.tsx +++ b/chat/chat-layout/src/ChatLayout.stories.tsx @@ -1,10 +1,7 @@ import React, { useState } 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 { LeafyGreenChatProvider } 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'; @@ -76,7 +73,7 @@ const Template: StoryFn = props => { }; return ( - + ( - - {children} - + {children} ); describe('ChatSideNav', () => { - beforeAll(() => { - global.ResizeObserver = jest.fn().mockImplementation(() => ({ - observe: jest.fn(), - unobserve: jest.fn(), - disconnect: jest.fn(), - })); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); - test('Header shows "New Chat" button when onClickNewChat provided', async () => { const onClickNewChat = jest.fn(); diff --git a/chat/chat-layout/src/ChatSideNav/ChatSideNavItem/ChatSideNavItem.spec.tsx b/chat/chat-layout/src/ChatSideNav/ChatSideNavItem/ChatSideNavItem.spec.tsx index 41ec8182a1..3115be5419 100644 --- a/chat/chat-layout/src/ChatSideNav/ChatSideNavItem/ChatSideNavItem.spec.tsx +++ b/chat/chat-layout/src/ChatSideNav/ChatSideNavItem/ChatSideNavItem.spec.tsx @@ -1,8 +1,5 @@ import React from 'react'; -import { - LeafyGreenChatProvider, - Variant, -} from '@lg-chat/leafygreen-chat-provider'; +import { LeafyGreenChatProvider } from '@lg-chat/leafygreen-chat-provider'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -11,24 +8,10 @@ import { AriaCurrentValue } from '@leafygreen-ui/lib'; import { ChatSideNav } from '../..'; const Providers = ({ children }: { children: React.ReactNode }) => ( - - {children} - + {children} ); describe('ChatSideNavItem', () => { - beforeAll(() => { - global.ResizeObserver = jest.fn().mockImplementation(() => ({ - observe: jest.fn(), - unobserve: jest.fn(), - disconnect: jest.fn(), - })); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); - test('renders with children', () => { render( diff --git a/chat/chat-window/README.md b/chat/chat-window/README.md index 31678946c2..028095a047 100644 --- a/chat/chat-window/README.md +++ b/chat/chat-window/README.md @@ -22,69 +22,25 @@ npm install @lg-chat/chat-window ## Example -### Compact - -```tsx -import { ChatWindow } from '@lg-chat/chat-window'; -import { - LeafyGreenChatProvider, - Variant, -} from '@lg-chat/leafygreen-chat-provider'; -import { Message } from '@lg-chat/message'; -import { MessageFeed } from '@lg-chat/message-feed'; - -const CompactExample = props => { - const userName = 'Sean Park'; - const [messages, setMessages] = useState>(baseMessages); - - const handleMessageSend = (messageBody: string) => { - const newMessage = { - messageBody, - userName, - }; - setMessages(messages => [...messages, newMessage]); - }; - - return ( - - - - {messages.map(messageFields => ( - - ))} - - - - - ); -}; -``` - -### Spacious - ```tsx import { ChatWindow } from '@lg-chat/chat-window'; -import { - LeafyGreenChatProvider, - Variant, -} from '@lg-chat/leafygreen-chat-provider'; +import { LeafyGreenChatProvider } from '@lg-chat/leafygreen-chat-provider'; import { Message } from '@lg-chat/message'; import { MessageFeed } from '@lg-chat/message-feed'; +import { InputBar } from '@lg-chat/input-bar'; -const SpaciousExample = props => { - const userName = 'Sean Park'; +const Example = props => { const [messages, setMessages] = useState>(baseMessages); const handleMessageSend = (messageBody: string) => { const newMessage = { messageBody, - userName, }; setMessages(messages => [...messages, newMessage]); }; return ( - + {messages.map(messageFields => ( diff --git a/chat/chat-window/package.json b/chat/chat-window/package.json index 9e7a2e6ca3..9974202aed 100644 --- a/chat/chat-window/package.json +++ b/chat/chat-window/package.json @@ -23,7 +23,6 @@ }, "devDependencies": { "@leafygreen-ui/drawer": "workspace:^", - "@lg-chat/avatar": "workspace:^", "@lg-chat/input-bar": "workspace:^", "@lg-chat/message": "workspace:^", "@lg-chat/message-feed": "workspace:^", @@ -33,7 +32,7 @@ }, "peerDependencies": { "@leafygreen-ui/leafygreen-provider": "workspace:^3.2.0 || workspace:^4.0.0 || workspace:^5.0.0", - "@lg-chat/leafygreen-chat-provider": "workspace:^" + "@lg-chat/leafygreen-chat-provider": "workspace:^5.1.0 || workspace:^6.0.0" }, "exports": { ".": { diff --git a/chat/chat-window/src/ChatWindow.stories.tsx b/chat/chat-window/src/ChatWindow.stories.tsx index 52676d23d7..30a712612b 100644 --- a/chat/chat-window/src/ChatWindow.stories.tsx +++ b/chat/chat-window/src/ChatWindow.stories.tsx @@ -1,10 +1,6 @@ import React, { useState } from 'react'; -import { Avatar } from '@lg-chat/avatar'; import { InputBar } from '@lg-chat/input-bar'; -import { - LeafyGreenChatProvider, - Variant, -} from '@lg-chat/leafygreen-chat-provider'; +import { LeafyGreenChatProvider } from '@lg-chat/leafygreen-chat-provider'; import { Message } from '@lg-chat/message'; import { MessageFeed } from '@lg-chat/message-feed'; import { MessagePrompt, MessagePrompts } from '@lg-chat/message-prompts'; @@ -43,25 +39,17 @@ const meta: StoryMetaType = { }, argTypes: { darkMode: storybookArgTypes.darkMode, - variant: { - control: 'radio', - options: Object.values(Variant), - }, }, parameters: { default: 'LiveExample', generate: { - storyNames: ['CompactVariant', 'SpaciousVariant'], combineArgs: { darkMode: [false, true], }, decorator: (Instance, context) => { return ( - + @@ -72,19 +60,12 @@ const meta: StoryMetaType = { }; export default meta; -const MyMessage = ({ - id, - isMongo, - messageBody, - userName, - hasMessageActions, -}: any) => { +const MyMessage = ({ id, isSender, messageBody, hasMessageActions }: any) => { return ( } - isSender={!!userName} + isSender={isSender} messageBody={messageBody} > {id === 0 && ( @@ -105,12 +86,10 @@ const MyMessage = ({ type ChatWindowStoryProps = ChatWindowProps & { assistantName?: string; - variant?: Variant; }; const Template: StoryFn = ({ assistantName, - variant, ...props }) => { const [messages, setMessages] = useState>(baseMessages); @@ -123,7 +102,7 @@ const Template: StoryFn = ({ }; return ( - + {messages.map(messageFields => ( @@ -145,14 +124,13 @@ export const LiveExample: StoryObj = { }, }; -const EmptyComponent = ({ variant, ...props }: ChatWindowStoryProps) => { - const userName = 'Sean Park'; +const EmptyComponent = ({ ...props }: ChatWindowStoryProps) => { const [messages, setMessages] = useState>([]); const handleMessageSend = (messageBody: string) => { const newMessage = { messageBody, - userName, + isSender: true, }; setMessages(messages => [...messages, newMessage]); }; @@ -165,7 +143,7 @@ const EmptyComponent = ({ variant, ...props }: ChatWindowStoryProps) => { margin: -100px; `} > - + {messages.map(messageFields => ( @@ -182,42 +160,7 @@ export const Empty: StoryObj = { render: EmptyComponent, }; -export const CompactVariant: StoryObj = { - render: Template, - args: { - children: ( - <> - - {baseMessages.map((messageFields: any) => ( - - ))} - - - - ), - variant: Variant.Compact, - }, -}; - -export const SpaciousVariant: StoryObj = { - render: Template, - args: { - children: ( - <> - - {baseMessages.map((messageFields: any) => ( - - ))} - - - - ), - variant: Variant.Spacious, - }, -}; - const WithMessagePromptsComponent = ({ - variant, assistantName, ...props }: ChatWindowStoryProps) => { @@ -225,7 +168,7 @@ const WithMessagePromptsComponent = ({ { id: 0, messageBody: 'Hello! How can I help you today?', - isMongo: true, + isSender: false, }, ]); const [selectedPromptIndex, setSelectedPromptIndex] = useState< @@ -246,14 +189,14 @@ const WithMessagePromptsComponent = ({ const userMessage = { id: messages.length, messageBody: selectedPrompt, - userName: 'User', + isSender: true, }; // Add assistant response const assistantMessage = { id: messages.length + 1, messageBody: `Great question! Let me explain about "${selectedPrompt}"...`, - isMongo: true, + isSender: false, }; setMessages(prev => [...prev, userMessage, assistantMessage]); @@ -263,13 +206,13 @@ const WithMessagePromptsComponent = ({ const newMessage = { id: messages.length, messageBody, - userName: 'User', + isSender: true, }; setMessages(prev => [...prev, newMessage]); }; return ( - +