diff --git a/apps/masterbots.ai/app/(browse)/page.tsx b/apps/masterbots.ai/app/(browse)/page.tsx
index e2cd1f01..8d57e24a 100644
--- a/apps/masterbots.ai/app/(browse)/page.tsx
+++ b/apps/masterbots.ai/app/(browse)/page.tsx
@@ -8,7 +8,7 @@ export default async function HomePage({ searchParams }: HomePageProps) {
const limit = searchParams.limit ? parseInt(searchParams.limit) : 20
const page = searchParams.page ? parseInt(searchParams.page) : 1
// console.log({ query, limit, page })
- const threads = await getThreads({})
+ const threads = await getThreads({page})
return (
diff --git a/apps/masterbots.ai/app/actions.ts b/apps/masterbots.ai/app/actions.ts
index f3ba0cb3..a49780f1 100644
--- a/apps/masterbots.ai/app/actions.ts
+++ b/apps/masterbots.ai/app/actions.ts
@@ -6,11 +6,18 @@ import { createSupabaseServerClient } from '@/services/supabase'
import { createMessagePairs } from '@/lib/threads'
export async function getThreads({
- categoryId
+ categoryId,
+ page = 1
}: {
categoryId?: number
+ page?: number
}): Promise
{
const supabase = await createSupabaseServerClient()
+ const itemsPerPage = 20
+ const from = (page - 1) * itemsPerPage
+ const to = from + itemsPerPage - 1
+
+ console.log('page ', page, ' from ', from, ' to ', to)
let threadsQuery = supabase.from('thread_full').select('*')
@@ -20,7 +27,7 @@ export async function getThreads({
// ])
// }
- const { data, error } = await threadsQuery.range(0, 19)
+ const { data, error } = await threadsQuery.range(from, to)
if (error) return []
diff --git a/apps/masterbots.ai/components/shared/thread-list-reload.tsx b/apps/masterbots.ai/components/shared/thread-list-reload.tsx
new file mode 100644
index 00000000..b5aa4888
--- /dev/null
+++ b/apps/masterbots.ai/components/shared/thread-list-reload.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { useSearchParams, useRouter } from 'next/navigation'
+
+export function ThreadListReload() {
+ const params = useSearchParams()
+ const router = useRouter()
+ const page = parseInt(params.get('page') || '1', 10)
+ const loadMoreRef = useRef(null)
+ const [isLoading, setIsLoading] = useState(false);
+
+ useEffect(() => {
+ if (!loadMoreRef.current) return
+ const observer = new IntersectionObserver(([entry]) => {
+
+ if (entry.isIntersecting && !isLoading) {
+ setIsLoading(true);
+
+ setTimeout(() => {
+ const newPage = page + 1
+ const newParams = new URLSearchParams(params)
+ newParams.set('page', newPage.toString())
+ router.push(`${window.location.pathname}?${newParams.toString()}`)
+
+ setIsLoading(false);
+ }, 150)
+ observer.unobserve(entry.target)
+ }
+ })
+
+ observer.observe(loadMoreRef.current)
+
+ return () => {
+ observer.disconnect()
+ }
+ }, [isLoading, page, params, router])
+
+ return (
+
+ )
+}
diff --git a/apps/masterbots.ai/components/shared/thread-list.tsx b/apps/masterbots.ai/components/shared/thread-list.tsx
index 8ea050c0..6c1c409f 100644
--- a/apps/masterbots.ai/components/shared/thread-list.tsx
+++ b/apps/masterbots.ai/components/shared/thread-list.tsx
@@ -2,6 +2,7 @@ import { MB } from '@repo/supabase'
import { ThreadDialog } from './thread-dialog'
import { ThreadListAccordion } from './thread-list-accordion'
import { ThreadListChatItem } from './thread-list-chat-item'
+import { ThreadListReload } from './thread-list-reload'
export function ThreadList({
initialThreads,
@@ -32,6 +33,7 @@ export function ThreadList({
/>
))
)}
+
)
}