feat(UI): #1404 make left side bar collapsible by hot key (#1420)

Signed-off-by: James <james@jan.ai> Co-authored-by: James <james@jan.ai>
2024-01-08 09:26:03 +07:00 · 2024-01-08 09:26:03 +07:00 · 82ffcd06f1
commit 82ffcd06f1
parent 74d8c6be3d
6 changed files with 160 additions and 119 deletions
--- a/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
+++ b/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
@ -1,4 +1,4 @@
-import { Fragment, useState, useEffect } from 'react'
+import { Fragment } from 'react'

 import { InferenceEngine } from '@janhq/core'
 import {
@ -11,8 +11,11 @@ import {
  Badge,
 } from '@janhq/uikit'

+import { useAtom } from 'jotai'
 import { DatabaseIcon, CpuIcon } from 'lucide-react'

+import { showSelectModelModalAtom } from '@/containers/Providers/KeyListener'
+
 import { MainViewState } from '@/constants/screens'

 import { useActiveModel } from '@/hooks/useActiveModel'
@ -23,6 +26,9 @@ export default function CommandListDownloadedModel() {
  const { setMainViewState } = useMainViewState()
  const { downloadedModels } = useGetDownloadedModels()
  const { activeModel, startModel, stopModel } = useActiveModel()
+  const [showSelectModelModal, setShowSelectModelModal] = useAtom(
+    showSelectModelModalAtom
+  )

  const onModelActionClick = (modelId: string) => {
    if (activeModel && activeModel.id === modelId) {
@ -32,66 +38,50 @@ export default function CommandListDownloadedModel() {
    }
  }

-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'e' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-    document.addEventListener('keydown', down)
-    return () => document.removeEventListener('keydown', down)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
  const isNotDownloadedModel = downloadedModels.length === 0
-
  if (isNotDownloadedModel) return null

  return (
    <Fragment>
-      <CommandModal open={open} onOpenChange={setOpen}>
+      <CommandModal
+        open={showSelectModelModal}
+        onOpenChange={setShowSelectModelModal}
+      >
        <CommandInput placeholder="Search your model..." />
        <CommandList>
          <CommandEmpty>No Model found.</CommandEmpty>
          {!isNotDownloadedModel && (
            <CommandGroup heading="Your Model">
              {downloadedModels
-                .filter((model) => {
-                  return model.engine === InferenceEngine.nitro
-                })
-                .map((model, i) => {
-                  return (
-                    <CommandItem
-                      key={i}
-                      value={model.id}
-                      onSelect={() => {
-                        onModelActionClick(model.id)
-                        setOpen(false)
-                      }}
-                    >
-                      <DatabaseIcon
-                        size={16}
-                        className="mr-3 text-muted-foreground"
-                      />
-                      <div className="flex w-full items-center justify-between">
-                        <span>{model.id}</span>
-                        {activeModel && activeModel.id === model.id && (
-                          <Badge themes="secondary">Active</Badge>
-                        )}
-                      </div>
-                    </CommandItem>
-                  )
-                })}
+                .filter((model) => model.engine === InferenceEngine.nitro)
+                .map((model) => (
+                  <CommandItem
+                    key={model.id}
+                    value={model.id}
+                    onSelect={() => {
+                      onModelActionClick(model.id)
+                      setShowSelectModelModal(false)
+                    }}
+                  >
+                    <DatabaseIcon
+                      size={16}
+                      className="mr-3 text-muted-foreground"
+                    />
+                    <div className="flex w-full items-center justify-between">
+                      <span>{model.id}</span>
+                      {activeModel && activeModel.id === model.id && (
+                        <Badge themes="secondary">Active</Badge>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
            </CommandGroup>
          )}
          <CommandGroup heading="Find another model">
            <CommandItem
              onSelect={() => {
                setMainViewState(MainViewState.Hub)
-                setOpen(false)
+                setShowSelectModelModal(false)
              }}
            >
              <CpuIcon size={16} className="mr-3 text-muted-foreground" />
--- a/web/containers/Layout/TopBar/CommandSearch/index.tsx
+++ b/web/containers/Layout/TopBar/CommandSearch/index.tsx
@ -1,4 +1,4 @@
-import { Fragment, useState, useEffect } from 'react'
+import { Fragment } from 'react'

 import {
  CommandModal,
@ -10,6 +10,7 @@ import {
  CommandList,
 } from '@janhq/uikit'

+import { useAtom } from 'jotai'
 import {
  MessageCircleIcon,
  SettingsIcon,
@ -17,57 +18,44 @@ import {
  MonitorIcon,
 } from 'lucide-react'

+import { showCommandSearchModalAtom } from '@/containers/Providers/KeyListener'
 import ShortCut from '@/containers/Shortcut'

 import { MainViewState } from '@/constants/screens'

 import { useMainViewState } from '@/hooks/useMainViewState'

+const menus = [
+  {
+    name: 'Chat',
+    icon: (
+      <MessageCircleIcon size={16} className="mr-3 text-muted-foreground" />
+    ),
+    state: MainViewState.Thread,
+  },
+  {
+    name: 'Hub',
+    icon: <LayoutGridIcon size={16} className="mr-3 text-muted-foreground" />,
+    state: MainViewState.Hub,
+  },
+  {
+    name: 'System Monitor',
+    icon: <MonitorIcon size={16} className="mr-3 text-muted-foreground" />,
+    state: MainViewState.SystemMonitor,
+  },
+  {
+    name: 'Settings',
+    icon: <SettingsIcon size={16} className="mr-3 text-muted-foreground" />,
+    state: MainViewState.Settings,
+    shortcut: <ShortCut menu="," />,
+  },
+]
+
 export default function CommandSearch() {
  const { setMainViewState } = useMainViewState()
-  const [open, setOpen] = useState(false)
-
-  const menus = [
-    {
-      name: 'Chat',
-      icon: (
-        <MessageCircleIcon size={16} className="mr-3 text-muted-foreground" />
-      ),
-      state: MainViewState.Thread,
-    },
-    {
-      name: 'Hub',
-      icon: <LayoutGridIcon size={16} className="mr-3 text-muted-foreground" />,
-      state: MainViewState.Hub,
-    },
-    {
-      name: 'System Monitor',
-      icon: <MonitorIcon size={16} className="mr-3 text-muted-foreground" />,
-      state: MainViewState.SystemMonitor,
-    },
-    {
-      name: 'Settings',
-      icon: <SettingsIcon size={16} className="mr-3 text-muted-foreground" />,
-      state: MainViewState.Settings,
-      shortcut: <ShortCut menu="," />,
-    },
-  ]
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-      if (e.key === ',' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setMainViewState(MainViewState.Settings)
-      }
-    }
-    document.addEventListener('keydown', down)
-    return () => document.removeEventListener('keydown', down)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  const [showCommandSearchModal, setShowCommandSearchModal] = useAtom(
+    showCommandSearchModalAtom
+  )

  return (
    <Fragment>
@ -84,7 +72,10 @@ export default function CommandSearch() {
          <ShortCut menu="K" />
        </div>
      </div> */}
-      <CommandModal open={open} onOpenChange={setOpen}>
+      <CommandModal
+        open={showCommandSearchModal}
+        onOpenChange={setShowCommandSearchModal}
+      >
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
@ -96,7 +87,7 @@ export default function CommandSearch() {
                  value={menu.name}
                  onSelect={() => {
                    setMainViewState(menu.state)
-                    setOpen(false)
+                    setShowCommandSearchModal(false)
                  }}
                >
                  {menu.icon}
--- a/web/containers/Providers/KeyListener.tsx
+++ b/web/containers/Providers/KeyListener.tsx
@ -0,0 +1,56 @@
+'use client'
+
+import { Fragment, ReactNode, useEffect } from 'react'
+
+import { atom, useSetAtom } from 'jotai'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+type Props = {
+  children: ReactNode
+}
+
+export const showLeftSideBarAtom = atom<boolean>(true)
+export const showSelectModelModalAtom = atom<boolean>(false)
+export const showCommandSearchModalAtom = atom<boolean>(false)
+
+export default function KeyListener({ children }: Props) {
+  const setShowLeftSideBar = useSetAtom(showLeftSideBarAtom)
+  const setShowSelectModelModal = useSetAtom(showSelectModelModalAtom)
+  const { setMainViewState } = useMainViewState()
+  const showCommandSearchModal = useSetAtom(showCommandSearchModalAtom)
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      e.preventDefault()
+      const prefixKey = isMac ? e.metaKey : e.ctrlKey
+
+      if (e.key === 'b' && prefixKey) {
+        setShowLeftSideBar((showLeftSideBar) => !showLeftSideBar)
+        return
+      }
+
+      if (e.key === 'e' && prefixKey) {
+        setShowSelectModelModal((show) => !show)
+        return
+      }
+
+      if (e.key === ',' && prefixKey) {
+        setMainViewState(MainViewState.Settings)
+        return
+      }
+
+      if (e.key === 'k' && prefixKey) {
+        showCommandSearchModal((show) => !show)
+        return
+      }
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return <Fragment>{children}</Fragment>
+}
--- a/web/containers/Providers/index.tsx
+++ b/web/containers/Providers/index.tsx
@ -23,6 +23,8 @@ import {

 import { instance } from '@/utils/posthog'

+import KeyListener from './KeyListener'
+
 import { extensionManager } from '@/extension'

 const Providers = (props: PropsWithChildren) => {
@ -70,17 +72,21 @@ const Providers = (props: PropsWithChildren) => {
  return (
    <PostHogProvider client={instance}>
      <JotaiWrapper>
-        <ThemeWrapper>
-          {setupCore && activated && (
-            <FeatureToggleWrapper>
-              <EventListenerWrapper>
-                <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
-                {!isMac && <GPUDriverPrompt />}
-              </EventListenerWrapper>
-              <Toaster position="top-right" />
-            </FeatureToggleWrapper>
-          )}
-        </ThemeWrapper>
+        <KeyListener>
+          <ThemeWrapper>
+            {setupCore && activated && (
+              <FeatureToggleWrapper>
+                <EventListenerWrapper>
+                  <TooltipProvider delayDuration={0}>
+                    {children}
+                  </TooltipProvider>
+                  {!isMac && <GPUDriverPrompt />}
+                </EventListenerWrapper>
+                <Toaster position="top-right" />
+              </FeatureToggleWrapper>
+            )}
+          </ThemeWrapper>
+        </KeyListener>
      </JotaiWrapper>
    </PostHogProvider>
  )
--- a/web/screens/Chat/index.tsx
+++ b/web/screens/Chat/index.tsx
@ -7,7 +7,6 @@ import { useAtom, useAtomValue } from 'jotai'

 import { debounce } from 'lodash'
 import { StopCircle } from 'lucide-react'
-import { twMerge } from 'tailwind-merge'

 import LogoMark from '@/containers/Brand/Logo/Mark'

@ -15,6 +14,8 @@ import ModelReload from '@/containers/Loader/ModelReload'
 import ModelStart from '@/containers/Loader/ModelStart'
 import { currentPromptAtom } from '@/containers/Providers/Jotai'

+import { showLeftSideBarAtom } from '@/containers/Providers/KeyListener'
+
 import { MainViewState } from '@/constants/screens'

 import { useActiveModel } from '@/hooks/useActiveModel'
@ -28,7 +29,7 @@ import ChatBody from '@/screens/Chat/ChatBody'

 import ThreadList from '@/screens/Chat/ThreadList'

-import Sidebar, { showRightSideBarAtom } from './Sidebar'
+import Sidebar from './Sidebar'

 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'

@ -44,6 +45,7 @@ import { activeThreadStateAtom } from '@/helpers/atoms/Thread.atom'
 const ChatScreen = () => {
  const activeThread = useAtomValue(activeThreadAtom)
  const { downloadedModels } = useGetDownloadedModels()
+  const showLeftSideBar = useAtomValue(showLeftSideBarAtom)

  const { activeModel, stateModel } = useActiveModel()
  const { setMainViewState } = useMainViewState()
@ -59,8 +61,6 @@ const ChatScreen = () => {
  const activeThreadId = useAtomValue(getActiveThreadIdAtom)
  const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)

-  const showing = useAtomValue(showRightSideBarAtom)
-
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const modelRef = useRef(activeModel)
  const engineParamsUpdate = useAtomValue(engineParamsUpdateAtom)
@ -109,17 +109,14 @@ const ChatScreen = () => {

  return (
    <div className="flex h-full w-full">
-      <div className="flex h-full w-60 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background">
-        <ThreadList />
-      </div>
-      <div
-        className={twMerge(
-          'relative flex h-full flex-col overflow-auto bg-background',
-          activeThread && activeThreadId && showing
-            ? 'w-[calc(100%-560px)]'
-            : 'w-full'
-        )}
-      >
+      {/* Left side bar */}
+      {showLeftSideBar ? (
+        <div className="flex h-full w-60 flex-shrink-0 flex-col overflow-y-auto border-r border-border">
+          <ThreadList />
+        </div>
+      ) : null}
+
+      <div className="relative flex h-full w-full flex-col overflow-auto bg-background">
        <div className="flex h-full w-full flex-col justify-between">
          {activeThread ? (
            <div className="flex h-full w-full overflow-y-auto overflow-x-hidden">
@ -210,8 +207,9 @@ const ChatScreen = () => {
          </div>
        </div>
      </div>
-      {/* Sidebar */}
-      {activeThreadId && activeThread && <Sidebar />}
+
+      {/* Right side bar */}
+      {activeThread && <Sidebar />}
    </div>
  )
 }
--- a/web/screens/ExploreModels/ModelVersionItem/index.tsx
+++ b/web/screens/ExploreModels/ModelVersionItem/index.tsx
@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useMemo } from 'react'

 import { Model } from '@janhq/core'
@ -32,6 +31,7 @@ const ModelVersionItem: React.FC<Props> = ({ model }) => {

  const downloadAtom = useMemo(
    () => atom((get) => get(modelDownloadStateAtom)[model.id ?? '']),
+    /* eslint-disable react-hooks/exhaustive-deps */
    [model.id]
  )
  const downloadState = useAtomValue(downloadAtom)