Feat: add API Modal shortcut (ctrl+r)

src/frontend/src/components/chatComponent/index.tsx

@@ -9,32 +9,32 @@ import { useStoreStore } from "../../stores/storeStore";
 import { classNames } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Separator } from "../ui/separator";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export default function FlowToolbar(): JSX.Element {
+  function handleAPIWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    setOpenCodeModal((oldOpen) => !oldOpen)
+  }
+
+  function handleChatWShortcut(e: KeyboardEvent) {
+    if (useFlowStore.getState().hasIO) {
+      e.preventDefault();
+      setOpen((oldState) => !oldState);
+    }
+  }
+
+  useHotkeys("mod+k", handleChatWShortcut);
+  useHotkeys("mod+r", handleAPIWShortcut);
   const [open, setOpen] = useState(false);
+  const [openCodeModal, setOpenCodeModal] = useState<boolean>(false);
+
   const hasIO = useFlowStore((state) => state.hasIO);
   const hasStore = useStoreStore((state) => state.hasStore);
   const validApiKey = useStoreStore((state) => state.validApiKey);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        (event.key === "K" || event.key === "k") &&
-        (event.metaKey || event.ctrlKey) &&
-        useFlowStore.getState().hasIO
-      ) {
-        event.preventDefault();
-        setOpen((oldState) => !oldState);
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
-
   const prevNodesRef = useRef<any[] | undefined>();
 
   const ModalMemo = useMemo(
@@ -117,7 +117,7 @@ export default function FlowToolbar(): JSX.Element {
             </div>
             <div className="flex cursor-pointer items-center gap-2">
               {currentFlow && currentFlow.data && (
-                <ApiModal flow={currentFlow}>
+                <ApiModal flow={currentFlow} open={openCodeModal} setOpen={setOpenCodeModal}>
                   <div
                     className={classNames(
                       "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover"

src/frontend/src/modals/ApiModal/index.tsx

@@ -37,14 +37,21 @@ const ApiModal = forwardRef(
     {
       flow,
       children,
+      open: myOpen,
+      setOpen: mySetOpen,
     }: {
       flow: FlowType;
       children: ReactNode;
+      open: any;
+      setOpen: any;
     },
     ref
   ) => {
     const { autoLogin } = useContext(AuthContext);
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] =
+    mySetOpen !== undefined && myOpen !== undefined
+      ? [myOpen, mySetOpen]
+      : useState(false);
     const [activeTab, setActiveTab] = useState("0");
     const tweak = useRef<tweakType>([]);
     const tweaksList = useRef<string[]>([]);

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -95,8 +95,8 @@ export default function NodeToolbarComponent({
   }
 
   function handleShareWShortcut(e: KeyboardEvent) {
-    e.preventDefault()
     if (hasApiKey || hasStore) {
+      e.preventDefault()
       setShowconfirmShare((state) => !state);
     }
   }