Refactor: prelaunch UX/UI Changes #336
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Reviewer's Guide by SourceryThis PR introduces several UX/UI improvements to the prelaunch experience, enhancing user onboarding and navigation. It simplifies the onboarding process on both desktop and mobile, improves UI elements in the sidebar, and streamlines the model selection process. State diagram for sidebar and chat interface statesstateDiagram-v2
[*] --> Welcome
Welcome --> BotSelection: User clicks sidebar
BotSelection --> ChatInterface: Bot selected
ChatInterface --> ActiveChat: Start chat
ActiveChat --> BotSelection: Change bot
state ChatInterface {
[*] --> ShowBotDetails
ShowBotDetails --> ReadyToChat
ReadyToChat --> [*]
}
state BotSelection {
[*] --> PublicRoute
[*] --> ChatRoute
PublicRoute --> SelectBot
ChatRoute --> SelectBot
}
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/masterbots.ai/components/routes/browse/browse-chatbot-desktop-details.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/masterbots.ai/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThis pull request introduces comprehensive visual and functional enhancements to the Masterbots.ai application, focusing on route-specific styling, sidebar interactions, and mobile view improvements. The changes span multiple components, including CSS customization, header and sidebar modifications, and the introduction of new mobile view components for chat and onboarding experiences. The updates aim to improve user interface consistency, route-based styling, and mobile responsiveness. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🔇 Additional comments (3)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @Bran18 - I've reviewed your changes - here's some feedback:
Overall Comments:
- Consider fixing the dependency arrays in useCallback/useEffect hooks instead of using biome-ignore comments. Missing dependencies could lead to stale closures and bugs.
Here's what I looked at during the review
- 🟢 General issues: all looks good
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟢 Complexity: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (17)
apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx (6)
8-12: Consider adding prop validation for required fields.With the removal of default values,
botNameand other props are now required. Consider adding PropTypes or TypeScript type guards to ensure these required props are properly validated at runtime.
15-16: Remove commented code.Remove the commented background styling code if it's no longer needed. If this is temporary, consider creating a task to address this later.
17-18: Extract magic number into a named constant.The height calculation uses a magic number (
196px). Consider extracting this into a named constant to improve maintainability and document its purpose.+const HEADER_OFFSET = 196; // Document why this specific value is used -<div className="hidden h-[calc(100vh-196px)] md:flex items-center justify-center -translate-y-8 relative"> +<div className={`hidden h-[calc(100vh-${HEADER_OFFSET}px)] md:flex items-center justify-center -translate-y-8 relative`}>
32-36: Simplify className concatenation.Consider using a CSS module or creating a dedicated style constant for better maintainability.
+const avatarStyles = { + base: 'size-32 rounded-full relative', + background: 'bg-zinc-200 dark:bg-black', + ring: 'ring-4 ring-[#be16e8] dark:ring-[#82e46a]' +}; -className={cn( - 'size-32 rounded-full relative', - 'bg-zinc-200 dark:bg-black', - 'ring-4 ring-[#be16e8] dark:ring-[#82e46a]' -)} +className={cn(avatarStyles.base, avatarStyles.background, avatarStyles.ring)}
38-44: Add loading and error handling for the avatar image.The Image component should handle loading states and potential errors gracefully.
<Image src={avatar} alt={`${botName} avatar`} height={128} width={128} + loading="eager" + onError={(e) => { + e.currentTarget.src = '/default-avatar.png' + }} className="object-cover rounded-full" />
51-54: Consider using CSS Grid for responsive layout.The current approach uses complex width calculations. CSS Grid could provide a more maintainable solution for the layout.
-<p className="pt-2.5 max-w-[calc(100%-160px)] text-base text-zinc-500 dark:text-zinc-500 min-h-24"> +<div className="grid grid-cols-[1fr_160px] gap-4"> + <p className="pt-2.5 text-base text-zinc-500 dark:text-zinc-500 min-h-24">apps/masterbots.ai/components/routes/chat/chat-onboarding-chatbot-mobile.tsx (1)
7-7: Use CSS variables for theme colors.Hard-coded colors like
#be16e8and#82e46ashould be moved to CSS variables for better maintainability and theme consistency.Consider using CSS variables like:
-<Card className="w-full bg-white dark:bg-[#09090B]"> +<Card className="w-full bg-card">-<PanelLeft className="size-6 text-[#be16e8] dark:text-[#82e46a]" /> +<PanelLeft className="size-6 text-accent" />Also applies to: 25-26
apps/masterbots.ai/components/layout/sidebar/sidebar.tsx (2)
19-26: Explain the useEffect dependency warning ignore.The
biome-ignorecomment should include a proper explanation for why the exhaustive dependencies warning is being ignored.Consider either:
- Adding the missing dependencies
- Explaining the reason in the ignore comment
36-39: Use CSS variables for route-specific styling.The background colors are hardcoded, which makes theme maintenance difficult.
Consider using CSS variables:
- isChatRoute - ? 'bg-[#eeffea] dark:bg-[#081D02]' // For /c routes - : 'bg-[#fae8ff] dark:bg-[#17021D]' // For other routes + isChatRoute + ? 'bg-chat-gradient dark:bg-chat-gradient-dark' + : 'bg-public-gradient dark:bg-public-gradient-dark'apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx (2)
45-51: Optimize image loading for better UX.The Image component could benefit from additional optimization properties.
Consider adding priority and loading properties:
<Image src={avatar} alt={`${botName} avatar`} height={64} width={64} + priority + loading="eager" className="object-cover rounded-full" />
38-43: Use CSS variables for consistent theming.Similar to other components, the colors and dimensions should use CSS variables.
Consider using CSS variables:
- 'ring-4 ring-[#be16e8] dark:ring-[#82e46a]' + 'ring-4 ring-accent dark:ring-accent-dark'apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx (1)
98-107: Consider extracting mobile view props.The mobile view components receive multiple props that could be simplified using a shared props object, similar to how
sharedPropsis used forOnboardingChatbotDetails.- {isWelcomeView ? ( - <OnboardingMobileView /> - ) : ( - <SelectedBotMobileView - botName={botName} - description={activeChatbot?.description || ''} - avatar={activeChatbot?.avatar || randomChatbot?.avatar || ''} - onNewChat={handleNewChat} - /> - )}{' '} + {isWelcomeView ? ( + <OnboardingMobileView /> + ) : ( + <SelectedBotMobileView {...sharedProps} /> + )}apps/masterbots.ai/components/routes/chat/chat-combobox.tsx (1)
48-48: Consider using a constant for environment check.The environment check could be moved to a constant or utility function for reusability and consistency across the application.
+const ENV = { + isProd: process.env.NEXT_PUBLIC_APP_ENV === 'prod', + isDev: process.env.NEXT_PUBLIC_APP_ENV !== 'prod' +} as const + -const isDevEnv = process.env.NEXT_PUBLIC_APP_ENV !== 'prod' +const isDevEnv = ENV.isDevapps/masterbots.ai/components/layout/sidebar/profile-sidebar.tsx (2)
46-57: Consider adding loading state for profile navigation.The
goToProfilefunction should handle loading states to provide better user feedback during navigation.+ const [isNavigating, setIsNavigating] = useState(false) const goToProfile = useCallback( async (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() + setIsNavigating(true) const userSlug = toSlugWithUnderScore(user.name || '') if (userSlug) { setIsOpen(false) - router.push(`/u/${userSlug}/t`) + try { + await router.push(`/u/${userSlug}/t`) + } finally { + setIsNavigating(false) + } } }, - [router, user.name] + [router, user.name, setIsNavigating] )
129-144: Consider extracting navigation config to a constant.The navigation buttons could be defined in a configuration object for better maintainability.
+const NAVIGATION_ITEMS = { + pro: { + path: '/c/p', + label: 'Pro', + requiresDevMode: true + }, + wordware: { + path: '/wordware', + label: 'Ww', + requiresDevMode: true + } +} as const {appConfig.features.devMode && ( <> - <Button - variant="ghost" - className="justify-start w-full text-sm" - onClick={() => handleNavigation('/c/p')} - > - Pro - </Button> - <Button - variant="ghost" - className="justify-start w-full text-sm" - onClick={() => handleNavigation('/wordware')} - > - Ww - </Button> + {Object.entries(NAVIGATION_ITEMS).map(([key, item]) => ( + <Button + key={key} + variant="ghost" + className="justify-start w-full text-sm" + onClick={() => handleNavigation(item.path)} + > + {item.label} + </Button> + ))} </> )}apps/masterbots.ai/components/layout/sidebar/sidebar-link.tsx (1)
29-29: Consider memoizing route type calculation.The
getRouteType(pathname)is called in multiple components. Consider memoizing this value at a higher level to avoid recalculation.-const routeType = getRouteType(pathname) +const routeType = useMemo(() => getRouteType(pathname), [pathname])apps/masterbots.ai/lib/utils.ts (1)
337-342: Consider handling additional edge cases for route determination.While the current implementation works for basic routes, consider these improvements:
- Handle subpaths that might contain 'chat' or 'public' elsewhere in the URL
- Consider normalizing the pathname to handle trailing slashes consistently
Here's a more robust implementation:
export function getRouteType(pathname: string | null): 'chat' | 'public' | '' { if (!pathname) return '' - if (pathname.startsWith('/c')) return 'chat' - if (pathname.startsWith('/')) return 'public' + // Normalize pathname by removing trailing slash + const normalizedPath = pathname.replace(/\/$/, '') + // Match exact /c or /c/ prefix or /c/<anything> pattern + if (/^\/c(?:\/|$)/.test(normalizedPath)) return 'chat' + // Any other valid path starting with / is public + if (normalizedPath.startsWith('/')) return 'public' return '' }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockbis excluded by!**/bun.lockb
📒 Files selected for processing (18)
apps/masterbots.ai/app/globals.css(3 hunks)apps/masterbots.ai/components/layout/header/header.tsx(1 hunks)apps/masterbots.ai/components/layout/sidebar/profile-sidebar.tsx(2 hunks)apps/masterbots.ai/components/layout/sidebar/sidebar-link.tsx(8 hunks)apps/masterbots.ai/components/layout/sidebar/sidebar.tsx(2 hunks)apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx(3 hunks)apps/masterbots.ai/components/routes/chat/chat-combobox.tsx(4 hunks)apps/masterbots.ai/components/routes/chat/chat-onboarding-chatbot-mobile.tsx(1 hunks)apps/masterbots.ai/components/routes/chat/chat-options.tsx(1 hunks)apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx(1 hunks)apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx(1 hunks)apps/masterbots.ai/components/routes/chat/onboarding-chatbot-mobile-details.tsx(0 hunks)apps/masterbots.ai/components/routes/chat/prompt-form.tsx(5 hunks)apps/masterbots.ai/components/routes/thread/thread-popup.tsx(0 hunks)apps/masterbots.ai/components/routes/thread/user-thread-panel.tsx(1 hunks)apps/masterbots.ai/components/ui/tooltip.tsx(2 hunks)apps/masterbots.ai/lib/utils.ts(1 hunks)apps/masterbots.ai/package.json(1 hunks)
💤 Files with no reviewable changes (2)
- apps/masterbots.ai/components/routes/thread/thread-popup.tsx
- apps/masterbots.ai/components/routes/chat/onboarding-chatbot-mobile-details.tsx
✅ Files skipped from review due to trivial changes (2)
- apps/masterbots.ai/package.json
- apps/masterbots.ai/components/ui/tooltip.tsx
🔇 Additional comments (10)
apps/masterbots.ai/components/routes/chat/onboarding-chatbot-details.tsx (1)
20-28: Well-structured conditional rendering!The component effectively handles different states with clear, distinct UI elements and appropriate messaging for each view.
Also applies to: 57-64, 67-78
apps/masterbots.ai/components/layout/header/header.tsx (1)
23-24: LGTM! Navigation structure simplified.The navigation changes improve clarity by replacing specialized links with a more intuitive "Public" link, while maintaining the conditional "Pro" link for development mode.
apps/masterbots.ai/components/routes/chat/chat-onboarding-chatbot-mobile.tsx (1)
6-6: Consider using dynamic height calculation.The fixed height calculation
h-[calc(100vh-196px)]might not work well across different mobile devices and screen sizes.Consider using a more flexible approach like CSS Grid or Flexbox with
min-heightto ensure the content is always visible.apps/masterbots.ai/components/routes/chat/chat-selected-chatbot-mobile.tsx (1)
20-20: Consider flexible height calculation.Similar to the onboarding view, the fixed height calculation might cause issues on different devices.
Consider using a more flexible layout approach that adapts to different screen sizes.
apps/masterbots.ai/components/routes/chat/chat-options.tsx (1)
21-21: LGTM! UI simplification by removing font size selector.The removal of the font size selector streamlines the chat options interface, focusing on essential features like thread visibility and sharing.
apps/masterbots.ai/components/routes/thread/user-thread-panel.tsx (1)
217-221: LGTM! Improved UX by conditionally rendering search.The search input is now only shown when threads exist, reducing visual clutter and providing a cleaner interface.
apps/masterbots.ai/components/layout/sidebar/sidebar-link.tsx (1)
158-159: LGTM! Well-structured route-based styling implementation.The addition of
data-routeattributes enables consistent styling across different routes while maintaining clean separation of concerns between logic and styles.Also applies to: 175-176, 251-257, 276-292
apps/masterbots.ai/app/globals.css (1)
53-58: LGTM! Well-structured gradient system for route-specific styling.The implementation:
- Uses CSS custom properties for maintainable theming
- Provides consistent styling for both light and dark modes
- Implements smooth transitions for hover states
Also applies to: 105-110, 325-345
apps/masterbots.ai/lib/utils.ts (2)
332-336: Well-documented function with clear JSDoc comments.The documentation clearly describes the purpose, parameters, and return types of the function.
337-342: Verify the impact on route-based styling.Since this function is crucial for UI/UX changes, let's verify its usage in the sidebar components.
✅ Verification successful
Route type function is correctly integrated with styling system.
The
getRouteTypefunction is properly used for route-based styling across sidebar components, with CSS classes correctly matching its return values. The implementation handles all route patterns consistently and is crucial for the UI/UX styling system.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check how getRouteType is used in sidebar components and verify potential edge cases # Find all files that import or use getRouteType echo "Files importing or using getRouteType:" rg -l "getRouteType" --type ts --type tsx # Check for all route patterns in the codebase to ensure we handle them correctly echo -e "\nAll unique route patterns in the codebase:" rg -o 'path(?:name)?=["\'`](.*?)["\'`]' --type ts --type tsx | sort -uLength of output: 375
Script:
#!/bin/bash # Search for getRouteType usage with context echo "=== Files using getRouteType with context ===" rg "getRouteType" -t typescript -t tsx -C 2 # Find route patterns with proper quote escaping echo -e "\n=== Route patterns in the codebase ===" rg "pathname\s*=\s*['\"].*?['\"]" -t typescript -t tsx # Look specifically in sidebar-related files echo -e "\n=== Sidebar-related files containing route logic ===" rg -l "Sidebar|sidebar" -t typescript -t tsx | xargs rg "pathname|route" -C 2Length of output: 76309
| @@ -59,7 +60,7 @@ export default function ChatChatbotDetails() { | |||
| } | |||
|
|
|||
| fetchData() | |||
| }, [activeCategory, activeChatbot, session?.user]) | |||
| }, [activeCategory, activeChatbot]) | |||
There was a problem hiding this comment.
💡 Codebase verification
The dependency array should include session?.user
The getThreadNum function called within fetchData directly depends on session?.user for:
- Authentication check
- JWT token access (
session?.user.hasuraJwt) - User identification (
session?.user.id)
Omitting session?.user from the dependency array could lead to stale data or authentication issues if the session changes.
🔗 Analysis chain
Verify the dependency array change.
The removal of session?.user from the dependency array might cause stale data issues if the session changes. The fetchData function depends on session?.user for getThreadNum.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for other usages of session?.user in useEffect dependencies
ast-grep --pattern 'useEffect(() => {
$$$
}, [$$$session?.user$$$])'
Length of output: 72
Script:
#!/bin/bash
# Find the fetchData implementation and any usage of session?.user
ast-grep --pattern 'const fetchData = async () => {
$$$
}'
# Also search for any direct usage of session?.user
rg "session\?\.user" "apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx"
Length of output: 3294
Script:
#!/bin/bash
# Find getThreadNum implementation
ast-grep --pattern 'const getThreadNum = async () => {
$$$
}'
# Also search for getThreadNum function declaration in other possible formats
rg "getThreadNum" "apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx" -A 5
Length of output: 1793
| onSelect={currentValue => { | ||
| process.env.NEXT_PUBLIC_APP_ENV !== 'prod' | ||
| ? (setValue(currentValue === value ? '' : currentValue), changeModel(currentValue as AIModels)) | ||
| : '' | ||
| setOpen(false) // Closes the popover after selection. | ||
| ? (setValue(currentValue === value ? '' : currentValue), | ||
| changeModel(currentValue as AIModels)) | ||
| : '' | ||
| setOpen(false) // Closes the popover after selection. | ||
| }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Simplify the model selection logic.
The nested environment check is redundant since we're already within an isDevEnv conditional block.
- onSelect={currentValue => {
- process.env.NEXT_PUBLIC_APP_ENV !== 'prod'
- ? (setValue(currentValue === value ? '' : currentValue),
- changeModel(currentValue as AIModels))
- : ''
- setOpen(false) // Closes the popover after selection.
- }}
+ onSelect={currentValue => {
+ setValue(currentValue === value ? '' : currentValue)
+ changeModel(currentValue as AIModels)
+ setOpen(false)
+ }}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onSelect={currentValue => { | |
| process.env.NEXT_PUBLIC_APP_ENV !== 'prod' | |
| ? (setValue(currentValue === value ? '' : currentValue), changeModel(currentValue as AIModels)) | |
| : '' | |
| setOpen(false) // Closes the popover after selection. | |
| ? (setValue(currentValue === value ? '' : currentValue), | |
| changeModel(currentValue as AIModels)) | |
| : '' | |
| setOpen(false) // Closes the popover after selection. | |
| }} | |
| onSelect={currentValue => { | |
| setValue(currentValue === value ? '' : currentValue) | |
| changeModel(currentValue as AIModels) | |
| setOpen(false) | |
| }} |
| const handleBotSelection = () => { | ||
| if (activeThread?.chatbot) { | ||
| setActiveChatbot(activeThread.chatbot) | ||
| // Focus textarea after bot selection | ||
| if (inputRef.current) { | ||
| inputRef.current.focus() | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding error handling for bot selection.
The handleBotSelection function should handle the case where activeThread is undefined.
const handleBotSelection = () => {
+ if (!activeThread) {
+ console.warn('No active thread available for bot selection')
+ return
+ }
if (activeThread?.chatbot) {
setActiveChatbot(activeThread.chatbot)
// Focus textarea after bot selection
if (inputRef.current) {
inputRef.current.focus()
}
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleBotSelection = () => { | |
| if (activeThread?.chatbot) { | |
| setActiveChatbot(activeThread.chatbot) | |
| // Focus textarea after bot selection | |
| if (inputRef.current) { | |
| inputRef.current.focus() | |
| } | |
| } | |
| } | |
| const handleBotSelection = () => { | |
| if (!activeThread) { | |
| console.warn('No active thread available for bot selection') | |
| return | |
| } | |
| if (activeThread?.chatbot) { | |
| setActiveChatbot(activeThread.chatbot) | |
| // Focus textarea after bot selection | |
| if (inputRef.current) { | |
| inputRef.current.focus() | |
| } | |
| } | |
| } |
| // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> | ||
| <div onClick={handleBotSelection} className={cn( | ||
| 'backdrop-blur-[1px] font-semibold border border-[#27272A] rounded-[6px] absolute size-full top-0 left-0', | ||
| 'flex justify-center items-center dark:bg-[#27272A80] text-2xl', | ||
| 'cursor-pointer transition-all', | ||
| 'hover:border-[#82e46a] hover:text-[#82e46a]' | ||
| )}> | ||
| Select <span className="mx-2 text-[#82e46a]">{activeThread?.chatbot?.name}</span> to continue | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add keyboard accessibility to the selection overlay.
The overlay div should be keyboard accessible and follow ARIA best practices.
- // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
- <div onClick={handleBotSelection} className={cn(
+ <div
+ role="button"
+ tabIndex={0}
+ onClick={handleBotSelection}
+ onKeyDown={(e) => e.key === 'Enter' && handleBotSelection()}
+ className={cn(
'backdrop-blur-[1px] font-semibold border border-[#27272A] rounded-[6px] absolute size-full top-0 left-0',
'flex justify-center items-center dark:bg-[#27272A80] text-2xl',
'cursor-pointer transition-all',
'hover:border-[#82e46a] hover:text-[#82e46a]'
- )}>
+ )}
+ aria-label={`Select ${activeThread?.chatbot?.name} to continue`}
+ >📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> | |
| <div onClick={handleBotSelection} className={cn( | |
| 'backdrop-blur-[1px] font-semibold border border-[#27272A] rounded-[6px] absolute size-full top-0 left-0', | |
| 'flex justify-center items-center dark:bg-[#27272A80] text-2xl', | |
| 'cursor-pointer transition-all', | |
| 'hover:border-[#82e46a] hover:text-[#82e46a]' | |
| )}> | |
| Select <span className="mx-2 text-[#82e46a]">{activeThread?.chatbot?.name}</span> to continue | |
| </div> | |
| <div | |
| role="button" | |
| tabIndex={0} | |
| onClick={handleBotSelection} | |
| onKeyDown={(e) => e.key === 'Enter' && handleBotSelection()} | |
| className={cn( | |
| 'backdrop-blur-[1px] font-semibold border border-[#27272A] rounded-[6px] absolute size-full top-0 left-0', | |
| 'flex justify-center items-center dark:bg-[#27272A80] text-2xl', | |
| 'cursor-pointer transition-all', | |
| 'hover:border-[#82e46a] hover:text-[#82e46a]' | |
| )} | |
| aria-label={`Select ${activeThread?.chatbot?.name} to continue`} | |
| > | |
| Select <span className="mx-2 text-[#82e46a]">{activeThread?.chatbot?.name}</span> to continue | |
| </div> |
|
@sheriffjimoh -- @Bran18 has some code conflicts, which some of them are related with your changes. Can you double-check? It should be the @coderabbitai please help our collaborators to see if any of these conflicting files (or others that Bran18 has worked on this PR) was previously updated by sheriffjimoh. |
|
Tip For best results, initiate chat on the files or code changes. @AndlerRL I've found several recent changes by @sheriffjimoh that could be causing conflicts:
I recommend @sheriffjimoh and @Bran18 to:
🔗 Analysis chain🏁 Scripts executedThe following scripts were executed for the analysis: Script: Length of output: 6069 Script: Length of output: 11657 |
Summary by Sourcery
New Features:
Summary by CodeRabbit
Release Notes
New Features
UI/UX Changes
Performance & Environment
Dependency Updates