From 997d0e72c594fef3e1d057dd21026acd88171b7a Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Fri, 12 Apr 2024 14:06:47 +0700
Subject: [PATCH] fix: add new shortcut to create new thread (#2701)

---
 web/containers/Providers/KeyListener.tsx  | 15 ++++++++++++++-
 web/containers/ShortcutModal/index.tsx    |  5 +++++
 web/screens/Settings/Advanced/index.tsx   | 19 +------------------
 web/screens/Settings/Appearance/index.tsx | 16 ++++++++++++++++
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/web/containers/Providers/KeyListener.tsx b/web/containers/Providers/KeyListener.tsx
index a4702783c..1f888dd1c 100644
--- a/web/containers/Providers/KeyListener.tsx
+++ b/web/containers/Providers/KeyListener.tsx
@@ -2,11 +2,14 @@
 
 import { Fragment, ReactNode, useEffect } from 'react'
 
-import { atom, useSetAtom } from 'jotai'
+import { atom, useAtomValue, useSetAtom } from 'jotai'
 
 import { MainViewState } from '@/constants/screens'
 
+import { useCreateNewThread } from '@/hooks/useCreateNewThread'
+
 import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
+import { assistantsAtom } from '@/helpers/atoms/Assistant.atom'
 
 type Props = {
   children: ReactNode
@@ -21,11 +24,19 @@ export default function KeyListener({ children }: Props) {
   const setShowSelectModelModal = useSetAtom(showSelectModelModalAtom)
   const setMainViewState = useSetAtom(mainViewStateAtom)
   const showCommandSearchModal = useSetAtom(showCommandSearchModalAtom)
+  const { requestCreateNewThread } = useCreateNewThread()
+  const assistants = useAtomValue(assistantsAtom)
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       const prefixKey = isMac ? e.metaKey : e.ctrlKey
 
+      if (e.key === 'n' && prefixKey) {
+        requestCreateNewThread(assistants[0])
+        setMainViewState(MainViewState.Thread)
+        return
+      }
+
       if (e.key === 'b' && prefixKey) {
         setShowLeftSideBar((showLeftSideBar) => !showLeftSideBar)
         return
@@ -49,6 +60,8 @@ export default function KeyListener({ children }: Props) {
     document.addEventListener('keydown', onKeyDown)
     return () => document.removeEventListener('keydown', onKeyDown)
   }, [
+    assistants,
+    requestCreateNewThread,
     setMainViewState,
     setShowLeftSideBar,
     setShowSelectModelModal,
diff --git a/web/containers/ShortcutModal/index.tsx b/web/containers/ShortcutModal/index.tsx
index 04d6dfc0f..62eb9c078 100644
--- a/web/containers/ShortcutModal/index.tsx
+++ b/web/containers/ShortcutModal/index.tsx
@@ -10,6 +10,11 @@ import {
 } from '@janhq/uikit'
 
 const availableShortcuts = [
+  {
+    combination: 'N',
+    modifierKeys: [isMac ? '⌘' : 'Ctrl'],
+    description: 'Create a new thread',
+  },
   {
     combination: 'E',
     modifierKeys: [isMac ? '⌘' : 'Ctrl'],
diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
index 4376c2deb..9f892bd70 100644
--- a/web/screens/Settings/Advanced/index.tsx
+++ b/web/screens/Settings/Advanced/index.tsx
@@ -26,8 +26,6 @@ import {
 import { useAtom, useAtomValue } from 'jotai'
 import { AlertTriangleIcon, AlertCircleIcon } from 'lucide-react'
 
-import ShortcutModal from '@/containers/ShortcutModal'
-
 import { snackbar, toaster } from '@/containers/Toast'
 
 import { useActiveModel } from '@/hooks/useActiveModel'
@@ -177,22 +175,7 @@ const Advanced = () => {
 
   return (
     <ScrollArea className="px-4">
-      <div className="block w-full">
-        {/* Keyboard shortcut  */}
-        <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-4 last:border-none">
-          <div className="flex-shrink-0 space-y-1.5">
-            <div className="flex gap-x-2">
-              <h6 className="text-sm font-semibold capitalize">
-                Keyboard Shortcuts
-              </h6>
-            </div>
-            <p className="leading-relaxed">
-              Shortcuts that you might find useful in Jan app.
-            </p>
-          </div>
-          <ShortcutModal />
-        </div>
-
+      <div className="block w-full py-4">
         {/* Experimental */}
         <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
           <div className="flex-shrink-0 space-y-1.5">
diff --git a/web/screens/Settings/Appearance/index.tsx b/web/screens/Settings/Appearance/index.tsx
index 51899ba40..162c17d13 100644
--- a/web/screens/Settings/Appearance/index.tsx
+++ b/web/screens/Settings/Appearance/index.tsx
@@ -1,3 +1,5 @@
+import ShortcutModal from '@/containers/ShortcutModal'
+
 import ToggleAccent from '@/screens/Settings/Appearance/TogglePrimary'
 import ToggleTheme from '@/screens/Settings/Appearance/ToggleTheme'
 
@@ -24,6 +26,20 @@ export default function AppearanceOptions() {
         </div>
         <ToggleAccent />
       </div>
+      {/* Keyboard shortcut  */}
+      <div className="flex w-full items-start justify-between border-b border-border py-3 first:pt-4 last:border-none">
+        <div className="flex-shrink-0 space-y-1.5">
+          <div className="flex gap-x-2">
+            <h6 className="text-sm font-semibold capitalize">
+              Keyboard Shortcuts
+            </h6>
+          </div>
+          <p className="leading-relaxed">
+            Shortcuts that you might find useful in Jan app.
+          </p>
+        </div>
+        <ShortcutModal />
+      </div>
     </div>
   )
 }