feat: ai assistant supports shortcuts (#414)

ayangweb · web-flow · commit 88955e0b9531 · 2025-04-22T18:36:59.000+08:00
diff --git a/src/components/Assistant/AssistantList.tsx b/src/components/Assistant/AssistantList.tsx
@@ -9,6 +9,8 @@ import { useClickAway } from "@/hooks/useClickAway";
 import VisibleKey from "@/components/Common/VisibleKey";
 import { useConnectStore } from "@/stores/connectStore";
 import FontIcon from "@/components/Common/Icons/FontIcon";
+import { AI_ASSISTANT_PANEL_ID } from "@/constants";
+import { useShortcutsStore } from "@/stores/shortcutsStore";
 
 interface AssistantListProps {
   showChatHistory?: boolean;
@@ -19,17 +21,20 @@ export function AssistantList({ showChatHistory = true }: AssistantListProps) {
   const isTauri = useAppStore((state) => state.isTauri);
   const currentService = useConnectStore((state) => state.currentService);
   const currentAssistant = useConnectStore((state) => state.currentAssistant);
-  const setCurrentAssistant = useConnectStore((state) => state.setCurrentAssistant);
+  const setCurrentAssistant = useConnectStore(
+    (state) => state.setCurrentAssistant
+  );
 
   const [isOpen, setIsOpen] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
-
+  const aiAssistant = useShortcutsStore((state) => {
+    return state.aiAssistant;
+  });
   const menuRef = useRef<HTMLDivElement>(null);
 
   useClickAway(menuRef, () => setIsOpen(false));
   const [assistants, setAssistants] = useState<any[]>([]);
 
-  
   const fetchAssistant = useCallback(async () => {
     if (!isTauri) return;
     if (!currentService?.id) return;
@@ -82,16 +87,27 @@ export function AssistantList({ showChatHistory = true }: AssistantListProps) {
           {currentAssistant?._source?.name || "Coco AI"}
         </div>
         {showChatHistory && isTauri && (
-          <ChevronDownIcon
-            className={`size-4 text-gray-500 dark:text-gray-400 transition-transform ${
-              isOpen ? "rotate-180" : ""
-            }`}
-          />
+          <VisibleKey
+            aria-controls={isOpen ? AI_ASSISTANT_PANEL_ID : ""}
+            shortcut={aiAssistant}
+            onKeyPress={() => {
+              setIsOpen(!isOpen);
+            }}
+          >
+            <ChevronDownIcon
+              className={`size-4 text-gray-500 dark:text-gray-400 transition-transform ${
+                isOpen ? "rotate-180" : ""
+              }`}
+            />
+          </VisibleKey>
         )}
       </button>
 
       {showChatHistory && isTauri && isOpen && (
-        <div className="absolute z-50 top-full mt-1 left-0 w-64 rounded-xl bg-white dark:bg-[#202126] p-2 text-sm/6 text-gray-800 dark:text-white shadow-lg border border-gray-200 dark:border-gray-700 focus:outline-none max-h-[calc(100vh-80px)] overflow-y-auto">
+        <div
+          id={isOpen ? AI_ASSISTANT_PANEL_ID : ""}
+          className="absolute z-50 top-full mt-1 left-0 w-64 rounded-xl bg-white dark:bg-[#202126] p-2 text-sm/6 text-gray-800 dark:text-white shadow-lg border border-gray-200 dark:border-gray-700 focus:outline-none max-h-[calc(100vh-80px)] overflow-y-auto"
+        >
           <div className="sticky top-0 mb-2 px-2 py-1 text-sm font-medium text-gray-900 dark:text-white bg-white dark:bg-[#202126] flex justify-between">
             <div>AI Assistant</div>
             <button
diff --git a/src/components/Settings/Advanced/components/Shortcuts/index.tsx b/src/components/Settings/Advanced/components/Shortcuts/index.tsx
@@ -43,6 +43,12 @@ const Shortcuts = () => {
   const setHistoricalRecords = useShortcutsStore((state) => {
     return state.setHistoricalRecords;
   });
+  const aiAssistant = useShortcutsStore((state) => {
+    return state.aiAssistant;
+  });
+  const setAiAssistant = useShortcutsStore((state) => {
+    return state.setAiAssistant;
+  });
   const newSession = useShortcutsStore((state) => state.newSession);
   const setNewSession = useShortcutsStore((state) => state.setNewSession);
   const fixedWindow = useShortcutsStore((state) => state.fixedWindow);
@@ -110,6 +116,12 @@ const Shortcuts = () => {
       value: historicalRecords,
       setValue: setHistoricalRecords,
     },
+    {
+      title: "settings.advanced.shortcuts.aiAssistant.title",
+      description: "settings.advanced.shortcuts.aiAssistant.description",
+      value: aiAssistant,
+      setValue: setAiAssistant,
+    },
     {
       title: "settings.advanced.shortcuts.newSession.title",
       description: "settings.advanced.shortcuts.newSession.description",
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -3,3 +3,5 @@ export const POPOVER_PANEL_SELECTOR = '[id^="headlessui-popover-panel"]';
 export const HISTORY_PANEL_ID = "headlessui-popover-panel:history-panel";
 
 export const CONTEXT_MENU_PANEL_ID = "headlessui-popover-panel:context-menu";
+
+export const AI_ASSISTANT_PANEL_ID = "headlessui-popover-panel:ai-assistant";
diff --git a/src/hooks/useSyncStore.ts b/src/hooks/useSyncStore.ts
@@ -41,6 +41,9 @@ export const useSyncStore = () => {
   const setHistoricalRecords = useShortcutsStore((state) => {
     return state.setHistoricalRecords;
   });
+  const setAiAssistant = useShortcutsStore((state) => {
+    return state.setAiAssistant;
+  });
   const setNewSession = useShortcutsStore((state) => {
     return state.setNewSession;
   });
@@ -90,6 +93,7 @@ export const useSyncStore = () => {
           internetSearch,
           internetSearchScope,
           historicalRecords,
+          aiAssistant,
           newSession,
           fixedWindow,
           serviceList,
@@ -104,6 +108,7 @@ export const useSyncStore = () => {
         setInternetSearch(internetSearch);
         setInternetSearchScope(internetSearchScope);
         setHistoricalRecords(historicalRecords);
+        setAiAssistant(aiAssistant);
         setNewSession(newSession);
         setFixedWindow(fixedWindow);
         setServiceList(serviceList);
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -119,6 +119,10 @@
           "title": "Conversation History",
           "description": "Shortcut to view past conversation history in chat mode."
         },
+        "aiAssistant": {
+          "title": "AI Assistant",
+          "description": "Shortcut to view AI assistant list in chat mode."
+        },
         "newSession": {
           "title": "New Conversation",
           "description": "Shortcut to start a new conversation in chat mode."
diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json
@@ -119,6 +119,10 @@
           "title": "历史记录",
           "description": "在聊天模式下查看历史对话记录的快捷键。"
         },
+        "aiAssistant": {
+          "title": "AI 助手",
+          "description": "在聊天模式下查看 AI 助手列表快捷键。"
+        },
         "newSession": {
           "title": "新建会话",
           "description": "在聊天模式下创建新对话的快捷按键。"
diff --git a/src/stores/shortcutsStore.ts b/src/stores/shortcutsStore.ts
@@ -27,6 +27,8 @@ export type IShortcutsStore = {
   setInternetSearchScope: (internetSearchScope: string) => void;
   historicalRecords: string;
   setHistoricalRecords: (historicalRecords: string) => void;
+  aiAssistant: string;
+  setAiAssistant: (aiAssistant: string) => void;
   newSession: string;
   setNewSession: (newSession: string) => void;
   fixedWindow: string;
@@ -72,6 +74,8 @@ export const useShortcutsStore = create<IShortcutsStore>()(
       setHistoricalRecords: (historicalRecords) => {
         return set({ historicalRecords });
       },
+      aiAssistant: "U",
+      setAiAssistant: (aiAssistant) => set({ aiAssistant }),
       newSession: "N",
       setNewSession: (newSession) => set({ newSession }),
       fixedWindow: "P",
@@ -96,6 +100,7 @@ export const useShortcutsStore = create<IShortcutsStore>()(
         deepThinking: state.deepThinking,
         internetSearch: state.internetSearch,
         historicalRecords: state.historicalRecords,
+        aiAssistant: state.aiAssistant,
         newSession: state.newSession,
         fixedWindow: state.fixedWindow,
         serviceList: state.serviceList,
