refactor function click on finder / json to usePath

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({
+export default function CardSidebar({ children, title, asChild }: Props) {
-  children,
-  title,
-  onRevealInFinderClick,
-  onViewJsonClick,
-  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)
               }}
             >

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>
   )

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,
+  }
+}

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, {
+import DropdownListSidebar from '@/containers/DropdownListSidebar'
-  selectedModelAtom,
-} 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
+        <CardSidebar title="Assistant">
-          title="Assistant"
-          onRevealInFinderClick={onReviewInFinderClick}
-          onViewJsonClick={onViewJsonClick}
-        >
           <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
+        <CardSidebar title="Model">
-          title="Model"
-          onRevealInFinderClick={onReviewInFinderClick}
-          onViewJsonClick={onViewJsonClick}
-        >
           <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
+                <CardSidebar title="Engine Parameters" asChild>
-                  title="Engine Parameters"
-                  onRevealInFinderClick={onReviewInFinderClick}
-                  onViewJsonClick={onViewJsonClick}
-                  asChild
-                >
                   <div className="px-2 py-4">
                     <EngineSetting />
                   </div>