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

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/app/components/base/file-uploader/audio-preview.tsx
View File

@@ -19,7 +19,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({
return createPortal(
<div
className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]'
className='fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8'
onClick={e => e.stopPropagation()}
tabIndex={-1}
>
@@ -28,18 +28,17 @@ const AudioPreview: FC<AudioPreviewProps> = ({
<source
type="audio/mpeg"
src={url}
className='max-w-full max-h-full'
className='max-h-full max-w-full'
/>
</audio>
</div>
<div
className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/[0.08] rounded-lg backdrop-blur-[2px] cursor-pointer'
className='absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]'
onClick={onCancel}
>
<RiCloseLine className='w-4 h-4 text-gray-500'/>
<RiCloseLine className='h-4 w-4 text-gray-500'/>
</div>
</div>
,
</div>,
document.body,
)
}

16
web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
View File

@@ -60,16 +60,16 @@ const FileFromLinkOrLocal = ({
{trigger(open)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1001]'>
<div className='p-3 w-[280px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
<div className='w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg'>
{
showFromLink && (
<>
<div className={cn(
'flex items-center p-1 h-8 bg-components-input-bg-active border border-components-input-border-active rounded-lg shadow-xs',
'flex h-8 items-center rounded-lg border border-components-input-border-active bg-components-input-bg-active p-1 shadow-xs',
showError && 'border-components-input-border-destructive',
)}>
<input
className='grow block mr-0.5 px-1 bg-transparent system-sm-regular outline-none appearance-none'
className='system-sm-regular mr-0.5 block grow appearance-none bg-transparent px-1 outline-none'
placeholder={t('common.fileUploader.pasteFileLinkInputPlaceholder') || ''}
value={url}
onChange={(e) => {
@@ -90,7 +90,7 @@ const FileFromLinkOrLocal = ({
</div>
{
showError && (
<div className='mt-0.5 body-xs-regular text-text-destructive'>
<div className='body-xs-regular mt-0.5 text-text-destructive'>
{t('common.fileUploader.pasteFileLinkInvalid')}
</div>
)
@@ -100,10 +100,10 @@ const FileFromLinkOrLocal = ({
}
{
showFromLink && showFromLocal && (
<div className='flex items-center p-2 h-7 system-2xs-medium-uppercase text-text-quaternary'>
<div className='mr-2 w-[93px] h-[1px] bg-gradient-to-l from-[rgba(16,24,40,0.08)]' />
<div className='system-2xs-medium-uppercase flex h-7 items-center p-2 text-text-quaternary'>
<div className='mr-2 h-[1px] w-[93px] bg-gradient-to-l from-[rgba(16,24,40,0.08)]' />
OR
<div className='ml-2 w-[93px] h-[1px] bg-gradient-to-r from-[rgba(16,24,40,0.08)]' />
<div className='ml-2 h-[1px] w-[93px] bg-gradient-to-r from-[rgba(16,24,40,0.08)]' />
</div>
)
}
@@ -114,7 +114,7 @@ const FileFromLinkOrLocal = ({
variant='secondary-accent'
disabled={disabled}
>
<RiUploadCloud2Line className='mr-1 w-4 h-4' />
<RiUploadCloud2Line className='mr-1 h-4 w-4' />
{t('common.fileUploader.uploadFromComputer')}
<FileInput fileConfig={fileConfig} />
</Button>

2
web/app/components/base/file-uploader/file-image-render.tsx
View File

@@ -19,7 +19,7 @@ const FileImageRender = ({
return (
<div className={cn('border-[2px] border-effects-image-frame shadow-xs', className)}>
<img
className={cn('w-full h-full object-cover', showDownloadAction && 'cursor-pointer')}
className={cn('h-full w-full object-cover', showDownloadAction && 'cursor-pointer')}
alt={alt || 'Preview'}
onLoad={onLoad}
onError={onError}

2
web/app/components/base/file-uploader/file-input.tsx
View File

@@ -35,7 +35,7 @@ const FileInput = ({
return (
<input
className='absolute block inset-0 opacity-0 text-[0] w-full disabled:cursor-not-allowed cursor-pointer'
className='absolute inset-0 block w-full cursor-pointer text-[0] opacity-0 disabled:cursor-not-allowed'
onClick={e => ((e.target as HTMLInputElement).value = '')}
type='file'
onChange={handleChange}

14
web/app/components/base/file-uploader/file-list-in-log.tsx
View File

@@ -38,7 +38,7 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
<div className={cn('px-3 py-2', expanded && 'py-3', !noBorder && 'border-t border-divider-subtle', noPadding && '!p-0')}>
<div className='flex justify-between gap-1'>
{expanded && (
<div className='grow py-1 text-text-secondary system-xs-semibold-uppercase cursor-pointer' onClick={() => setExpanded(!expanded)}>{t('appLog.runDetail.fileListLabel')}</div>
<div className='system-xs-semibold-uppercase grow cursor-pointer py-1 text-text-secondary' onClick={() => setExpanded(!expanded)}>{t('appLog.runDetail.fileListLabel')}</div>
)}
{!expanded && (
<div className='flex gap-1'>
@@ -53,7 +53,7 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
>
<div key={id}>
<FileImageRender
className='w-8 h-8'
className='h-8 w-8'
imageUrl={base64Url || url || ''}
/>
</div>
@@ -63,7 +63,7 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
<Tooltip
popupContent={name}
>
<div key={id} className='p-1.5 rounded-md bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border shadow-xs'>
<div key={id} className='rounded-md border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-1.5 shadow-xs'>
<FileTypeIcon
type={getFileAppearanceType(name, type)}
size='md'
@@ -76,15 +76,15 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
})}
</div>
)}
<div className='flex items-center gap-1 cursor-pointer' onClick={() => setExpanded(!expanded)}>
{!expanded && <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appLog.runDetail.fileListDetail')}</div>}
<RiArrowRightSLine className={cn('w-4 h-4 text-text-tertiary', expanded && 'rotate-90')} />
<div className='flex cursor-pointer items-center gap-1' onClick={() => setExpanded(!expanded)}>
{!expanded && <div className='system-xs-medium-uppercase text-text-tertiary'>{t('appLog.runDetail.fileListDetail')}</div>}
<RiArrowRightSLine className={cn('h-4 w-4 text-text-tertiary', expanded && 'rotate-90')} />
</div>
</div>
{expanded && (
<div className='flex flex-col gap-3'>
{fileList.map(item => (
<div key={item.varName} className='flex flex-col gap-1 system-xs-regular'>
<div key={item.varName} className='system-xs-regular flex flex-col gap-1'>
<div className='py-1 text-text-tertiary '>{item.varName}</div>
{item.list.map(file => (
<FileItem

26
web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
View File

@@ -47,14 +47,14 @@ const FileInAttachmentItem = ({
return (
<>
<div className={cn(
'flex items-center pr-3 h-12 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs',
progress === -1 && 'bg-state-destructive-hover border-state-destructive-border',
'flex h-12 items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pr-3 shadow-xs',
progress === -1 && 'border-state-destructive-border bg-state-destructive-hover',
)}>
<div className='flex items-center justify-center w-12 h-12'>
<div className='flex h-12 w-12 items-center justify-center'>
{
isImageFile && (
<FileImageRender
className='w-8 h-8'
className='h-8 w-8'
imageUrl={base64Url || url || ''}
/>
)
@@ -68,14 +68,14 @@ const FileInAttachmentItem = ({
)
}
</div>
<div className='grow w-0 mr-1'>
<div className='mr-1 w-0 grow'>
<div
className='flex items-center mb-0.5 system-xs-medium text-text-secondary truncate'
className='system-xs-medium mb-0.5 flex items-center truncate text-text-secondary'
title={file.name}
>
<div className='truncate'>{name}</div>
</div>
<div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
<div className='system-2xs-medium-uppercase flex items-center text-text-tertiary'>
{
ext && (
<span>{ext.toLowerCase()}</span>
@@ -83,7 +83,7 @@ const FileInAttachmentItem = ({
}
{
ext && (
<span className='mx-1 system-2xs-medium'>•</span>
<span className='system-2xs-medium mx-1'>•</span>
)
}
{
@@ -93,7 +93,7 @@ const FileInAttachmentItem = ({
}
</div>
</div>
<div className='shrink-0 flex items-center'>
<div className='flex shrink-0 items-center'>
{
progress >= 0 && !fileIsUploaded(file) && (
<ProgressCircle
@@ -108,21 +108,21 @@ const FileInAttachmentItem = ({
className='mr-1'
onClick={() => onReUpload?.(id)}
>
<ReplayLine className='w-4 h-4 text-text-tertiary' />
<ReplayLine className='h-4 w-4 text-text-tertiary' />
</ActionButton>
)
}
{
showDeleteAction && (
<ActionButton onClick={() => onRemove?.(id)}>
<RiDeleteBinLine className='w-4 h-4' />
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
)
}
{
canPreview && isImageFile && (
<ActionButton className='mr-1' onClick={() => setImagePreviewUrl(url || '')}>
<RiEyeLine className='w-4 h-4' />
<RiEyeLine className='h-4 w-4' />
</ActionButton>
)
}
@@ -132,7 +132,7 @@ const FileInAttachmentItem = ({
e.stopPropagation()
downloadFile(url || base64Url || '', name)
}}>
<RiDownloadLine className='w-4 h-4' />
<RiDownloadLine className='h-4 w-4' />
</ActionButton>
)
}

8
web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
View File

@@ -23,7 +23,7 @@ import { TransferMethod } from '@/types/app'
type Option = {
value: string
label: string
icon: JSX.Element
icon: React.JSX.Element
}
type FileUploaderInAttachmentProps = {
fileConfig: FileUpload
@@ -41,12 +41,12 @@ const FileUploaderInAttachment = ({
{
value: TransferMethod.local_file,
label: t('common.fileUploader.uploadFromComputer'),
icon: <RiUploadCloud2Line className='w-4 h-4' />,
icon: <RiUploadCloud2Line className='h-4 w-4' />,
},
{
value: TransferMethod.remote_url,
label: t('common.fileUploader.pasteFileLink'),
icon: <RiLink className='w-4 h-4' />,
icon: <RiLink className='h-4 w-4' />,
},
]
@@ -55,7 +55,7 @@ const FileUploaderInAttachment = ({
<Button
key={option.value}
variant='tertiary'
className={cn('grow relative', open && 'bg-components-button-tertiary-bg-hover')}
className={cn('relative grow', open && 'bg-components-button-tertiary-bg-hover')}
disabled={!!(fileConfig.number_limits && files.length >= fileConfig.number_limits)}
>
{option.icon}

18
web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
View File

@@ -42,21 +42,21 @@ const FileImageItem = ({
{
showDeleteAction && (
<Button
className='hidden group-hover/file-image:flex absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-[11]'
className='absolute -right-1.5 -top-1.5 z-[11] hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex'
onClick={() => onRemove?.(id)}
>
<RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
<RiCloseLine className='h-4 w-4 text-components-button-secondary-text' />
</Button>
)
}
<FileImageRender
className='w-[68px] h-[68px] shadow-md'
className='h-[68px] w-[68px] shadow-md'
imageUrl={base64Url || url || ''}
showDownloadAction={showDownloadAction}
/>
{
progress >= 0 && !fileIsUploaded(file) && (
<div className='absolute inset-0 flex items-center justify-center border-[2px] border-effects-image-frame bg-background-overlay-alt z-10'>
<div className='absolute inset-0 z-10 flex items-center justify-center border-[2px] border-effects-image-frame bg-background-overlay-alt'>
<ProgressCircle
percentage={progress}
size={12}
@@ -69,9 +69,9 @@ const FileImageItem = ({
}
{
progress === -1 && (
<div className='absolute inset-0 flex items-center justify-center border-[2px] border-state-destructive-border bg-background-overlay-destructive z-10'>
<div className='absolute inset-0 z-10 flex items-center justify-center border-[2px] border-state-destructive-border bg-background-overlay-destructive'>
<ReplayLine
className='w-5 h-5'
className='h-5 w-5'
onClick={() => onReUpload?.(id)}
/>
</div>
@@ -79,15 +79,15 @@ const FileImageItem = ({
}
{
showDownloadAction && (
<div className='hidden group-hover/file-image:block absolute inset-0.5 bg-background-overlay-alt bg-opacity-[0.3] z-10'>
<div className='absolute inset-0.5 z-10 hidden bg-background-overlay-alt bg-opacity-[0.3] group-hover/file-image:block'>
<div
className='absolute bottom-0.5 right-0.5 flex items-center justify-center w-6 h-6 rounded-lg bg-components-actionbar-bg shadow-md'
className='absolute bottom-0.5 right-0.5 flex h-6 w-6 items-center justify-center rounded-lg bg-components-actionbar-bg shadow-md'
onClick={(e) => {
e.stopPropagation()
downloadFile(url || base64Url || '', name)
}}
>
<RiDownloadLine className='w-4 h-4 text-text-tertiary' />
<RiDownloadLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
)

18
web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
View File

@@ -50,31 +50,31 @@ const FileItem = ({
<>
<div
className={cn(
'group/file-item relative p-2 w-[144px] h-[68px] rounded-lg border-[0.5px] border-components-panel-border bg-components-card-bg shadow-xs',
'group/file-item relative h-[68px] w-[144px] rounded-lg border-[0.5px] border-components-panel-border bg-components-card-bg p-2 shadow-xs',
!uploadError && 'hover:bg-components-card-bg-alt',
uploadError && 'border border-state-destructive-border bg-state-destructive-hover',
uploadError && 'hover:border-[0.5px] hover:border-state-destructive-border bg-state-destructive-hover-alt',
uploadError && 'bg-state-destructive-hover-alt hover:border-[0.5px] hover:border-state-destructive-border',
)}
>
{
showDeleteAction && (
<Button
className='hidden group-hover/file-item:flex absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-[11]'
className='absolute -right-1.5 -top-1.5 z-[11] hidden h-5 w-5 rounded-full p-0 group-hover/file-item:flex'
onClick={() => onRemove?.(id)}
>
<RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
<RiCloseLine className='h-4 w-4 text-components-button-secondary-text' />
</Button>
)
}
<div
className='mb-1 h-8 line-clamp-2 system-xs-medium text-text-tertiary break-all cursor-pointer'
className='system-xs-medium mb-1 line-clamp-2 h-8 cursor-pointer break-all text-text-tertiary'
title={name}
onClick={() => canPreview && setPreviewUrl(tmp_preview_url || '')}
>
{name}
</div>
<div className='relative flex items-center justify-between'>
<div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
<div className='system-2xs-medium-uppercase flex items-center text-text-tertiary'>
<FileTypeIcon
size='sm'
type={getFileAppearanceType(name, type)}
@@ -96,13 +96,13 @@ const FileItem = ({
showDownloadAction && tmp_preview_url && (
<ActionButton
size='m'
className='hidden group-hover/file-item:flex absolute -right-1 -top-1'
className='absolute -right-1 -top-1 hidden group-hover/file-item:flex'
onClick={(e) => {
e.stopPropagation()
downloadFile(tmp_preview_url || '', name)
}}
>
<RiDownloadLine className='w-3.5 h-3.5 text-text-tertiary' />
<RiDownloadLine className='h-3.5 w-3.5 text-text-tertiary' />
</ActionButton>
)
}
@@ -118,7 +118,7 @@ const FileItem = ({
{
uploadError && (
<ReplayLine
className='w-4 h-4 text-text-tertiary'
className='h-4 w-4 text-text-tertiary'
onClick={() => onReUpload?.(id)}
/>
)

2
web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
View File

@@ -23,7 +23,7 @@ const FileUploaderInChatInput = ({
size='l'
className={cn(open && 'bg-state-base-hover')}
>
<RiAttachmentLine className='w-5 h-5' />
<RiAttachmentLine className='h-5 w-5' />
</ActionButton>
)
}, [])

18
web/app/components/base/file-uploader/pdf-preview.tsx
View File

@@ -47,18 +47,18 @@ const PdfPreview: FC<PdfPreviewProps> = ({
return createPortal(
<div
className={`fixed inset-0 flex items-center justify-center bg-black/80 z-[1000] ${!isMobile && 'p-8'}`}
className={`fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 ${!isMobile && 'p-8'}`}
onClick={e => e.stopPropagation()}
tabIndex={-1}
>
<div
className='h-[95vh] w-[100vw] max-w-full max-h-full overflow-hidden'
className='h-[95vh] max-h-full w-[100vw] max-w-full overflow-hidden'
style={{ transform: `scale(${scale})`, transformOrigin: 'center', scrollbarWidth: 'none', msOverflowStyle: 'none' }}
>
<PdfLoader
workerSrc='/pdf.worker.min.mjs'
url={url}
beforeLoad={<div className='flex justify-center items-center h-64'><Loading type='app' /></div>}
beforeLoad={<div className='flex h-64 items-center justify-center'><Loading type='app' /></div>}
>
{(pdfDocument) => {
return (
@@ -76,22 +76,22 @@ const PdfPreview: FC<PdfPreviewProps> = ({
</PdfLoader>
</div>
<Tooltip popupContent={t('common.operation.zoomOut')}>
<div className='absolute top-6 right-24 flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
<div className='absolute right-24 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg'
onClick={zoomOut}>
<RiZoomOutLine className='w-4 h-4 text-gray-500'/>
<RiZoomOutLine className='h-4 w-4 text-gray-500'/>
</div>
</Tooltip>
<Tooltip popupContent={t('common.operation.zoomIn')}>
<div className='absolute top-6 right-16 flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
<div className='absolute right-16 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg'
onClick={zoomIn}>
<RiZoomInLine className='w-4 h-4 text-gray-500'/>
<RiZoomInLine className='h-4 w-4 text-gray-500'/>
</div>
</Tooltip>
<Tooltip popupContent={t('common.operation.cancel')}>
<div
className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/8 rounded-lg backdrop-blur-[2px] cursor-pointer'
className='absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]'
onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-gray-500'/>
<RiCloseLine className='h-4 w-4 text-gray-500'/>
</div>
</Tooltip>
</div>,

2
web/app/components/base/file-uploader/store.tsx
View File

@@ -54,7 +54,7 @@ export const FileContextProvider = ({
value,
onChange,
}: FileProviderProps) => {
const storeRef = useRef<FileStore>()
const storeRef = useRef<FileStore | undefined>(undefined)
if (!storeRef.current)
storeRef.current = createFileStore(value, onChange)

12
web/app/components/base/file-uploader/video-preview.tsx
View File

@@ -18,7 +18,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({
return createPortal(
<div
className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]'
className='fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8'
onClick={e => e.stopPropagation()}
tabIndex={-1}
>
@@ -27,18 +27,18 @@ const VideoPreview: FC<VideoPreviewProps> = ({
<source
type="video/mp4"
src={url}
className='max-w-full max-h-full'
className='max-h-full max-w-full'
/>
</video>
</div>
<div
className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/[0.08] rounded-lg backdrop-blur-[2px] cursor-pointer'
className='absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]'
onClick={onCancel}
>
<RiCloseLine className='w-4 h-4 text-gray-500'/>
<RiCloseLine className='h-4 w-4 text-gray-500'/>
</div>
</div>
, document.body,
</div>,
document.body,
)
}