feat: continuous thread UI and finalize functionality.

Author: mledezma

apps/masterbots.ai/app/u/[slug]/t/[category]/[chatbot]/[threadId]/page.tsx

@@ -10,24 +10,22 @@ interface ThreadPageProps {
   }
 }
 export default async function ThreadPage({ params }: ThreadPageProps) {
-  
-  
   const thread = await getThread({
     threadId: params.threadId,
     jwt: ''
   })
- 
+
   if(!thread){
     return <div>Thread not found</div>
   }
   const { user, chatbot, messages } = thread
 
   return (
     <BrowseChatMessageList
-          user={user as User | undefined}
-          chatbot={chatbot}
-          messages={messages}
-          isThread
-        />
+        user={user as User | undefined}
+        chatbot={chatbot}
+        messages={messages}
+        isThread
+      />
   )
 }

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

@@ -43,7 +43,6 @@ export function BrowseChatMessageList({
       setPairs(prePairs)
     } else setPairs([])
   }, [messages])
-
   return (
     <div>
       {pairs.map((pair: MessagePair, key: number) => (

apps/masterbots.ai/components/routes/browse/browse-chat-messages.tsx

@@ -21,6 +21,7 @@ import { BrowseChatMessageList } from '@/components/routes/browse/browse-chat-me
 import { getMessages } from '@/services/hasura'
 import { ExternalLink } from '@/components/shared/external-link'
 import { toSlug } from 'mb-lib'
+import Link from 'next/link'
 
 export type MessagePair = {
   userMessage: Message
@@ -38,16 +39,20 @@ export function convertMessage(message: Message) {
 
 export function BrowseChatMessages({
   threadId,
+  parentThreadId,
   user,
   chatbot
 }: {
   threadId: string
+  parentThreadId?: string
   user?: User
   chatbot?: Chatbot
 }) {
   const [messages, setMessages] = React.useState<Message[]>([])
+  const [parentThreadTitle, setParentThreadTitle] = React.useState<string | null>(null)
   const { name: categoryName } = chatbot?.categories[0].category || { name: '' }
   const { name: chatBotName } = chatbot || { name: '' }
+  const parentThreadUrl = `/b/${toSlug(chatBotName)}/${parentThreadId}`
 
   // Fetch messages for the specified thread ID
   const fetchMessages = async () => {
@@ -57,11 +62,27 @@ export function BrowseChatMessages({
     }
   }
 
+  // Fetch parent thread info
+  const fetchParentThreadInfo = async () => {
+    if (parentThreadId) {
+      const parentThread = await getMessages({ threadId: parentThreadId })
+      const parentThreadTitle = parentThread[0]?.content
+      setParentThreadTitle(parentThreadTitle)
+    }
+  }
+
   // Effect to fetch messages when the thread ID changes
   React.useEffect(() => {
     fetchMessages()
   }, [threadId])
 
+  // Effect to fetch the parent thread info if the parentThreadId exists
+  React.useEffect(() => {
+    if (parentThreadId) {
+      fetchParentThreadInfo()
+    }
+  }, [parentThreadId])
+
   return (
     <div className="w-full">
       {chatbot ? (
@@ -73,6 +94,9 @@ export function BrowseChatMessages({
         ''
       )}
       <div className="flex flex-col max-w-screen-lg px-4 mx-auto mt-8 gap-y-4">
+        { parentThreadTitle && (
+          <p>This thread is an extension of the original content from the parent thread titled <Link className="text-muted-foreground hover:text-primary transition-colors underline" href={parentThreadUrl}>"{ parentThreadTitle }"</Link>. To get the full context and explore more, visit the <Link className="text-muted-foreground hover:text-primary transition-colors underline" href={parentThreadUrl}>original post</Link>.</p>
+        )}
         <BrowseChatMessageList
           user={user}
           chatbot={chatbot}

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

@@ -34,6 +34,7 @@ export function BrowseThread({
           chatbot={thread?.chatbot}
           user={thread?.user || undefined}
           threadId={thread.threadId}
+          parentThreadId={thread?.parentThreadId}
         />
       ) : (
         ''

apps/masterbots.ai/components/routes/chat/chat.tsx

@@ -70,7 +70,7 @@ export function Chat({
     setLoadingState,
   } = useThread();
   const { activeChatbot } = useSidebar();
-  const { isContinuosThread } = useThreadVisibility()
+  const { isContinuousThread } = useThreadVisibility()
   const containerRef = React.useRef<HTMLDivElement>();
   const params = useParams<{ chatbot: string; threadId: string }>();
   const chatbot = chatbotProps || activeThread?.chatbot || activeChatbot as Chatbot
@@ -115,9 +115,9 @@ export function Chat({
     }
   };
 
-  const chatSearchMessage = (isNewChat: boolean, isContinuosThread: boolean, allMessages: UiUtilsMessage[] ) => {
+  const chatSearchMessage = (isNewChat: boolean, isContinuousThread: boolean, allMessages: UiUtilsMessage[] ) => {
     const threadTitle = allMessages.filter(m => m.role === 'user')[0]?.content
-    if (isContinuosThread && allMessages) {
+    if (isContinuousThread && allMessages) {
       return `Create new thread from "${threadTitle}" by making a new question.`
     } else if (isNewChat) {
       return `Start New Chat with ${chatbot.name}`
@@ -186,15 +186,15 @@ export function Chat({
         id={params.threadId || isNewChat ? threadId : activeThread?.threadId}
         isLoading={isLoading}
         stop={stop}
-        append={isContinuosThread ? appendAsContinuousThread : appendWithMbContextPrompts}
+        append={isContinuousThread ? appendAsContinuousThread : appendWithMbContextPrompts}
         reload={reload}
         messages={allMessages}
         input={input}
         setInput={setInput}
         chatbot={chatbot}
         placeholder={
           chatbot
-            ? chatSearchMessage(isNewChat, isContinuosThread, allMessages)
+            ? chatSearchMessage(isNewChat, isContinuousThread, allMessages)
             : ""
         }
         showReload={!isNewChat}

apps/masterbots.ai/components/routes/thread/user-thread-panel.tsx

@@ -17,7 +17,7 @@
  * - Updates the thread list when the active category or chatbot changes
  * - Handles loading state and pagination
  * - Sets the active thread when a thread is part of que Query Params.
- * - Handles the visibility of the continuos thread functionality.
+ * - Handles the visibility of the continuous thread functionality.
  *
  * Props:
  * - chatbot: Optional string representing the selected chatbot
@@ -36,6 +36,7 @@ import { useThread } from '@/lib/hooks/use-thread'
 import { useThreadVisibility } from '@/lib/hooks/use-thread-visibility'
 import { getBrowseThreads, getThread, getThreads, getUserBySlug } from '@/services/hasura'
 import type { Thread } from 'mb-genql'
+import { Session } from 'next-auth/core/types'
 import { useSession } from 'next-auth/react'
 import { useParams, usePathname, useSearchParams } from 'next/navigation'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -62,7 +63,7 @@ export default function UserThreadPanel({
   const { activeCategory, activeChatbot } = useSidebar()
   const { isOpenPopup, activeThread, setActiveThread, setIsOpenPopup } = useThread()
   const [loading, setLoading] = useState<boolean>(false)
-  const { threads: hookThreads, isContinuosThread, setIsContinuosThread } = useThreadVisibility()
+  const { threads: hookThreads, isContinuousThread, setIsContinuousThread } = useThreadVisibility()
   const [searchTerm, setSearchTerm] = useState<string>('')
   const searchParams = useSearchParams()
   const { slug, threadId } = params;
@@ -171,7 +172,7 @@ export default function UserThreadPanel({
     setLoading(false)
   }
 
-  const getThreadByContinuousThreadId = async () => {
+  const getThreadByContinuousThreadId = async (continuousThreadId: string, session: Session) => {
     const thread = await getThread({
       threadId: continuousThreadId,
       jwt: session!.user?.hasuraJwt,
@@ -180,7 +181,7 @@ export default function UserThreadPanel({
     if (thread) {
       setActiveThread(thread)
       setThreads([thread])
-      setIsContinuosThread(true)
+      setIsContinuousThread(true)
       setTotalThreads(1)
       setCount(1)
       setIsOpenPopup(true)
@@ -189,7 +190,7 @@ export default function UserThreadPanel({
 
   useEffect(() => {
     if (continuousThreadId && session) {
-      getThreadByContinuousThreadId()
+      getThreadByContinuousThreadId(continuousThreadId, session)
     }
   }, [continuousThreadId, session]);
 
@@ -236,7 +237,7 @@ export default function UserThreadPanel({
   const showChatbotDetails = !loading && !searchTerm && threads.length === 0
   return (
     <>
-      { !isContinuosThread && (
+      { !isContinuousThread && (
         <div className="flex justify-between px-4 md:px-10 py-5 lg:max-w-[calc(100%-100px)] 2xl:max-w-full">
           <ChatSearchInput setThreads={setThreads} onSearch={setSearchTerm} />
         </div>

apps/masterbots.ai/lib/hooks/use-mb-chat.ts

@@ -7,6 +7,7 @@ import {
 import { useModel } from '@/lib/hooks/use-model'
 import { useSidebar } from '@/lib/hooks/use-sidebar'
 import { useThread } from '@/lib/hooks/use-thread'
+import { useThreadVisibility } from '@/lib/hooks/use-thread-visibility'
 import { delayFetch } from '@/lib/utils'
 import {
   createThread,
@@ -59,6 +60,7 @@ export function useMBChat(config?: MBChatHookConfig): MBChatHookCallback {
     messagesFromDB: [] as Message[]
   })
   const { customSonner } = useSonner()
+  const { isContinuousThread } = useThreadVisibility()
   // console.log('[HOOK] webSearch', webSearch)
 
   const params = useParams<{ chatbot: string; threadId: string }>()
@@ -110,15 +112,8 @@ export function useMBChat(config?: MBChatHookConfig): MBChatHookCallback {
       model: selectedModel,
       clientType,
       webSearch
-      // chatbot:
-      //   activeChatbot && activeChatbot?.categories?.length
-      //     ? {
-      //         chatbotId: activeChatbot?.chatbotId,
-      //         categoryId: activeChatbot?.categories[0].categoryId
-      //       }
-      //     : {},
     },
-    async onResponse(response) {
+    async onResponse(response: any) {
       if (response.status >= 400) {
         customSonner({ type: 'error', text: response.statusText })
 
@@ -131,21 +126,30 @@ export function useMBChat(config?: MBChatHookConfig): MBChatHookCallback {
         }
       }
     },
-    async onFinish(message) {
+    async onFinish(message: any) {
+      let aiChatThreadId;
+
+      if (isContinuousThread) {
+        aiChatThreadId = randomThreadId.current
+        // aiChatQuestion =
+      } else if (params.threadId || isNewChat) {
+        aiChatThreadId = threadId
+      } else {
+        aiChatThreadId = activeThread?.threadId
+      }
+
       await Promise.all([
         saveNewMessage({
           role: 'user',
-          threadId:
-            params.threadId || isNewChat ? threadId : activeThread?.threadId,
+          threadId: aiChatThreadId,
           content: userContentRef.current,
           jwt: session!.user?.hasuraJwt
         }),
         // ? Adding a delay to securely keep the order of messages
         delayFetch(),
         saveNewMessage({
           role: 'assistant',
-          threadId:
-            params.threadId || isNewChat ? threadId : activeThread?.threadId,
+          threadId: aiChatThreadId,
           content: message.content,
           jwt: session!.user?.hasuraJwt
         })
@@ -154,12 +158,12 @@ export function useMBChat(config?: MBChatHookConfig): MBChatHookCallback {
       setLoadingState(undefined)
       setActiveTool(undefined)
     },
-    onToolCall({ toolCall }) {
+    onToolCall({ toolCall }: any) {
       console.log('Tool call:', toolCall)
       customSonner({ type: 'info', text: `Tool call executed: ${toolCall.toolName}` })
       setActiveTool(toolCall as AiToolCall)
     },
-    async onError(error) {
+    async onError(error: any) {
       console.error('Error in chat: ', error)
 
       customSonner({ type: 'error', text: 'Failed to send message. Please try again.' })
@@ -333,9 +337,10 @@ export function useMBChat(config?: MBChatHookConfig): MBChatHookCallback {
 
   const appendAsContinuousThread = async (userMessage: AiMessage | CreateMessage) => {
     const optimisticUserMessage = { ...userMessage, id: randomThreadId.current }
-    console.log('session!.user.id', session!.user.id)
+    const message = followingQuestionsPrompt(userMessage.content, messages.concat(allMessages))
+    userContentRef.current = userMessage.content
 
-    await createThread({
+    const createdThread = await createThread({
       threadId: randomThreadId.current as string,
       parentThreadId: activeThread?.threadId,
       chatbotId: chatbot ? chatbot?.chatbotId : 0,
@@ -344,29 +349,19 @@ export function useMBChat(config?: MBChatHookConfig): MBChatHookCallback {
       isPublic: activeChatbot?.name !== 'BlankBot'
     })
 
-    const thread = await getThread({
-      threadId: randomThreadId.current as string,
-      jwt: session!.user?.hasuraJwt
-    })
-
-    append({
-      ...optimisticUserMessage,
-      content: followingQuestionsPrompt(userContentRef.current, messages.concat(allMessages))
-    })
+    if (createdThread) {
+      await append({
+        ...optimisticUserMessage,
+        content: message
+      })
 
-    saveNewMessage({
-      role: 'user',
-      threadId: randomThreadId.current,
-      content: userMessage.content,
-      jwt: session!.user?.hasuraJwt
-    })
+      router.push(`/${chatbot?.name.trim().toLowerCase()}/${randomThreadId.current}`, {
+        scroll: false
+      })
 
-    updateActiveThread(thread)
+      router.refresh()
+    }
 
-    router.push(`/${chatbot?.name.trim().toLowerCase()}/${randomThreadId.current}`, {
-      scroll: false
-    })
-    router.refresh()
     return null
   }
 

apps/masterbots.ai/lib/hooks/use-thread-visibility.tsx

@@ -26,8 +26,8 @@ interface ThreadVisibilityContextProps {
   handleToggleAdminMode: () => void
   adminApproveThread: (threadId: string) => void
   isAdminMode: boolean
-  isContinuosThread: boolean,
-  setIsContinuosThread: React.Dispatch<React.SetStateAction<boolean>>
+  isContinuousThread: boolean,
+  setIsContinuousThread: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const ThreadVisibilityContext = React.createContext<
@@ -54,7 +54,7 @@ export function ThreadVisibilityProvider({
   const [isPublic, setIsPublic] = useState(false)
   const [threads, setThreads] = useState<Thread[]>([])
   const [isAdminMode, setIsAdminMode] = React.useState<boolean>(false)
-  const [isContinuosThread, setIsContinuosThread] = React.useState<boolean>(false)
+  const [isContinuousThread, setIsContinuousThread] = React.useState<boolean>(false)
   const { customSonner } = useSonner()
 
   const session = useSession()
@@ -188,8 +188,8 @@ export function ThreadVisibilityProvider({
         handleToggleAdminMode,
         adminApproveThread,
         isAdminMode,
-        isContinuosThread,
-        setIsContinuosThread
+        isContinuousThread,
+        setIsContinuousThread
       }}
     >
       {children}