fix: thread navigation

apps/masterbots.ai/app/(browse)/[category]/page.tsx

@@ -3,6 +3,7 @@ import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
 import { SearchInput } from '@/components/shared/search-input'
 import { getBrowseThreads, getCategories } from '@/services/hasura'
 import { decodeQuery, toSlug } from '@/lib/url'
+import { permanentRedirect } from 'next/navigation'
 
 // TODO: dicuss caching
 // export const revalidate = 3600 // revalidate the data at most every hour
@@ -11,6 +12,8 @@ export default async function CategoryPage({
   params,
   searchParams
 }: CategoryPageProps) {
+  if (searchParams.threadId)
+    permanentRedirect(`${params.category}/${searchParams.threadId}`)
   const categories = await getCategories()
   console.log(params.category)
   const categoryId = categories.find(
@@ -49,5 +52,10 @@ export default async function CategoryPage({
 
 interface CategoryPageProps {
   params: { category: string }
-  searchParams?: { query: string; page: string; limit: string }
+  searchParams?: {
+    query: string
+    page: string
+    limit: string
+    threadId: string
+  }
 }

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Thread } from '@repo/mb-genql'
 import { getMessagePairs } from '@/services/hasura'
@@ -15,8 +15,9 @@ import { cn } from '@/lib/utils'
 import { toSlug } from '@/lib/url'
 import { ThreadHeading } from './thread-heading'
 import { BrowseChatMessage } from './thread-message'
-import { usePathname } from 'next/navigation'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { clone } from 'lodash'
+import { threadId } from 'worker_threads'
 
 export function ThreadAccordion({
   thread,
@@ -48,29 +49,23 @@ export function ThreadAccordion({
   // use cases: when using ThreadDialog and DoubleThreadAccordion
   // we want this logic here on central place
   useEffect(() => {
-    // clone pathname instead of ref to keep initialValue
-    const initialPathname = clone(pathname)
-    // base path changes based on chat prop
-    // if chat true redirects to /c/{thredId} for chatting experience
-    // else defaults to public url /{category}/{threadId}
-    console.log(toSlug(thread.chatbot.categories[0]?.category?.name))
-    const dir = chat
-      ? `/c/${toSlug(thread.chatbot.name)}`
-      : `/${toSlug(thread.chatbot.categories[0]?.category?.name)}`
-    const threadUrl = `${dir}/${thread.threadId}`
-    console.log({ threadUrl, initialPathname })
-    // not necessary to update if already the same a
-    // eg. in thread landing pages /{category}/{threadId}
-    if (threadUrl === initialPathname) return
-    console.log(
-      `Updating URL to ${threadUrl}, initialUrl was ${initialPathname}`
-    )
+    const url = new URL(window.location.href)
+    url.searchParams.set('threadId', thread.threadId)
+    window.history.pushState({}, '', url.href)
 
-    // window.history.pushState({}, '', threadUrl)
+    // hack to delete threadId after initial render
+    // TODO: remove on next middleware
+    if (pathname.includes(thread.threadId)) {
+      url.searchParams.delete('threadId')
+      window.history.pushState({}, '', url.pathname + url.search)
+    }
+    // Cleanup function to remove the query parameter on unmount
     return () => {
-      // window.history.pushState({}, '', initialPathname)
+      const url = new URL(window.location.href)
+      url.searchParams.delete('threadId')
+      window.history.pushState({}, '', url.pathname + url.search)
     }
-  })
+  }, [thread.threadId, pathname])
 
   if (error) return <div>There was an error loading thread messages</div>
 

apps/masterbots.ai/next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 
-const path = require('path')
+const path = require('node:path')
 
 module.exports = {
   images: {
@@ -27,22 +27,22 @@ module.exports = {
         protocol: 'https',
         hostname: 'api.dicebear.com',
         port: '',
-        pathname: '**',
+        pathname: '**'
       }
     ]
   },
   async headers() {
     return [
       {
-        source: "/api/dicebear", // Adjust the source path based on your API route
+        source: '/api/dicebear', // Adjust the source path based on your API route
         headers: [
           {
-            key: "Content-Type",
-            value: "image/svg+xml",
-          },
-        ],
-      },
-    ];
+            key: 'Content-Type',
+            value: 'image/svg+xml'
+          }
+        ]
+      }
+    ]
   },
   experimental: {
     ...(process.env.NODE_ENV === 'development'