[masterbots.ai] refactor: use chat hook context + state management perf (#369)

* chore: system prompt as system role

* refactor: use-mb-chat to context

* fix: mbchat provider location

Author: AndlerRL

apps/masterbots.ai/app/actions/ai-main-call.ts

@@ -179,7 +179,7 @@ export async function processWithAiObject(
       throw new Error('Failed to get response object')
     }
 
-    console.log('result::processwithAiObject -->', responseObject)
+    console.log('result::processWithAiObject -->', responseObject)
     return responseObject
   } catch (error) {
     console.error('Error in processWithAIObject: ', error)
@@ -343,7 +343,7 @@ export async function createResponseStreamObject(
   const { model, chatbotMetadata, prompt, webSearch } = json
 
   const tools: Partial<typeof aiTools> = {
-    webSearch: aiTools.webSearch,
+    // webSearch: aiTools.webSearch,
     // ? Temp disabling ICL as tool. Using direct ICL integration to main prompt instead. Might be enabled later.
     // chatbotMetadataExamples: aiTools.chatbotMetadataExamples
   }

apps/masterbots.ai/components/layout/providers.tsx

@@ -2,6 +2,7 @@
 
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { AccessibilityProvider } from '@/lib/hooks/use-accessibility'
+import { MBChatProvider } from '@/lib/hooks/use-mb-chat'
 import { ModelProvider } from '@/lib/hooks/use-model'
 import { PaymentProvider } from '@/lib/hooks/use-payment'
 import { PowerUpProvider } from '@/lib/hooks/use-power-up'
@@ -11,21 +12,18 @@ import { ThreadProvider } from '@/lib/hooks/use-thread'
 import { ThreadSearchProvider } from '@/lib/hooks/use-thread-search'
 import { ThreadVisibilityProvider } from '@/lib/hooks/use-thread-visibility'
 import { SessionProvider } from 'next-auth/react'
-import { Attribute, ThemeProvider as NextThemesProvider } from 'next-themes'
+import { type Attribute, ThemeProvider as NextThemesProvider } from 'next-themes'
 
 type ProvidersProps = {
-  children: React.ReactNode,
-  attribute?: Attribute,
-  defaultTheme?: string,
-  enableSystem?: boolean,
+  children: React.ReactNode
+  attribute?: Attribute
+  defaultTheme?: string
+  enableSystem?: boolean
   disableTransitionOnChange?: boolean
 }
 export function Providers({ children, ...props }: ProvidersProps) {
-
   return (
-    <NextThemesProvider
-      {...props}
-    >
+    <NextThemesProvider {...props}>
       <SessionProvider>
         <ModelProvider>
           <PaymentProvider>
@@ -36,7 +34,9 @@ export function Providers({ children, ...props }: ProvidersProps) {
                     <AccessibilityProvider>
                       <ThreadSearchProvider>
                         <ThreadProvider>
-                          <ThreadVisibilityProvider> {children}</ThreadVisibilityProvider>
+                          <ThreadVisibilityProvider>
+                            <MBChatProvider>{children}</MBChatProvider>
+                          </ThreadVisibilityProvider>
                         </ThreadProvider>
                       </ThreadSearchProvider>
                     </AccessibilityProvider>

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

@@ -3,7 +3,6 @@
 import { ChatMessage } from '@/components/routes/chat/chat-message'
 import { SharedAccordion } from '@/components/shared/shared-accordion'
 import { ShortMessage } from '@/components/shared/short-message'
-import { useMBChat } from '@/lib/hooks/use-mb-chat'
 import { useScroll } from '@/lib/hooks/use-scroll'
 import { useThread } from '@/lib/hooks/use-thread'
 import { cn, createMessagePairs } from '@/lib/utils'
@@ -47,7 +46,8 @@ export function ChatList({
   const { isNewResponse, activeThread } = useThread()
   const localContainerRef = useRef<HTMLDivElement>(null)
   const effectiveContainerRef = containerRef || localContainerRef
-  const chatMessages = (messages || activeThread?.messages || []).sort((a, b) => a.createdAt - b.createdAt)
+  const chatMessages = (messages || activeThread?.messages || [])
+  // .sort((a, b) => a.createdAt - b.createdAt)
 
   useScroll({
     containerRef: effectiveContainerRef,
@@ -118,7 +118,7 @@ function MessagePairs({
     <>
       {pairs.map((pair: MessagePair, key: number) => (
         <SharedAccordion
-          key={`${pair.userMessage.id}-${pair.chatGptMessage[0]?.id ?? 'pending'}`}
+          key={`${pair.userMessage.createdAt}-${pair.chatGptMessage[0]?.id ?? 'pending'}`}
           defaultState={key === 0 || (key === pairs.length - 1 && isNewResponse)}
           className={cn({ 'relative': isThread })}
           triggerClass={cn(
@@ -188,10 +188,17 @@ function MessagePairs({
 }
 
 export function ChatLoadingState() {
-  const { activeTool } = useThread()
-  const [{ isLoadingMessages }] = useMBChat()
+  const { activeTool, loadingState } = useThread()
 
-  if (!isLoadingMessages && !activeTool?.toolName) return null
+  if (!loadingState || !activeTool?.toolName) return null
+
+  if (loadingState?.match(/^(processing|digesting|polishing)/)) {
+    return (
+      <div className="flex items-center justify-center w-full h-20">
+        <div className="w-8 h-8 border-4 border-t-4 border-gray-200 rounded-full animate-ping" />
+      </div>
+    )
+  }
 
   switch (activeTool?.toolName) {
     case 'webSearch':
@@ -219,7 +226,9 @@ export function ChatLoadingState() {
       )
     default:
       return (
-        <div className="transition-all size-6 border-2 border-t-[2px] rounded-full border-x-gray-300 animate-spin" />
+        <div className="flex items-center justify-center w-full h-20">
+          <div className="w-8 h-8 border-4 border-t-4 border-gray-200 rounded-full animate-ping" />
+        </div>
       )
   }
 }

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

@@ -4,11 +4,10 @@ import { CodeBlock } from '@/components/ui/codeblock'
 import { cleanPrompt } from '@/lib/helpers/ai-helpers'
 import { cn } from '@/lib/utils'
 import type { ChatMessageProps, WebSearchResult } from '@/types/types'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import { ClickableText } from './chat-clickable-text'
-import React from 'react'
 
 export function ChatMessage({
   message,
@@ -29,8 +28,7 @@ export function ChatMessage({
         <h3 className="mb-2 text-lg font-semibold">References</h3>
         <div className="space-y-4">
           {references.map((ref, index) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-            <div key={index} className="flex gap-4">
+            <div key={ref.profile.name.toLowerCase().replace(/\s/g, '-')} className="flex gap-4">
               {ref.thumbnail?.src && (
                 // eslint-disable-next-line @next/next/no-img-element
                 <img

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

@@ -109,14 +109,11 @@ export function ChatOptions({ threadId, thread, isBrowse }: ChatOptionsProps) {
       )}
 
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="w-6 h-6 p-0 sm:h-8 sm:w-8"
-          >
-            <MoreVertical className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-          </Button>
+        <DropdownMenuTrigger asChild className={cn(buttonVariants({
+          variant: 'ghost',
+          size: 'sm'
+        }), 'size-6 p-0 sm:size-8')}>
+          <MoreVertical className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
         </DropdownMenuTrigger>
         <DropdownMenuContent
           sideOffset={8}

apps/masterbots.ai/components/routes/chat/chat-panel-header.tsx

@@ -8,7 +8,6 @@ import { IconRefresh, IconShare, IconStop } from '@/components/ui/icons'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
 import { Switch } from '@/components/ui/switch'
-import { useMBChat } from '@/lib/hooks/use-mb-chat'
 import { usePowerUp } from '@/lib/hooks/use-power-up'
 import { useThread } from '@/lib/hooks/use-thread'
 import { GlobeIcon } from 'lucide-react'
@@ -42,8 +41,7 @@ export function ChatPanelHeader({
   // TODO: Attach Share func to user chats chat pop-up
   const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
   const webSearchRef = React.useRef(null)
-  const { loadingState } = useThread()
-  const [{ webSearch }, { toggleWebSearch }] = useMBChat()
+  const { loadingState, webSearch, setWebSearch } = useThread()
   const { isPowerUp, togglePowerUp } = usePowerUp()
 
   return (
@@ -73,7 +71,7 @@ export function ChatPanelHeader({
                 id="webSearch"
                 value={webSearch ? 'checked' : 'unchecked'}
                 ref={webSearchRef}
-                onClick={toggleWebSearch}
+                onClick={value => setWebSearch(!value)}
                 className="transition-all delay-100 h-auto w-auto inline-flex items-center gap-2 border-muted p-0.5 data-[state=checked]:border-accent/50 data-[state=checked]:bg-accent/25 rounded-full"
                 checkboxconfig={{
                   check: (

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

@@ -35,7 +35,6 @@
 import { ChatList } from '@/components/routes/chat/chat-list'
 import { ChatPanel } from '@/components/routes/chat/chat-panel'
 import { ChatScrollAnchor } from '@/components/routes/chat/chat-scroll-anchor'
-import { botNames } from '@/lib/constants/bots-names'
 import { useAtBottom } from '@/lib/hooks/use-at-bottom'
 import { useMBChat } from '@/lib/hooks/use-mb-chat'
 import { useSidebar } from '@/lib/hooks/use-sidebar'
@@ -48,7 +47,6 @@ import { useScroll } from 'framer-motion'
 import type { Chatbot } from 'mb-genql'
 import { useParams, usePathname } from 'next/navigation'
 import React, { useEffect } from 'react'
-import { useAsync } from 'react-use'
 
 export function Chat({
   chatbot: chatbotProps,
@@ -76,10 +74,7 @@ export function Chat({
   const [
     { newChatThreadId: threadId, input, isLoading, allMessages, isNewChat },
     { appendWithMbContextPrompts, appendAsContinuousThread, reload, setInput },
-  ] = useMBChat({
-    chatbot,
-  })
-  const chatbotNames = useAsync(async () => (await botNames).get(params.chatbot), [])
+  ] = useMBChat()
   const pathname = usePathname()
   const prevPathname = React.useRef(pathname)
 
@@ -92,7 +87,7 @@ export function Chat({
     scrollY,
   })
 
-  // ? saffer way to debounce scroll to bottom
+  // ? safer way to debounce scroll to bottom
   let timeoutId: any
   const debounceScrollToBottom = (element: HTMLElement | undefined) => {
     clearTimeout(timeoutId)

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

@@ -59,8 +59,8 @@ export default function ThreadList({
   return (
     <>
       {loading
-        ? Array.from({ length: 5 }).map((_, key) => (
-          <ThreadItemSkeleton key={`thread-skeleton-${key}`} />
+        ? [1, 2, 3, 4, 5].map((pos) => (
+          <ThreadItemSkeleton key={`thread-skeleton-${pos}`} />
         ))
         : filteredThreads?.map((thread, key) => (
           <ThreadComponent

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

@@ -20,10 +20,7 @@ import { useEffect, useRef, useState } from 'react'
 export function ThreadPopup({ className }: { className?: string }) {
   const { activeChatbot } = useSidebar()
   const { isOpenPopup, activeThread } = useThread()
-  const [{ allMessages, isLoading }, { sendMessageFromResponse }] = useMBChat({
-    threadId: activeThread?.threadId,
-    chatbot: activeThread?.chatbot || (activeChatbot as Chatbot)
-  })
+  const [{ allMessages, isLoading }, { sendMessageFromResponse }] = useMBChat()
   const [browseMessages, setBrowseMessages] = useState<Message[]>([])
   const popupContentRef = useRef<HTMLDivElement>()
 

apps/masterbots.ai/lib/actions.ts

@@ -1,12 +1,13 @@
 import type { PromptProps } from '@/types/types'
 import type { Message } from 'ai'
+import { nanoid } from 'nanoid'
 
 export function formatSystemPrompts(prompts: PromptProps[]): Message[] {
   return (
     prompts?.map(({ prompt }) => ({
-      id: prompt.promptId.toString(),
-      // role: 'system',
-      role: 'user',
+      id: 'expertise-' + nanoid(10),
+      role: 'system',
+      // role: 'user',
       content: prompt.content,
       createdAt: new Date(),
     })) || []