feat: thread ui dialog with ssr

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

@@ -1,19 +1,22 @@
-import { getThread } from '@/services/hasura'
-import { BrowseThread } from '@/components/browse/browse-thread'
+import { getMessagePairs, getThread } from '@/services/hasura'
+
 import type { ChatPageProps } from '@/app/c/[chatbot]/[threadId]/page'
-import Shortlink from '@/components/browse/shortlink-button'
+import Shortlink from '@/components/routes/browse/shortlink-button'
+import { ThreadAccordion } from '@/components/shared/thread-accordion'
 
 export default async function ThreadLandingPage({ params }: ChatPageProps) {
   const thread = await getThread({
     threadId: params.threadId
   })
-  return (
-    <>
-      <div>
-        <Shortlink />
-      </div>
+  const initialMessagePairs = await getMessagePairs(thread.threadId)
 
-      <BrowseThread thread={thread} />
-    </>
+  return (
+    <div className="container">
+      <Shortlink />
+      <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 { BrowseCategoryTabs } from '@/components/routes/browse/browse-category-tabs'
+import { BrowseSearchInput } from '@/components/routes/browse/browse-search-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')
@@ -30,7 +30,7 @@ export default async function BrowseCategoryPage({
         initialCategory={params.category}
       />
       <BrowseSearchInput />
-      <BrowseList initialThreads={threads} />
+      <ThreadList initialThreads={threads} />
     </div>
   )
 }

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

@@ -1,10 +1,8 @@
-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 { BrowseCategoryTabs } from '@/components/routes/browse/browse-category-tabs'
+import { BrowseSearchInput } from '@/components/routes/browse/browse-search-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({
@@ -15,7 +13,7 @@ export default async function BrowsePage() {
     <div className="w-full max-w-screen-lg px-4 pb-10 mx-auto">
       <BrowseCategoryTabs categories={categories} />
       <BrowseSearchInput />
-      <BrowseList initialThreads={threads} />
+      <ThreadList initialThreads={threads} />
     </div>
   )
 }

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

@@ -1,9 +1,7 @@
 import { getChatbot, getBrowseThreads } 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'
 
 export default async function BotThreadsPage({
   params
@@ -19,23 +17,23 @@ export default async function BotThreadsPage({
   })
   if (!chatbot) throw new Error(`Chatbot ${botNames.get(params.id)} not found`)
 
-  // session will always be defined
   threads = await getBrowseThreads({
     chatbotName: botNames.get(params.id),
-    limit: PAGE_SIZE
+    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)
-        }}
+      <AccountDetails
+        href={`/b/${chatbot.name.toLowerCase()}`}
+        alt={chatbot.name}
+        chatbotName={chatbot.name}
+        avatar={chatbot.avatar}
+        description={chatbot.description}
       />
+      <div className="container">
+        <ThreadList initialThreads={threads} />
+      </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/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,8 +1,6 @@
 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 ThreadList from '@/components/shared/thread-list'
+import AccountDetails from '@/components/shared/account-details'
 
 export default async function BotThreadsPage({
   params
@@ -13,19 +11,19 @@ export default async function BotThreadsPage({
   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
-        }}
+      <AccountDetails
+        href={`/u/${params.slug}`}
+        alt={user.username}
+        username={user.username}
+        avatar={user.profilePicture || ''}
       />
+      <div className="container">
+        <ThreadList initialThreads={threads} />
+      </div>
     </div>
   )
 }