Feat: User can customize all shortcuts

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

@@ -10,6 +10,7 @@ import { classNames } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Separator } from "../ui/separator";
 import { useHotkeys } from "react-hotkeys-hook";
+import { useShortcutsStore } from "../../stores/shortcuts";
 
 export default function FlowToolbar(): JSX.Element {
   function handleAPIWShortcut(e: KeyboardEvent) {
@@ -24,8 +25,11 @@ export default function FlowToolbar(): JSX.Element {
     }
   }
 
-  useHotkeys("mod+k", handleChatWShortcut);
-  useHotkeys("mod+r", handleAPIWShortcut);
+  const openPlayground = useShortcutsStore(state => state.open);
+  const api = useShortcutsStore(state => state.api);
+
+  useHotkeys(openPlayground, handleChatWShortcut);
+  useHotkeys(api, handleAPIWShortcut);
   const [open, setOpen] = useState(false);
   const [openCodeModal, setOpenCodeModal] = useState<boolean>(false);
 

src/frontend/src/constants/constants.ts

@@ -832,7 +832,23 @@ export const defaultShortcuts = [
   {
     name: "Redo",
     shortcut: "Ctrl + y"
-  }
+  },
+  {
+    name: "Group",
+    shortcut: "Ctrl + g"
+  },
+  {
+    name: "Cut",
+    shortcut: "Ctrl + x"
+  },
+  {
+    name: "Paste",
+    shortcut: "Ctrl + v"
+  },
+  {
+    name: "API",
+    shortcut: "Ctrl + r"
+  },
 ];
 
-export const unavailableShortcutss = ["CTRL + SHIFT + A", "CTRL + Q", "CTRL + SHIFT + U", "CTRL + C", "CTRL + D", "CTRL + SHIFT + S", "CTRL + SHIFT + D", "CTRL + S", "BACKSPACE", "CTRL + K", "CTRL + Z", "CTRL + Y"];
+export const unavailableShortcutss = ["CTRL + R","CTRL + V", "CTRL + X", "CTRL + G", "CTRL + SHIFT + A", "CTRL + Q", "CTRL + SHIFT + U", "CTRL + C", "CTRL + D", "CTRL + SHIFT + S", "CTRL + SHIFT + D", "CTRL + S", "BACKSPACE", "CTRL + K", "CTRL + Z", "CTRL + Y"];

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

@@ -235,7 +235,7 @@ export default function Page({
   
   function handleDelete(e: KeyboardEvent) {
     e.preventDefault()
-    if (!isWrappedWithClass(event, "nodelete") && lastSelection) {
+    if (!isWrappedWithClass(e, "nodelete") && lastSelection) {
       takeSnapshot();
       deleteNode(lastSelection.nodes.map((node) => node.id));
       deleteEdge(lastSelection.edges.map((edge) => edge.id));
@@ -245,15 +245,20 @@ export default function Page({
   const undoAction = useShortcutsStore(state => state.undo);
   const redoAction = useShortcutsStore(state => state.redo);
   const copyAction = useShortcutsStore(state => state.copy);
+  const duplicate = useShortcutsStore(state => state.duplicate);
+  const deleteAction = useShortcutsStore(state => state.delete);
+  const groupAction = useShortcutsStore(state => state.group);
+  const cutAction = useShortcutsStore(state => state.cut);
+  const pasteAction = useShortcutsStore(state => state.paste);
 
   useHotkeys(undoAction, handleUndo);
   useHotkeys(redoAction, handleRedo);
-  useHotkeys("mod+g", handleGroup);
-  useHotkeys("mod+d", handleDuplicate);
+  useHotkeys(groupAction, handleGroup);
+  useHotkeys(duplicate, handleDuplicate);
   useHotkeys(copyAction, handleCopy);
-  useHotkeys("mod+x", handleCut);
-  useHotkeys("mod+v", handlePaste);
-  useHotkeys("backspace", handleDelete);
+  useHotkeys(cutAction, handleCut);
+  useHotkeys(pasteAction, handlePaste);
+  useHotkeys(deleteAction, handleDelete);
   useHotkeys("delete", handleDelete);
 
   useEffect(() => {

src/frontend/src/stores/shortcuts.ts

@@ -20,6 +20,10 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   docs: "mod+shift+d",
   save: "mod+s",
   delete: "backspace",
+  group: "mod+g",
+  cut: "mod+x",
+  paste: "mod+v",
+  api: "mod+r",
   updateUniqueShortcut: (name, combination) => {
     set({
       [name]: combination

src/frontend/src/types/store/index.ts

@@ -21,6 +21,10 @@ export type StoreComponentResponse = {
 
 export type shortcutsStoreType = {
   updateUniqueShortcut: (name: string, combination: string) => void;
+  group: string;
+  cut: string;
+  paste: string;
+  api: string;
   open: string;
   undo: string;
   redo: string;