From afc2e2f5958a217c38a0cb1fc1f57ab0b1070029 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sun, 19 Jan 2025 15:47:19 +0800
Subject: [PATCH] feat: auto-scroll to selected menu item on model open

---
 .../src/components/Popups/SelectModelPopup.tsx     | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/components/Popups/SelectModelPopup.tsx b/src/renderer/src/components/Popups/SelectModelPopup.tsx
index 6f249692..7fbe9466 100644
--- a/src/renderer/src/components/Popups/SelectModelPopup.tsx
+++ b/src/renderer/src/components/Popups/SelectModelPopup.tsx
@@ -32,6 +32,7 @@ const PopupContainer: React.FC<PopupContainerProps> = ({ model, resolve }) => {
   const inputRef = useRef<InputRef>(null)
   const { providers } = useProviders()
   const [pinnedModels, setPinnedModels] = useState<string[]>([])
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     const loadPinnedModels = async () => {
@@ -162,6 +163,17 @@ const PopupContainer: React.FC<PopupContainerProps> = ({ model, resolve }) => {
     open && setTimeout(() => inputRef.current?.focus(), 0)
   }, [open])
 
+  useEffect(() => {
+    if (open && model) {
+      setTimeout(() => {
+        const selectedElement = document.querySelector('.ant-menu-item-selected')
+        if (selectedElement && scrollContainerRef.current) {
+          selectedElement.scrollIntoView({ block: 'center', behavior: 'auto' })
+        }
+      }, 100) // Small delay to ensure menu is rendered
+    }
+  }, [open, model])
+
   return (
     <Modal
       centered
@@ -199,7 +211,7 @@ const PopupContainer: React.FC<PopupContainerProps> = ({ model, resolve }) => {
         />
       </HStack>
       <Divider style={{ margin: 0, borderBlockStartWidth: 0.5 }} />
-      <Scrollbar style={{ height: '50vh' }}>
+      <Scrollbar style={{ height: '50vh' }} ref={scrollContainerRef}>
         <Container>
           {filteredItems.length > 0 ? (
             <StyledMenu