From 02013639a4eb728aa2045218f850f79fdeaf525a Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 5 Mar 2024 13:39:08 +0700
Subject: [PATCH] fix: drag and drop support image format when model has
 vision_model attribute (#2237)

---
 web/screens/Chat/ChatInput/index.tsx |  8 +++----
 web/screens/Chat/index.tsx           | 33 +++++++++++++++++++++++-----
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/web/screens/Chat/ChatInput/index.tsx b/web/screens/Chat/ChatInput/index.tsx
index 052720d6c..a7985a59c 100644
--- a/web/screens/Chat/ChatInput/index.tsx
+++ b/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
diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx
index 00bca550f..4f441ac45 100644
--- a/web/screens/Chat/index.tsx
+++ b/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>