diff --git a/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx b/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx index 0358ca53..335f82b3 100644 --- a/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx +++ b/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx @@ -167,12 +167,35 @@ const MentionModelsButton: FC = ({ mentionModels, onMentionModel: onSelec loadPinnedModels() }, []) + useEffect(() => { + if (selectedIndex >= 0 && menuRef.current) { + const menuElement = menuRef.current + const selectedElement = menuElement.querySelector('.ant-dropdown-menu-item-selected') + + if (selectedElement) { + const menuRect = menuElement.getBoundingClientRect() + const selectedRect = selectedElement.getBoundingClientRect() + + if (selectedRect.bottom > menuRect.bottom) { + selectedElement.scrollIntoView({ block: 'nearest', behavior: 'auto' }) + } else if (selectedRect.top < menuRect.top) { + selectedElement.scrollIntoView({ block: 'nearest', behavior: 'auto' }) + } + } + } + }, [selectedIndex]) + useEffect(() => { const showModelSelector = () => { dropdownRef.current?.click() setIsOpen(true) setSelectedIndex(0) setSearchText('') + setTimeout(() => { + if (menuRef.current) { + menuRef.current.scrollTop = 0 + } + }, 0) } const handleKeyDown = (e: KeyboardEvent) => { @@ -293,20 +316,25 @@ const DropdownMenuStyle = createGlobalStyle` overflow-x: hidden; padding: 4px 0; margin-bottom: 40px; + position: relative; &::-webkit-scrollbar { width: 6px; height: 6px; } - &::-webkit-scrollbar-thumb { - background: var(--color-scrollbar); - border-radius: 3px; - } - &::-webkit-scrollbar-track { background: transparent; } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + background: var(--color-scrollbar-thumb); + + &:hover { + background: var(--color-scrollbar-thumb-hover); + } + } } .ant-dropdown-menu-item-group {