refactor: centralize keyboard shortcuts and fix bold shortcut conflic…

…ts (#8467)

- Move keyboard shortcuts (Cmd+B for navigation, Cmd+/ for new conversation) to centralized hook
- Disable default Cmd+B shortcut from Tiptap's Bold extension
- Add custom Bold extension to prevent shortcut conflicts
- Update Navigation component to receive isNavigationBarOpen state from parent

Co-authored-by: Henry Fontanier <[email protected]>

front/components/assistant/conversation/input_bar/editor/useCustomEditor.tsx

@@ -1,3 +1,4 @@
+import Bold from "@tiptap/extension-bold";
 import { MentionPluginKey } from "@tiptap/extension-mention";
 import Placeholder from "@tiptap/extension-placeholder";
 import type { Editor, JSONContent } from "@tiptap/react";
@@ -156,6 +157,14 @@ export interface CustomEditorProps {
   disableAutoFocus: boolean;
 }
 
+const CustomBold = Bold.extend({
+  addKeyboardShortcuts() {
+    return {
+      "Mod-b": () => false,
+    };
+  },
+});
+
 const useCustomEditor = ({
   onEnterKeyDown,
   resetEditorContainerSize,
@@ -171,7 +180,10 @@ const useCustomEditor = ({
         heading: false,
         // Disable the paragraph extension to handle Enter key press manually.
         paragraph: false,
+        // Disable the default Bold extension from StarterKit
+        bold: false,
       }),
+      CustomBold,
       ParagraphExtension,
       MentionStorage,
       MentionWithPaste.configure({

front/components/navigation/Navigation.tsx

@@ -2,7 +2,7 @@ import { XMarkIcon } from "@dust-tt/sparkle";
 import type { SubscriptionType, WorkspaceType } from "@dust-tt/types";
 import { Dialog, Transition } from "@headlessui/react";
 import { Bars3Icon } from "@heroicons/react/20/solid";
-import React, { Fragment, useContext, useEffect, useState } from "react";
+import React, { Fragment, useContext } from "react";
 
 import type { SidebarNavigation } from "@app/components/navigation/config";
 import {
@@ -18,6 +18,8 @@ interface NavigationProps {
   subscription: SubscriptionType;
   navChildren?: React.ReactNode;
   subNavigation?: SidebarNavigation[] | null;
+  isNavigationBarOpen: boolean;
+  setNavigationBarOpen: (isOpen: boolean) => void;
 }
 
 export function Navigation({
@@ -26,21 +28,10 @@ export function Navigation({
   subscription,
   navChildren,
   subNavigation,
+  isNavigationBarOpen,
+  setNavigationBarOpen,
 }: NavigationProps) {
   const { sidebarOpen, setSidebarOpen } = useContext(SidebarContext);
-  const [isNavigationBarOpen, setNavigationBarOpen] = useState(true);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e?.key?.toLowerCase() === "b" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setNavigationBarOpen(!isNavigationBarOpen);
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isNavigationBarOpen, setSidebarOpen, sidebarOpen]);
 
   if (hideSidebar) {
     return null;

front/components/sparkle/AppLayout.tsx

@@ -9,6 +9,7 @@ import { HelpAndQuickGuideWrapper } from "@app/components/assistant/conversation
 import { CONVERSATION_PARENT_SCROLL_DIV_ID } from "@app/components/assistant/conversation/lib";
 import type { SidebarNavigation } from "@app/components/navigation/config";
 import { Navigation } from "@app/components/navigation/Navigation";
+import { useAppKeyboardShortcuts } from "@app/hooks/useAppKeyboardShortcuts";
 import { useUser } from "@app/lib/swr/user";
 import { classNames } from "@app/lib/utils";
 
@@ -54,6 +55,9 @@ export default function AppLayout({
   const [loaded, setLoaded] = useState(false);
   const user = useUser();
 
+  const { isNavigationBarOpen, setIsNavigationBarOpen } =
+    useAppKeyboardShortcuts(owner);
+
   useEffect(() => {
     setLoaded(true);
   }, []);
@@ -115,6 +119,8 @@ export default function AppLayout({
       <div className="light flex h-full flex-row">
         <Navigation
           hideSidebar={hideSidebar}
+          isNavigationBarOpen={isNavigationBarOpen}
+          setNavigationBarOpen={setIsNavigationBarOpen}
           owner={owner}
           subscription={subscription}
           navChildren={navChildren}

front/hooks/useAppKeyboardShortcuts.ts

@@ -0,0 +1,34 @@
+import type { LightWorkspaceType } from "@dust-tt/types";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export function useAppKeyboardShortcuts(owner: LightWorkspaceType) {
+  const [isNavigationBarOpen, setIsNavigationBarOpen] = useState(true);
+  const router = useRouter();
+
+  useEffect(() => {
+    function handleKeyboardShortcuts(event: KeyboardEvent) {
+      // Check for Command/Control key
+      const isModifier = event.metaKey || event.ctrlKey;
+
+      if (isModifier) {
+        switch (event.key) {
+          case "b":
+            event.preventDefault();
+            setIsNavigationBarOpen((prev) => !prev);
+            break;
+
+          case "/":
+            event.preventDefault();
+            void router.push(`/w/${owner.sId}/assistant/new`);
+            break;
+        }
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyboardShortcuts);
+    return () => window.removeEventListener("keydown", handleKeyboardShortcuts);
+  }, [owner.sId, router]);
+
+  return { isNavigationBarOpen, setIsNavigationBarOpen };
+}

front/pages/w/[wId]/assistant/[cId]/index.tsx

@@ -100,21 +100,6 @@ export default function AssistantConversation({
     }
   }, [cId, assistant, setConversationKey, initialConversationId]);
 
-  useEffect(() => {
-    function handleNewConvoShortcut(event: KeyboardEvent) {
-      // Check for Command on Mac or Ctrl on others
-      const isModifier = event.metaKey || event.ctrlKey;
-      if (isModifier && event.key === "/") {
-        void router.push(`/w/${owner.sId}/assistant/new`);
-      }
-    }
-
-    window.addEventListener("keydown", handleNewConvoShortcut);
-    return () => {
-      window.removeEventListener("keydown", handleNewConvoShortcut);
-    };
-  }, [owner.sId, router]);
-
   return (
     <ConversationContainer
       // Key ensures the component re-renders when conversation changes except for shallow browse.