feat: right-click menu search supports shortcuts (#441)

ayangweb · web-flow · commit 9078c99e2566 · 2025-04-25T15:06:10.000+08:00
diff --git a/src/components/Assistant/AssistantList.tsx b/src/components/Assistant/AssistantList.tsx
@@ -18,7 +18,12 @@ import { useChatStore } from "@/stores/chatStore";
 import { useShortcutsStore } from "@/stores/shortcutsStore";
 import { Post } from "@/api/axiosRequest";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import { useDebounce, useKeyPress, useMount, usePagination } from "ahooks";
+import {
+  useAsyncEffect,
+  useDebounce,
+  useKeyPress,
+  usePagination,
+} from "ahooks";
 import clsx from "clsx";
 import NoDataImage from "../Common/NoDataImage";
 import PopoverInput from "../Common/PopoverInput";
@@ -144,11 +149,11 @@ export function AssistantList({ assistantIDs = [] }: AssistantListProps) {
     }
   };
 
-  useMount(async () => {
+  useAsyncEffect(async () => {
     const data = await fetchAssistant({ current: 1, pageSize: 1000 });
 
     setAssistantList(data.list);
-  });
+  }, [currentServiceId]);
 
   const { pagination, runAsync } = usePagination(fetchAssistant, {
     defaultPageSize: 5,
diff --git a/src/components/Search/ContextMenu.tsx b/src/components/Search/ContextMenu.tsx
@@ -12,6 +12,7 @@ import { isMac } from "@/utils/platform";
 import { CONTEXT_MENU_PANEL_ID } from "@/constants";
 import { useShortcutsStore } from "@/stores/shortcutsStore";
 import { Input } from "@headlessui/react";
+import VisibleKey from "../Common/VisibleKey";
 
 interface State {
   activeMenuIndex: number;
@@ -38,6 +39,7 @@ const ContextMenu = ({ hideCoco }: ContextMenuProps) => {
     return state.selectedSearchContent;
   });
   const [searchMenus, setSearchMenus] = useState<typeof menus>([]);
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   const title = useCreation(() => {
     if (selectedSearchContent?.id === "Calculator") {
@@ -251,20 +253,29 @@ const ContextMenu = ({ hideCoco }: ContextMenuProps) => {
 
         <div className="-mx-3 p-2 border-t border-[#E6E6E6] dark:border-[#262626]">
           {visibleContextMenu && (
-            <Input
-              autoFocus
-              placeholder={t("search.contextMenu.search")}
-              className="w-full bg-transparent"
-              onChange={(event) => {
-                const value = event.target.value;
-
-                const searchMenus = menus.filter((item) => {
-                  return lowerCase(item.name).includes(lowerCase(value));
-                });
-
-                setSearchMenus(searchMenus);
+            <VisibleKey
+              shortcut="F"
+              shortcutClassName="left-3"
+              onKeyPress={() => {
+                searchInputRef.current?.focus();
               }}
-            />
+            >
+              <Input
+                ref={searchInputRef}
+                autoFocus
+                placeholder={t("search.contextMenu.search")}
+                className="w-full bg-transparent"
+                onChange={(event) => {
+                  const value = event.target.value;
+
+                  const searchMenus = menus.filter((item) => {
+                    return lowerCase(item.name).includes(lowerCase(value));
+                  });
+
+                  setSearchMenus(searchMenus);
+                }}
+              />
+            </VisibleKey>
           )}
         </div>
       </div>
