chore: add open log dir to troubleshooting modal (#2605)

web/containers/ModalTroubleShoot/AppLogs.tsx

@@ -2,14 +2,16 @@ import React, { useEffect, useState } from 'react'
 
 import { Button } from '@janhq/uikit'
 
-import { CopyIcon, CheckIcon } from 'lucide-react'
+import { CopyIcon, CheckIcon, FolderIcon } from 'lucide-react'
 
 import { useClipboard } from '@/hooks/useClipboard'
 import { useLogs } from '@/hooks/useLogs'
+import { usePath } from '@/hooks/usePath'
 
 const AppLogs = () => {
   const { getLogs } = useLogs()
   const [logs, setLogs] = useState<string[]>([])
+  const { onRevealInFinder } = usePath()
 
   useEffect(() => {
     getLogs('app').then((log) => {
@@ -26,6 +28,19 @@ const AppLogs = () => {
   return (
     <>
       <div className="absolute -top-11 right-2">
+        <div className="flex w-full flex-row gap-2">
+          <Button
+            themes="outline"
+            className="bg-white dark:bg-secondary/50"
+            onClick={() => onRevealInFinder('Logs')}
+          >
+            <div className="flex items-center space-x-2">
+              <>
+                <FolderIcon size={14} />
+                <span>Open</span>
+              </>
+            </div>
+          </Button>
           <Button
             themes="outline"
             className="bg-white dark:bg-secondary/50"
@@ -48,6 +63,7 @@ const AppLogs = () => {
             </div>
           </Button>
         </div>
+      </div>
       <div className="overflow-hidden">
         {logs.length > 1 ? (
           <div className="h-full overflow-auto">

web/containers/ServerLogs/index.tsx

@@ -6,11 +6,13 @@ import React from 'react'
 import { Button } from '@janhq/uikit'
 import { useAtomValue } from 'jotai'
 
-import { CopyIcon, CheckIcon } from 'lucide-react'
+import { CopyIcon, CheckIcon, FolderIcon } from 'lucide-react'
 
 import { useClipboard } from '@/hooks/useClipboard'
 import { useLogs } from '@/hooks/useLogs'
 
+import { usePath } from '@/hooks/usePath'
+
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 type ServerLogsProps = { limit?: number; withCopy?: boolean }
@@ -20,6 +22,7 @@ const ServerLogs = (props: ServerLogsProps) => {
   const { getLogs } = useLogs()
   const serverEnabled = useAtomValue(serverEnabledAtom)
   const [logs, setLogs] = useState<string[]>([])
+  const { onRevealInFinder } = usePath()
 
   const clipboard = useClipboard({ timeout: 1000 })
 
@@ -55,6 +58,19 @@ const ServerLogs = (props: ServerLogsProps) => {
   return (
     <>
       <div className="absolute -top-11 right-2">
+        <div className="flex w-full flex-row gap-2">
+          <Button
+            themes="outline"
+            className="bg-white dark:bg-secondary/50"
+            onClick={() => onRevealInFinder('Logs')}
+          >
+            <div className="flex items-center space-x-2">
+              <>
+                <FolderIcon size={14} />
+                <span>Open</span>
+              </>
+            </div>
+          </Button>
           <Button
             themes="outline"
             className="bg-white dark:bg-secondary/50"
@@ -77,6 +93,7 @@ const ServerLogs = (props: ServerLogsProps) => {
             </div>
           </Button>
         </div>
+      </div>
       <div className="overflow-hidden">
         {logs.length > 1 ? (
           <div className="h-full overflow-auto">

web/hooks/usePath.ts

@@ -31,6 +31,9 @@ export const usePath = () => {
         if (!assistantId) return
         filePath = await joinPath(['assistants', assistantId])
         break
+      case 'Logs':
+        filePath = 'logs'
+        break
       default:
         break
     }