fix: drag and drop support image format when model has vision_model attribute (#2237)

This commit is contained in:
Faisal Amir 2024-03-05 13:39:08 +07:00 committed by GitHub
parent e6c10202e0
commit 02013639a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 11 deletions

View File

@ -165,8 +165,7 @@ const ChatInput: React.FC = () => {
if ( if (
fileUpload.length > 0 || fileUpload.length > 0 ||
(activeThread?.assistants[0].tools && (activeThread?.assistants[0].tools &&
!activeThread?.assistants[0].tools[0]?.enabled && !activeThread?.assistants[0].tools[0]?.enabled)
!activeThread?.assistants[0].model.settings.vision_model)
) { ) {
e.stopPropagation() e.stopPropagation()
} else { } else {
@ -178,8 +177,7 @@ const ChatInput: React.FC = () => {
<TooltipPortal> <TooltipPortal>
{fileUpload.length > 0 || {fileUpload.length > 0 ||
(activeThread?.assistants[0].tools && (activeThread?.assistants[0].tools &&
!activeThread?.assistants[0].tools[0]?.enabled && !activeThread?.assistants[0].tools[0]?.enabled && (
!activeThread?.assistants[0].model.settings.vision_model && (
<TooltipContent side="top" className="max-w-[154px] px-3"> <TooltipContent side="top" className="max-w-[154px] px-3">
{fileUpload.length !== 0 && ( {fileUpload.length !== 0 && (
<span> <span>
@ -205,7 +203,7 @@ const ChatInput: React.FC = () => {
{showAttacmentMenus && ( {showAttacmentMenus && (
<div <div
ref={refAttachmentMenus} 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> <ul>
<li <li

View File

@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useDropzone } from 'react-dropzone' import { Accept, useDropzone } from 'react-dropzone'
import { useAtomValue, useSetAtom } from 'jotai' import { useAtomValue, useSetAtom } from 'jotai'
@ -68,12 +68,22 @@ const ChatScreen: React.FC = () => {
const isGeneratingResponse = useAtomValue(isGeneratingResponseAtom) 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({ const { getRootProps, isDragReject } = useDropzone({
noClick: true, noClick: true,
multiple: false, multiple: false,
accept: { accept: acceptedFormat,
'application/pdf': ['.pdf'],
},
onDragOver: (e) => { onDragOver: (e) => {
// Retrieval file drag and drop is experimental feature // Retrieval file drag and drop is experimental feature
@ -164,10 +174,21 @@ const ChatScreen: React.FC = () => {
<div className="mt-4 text-blue-600"> <div className="mt-4 text-blue-600">
<h6 className="font-bold"> <h6 className="font-bold">
{isDragReject {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'} : 'Drop file here'}
</h6> </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> </div>
</div> </div>