Merge branch 'dev' into docs-pena-team

web/hooks/useLogs.tsx

@@ -1,26 +1,37 @@
-import {
-  fs,
-  joinPath,
-  openFileExplorer,
-  getJanDataFolderPath,
-} from '@janhq/core'
+import { useCallback } from 'react'
+
+import { fs, joinPath, openFileExplorer } from '@janhq/core'
+import { useAtomValue } from 'jotai'
+
+import { janDataFolderPathAtom } from '@/helpers/atoms/AppConfig.atom'
 
 export const useLogs = () => {
-  const getLogs = async (file: string) => {
-    const path = await joinPath(['file://logs', `${file}.log`])
-    if (!(await fs.existsSync(path))) return {}
-    const logs = await fs.readFileSync(path, 'utf-8')
-
-    return logs
-  }
-  const openServerLog = async () => {
-    const janDataFolderPath = await getJanDataFolderPath()
+  const janDataFolderPath = useAtomValue(janDataFolderPathAtom)
+
+  const getLogs = useCallback(
+    async (file: string) => {
+      const path = await joinPath(['file://logs', `${file}.log`])
+      if (!(await fs.existsSync(path))) return ''
+      const logs = await fs.readFileSync(path, 'utf-8')
+
+      const sanitizedLogs = logs.replace(
+        new RegExp(`${janDataFolderPath}\\/`, 'g'),
+        'jan-data-folder/'
+      )
+
+      return sanitizedLogs
+    },
+    [janDataFolderPath]
+  )
+
+  const openServerLog = useCallback(async () => {
     const fullPath = await joinPath([janDataFolderPath, 'logs', 'server.log'])
     return openFileExplorer(fullPath)
-  }
+  }, [janDataFolderPath])
 
-  const clearServerLog = async () => {
+  const clearServerLog = useCallback(async () => {
     await fs.writeFileSync(await joinPath(['file://logs', 'server.log']), '')
-  }
+  }, [])
+
   return { getLogs, openServerLog, clearServerLog }
 }

web/hooks/usePath.ts

@@ -1,24 +1,20 @@
-import {
-  openFileExplorer,
-  joinPath,
-  getJanDataFolderPath,
-  baseName,
-} from '@janhq/core'
+import { openFileExplorer, joinPath, baseName } from '@janhq/core'
 import { useAtomValue } from 'jotai'
 
 import { selectedModelAtom } from '@/containers/DropdownListSidebar'
 
+import { janDataFolderPathAtom } from '@/helpers/atoms/AppConfig.atom'
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
 export const usePath = () => {
+  const janDataFolderPath = useAtomValue(janDataFolderPathAtom)
   const activeThread = useAtomValue(activeThreadAtom)
   const selectedModel = useAtomValue(selectedModelAtom)
 
   const onRevealInFinder = async (type: string) => {
     // TODO: this logic should be refactored.
     if (type !== 'Model' && !activeThread) return
 
-    const userSpace = await getJanDataFolderPath()
     let filePath = undefined
     const assistantId = activeThread?.assistants[0]?.assistant_id
     switch (type) {
@@ -40,15 +36,14 @@ export const usePath = () => {
     }
 
     if (!filePath) return
-    const fullPath = await joinPath([userSpace, filePath])
+    const fullPath = await joinPath([janDataFolderPath, filePath])
     openFileExplorer(fullPath)
   }
 
   const onViewJson = async (type: string) => {
     // TODO: this logic should be refactored.
     if (type !== 'Model' && !activeThread) return
 
-    const userSpace = await getJanDataFolderPath()
     let filePath = undefined
     const assistantId = activeThread?.assistants[0]?.assistant_id
     switch (type) {
@@ -74,31 +69,29 @@ export const usePath = () => {
     }
 
     if (!filePath) return
-    const fullPath = await joinPath([userSpace, filePath])
+    const fullPath = await joinPath([janDataFolderPath, filePath])
     openFileExplorer(fullPath)
   }
 
   const onViewFile = async (id: string) => {
     if (!activeThread) return
 
-    const userSpace = await getJanDataFolderPath()
     let filePath = undefined
 
     id = await baseName(id)
     filePath = await joinPath(['threads', `${activeThread.id}/files`, `${id}`])
     if (!filePath) return
-    const fullPath = await joinPath([userSpace, filePath])
+    const fullPath = await joinPath([janDataFolderPath, filePath])
     openFileExplorer(fullPath)
   }
 
   const onViewFileContainer = async () => {
     if (!activeThread) return
 
-    const userSpace = await getJanDataFolderPath()
     let filePath = undefined
     filePath = await joinPath(['threads', `${activeThread.id}/files`])
     if (!filePath) return
-    const fullPath = await joinPath([userSpace, filePath])
+    const fullPath = await joinPath([janDataFolderPath, filePath])
     openFileExplorer(fullPath)
   }
 

web/screens/Chat/ChatInput/index.tsx

@@ -165,8 +165,7 @@ const ChatInput: React.FC = () => {
                   if (
                     fileUpload.length > 0 ||
                     (activeThread?.assistants[0].tools &&
-                      !activeThread?.assistants[0].tools[0]?.enabled &&
-                      !activeThread?.assistants[0].model.settings.vision_model)
+                      !activeThread?.assistants[0].tools[0]?.enabled)
                   ) {
                     e.stopPropagation()
                   } else {
@@ -178,8 +177,7 @@ const ChatInput: React.FC = () => {
             <TooltipPortal>
               {fileUpload.length > 0 ||
                 (activeThread?.assistants[0].tools &&
-                  !activeThread?.assistants[0].tools[0]?.enabled &&
-                  !activeThread?.assistants[0].model.settings.vision_model && (
+                  !activeThread?.assistants[0].tools[0]?.enabled && (
                     <TooltipContent side="top" className="max-w-[154px] px-3">
                       {fileUpload.length !== 0 && (
                         <span>
@@ -205,7 +203,7 @@ const ChatInput: React.FC = () => {
         {showAttacmentMenus && (
           <div
             ref={refAttachmentMenus}
-            className="absolute bottom-10 right-0 w-36 cursor-pointer rounded-lg border border-border bg-background py-1 shadow"
+            className="absolute bottom-10 right-0 z-30 w-36 cursor-pointer rounded-lg border border-border bg-background py-1 shadow"
           >
             <ul>
               <li

web/screens/Chat/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React, { useEffect, useState } from 'react'
 
-import { useDropzone } from 'react-dropzone'
+import { Accept, useDropzone } from 'react-dropzone'
 
 import { useAtomValue, useSetAtom } from 'jotai'
 
@@ -68,12 +68,22 @@ const ChatScreen: React.FC = () => {
 
   const isGeneratingResponse = useAtomValue(isGeneratingResponseAtom)
 
+  const acceptedFormat: Accept = activeThread?.assistants[0].model.settings
+    .vision_model
+    ? {
+        'application/pdf': ['.pdf'],
+        'image/jpeg': ['.jpeg'],
+        'image/png': ['.png'],
+        'image/jpg': ['.jpg'],
+      }
+    : {
+        'application/pdf': ['.pdf'],
+      }
+
   const { getRootProps, isDragReject } = useDropzone({
     noClick: true,
     multiple: false,
-    accept: {
-      'application/pdf': ['.pdf'],
-    },
+    accept: acceptedFormat,
 
     onDragOver: (e) => {
       // Retrieval file drag and drop is experimental feature
@@ -164,10 +174,21 @@ const ChatScreen: React.FC = () => {
                 <div className="mt-4 text-blue-600">
                   <h6 className="font-bold">
                     {isDragReject
-                      ? 'Currently, we only support 1 attachment at the same time with PDF format'
+                      ? `Currently, we only support 1 attachment at the same time with ${
+                          activeThread?.assistants[0].model.settings
+                            .vision_model
+                            ? 'PDF, JPEG, JPG, PNG'
+                            : 'PDF'
+                        } format`
                       : 'Drop file here'}
                   </h6>
-                  {!isDragReject && <p className="mt-2">(PDF)</p>}
+                  {!isDragReject && (
+                    <p className="mt-2">
+                      {activeThread?.assistants[0].model.settings.vision_model
+                        ? 'PDF, JPEG, JPG, PNG'
+                        : 'PDF'}
+                    </p>
+                  )}
                 </div>
               </div>
             </div>