diff --git a/front/components/assistant/conversation/input_bar/editor/useCustomEditor.tsx b/front/components/assistant/conversation/input_bar/editor/useCustomEditor.tsx index a2e9243a8dfd..1ba304b8f7c2 100644 --- a/front/components/assistant/conversation/input_bar/editor/useCustomEditor.tsx +++ b/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({ diff --git a/front/components/navigation/Navigation.tsx b/front/components/navigation/Navigation.tsx index a184d3e2b3a8..c3d083b6576f 100644 --- a/front/components/navigation/Navigation.tsx +++ b/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; diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx index fe09f1c13ad4..fa573dee9a3f 100644 --- a/front/components/sparkle/AppLayout.tsx +++ b/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({
{ + 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 }; +} diff --git a/front/pages/w/[wId]/assistant/[cId]/index.tsx b/front/pages/w/[wId]/assistant/[cId]/index.tsx index 49ab794912a7..eb138c6850ea 100644 --- a/front/pages/w/[wId]/assistant/[cId]/index.tsx +++ b/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 (