chore: browse ssr improvements, supabase db types

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

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

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

@@ -8,8 +8,6 @@ interface BrowseLayoutProps {
 export default async function BrowseLayout({ children }: BrowseLayoutProps) {
   return (
     <BrowseProvider>
-      {/* TODO: https://github.com/TheSGJ/nextjs-toploader/issues/66 */}
-      {/* <NextTopLoader color="#1ED761" initialPosition={0.20} /> */}
       <main className="flex flex-col h-[calc(100vh-theme(spacing.16))]">
         <section className="overflow-auto group scrollbar w-full">
           {children}

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

@@ -1,18 +1,21 @@
 import BrowseList from '@/components/browse/browse-list'
 import { BrowseCategoryTabs } from '@/components/browse/browse-category-tabs'
 import { BrowseSearchInput } from '@/components/browse/browse-search-input'
-import { getCategories } from '@/services/hasura'
+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 />
+      <BrowseList initialThreads={threads} />
     </div>
   )
 }

apps/masterbots.ai/components/browse/browse-category-button.tsx → apps/masterbots.ai/components/browse/browse-category-link.tsx

@@ -2,7 +2,7 @@ import { motion } from 'framer-motion'
 import type { Category } from '@repo/mb-genql'
 import Link from 'next/link'
 
-export function BrowseCategoryButton({
+export function BrowseCategoryLink({
   category,
   activeTab,
   onClick,

apps/masterbots.ai/components/browse/browse-category-tabs.tsx

@@ -3,7 +3,7 @@
 import type { Category } from '@repo/mb-genql'
 import { useEffect } from 'react'
 import { useBrowse } from '@/hooks/use-browse'
-import { BrowseCategoryButton } from './browse-category-button'
+import { BrowseCategoryLink } from './browse-category-link'
 
 export function BrowseCategoryTabs({
   categories,
@@ -45,8 +45,8 @@ export function BrowseCategoryTabs({
   }, [initialCategory])
 
   return (
-    <div className="w-full py-[10px] my-3 !overflow-x-auto overflow-y-hidden whitespace-nowrap scrollbar small-thumb">
-      <BrowseCategoryButton
+    <div className="w-full py-[10px] my-3 !overflow-x-auto overflow-y-hidden whitespace-nowrap scrollbar small-thumb justify-between flex">
+      <BrowseCategoryLink
         activeTab={activeTab}
         category="all"
         id="browse-category-tab__null"
@@ -55,7 +55,7 @@ export function BrowseCategoryTabs({
         }}
       />
       {categories.map((category, key) => (
-        <BrowseCategoryButton
+        <BrowseCategoryLink
           activeTab={activeTab}
           category={category}
           id={`browse-category-tab__${category.categoryId}`}

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

@@ -7,7 +7,7 @@ import Link from 'next/link'
 import React from 'react'
 import { cn, createMessagePairs } from '@/lib/utils'
 import { IconUser } from '@/components/ui/icons'
-import { ChatAccordion } from '../c/chat-accordion'
+import { ChatAccordion } from '../shared/chat-accordion'
 import type { MessagePair } from './browse-chat-messages'
 import { convertMessage } from './browse-chat-messages'
 import { BrowseChatMessage } from './browse-chat-message'

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

@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation'
 import React from 'react'
 import { cn, sleep } from '@/lib/utils'
 import { getMessages } from '@/services/hasura'
-import { ChatAccordion } from '../c/chat-accordion'
+import { ChatAccordion } from '../shared/chat-accordion'
 import { ShortMessage } from '../short-message'
 import { IconOpenAI, IconUser } from '../ui/icons'
 import { BrowseChatMessageList } from './browse-chat-message-list'

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

@@ -9,23 +9,13 @@ import BrowseListItem from './browse-list-item'
 
 const PAGE_SIZE = 50
 
-export default function BrowseList() {
+export default function BrowseList({ initialThreads }: BrowseListProps) {
   const { keyword, tab } = useBrowse()
-
-  const [threads, setThreads] = React.useState<Thread[]>([])
-  const [filteredThreads, setFilteredThreads] = React.useState<Thread[]>([])
+  const [threads, setThreads] = React.useState<Thread[]>(initialThreads)
+  const [filteredThreads, setFilteredThreads] =
+    React.useState<Thread[]>(initialThreads)
   const [loading, setLoading] = React.useState<boolean>(false)
-  const [count, setCount] = React.useState<number>(0)
-
-  const fetchThreads = async (keyword: string, tab: number | null) => {
-    const threads = await getBrowseThreads({
-      categoryId: tab,
-      keyword,
-      limit: PAGE_SIZE
-    })
-    setThreads(threads)
-    setCount(threads.length)
-  }
+  const [count, setCount] = React.useState<number>(initialThreads.length)
 
   const verifyKeyword = () => {
     if (!keyword) {
@@ -61,10 +51,6 @@ export default function BrowseList() {
     setLoading(false)
   }
 
-  React.useEffect(() => {
-    fetchThreads('', tab)
-  }, [tab])
-
   React.useEffect(() => {
     verifyKeyword()
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -85,3 +71,7 @@ export default function BrowseList() {
     </div>
   )
 }
+
+type BrowseListProps = {
+  initialThreads: Thread[]
+}

apps/masterbots.ai/components/browse/browse-thread.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { Thread } from '@repo/mb-genql'
-import { cn, extractBetweenMarkers } from '@/lib/utils'
+import { cn } from '@/lib/utils'
 import { BrowseChatMessages } from './browse-chat-messages'
 
 export function BrowseThread({

apps/masterbots.ai/components/c/chat-list.tsx

@@ -5,7 +5,7 @@ import { ChatMessage } from '@/components/c/chat-message'
 import { cn, createMessagePairs } from '@/lib/utils'
 import { useThread } from '@/hooks/use-thread'
 import { ShortMessage } from '../short-message'
-import { ChatAccordion } from './chat-accordion'
+import { ChatAccordion } from '../shared/chat-accordion'
 
 export interface ChatList {
   messages: Message[]

apps/masterbots.ai/components/c/thread-list.tsx

@@ -7,7 +7,7 @@ import { useThread } from '@/hooks/use-thread'
 import { useSidebar } from '@/hooks/use-sidebar'
 import { cn, sleep } from '@/lib/utils'
 import { ShortMessage } from '../short-message'
-import { ChatAccordion } from './chat-accordion'
+import { ChatAccordion } from '../shared/chat-accordion'
 import { ChatList } from './chat-list'
 
 export default function ThreadList({

apps/masterbots.ai/components/c/chat-accordion.tsx → apps/masterbots.ai/components/shared/chat-accordion.tsx

@@ -58,24 +58,16 @@ export function ChatAccordion({
   }, [activeThread, thread])
 
   React.useEffect(() => {
-    if (isOpen !== undefined) {
-      setOpen(isOpen)
-    }
+    if (isOpen !== undefined) setOpen(isOpen)
   }, [isOpen])
 
   const toggle = () => {
     const newState = !open
     setOpen(newState)
-    if (!newState && handleOpen) {
-      handleOpen()
-    }
-    if (thread.threadId) {
-      setActiveThread(newState ? thread : null)
-    }
+    if (!newState && handleOpen) handleOpen()
+    if (thread.threadId) setActiveThread(newState ? thread : null)
     if (isNewResponse) setIsNewResponse(false)
-    if (onToggle) {
-      onToggle(newState)
-    }
+    if (onToggle) onToggle(newState)
   }
 
   return (
@@ -120,3 +112,16 @@ export function ChatAccordion({
     </div>
   )
 }
+
+// ;<Dialog>
+//   <DialogTrigger>Open</DialogTrigger>
+//   <DialogContent>
+//     <DialogHeader>
+//       <DialogTitle>Are you absolutely sure?</DialogTitle>
+//       <DialogDescription>
+//         This action cannot be undone. This will permanently delete your account
+//         and remove your data from our servers.
+//       </DialogDescription>
+//     </DialogHeader>
+//   </DialogContent>
+// </Dialog>

apps/masterbots.ai/package.json

@@ -11,7 +11,8 @@
     "preview": "next build && next start",
     "type-check": "tsc --noEmit",
     "format:write": "prettier --write \"{app,lib,components}/**/*.{ts,tsx,mdx}\" --cache",
-    "format:check": "prettier --check \"{app,lib,components}**/*.{ts,tsx,mdx}\" --cache"
+    "format:check": "prettier --check \"{app,lib,components}**/*.{ts,tsx,mdx}\" --cache",
+    "types": "supabase gen types typescript --project-id ipgwcdekxoxsjojvzrre > services/supabase/database.types.ts"
   },
   "dependencies": {
     "@blockmatic/hooks-utils": "^3.0.0",