refactor: use-mb-chat to context

AndlerRL · AndlerRL · commit 34261fe232b7 · 2025-02-07T04:22:22.000-06:00
diff --git a/apps/masterbots.ai/app/actions/ai-main-call.ts b/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)
diff --git a/apps/masterbots.ai/app/c/layout.tsx b/apps/masterbots.ai/app/c/layout.tsx
@@ -1,6 +1,7 @@
 import FooterCT from '@/components/layout/footer/footer-ct'
 import { ResponsiveSidebar } from '@/components/layout/sidebar/sidebar-responsive'
 import { ChatLayoutSection } from '@/components/routes/chat/chat-layout-section'
+import { MBChatProvider } from '@/lib/hooks/use-mb-chat'
 import NextTopLoader from 'nextjs-toploader'
 
 interface ChatLayoutProps {
@@ -9,11 +10,13 @@ interface ChatLayoutProps {
 
 export default async function ChatLayout({ children }: ChatLayoutProps) {
   return (
-    <main className="relative flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
-      <NextTopLoader color="#1ED761" initialPosition={0.2} />
-      <ResponsiveSidebar />
-      <ChatLayoutSection>{children}</ChatLayoutSection>
-      <FooterCT />
-    </main>
+    <MBChatProvider>
+      <main className="relative flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
+        <NextTopLoader color="#1ED761" initialPosition={0.2} />
+        <ResponsiveSidebar />
+        <ChatLayoutSection>{children}</ChatLayoutSection>
+        <FooterCT />
+      </main>
+    </MBChatProvider>
   )
 }
diff --git a/apps/masterbots.ai/components/routes/chat/chat-list.tsx b/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>
       )
   }
 }
diff --git a/apps/masterbots.ai/components/routes/chat/chat-message.tsx b/apps/masterbots.ai/components/routes/chat/chat-message.tsx
@@ -27,8 +27,8 @@ export function ChatMessage({
       <div className="pt-4 mt-4 border-t border-gray-200">
         <h3 className="mb-2 text-lg font-semibold">References</h3>
         <div className="space-y-4">
-          {references.map((ref, index) => (
-            <div key={index} className="flex gap-4">
+          {references.map((ref) => (
+            <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
diff --git a/apps/masterbots.ai/components/routes/chat/chat-options.tsx b/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}
diff --git a/apps/masterbots.ai/components/routes/chat/chat-panel-header.tsx b/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: (
diff --git a/apps/masterbots.ai/components/routes/chat/chat.tsx b/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)
diff --git a/apps/masterbots.ai/components/routes/thread/thread-list.tsx b/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
diff --git a/apps/masterbots.ai/components/routes/thread/thread-popup.tsx b/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>()
 
diff --git a/apps/masterbots.ai/lib/actions.ts b/apps/masterbots.ai/lib/actions.ts
@@ -1,10 +1,11 @@
 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(),
+      id: 'expertise-' + nanoid(10),
       role: 'system',
       // role: 'user',
       content: prompt.content,
diff --git a/apps/masterbots.ai/lib/constants/prompts.ts b/apps/masterbots.ai/lib/constants/prompts.ts
@@ -190,7 +190,7 @@ Examples:
 
 export function setDefaultUserPreferencesPrompt(chatbot: Chatbot): Message {
   return {
-    id: nanoid(),
+    id: 'instructions-' + nanoid(10),
     role: 'system',
     // role: 'user',
     content: createBotConfigurationPrompt(chatbot),
diff --git a/apps/masterbots.ai/lib/helpers/ai-classification.ts b/apps/masterbots.ai/lib/helpers/ai-classification.ts
@@ -0,0 +1,142 @@
+import { improveMessage } from '@/app/actions'
+import type { CustomSonnerProps } from '@/lib/hooks/useSonner'
+import { fetchDomainExamples, fetchDomainTags } from '@/services/hasura'
+import type {
+  AiClientType,
+  ChatbotMetadataClassification,
+  ChatbotMetadataExamples,
+  ExampleMetadata,
+} from '@/types/types'
+
+export async function aiExampleClassification({
+  chatMetadata,
+  customSonner,
+}: {
+  customSonner: ({ type, text }: CustomSonnerProps) => string | number
+  chatMetadata?: ChatbotMetadataClassification
+}) {
+  const defaultMetadata: ChatbotMetadataExamples = {
+    tagExamples: [],
+    categoryExamples: [],
+    domainExamples: [],
+  }
+  const tagExamples = []
+  const categoryExamples = []
+  const domainExamples: ExampleMetadata[] = []
+  // * Getting the user labelling the thread (categories, sub-category, etc.)
+  try {
+    if (
+      !chatMetadata ||
+      (chatMetadata &&
+        (!chatMetadata?.domainName || !chatMetadata?.tags || !chatMetadata?.categories.length))
+    ) {
+      return defaultMetadata
+    }
+
+    const domainExampleResponse = (await fetchDomainExamples(chatMetadata)) ?? []
+    const domainTags = (await fetchDomainTags(chatMetadata)) ?? []
+
+    // console.log('Domain examples --> ', domainExampleResponse)
+    // console.log('Domain tags --> ', domainTags)
+
+    if (!domainExampleResponse.length && !domainTags) {
+      customSonner({ type: 'error', text: 'Error fetching domain examples or tags.' })
+      return defaultMetadata
+    }
+
+    // console.log('Domain tags length:', Object.keys(domainTags || {}).length)
+
+    // * NOTE: ****************************************************************************************
+    // the domainTags keys are tag ids, the values are an object with the name and frequency of the tag
+    // every example has a list of tags (tag ids); these match the domainTags object keys
+    // the chat metadata has a tags field as well; this is a list of tags (tag names)
+    // i need to go through the list of examples
+    // for each i need to get the list of tag ids and use teh domainTags object to get their names
+    // then i need to check if the name is in the chat metadata tags list
+    // i need to take a cumulative sum of 1-the frequency of the tag in the domainTags object
+    // i need to store this cumulative sum in the example object
+    // ************************************************************************************************
+
+    for (const example of domainExampleResponse) {
+      let cumulativeSum = 0
+      for (const tagId of example.tags) {
+        try {
+          // @ts-ignore
+          const tagName = domainTags[tagId]?.name
+          if (!chatMetadata.tags.length) {
+            break
+          }
+          if (chatMetadata.tags.includes(tagName)) {
+            // @ts-ignore
+            cumulativeSum += 1 - domainTags[tagId]?.frequency
+            const exampleIndex = domainExampleResponse.findIndex(
+              (e) => e.exampleId === example.exampleId,
+            )
+            // grab the exampleIndex to push it into a new array
+            if (exampleIndex !== -1) {
+              domainExamples.push({ ...example, cumulativeSum })
+            }
+          }
+        } catch (error) {
+          console.log('Error:', error)
+          console.log('Tag id:', tagId)
+        }
+      }
+      example.cumulativeSum = cumulativeSum
+    }
+
+    // now i need to sort the examples by the cumulative sum, in descending order
+    domainExamples.sort((a, b) => (b?.cumulativeSum || 0) - (a?.cumulativeSum || 0))
+    // console.log('Sorted domain examples:', domainExamples)
+
+    // then i need to take the top 3 examples
+    // however, i do not want to take examples that have the same prompt
+    const usedPrompts: string[] = []
+    for (const example of domainExamples) {
+      if (usedPrompts.includes(example.prompt)) {
+        continue
+      }
+      if (tagExamples.length < 3) {
+        tagExamples.push(example)
+        usedPrompts.push(example.prompt)
+      } else if (categoryExamples.length < 3) {
+        for (const categories of chatMetadata.categories) {
+          for (const category of Object.keys(categories)) {
+            if (example.category === category) {
+              categoryExamples.push(example)
+              usedPrompts.push(example.prompt)
+            }
+          }
+        }
+      } else {
+        break
+      }
+    }
+  } catch (error) {
+    console.error('getMetadataLabels: Error getting chatbot metadata labels -->', error)
+  }
+
+  return {
+    tagExamples,
+    categoryExamples,
+    domainExamples,
+  }
+}
+
+export async function processUserMessage(
+  content: string,
+  clientType: AiClientType,
+  model: string,
+): Promise<{ content: string; error?: Error }> {
+  try {
+    const improved = await improveMessage(content, clientType, model)
+
+    const processedContent =
+      improved.translatedText || improved.improvedText || improved.originalText
+
+    return { content: processedContent }
+  } catch (error) {
+    console.error('Error processing message:', error)
+    return { content, error: error as Error }
+  }
+}
diff --git a/apps/masterbots.ai/lib/helpers/ai-helpers.ts b/apps/masterbots.ai/lib/helpers/ai-helpers.ts
diff --git a/apps/masterbots.ai/lib/hooks/use-mb-chat.tsx b/apps/masterbots.ai/lib/hooks/use-mb-chat.tsx
diff --git a/apps/masterbots.ai/lib/hooks/useSonner.tsx b/apps/masterbots.ai/lib/hooks/useSonner.tsx
diff --git a/apps/masterbots.ai/lib/utils.ts b/apps/masterbots.ai/lib/utils.ts
diff --git a/apps/masterbots.ai/services/hasura/hasura.service.type.ts b/apps/masterbots.ai/services/hasura/hasura.service.type.ts

Original file line number	Diff line number	Diff line change
`@@ -179,7 +179,7 @@ export async function processWithAiObject(`
`179`	`179`	`throw new Error('Failed to get response object')`
`180`	`180`	`}`
`181`	`181`
`182`		`- console.log('result::processwithAiObject -->', responseObject)`
	`182`	`+ console.log('result::processWithAiObject -->', responseObject)`
`183`	`183`	`return responseObject`
`184`	`184`	`} catch (error) {`
`185`	`185`	`console.error('Error in processWithAIObject: ', error)`