feat: service list popup box supports keyboard-only operation (#359)

ayangweb · web-flow · commit 0a7b44566149 · 2025-04-14T15:01:58.000+08:00
* feat: service list popup box supports keyboard-only operation

* docs: update changelog
diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
@@ -18,6 +18,7 @@ Information about release notes of Coco Server is provided here.
 - feat: add font icon for search list #342
 - feat: add a border to the main window in Windows 10 #343
 - feat: mobile terminal adaptation about style #348
+- feat: service list popup box supports keyboard-only operation #359
 
 ### Bug fix
 
diff --git a/src/components/Assistant/ChatHeader.tsx b/src/components/Assistant/ChatHeader.tsx
@@ -32,6 +32,7 @@ import { useConnectStore } from "@/stores/connectStore";
 import platformAdapter from "@/utils/platformAdapter";
 import VisibleKey from "../Common/VisibleKey";
 import { useShortcutsStore } from "@/stores/shortcutsStore";
+import { useKeyPress } from "ahooks";
 
 interface ChatHeaderProps {
   onCreateNewChat: () => void;
@@ -85,7 +86,8 @@ export function ChatHeader({
 
   const fetchServers = useCallback(
     async (resetSelection: boolean) => {
-      platformAdapter.commands("list_coco_servers")
+      platformAdapter
+        .commands("list_coco_servers")
         .then((res: any) => {
           const enabledServers = (res as IServer[]).filter(
             (server) => server.enabled !== false
@@ -164,6 +166,33 @@ export function ChatHeader({
     platformAdapter.emitEvent("open_settings", "connect");
   };
 
+  useKeyPress(["uparrow", "downarrow"], (_, key) => {
+    const isOpen = serverListButtonRef.current?.dataset["open"] != null;
+    const length = serverList.length;
+
+    if (!isOpen || length <= 1) return;
+
+    const currentIndex = serverList.findIndex((server) => {
+      return server.id === currentService?.id;
+    });
+
+    let nextIndex = currentIndex;
+
+    if (key === "uparrow") {
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : length - 1;
+    } else if (key === "downarrow") {
+      nextIndex = currentIndex < serverList.length - 1 ? currentIndex + 1 : 0;
+    }
+
+    switchServer(serverList[nextIndex]);
+  });
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    await fetchServers(false);
+    setTimeout(() => setIsRefreshing(false), 1000);
+  };
+
   return (
     <header
       className="flex items-center justify-between py-2 px-3"
@@ -280,22 +309,22 @@ export function ChatHeader({
                       onClick={openSettings}
                       className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400"
                     >
-                      <Settings className="h-4 w-4 text-[#0287FF]" />
+                      <VisibleKey shortcut=",">
+                        <Settings className="h-4 w-4 text-[#0287FF]" />
+                      </VisibleKey>
                     </button>
                     <button
-                      onClick={async () => {
-                        setIsRefreshing(true);
-                        await fetchServers(false);
-                        setTimeout(() => setIsRefreshing(false), 1000);
-                      }}
+                      onClick={handleRefresh}
                       className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400"
                       disabled={isRefreshing}
                     >
-                      <RefreshCw
-                        className={`h-4 w-4 text-[#0287FF] transition-transform duration-1000 ${
-                          isRefreshing ? "animate-spin" : ""
-                        }`}
-                      />
+                      <VisibleKey shortcut="R" onKeypress={handleRefresh}>
+                        <RefreshCw
+                          className={`h-4 w-4 text-[#0287FF] transition-transform duration-1000 ${
+                            isRefreshing ? "animate-spin" : ""
+                          }`}
+                        />
+                      </VisibleKey>
                     </button>
                   </div>
                 </div>
diff --git a/src/components/Common/VisibleKey.tsx b/src/components/Common/VisibleKey.tsx
@@ -5,7 +5,7 @@ import { FC, ReactNode } from "react";
 interface VisibleKeyProps {
   shortcut: string;
   children: ReactNode;
-  onKeypress: () => void;
+  onKeypress?: () => void;
 }
 
 const VisibleKey: FC<VisibleKeyProps> = (props) => {
@@ -18,7 +18,9 @@ const VisibleKey: FC<VisibleKeyProps> = (props) => {
     return state.modifierKeyPressed;
   });
 
-  useKeyPress(`${modifierKey}.${shortcut}`, onKeypress);
+  useKeyPress(`${modifierKey}.${shortcut}`, () => {
+    onKeypress?.();
+  });
 
   return modifierKeyPressed ? (
     <div className="size-4 flex items-center justify-center font-normal text-xs text-[#333] leading-[14px] bg-[#ccc] dark:bg-[#6B6B6B] rounded-md shadow-[-6px_0px_6px_2px_#fff] dark:shadow-[-6px_0px_6px_2px_#000]">
