[LG-5935] feat(message-feed) InitialMessage Subcomponent#3490
[LG-5935] feat(message-feed) InitialMessage Subcomponent#3490shaneeza merged 48 commits intos/initial-message-integrationfrom
Conversation
…afygreen-ui into LG-5932-message-feed-compound
…afygreen-ui into LG-5935-initial-message
…message visibility
…afygreen-ui into LG-5935-initial-message
… for initial message display
…ed content and styles
…h constants for improved maintainability
…dling in chat window stories
…rompts in initial message component
…d visibility behavior
|
| Name | Type |
|---|---|
| @lg-chat/message-feed | Minor |
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
…methods for initial message visibility
|
Size Change: 0 B Total Size: 1.83 MB ℹ️ View Unchanged
|
There was a problem hiding this comment.
Pull request overview
This PR introduces an InitialMessage component for the message feed that displays a greeting when the chat is empty. The component automatically hides when messages are added to the feed. The PR also removes avatar and assistant name display from individual messages in favor of showing them in the initial message component.
Changes:
- Added
InitialMessagecompound component with animation support for showing/hiding - Removed avatar and assistant name rendering from the base
Messagecomponent - Implemented context-based visibility management for the initial message
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| chat/message/src/Message/Message.tsx | Removes avatar and assistant name display from Message component |
| chat/message-feed/src/MessageFeed/MessageFeed.tsx | Adds InitialMessage component integration and visibility logic |
| chat/message-feed/src/MessageFeed/MessageFeed.spec.tsx | Adds tests for InitialMessage rendering and hiding behavior |
| chat/message-feed/src/MessageFeed.stories.tsx | Adds stories demonstrating InitialMessage usage |
| chat/message-feed/src/Components/index.ts | Exports InitialMessage component |
| chat/message-feed/src/Components/InitialMessage/index.ts | Exports InitialMessage component |
| chat/message-feed/src/Components/InitialMessage/constants.ts | Defines default title and description text |
| chat/message-feed/src/Components/InitialMessage/InitialMessage.types.ts | Defines InitialMessage props interface |
| chat/message-feed/src/Components/InitialMessage/InitialMessage.tsx | Implements InitialMessage component with animation |
| chat/message-feed/src/Components/InitialMessage/InitialMessage.styles.ts | Defines styles for animation and layout |
| chat/message-feed/src/Components/InitialMessage/InitialMessage.spec.tsx | Tests for InitialMessage component |
| chat/chat-window/src/ChatWindow.stories.tsx | Adds story demonstrating InitialMessage with prompts |
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); // this useEffect should only run on initial render |
There was a problem hiding this comment.
The useEffect has an empty dependency array but references remainingChildrenArray.length. This means the check only runs on mount with the initial value of remainingChildrenArray, but if children are added later (as demonstrated in the test 'hides the initial message when a new message is added'), the effect won't run again to update shouldRenderInitialMessage. This violates the exhaustive-deps rule and creates a stale closure. Either add remainingChildrenArray to the dependency array or remove this effect if the logic in the second useEffect (lines 151-155) is sufficient.
| // eslint-disable-next-line react-hooks/exhaustive-deps | |
| }, []); // this useEffect should only run on initial render | |
| }, [remainingChildrenArray.length]); |
There was a problem hiding this comment.
This is correct. I only want it to run on initial render. The second useEffect checks whether to hide it, since it's already rendered.
chat/message-feed/src/Components/InitialMessage/InitialMessage.tsx
Outdated
Show resolved
Hide resolved
… for improved layout
…ption styles for cleaner layout
…support and simplify props in stories
…mponent structure for improved readability
| @@ -0,0 +1 @@ | |||
| export { InitialMessage } from './InitialMessage'; | |||
There was a problem hiding this comment.
nit: lowercase /components subdir name
There was a problem hiding this comment.
also need to export InitialMessageProps type
| const [shouldHideInitialMessage, setShouldHideInitialMessage] = | ||
| useState(false); | ||
| const [shouldRenderInitialMessage, setShouldRenderInitialMessage] = | ||
| useState(true); |
There was a problem hiding this comment.
Do we need both of these states? The way they're named makes me think we can just use one and maybe we can use lazy initialization
| <div className={scrollContainerStyles} ref={scrollContainerRef}> | ||
| {/* Empty span element used to track if container can scroll up */} | ||
| <span className={interceptStyles} ref={topInterceptRef} /> | ||
| {shouldRenderInitialMessage && initialMessage} |
There was a problem hiding this comment.
should this actually be unmounted or do we need to rely on css transition for animating it out/hiding from screen readers?
There was a problem hiding this comment.
I was thinking that if it unmounts, I would have to use React Transition Group for the transition, but maybe that's ok. We don't need the initial message anymore once a message is sent, so perhaps that's a good reason to unmount it.
There was a problem hiding this comment.
I tried this out, and because of the grid gap, unmounting the item causes the layout to shift up since the gap is suddenly removed. I'm thinking we should stick with hiding it with CSS.
https://jmp.sh/MOjirfJs
| import { MessageProps } from '@lg-chat/message'; | ||
|
|
||
| export interface InitialMessageProps | ||
| extends Omit<MessageProps, 'messageBody' | 'isSender'> {} |
There was a problem hiding this comment.
should we also omit markdownProps and sourceType? they don't seem to be relevant to this case
| const { shouldHideInitialMessage } = useMessageFeedContext(); | ||
|
|
||
| return ( | ||
| <Message sourceType="markdown" isSender={false} ref={fwdRef} {...rest}> |
There was a problem hiding this comment.
since we don't actually use the messageBody, we don't need to set sourceType or markdownProps
| > | ||
| <div className={innerWrapperStyles}> | ||
| <div> | ||
| <AssistantAvatar size={20} /> |
There was a problem hiding this comment.
| <AssistantAvatar size={20} /> | |
| <AssistantAvatar size={AvatarSize.Large} /> |
| <Message sourceType="markdown" isSender={false} ref={fwdRef} {...rest}> | ||
| <div | ||
| className={getWrapperStyles({ | ||
| shouldHide: shouldHideInitialMessage, |
There was a problem hiding this comment.
can we add a storybook play test for this?
There was a problem hiding this comment.
Added to MessageFeed
…s in InitialMessage types for improved clarity
… state management
… improved animation handling
…ndling and improve visibility checks in tests
| @@ -0,0 +1 @@ | |||
| export { InitialMessage, type InitialMessageProps } from './InitialMessage'; | |||
There was a problem hiding this comment.
Need to add the type exports at the package root
| /** | ||
| * If there are remaining children | ||
| */ | ||
| useEffect(() => { | ||
| if (remainingChildrenArray.length > 0) { | ||
| setShouldHideInitialMessage(true); | ||
| } | ||
| }, [remainingChildrenArray]); | ||
|
|
||
| const hasMessages = React.Children.count(remainingChildren) > 0; | ||
|
|
||
| const [shouldHideInitialMessage, setShouldHideInitialMessage] = | ||
| useState(hasMessages); |
There was a problem hiding this comment.
Seeing this updated version, I'm wondering: do we need to use state/effect? As children update, can we just rely on the react re-render to update hasMessages which would be passed to shouldHideInitialMessage in the MessageFeedProvider?
There was a problem hiding this comment.
This is a great callout
| if (remainingChildrenArray.length > 0) { | ||
| setShouldHideInitialMessage(true); | ||
| } |
There was a problem hiding this comment.
This strictly handles the case of hiding the InitialMessage. Is there anything that should happen when MessageFeed has its messages cleared?
There was a problem hiding this comment.
As in, should the InitialMessage reappear?
There was a problem hiding this comment.
Yes, maybe something to confirm with design although doesn't need to block this
…unnecessary state and improving readability
…essibility in message feed components
…ories to streamline visual testing
|
Coverage after merging LG-5935-initial-message into s/initial-message-integration will be
Coverage Report for Changed Files
|
|||||||||||||||||||||||||||||||||||||
* [LG-5932, LG-5934] refactor,feature(chat) Compound MessageFeed (#3488) * refactor(MessageFeed): convert to CompoundComponent and temp remove assistant name * refactor(MessageFeed): enhance component structure * feat(MessageFeed): add MessageFeedContext * docs(MessageFeed): add changeset * fix(MessageFeed): update error message for context provider * refactor(Message): undo message changes * chore(MessageFeed): add compound-component dependency * chore(pnpm-lock): add compound-component to dependencies * refactor(MessageFeed): move shared types * chore(changeset): update dependency version for @lg-chat/message-feed * fix(tsconfig): add missing newline at end of file * fix(MessageFeedContext): handle error boundary for React 17 in context hook tests * testing * [LG-5935] feat(message-feed) InitialMessage Subcomponent (#3490) * refactor(MessageFeed): convert to CompoundComponent and temp remove assistant name * refactor(MessageFeed): enhance component structure * feat(MessageFeed): add MessageFeedContext * docs(MessageFeed): add changeset * fix(MessageFeed): update error message for context provider * refactor(Message): undo message changes * chore(MessageFeed): add compound-component dependency * chore(pnpm-lock): add compound-component to dependencies * chore(MessageFeed): update dependencies for compound-component integration * refactor(MessageFeed): move shared types * refactor(InitialMessage): update import path for shared types and use enum for key * feat(InitialMessage): integrate MessageFeedContext to manage initial message visibility * chore(changeset): update dependency version for @lg-chat/message-feed * fix(tsconfig): add missing newline at end of file * fix(MessageFeedContext): handle error boundary for React 17 in context hook tests * feat(InitialMessage): implement styles and update component structure for initial message display * feat(InitialMessage): enhance initial message component with structured content and styles * refactor(InitialMessage): replace hardcoded title and description with constants for improved maintainability * feat(ChatWindow): add initial message prompts and enhance message handling in chat window stories * refactor(ChatWindow): remove enableHideOnSelect prop from Suggested Prompts in initial message component * test(InitialMessage): add unit tests for accessibility, rendering, and visibility behavior * test(MessageFeed): enhance tests with scrollTo mock and update query methods for initial message visibility * refactor(InitialMessage): simplify getWrapperStyles function and remove unused props * chore(MessageFeed): update dependencies and tsconfig to include new LeafyGreen UI components * refactor(ChatWindow): rename initial message component and update props for message prompts * chore(MessageFeed): remove unused @leafygreen-ui/hooks dependency from package.json and pnpm-lock.yaml * refactor(MessageFeed): remove commented-out MyMessage component from InitialMessage story * chore(MessageFeed): update changeset * refactor(InitialMessage): update styles for title and description components * refactor(InitialMessage): adjust inner wrapper styles with focus ring for improved layout * refactor(InitialMessage): restructure inner wrapper and remove description styles for cleaner layout * refactor(InitialMessage): integrate LeafyGreenProvider for dark mode support and simplify props in stories * refactor(InitialMessage): remove LeafyGreenProvider and streamline component structure for improved readability * feat(InitialMessage): add generated story for initialMessage * refactor(InitialMessage): update AssistantAvatar size and adjust props in InitialMessage types for improved clarity * fix(InitialMessage): export InitialMessageProps type for better type safety * refactor(InitialMessage): Components to components * refactor(InitialMessage): update import paths from Components to components * feat(InitialMessage): add interactive story for message addition with state management * fix(InitialMessage): add visibility property to transition styles for improved animation handling * feat(MessageFeed): enhance InitialMessage stories with new message handling and improve visibility checks in tests * refactor(MessageFeed): simplify initial message handling by removing unnecessary state and improving readability * refactor(MessageFeed): export InitialMessageProps type for better accessibility in message feed components * chore(MessageFeed): disable Chromatic snapshots for InitialMessage stories to streamline visual testing * [LG-5933] feat(message-feed) MessagePrompts Subcomponent (#3491) * refactor(MessageFeed): convert to CompoundComponent and temp remove assistant name * refactor(MessageFeed): enhance component structure * feat(MessageFeed): add MessageFeedContext * docs(MessageFeed): add changeset * fix(MessageFeed): update error message for context provider * refactor(Message): undo message changes * chore(MessageFeed): add compound-component dependency * chore(pnpm-lock): add compound-component to dependencies * chore(MessageFeed): update dependencies for compound-component integration * refactor(MessageFeed): move shared types * refactor(InitialMessage): update import path for shared types and use enum for key * feat(InitialMessage): integrate MessageFeedContext to manage initial message visibility * chore(changeset): update dependency version for @lg-chat/message-feed * fix(tsconfig): add missing newline at end of file * fix(MessageFeedContext): handle error boundary for React 17 in context hook tests * feat(InitialMessage): implement styles and update component structure for initial message display * feat(InitialMessage): enhance initial message component with structured content and styles * refactor(InitialMessage): replace hardcoded title and description with constants for improved maintainability * feat(ChatWindow): add initial message prompts and enhance message handling in chat window stories * refactor(ChatWindow): remove enableHideOnSelect prop from Suggested Prompts in initial message component * test(InitialMessage): add unit tests for accessibility, rendering, and visibility behavior * test(MessageFeed): enhance tests with scrollTo mock and update query methods for initial message visibility * refactor(InitialMessage): simplify getWrapperStyles function and remove unused props * chore(MessageFeed): update dependencies and tsconfig to include new LeafyGreen UI components * refactor(ChatWindow): rename initial message component and update props for message prompts * chore(MessageFeed): remove unused @leafygreen-ui/hooks dependency from package.json and pnpm-lock.yaml * refactor(MessageFeed): remove commented-out MyMessage component from InitialMessage story * chore(MessageFeed): update changeset * refactor(MessageFeed): integrate MessagePrompts and MessagePrompt components into InitialMessage * refactor(InitialMessage): update styles for title and description components * refactor(InitialMessage): adjust inner wrapper styles with focus ring for improved layout * test(InitialMessage, MessagePrompt, MessagePrompts): enhance tests for rendering and type validation * refactor(InitialMessage): rename component and add message prompts for enhanced user interaction * chore(pnpm-lock): add '@lg-chat/message-prompts' dependency and clean up unused entries * test(InitialMessage, MessagePrompts): improve error handling tests for enableHideOnSelect prop * chore(changeset): update to include new components * test(InitialMessage): fix JSX syntax in type validation tests for proper rendering * test(MessageFeed): add tests for rendering MessagePrompts and its child MessagePrompt components * refactor(InitialMessage): restructure inner wrapper and remove description styles for cleaner layout * refactor(InitialMessage): integrate LeafyGreenProvider for dark mode support and simplify props in stories * test(InitialMessage, MessageFeed): update tests to ensure proper rendering of MessagePrompts and prevent rendering of children when not a subcomponent * refactor(InitialMessage): remove LeafyGreenProvider and simplify component structure for improved readability * refactor(InitialMessage): remove LeafyGreenProvider and streamline component structure for improved readability * feat(InitialMessage): add generated story for initialMessage * feat(InitialMessage): enhance story with interactive MessagePrompts and update children prop for better demonstration * chore(ALL_PACKAGES): revert ALL_PACKAGES * refactor(InitialMessage): update AssistantAvatar size and adjust props in InitialMessage types for improved clarity * fix(InitialMessage): export InitialMessageProps type for better type safety * refactor(InitialMessage): Components to components * refactor(InitialMessage): update import paths from Components to components * feat(InitialMessage): add interactive story for message addition with state management * fix(InitialMessage): add visibility property to transition styles for improved animation handling * feat(MessageFeed): enhance InitialMessage stories with new message handling and improve visibility checks in tests * feat(InitialMessage): rename Components to components * fix(InitialMessage): update import paths from Components to components for consistency * refactor(InitialMessage): replace MessageFeedSubcomponentProperty with InitialMessageSubcomponentProperty in relevant components * feat(MessagePromptsItem): add MessagePromptsItem component with associated types and tests * refactor(MessagePrompts): rename MessagePrompt to MessagePromptsItem across components and update related tests and stories * refactor(MessageFeed): simplify initial message handling by removing unnecessary state and improving readability * refactor(MessageFeed): export InitialMessageProps type for better accessibility in message feed components * refactor(MessageFeed): export additional message prompts types for improved component integration * [LG-5936] feat(message-feed): ResourceList Subcomponent (#3495) * refactor(MessageFeed): convert to CompoundComponent and temp remove assistant name * refactor(MessageFeed): enhance component structure * feat(MessageFeed): add MessageFeedContext * docs(MessageFeed): add changeset * fix(MessageFeed): update error message for context provider * refactor(Message): undo message changes * chore(MessageFeed): add compound-component dependency * chore(pnpm-lock): add compound-component to dependencies * chore(MessageFeed): update dependencies for compound-component integration * refactor(MessageFeed): move shared types * refactor(InitialMessage): update import path for shared types and use enum for key * feat(InitialMessage): integrate MessageFeedContext to manage initial message visibility * chore(changeset): update dependency version for @lg-chat/message-feed * fix(tsconfig): add missing newline at end of file * fix(MessageFeedContext): handle error boundary for React 17 in context hook tests * feat(InitialMessage): implement styles and update component structure for initial message display * feat(InitialMessage): enhance initial message component with structured content and styles * refactor(InitialMessage): replace hardcoded title and description with constants for improved maintainability * feat(ChatWindow): add initial message prompts and enhance message handling in chat window stories * refactor(ChatWindow): remove enableHideOnSelect prop from Suggested Prompts in initial message component * test(InitialMessage): add unit tests for accessibility, rendering, and visibility behavior * test(MessageFeed): enhance tests with scrollTo mock and update query methods for initial message visibility * refactor(InitialMessage): simplify getWrapperStyles function and remove unused props * chore(MessageFeed): update dependencies and tsconfig to include new LeafyGreen UI components * refactor(ChatWindow): rename initial message component and update props for message prompts * chore(MessageFeed): remove unused @leafygreen-ui/hooks dependency from package.json and pnpm-lock.yaml * refactor(MessageFeed): remove commented-out MyMessage component from InitialMessage story * chore(MessageFeed): update changeset * refactor(MessageFeed): integrate MessagePrompts and MessagePrompt components into InitialMessage * refactor(InitialMessage): update styles for title and description components * refactor(InitialMessage): adjust inner wrapper styles with focus ring for improved layout * test(InitialMessage, MessagePrompt, MessagePrompts): enhance tests for rendering and type validation * refactor(InitialMessage): rename component and add message prompts for enhanced user interaction * chore(pnpm-lock): add '@lg-chat/message-prompts' dependency and clean up unused entries * test(InitialMessage, MessagePrompts): improve error handling tests for enableHideOnSelect prop * chore(changeset): update to include new components * test(InitialMessage): fix JSX syntax in type validation tests for proper rendering * test(MessageFeed): add tests for rendering MessagePrompts and its child MessagePrompt components * feat(MessageFeed): add ResourceLists and ResourceList properties to MessageFeedSubcomponentProperty * feat(MessageFeed): add InitialMessageWithResourceList story and update InitialMessage component to include ResourceList and ResourceListItem * refactor(InitialMessage): restructure inner wrapper and remove description styles for cleaner layout * refactor(ResourceListItem): update styles to use theme-based icon colors and improve structure * refactor(InitialMessage): integrate LeafyGreenProvider for dark mode support and simplify props in stories * test(InitialMessage, MessageFeed): update tests to ensure proper rendering of MessagePrompts and prevent rendering of children when not a subcomponent * refactor(InitialMessage): remove LeafyGreenProvider and simplify component structure for improved readability * refactor(InitialMessage): remove LeafyGreenProvider and streamline component structure for improved readability * feat(InitialMessage): add generated story for initialMessage * feat(InitialMessage): enhance story with interactive MessagePrompts and update children prop for better demonstration * chore(ALL_PACKAGES): revert ALL_PACKAGES * fix(InitialMessage): remove unused darkMode prop from story and include resourceList in the InitialMessage component * feat(ResourceList): integrate LeafyGreenProvider for dark mode support and update ResourceListProps to include DarkModeProps * feat(InitialMessage): add additional resource list items and update story configuration for enhanced interactivity * fix(ResourceListItem): update prop documentation for glyph and children to clarify usage * docs(MessageFeed): update changeset * refactor(InitialMessage): update AssistantAvatar size and adjust props in InitialMessage types for improved clarity * fix(InitialMessage): export InitialMessageProps type for better type safety * refactor(InitialMessage): Components to components * refactor(InitialMessage): update import paths from Components to components * feat(InitialMessage): add interactive story for message addition with state management * fix(InitialMessage): add visibility property to transition styles for improved animation handling * feat(MessageFeed): enhance InitialMessage stories with new message handling and improve visibility checks in tests * feat(InitialMessage): rename Components to components * fix(InitialMessage): update import paths from Components to components for consistency * refactor(InitialMessage): replace MessageFeedSubcomponentProperty with InitialMessageSubcomponentProperty in relevant components * feat(MessagePromptsItem): add MessagePromptsItem component with associated types and tests * refactor(MessagePrompts): rename MessagePrompt to MessagePromptsItem across components and update related tests and stories * feat(InitialMessage): implement InitialMessage component with accessibility tests, styles, and subcomponents for prompts and resource lists * fix(MessageFeed): correct import paths for InitialMessage component * feat(ResourceListItem): export ResourceListItemProps type for improved type safety * test(InitialMessage): add tests for ResourceList subcomponent and update existing tests * refactor(MessageFeed): simplify initial message handling by removing unnecessary state and improving readability * refactor(MessageFeed): export InitialMessageProps type for better accessibility in message feed components * feat(index): export ResourceList and its props for improved component accessibility * refactor(MessageFeed): export additional message prompts types for improved component integration * fix(chat) Update MessagePrompt padding (#3502) * fix(MessagePrompt.styles): update padding values for improved layout consistency * Update MessagePrompt padding to align with design specifications * (message-feed) InitialMessage README (#3498) * refactor(MessageFeed): convert to CompoundComponent and temp remove assistant name * refactor(MessageFeed): enhance component structure * feat(MessageFeed): add MessageFeedContext * docs(MessageFeed): add changeset * fix(MessageFeed): update error message for context provider * refactor(Message): undo message changes * chore(MessageFeed): add compound-component dependency * chore(pnpm-lock): add compound-component to dependencies * chore(MessageFeed): update dependencies for compound-component integration * refactor(MessageFeed): move shared types * refactor(InitialMessage): update import path for shared types and use enum for key * feat(InitialMessage): integrate MessageFeedContext to manage initial message visibility * chore(changeset): update dependency version for @lg-chat/message-feed * fix(tsconfig): add missing newline at end of file * fix(MessageFeedContext): handle error boundary for React 17 in context hook tests * feat(InitialMessage): implement styles and update component structure for initial message display * feat(InitialMessage): enhance initial message component with structured content and styles * refactor(InitialMessage): replace hardcoded title and description with constants for improved maintainability * feat(ChatWindow): add initial message prompts and enhance message handling in chat window stories * refactor(ChatWindow): remove enableHideOnSelect prop from Suggested Prompts in initial message component * test(InitialMessage): add unit tests for accessibility, rendering, and visibility behavior * test(MessageFeed): enhance tests with scrollTo mock and update query methods for initial message visibility * refactor(InitialMessage): simplify getWrapperStyles function and remove unused props * chore(MessageFeed): update dependencies and tsconfig to include new LeafyGreen UI components * refactor(ChatWindow): rename initial message component and update props for message prompts * chore(MessageFeed): remove unused @leafygreen-ui/hooks dependency from package.json and pnpm-lock.yaml * refactor(MessageFeed): remove commented-out MyMessage component from InitialMessage story * chore(MessageFeed): update changeset * refactor(MessageFeed): integrate MessagePrompts and MessagePrompt components into InitialMessage * refactor(InitialMessage): update styles for title and description components * refactor(InitialMessage): adjust inner wrapper styles with focus ring for improved layout * test(InitialMessage, MessagePrompt, MessagePrompts): enhance tests for rendering and type validation * refactor(InitialMessage): rename component and add message prompts for enhanced user interaction * chore(pnpm-lock): add '@lg-chat/message-prompts' dependency and clean up unused entries * test(InitialMessage, MessagePrompts): improve error handling tests for enableHideOnSelect prop * chore(changeset): update to include new components * test(InitialMessage): fix JSX syntax in type validation tests for proper rendering * test(MessageFeed): add tests for rendering MessagePrompts and its child MessagePrompt components * feat(MessageFeed): add ResourceLists and ResourceList properties to MessageFeedSubcomponentProperty * feat(MessageFeed): add InitialMessageWithResourceList story and update InitialMessage component to include ResourceList and ResourceListItem * refactor(InitialMessage): restructure inner wrapper and remove description styles for cleaner layout * refactor(ResourceListItem): update styles to use theme-based icon colors and improve structure * refactor(InitialMessage): integrate LeafyGreenProvider for dark mode support and simplify props in stories * test(InitialMessage, MessageFeed): update tests to ensure proper rendering of MessagePrompts and prevent rendering of children when not a subcomponent * refactor(InitialMessage): remove LeafyGreenProvider and simplify component structure for improved readability * refactor(InitialMessage): remove LeafyGreenProvider and streamline component structure for improved readability * feat(InitialMessage): add generated story for initialMessage * feat(InitialMessage): enhance story with interactive MessagePrompts and update children prop for better demonstration * chore(ALL_PACKAGES): revert ALL_PACKAGES * fix(InitialMessage): remove unused darkMode prop from story and include resourceList in the InitialMessage component * feat(ResourceList): integrate LeafyGreenProvider for dark mode support and update ResourceListProps to include DarkModeProps * feat(InitialMessage): add additional resource list items and update story configuration for enhanced interactivity * fix(ResourceListItem): update prop documentation for glyph and children to clarify usage * docs(MessageFeed): update changeset * refactor(InitialMessage): update AssistantAvatar size and adjust props in InitialMessage types for improved clarity * fix(InitialMessage): export InitialMessageProps type for better type safety * refactor(InitialMessage): Components to components * refactor(InitialMessage): update import paths from Components to components * feat(InitialMessage): add interactive story for message addition with state management * fix(InitialMessage): add visibility property to transition styles for improved animation handling * feat(MessageFeed): enhance InitialMessage stories with new message handling and improve visibility checks in tests * feat(InitialMessage): rename Components to components * fix(InitialMessage): update import paths from Components to components for consistency * refactor(InitialMessage): replace MessageFeedSubcomponentProperty with InitialMessageSubcomponentProperty in relevant components * feat(MessagePromptsItem): add MessagePromptsItem component with associated types and tests * refactor(MessagePrompts): rename MessagePrompt to MessagePromptsItem across components and update related tests and stories * feat(InitialMessage): implement InitialMessage component with accessibility tests, styles, and subcomponents for prompts and resource lists * fix(MessageFeed): correct import paths for InitialMessage component * feat(ResourceListItem): export ResourceListItemProps type for improved type safety * test(InitialMessage): add tests for ResourceList subcomponent and update existing tests * wip * docs(README): enhance documentation for MessageFeed and InitialMessage components, detailing subcomponents and usage examples * fix(README): correct syntax errors in useState initialization and update documentation for MessagePrompts and MessagePromptsItem * docs(MessageFeed): update README primary example
✍️ Proposed changes
🎟 Jira ticket: LG-5935
This PR introduces an
InitialMessagesubcomponent for the message feed that displays a greeting when the chat is empty. The component automatically hides when messages are added to the feed.✅ Checklist
For new components
For bug fixes, new features & breaking changes
pnpm changesetand documented my changes🧪 How to test changes