estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: auto closing when close local image uploading (#2767)

Browse Source
This commit is contained in:
Rozstone
2024-03-10 13:11:41 +08:00
committed by GitHub
parent 9beefd7d5a
commit b75d8ca621
5 changed files with 158 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
web/app/components/base/image-uploader/chat-image-uploader.tsx
View File

@@ -1,6 +1,7 @@
import type { FC } from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import Uploader from './uploader'
import ImageLinkInput from './image-link-input'
import { ImagePlus } from '@/app/components/base/icons/src/vender/line/images'
@@ -25,16 +26,16 @@ const UploadOnlyFromLocal: FC<UploadOnlyFromLocalProps> = ({
}) => {
return (
<Uploader onUpload={onUpload} disabled={disabled} limit={limit}>
{
hovering => (
<div className={`
{hovering => (
<div
className={`
relative flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer
${hovering && 'bg-gray-100'}
`}>
<ImagePlus className='w-4 h-4 text-gray-500' />
</div>
)
}
`}
>
<ImagePlus className="w-4 h-4 text-gray-500" />
</div>
)}
</Uploader>
)
}
@@ -54,13 +55,16 @@ const UploaderButton: FC<UploaderButtonProps> = ({
const { t } = useTranslation()
const [open, setOpen] = useState(false)
const hasUploadFromLocal = methods.find(method => method === TransferMethod.local_file)
const hasUploadFromLocal = methods.find(
method => method === TransferMethod.local_file,
)
const handleUpload = (imageFile: ImageFile) => {
setOpen(false)
onUpload(imageFile)
}
const closePopover = () => setOpen(false)
const handleToggle = () => {
if (disabled)
return
@@ -72,43 +76,46 @@ const UploaderButton: FC<UploaderButtonProps> = ({
<PortalToFollowElem
open={open}
onOpenChange={setOpen}
placement='top-start'
placement="top-start"
>
<PortalToFollowElemTrigger onClick={handleToggle}>
<div className={`
relative flex items-center justify-center w-8 h-8 hover:bg-gray-100 rounded-lg
${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
`}>
<ImagePlus className='w-4 h-4 text-gray-500' />
</div>
<button
type="button"
disabled={disabled}
className="relative flex items-center justify-center w-8 h-8 enabled:hover:bg-gray-100 rounded-lg disabled:cursor-not-allowed"
>
<ImagePlus className="w-4 h-4 text-gray-500" />
</button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-50'>
<div className='p-2 w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg'>
<PortalToFollowElemContent className="z-50">
<div className="p-2 w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg">
<ImageLinkInput onUpload={handleUpload} />
{
hasUploadFromLocal && (
<>
<div className='flex items-center mt-2 px-2 text-xs font-medium text-gray-400'>
<div className='mr-3 w-[93px] h-[1px] bg-gradient-to-l from-[#F3F4F6]' />
OR
<div className='ml-3 w-[93px] h-[1px] bg-gradient-to-r from-[#F3F4F6]' />
</div>
<Uploader onUpload={handleUpload} limit={limit}>
{
hovering => (
<div className={`
flex items-center justify-center h-8 text-[13px] font-medium text-[#155EEF] rounded-lg cursor-pointer
${hovering && 'bg-primary-50'}
`}>
<Upload03 className='mr-1 w-4 h-4' />
{t('common.imageUploader.uploadFromComputer')}
</div>
)
}
</Uploader>
</>
)
}
{hasUploadFromLocal && (
<>
<div className="flex items-center mt-2 px-2 text-xs font-medium text-gray-400">
<div className="mr-3 w-[93px] h-[1px] bg-gradient-to-l from-[#F3F4F6]" />
OR
<div className="ml-3 w-[93px] h-[1px] bg-gradient-to-r from-[#F3F4F6]" />
</div>
<Uploader
onUpload={handleUpload}
limit={limit}
closePopover={closePopover}
>
{hovering => (
<div
className={cn(
'flex items-center justify-center h-8 text-[13px] font-medium text-[#155EEF] rounded-lg cursor-pointer',
hovering && 'bg-primary-50',
)}
>
<Upload03 className="mr-1 w-4 h-4" />
{t('common.imageUploader.uploadFromComputer')}
</div>
)}
</Uploader>
</>
)}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
@@ -125,7 +132,9 @@ const ChatImageUploader: FC<ChatImageUploaderProps> = ({
onUpload,
disabled,
}) => {
const onlyUploadLocal = settings.transfer_methods.length === 1 && settings.transfer_methods[0] === TransferMethod.local_file
const onlyUploadLocal
= settings.transfer_methods.length === 1
&& settings.transfer_methods[0] === TransferMethod.local_file
if (onlyUploadLocal) {
return (