[masterbots.ai] feat: update ChatChatbotDetails

[Bran18]

Screen.Recording.2024-11-25.at.1.47.06.PM.mov

Note: BotMessageSquare Error

The BotMessageSquare from https://lucide.dev/icons/bot-message-square its not working. I am using MessageSquare instead in the meantime

Summary by Sourcery

Update the ChatChatbotDetails component with a new UI layout, including a card header, floating avatar, and enhanced description section. Refactor the component for improved readability and maintainability.

New Features:

• Introduce a new UI layout for the ChatChatbotDetails component, including a card header, floating avatar, and enhanced description section.

Enhancements:

• Refactor the ChatChatbotDetails component to improve readability and maintainability by reorganizing the JSX structure and updating class names for styling consistency.

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Improved user interface with a welcoming message in the card header.
  • Enhanced responsiveness and visual appeal of the component.
  • Added descriptive text to assist users in creating new threads.
  • Styled button for starting a new chat for better visual integration.
  • Introduced a new loading skeleton for the chatbot details interface.

• Documentation

  • Expanded documentation detailing features like responsive design and theme support.

• Refactor

  • Restructured the return statement for improved layout and styling.
  • Updated import paths for better modularity and organization.

[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 28, 2024 2:53am

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR updates the ChatChatbotDetails component with a modern, more polished UI design. The implementation replaces the old layout with a new card-based design that includes enhanced visual elements, better responsive behavior, and new interactive features like a follow button and thread statistics.

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

File-Level Changes

Change	Details	Files
Redesigned the main component layout with a new card-based UI	Implemented a new header section with improved typography Added a floating avatar with responsive sizing and custom ring styling Created a new separator line design that extends to the edges Improved responsive padding and spacing using tailwind classes	apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx
Added new interactive elements and statistics display	Implemented a new followers count display with icon Added a new Follow button with hover states Created a New Chat button with custom styling and icon Enhanced thread count display with improved visual design	apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx
Updated component dependencies and imports	Added new Lucide icons (MessageSquare, MessageCircle, Users) Imported Button component from UI library Added utility functions (cn, toSlug) Reorganized and cleaned up import statements	apps/masterbots.ai/components/routes/chat/chat-chatbot-details.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.

[coderabbitai]

Walkthrough

The changes in the ChatChatbotDetails component involve several updates to enhance the user interface and experience. New React hooks and a UI library button component have been imported. The internal logic remains mostly unchanged, but the structure of the component has been refined. The return statement has been restructured for improved layout and styling, including a welcoming message in the card header and adjustments to the avatar display. Additional descriptive text has been added to assist users in creating new threads, and the button for starting a new chat has been visually integrated with new styling.

Changes

File Path	Change Summary
apps/masterbots.ai/components/routes/chat/...	- Added imports for useParams, useState, useEffect, and Button.
	- Expanded component documentation to detail features like responsive design and theme support.
	- Simplified getThreadNum and getCategoryName functions by removing comments.
	- Restructured return statement for improved layout and styling, including a welcoming message.
	- Adjusted avatar display and added descriptive text for new threads.
	- Styled the new chat button with updated classes for better visual integration.
apps/masterbots.ai/components/routes/browse/...	- Updated import paths for ThreadItemSkeleton and BrowseListSkeleton to a new shared directory.
	- Modified fetchThreads to include a keyword parameter and adjusted loading state management.
	- Enhanced verifyKeyword to use searchThreadContent for filtering threads based on keywords.
	- Preserved existing rendering logic while ensuring responsive UI behavior.
apps/masterbots.ai/components/shared/no-results-card.tsx	- Changed import path for NoResultsSkeleton to simplify the import statement.
apps/masterbots.ai/components/shared/skeletons/browse-list-skeleton.tsx	- Updated import path for ThreadItemSkeleton to reflect its new location in the shared directory.
apps/masterbots.ai/components/shared/skeletons/chat-chatbot-details-skeleton.tsx	- Introduced a new ChatChatbotDetailsSkeleton component to render a loading state for chatbot details.

Possibly related PRs

• Add chat publicity trigger #258: The changes in the ChatChatbotDetails component may relate to the overall chat functionality and user interface improvements, similar to the introduction of the ThreadPublicitySwitch in this PR.
• Feat: user messages ai refactor #266: The introduction of the improveMessage function in this PR enhances user messages, which could be relevant to the user experience improvements mentioned in the main PR.
• Impr: improve current features v2 #274: This PR enhances the AI message improvement functionality, which aligns with the overall goal of improving user interaction and experience in the main PR.
• [masterbots.ai] fix: public/private tag bg on dark mode  #294: The modifications to the ChatOptions component for dark mode support could relate to the UI enhancements in the main PR, particularly in improving user experience.
• [masterbots.ai] Fix: browse and chat content search #304: The introduction of search functionality within thread content in this PR aligns with the enhancements made to the ChatChatbotDetails component in the main PR, focusing on improving user interaction and content accessibility.
• Improve seo sitemap #306: The improvements to the SEO sitemap and metadata generation could relate to the overall enhancements in user experience and interface improvements in the main PR, as better SEO can lead to improved user engagement.

Suggested labels

feature

Suggested reviewers

• AndlerRL

🐇 In the chat where the bunnies play,
New threads and messages brighten the day.
With buttons styled and avatars bright,
We hop with joy, oh what a sight!
Let's guide our friends, both near and far,
In this chat space, we all are a star! 🌟

Warning

Rate limit exceeded

@Bran18 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 15 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between fcf015a and 82b8845.

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/routes/browse/browse-list.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]

Hey @Bran18 - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider replacing hardcoded values (e.g. '3.2k' followers) with actual data from the API to ensure the UI reflects real-time information

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 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: 2

🧹 Outside diff range and nitpick comments (1)

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

61-62: Consider adding error boundaries and loading states

The component would benefit from proper error handling and loading states for async operations (getThreadNum, getCategoryName). Consider wrapping the component with an error boundary and adding loading indicators.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between c4a500c and facf791.

📒 Files selected for processing (1)

• apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx (1 hunks)

🔇 Additional comments (3)

apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx (3)

1-24: Well-structured imports and comprehensive documentation!

The added imports are properly organized, and the JSDoc documentation provides clear insights into the component's features and responsibilities.

---

149-151: Use design system tokens for consistency

As previously suggested by sourcery-ai[bot], replace hardcoded color values with theme variables.

---

50-56: 🛠️ Refactor suggestion

Improve useEffect implementation

Two issues need attention:

1. The dependency array should include session?.user.hasuraJwt since it's used in getThreadNum
2. The biome-ignore comment should include a proper explanation for why dependencies are being ignored

- // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+ // biome-ignore lint/correctness/useExhaustiveDependencies: session.user.hasuraJwt is intentionally omitted as we only want to refresh on user change
  useEffect(() => {
    if (!activeCategory) {
      getThreadNum()
    } else {
      getCategoryName()
    }
-  }, [activeCategory, activeChatbot, session?.user])
+  }, [activeCategory, activeChatbot, session?.user, session?.user?.hasuraJwt])

Likely invalid or redundant comment.

[coderabbitai]

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (7)

apps/masterbots.ai/components/shared/skeletons/chat-chatbot-details-skeleton.tsx (4)

1-3: Add TypeScript type annotations for better type safety

Consider adding explicit return type annotation to the component for better type safety and documentation.

- export function ChatChatbotDetailsSkeleton() {
+ export function ChatChatbotDetailsSkeleton(): JSX.Element {

---

5-6: Consider improving layout calculations and accessibility

A few suggestions for improvement:

1. The negative transform (-translate-y-8) seems arbitrary and might cause layout issues in different viewport sizes
2. The hard-coded height calculation might not be flexible enough for all screen sizes
3. Missing ARIA attributes for better accessibility

- <div className="h-[calc(100vh-196px)] flex items-center justify-center -translate-y-8">
+ <div className="min-h-[calc(100vh-196px)] flex items-center justify-center" role="region" aria-label="Chatbot Details Loading State">
-   <div className="dark:bg-[#09090B] bg-white w-[85%] md:w-[600px] rounded-xl text-white relative">
+   <div className="dark:bg-[#09090B] bg-white w-[85%] md:w-[600px] rounded-xl text-white relative" aria-busy="true">

---

15-15: Enhance skeleton dimensions consistency

Consider using CSS variables for skeleton dimensions to maintain consistency and make updates easier. Also, skeleton widths should better reflect the actual content they represent.

// Add to your CSS variables
+ :root {
+   --skeleton-avatar-size-mobile: 5rem;    /* 20px */
+   --skeleton-avatar-size-desktop: 8rem;   /* 32px */
+   --skeleton-text-height: 1.5rem;         /* 6px */
+ }

// Update component
- <Skeleton className="rounded-full size-20 md:size-32" />
+ <Skeleton className="rounded-full w-[var(--skeleton-avatar-size-mobile)] h-[var(--skeleton-avatar-size-mobile)] md:w-[var(--skeleton-avatar-size-desktop)] md:h-[var(--skeleton-avatar-size-desktop)]" />

// Update text skeletons to use percentage widths
- <Skeleton className="w-24 h-6" />
- <Skeleton className="w-32 h-6" />
- <Skeleton className="w-20 h-8" />
+ <Skeleton className="w-[30%] h-[var(--skeleton-text-height)]" />
+ <Skeleton className="w-[40%] h-[var(--skeleton-text-height)]" />
+ <Skeleton className="w-[25%] h-[var(--skeleton-text-height)]" />

Also applies to: 27-28, 33-35

---

3-4: Add component documentation and improve HTML semantics

Consider adding JSDoc documentation and using more semantic HTML elements for better accessibility and maintainability.

+ /**
+  * A skeleton loading state component for the ChatChatbot details view.
+  * Displays a placeholder UI while the actual content is being loaded.
+  *
+  * @returns {JSX.Element} A skeleton UI component
+  */
export function ChatChatbotDetailsSkeleton(): JSX.Element {
  return (
-   <div className="h-[calc(100vh-196px)] flex items-center justify-center -translate-y-8">
+   <section className="h-[calc(100vh-196px)] flex items-center justify-center -translate-y-8">

apps/masterbots.ai/components/routes/browse/browse-list.tsx (3)

Line range hint 47-65: Consider handling concurrent fetch requests.

While the loading state management is improved, there's a potential race condition if multiple fetch requests are triggered in quick succession. The last request might not be the last to complete.

Consider implementing request cancellation or tracking the latest request:

  const fetchThreads = async ({
    categoriesId,
    chatbotsId,
    keyword
  }: {
    categoriesId: number[]
    chatbotsId: number[]
    keyword: string
  }) => {
+   const requestId = Date.now();
+   if (fetchThreads.lastRequestId && fetchThreads.lastRequestId > requestId) {
+     return; // Skip if a newer request is in progress
+   }
+   fetchThreads.lastRequestId = requestId;
    setLoading(true)
    try {
      const threads = await getBrowseThreads({
        categoriesId,
        chatbotsId,
        keyword,
        limit: PAGE_SIZE
      })
+     if (fetchThreads.lastRequestId === requestId) {
        setThreads(threads)
        setFilteredThreads(threads)
        setCount(threads.length)
        setHasInitialized(true)
+     }
    } catch (error) {
      console.error('Error fetching threads:', error)
    } finally {
+     if (fetchThreads.lastRequestId === requestId) {
        setLoading(false)
+     }
    }
  }

---

Line range hint 67-81: Optimize debounce implementation.

The current implementation creates a new debounced function on every call, which is inefficient and could cause memory leaks.

Move the debounced function outside the verifyKeyword function:

+ const debouncedFilter = debounce((threads: Thread[], keyword: string) => {
+   return threads.filter((thread: Thread) => searchThreadContent(thread, keyword))
+ }, 230)

  const verifyKeyword = () => {
    if (!keyword) {
      setFilteredThreads(threads)
    } else {
-     debounce(() => {
-       setFilteredThreads(
-         threads.filter((thread: Thread) =>
-           searchThreadContent(thread, keyword)
-         )
-       )
-     }, 230)()
+     const filtered = debouncedFilter(threads, keyword)
+     setFilteredThreads(filtered)
    }
  }

---

Line range hint 108-120: Review effect dependencies and cleanup.

The effect dependencies and cleanup could be improved:

1. The first effect should probably depend on selectedCategories and selectedChatbots arrays themselves, not just their lengths
2. The second effect should include cleanup for the debounced function

Consider these improvements:

  React.useEffect(() => {
    fetchThreads({
      keyword,
      categoriesId: selectedCategories,
      chatbotsId: selectedChatbots
    })
-  }, [selectedCategories.length, selectedChatbots.length])
+  }, [selectedCategories, selectedChatbots, keyword])

  React.useEffect(() => {
    verifyKeyword()
+   return () => {
+     debouncedFilter.cancel()
+   }
-  }, [keyword, threads])
+  }, [keyword, threads, debouncedFilter])

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between fcf015a and 82b8845.

📒 Files selected for processing (5)

• apps/masterbots.ai/components/routes/browse/browse-list.tsx (1 hunks)
• apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx (1 hunks)
• apps/masterbots.ai/components/shared/no-results-card.tsx (1 hunks)
• apps/masterbots.ai/components/shared/skeletons/browse-list-skeleton.tsx (1 hunks)
• apps/masterbots.ai/components/shared/skeletons/chat-chatbot-details-skeleton.tsx (1 hunks)

✅ Files skipped from review due to trivial changes (2)

• apps/masterbots.ai/components/shared/no-results-card.tsx
• apps/masterbots.ai/components/shared/skeletons/browse-list-skeleton.tsx

🧰 Additional context used

📓 Learnings (1)

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

Learnt from: Bran18
PR: bitcashorg/masterbots#314
File: apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx:130-132
Timestamp: 2024-11-25T19:41:33.853Z
Learning: In the file `apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx`, the follower count displayed as "3.2k" is a temporary hardcoded value that will be replaced with real data from the database eventually.

🪛 Biome (1.9.4)

apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx

[error] 54-54: This hook does not specify all of its dependencies: getCategoryName

This dependency is not specified in the hook dependency list.

(lint/correctness/useExhaustiveDependencies)

---

[error] 54-54: This hook does not specify all of its dependencies: getThreadNum

This dependency is not specified in the hook dependency list.

(lint/correctness/useExhaustiveDependencies)

---

[error] 54-54: This hook specifies more dependencies than necessary: activeChatbot, session?.user

This dependency can be removed from the list.

This dependency can be removed from the list.

(lint/correctness/useExhaustiveDependencies)

🔇 Additional comments (7)

apps/masterbots.ai/components/shared/skeletons/chat-chatbot-details-skeleton.tsx (1)

1-44: Overall implementation looks good!

The skeleton component is well-structured with good responsive design and clear separation of concerns. The suggested improvements are enhancements that can be addressed in future iterations.

apps/masterbots.ai/components/routes/browse/browse-list.tsx (2)

24-25: LGTM! Good architectural improvement.

Moving skeleton components to a shared directory improves reusability and follows better component organization practices.

---

Line range hint 83-98: Verify infinite scrolling behavior with filtered results.

The loadMore function doesn't consider the current keyword filter, which might lead to inconsistencies in the displayed results during infinite scrolling.

Let's verify the infinite scrolling implementation:

apps/masterbots.ai/components/routes/chat/chat-chatbot-details.tsx (4)

14-25: Great documentation improvements!

The added JSDoc documentation clearly describes the component's purpose and features, making it more maintainable and developer-friendly.

---

33-33: Remove unused parameter

The slug parameter is still unused in the component.

---

65-161: Excellent UI improvements!

The new UI structure is well-organized with:

• Clean separation of sections (header, avatar, description, actions)
• Proper responsive design using mobile-first approach
• Consistent use of spacing and typography
• Clear visual hierarchy

---

36-36: ⚠️ Potential issue

Fix undefined status variable

The status variable is used in the loading check but hasn't been defined. This could cause runtime errors.

- if (status === "loading") return <ChatChatbotDetailsSkeleton />
+ const { data: session, status } = useSession()

Likely invalid or redundant comment.

[AndlerRL]

LGTM! Thanks for dealing with the skeletons and update their file names. Also for the initial onboarding variant, it is looking good in desktop! Only the mobile need to be updated, but also the designs wasn't 100% ready at that moment. Merging this version!