From ff2b29899280edb97ef30948738e3bcda445511b Mon Sep 17 00:00:00 2001
From: Walker <chessjoe@outlook.com>
Date: Sun, 17 Nov 2024 01:17:39 +0800
Subject: [PATCH] fix(chat): resolve void type error and improve dropdown
 behavior #127

- Fix TypeScript void error by separating setIsOpen and clearTimeout operations
- Refactor dropdown mouse event handlers in both ToolDropdown and ModelDropdown
- Add clearTimeout to prevent race conditions in dropdown closing
- Standardize dropdown components using MenuItems and MenuItem
---
 .gitignore                           |  1 +
 .vscode/settings.json                |  6 -----
 eslint.config.js                     |  1 +
 src/components/ask-tooldropdown.tsx  | 30 ++++++++++++++++---------
 src/components/ask/ModelDropDown.tsx | 33 +++++++++++++++++++---------
 5 files changed, 45 insertions(+), 26 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.gitignore b/.gitignore
index 8c9ab5c..2da1096 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ public/manifest.json
 .aider*
 *.code-workspace
 .shire
+.vscode
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 24c9997..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "Codegeex.RepoIndex": true,
-    "Codegeex.CompletionDelay": 1,
-    "Codegeex.GenerationPreference": "line by line",
-    "Codegeex.SidebarUI.LanguagePreference": "中文"
-}
\ No newline at end of file
diff --git a/eslint.config.js b/eslint.config.js
index bae922d..8c4adaa 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -36,6 +36,7 @@ export default [
         SVGSVGElement: 'readonly',
         DOMRect: 'readonly',
         requestAnimationFrame: 'readonly',
+        clearTimeout: 'readonly',
         global: 'readonly', // for unit test
         __dirname: 'readonly',
       },
diff --git a/src/components/ask-tooldropdown.tsx b/src/components/ask-tooldropdown.tsx
index c3bfca8..407643b 100644
--- a/src/components/ask-tooldropdown.tsx
+++ b/src/components/ask-tooldropdown.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import classNames from 'classnames';
 import defaultTools from '@assets/conf/tools.toml';
@@ -132,6 +132,7 @@ export default function ToolDropdown({
     }
   };
   let isCommandPressed = false;
+  let closeDropdownTimer: any;
   return (
     <div
       className={classNames(`${className}`)}
@@ -140,13 +141,17 @@ export default function ToolDropdown({
       aria-haspopup="true"
       aria-expanded={isOpened}>
       <Menu as="div" className="relative" onKeyDown={handleKeyDown}>
-        <Menu.Button
+        <MenuButton
           ref={buttonRef}
           className="inline-flex w-full justify-center rounded-md text-sm text-gray-600 bg-white px-2 py-1 text-sm font-medium text-black hover:bg-black/10 focus:outline-none min-w-0"
           title="Use framework"
-          onClick={_e => {
-            setIsOpen(!isOpened);
+          onMouseEnter={_e => {
+            setIsOpen(true);
             // e.stopPropagation();
+          }}
+          onMouseLeave={_e => {
+            // Add a small delay before closing to allow moving to menu items
+            closeDropdownTimer = setTimeout(() => setIsOpen(false), 100);
           }}>
           {({ active }) => {
             setIsOpen(active);
@@ -157,7 +162,7 @@ export default function ToolDropdown({
               </>
             );
           }}
-        </Menu.Button>
+        </MenuButton>
         <Transition
           // show={isOpened}
           as={React.Fragment}
@@ -167,12 +172,17 @@ export default function ToolDropdown({
           leave="transition ease-in duration-75"
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95">
-          <Menu.Items
+          <MenuItems
             static
-            className="absolute left-0 mt-2 min-w-[10rem] origin-top-right divide-y divide-gray-100 rounded bg-white shadow-lg ring-1 ring-black/5 focus:outline-none z-10">
+            className="absolute left-0 mt-0 min-w-[10rem] origin-top-right divide-y divide-gray-100 rounded bg-white shadow-lg ring-1 ring-black/5 focus:outline-none z-10"
+            onMouseEnter={() => {
+              clearTimeout(closeDropdownTimer);
+              setIsOpen(true);
+            }}
+            onMouseLeave={() => setIsOpen(false)}>
             <div className="px-1 py-1">
               {allTools.map((tool, index) => (
-                <Menu.Item key={tool.name}>
+                <MenuItem key={tool.name}>
                   {({ active }) => (
                     <button
                       ref={el => {
@@ -217,12 +227,12 @@ export default function ToolDropdown({
                       ) : null}
                     </button>
                   )}
-                </Menu.Item>
+                </MenuItem>
               ))}
 
               {showPreview && <ToolPreview content={previewContent} x={previewPos.x} y={previewPos.y} />}
             </div>
-          </Menu.Items>
+          </MenuItems>
         </Transition>
       </Menu>
     </div>
diff --git a/src/components/ask/ModelDropDown.tsx b/src/components/ask/ModelDropDown.tsx
index 0bbba0a..d3b0dde 100644
--- a/src/components/ask/ModelDropDown.tsx
+++ b/src/components/ask/ModelDropDown.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment, useRef, useEffect, useState } from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import classNames from 'classnames';
 import configStorage from '@src/shared/storages/configStorage';
@@ -73,7 +73,7 @@ export default function ModelDropdown({
 
     fetchModels();
   }, []);
-
+  let closeDropdownTimer: any;
   return (
     <button
       className={classNames(`${className}`)}
@@ -82,10 +82,18 @@ export default function ModelDropdown({
       aria-expanded={isOpened}
       type="button">
       <Menu as="div" className={classNames('relative inline-block text-left', className)}>
-        <Menu.Button
+        <MenuButton
           ref={buttonRef}
           className="inline-flex w-full justify-center rounded-md text-gray-600 bg-white px-2 py-1 text-sm font-medium text-black hover:bg-black/10 focus:outline-none min-w-0"
-          onClick={() => setIsOpen(!isOpened)}>
+          onClick={() => setIsOpen(!isOpened)}
+          onMouseEnter={_e => {
+            setIsOpen(true);
+            // e.stopPropagation();
+          }}
+          onMouseLeave={_e => {
+            // Add a small delay before closing to allow moving to menu items
+            closeDropdownTimer = setTimeout(() => setIsOpen(false), 100);
+          }}>
           {({ active }) => {
             setIsOpen(active);
             return (
@@ -100,7 +108,7 @@ export default function ModelDropdown({
               </>
             );
           }}
-        </Menu.Button>
+        </MenuButton>
 
         <Transition
           as={Fragment}
@@ -110,12 +118,17 @@ export default function ModelDropdown({
           leave="transition ease-in duration-75"
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95">
-          <Menu.Items
+          <MenuItems
             static
-            className="absolute left-0 z-10 mt-2 min-w-[10rem] origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            className="absolute left-0 z-10 mt-0 min-w-[10rem] origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+            onMouseEnter={() => {
+              clearTimeout(closeDropdownTimer);
+              setIsOpen(true);
+            }}
+            onMouseLeave={() => setIsOpen(false)}>
             <div className="py-1">
               {models.map((model, index) => (
-                <Menu.Item key={model.id}>
+                <MenuItem key={model.id}>
                   {({ active }) => (
                     <button
                       ref={el => (menuItemsRef.current[index] = el)}
@@ -141,10 +154,10 @@ export default function ModelDropdown({
                       <span className="whitespace-nowrap">{model.name}</span>
                     </button>
                   )}
-                </Menu.Item>
+                </MenuItem>
               ))}
             </div>
-          </Menu.Items>
+          </MenuItems>
         </Transition>
       </Menu>
     </button>