feat(masterbots.ai): create social network navigation alike on browse…

… threads on develop (#172) * devops: force deploy * devops: trigger automated build * devops: trigger automated build * devops: trigger automated build * devops: trigger automated build * devops: trigger automated build * devops: trigger automated build * devops: trigger automated build * impr(masterbots.ai): terms route + metadata impr (#158) * feat: update url when opening the thread on browse view * fix: rm shallow (this is not supported with app router) * fix: make browse view to the default page * chore: use toSlug from lib --------- Co-authored-by: Gabo Esquivel <[email protected]> Co-authored-by: Roberto Lucas <[email protected]>
bitcashorg · Apr 17, 2024 · da153e3 · da153e3
1 parent 43686ab
commit da153e3
Show file tree

Hide file tree

Showing 18 changed files with 57 additions and 15 deletions.
diff --git a/apps/masterbots.ai/app/(browse)/[category]/[threadId]/page.tsx b/apps/masterbots.ai/app/(browse)/[category]/[threadId]/page.tsx
@@ -0,0 +1,11 @@
+import { getThread } from '@/services/hasura'
+import { BrowseThread } from '@/components/browse-thread'
+import { ChatPageProps } from '@/app/chat/[chatbot]/[threadId]/page'
+
+export default async function ChatPage({ params }: ChatPageProps) {
+  const thread = await getThread({
+    threadId: params.threadId,
+    jwt: ''
+  })
+  return <BrowseThread thread={thread} />
+}
diff --git a/...terbots.ai/app/browse/[category]/page.tsx → ...rbots.ai/app/(browse)/[category]/page.tsx b/...terbots.ai/app/browse/[category]/page.tsx → ...rbots.ai/app/(browse)/[category]/page.tsx
diff --git a/apps/masterbots.ai/app/browse/layout.tsx → apps/masterbots.ai/app/(browse)/layout.tsx b/apps/masterbots.ai/app/browse/layout.tsx → apps/masterbots.ai/app/(browse)/layout.tsx
diff --git a/apps/masterbots.ai/app/browse/page.tsx → apps/masterbots.ai/app/(browse)/page.tsx b/apps/masterbots.ai/app/browse/page.tsx → apps/masterbots.ai/app/(browse)/page.tsx
@@ -6,7 +6,7 @@ import { getCategories } from '@/services/hasura'
 
 export const revalidate = 3600 // revalidate the data at most every hour
 
-export default async function BrowsePage() {
+export default async function HomePage() {
   const categories = await getCategories()
 
   return (

diff --git a/apps/masterbots.ai/app/b/[id]/[threadId]/page.tsx b/apps/masterbots.ai/app/b/[id]/[threadId]/page.tsx
@@ -1,6 +1,6 @@
 import { getThread } from '@/services/hasura'
 import { BrowseThread } from '@/components/browse-thread'
-import { ChatPageProps } from '@/app/(chat)/[chatbot]/[threadId]/page'
+import { ChatPageProps } from '@/app/chat/[chatbot]/[threadId]/page'
 import PageProps from 'next/types'
 
 export default async function ChatPage({ params }: ChatPageProps) {

diff --git a/.../app/(chat)/[chatbot]/[threadId]/page.tsx → ...ai/app/chat/[chatbot]/[threadId]/page.tsx b/.../app/(chat)/[chatbot]/[threadId]/page.tsx → ...ai/app/chat/[chatbot]/[threadId]/page.tsx
diff --git a/...sterbots.ai/app/(chat)/[chatbot]/page.tsx → ...masterbots.ai/app/chat/[chatbot]/page.tsx b/...sterbots.ai/app/(chat)/[chatbot]/page.tsx → ...masterbots.ai/app/chat/[chatbot]/page.tsx
diff --git a/apps/masterbots.ai/app/(chat)/layout.tsx → apps/masterbots.ai/app/chat/layout.tsx b/apps/masterbots.ai/app/(chat)/layout.tsx → apps/masterbots.ai/app/chat/layout.tsx
diff --git a/apps/masterbots.ai/app/(chat)/page.tsx → apps/masterbots.ai/app/chat/page.tsx b/apps/masterbots.ai/app/(chat)/page.tsx → apps/masterbots.ai/app/chat/page.tsx
@@ -9,7 +9,7 @@ export default async function IndexPage() {
   const session = await auth()
 
   // NOTE: maybe we should use same expiration time
-  const jwt = session!.user?.hasuraJwt
+  const jwt = session?.user?.hasuraJwt
   if (!jwt || isTokenExpired(jwt)) {
     redirect(`/sign-in`)
   }

diff --git a/apps/masterbots.ai/components/browse-category-button.tsx b/apps/masterbots.ai/components/browse-category-button.tsx
@@ -1,3 +1,4 @@
+import { toSlug } from '@/lib/utils'
 import { motion } from 'framer-motion'
 import { Category } from 'mb-genql'
 import Link from 'next/link'
@@ -17,8 +18,8 @@ export function BrowseCategoryButton({
     <Link
       href={
         category === 'all'
-          ? '/browse'
-          : `/browse/${category.name.toLowerCase().replace(/\s+/g, '_').replace(/\&/g, 'n')}`
+          ? '/'
+          : `/${toSlug(category.name)}`
       }
       shallow
       id={id}

diff --git a/apps/masterbots.ai/components/browse-category-tabs.tsx b/apps/masterbots.ai/components/browse-category-tabs.tsx
@@ -4,6 +4,7 @@ import { useBrowse } from '@/lib/hooks/use-browse'
 import { Category } from 'mb-genql'
 import { BrowseCategoryButton } from './browse-category-button'
 import { useEffect } from 'react'
+import { toSlug } from '@/lib/utils'
 
 export function BrowseCategoryTabs({
   categories,
@@ -36,7 +37,7 @@ export function BrowseCategoryTabs({
       setActiveTab(
         categories.filter(
           c =>
-            c.name.toLowerCase().replace(/\s+/g, '_').replace(/\&/g, 'n') ===
+            toSlug(c.name) ===
             initialCategory
         )[0]?.categoryId
       )

diff --git a/apps/masterbots.ai/components/browse-list-item.tsx b/apps/masterbots.ai/components/browse-list-item.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-import { cn, sleep } from '@/lib/utils'
+import { cn, sleep, toSlug } from '@/lib/utils'
 import { getMessages } from '@/services/hasura'
 import { Message, Thread } from 'mb-genql'
 import Link from 'next/link'
@@ -10,6 +10,8 @@ import { BrowseChatMessageList } from './browse-chat-message-list'
 import { ChatAccordion } from './chat-accordion'
 import { ShortMessage } from './short-message'
 import { IconOpenAI, IconUser } from './ui/icons'
+import { useBrowse } from '@/lib/hooks/use-browse'
+let initialUrl: string | null = null
 
 export default function BrowseListItem({
   thread,
@@ -32,6 +34,17 @@ export default function BrowseListItem({
   // ! Move to custom hook and add it to the context useThread + useProvider @bran18
   const [isAccordionOpen, setIsAccordionOpen] = React.useState(false)
 
+  const { tab } = useBrowse()
+
+  React.useEffect(() => {
+    if (initialUrl) return
+    initialUrl = location.href
+  })
+
+  React.useEffect(() => {
+    initialUrl = location.href
+  }, [tab])
+
   React.useEffect(() => {
     if (!threadRef.current) return
     const observer = new IntersectionObserver(([entry]) => {
@@ -59,8 +72,15 @@ export default function BrowseListItem({
 
   const handleAccordionToggle = async (isOpen: boolean) => {
     if (isOpen) {
+      window.history.pushState(
+        {},
+        '',
+        `/${toSlug(thread.chatbot.categories[0].category.name)}/${thread.threadId}`
+      )
       setMessages(_prev => [])
       await fetchMessages()
+    } else {
+      window.history.pushState({}, '', initialUrl)
     }
     // When toggling accordion, it should scroll
     // Use optional chaining to ensure scrollIntoView is called only if current is not null

diff --git a/apps/masterbots.ai/components/header.tsx b/apps/masterbots.ai/components/header.tsx
@@ -17,8 +17,8 @@ export async function Header() {
         <SidebarToggle />
         <HeaderLink href="/" text="Masterbots" />
         <IconSeparator className="size-6 text-muted-foreground/50" />
-        <HeaderLink href="/" text="Chat" />
-        <HeaderLink href="/browse" text="Browse" />
+        <HeaderLink href="/chat" text="Chat" />
+        <HeaderLink href="/" text="Browse" />
       </div>
       <div className="flex items-center justify-end space-x-2">
         <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>

diff --git a/apps/masterbots.ai/components/login-button.tsx b/apps/masterbots.ai/components/login-button.tsx
@@ -25,7 +25,7 @@ export function LoginButton({
       onClick={() => {
         setIsLoading(true)
         // next-auth signIn() function doesn't work yet at Edge Runtime due to usage of BroadcastChannel
-        signIn('google', { callbackUrl: '/browse' })
+        signIn('google', { callbackUrl: '/' })
       }}
       disabled={isLoading}
       className={cn(className)}

diff --git a/apps/masterbots.ai/components/new-chat.tsx b/apps/masterbots.ai/components/new-chat.tsx
@@ -55,7 +55,7 @@ export default function NewChat({
     })
 
     router.push(`/${chatbot.name.trim().toLowerCase()}/${threadId}`, {
-      shallow: true,
+      // shallow: true,
       scroll: false
     })
     router.refresh()

diff --git a/apps/masterbots.ai/components/sidebar-link.tsx b/apps/masterbots.ai/components/sidebar-link.tsx
@@ -118,7 +118,7 @@ export default function SidebarLink({ category }: { category: Category }) {
         <Link
           // TODO: Improve routing for user sharing
           // href={`/${category.name.toLowerCase()}`}
-          href="/"
+          href="/chat"
           className={cn(
             'flex items-center pr-5 py-3 cursor-pointer relative origin-left transition-all ease-in-out duration-300',
             isChatbotOfThisCategory ? 'text-xs opacity-50' : 'grow pl-5'
@@ -168,7 +168,7 @@ export default function SidebarLink({ category }: { category: Category }) {
       {
         <motion.div
           className="overflow-hidden
-          ml-5 flex-col border-l-[1px] dark:border-mirage border-gray-300"
+          ml-5 flex-col border-l-DEFAULT dark:border-mirage border-gray-300"
           initial={{ height: 0 }}
           animate={{
             height:
@@ -242,7 +242,7 @@ function ChatbotComponent({
   return (
     <Link
       ref={chatbotRef}
-      href={`/${chatbot.name.toLowerCase()}`}
+      href={`/chat/${chatbot.name.toLowerCase()}`}
       className={cn(
         'flex items-center px-[20px] py-[12px] dark:hover:bg-mirage hover:bg-gray-300',
         chatbot.chatbotId === activeChatbot?.chatbotId &&

diff --git a/apps/masterbots.ai/lib/utils.ts b/apps/masterbots.ai/lib/utils.ts
@@ -179,3 +179,12 @@ export const scrollToBottomOfElement = (element?: HTMLElement) => {
 export async function sleep(time: number) {
   return new Promise(resolve => setTimeout(resolve, time))
 }
+
+
+// Function to convert a name into a slug
+export const toSlug = (name: string): string => {
+  return name
+    .toLowerCase()
+    .replace(/&/g, 'n')
+    .replace(/\s+/g, '_')
+}
diff --git a/apps/masterbots.ai/middleware.ts b/apps/masterbots.ai/middleware.ts
@@ -2,6 +2,6 @@ export { auth as middleware } from './auth'
 
 export const config = {
   matcher: [
-    '/((?!api|browse|b|u|terms|images|_next/static|_next/image|favicon.ico).*)'
+    '/((?!|^\/$|api|b|u|terms|images|_next/static|_next/image|favicon.ico).*)'
   ]
 }