Conversation
* update * fix: update * update * update * update * update * fix: opening threads * fix: rm threads dropdwon & added back link to bot page thread view page * fix: rm threads dropdwon & added back link to bot page thread view page * fix: update * fix: added back to profile page * fix: added sticky and color
…ock & clipboard hook (#425) * fix: codeblock ctas * fix: ts build
…426) * fix: css handleCLick condition * fix: get latest search params, continuous thread * fix(impr): all messages sorting * perf(impr): sign in & up redirection tweak * perf(impr): mobile chat css
Reviewer's Guide by SourceryThis pull request includes several enhancements and refactorings across the application. It standardizes Markdown rendering using a memoized component, improves chat thread handling and URL parameter management, enhances UI/UX with visual tweaks, and updates dependencies. It also fixes a bug where the clipboard API was not available and removes an unused import. Updated class diagram for useDevice hookclassDiagram
class DeviceInfo {
+isMobile: boolean
+isTablet: boolean
+isDesktop: boolean
}
class useDevice {
+(): DeviceInfo
}
useDevice -- DeviceInfo: returns
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request comprises multiple modifications across the codebase. Changes include the removal of unused imports, the addition of back-navigation elements and UI enhancements, updates to redirection behavior in authentication components, and consolidation of Markdown rendering logic via a new memoization function. There are also adjustments in styling for layout components, expanded support in the code block component, improvements in hook functionalities, and dependency updates in the package file. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ThreadPage
participant BackLink
participant Router
User->>ThreadPage: Views thread page
User->>BackLink: Clicks "Back" link (with ChevronLeft)
BackLink->>Router: Triggers navigation to profile URL (constructed from params)
Router-->>User: Loads the profile page
sequenceDiagram
participant User
participant AuthForm
participant Router
User->>AuthForm: Submits login/sign-in details
AuthForm->>Router: On success, calls router.push('/c')
Router-->>User: Navigates to '/c'
Possibly related PRs
Suggested labels
Poem
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/auth/signin-form.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. apps/masterbots.ai/app/u/[userSlug]/t/[category]/[domain]/[chatbot]/[threadSlug]/page.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. apps/masterbots.ai/components/layout/profile/profile-page-sidebar.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.
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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 (
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @AndlerRL - I've reviewed your changes - here's some feedback:
Overall Comments:
- The removal of the
preprocessChildrenfunction and its usage in theMemoizedReactMarkdowncomponents is a good simplification. - Consider adding a comment explaining why the sorting logic in
MBChatProviderwas changed. - The addition of
memoizedMarkdownComponentsis a great way to avoid re-rendering markdown components.
Here's what I looked at during the review
- 🟢 General issues: all looks good
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟡 Complexity: 2 issues found
- 🟢 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
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (14)
apps/masterbots.ai/lib/hooks/use-copy-to-clipboard.tsx (1)
15-17: Consider enhancing error handling beyond console logging.The added console log is helpful for debugging, but this implementation still silently fails from the user's perspective. Consider enhancing this to provide user feedback when the clipboard API isn't available.
if (typeof window === 'undefined' || !navigator.clipboard?.writeText) { console.log('Clipboard API not available') - return + return false } // Later in the function, when successful: navigator.clipboard.writeText(value).then(() => { setIsCopied(true) // ... }) // Update the return type to include success status return { isCopied, copyToClipboard, success: boolean }apps/masterbots.ai/components/layout/profile/profile-page-sidebar.tsx (1)
72-105: Consider removing commented code instead of keeping itThe Link component for the "Threads" section has been commented out, effectively disabling navigation to the user's profile. While commenting code can be useful during development, for production code it's better to remove unused code entirely rather than leave it commented out.
- {/* <Link - href={urlBuilders.profilesUrl({ - type: 'user', - usernameSlug: userSlug as string, - })} - onClick={handleToggleThreads} - className={cn( - 'flex w-full items-center justify-between px-4 py-3', - 'hover:bg-gray-200 dark:hover:bg-mirage transition-colors duration-200', - isThreadsOpen || openSidebar - ? 'bg-gray-200 dark:bg-mirage' - : '', - )} - // biome-ignore lint/a11y/useSemanticElements: This is a button that redirects you to a page - role="button" - aria-expanded={isThreadsOpen} - aria-controls="threads-panel" - onKeyDown={(e) => { - if (e.key === 'Enter' || e.key === 'Space') { - handleToggleThreads() - } - }} - > - <div className="flex items-center space-x-2"> - <MessagesSquare className="w-5 h-5" /> - <span className="font-normal">Threads</span> - </div> - <IconCaretRight - className={cn( - 'transition-transform duration-300 stroke-[#09090b] dark:stroke-[#FAFAFA]', - isThreadsOpen ? 'rotate-90' : 'rotate-0', - )} - /> - </Link> */}Also, if this navigation functionality is no longer needed, you may want to review if the
handleToggleThreadsfunction and theisThreadsOpenstate are still necessary.apps/masterbots.ai/components/routes/browse/browse-chat-messages.tsx (1)
19-19: Verify unused Button importThe
Buttoncomponent is imported but doesn't appear to be used in the new code. OnlybuttonVariantsis used (in the existing code at line 146).-import { Button, buttonVariants } from '@/components/ui/button' +import { buttonVariants } from '@/components/ui/button'apps/masterbots.ai/components/routes/browse/browse-chat-message.tsx (1)
28-28: Improved code organization with memoized componentsCentralizing markdown rendering components into a memoized function is a great architectural improvement. This change enhances maintainability, ensures consistent rendering across components, and potentially improves performance through memoization.
Consider adding a comment explaining the benefits of using the memoized components here, especially for future developers who might not be familiar with the pattern.
Also applies to: 54-54
apps/masterbots.ai/lib/hooks/use-device.tsx (1)
1-39: Well-implemented responsive design hookThe
useDevicehook is a well-structured implementation for detecting device types based on screen width. It follows React best practices with proper state management and cleanup.Consider adding debouncing to the resize event handler to improve performance when resize events fire rapidly:
import { useEffect, useState } from 'react' +import { debounce } from 'lodash' // Assuming lodash is available based on package.json export interface DeviceInfo { isMobile: boolean isTablet: boolean isDesktop: boolean } export function useDevice(): DeviceInfo { const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({ isMobile: false, isTablet: false, isDesktop: true, }) useEffect(() => { const updateDeviceInfo = () => { const width = window.innerWidth setDeviceInfo({ isMobile: width < 768, isTablet: width >= 768 && width < 1024, isDesktop: width >= 1024, }) } + const debouncedUpdateDeviceInfo = debounce(updateDeviceInfo, 100) //? Runs once on mount updateDeviceInfo() //? Add event listener - window.addEventListener('resize', updateDeviceInfo) + window.addEventListener('resize', debouncedUpdateDeviceInfo) //? Cleanup return () => { - window.removeEventListener('resize', updateDeviceInfo) + window.removeEventListener('resize', debouncedUpdateDeviceInfo) + debouncedUpdateDeviceInfo.cancel() } }, []) return deviceInfo }apps/masterbots.ai/lib/memoized-markdown-components.tsx (2)
1-52: Well-structured utility for consistent Markdown processingThe
preprocessChildrenfunction efficiently handles combining adjacent nodes with colons, which provides consistent rendering across the application.Consider adding a more detailed explanation for the
biome-ignorecomment on line 29:- // biome-ignore lint/suspicious/noExplicitAny: <explanation> + // biome-ignore lint/suspicious/noExplicitAny: React.ReactElement requires generic typing
54-217: Excellent centralization of Markdown component renderingThe
memoizedMarkdownComponentsfunction effectively centralizes custom Markdown rendering logic, promoting consistent styling and behavior across the application.Consider addressing the TypeScript
@ts-ignorecomments by properly typing the component props:- // @ts-ignore - p({ children }) { + p: ({ children, node, ...props }: { + children: React.ReactNode; + node?: any; + [key: string]: any + }) => {Apply similar typing to other component functions to eliminate
@ts-ignorecomments.For the code block key generation, consider a more robust approach:
- const codeBlockKey = `code-${language || ''}-${String(children).substring(0, 20).replace(/\n$/, '').replace(/\s/g, '-')}` + const codeBlockKey = `code-${language || ''}-${hashString(String(children))}`Where
hashStringcould be a simple hash function:function hashString(str: string): string { let hash = 0; for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; // Convert to 32bit integer } return Math.abs(hash).toString(36); }This would provide more unique and consistent keys for code blocks, especially when similar content is present.
apps/masterbots.ai/components/routes/chat/reasoning/reasoning-chat-message.tsx (1)
96-96: Using content as key might cause issues with duplicate linesWhile using line content as a key is generally better than using an index, it could cause issues if the same line appears multiple times in the reasoning content.
Consider using a combination of line content and index to ensure uniqueness:
-<div key={line} className="truncate"> +<div key={`${line}-${i}`} className="truncate">apps/masterbots.ai/lib/hooks/use-mb-chat.tsx (4)
252-252: Potential concurrency check
Deleting the thread if the response status is ≥ 400 is correct to avoid orphaned data. Confirm that you handle concurrent calls so that you don't delete a thread that might still be in use.
301-301: Critical path error handling
Similar to line 252, ensure thatdeleteThreadwon't remove a valid thread in multi-request scenarios. Adding a check onactiveThread?.messages.lengthor a cancellation token might help.
430-430: Duplicated retrieval logic
You're callinggetCurrentSearchParams()here, but also performing anew URLSearchParams(...)operation in earlier lines. Evaluate if you can unify them for clarity.
800-803: Redundant param retrieval
getCurrentSearchParamsis called again to extractisContinuingThreadandcontinuousThreadId. If this logic is repeated in multiple places, consider caching or storing it in state.apps/masterbots.ai/components/routes/chat/chat-message.tsx (1)
11-11: Confirm minimal usage ofuseState
The direct addition ofuseStatefor references is straightforward. Make sure to confirm if referencing or storing references in another context is beneficial for reusability.apps/masterbots.ai/components/ui/codeblock.tsx (1)
125-125: Ensure correct z-index
Addingz-10to the container might fix layering issues. Just confirm that it does not overshadow elements that should appear above the code block.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (25)
apps/masterbots.ai/app/b/[botSlug]/[threadSlug]/page.tsx(0 hunks)apps/masterbots.ai/app/u/[userSlug]/t/[category]/[domain]/[chatbot]/[threadSlug]/page.tsx(3 hunks)apps/masterbots.ai/components/auth/signin-form.tsx(1 hunks)apps/masterbots.ai/components/auth/signup-form.tsx(1 hunks)apps/masterbots.ai/components/layout/profile/profile-page-sidebar.tsx(2 hunks)apps/masterbots.ai/components/layout/sidebar/sidebar-link.tsx(3 hunks)apps/masterbots.ai/components/routes/browse/browse-chat-message.tsx(2 hunks)apps/masterbots.ai/components/routes/browse/browse-chat-messages.tsx(2 hunks)apps/masterbots.ai/components/routes/chat/chat-message.tsx(2 hunks)apps/masterbots.ai/components/routes/chat/chat-panel.tsx(3 hunks)apps/masterbots.ai/components/routes/chat/reasoning/reasoning-chat-message.tsx(4 hunks)apps/masterbots.ai/components/routes/thread/thread-component.tsx(1 hunks)apps/masterbots.ai/components/routes/thread/thread-popup.tsx(2 hunks)apps/masterbots.ai/components/shared/feature-toggle.tsx(1 hunks)apps/masterbots.ai/components/shared/loading-indicator.tsx(2 hunks)apps/masterbots.ai/components/shared/shared-accordion.tsx(1 hunks)apps/masterbots.ai/components/shared/short-message.tsx(1 hunks)apps/masterbots.ai/components/shared/thread-blog-markdown.tsx(1 hunks)apps/masterbots.ai/components/ui/codeblock.tsx(5 hunks)apps/masterbots.ai/lib/hooks/use-copy-to-clipboard.tsx(1 hunks)apps/masterbots.ai/lib/hooks/use-device.tsx(1 hunks)apps/masterbots.ai/lib/hooks/use-mb-chat.tsx(13 hunks)apps/masterbots.ai/lib/memoized-markdown-components.tsx(1 hunks)apps/masterbots.ai/lib/utils.ts(1 hunks)apps/masterbots.ai/package.json(2 hunks)
💤 Files with no reviewable changes (1)
- apps/masterbots.ai/app/b/[botSlug]/[threadSlug]/page.tsx
🧰 Additional context used
🧠 Learnings (2)
apps/masterbots.ai/components/shared/thread-blog-markdown.tsx (1)
Learnt from: AndlerRL
PR: bitcashorg/masterbots#337
File: apps/masterbots.ai/components/shared/thread-blog-markdown.tsx:27-27
Timestamp: 2025-03-27T02:57:07.326Z
Learning: In react-markdown components, when list items contain paragraph tags causing unwanted line breaks, use CSS to style the paragraphs (e.g., `[&>p]:inline-block [&>p]:m-0`) instead of removing the semantic structure.
apps/masterbots.ai/lib/utils.ts (1)
Learnt from: AndlerRL
PR: bitcashorg/masterbots#425
File: apps/masterbots.ai/lib/utils.ts:308-308
Timestamp: 2025-03-28T21:43:52.984Z
Learning: The 'pro' route type was intentionally added to the RouteType definition before its implementation logic, as the complete implementation exists in a separate branch (feat-pro-layout). This reflects an incremental development approach where type definitions may be updated in advance of their full implementation.
🧬 Code Definitions (6)
apps/masterbots.ai/components/shared/thread-blog-markdown.tsx (2)
apps/masterbots.ai/components/shared/markdown.tsx (1)
MemoizedReactMarkdown(5-10)apps/masterbots.ai/lib/memoized-markdown-components.tsx (1)
memoizedMarkdownComponents(54-217)
apps/masterbots.ai/components/shared/shared-accordion.tsx (1)
apps/masterbots.ai/lib/utils.ts (1)
cn(9-11)
apps/masterbots.ai/app/u/[userSlug]/t/[category]/[domain]/[chatbot]/[threadSlug]/page.tsx (1)
apps/masterbots.ai/lib/url.ts (1)
getCanonicalDomain(41-54)
apps/masterbots.ai/components/shared/loading-indicator.tsx (1)
apps/masterbots.ai/lib/hooks/use-device.tsx (1)
useDevice(9-39)
apps/masterbots.ai/lib/memoized-markdown-components.tsx (2)
apps/masterbots.ai/lib/utils.ts (1)
cn(9-11)apps/masterbots.ai/components/ui/codeblock.tsx (1)
CodeBlock(197-197)
apps/masterbots.ai/components/routes/chat/chat-message.tsx (1)
apps/masterbots.ai/lib/memoized-markdown-components.tsx (1)
memoizedMarkdownComponents(54-217)
🔇 Additional comments (39)
apps/masterbots.ai/components/auth/signin-form.tsx (1)
35-35: Navigation path updated for consistency.The redirection after successful sign-in has been changed from root path to '/c'. This aligns with the same change in the signup form, creating consistent post-authentication navigation flow.
apps/masterbots.ai/components/auth/signup-form.tsx (1)
97-97: Navigation path updated for consistency.The redirection after successful signup has been changed from root path to '/c'. This aligns with the same change in the signin form, creating consistent post-authentication navigation flow.
apps/masterbots.ai/components/routes/thread/thread-component.tsx (1)
73-73: Simplified arrow styling for better maintainability.The arrow class has been simplified from complex positioning to just width constraints. This reduces styling complexity while maintaining necessary functionality.
apps/masterbots.ai/components/shared/feature-toggle.tsx (1)
109-111:Details
❓ Verification inconclusive
Verify impact of removing the label text.
The label text has been removed while keeping the empty Label component. This might impact accessibility for users who rely on visible labels rather than tooltips.
Could you confirm if:
- The tooltip provides sufficient context without the visible label?
- The icon alone gives enough visual indication of the toggle's purpose?
- This change maintains accessibility compliance?
🏁 Script executed:
#!/bin/bash # Check if there are any references to the tooltip message being used for accessibility rg -A 2 "aria-label" --glob "*.tsx" apps/masterbots.ai/components/Length of output: 4898
Accessibility Impact: Verify Tooltip and Icon Effectiveness
It appears that no explicit accessibility attributes (like an
aria-label) have been added to the empty Label component infeature-toggle.tsx, and there isn’t an indication from the tooltip search that extra accessibility context is configured for this particular component. Please ensure:
- The tooltip (if used) delivers a clear and accessible description of the toggle’s purpose.
- The icon is supplemented with appropriate accessibility attributes (e.g.,
aria-labeloraria-labelledby) so that assistive technologies can interpret its function.- Overall, the modifications maintain compliance with accessibility standards, especially for users who benefit from visible labels.
apps/masterbots.ai/components/routes/chat/chat-panel.tsx (2)
68-68: Good addition of linter directive.The linter directive is correctly added to suppress the warning about using the
anytype.
167-167: UI improvement with shorter button text.Nice simplification from "Regenerate response" to just "Regenerate" - makes the UI more concise while maintaining clarity.
apps/masterbots.ai/components/layout/sidebar/sidebar-link.tsx (3)
244-244: Good addition of Pro route type detection.The new
isProvariable correctly checks if the current route type is 'pro', which aligns with the type definition changes in utils.ts.
275-284: Improved route type handling in navigation parameters.The updated navigation logic now appropriately checks for the 'pro' route type first before falling back to public/personal checks. This ensures consistent routing behavior for pro users.
307-307: Consistent pro route type implementation.The same logic for handling the 'pro' route type is consistently applied here in the URL builder parameters, ensuring that both navigation calls handle pro routes in the same way.
apps/masterbots.ai/components/shared/short-message.tsx (1)
1-1: Good refactoring to use centralized markdown components.Excellent refactoring to use the
memoizedMarkdownComponents()function instead of defining components inline. This promotes code reuse, ensures consistent rendering across components, and makes the code more maintainable.Also applies to: 12-12
apps/masterbots.ai/lib/utils.ts (1)
308-308: Appropriate addition of 'pro' to RouteType.Adding 'pro' to the RouteType definition is appropriate and aligns with the PR objectives to enhance various components. I notice from the retrieved learning that this type was intentionally added before its full implementation logic, which exists in a separate branch.
apps/masterbots.ai/components/shared/thread-blog-markdown.tsx (1)
1-12: Great refactoring to centralize markdown components!Replacing the inline components definition with the memoized implementation improves code maintainability and ensures consistent rendering across the application. This change aligns with the DRY principle by centralizing markdown rendering logic.
apps/masterbots.ai/components/routes/browse/browse-chat-messages.tsx (1)
112-120: Nice UX improvement with back navigationAdding a back navigation element improves the user experience by providing an easy way to return to the chatbot page. The sticky positioning ensures it remains accessible while scrolling.
One minor suggestion - consider using the
buttonVariantsutility that's already imported to style this link consistently with other navigation elements:- className="flex items-center leading-none gap-2 dark:text-white/80 text-[#09090BC3] dark:hover:text-white hover:text-[#09090B]" + className={cn( + buttonVariants({ variant: 'ghost', size: 'sm' }), + "flex items-center leading-none gap-2" + )}apps/masterbots.ai/components/shared/loading-indicator.tsx (2)
1-9: Good enhancement for responsive designUsing the
useDevicehook to detect mobile devices is a clean approach to providing a better user experience on different screen sizes.
15-39: Well-implemented device-specific messagesThe separation of desktop and mobile messages with shorter text for mobile devices is a thoughtful enhancement that improves readability on smaller screens.
apps/masterbots.ai/components/shared/shared-accordion.tsx (1)
325-346: Improved layout structure with flexboxThe restructuring of the trigger button content using flexbox provides better alignment and more reliable positioning of elements. The new approach with nested flex containers ensures proper spacing and responsive behavior.
apps/masterbots.ai/app/u/[userSlug]/t/[category]/[domain]/[chatbot]/[threadSlug]/page.tsx (3)
7-7: Good addition of navigation elementsAdding the ChevronLeft icon and Link component improves navigation capabilities.
Also applies to: 11-11
25-26: Proper parameter extraction and URL constructionThe destructuring of parameters and construction of the profileUrl creates a clean approach to building the navigation path.
Also applies to: 39-39
41-57: Enhanced user experience with back navigationThe addition of a back navigation link improves the user experience by providing a clear way to return to the profile page. The sticky positioning ensures the navigation remains accessible.
apps/masterbots.ai/components/routes/thread/thread-popup.tsx (2)
123-124: Enhanced responsive design with media queriesChanging from fixed padding (
!px-[16px],!px-[32px]) to responsive padding using media queries (md:px-[16px],md:px-[32px]) improves the component's adaptability across different screen sizes.
215-215: Improved mobile responsivenessAdding
px-4as a base padding withmd:px-[32px]for larger screens creates a better experience on mobile devices while maintaining the original design on desktop.apps/masterbots.ai/package.json (1)
65-65:Details
✅ Verification successful
Consistent dependency updates
Good updates to Next.js and React dependencies, keeping them on the latest minor versions.
Also applies to: 71-71, 73-73, 94-94, 100-100
🌐 Web query:
Are there any breaking changes in Next.js 15.2.4 or React 19.1.0 compared to previous versions?💡 Result:
Next.js 15.2.4 and React 19.1.0 introduce specific changes, though most breaking changes originated in their major releases (Next.js 15 and React 19). Here's a breakdown:
Next.js 15.2.4 Breaking Changes
This patch release primarily backports fixes, but includes targeted adjustments:
- Middleware Origin Checks:
- Subrequest handling now matches between Edge and Node.js environments[10].
- Excludes images/static media from development origin checks[10].
- Removes direct IP/port bypass in development origin verification[10].
- Origin check logic is now opt-in instead of opt-out[10].
Applications relying on implicit origin checks may need adjustments.
React 19.1.0 Breaking Changes
As a minor release, React 19.1.0 does not introduce new breaking changes beyond those in React 19.0.0. Key React 19 breaking changes include:
- New JSX Transform Required:
- Apps must use the updated JSX transform for features like
refas a prop[2][11].- Error Handling:
- Uncaught errors are reported via
window.reportError(not rethrown)[2][11].- Custom error handling via
onCaughtError/onUncaughtErrorincreateRoot[11].- Deprecated API Removals:
propTypes,defaultProps(for functions), string refs,React.createFactory, and legacy context APIs[2][11].- StrictMode Changes:
- Memoization (
useMemo,useCallback) behavior adjusted during double renders[11].
Key Next.js 15 Breaking Changes (Original Major Release)
While Next.js 15.2.4 itself has minimal breaks, the broader Next.js 15 release included:
- Caching Defaults:
fetch, GET Route Handlers, and client navigations no longer cached by default[1][7].- Image Optimization:
sharpreplacessquoosh(requires manual installation if using)[1][6].- Middleware Restrictions:
- Blocks React Server imports in Middleware[1].
- Font System Updates:
- Removed
font-familyhashing and external@next/fontpackage[1].- Config Defaults:
- Enabled
swcMinify,outputFileTracing, and others by default[1].
Migrating Tips
- Next.js: Use
npx @next/codemod@canary upgrade latestfor automated fixes[7].- React 19: Update dependencies and replace deprecated APIs (e.g.,
useFormState→useActionState)[7][11].For detailed migration guides, refer to Next.js's Upgrade Guide and React's 19 Upgrade Documentation.
Citations:
- 1: https://nextjs.org/blog/next-15
- 2: https://github.com/facebook/react/releases
- 3: https://nextjs.org/blog/next-15-1
- 4: https://nextjs.org/blog/next-15-2
- 5: https://www.nextsteps.dev/posts/exploring-react-19
- 6: https://ordergroup.co/resources/article-business-and-technical/next-js-15-what-is-new/
- 7: https://nextjs.org/docs/app/building-your-application/upgrading/version-15
- 8: https://react.dev/blog/2024/12/05/react-19
- 9: ant-design/ant-design#51458
- 10: https://github.com/vercel/next.js/releases
- 11: https://react.dev/blog/2024/04/25/react-19-upgrade-guide
- 12: https://nextjs.org/blog
- 13: https://docs.airship.com/platform/mobile/resources/changelogs/react-native-changelog/
- 14: https://nextjs.org/docs/pages/building-your-application/upgrading
- 15: https://legacy.reactjs.org/versions/
- 16: https://github.com/facebook/react/blob/main/CHANGELOG.md
Verified Dependency Updates: Next.js 15.2.4 & React 19.1.0
The dependency updates in
apps/masterbots.ai/package.jsonare consistent improvements overall. Notably:
- Next.js 15.2.4: This patch introduces some targeted changes—specifically, middleware origin checks have shifted to an opt-in mode. This should not affect most applications unless you rely on the previous implicit behavior.
- React 19.1.0: As a minor release, it carries forward the breaking changes established in React 19.0.0 without adding new ones, ensuring a smooth upgrade.
These updates (applied at lines 65, 71, 73, 94, and 100) are safe to merge. However, if your application uses Next.js middleware heavily, please verify that the new origin check behavior aligns with your requirements.
apps/masterbots.ai/components/routes/chat/reasoning/reasoning-chat-message.tsx (3)
7-14: Clean import organizationGood reorganization of imports to include the new memoized components and simplify icon usage.
79-79: Improved UI labeling and renderingThe UI text changes from "AI Thinking Process" to "Reasoning" and "Final Answer" to "Answer" make the interface clearer and more concise. Using the
ChevronsDownUpicon simplifies the toggle button implementation.Also applies to: 86-86, 96-96, 122-122
128-131: Excellent use of centralized markdown componentsGood implementation of the new
memoizedMarkdownComponentsfunction, which enhances code maintainability by centralizing Markdown rendering logic.apps/masterbots.ai/lib/hooks/use-mb-chat.tsx (7)
173-175: Double-check fallback logic for thread ID
WhenisContinuousThreadis false, the thread ID defaults toactiveThread?.threadId || randomThreadId.current. Ensure this does not override existing thread IDs in mid-conversation scenarios and inadvertently start a new thread.Would you confirm whether
activeThread?.threadIdis always set for existing threads or if there's a risk of returning a random ID unexpectedly?
187-187: Conditional thread ID usage
ReturningthreadIdfor new chats is logical. Just be aware that ifthreadIdis not set, it might cause confusion or fallback to the random ID.
220-220: Uniqueidproperty
UsingthreadIdas theidinuseChatOptionshelps isolate chat sessions. EnsurethreadIdremains stable across re-renders, so the chat state isn't reset prematurely.
470-470: Ensure correct thread deletion
In theonErrorcallback, you're deleting the thread if it's a new chat. Confirm that partial updates or other side effects have not occurred before.
528-553: Validate message sorting logic
You are handling chronological order and role-based ordering for identical timestamps. This approach looks sound, but be cautious about potential ties if there's more than one user message with the same timestamp. Since you rely on chronological order as primary sorting, ensure the timestamps are unique or use a stable ID fallback.
784-784: Inconsistentidusage
Passingid: activeThread?.threadIdin the appended message may conflict if the user intended a new random thread. Verify that theidmatches the rest of the thread logic.
100-100:Details
❓ Verification inconclusive
Ensure route definitions align with typed params
The typed usage ofchatbotandthreadSlugis helpful for clarity. Confirm that the route structure in Next.js matches these param names to avoid mismatch errors.As a follow-up, you can run the following search to check for references to those params:
🏁 Script executed:
#!/bin/bash # Searching for dynamic route definitions that reference [chatbot] and [threadSlug] fd 'page\.[jt]sx$' | xargs rg "export default function" rg -A 5 "router\.push"Length of output: 10419
Action: Confirm Next.js dynamic route names match the typed parameters
The use of
const params = useParams<{ chatbot: string; threadSlug: string }>()is clear and improves type safety. However, please verify that your Next.js dynamic route files (for example, the ones handling chat or thread views) use matching dynamic segment names (i.e.
[chatbot]and[threadSlug]) to ensure there are no runtime mismatches. The repository search didn’t return any conflicting implementations, but a manual check of the relevant route files is recommended.apps/masterbots.ai/components/routes/chat/chat-message.tsx (2)
8-8: Centralize Markdown logic
ImportingmemoizedMarkdownComponentsaligns with your code reuse strategy. This reduces duplication of markdown and ensures consistent rendering.
92-95: Customize rendered Markdown
By providinghandleClickableClickandshouldPreProcessChildren, you can add interactive behavior to the markdown. Double-check if heavy preprocessing is required or can be toggled.apps/masterbots.ai/components/ui/codeblock.tsx (5)
28-79: Expanded language support
Adding multiple languages toprogrammingLanguagesimproves coverage for code samples. Confirm that each addition is valid and that the syntax highlighter is able to handle them all.
93-99: Prevent event propagation
Preventing propagation indownloadAsFileis good for embedded usage, ensuring no parent click handlers are triggered. Also, randomizing the file name extension helps disambiguate user downloads.
118-119: Stop click event on copy
Stopping event propagation is a neat approach to avoid conflicts with parent's onClick. Well done.
136-136: Pointer events
Addingpointer-events-autoensures the button is clickable even if the parent might have interfering styles. Confirm that the rest of the UI is unaffected.
146-146: Pointer events
Same reasoning as line 136. This ensures the copy button remains clickable.
…md (#428) * fix: change toggler wording + util hook (#424) * impr: makes threads open on profile page and profile tweaks (#421) * update * fix: update * update * update * update * update * fix: opening threads * fix: rm threads dropdwon & added back link to bot page thread view page * fix: rm threads dropdwon & added back link to bot page thread view page * fix: update * fix: added back to profile page * fix: added sticky and color * fix: codeblock ctas refactor markdown rendering, sidebar nav, code block & clipboard hook (#425) * fix: codeblock ctas * fix: ts build * fix: continue thread + allMessages sequence + mobile chat css tweak (#426) * fix: css handleCLick condition * fix: get latest search params, continuous thread * fix(impr): all messages sorting * perf(impr): sign in & up redirection tweak * perf(impr): mobile chat css * chore: next + react security ver upt (#427) --------- Co-authored-by: Brandon Fernández <31634868+Bran18@users.noreply.github.com> Co-authored-by: Jimoh sherifdeen <63134009+sheriffjimoh@users.noreply.github.com>
…md (#428) * fix: change toggler wording + util hook (#424) * impr: makes threads open on profile page and profile tweaks (#421) * update * fix: update * update * update * update * update * fix: opening threads * fix: rm threads dropdwon & added back link to bot page thread view page * fix: rm threads dropdwon & added back link to bot page thread view page * fix: update * fix: added back to profile page * fix: added sticky and color * fix: codeblock ctas refactor markdown rendering, sidebar nav, code block & clipboard hook (#425) * fix: codeblock ctas * fix: ts build * fix: continue thread + allMessages sequence + mobile chat css tweak (#426) * fix: css handleCLick condition * fix: get latest search params, continuous thread * fix(impr): all messages sorting * perf(impr): sign in & up redirection tweak * perf(impr): mobile chat css * chore: next + react security ver upt (#427) --------- Co-authored-by: Brandon Fernández <31634868+Bran18@users.noreply.github.com> Co-authored-by: Jimoh sherifdeen <63134009+sheriffjimoh@users.noreply.github.com>
3 participants
@coderabbitai provide a description using changelog format.
Summary by Sourcery
Refactor and improve various components and utilities across the masterbots.ai application, focusing on code organization, performance, and user experience
Enhancements:
Tests:
Chores:
Summary by CodeRabbit
New Features
Refactor
Style
Chores