fix: downgrade react-markdown (#358)

* fix: downgrade react-markdown

* fix: downgrade react-markdown

* fix: markdown dep version + layout thread list ui

* impr: gray-ish overlay bg rm

* chore: console log rm

---------

Co-authored-by: Roberto Lucas <andler.dev@gmail.com>

Author: Bran18

apps/masterbots.ai/app/u/[slug]/layout.tsx

@@ -13,7 +13,7 @@ export default async function ProfilePageLayout({ children }: ProfileLayoutProps
       <NextTopLoader color="#1ED761" initialPosition={0.2} />
       <Hero />
       <ProfileSidebar>
-        <div className="px-4 md:px-10">
+        <div className="px-4 md:px-10 h-full">
           {children}
         </div>
         <div className="sticky bottom-0 w-full left-0 z-50  dark:bg-black bg-white">

apps/masterbots.ai/app/u/[slug]/t/page.tsx

@@ -1,56 +1,69 @@
-import { authOptions } from '@/auth';
-import { UserThreadList } from "@/components/routes/profile/user-thread-list";
-import { generateMetadataFromSEO } from '@/lib/metadata';
-import { getBrowseThreads, getThreads, getUserBySlug, getUserInfoFromBrowse } from '@/services/hasura';
-import { Thread, User } from "mb-genql";
-import type { Metadata } from 'next';
-import { getServerSession } from "next-auth";
+import { authOptions } from '@/auth'
+import { UserThreadList } from '@/components/routes/profile/user-thread-list'
+import { generateMetadataFromSEO } from '@/lib/metadata'
+import {
+  getBrowseThreads,
+  getThreads,
+  getUserBySlug,
+  getUserInfoFromBrowse,
+} from '@/services/hasura'
+import type { Thread, User } from 'mb-genql'
+import type { Metadata } from 'next'
+import { getServerSession } from 'next-auth'
 
 export default async function ProfilePage({ params }: { params: { slug: string } }) {
-
   let threads: Thread[] = []
   const slug = params.slug
 
   const session = await getServerSession(authOptions)
   const { user, error } = await getUserBySlug({
     slug,
-    isSameUser: session?.user.slug === slug
-  });
-
+    isSameUser: session?.user.slug === slug,
+  })
 
-  if (error) return <div className="text-center p-4">Error loading profile: <strong>{error}</strong></div>
-  if (!user) return <div className="text-center p-4">User <strong>{params.slug}</strong> not found</div>
+  if (error)
+    return (
+      <div className="text-center p-4">
+        Error loading profile: <strong>{error}</strong>
+      </div>
+    )
+  if (!user)
+    return (
+      <div className="text-center p-4">
+        User <strong>{params.slug}</strong> not found
+      </div>
+    )
 
   const fetchThreads = async () => {
     try {
-      const isOwnProfile = session?.user?.id === user?.userId;
+      const isOwnProfile = session?.user?.id === user?.userId
       if (!isOwnProfile) {
         return await getBrowseThreads({
-          userId: user.userId
-        });
+          userId: user.userId,
+        })
       }
 
       if (!session?.user?.hasuraJwt) {
-        throw new Error('Authentication required');
+        throw new Error('Authentication required')
       }
 
       return await getThreads({
         jwt: session.user.hasuraJwt,
-        userId: user.userId
-      });
+        userId: user.userId,
+      })
     } catch (error) {
-      console.error('Failed to fetch threads:', error);
-      return [];
+      console.error('Failed to fetch threads:', error)
+      return []
     }
-  };
+  }
 
-  threads = await fetchThreads();
+  threads = await fetchThreads()
 
   return <UserThreadList user={user as User} threads={threads} />
 }
 
 export async function generateMetadata({
-  params
+  params,
 }: {
   params: { slug: string }
 }): Promise<Metadata> {
@@ -61,7 +74,7 @@ export async function generateMetadata({
     description: user?.username || '',
     ogType: 'website',
     ogImageUrl: user?.profilePicture || '',
-    twitterCard: 'summary_large_image'
+    twitterCard: 'summary_large_image',
   }
 
   return generateMetadataFromSEO(seoData)

apps/masterbots.ai/components/layout/profile/profile-page-sidebar.tsx

@@ -39,11 +39,13 @@ export const ProfileSidebar = ({ children }: any) => {
   }
 
   return (
-    <div className="relative w-full flex">
+    <div className={cn(
+      'transition-all relative w-full flex',
+    )}>
       {/* Overlay for mobile */}
       {isSidebarOpen && (
         <div
-          className="fixed inset-0 bg-black/20 z-30 lg:hidden"
+          className="fixed inset-0 z-30 lg:hidden"
           onClick={() => toggleSidebar()}
           role="button"
           tabIndex={0}
@@ -57,12 +59,12 @@ export const ProfileSidebar = ({ children }: any) => {
       {/* Sidebar */}
       <aside
         className={cn(
-          "fixed lg:relative z-40 top-10 md:top-0 transition-transform duration-300 ease-in-out",
+          "lg:relative z-40 top-10 md:top-0 transition-transform duration-300 ease-in-out",
           "w-64 bg-gray-50 dark:bg-black border-r",
           "lg:transform-none lg:transition-none",
           isSidebarOpen
-            ? "translate-x-0"
-            : "-translate-x-full lg:translate-x-0"
+            ? 'translate-x-0 w-[300px]'
+            : '-translate-x-[300px] lg:translate-x-0 w-0'
         )}
       >
         <nav className="flex-1 scrollbar">

apps/masterbots.ai/components/routes/browse/browse-chat-message.tsx

@@ -29,7 +29,7 @@ import { cleanPrompt } from '@/lib/helpers/ai-helpers'
 import { cn } from '@/lib/utils'
 import type { Message } from 'ai'
 import type { Chatbot } from 'mb-genql'
-import type { ExtraProps } from 'react-markdown'
+import type ExtraProps from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
@@ -49,13 +49,13 @@ export function BrowseChatMessage({ message, chatbot, ...props }: ChatMessagePro
           remarkPlugins={[remarkGfm, remarkMath]}
           components={{
             p({ children }) {
-              return <p className="mb-2 last:mb-0 whitespace-pre-line">{children}</p>
+              return <p className="mb-2 whitespace-pre-line last:mb-0">{children}</p>
             },
             ol({ children }) {
-              return <ol className="list-decimal list-inside text-left">{children}</ol>
+              return <ol className="text-left list-decimal list-inside">{children}</ol>
             },
             ul({ children }) {
-              return <ul className="list-disc list-inside text-left">{children}</ul>
+              return <ul className="text-left list-disc list-inside">{children}</ul>
             },
             // @ts-ignore
             code({ node, inline = false, className, children, ...props }: React.HTMLAttributes<HTMLElement> & ExtraProps & { node: unknown, inline?: boolean }) {

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

@@ -28,7 +28,7 @@ export function OnboardingChatbotDetails({
   const threadCount = activeChatbot?.threads?.length || 0
 
   return (
-    <div className="hidden md:flex items-center justify-center -translate-y-8 relative">
+    <div className="hidden md:flex items-center justify-center relative">
       <Card className="w-[600px] bg-white dark:bg-[#09090B] relative z-10">
         <CardHeader className="space-y-6">
           <h1 className="px-4 pt-4 text-2xl font-bold text-zinc-950 dark:text-gray-300">

apps/masterbots.ai/components/routes/thread/user-thread-panel.tsx

@@ -243,7 +243,7 @@ export default function UserThreadPanel({
 
   return (
     <>
-      {(!isContinuousThread || page !== 'profile') && (
+      {(page !== 'profile' || (page !== 'profile' && !isContinuousThread)) && (
         <div className="flex justify-between px-4 md:px-10 py-5 lg:max-w-full">
           <ChatSearchInput setThreads={setState} onSearch={setSearchTerm} />
         </div>
@@ -259,7 +259,7 @@ export default function UserThreadPanel({
         ) : (
           <>
             {page === 'profile' ? (
-              <div className="flex flex-col  py-5 ">
+              <div className="flex flex-col py-5">
                 {threads.map((thread: Thread) => (
                   <BrowseListItem
                     thread={thread}
@@ -274,15 +274,13 @@ export default function UserThreadPanel({
                 {loading && <ThreadItemSkeleton />}
               </div>
             ) : (
-              <div className="flex px-4 py-5 md:px-10">
-                <ThreadList
-                  threads={threads}
-                  loading={loading}
-                  count={count}
-                  pageSize={PAGE_SIZE}
-                  loadMore={loadMore}
-                />
-              </div>
+              <ThreadList
+                threads={threads}
+                loading={loading}
+                count={count}
+                pageSize={PAGE_SIZE}
+                loadMore={loadMore}
+              />
             )}
           </>
         )}

apps/masterbots.ai/package.json

@@ -67,12 +67,12 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
     "react-intersection-observer": "^9.13.1",
-    "react-markdown": "^9.0.3",
+    "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.6.1",
     "react-textarea-autosize": "^8.5.4",
     "react-use": "^17.5.1",
-    "remark-gfm": "^4.0.0",
-    "remark-math": "^6.0.0",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
     "resend": "^3.5.0",
     "sonner": "^1.7.1",
     "stripe": "^15.12.0",