feat: chat list and dialog (#111)

* feat: chat lists and dialog

* feat: chat lists and dialog

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

@@ -1,11 +1,10 @@
 import { getCategories, getMessagePairs, getThread } from '@/services/hasura'
 
-import type { ChatPageProps } from '@/app/c/[chatbot]/[threadId]/page'
 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) {
+export default async function ThreadPage({ params }: ThreadPageProps) {
   const categories = await getCategories()
   const thread = await getThread({
     threadId: params.threadId
@@ -23,3 +22,10 @@ export default async function ThreadLandingPage({ params }: ChatPageProps) {
     </div>
   )
 }
+
+export interface ThreadPageProps {
+  params: {
+    threadId: string
+    chatbot: string
+  }
+}

apps/masterbots.ai/app/b/[id]/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/c/[chatbot]/page.tsx

@@ -1,13 +1,17 @@
-import type { Message } from 'ai'
+import { nanoid, type Message } from 'ai'
 import { isTokenExpired } from '@repo/mb-lib'
-import { nanoid } from 'nanoid'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
-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, getUser } from '@/services/hasura'
+import {
+  getBrowseThreads,
+  getChatbot,
+  getThreads,
+  getUser
+} from '@/services/hasura'
 import { createSupabaseServerClient } from '@/services/supabase'
+import ThreadList from '@/components/shared/thread-list'
+import NewChatInput from '@/components/routes/c/new-chat'
 
 export default async function BotThreadsPage({
   params,
@@ -40,9 +44,8 @@ export default async function BotThreadsPage({
     throw new Error(`Chatbot ${botNames.get(params.chatbot)} not found`)
 
   // session will always be defined
-  const threads = await getThreads({
+  const threads = await getBrowseThreads({
     chatbotName: botNames.get(params.chatbot),
-    jwt,
     userId: userProfile.userId
   })
 
@@ -75,12 +78,16 @@ export default async function BotThreadsPage({
 
   return (
     <>
-      {/* <ThreadPanel
-        chatbot={chatbot.name}
-        search={searchParams}
-        threads={threads}
-      />{' '} */}
-      <ChatChatbot chatbot={chatbot} initialMessages={initialMessages} />
+      <ThreadList
+        initialThreads={threads}
+        filter={{ slug: userProfile.slug, chatbotName: chatbot.name }}
+        chat={true}
+      />
+      <NewChatInput
+        chatbot={chatbot}
+        initialMessages={initialMessages}
+        id={crypto.randomUUID()}
+      />
     </>
   )
 }

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

@@ -1,19 +1,23 @@
-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'
+import { BrowseProvider } from '@/hooks/use-browse'
 
 interface ChatLayoutProps {
   children: React.ReactNode
 }
 
 export default async function ChatLayout({ children }: ChatLayoutProps) {
   return (
-    <main className="relative flex flex-col h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
-      <ResponsiveSidebar />
-      <ChatLayoutSection>{children}</ChatLayoutSection>
-      <div className="block lg:hidden">
-        <FooterCT />
-      </div>
-    </main>
+    <BrowseProvider>
+      <main className="relative flex flex-row h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
+        <ResponsiveSidebar />
+        <div className="mx-5 flex grow w-full">
+          {children}
+          <div className="block lg:hidden">
+            <FooterCT />
+          </div>
+        </div>
+      </main>
+    </BrowseProvider>
   )
 }

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

@@ -1,10 +1,10 @@
 import { isTokenExpired } from '@repo/mb-lib'
 import { redirect } from 'next/navigation'
 import { cookies } from 'next/headers'
-import ChatThreadListPanel from '@/components/routes/c/chat-thread-list-panel'
-import ThreadPanel from '@/components/routes/c/thread-panel'
-import { getThreads, getUser } from '@/services/hasura'
+import { getBrowseThreads, getUser } from '@/services/hasura'
 import { createSupabaseServerClient } from '@/services/supabase'
+import ThreadList from '@/components/shared/thread-list'
+import ChatThreadListPanel from '@/components/routes/c/chat-thread-list-panel'
 
 export default async function IndexPage() {
   const supabase = await createSupabaseServerClient()
@@ -25,14 +25,18 @@ export default async function IndexPage() {
   // NOTE: maybe we should use same expiration time
   if (!jwt || isTokenExpired(jwt) || !user) redirect(`/auth/sign-in`)
 
-  const threads = await getThreads({
-    jwt,
-    userId: dbUserProfile.userId
+  const threads = await getBrowseThreads({
+    slug: dbUserProfile.slug,
+    limit: 20
   })
 
   return (
     <>
-      <ThreadPanel threads={threads} />
+      <ThreadList
+        initialThreads={threads}
+        filter={{ slug: dbUserProfile.slug }}
+        chat={true}
+      />
       <ChatThreadListPanel />
     </>
   )

apps/masterbots.ai/components/routes/c/chat-input-2.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { useThread } from '@/hooks/use-thread'
+import { Chat } from './chat'
+
+export default function ChatInputTT() {
+  const { initialMessages, activeThread } = useThread()
+  return (
+    <Chat
+      chatbot={activeThread?.chatbot}
+      initialMessages={initialMessages}
+      threadId={activeThread?.threadId}
+    />
+  )
+}