Design update for shell and conversion starter #248
Merged
ankit-thesys merged 42 commits intomainfrom Jan 16, 2026
Merged
Conversation
* Added crayonChat.scss to the main SCSS index for CrayonChat component. * Improved BottomTray animations with updated transition timings and clip-path effects for open and closed states. * Adjusted Trigger component styles for better responsiveness and interaction feedback. * Enhanced ComposedBottomTray to conditionally render the logo based on availability.
* Added ConversationStarter component to BottomTray stories for improved user interaction. * Updated BottomTray index and SCSS files to include ConversationStarter styles and exports. * Refactored loadThread function in stories to handle new thread cases more effectively.
…SCSS imports in BottomTray * Simplified the ConversationStarter component by consolidating props destructuring. * Ensured conversationStarter.scss is correctly imported in bottomTray.scss for consistent styling.
ankit-thesys
changed the title
… stories * Added ConversationStarter component to CopilotShell SCSS and index for improved functionality. * Updated Shell stories to include ConversationStarter, providing sample starters for user interaction. * Refactored message handling in stories for better response simulation and user experience.
* Added ConversationStarter component to Shell index and SCSS for improved user interaction. * Updated Shell stories to include ConversationStarter with sample starters for better user experience. * Refactored message handling in stories to provide more realistic AI responses and improved functionality.
* Adjusted the styling of short variant conversation starter items for better responsiveness and appearance. * Modified story examples to reflect updated display texts and prompts for clarity and relevance.
…g updates * Introduced support for "short" and "long" variants in the ConversationStarter component, allowing for flexible display options. * Updated styles for both variants to improve layout and responsiveness, including icon and text alignment. * Modified stories to demonstrate the new variant functionality and provide clearer examples with icons and prompts.
…ponent * Added import for welcomeScreen.scss in BottomTray styles. * Changed hover and active background colors in ConversationStarter styles for both BottomTray and CopilotShell to use $bg-sunk for a consistent look.
* Exported WelcomeScreen component from BottomTray. * Created new stories to demonstrate WelcomeScreen with default and custom children, showcasing its integration and functionality within the BottomTray component.
* Imported WelcomeScreen component in CopilotShell styles and updated index exports. * Enhanced Shell stories to include examples demonstrating WelcomeScreen with default and custom content, showcasing its functionality within the CopilotShell component.
…y and CopilotShell * Simplified WelcomeScreen component by removing unnecessary message checks and streamlining props handling. * Updated BottomTray and CopilotShell stories to conditionally render WelcomeScreen based on message presence, showcasing its usage with both props and custom children. * Improved documentation for WelcomeScreen in story files, detailing its props and usage scenarios.
…nd styling in the full screen chat
…een integration * Consolidated imports for ConversationStarterProps and ConversationStarterIcon across multiple components. * Updated WelcomeScreen integration in Shell and CopilotShell, ensuring consistent exports and styling. * Improved story examples for WelcomeScreen, showcasing both props-based and custom children usage in various contexts.
…d styling and functionality * Removed disabled state handling from ConversationStarter components in BottomTray, CopilotShell, and Shell. * Enhanced WelcomeScreen to support desktop-only conversation starters and integrated a new desktop composer. * Updated styles for better layout and responsiveness, including adjustments to the desktop welcome composer. * Improved story examples to showcase the new features and integration of conversation starters.
…mponents * Changed typography from 'default' to 'small' for ConversationStarter styles in BottomTray, CopilotShell, and Shell components. * Added center alignment for short variant buttons in the WelcomeScreen styles to enhance layout consistency.
* Added a new flex container for desktop composer starters in the WelcomeScreen component to improve layout and spacing. * Updated the WelcomeScreen component structure for better readability and organization of JSX elements.
* Adjusted gap in the conversation starter component for improved layout consistency. * Modified border radius in the desktop welcome composer for a more refined appearance.
…ge and styling * Updated icon in the Composer component from ArrowRight to ArrowUp for better visual consistency. * Adjusted transition timings in BottomTray styles for smoother animations. * Enhanced padding and gap in conversation starter styles across CopilotShell and Shell components for improved layout.
… Shell components * Updated alignment from center to flex-start for improved layout consistency in conversation starter items. * Enhanced padding in icon containers for better visual spacing across components. * Adjusted padding in Shell component for mobile responsiveness.
…eadability * Updated the method of accessing the last message in the ScrollArea component from array indexing to the at() method for better clarity and modern syntax.
ankit-thesys
commented
Jan 13, 2026
js/packages/react-ui/src/components/BottomTray/ConversationStarter.tsx
Outdated
Show resolved
Hide resolved
js/packages/react-ui/src/components/BottomTray/conversationStarter.scss
Outdated
Show resolved
Hide resolved
Comment on lines
+104
to
+106
| if (messages.length > 0) { | ||
| return null; | ||
| } |
Contributor
Author
There was a problem hiding this comment.
test with C1Chat persistence, on switch thread + on new thread.
when switching thread and loading started/or not donot show
Contributor
Author
There was a problem hiding this comment.
actually remove this case from here and add in crayonchat
Contributor
Author
There was a problem hiding this comment.
testing, I have changed the condition so that we dont see flashes of the welcome screen.
js/packages/react-ui/src/components/BottomTray/welcomeScreen.scss
Outdated
Show resolved
Hide resolved
js/packages/react-ui/src/components/BottomTray/WelcomeScreen.tsx
Outdated
Show resolved
Hide resolved
* Renamed CSS classes in BottomTray components to include "bottom-tray" for improved clarity and consistency. * Updated JSX class names in ConversationStarter and WelcomeScreen components to match the new CSS class naming convention. * Enhanced layout and styling for conversation starter items and welcome screen elements to ensure uniformity across components.
…larity * Changed the method of accessing the last message from the at() method to array indexing for consistency with previous refactoring efforts.
* Updated documentation to specify the use of empty fragments (<></>) for no icon instead of empty strings. * Adjusted example usages in stories and markdown files to reflect the new icon handling approach across BottomTray, CopilotShell, and Shell components. * Removed checks for empty strings in icon rendering logic to streamline the code.
* Replaced logoUrl and icon props with a single image prop that accepts either a URL object or a ReactNode for improved flexibility. * Updated related styles and class names to reflect the new image handling approach across BottomTray, CopilotShell, and Shell components. * Enhanced documentation and examples in stories and markdown files to demonstrate the new image prop usage.
…omponents * Introduced `welcomeMessage` and `conversationStarters` props to ComposedBottomTray, ComposedCopilot, and ComposedStandalone components for enhanced user engagement when threads are empty. * Implemented a `WelcomeMessageRenderer` component to conditionally display welcome messages based on thread state. * Updated CrayonChat to pass down new props, ensuring consistent behavior across different chat types. * Enhanced stories to demonstrate the new features with sample configurations for welcome messages and conversation starters.
* Added detailed documentation for `WelcomeMessageConfig` and `ConversationStartersConfig` types, including examples for better clarity. * Introduced a type guard function `isWelcomeComponent` to differentiate between custom components and props-based configurations for welcome messages. * Updated exports in the CrayonChat index to include the new utility function.
…ce conversation starters * Updated ComposedBottomTray, ComposedCopilot, and ComposedStandalone components to use `useThreadListState` alongside `useThreadState` for improved thread management. * Introduced `ConversationStartersRenderer` component to conditionally display conversation starters based on thread state. * Enhanced logic in `WelcomeMessageRenderer` to account for loading states and selected threads, ensuring better user experience when threads are empty.
* Updated `useThreadManager` to include an `isInitialized` state, which is set after a brief timeout to manage component visibility. * Modified `useThreadState` to expose the new `isInitialized` property. * Adjusted `Thread` components in the UI to conditionally render based on the `isInitialized` state, enhancing user experience during loading. * Updated related types and store management to accommodate the new initialization logic.
* Added `useThreadState` to BottomTray, CopilotShell, and Shell WelcomeScreen components to conditionally render based on the presence of messages. * Updated logic to return null when messages are available, enhancing user experience by preventing unnecessary display of welcome screens when conversations are active.
* Removed unnecessary `useThreadListState` and `isLoadingMessages` checks from ComposedBottomTray, ComposedCopilot, and ComposedStandalone components. * Simplified conditional rendering logic in `WelcomeMessageRenderer` and `ConversationStartersRenderer` to focus solely on message presence, enhancing code clarity and maintainability.
* Updated ComposedBottomTray, ComposedCopilot, and ComposedStandalone components to include `isLoadingMessages` in the thread state. * Refined conditional rendering logic in `WelcomeMessageRenderer` and `ConversationStartersRenderer` to utilize the new `isChatEmpty` utility, improving clarity and user experience when determining message presence.
abhithesys
approved these changes
Jan 16, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.