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
askman-dev · Dec 3, 2024 · ff2b298 · ff2b298
1 parent 39a910f
commit ff2b298
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 26 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@ public/manifest.json
 .aider*
 *.code-workspace
 .shire
+.vscode
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git 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
@@ -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
@@ -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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,3 +21,4 @@ public/manifest.json @@
     .aider*
     *.code-workspace
     .shire
+    .vscode