feat: create social network navigation alike on browse threads

apps/masterbots.ai/components/layout/user-menu.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import Image from 'next/image'
+import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -16,8 +17,16 @@ import { useGlobalStore } from '@/hooks/use-global-store'
 export function UserMenu() {
   const supabase = useSupabaseClient()
   const { user } = useGlobalStore()
+  const router = useRouter()
 
-  const signout = () => supabase.auth.signOut()
+  const signout = async () => {
+    const { error } = await supabase.auth.signOut()
+    if (error) {
+      console.error('ERROR:', error)
+    }
+    router.push('/')
+    router.refresh()
+  }
 
   return (
     <div className="flex items-center justify-between">

apps/masterbots.ai/components/shared/thread-accordion.tsx

@@ -25,6 +25,7 @@ export function ThreadAccordion({
   chat = false,
   showHeading = true
 }: ThreadAccordionProps) {
+
   // initalMessages is coming from server ssr on load. the rest of messages on demand on mount
   const { data: pairs, error } = useQuery({
     queryKey: [`messages-${thread.threadId}`],
@@ -34,27 +35,6 @@ export function ThreadAccordion({
     enabled: clientFetch
   })
 
-  // update url when dialog opens and closes
-  useEffect(() => {
-    const initialUrl = location.href
-    const dir = chat
-      ? 'c/' +
-        thread.chatbot.name
-          .toLowerCase()
-          .replaceAll(' ', '_')
-          .replaceAll('&', '_')
-      : thread.chatbot.categories[0].category.name
-          .toLowerCase()
-          .replaceAll(' ', '_')
-          .replaceAll('&', '_')
-    const threadUrl = `/${dir}/${thread.threadId}`
-    console.log(`Updating URL to ${threadUrl}, initialUrl was ${initialUrl}`)
-
-    window.history.pushState({}, '', threadUrl)
-    return () => {
-      window.history.pushState({}, '', initialUrl)
-    }
-  })
 
   if (error) return <div>There was an error loading thread messages</div>
 
@@ -66,26 +46,26 @@ export function ThreadAccordion({
   return (
     <Accordion
       type="multiple"
-      className="w-full"
+      className="w-full flex flex-col gap-3"
       defaultValue={['pair-0', 'pair-1', 'pair-2']}
     >
       {pairs.map((p, key) => {
         return (
           <AccordionItem value={`pair-${key}`} key={key}>
-            {showHeading ? (
+            { key ? (
               <AccordionTrigger className={cn('bg-mirage')}>
-                {key ? (
                   <div className="pl-12">{p.userMessage.content}</div>
-                ) : (
-                  <ThreadHeading
-                    thread={thread}
-                    question={p.userMessage.content}
-                    copy={true}
-                    chat={chat}
-                  />
-                )}
               </AccordionTrigger>
-            ) : null}
+            ) : showHeading && key === 0 ? 
+              <AccordionTrigger className={cn('bg-mirage')}>
+                <ThreadHeading
+                  thread={thread}
+                  question={p.userMessage.content}
+                  copy={true}
+                  chat={chat}
+                />
+                </AccordionTrigger>
+            : null}
             <AccordionContent aria-expanded={true}>
               <div className="px-7">
                 {p.chatGptMessage.map((message, index) => (

apps/masterbots.ai/components/shared/thread-double-accordion.tsx

@@ -12,26 +12,73 @@ import {
   AccordionTrigger
 } from '@/components/ui/accordion'
 import { useSetState } from 'react-use'
+import { useEffect, useRef } from 'react'
+import { useThread } from '@/hooks/use-thread'
+let initialUrl = null
 
 export function ThreadDoubleAccordion({
   thread,
   chat = false
 }: ThreadDoubleAccordionProps) {
+  const {activeThread, setActiveThread} = useThread()
   const [state, setState] = useSetState({
     isOpen: false,
     firstQuestion:
       thread.messages.find(m => m.role === 'user')?.content || 'not found',
     firstResponse:
-      thread.messages.find(m => m.role === 'assistant')?.content || 'not found'
+      thread.messages.find(m => m.role === 'assistant')?.content || 'not found',
+      value: []
   })
 
+  useEffect(() => {
+    if (initialUrl) return
+    initialUrl = location.href
+  })
+
+  useEffect(() => {
+    if (activeThread === thread || !state.isOpen)  return
+    setState({isOpen: false, value: []})
+  }, [activeThread])
+
+  useEffect(() => {
+    if (activeThread !== thread || state.isOpen) return
+    setState({isOpen: true, value: [`pair-${thread.threadId}`]})
+  }, [])
+
+  const toggleAccordion = (v: string[]) => {
+    const isOpen = Boolean(v[0] === `pair-${thread.threadId}`)
+    setState({ isOpen, value: v })
+    if (isOpen) {
+      if (!activeThread) initialUrl = location.href
+      setActiveThread(thread)
+      const dir = chat
+        ? 'c/' +
+          thread.chatbot.name
+            .toLowerCase()
+            .replaceAll(' ', '_')
+            .replaceAll('&', 'n')
+        : thread.chatbot.categories[0].category.name
+            .toLowerCase()
+            .replaceAll(' ', '_')
+            .replaceAll('&', 'n')
+      const threadUrl = `/${dir}/${thread.threadId}`
+      console.log(`Updating URL to ${threadUrl}, initialUrl was ${initialUrl}`)
+
+      window.history.pushState({}, '', threadUrl)
+    } else {
+      setActiveThread(null) 
+      window.history.pushState({}, '', initialUrl)
+    }
+  }
+
   return (
     <Accordion
       type="multiple"
       className="w-full"
-      onValueChange={v => setState({ isOpen: v[0] === 'pair-1' })}
+      value={state.value}
+      onValueChange={v => toggleAccordion(v)}
     >
-      <AccordionItem value="pair-1">
+      <AccordionItem value={`pair-${thread.threadId}`}>
         <AccordionTrigger
           className={cn('hover:bg-mirage px-5', state.isOpen && 'bg-mirage')}
         >

apps/masterbots.ai/lib/url.ts

@@ -9,8 +9,8 @@ export const SlugSchema: ZodSchema<string> = z.string()
 export const toSlug = (username: string, separator: string): string => {
   return username
     .toLowerCase()
-    .replace(/&/g, '_')
-    .replace(/ & /g, '_')
+    .replace(/&/g, 'n')
+    .replace(/ & /g, 'n')
     .replace(/[^a-z0-9_]/g, separator)
 }
 

packages/mb-lib/src/text/text.lib.ts

@@ -10,9 +10,9 @@ export function toSlug(str: string): string {
     return "";
   }
   s = s.toLowerCase().trim();
-  s = s.replace(/ & /g, " and ");
-  s = s.replace(/[ ]+/g, "-");
-  s = s.replace(/[-]+/g, "-");
-  s = s.replace(/[^a-z0-9-]+/g, "");
+  s = s.replace(/\&/g, "n");
+  s = s.replace(/[ ]+/g, "_");
+  s = s.replace(/[-]+/g, "_");
+  s = s.replace(/[^a-z0-9_]+/g, "");
   return s;
 }