feat: thread ui dialog with ssr

apps/masterbots.ai/app/(browse)/[category]/[threadId]/page.tsx

@@ -1,19 +1,25 @@
-import { getThread } from '@/services/hasura'
-import { BrowseThread } from '@/components/browse/browse-thread'
+import { getCategories, getMessagePairs, getThread } from '@/services/hasura'
+
 import type { ChatPageProps } from '@/app/c/[chatbot]/[threadId]/page'
-import Shortlink from '@/components/browse/shortlink-button'
+import { ThreadAccordion } from '@/components/shared/thread-accordion'
+import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
+import { BrowseInput } from '@/components/shared/browse-input'
 
 export default async function ThreadLandingPage({ params }: ChatPageProps) {
+  const categories = await getCategories()
   const thread = await getThread({
     threadId: params.threadId
   })
-  return (
-    <>
-      <div>
-        <Shortlink />
-      </div>
+  const initialMessagePairs = await getMessagePairs(thread.threadId)
 
-      <BrowseThread thread={thread} />
-    </>
+  return (
+    <div className="container">
+      <CategoryTabs categories={categories} />
+      <BrowseInput />
+      <ThreadAccordion
+        thread={thread}
+        initialMessagePairs={initialMessagePairs}
+      />
+    </div>
   )
 }

apps/masterbots.ai/app/(browse)/[category]/page.tsx

@@ -1,6 +1,6 @@
-import BrowseList from '@/components/browse/browse-list'
-import { BrowseCategoryTabs } from '@/components/browse/browse-category-tabs'
-import { BrowseSearchInput } from '@/components/browse/browse-search-input'
+import ThreadList from '@/components/shared/thread-list'
+import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
+import { BrowseInput } from '@/components/shared/browse-input'
 import { getBrowseThreads, getCategories } from '@/services/hasura'
 
 export const revalidate = 3600 // revalidate the data at most every hour
@@ -13,7 +13,7 @@ export default async function BrowseCategoryPage({
   const categories = await getCategories()
   const categoryId = categories.find(
     c =>
-      c.name.toLowerCase().replace(/\s+/g, '_').replace(/\&/g, 'n') ===
+      c.name.toLowerCase().replace(/\s+/g, '_').replace(/\&/g, '_') ===
       params.category
   ).categoryId
   if (!categoryId) throw new Error('Category id not foud')
@@ -24,13 +24,10 @@ export default async function BrowseCategoryPage({
   })
 
   return (
-    <div className="w-full max-w-screen-lg pb-10 mx-auto">
-      <BrowseCategoryTabs
-        categories={categories}
-        initialCategory={params.category}
-      />
-      <BrowseSearchInput />
-      <BrowseList initialThreads={threads} />
+    <div className="container">
+      <CategoryTabs categories={categories} initialCategory={params.category} />
+      <BrowseInput />
+      <ThreadList initialThreads={threads} filter={{ categoryId }} />
     </div>
   )
 }

apps/masterbots.ai/app/(browse)/page.tsx

@@ -1,21 +1,18 @@
-import BrowseList from '@/components/browse/browse-list'
-import { BrowseCategoryTabs } from '@/components/browse/browse-category-tabs'
-import { BrowseSearchInput } from '@/components/browse/browse-search-input'
+import ThreadList from '@/components/shared/thread-list'
+import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
+import { BrowseInput } from '@/components/shared/browse-input'
 import { getBrowseThreads, getCategories } from '@/services/hasura'
 
-export const revalidate = 3600 // revalidate the data at most every hour
-
 export default async function BrowsePage() {
   const categories = await getCategories()
   const threads = await getBrowseThreads({
     limit: 50
   })
-
   return (
-    <div className="w-full max-w-screen-lg px-4 pb-10 mx-auto">
-      <BrowseCategoryTabs categories={categories} />
-      <BrowseSearchInput />
-      <BrowseList initialThreads={threads} />
+    <div className="container">
+      <CategoryTabs categories={categories} />
+      <BrowseInput />
+      <ThreadList initialThreads={threads} filter={{}} />
     </div>
   )
 }

apps/masterbots.ai/app/b/[id]/page.tsx

@@ -1,15 +1,16 @@
-import { getChatbot, getBrowseThreads } from '@/services/hasura'
+import { getChatbot, getBrowseThreads, getCategories } from '@/services/hasura'
 import { botNames } from '@/lib/bots-names'
-import BrowseChatbotDetails from '@/components/browse/browse-chatbot-details'
-import BrowseSpecificThreadList from '@/components/browse/browse-specific-thread-list'
-
-const PAGE_SIZE = 50
+import ThreadList from '@/components/shared/thread-list'
+import AccountDetails from '@/components/shared/account-details'
+import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
+import { BrowseInput } from '@/components/shared/browse-input'
 
 export default async function BotThreadsPage({
   params
 }: {
   params: { id: string }
 }) {
+  const categories = await getCategories()
   let chatbot, threads
 
   chatbot = await getChatbot({
@@ -18,24 +19,27 @@ export default async function BotThreadsPage({
     threads: true
   })
   if (!chatbot) throw new Error(`Chatbot ${botNames.get(params.id)} not found`)
-
-  // session will always be defined
+  const chatbotName = botNames.get(params.id)
   threads = await getBrowseThreads({
-    chatbotName: botNames.get(params.id),
-    limit: PAGE_SIZE
+    chatbotName,
+    limit: 50
   })
 
   return (
-    <div className="w-full py-5">
-      {chatbot ? <BrowseChatbotDetails chatbot={chatbot} /> : ''}
-      <BrowseSpecificThreadList
-        PAGE_SIZE={PAGE_SIZE}
-        initialThreads={threads}
-        pageType="bot"
-        query={{
-          chatbotName: botNames.get(params.id)
-        }}
+    <div className=" container">
+      <CategoryTabs categories={categories} />
+      <BrowseInput />
+      <AccountDetails
+        href={`/b/${chatbot.name.toLowerCase()}`}
+        alt={chatbot.name}
+        chatbotName={chatbot.name}
+        avatar={chatbot.avatar}
+        description={chatbot.description}
+        threadNum={threads.length}
       />
+      <div className="container">
+        <ThreadList initialThreads={threads} filter={{ chatbotName }} />
+      </div>
     </div>
   )
 }

apps/masterbots.ai/app/c/[chatbot]/[threadId]/page.tsx

@@ -2,7 +2,7 @@ import { redirect } from 'next/navigation'
 import type { Message } from 'ai/react'
 import { isTokenExpired } from '@repo/mb-lib'
 import { cookies } from 'next/headers'
-import { Chat } from '@/components/c/chat'
+import { Chat } from '@/components/routes/c/chat'
 import { getThread } from '@/services/hasura'
 import { getUserProfile } from '@/services/supabase'
 

apps/masterbots.ai/app/c/[chatbot]/page.tsx

@@ -3,8 +3,8 @@ import { isTokenExpired } from '@repo/mb-lib'
 import { nanoid } from 'nanoid'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
-import { ChatChatbot } from '@/components/c/chat-chatbot'
-import ThreadPanel from '@/components/c/thread-panel'
+import { ChatChatbot } from '@/components/routes/c/chat-chatbot'
+import ThreadPanel from '@/components/routes/c/thread-panel'
 import { botNames } from '@/lib/bots-names'
 import { getChatbot, getThreads } from '@/services/hasura'
 import { getUserProfile } from '@/services/supabase'

apps/masterbots.ai/app/c/layout.tsx

@@ -1,5 +1,5 @@
-import { ChatLayoutSection } from '@/components/c/chat-layout-section'
-import { ResponsiveSidebar } from '@/components/c/sidebar/sidebar-responsive'
+import { ChatLayoutSection } from '@/components/routes/c/chat-layout-section'
+import { ResponsiveSidebar } from '@/components/routes/c/sidebar/sidebar-responsive'
 import FooterCT from '@/components/layout/footer-ct'
 
 interface ChatLayoutProps {

apps/masterbots.ai/app/c/page.tsx

@@ -1,8 +1,8 @@
 import { isTokenExpired } from '@repo/mb-lib'
 import { redirect } from 'next/navigation'
 import { cookies } from 'next/headers'
-import ChatThreadListPanel from '@/components/c/chat-thread-list-panel'
-import ThreadPanel from '@/components/c/thread-panel'
+import ChatThreadListPanel from '@/components/routes/c/chat-thread-list-panel'
+import ThreadPanel from '@/components/routes/c/thread-panel'
 import { getThreads } from '@/services/hasura'
 import { getUserProfile } from '@/services/supabase'
 

apps/masterbots.ai/app/globals.css

@@ -100,32 +100,21 @@
 }
 
 .scrollbar {
-	overflow: auto;
+  overflow: auto;
 }
 
 .scrollbar::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+  width: 1px;
+  height: 1px;
 }
 .scrollbar::-webkit-scrollbar-track,
 .scrollbar::-webkit-scrollbar-corner {
-  background: var(--scrollbar-track) !important;
+  background: var(--scrollbar-track);
 }
 .scrollbar::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 2px;
 }
-/* .scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
-} */
-
-@media screen and (min-width: 1024px) {
-  .scrollbar::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-}
-
 
 .scrollbar.small-thumb::-webkit-scrollbar-thumb {
   border-left: 300px solid #f9f9fa;
@@ -151,3 +140,7 @@
   overflow: visible;
   text-overflow: clip;
 }
+
+.hide-buttons > button {
+  display: none;
+}

apps/masterbots.ai/app/layout.tsx

@@ -9,9 +9,18 @@ import { Providers } from '@/components/layout/providers'
 import { cn } from '@/lib/utils'
 import { GlobalStoreProvider } from '@/hooks/use-global-store'
 
-export default async function RootLayout({ children }: RootLayoutProps) {
+async function getCookieData(): Promise<{ hasuraJwt; userProfile }> {
   const hasuraJwt = cookies().get('hasuraJwt')?.value || ''
   const userProfile = cookies().get('userProfile')?.value || null
+  return new Promise(resolve =>
+    setTimeout(() => {
+      resolve({ hasuraJwt, userProfile })
+    }, 1000)
+  )
+}
+
+export default async function RootLayout({ children }: RootLayoutProps) {
+  const { hasuraJwt, userProfile } = await getCookieData()
 
   return (
     <html lang="en" suppressHydrationWarning>

apps/masterbots.ai/app/p/page.tsx

@@ -1,5 +1,5 @@
 import { Suspense } from 'react'
-import { WorkEarlyAccessForm } from '@/components/p/early-access-from'
+import { WorkEarlyAccessForm } from '@/components/routes/p/early-access-from'
 
 export default function WorkPage() {
   return (

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

@@ -1,31 +1,39 @@
-import { getBrowseThreads, getUserInfoFromBrowse } from '@/services/hasura'
-import BrowseUserDetails from '@/components/browse/browse-user-details'
-import BrowseSpecificThreadList from '@/components/browse/browse-specific-thread-list'
-
-const PAGE_SIZE = 50
+import {
+  getBrowseThreads,
+  getCategories,
+  getUserInfoFromBrowse
+} from '@/services/hasura'
+import ThreadList from '@/components/shared/thread-list'
+import AccountDetails from '@/components/shared/account-details'
+import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
+import { BrowseInput } from '@/components/shared/browse-input'
 
 export default async function BotThreadsPage({
   params
 }: {
   params: { slug: string }
 }) {
+  const categories = await getCategories()
   const user = await getUserInfoFromBrowse(params.slug)
   if (!user) return <div className="m-auto">No user found.</div>
   const threads = await getBrowseThreads({
     slug: params.slug,
-    limit: PAGE_SIZE
+    limit: 50
   })
   return (
-    <div className="w-full py-5">
-      <BrowseUserDetails user={threads[0].user} />
-      <BrowseSpecificThreadList
-        PAGE_SIZE={PAGE_SIZE}
-        initialThreads={threads}
-        pageType="user"
-        query={{
-          slug: params.slug
-        }}
+    <div className="container">
+      <CategoryTabs categories={categories} />
+      <BrowseInput />
+      <AccountDetails
+        href={`/u/${params.slug}`}
+        alt={user.username}
+        username={user.username}
+        avatar={user.profilePicture || ''}
+        threadNum={threads.length} //TODO: get total number of thread. not the filter one
       />
+      <div className="container">
+        <ThreadList initialThreads={threads} filter={{ slug: params.slug }} />
+      </div>
     </div>
   )
 }