[masterbots.ai] fix: restore desktop navigation link - browse section

[Bran18]

OPEN PR

PR Reason:

• While running tests on the current https://dev.masterbots.ai/, I noticed it was impossible to navigate back to /b as the navigation link to /b was removed.

Fix:

• Including back the <HeaderLink href="/b" text="Browse" />

Images:

Old:

Fixed:

NOTE: The new mobile sidebar includes all the navigation links/routes and seems to be ok

@coderabbitai , don't check this one please, no need for this one

Summary by Sourcery

Bug Fixes:

• Restore the desktop navigation link to the '/b' (Browse) section, allowing users to navigate back to the Browse page.

Summary by CodeRabbit

• New Features
  • Added a "Browse" navigation link to the header, accessible on larger screens.
  • Introduced a new button variant called "powerUp" with updated styling.
  • Implemented a "Power-Up" toggle feature in the chat panel header.
• Improvements
  • Enhanced model selection logic in the chat combobox to ensure safe operations in production environments.
  • Added a new PowerUpProvider for managing power-up state across components.
• Style
  • Updated dimensions of the switch component for better usability.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
masterbots	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 12, 2024 7:26pm

[coderabbitai]

Walkthrough

The changes involve the Header component in the apps/masterbots.ai/components/layout/header/header.tsx file, where a new navigation link for "Browse" has been added, directing users to the /b route. This link is conditionally rendered for larger screens, while existing links for "Chat", "Pro", and "Ww" remain unchanged. The ChatCombobox component has been updated to modify button styling and model selection logic, introducing a new powerUp button variant in the Button component. Additionally, a new PowerUpProvider has been integrated into the provider hierarchy, and a toggle feature for "Power-Up" mode has been added to the ChatPanelHeader.

Changes

File Path	Change Summary
apps/masterbots.ai/components/layout/header/header.tsx	Added a new "Browse" navigation link to the header, displayed on larger screens only. Existing links remain unchanged.
apps/masterbots.ai/components/routes/chat/chat-combobox.tsx	Updated button styling and model selection logic, including a safeguard for production environment.
apps/masterbots.ai/components/ui/button.tsx	Introduced a new button variant powerUp with updated styles.
apps/masterbots.ai/components/layout/providers.tsx	Changed import to type import for ThemeProviderProps and added PowerUpProvider to the provider hierarchy.
apps/masterbots.ai/components/routes/chat/chat-panel-header.tsx	Added a toggle feature for "Power-Up" mode using usePowerUp hook.
apps/masterbots.ai/components/ui/switch.tsx	Adjusted dimensions of the Switch component.
apps/masterbots.ai/lib/hooks/use-power-up.tsx	Introduced PowerUpContext and usePowerUp hook for managing power-up state.

Possibly related issues

• [masterbots.ai] Refactor: Layout Footer and Sidebar Issues #279: The layout issues mentioned may be indirectly related to the structural changes made in the Header component, as both involve user interface adjustments.

Possibly related PRs

• Add chat publicity trigger #258: The changes in the Chat component and the introduction of the ThreadPublicitySwitch may relate to the overall navigation and user interaction improvements seen in the Header component modifications.
• feat(masterbots.ai): chat sidebar filtering #264: The sidebar filtering functionality introduced may connect with the navigation changes in the Header component, as both aim to improve user experience and navigation within the application.
• [masterbots.ai] feat: wordware api #276: The integration of the Wordware API and the new WordwareChat component enhances the chat functionality, which aligns with the navigation changes in the main PR.
• feat: reorganize navigation menu for mobile view #298: The reorganization of the navigation menu for mobile view directly relates to the changes made in the Header component, as both focus on improving navigation and user experience across different screen sizes.

Suggested reviewers

• AndlerRL

🐰 In the header, a new link does bloom,
"Browse" now shines, making space in the room.
On larger screens, it hops into view,
While "Chat" and "Pro" stay loyal and true.
With every click, our paths intertwine,
A joyful journey, oh how divine! 🌟

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

apps/masterbots.ai/components/layout/header/header.tsx

Oops! 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.

---

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?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR restores the "Browse" navigation link in the desktop header navigation menu. The change is straightforward, adding a single HeaderLink component to enable navigation to the "/b" route.

No diagrams generated as the changes look simple and do not need a visual representation.

File-Level Changes

Change	Details	Files
Restored desktop navigation link for Browse section	Added HeaderLink component with href='/b' and text='Browse' in the desktop navigation menu Placed the Browse link after the Chat link in the navigation hierarchy	apps/masterbots.ai/components/layout/header/header.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @Bran18 - I've reviewed your changes and they look great!

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

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[coderabbitai]

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (1)

apps/masterbots.ai/components/routes/chat/chat-combobox.tsx (1)

Line range hint 82-86: Review the model selection logic security implications

The environment-based conditional logic for model selection introduces a potential security concern:

1. The logic is reversed - it allows model changes in non-prod but blocks in prod using an empty string assignment
2. The logic structure could be clearer

Consider refactoring to:

                  onSelect={currentValue => {
-                     process.env.NEXT_PUBLIC_APP_ENV !== 'prod'
-                       ? (setValue(currentValue === value ? '' : currentValue), changeModel(currentValue as AIModels))
-                       : ''  
+                     if (process.env.NEXT_PUBLIC_APP_ENV === 'prod') {
+                       // Log attempt or show user feedback
+                       setOpen(false)
+                       return
+                     }
+                     const newValue = currentValue === value ? '' : currentValue
+                     setValue(newValue)
+                     if (newValue) {
+                       changeModel(newValue as AIModels)
+                     }
                    setOpen(false)  // Closes the popover after selection.
                  }}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 4618a83 and 5a91ec5.

📒 Files selected for processing (2)

• apps/masterbots.ai/components/routes/chat/chat-combobox.tsx (1 hunks)
• apps/masterbots.ai/components/ui/button.tsx (2 hunks)

🔇 Additional comments (2)

apps/masterbots.ai/components/ui/button.tsx (1)

25-26: Verify the necessity of this change.

The addition of the chatCombobox button variant seems unrelated to the PR's objective of restoring the desktop navigation link for the browse section. Please clarify if this change is necessary for this PR or should be part of a separate PR focused on chat-related features.

apps/masterbots.ai/components/routes/chat/chat-combobox.tsx (1)

55-57: Verify the necessity of button variant change in this PR

The button variant change from 'outline' to 'chatCombobox' appears unrelated to the PR's objective of restoring the desktop navigation link. Consider moving this styling change to a separate PR to maintain clear change boundaries.

[AndlerRL]

@Bran18 -- thanks for the updates and reviewing navigation! However, I found that the updates here are not required. The /b was misunderstood, since /b stands for bot as for /u stands for user. Therefore, b is related with the bot profile page view where the /b alone is actually a non-existent page... unless we create a dashboard showing all bots as cards, which is not part of the product design for now.

I see that @merivercap requested a combobox style for active state on links? We have already an active state on designs, we should follow that instead of the current state. I added a new proposal for the designs. Please review them before applying or not a updated design 👀

[Bran18]

@Bran18 -- thanks for the updates and reviewing navigation! However, I found that the updates here are not required. The /b was misunderstood, since /b stands for bot as for /u stands for user. Therefore, b is related with the bot profile page view where the /b alone is actually a non-existent page... unless we create a dashboard showing all bots as cards, which is not part of the product design for now.

I see that @merivercap requested a combobox style for active state on links? We have already an active state on designs, we should follow that instead of the current state. I added a new proposal for the designs. Please review them before applying or not a updated design 👀

About the design, the yellow combo box was a request from Jun. He requested in the past Friday meeting. He wants to have a more visual contracting on the active model for the combo box. And he asks us to add a yellow color to it.

[coderabbitai]

Actionable comments posted: 3

🧹 Outside diff range and nitpick comments (6)

apps/masterbots.ai/lib/hooks/use-power-up.tsx (2)

12-32: LGTM! Consider adding state persistence

The implementation follows React best practices with proper memoization. However, the power-up state resets on page refresh.

Consider persisting the state in localStorage:

 export function PowerUpProvider({ children }: { children: React.ReactNode }) {
-  const [isPowerUp, setIsPowerUp] = React.useState(false)
+  const [isPowerUp, setIsPowerUp] = React.useState(() => {
+    if (typeof window === 'undefined') return false
+    return localStorage.getItem('isPowerUp') === 'true'
+  })
 
   const togglePowerUp = React.useCallback(() => {
-    setIsPowerUp(prev => !prev)
+    setIsPowerUp(prev => {
+      const newValue = !prev
+      localStorage.setItem('isPowerUp', String(newValue))
+      return newValue
+    })
   }, [])

---

34-40: Enhance error message with provider location hint

The error handling is good, but the message could be more helpful.

Consider improving the error message:

-    throw new Error('usePowerUp must be used within a PowerUpProvider')
+    throw new Error('usePowerUp must be used within a PowerUpProvider. Ensure it is added to your providers.tsx or component hierarchy.')

apps/masterbots.ai/components/routes/chat/chat-panel-header.tsx (4)

6-8: Add documentation for Power-Up mode functionality

While the implementation looks correct, there's no documentation explaining what Power-Up mode does or how it affects the chat functionality. Consider adding JSDoc comments to explain this feature.

+ /** Power-Up mode provides enhanced chat capabilities.
+  * When enabled, it [describe the actual functionality...]
+  */
const { isPowerUp, togglePowerUp } = usePowerUp()

Also applies to: 38-38

---

59-68: Consider using CSS variables for animation styling

The loading animation uses hardcoded values. Consider extracting these values to CSS variables for better maintainability and consistency.

-<div className="rounded-full size-2 bg-primary animate-pulse" />
+<div className="rounded-full size-[var(--loading-dot-size)] bg-primary animate-pulse" />

Add to your CSS:

:root {
  --loading-dot-size: 0.5rem;
}

---

54-109: Consider extracting complex conditional rendering

The nested conditional logic makes the code harder to maintain. Consider extracting these into separate components or helper functions for better readability and maintainability.

Example refactor:

const LoadingState = ({ loadingState }: { loadingState: string }) => {
  return (
    <div className="flex items-center justify-between gap-4">
      {/* Loading animation */}
    </div>
  );
};

const ActionButtons = ({ 
  messages, 
  reload, 
  id, 
  title, 
  setShareDialogOpen 
}: ActionButtonsProps) => {
  if (messages?.length < 2) return null;
  return (
    <>
      <Button variant="outline" onClick={reload}>
        <IconRefresh className="mr-2" />
        Regenerate response
      </Button>
      {/* Share button logic */}
    </>
  );
};

---

95-103: Consider extracting share dialog to a separate component

The share dialog implementation could be moved to a separate component to improve code organization and reusability.

interface ShareDialogProps {
  isOpen: boolean;
  onClose: () => void;
  chat: {
    id: string;
    title: string;
    messages: any[];
  };
}

const ShareDialog = ({ isOpen, onClose, chat }: ShareDialogProps) => {
  return (
    <ChatShareDialog
      onCopy={onClose}
      chat={chat}
    />
  );
};

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 42c539e and 650acc5.

📒 Files selected for processing (7)

• apps/masterbots.ai/components/layout/header/header.tsx (1 hunks)
• apps/masterbots.ai/components/layout/providers.tsx (2 hunks)
• apps/masterbots.ai/components/routes/chat/chat-combobox.tsx (3 hunks)
• apps/masterbots.ai/components/routes/chat/chat-panel-header.tsx (2 hunks)
• apps/masterbots.ai/components/ui/button.tsx (2 hunks)
• apps/masterbots.ai/components/ui/switch.tsx (1 hunks)
• apps/masterbots.ai/lib/hooks/use-power-up.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (3)

• apps/masterbots.ai/components/layout/header/header.tsx
• apps/masterbots.ai/components/routes/chat/chat-combobox.tsx
• apps/masterbots.ai/components/ui/button.tsx

🔇 Additional comments (2)

apps/masterbots.ai/lib/hooks/use-power-up.tsx (1)

5-10: Verify if this feature aligns with PR objectives

The PR objectives mention fixing a navigation link issue, but this appears to be implementing a new "power-up" feature. Could you clarify if this implementation is necessary for the navigation fix?

Let's check for any related components that might explain this addition:

apps/masterbots.ai/components/layout/providers.tsx (1)

9-9: LGTM! Good TypeScript practice.

The change to use type import for ThemeProviderProps follows TypeScript best practices for type-only imports.

[Bran18]

PR Update: Add Power-Up Mode Feature

Overview

Adds a new Power-Up mode toggle to enhance the chat interface with advanced model selection visuals and feedback.

Changes

• Creates new usePowerUp context hook for centralized power-up state management, which will be super important to changing the way our MB Bots respond once the power-up mode is enabled (for example, using a better prompt to provide more complex information about the question, elaborating more, or having more expertise).
• Adds Power-Up mode toggle switch in ChatPanelHeader
• Updates ChatCombobox to reflect power-up state with enhanced visual styling
• Integrates with existing UI components using shadcn/ui

Video Preview

Screen.Recording.2024-11-12.at.1.32.04.PM.mov

[AndlerRL]

LGTM! Thanks for the clarification, I was in deed thinking in another active btn state. Merging! 👍

[AndlerRL]

Brandon Development Support - November 2024, 1 of 2