From b9b09a43c5a207a95d470be59ed97269cab6769f Mon Sep 17 00:00:00 2001
From: TopETH <supernathanliu@gmail.com>
Date: Mon, 13 May 2024 19:25:07 -0400
Subject: [PATCH] fix: thread auto scroll on open/close and open only one
 thread

---
 .../components/shared/thread-accordion.tsx    |  6 ++++--
 .../shared/thread-list-accordion.tsx          | 20 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/masterbots.ai/components/shared/thread-accordion.tsx b/apps/masterbots.ai/components/shared/thread-accordion.tsx
index e55d3b7f..148d2913 100644
--- a/apps/masterbots.ai/components/shared/thread-accordion.tsx
+++ b/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])
 
diff --git a/apps/masterbots.ai/components/shared/thread-list-accordion.tsx b/apps/masterbots.ai/components/shared/thread-list-accordion.tsx
index 82d19915..e730907c 100644
--- a/apps/masterbots.ai/components/shared/thread-list-accordion.tsx
+++ b/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 */}