fix: thread auto scroll on open/close and open only one thread

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

@@ -63,8 +63,10 @@ export function ThreadAccordion({
     // Cleanup function to remove the query parameter on unmount
     return () => {
       const url = new URL(window.location.href)
-      url.searchParams.delete('threadId')
-      window.history.pushState({}, '', url.pathname + url.search)
+      if (url.searchParams.get('threadId') === thread.threadId) {
+        url.searchParams.delete('threadId')
+        window.history.pushState({}, '', url.pathname + url.search)
+      }
     }
   }, [thread.threadId, pathname])
 

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

@@ -3,7 +3,7 @@
 import type { Thread } from '@repo/mb-genql'
 import { DialogProps } from '@radix-ui/react-dialog'
 import { useSetState } from 'react-use'
-import { cn } from '@/lib/utils'
+import { cn, sleep } from '@/lib/utils'
 import {
   Accordion,
   AccordionContent,
@@ -13,6 +13,8 @@ import {
 import { ThreadAccordion } from './thread-accordion'
 import { ThreadHeading } from './thread-heading'
 import { createMessagePairs } from '@/lib/threads'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useRef } from 'react'
 
 export function ThreadListAccordion({
   thread,
@@ -27,13 +29,29 @@ export function ThreadListAccordion({
     firstResponse:
       thread.messages.find(m => m.role === 'assistant')?.content || 'not found'
   })
+  const searchParams = useSearchParams();
+  const threadRef = useRef<HTMLDivElement>(null)
+  const handleThreadIdChange = async () => {
+    if (searchParams.get('threadId') === thread.threadId) {
+      await sleep(300) // animation time
+      threadRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    } else if (state.isOpen && searchParams.get('threadId')) {
+      setState({ isOpen: false })
+    }
+  }
+
+  useEffect(() => {
+    handleThreadIdChange()
+  }, [searchParams ])
 
   return (
     <Accordion
+      ref={threadRef}
       className="w-full"
       onValueChange={v => {
         setState({ isOpen: v[0] === 'pair-1' })
       }}
+      value={state.isOpen ? ['pair-1'] : []}
       type="multiple"
     >
       {/* Frist level question and excerpt visible  on lists */}