Assistants Web: Add hot key bindings button (#841)

Add hot keys button to left side navigation
cohere-ai · Nov 19, 2024 · d653660 · d653660
1 parent e91467a
commit d653660
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 9 deletions.
diff --git a/src/interfaces/assistants_web/src/components/HotKeys/HotKeysProvider.tsx b/src/interfaces/assistants_web/src/components/HotKeys/HotKeysProvider.tsx
@@ -1,28 +1,29 @@
 'use client';
 
-import { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { CustomHotKey, type HotKeyGroupOption, HotKeysDialog } from '@/components/HotKeys';
+import { useSettingsStore } from '@/stores';
 
 type HotKeysProviderProps = {
   hotKeys: HotKeyGroupOption[];
 };
 
 export const HotKeysProvider: React.FC<HotKeysProviderProps> = ({ hotKeys = [] }) => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const { isHotKeysDialogOpen, setIsHotKeysDialogOpen } = useSettingsStore();
+
   const open = () => {
-    setIsDialogOpen(true);
+    setIsHotKeysDialogOpen(true);
   };
 
   const close = () => {
-    setIsDialogOpen(false);
+    setIsHotKeysDialogOpen(false);
   };
 
   useHotkeys(
     ['ctrl+k', 'meta+k'],
     () => {
-      if (isDialogOpen) {
+      if (isHotKeysDialogOpen) {
         close();
         return;
       }
@@ -31,12 +32,12 @@ export const HotKeysProvider: React.FC<HotKeysProviderProps> = ({ hotKeys = [] }
     {
       enableOnFormTags: true,
     },
-    [isDialogOpen, close, open]
+    [isHotKeysDialogOpen, close, open]
   );
 
   return (
     <>
-      <HotKeysDialog isOpen={isDialogOpen} close={close} options={hotKeys} />
+      <HotKeysDialog isOpen={isHotKeysDialogOpen} close={close} options={hotKeys} />
       {hotKeys
         .map((hk) => hk.quickActions)
         .flat()
@@ -45,7 +46,7 @@ export const HotKeysProvider: React.FC<HotKeysProviderProps> = ({ hotKeys = [] }
           <HotKeyRegisterAction
             key={hk.name}
             hotKey={hk}
-            isDialogOpen={isDialogOpen}
+            isDialogOpen={isHotKeysDialogOpen}
             close={close}
           />
         ))}

diff --git a/src/interfaces/assistants_web/src/components/SideNavPanel/SideNavPanel.tsx b/src/interfaces/assistants_web/src/components/SideNavPanel/SideNavPanel.tsx
@@ -27,10 +27,13 @@ import { cn } from '@/utils';
  */
 export const SideNavPanel: React.FC<{ className?: string }> = ({ className = '' }) => {
   const asideRef = React.useRef<HTMLDivElement>(null);
-  const { isLeftPanelOpen } = useSettingsStore();
+  const { isLeftPanelOpen, isHotKeysDialogOpen, setIsHotKeysDialogOpen } = useSettingsStore();
   const isDesktop = useIsDesktop();
   const isMobile = !isDesktop;
   const navigateToNewChat = useNavigateToNewChat();
+  const openHotKeysDialog = () => {
+    setIsHotKeysDialogOpen(!isHotKeysDialogOpen);
+  };
 
   return (
     <Transition
@@ -113,6 +116,20 @@ export const SideNavPanel: React.FC<{ className?: string }> = ({ className = ''
         <ConversationList />
 
         <footer className={cn('flex flex-col gap-4', { 'items-center': !isLeftPanelOpen })}>
+          <AgentsSidePanelButton
+            label={
+              <div className="group flex w-full items-center justify-between">
+                <Text>Hot keys</Text>
+                <Shortcut sequence={['⌘', 'K']} className="hidden group-hover:flex" />
+              </div>
+            }
+            tooltip="Hot keys"
+            iconName="menu"
+            theme="mushroom"
+            onClick={() => openHotKeysDialog()}
+            stretch
+          />
+
           <AgentsSidePanelButton
             label="Settings"
             tooltip="Settings"

diff --git a/src/interfaces/assistants_web/src/components/UI/Icon.tsx b/src/interfaces/assistants_web/src/components/UI/Icon.tsx
@@ -475,5 +475,10 @@ const getIcon = (name: IconName, kind: IconKind): React.ReactNode => {
         <Slack />
       </AccessibleIcon>
     ),
+    ['hot-keys']: (
+      <AccessibleIcon label="">
+        <Menu />
+      </AccessibleIcon>
+    ),
   }[name];
 };
diff --git a/src/interfaces/assistants_web/src/stores/persistedStore.ts b/src/interfaces/assistants_web/src/stores/persistedStore.ts
@@ -55,6 +55,8 @@ export const useSettingsStore = () => {
       setRightPanelOpen: state.setRightPanelOpen,
       setUseAssistantKnowledge: state.setUseAssistantKnowledge,
       setShowSteps: state.setShowSteps,
+      isHotKeysDialogOpen: state.isHotKeysDialogOpen,
+      setIsHotKeysDialogOpen: state.setIsHotKeysDialogOpen,
     }),
     shallow
   );

diff --git a/src/interfaces/assistants_web/src/stores/slices/settingsSlice.ts b/src/interfaces/assistants_web/src/stores/slices/settingsSlice.ts
@@ -5,20 +5,23 @@ const INITIAL_STATE = {
   isLeftPanelOpen: true,
   isRightPanelOpen: false,
   showSteps: true,
+  isHotKeysDialogOpen: false,
 };
 
 type State = {
   disabledAssistantKnowledge: string[];
   isLeftPanelOpen: boolean;
   isRightPanelOpen: boolean;
   showSteps: boolean;
+  isHotKeysDialogOpen: boolean;
 };
 
 type Actions = {
   setUseAssistantKnowledge: (useKnowledge: boolean, agentId: string) => void;
   setLeftPanelOpen: (isOpen: boolean) => void;
   setRightPanelOpen: (isOpen: boolean) => void;
   setShowSteps: (showSteps: boolean) => void;
+  setIsHotKeysDialogOpen: (isOpen: boolean) => void;
 };
 
 export type SettingsStore = State & Actions;
@@ -50,5 +53,11 @@ export const createSettingsSlice: StateCreator<SettingsStore, [], [], SettingsSt
       showSteps: showSteps,
     }));
   },
+  setIsHotKeysDialogOpen(isOpen: boolean) {
+    set((state) => ({
+      ...state,
+      isHotKeysDialogOpen: isOpen,
+    }));
+  },
   ...INITIAL_STATE,
 });