refactor function click on finder / json to usePath

2024-01-15 17:00:22 +07:00 · 2024-01-15 17:00:22 +07:00 · 167db02f04
commit 167db02f04
parent 05698cb60f
4 changed files with 141 additions and 151 deletions
--- a/web/containers/CardSidebar/index.tsx
+++ b/web/containers/CardSidebar/index.tsx
@ -11,27 +11,22 @@ import { twMerge } from 'tailwind-merge'

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

+import { usePath } from '@/hooks/usePath'
+
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'

 interface Props {
  children: ReactNode
  title: string
-  onRevealInFinderClick?: (type: string) => void
-  onViewJsonClick?: (type: string) => void
  asChild?: boolean
 }
-export default function CardSidebar({
-  children,
-  title,
-  onRevealInFinderClick,
-  onViewJsonClick,
-  asChild,
-}: Props) {
+export default function CardSidebar({ children, title, asChild }: Props) {
  const [show, setShow] = useState(true)
  const [more, setMore] = useState(false)
  const [menu, setMenu] = useState<HTMLDivElement | null>(null)
  const [toggle, setToggle] = useState<HTMLDivElement | null>(null)
  const activeThread = useAtomValue(activeThreadAtom)
+  const { onReviewInFinder, onViewJson } = usePath()

  useClickOutside(() => setMore(false), null, [menu, toggle])

@ -90,7 +85,7 @@ export default function CardSidebar({
                title === 'Model' ? 'items-start' : 'items-center'
              )}
              onClick={() => {
-                onRevealInFinderClick && onRevealInFinderClick(title)
+                onReviewInFinder && onReviewInFinder(title)
                setMore(false)
              }}
            >
@ -121,7 +116,7 @@ export default function CardSidebar({
            <div
              className="flex cursor-pointer items-start space-x-2 px-4 py-2 hover:bg-secondary"
              onClick={() => {
-                onViewJsonClick && onViewJsonClick(title)
+                onViewJson && onViewJson(title)
                setMore(false)
              }}
            >
--- a/web/containers/Layout/TopBar/index.tsx
+++ b/web/containers/Layout/TopBar/index.tsx
@ -1,6 +1,5 @@
 import { useState } from 'react'

-import { getUserSpace, joinPath, openFileExplorer } from '@janhq/core'
 import { useAtom, useAtomValue } from 'jotai'
 import {
  PenSquareIcon,
@ -24,9 +23,11 @@ import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 import useGetAssistants, { getAssistants } from '@/hooks/useGetAssistants'
 import { useMainViewState } from '@/hooks/useMainViewState'

+import { usePath } from '@/hooks/usePath'
+
 import { showRightSideBarAtom } from '@/screens/Chat/Sidebar'

-import { activeThreadAtom, threadStatesAtom } from '@/helpers/atoms/Thread.atom'
+import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'

 const TopBar = () => {
  const activeThread = useAtomValue(activeThreadAtom)
@ -36,7 +37,7 @@ const TopBar = () => {
  const [showRightSideBar, setShowRightSideBar] = useAtom(showRightSideBarAtom)
  const [showLeftSideBar, setShowLeftSideBar] = useAtom(showLeftSideBarAtom)
  const showing = useAtomValue(showRightSideBarAtom)
-  const threadStates = useAtomValue(threadStatesAtom)
+  const { onReviewInFinder, onViewJson } = usePath()
  const [more, setMore] = useState(false)
  const [menu, setMenu] = useState<HTMLDivElement | null>(null)
  const [toggle, setToggle] = useState<HTMLDivElement | null>(null)
@ -66,42 +67,16 @@ const TopBar = () => {
    }
  }

-  const onReviewInFinderClick = async () => {
-    if (!activeThread) return
-    const activeThreadState = threadStates[activeThread.id]
-    if (!activeThreadState.isFinishInit) {
-      alert('Thread is not started yet')
-      return
-    }
-
-    const userSpace = await getUserSpace()
-    let filePath = undefined
-    filePath = await joinPath(['threads', activeThread.id])
-
-    if (!filePath) return
-    const fullPath = await joinPath([userSpace, filePath])
-    openFileExplorer(fullPath)
-  }
-
-  const onViewJsonClick = async () => {
-    if (!activeThread) return
-    const activeThreadState = threadStates[activeThread.id]
-    if (!activeThreadState.isFinishInit) {
-      alert('Thread is not started yet')
-      return
-    }
-
-    const userSpace = await getUserSpace()
-    let filePath = undefined
-    filePath = await joinPath(['threads', activeThread.id, 'thread.json'])
-    if (!filePath) return
-    const fullPath = await joinPath([userSpace, filePath])
-    openFileExplorer(fullPath)
-  }
-
  return (
    <div className="fixed left-0 top-0 z-50 flex h-12 w-full border-b border-border bg-background/80 backdrop-blur-md">
-      {mainViewState === MainViewState.Thread && (
+      {mainViewState !== MainViewState.Thread &&
+      mainViewState !== MainViewState.LocalServer ? (
+        <div className="relative left-16 flex w-[calc(100%-64px)] items-center justify-between space-x-4 pl-6 pr-2">
+          <span className="text-sm font-bold">
+            {titleScreen(mainViewState)}
+          </span>
+        </div>
+      ) : (
        <div className="relative w-full">
          <div className="absolute left-16 h-full w-60 border-r border-border">
            <div className="flex h-full w-full items-center justify-between">
@ -148,7 +123,10 @@ const TopBar = () => {
                {showing && (
                  <div className="relative flex h-full items-center">
                    <span className="mr-2 text-sm font-bold">
-                      Threads Settings
+                      {mainViewState === MainViewState.Thread &&
+                        'Threads Settings'}
+                      {mainViewState === MainViewState.LocalServer &&
+                        'Model Settings'}
                    </span>
                    <div
                      ref={setToggle}
@ -158,7 +136,7 @@ const TopBar = () => {
                      <MoreVerticalIcon className="h-5 w-5" />
                    </div>

-                    {more && (
+                    {mainViewState === MainViewState.Thread && more && (
                      <div
                        className="absolute right-0 top-11 z-20 w-64 overflow-hidden rounded-lg border border-border bg-background shadow-lg"
                        ref={setMenu}
@ -166,7 +144,7 @@ const TopBar = () => {
                        <div
                          className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
                          onClick={() => {
-                            onReviewInFinderClick()
+                            onReviewInFinder('Thread')
                            setMore(false)
                          }}
                        >
@ -181,7 +159,7 @@ const TopBar = () => {
                        <div
                          className="flex cursor-pointer items-start space-x-2 px-4 py-2 hover:bg-secondary"
                          onClick={() => {
-                            onViewJsonClick()
+                            onViewJson('Thread')
                            setMore(false)
                          }}
                        >
@ -201,6 +179,34 @@ const TopBar = () => {
                        </div>
                      </div>
                    )}
+
+                    {mainViewState === MainViewState.LocalServer && more && (
+                      <div
+                        className="absolute right-0 top-11 z-20 w-64 overflow-hidden rounded-lg border border-border bg-background shadow-lg"
+                        ref={setMenu}
+                      >
+                        <div
+                          className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
+                          onClick={() => {
+                            onReviewInFinder('Model')
+                            setMore(false)
+                          }}
+                        >
+                          <FolderOpenIcon
+                            size={16}
+                            className="text-muted-foreground"
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium text-black dark:text-muted-foreground">
+                              Show in Finder
+                            </span>
+                            <span className="mt-1 text-muted-foreground">
+                              Opens model.json
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    )}
                  </div>
                )}
                <div
@ -220,14 +226,6 @@ const TopBar = () => {
          </div>
        </div>
      )}
-
-      {mainViewState !== MainViewState.Thread && (
-        <div className="relative left-16 flex w-[calc(100%-64px)] items-center justify-between space-x-4 pl-6 pr-2">
-          <span className="text-sm font-bold">
-            {titleScreen(mainViewState)}
-          </span>
-        </div>
-      )}
      <CommandSearch />
    </div>
  )
--- a/web/hooks/usePath.ts
+++ b/web/hooks/usePath.ts
@ -0,0 +1,83 @@
+import { getUserSpace, openFileExplorer, joinPath } from '@janhq/core'
+import { useAtomValue } from 'jotai'
+
+import { selectedModelAtom } from '@/containers/DropdownListSidebar'
+
+import { activeThreadAtom, threadStatesAtom } from '@/helpers/atoms/Thread.atom'
+
+export const usePath = () => {
+  const activeThread = useAtomValue(activeThreadAtom)
+  const threadStates = useAtomValue(threadStatesAtom)
+  const selectedModel = useAtomValue(selectedModelAtom)
+
+  const onReviewInFinder = async (type: string) => {
+    if (!activeThread) return
+    const activeThreadState = threadStates[activeThread.id]
+    if (!activeThreadState.isFinishInit) {
+      alert('Thread is not started yet')
+      return
+    }
+
+    const userSpace = await getUserSpace()
+    let filePath = undefined
+    const assistantId = activeThread.assistants[0]?.assistant_id
+    switch (type) {
+      case 'Engine':
+      case 'Thread':
+        filePath = await joinPath(['threads', activeThread.id])
+        break
+      case 'Model':
+        if (!selectedModel) return
+        filePath = await joinPath(['models', selectedModel.id])
+        break
+      case 'Assistant':
+        if (!assistantId) return
+        filePath = await joinPath(['assistants', assistantId])
+        break
+      default:
+        break
+    }
+
+    if (!filePath) return
+    const fullPath = await joinPath([userSpace, filePath])
+    openFileExplorer(fullPath)
+  }
+
+  const onViewJson = async (type: string) => {
+    if (!activeThread) return
+    const activeThreadState = threadStates[activeThread.id]
+    if (!activeThreadState.isFinishInit) {
+      alert('Thread is not started yet')
+      return
+    }
+
+    const userSpace = await getUserSpace()
+    let filePath = undefined
+    const assistantId = activeThread.assistants[0]?.assistant_id
+    switch (type) {
+      case 'Engine':
+      case 'Thread':
+        filePath = await joinPath(['threads', activeThread.id, 'thread.json'])
+        break
+      case 'Model':
+        if (!selectedModel) return
+        filePath = await joinPath(['models', selectedModel.id, 'model.json'])
+        break
+      case 'Assistant':
+        if (!assistantId) return
+        filePath = await joinPath(['assistants', assistantId, 'assistant.json'])
+        break
+      default:
+        break
+    }
+
+    if (!filePath) return
+    const fullPath = await joinPath([userSpace, filePath])
+    openFileExplorer(fullPath)
+  }
+
+  return {
+    onReviewInFinder,
+    onViewJson,
+  }
+}
--- a/web/screens/Chat/Sidebar/index.tsx
+++ b/web/screens/Chat/Sidebar/index.tsx
@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'

-import { getUserSpace, openFileExplorer, joinPath } from '@janhq/core'
-
 import { Input, Textarea } from '@janhq/uikit'

 import { atom, useAtomValue } from 'jotai'
@ -12,9 +10,7 @@ import { twMerge } from 'tailwind-merge'
 import LogoMark from '@/containers/Brand/Logo/Mark'
 import CardSidebar from '@/containers/CardSidebar'

-import DropdownListSidebar, {
-  selectedModelAtom,
-} from '@/containers/DropdownListSidebar'
+import DropdownListSidebar from '@/containers/DropdownListSidebar'

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

@ -29,7 +25,6 @@ import settingComponentBuilder from '../ModelSetting/settingComponentBuilder'
 import {
  activeThreadAtom,
  getActiveThreadModelParamsAtom,
-  threadStatesAtom,
 } from '@/helpers/atoms/Thread.atom'

 export const showRightSideBarAtom = atom<boolean>(true)
@ -38,82 +33,14 @@ const Sidebar: React.FC = () => {
  const showing = useAtomValue(showRightSideBarAtom)
  const activeThread = useAtomValue(activeThreadAtom)
  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
-  const selectedModel = useAtomValue(selectedModelAtom)
-  const { updateThreadMetadata } = useCreateNewThread()

-  const threadStates = useAtomValue(threadStatesAtom)
+  const { updateThreadMetadata } = useCreateNewThread()

  const modelEngineParams = toSettingParams(activeModelParams)
  const modelRuntimeParams = toRuntimeParams(activeModelParams)
  const componentDataEngineSetting = getConfigurationsData(modelEngineParams)
  const componentDataRuntimeSetting = getConfigurationsData(modelRuntimeParams)

-  const onReviewInFinderClick = async (type: string) => {
-    if (!activeThread) return
-    const activeThreadState = threadStates[activeThread.id]
-    if (!activeThreadState.isFinishInit) {
-      alert('Thread is not started yet')
-      return
-    }
-
-    const userSpace = await getUserSpace()
-    let filePath = undefined
-    const assistantId = activeThread.assistants[0]?.assistant_id
-    switch (type) {
-      case 'Engine':
-      case 'Thread':
-        filePath = await joinPath(['threads', activeThread.id])
-        break
-      case 'Model':
-        if (!selectedModel) return
-        filePath = await joinPath(['models', selectedModel.id])
-        break
-      case 'Assistant':
-        if (!assistantId) return
-        filePath = await joinPath(['assistants', assistantId])
-        break
-      default:
-        break
-    }
-
-    if (!filePath) return
-    const fullPath = await joinPath([userSpace, filePath])
-    openFileExplorer(fullPath)
-  }
-
-  const onViewJsonClick = async (type: string) => {
-    if (!activeThread) return
-    const activeThreadState = threadStates[activeThread.id]
-    if (!activeThreadState.isFinishInit) {
-      alert('Thread is not started yet')
-      return
-    }
-
-    const userSpace = await getUserSpace()
-    let filePath = undefined
-    const assistantId = activeThread.assistants[0]?.assistant_id
-    switch (type) {
-      case 'Engine':
-      case 'Thread':
-        filePath = await joinPath(['threads', activeThread.id, 'thread.json'])
-        break
-      case 'Model':
-        if (!selectedModel) return
-        filePath = await joinPath(['models', selectedModel.id, 'model.json'])
-        break
-      case 'Assistant':
-        if (!assistantId) return
-        filePath = await joinPath(['assistants', assistantId, 'assistant.json'])
-        break
-      default:
-        break
-    }
-
-    if (!filePath) return
-    const fullPath = await joinPath([userSpace, filePath])
-    openFileExplorer(fullPath)
-  }
-
  return (
    <div
      className={twMerge(
@ -162,11 +89,7 @@ const Sidebar: React.FC = () => {
          </div>
        </div>

-        <CardSidebar
-          title="Assistant"
-          onRevealInFinderClick={onReviewInFinderClick}
-          onViewJsonClick={onViewJsonClick}
-        >
+        <CardSidebar title="Assistant">
          <div className="flex flex-col space-y-4 p-2">
            <div className="flex items-center space-x-2">
              <LogoMark width={24} height={24} />
@ -216,11 +139,7 @@ const Sidebar: React.FC = () => {
              </div> */}
          </div>
        </CardSidebar>
-        <CardSidebar
-          title="Model"
-          onRevealInFinderClick={onReviewInFinderClick}
-          onViewJsonClick={onViewJsonClick}
-        >
+        <CardSidebar title="Model">
          <div className="px-2">
            <div className="mt-4">
              <DropdownListSidebar />
@ -250,12 +169,7 @@ const Sidebar: React.FC = () => {

            {componentDataEngineSetting.length !== 0 && (
              <div className="my-4">
-                <CardSidebar
-                  title="Engine Parameters"
-                  onRevealInFinderClick={onReviewInFinderClick}
-                  onViewJsonClick={onViewJsonClick}
-                  asChild
-                >
+                <CardSidebar title="Engine Parameters" asChild>
                  <div className="px-2 py-4">
                    <EngineSetting />
                  </div>