Masterbots/fix redirects (#275)

* fix:avatar-redirects

* fix:avatar-redirect

* fix(masterbots.ai): upt components/ui/button.tsx

Coderabbitai suggestion.

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix:URL correction

---------

Co-authored-by: Roberto Lucas <andler@bitcash.org>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

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

@@ -3,12 +3,20 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { Separator } from '@/components/ui/separator'
 import ShareLink from '@/components/routes/thread/thread-user-actions'
+import { toSlug } from 'mb-lib'
 
 export default function BrowseChatbotDetails({
   chatbot
 }: {
   chatbot?: Chatbot
 }) {
+
+  if (!chatbot?.categories?.length) {
+    return <div>No chatbot data available</div>
+  }
+  const primaryCategory = chatbot.categories[0].category
+  const botUrl = `/c/${toSlug(primaryCategory.name)}/${chatbot.name.toLowerCase()}`
+
   return (
     <div className="relative bg-cover py-10 bg-gradient-to-l from-mirage via-[#2B5D91] to-[#388DE2]">
       <div className="flex flex-row gap-3 relative mx-auto md:w-[600px]">
@@ -58,7 +66,7 @@ export default function BrowseChatbotDetails({
             <Link
               style={{ wordSpacing: '4px' }}
               className="text-[#388DE2]"
-              href={`/b/${chatbot?.name.toLowerCase()}`}
+              href={botUrl}
             >
               Chat with {chatbot?.name} &gt;
             </Link>

apps/masterbots.ai/components/routes/browse/browse-list-item.tsx

@@ -12,6 +12,9 @@ import React from 'react'
 import { BrowseChatMessageList } from '@/components/routes/browse/browse-chat-message-list'
 import { ShortMessage } from '@/components/shared/short-message'
 import { IconOpenAI, IconUser } from '@/components/ui/icons'
+import { Button } from '@/components/ui/button'
+import { icons } from 'lucide-react'
+
 let initialUrl: string | null = null
 
 export default function BrowseListItem({
@@ -94,9 +97,16 @@ export default function BrowseListItem({
   const goToBotPage = (e: React.MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
-    router.push(`/b/${thread.chatbot.name.trim().toLowerCase()}/${thread.threadId}`)
+    router.push(`/b/${thread.chatbot.name.trim().toLowerCase()}`)
   }
 
+  const goToProfile = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (thread.user?.slug) {
+      router.push(`/u/${thread.user.slug}/t`)
+    }
+  }
 
   return (
     <div ref={threadRef}>
@@ -121,12 +131,11 @@ export default function BrowseListItem({
           )}
         >
           {pageType !== 'bot' && thread.chatbot?.avatar ? (
-            <div
+            <Button
             onClick={goToBotPage}
             title={thread.chatbot?.name}
-            className={cn(
-              'flex size-8 shrink-0 select-none items-center justify-center rounded-full border shadow cursor-pointer'
-            )}
+            variant="icon"
+            size="icon"
             >
               <Image
                 className="transition-opacity duration-300 rounded-full select-none bg-background dark:bg-primary-foreground hover:opacity-80"
@@ -135,19 +144,17 @@ export default function BrowseListItem({
                 height={32}
                 width={32}
               />
-            </div>
+            </Button>
           ) : (
             pageType !== 'bot' && (
-              <div
+              <Button
                 onClick={goToBotPage}
                 title={thread.chatbot?.name}
-                className={cn(
-                  'flex size-8 shrink-0 select-none items-center justify-center rounded-full border shadow cursor-pointer',
-                  'bg-primary text-primary-foreground'
-                )}
+                variant="icon"
+                size="icon"
               >
                 <IconOpenAI />
-              </div>
+              </Button>
             )
           )}
           <div className="w-[calc(100%-64px)] m:w-[calc(100%-28px)] flex items-center gap-3 text-left">
@@ -161,13 +168,13 @@ export default function BrowseListItem({
             {pageType !== 'user' && (
               <span className="opacity-50 text-[0.875rem]">by</span>
             )}
+            <div>
             {pageType !== 'user' && thread.user?.profilePicture ? (
-              <Link
-                href={`/u/${encodeURIComponent(String(thread.user.slug))}`}
-                title={thread.user?.username.replace('_', ' ')}
-                className={cn(
-                  'flex size-8 shrink-0 select-none items-center justify-center rounded-full border shadow'
-                )}
+              <Button
+               onClick={goToProfile}
+               title={thread.user?.username.replace('_', ' ')}
+               variant="icon"
+               size="icon"
               >
                 <Image
                   className="transition-opacity duration-300 rounded-full select-none hover:opacity-80"
@@ -176,21 +183,20 @@ export default function BrowseListItem({
                   height={32}
                   width={32}
                 />
-              </Link>
+              </Button>
             ) : (
               pageType !== 'user' && (
-                <Link
-                  href={`/u/${encodeURIComponent(String(thread.user?.slug))}`}
-                  title={thread.user?.username}
-                  className={cn(
-                    'flex size-8 shrink-0 select-none items-center justify-center rounded-full border shadow',
-                    'bg-background'
-                  )}
+                <Button
+                 onClick={goToProfile}
+                 title={thread.user?.username}
+                 variant="icon"
+                 size="icon"
                 >
                   <IconUser />
-                </Link>
+                </Button>
               )
             )}
+            </div>
           </div>
         </div>
 

apps/masterbots.ai/components/ui/button.tsx

@@ -18,13 +18,14 @@ const buttonVariants = cva(
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'shadow-none hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 shadow-none hover:underline'
+        link: 'text-primary underline-offset-4 shadow-none hover:underline',
+        icon: 'flex size-8 shrink-0 select-none items-center justify-center rounded-full border shadow cursor-pointer'
       },
       size: {
         default: 'h-8 px-4 py-2',
         sm: 'h-8 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
-        icon: 'h-8 w-8 p-0'
+        icon: 'size-8 p-0'
       }
     },
     defaultVariants: {