dify
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
RiCloseLine,
|
||||
RiDownloadLine,
|
||||
} from '@remixicon/react'
|
||||
import FileImageRender from '../file-image-render'
|
||||
import type { FileEntity } from '../types'
|
||||
import {
|
||||
downloadFile,
|
||||
fileIsUploaded,
|
||||
} from '../utils'
|
||||
import Button from '@/app/components/base/button'
|
||||
import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
|
||||
import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
|
||||
import ImagePreview from '@/app/components/base/image-uploader/image-preview'
|
||||
|
||||
type FileImageItemProps = {
|
||||
file: FileEntity
|
||||
showDeleteAction?: boolean
|
||||
showDownloadAction?: boolean
|
||||
canPreview?: boolean
|
||||
onRemove?: (fileId: string) => void
|
||||
onReUpload?: (fileId: string) => void
|
||||
}
|
||||
const FileImageItem = ({
|
||||
file,
|
||||
showDeleteAction,
|
||||
showDownloadAction,
|
||||
canPreview,
|
||||
onRemove,
|
||||
onReUpload,
|
||||
}: FileImageItemProps) => {
|
||||
const { id, progress, base64Url, url, name } = file
|
||||
const [imagePreviewUrl, setImagePreviewUrl] = useState('')
|
||||
const download_url = url ? `${url}&as_attachment=true` : base64Url
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className='group/file-image relative cursor-pointer'
|
||||
onClick={() => canPreview && setImagePreviewUrl(base64Url || url || '')}
|
||||
>
|
||||
{
|
||||
showDeleteAction && (
|
||||
<Button
|
||||
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='h-4 w-4 text-components-button-secondary-text' />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
<FileImageRender
|
||||
className='h-[68px] w-[68px] shadow-md'
|
||||
imageUrl={base64Url || url || ''}
|
||||
showDownloadAction={showDownloadAction}
|
||||
/>
|
||||
{
|
||||
progress >= 0 && !fileIsUploaded(file) && (
|
||||
<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}
|
||||
circleStrokeColor='stroke-components-progress-white-border'
|
||||
circleFillColor='fill-transparent'
|
||||
sectorFillColor='fill-components-progress-white-progress'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
progress === -1 && (
|
||||
<div className='absolute inset-0 z-10 flex items-center justify-center border-[2px] border-state-destructive-border bg-background-overlay-destructive'>
|
||||
<ReplayLine
|
||||
className='h-5 w-5'
|
||||
onClick={() => onReUpload?.(id)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
showDownloadAction && (
|
||||
<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 h-6 w-6 items-center justify-center rounded-lg bg-components-actionbar-bg shadow-md'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
downloadFile(download_url || '', name)
|
||||
}}
|
||||
>
|
||||
<RiDownloadLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
imagePreviewUrl && canPreview && (
|
||||
<ImagePreview
|
||||
title={name}
|
||||
url={imagePreviewUrl}
|
||||
onCancel={() => setImagePreviewUrl('')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileImageItem
|
||||
@@ -0,0 +1,156 @@
|
||||
import {
|
||||
RiCloseLine,
|
||||
RiDownloadLine,
|
||||
} from '@remixicon/react'
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
downloadFile,
|
||||
fileIsUploaded,
|
||||
getFileAppearanceType,
|
||||
getFileExtension,
|
||||
} from '../utils'
|
||||
import FileTypeIcon from '../file-type-icon'
|
||||
import type { FileEntity } from '../types'
|
||||
import cn from '@/utils/classnames'
|
||||
import { formatFileSize } from '@/utils/format'
|
||||
import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
|
||||
import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import Button from '@/app/components/base/button'
|
||||
import PdfPreview from '@/app/components/base/file-uploader/dynamic-pdf-preview'
|
||||
import AudioPreview from '@/app/components/base/file-uploader/audio-preview'
|
||||
import VideoPreview from '@/app/components/base/file-uploader/video-preview'
|
||||
|
||||
type FileItemProps = {
|
||||
file: FileEntity
|
||||
showDeleteAction?: boolean
|
||||
showDownloadAction?: boolean
|
||||
canPreview?: boolean
|
||||
onRemove?: (fileId: string) => void
|
||||
onReUpload?: (fileId: string) => void
|
||||
}
|
||||
const FileItem = ({
|
||||
file,
|
||||
showDeleteAction,
|
||||
showDownloadAction = true,
|
||||
onRemove,
|
||||
onReUpload,
|
||||
canPreview,
|
||||
}: FileItemProps) => {
|
||||
const { id, name, type, progress, url, base64Url, isRemote } = file
|
||||
const [previewUrl, setPreviewUrl] = useState('')
|
||||
const ext = getFileExtension(name, type, isRemote)
|
||||
const uploadError = progress === -1
|
||||
|
||||
let tmp_preview_url = url || base64Url
|
||||
if (!tmp_preview_url && file?.originalFile)
|
||||
tmp_preview_url = URL.createObjectURL(file.originalFile.slice()).toString()
|
||||
const download_url = url ? `${url}&as_attachment=true` : base64Url
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
'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 && 'bg-state-destructive-hover-alt hover:border-[0.5px] hover:border-state-destructive-border',
|
||||
)}
|
||||
>
|
||||
{
|
||||
showDeleteAction && (
|
||||
<Button
|
||||
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='h-4 w-4 text-components-button-secondary-text' />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
<div
|
||||
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='system-2xs-medium-uppercase flex items-center text-text-tertiary'>
|
||||
<FileTypeIcon
|
||||
size='sm'
|
||||
type={getFileAppearanceType(name, type)}
|
||||
className='mr-1'
|
||||
/>
|
||||
{
|
||||
ext && (
|
||||
<>
|
||||
{ext}
|
||||
<div className='mx-1'>·</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
!!file.size && formatFileSize(file.size)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
showDownloadAction && download_url && (
|
||||
<ActionButton
|
||||
size='m'
|
||||
className='absolute -right-1 -top-1 hidden group-hover/file-item:flex'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
downloadFile(download_url || '', name)
|
||||
}}
|
||||
>
|
||||
<RiDownloadLine className='h-3.5 w-3.5 text-text-tertiary' />
|
||||
</ActionButton>
|
||||
)
|
||||
}
|
||||
{
|
||||
progress >= 0 && !fileIsUploaded(file) && (
|
||||
<ProgressCircle
|
||||
percentage={progress}
|
||||
size={12}
|
||||
className='shrink-0'
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
uploadError && (
|
||||
<ReplayLine
|
||||
className='h-4 w-4 text-text-tertiary'
|
||||
onClick={() => onReUpload?.(id)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
type.split('/')[0] === 'audio' && canPreview && previewUrl && (
|
||||
<AudioPreview
|
||||
title={name}
|
||||
url={previewUrl}
|
||||
onCancel={() => setPreviewUrl('')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
type.split('/')[0] === 'video' && canPreview && previewUrl && (
|
||||
<VideoPreview
|
||||
title={name}
|
||||
url={previewUrl}
|
||||
onCancel={() => setPreviewUrl('')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
type.split('/')[1] === 'pdf' && canPreview && previewUrl && (
|
||||
<PdfPreview url={previewUrl} onCancel={() => { setPreviewUrl('') }} />
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileItem
|
||||
@@ -0,0 +1,82 @@
|
||||
import { useFile } from '../hooks'
|
||||
import { useStore } from '../store'
|
||||
import type { FileEntity } from '../types'
|
||||
import FileImageItem from './file-image-item'
|
||||
import FileItem from './file-item'
|
||||
import type { FileUpload } from '@/app/components/base/features/types'
|
||||
import { SupportUploadFileTypes } from '@/app/components/workflow/types'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type FileListProps = {
|
||||
className?: string
|
||||
files: FileEntity[]
|
||||
onRemove?: (fileId: string) => void
|
||||
onReUpload?: (fileId: string) => void
|
||||
showDeleteAction?: boolean
|
||||
showDownloadAction?: boolean
|
||||
canPreview?: boolean
|
||||
}
|
||||
export const FileList = ({
|
||||
className,
|
||||
files,
|
||||
onReUpload,
|
||||
onRemove,
|
||||
showDeleteAction = true,
|
||||
showDownloadAction = false,
|
||||
canPreview = true,
|
||||
}: FileListProps) => {
|
||||
return (
|
||||
<div className={cn('flex flex-wrap gap-2', className)}>
|
||||
{
|
||||
files.map((file) => {
|
||||
if (file.supportFileType === SupportUploadFileTypes.image) {
|
||||
return (
|
||||
<FileImageItem
|
||||
key={file.id}
|
||||
file={file}
|
||||
showDeleteAction={showDeleteAction}
|
||||
showDownloadAction={showDownloadAction}
|
||||
onRemove={onRemove}
|
||||
onReUpload={onReUpload}
|
||||
canPreview={canPreview}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<FileItem
|
||||
key={file.id}
|
||||
file={file}
|
||||
showDeleteAction={showDeleteAction}
|
||||
showDownloadAction={showDownloadAction}
|
||||
onRemove={onRemove}
|
||||
onReUpload={onReUpload}
|
||||
canPreview={canPreview}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
type FileListInChatInputProps = {
|
||||
fileConfig: FileUpload
|
||||
}
|
||||
export const FileListInChatInput = ({
|
||||
fileConfig,
|
||||
}: FileListInChatInputProps) => {
|
||||
const files = useStore(s => s.files)
|
||||
const {
|
||||
handleRemoveFile,
|
||||
handleReUploadFile,
|
||||
} = useFile(fileConfig)
|
||||
|
||||
return (
|
||||
<FileList
|
||||
files={files}
|
||||
onReUpload={handleReUploadFile}
|
||||
onRemove={handleRemoveFile}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import { useState } from 'react'
|
||||
import FileUploaderInChatInput from '.'
|
||||
import { FileContextProvider } from '../store'
|
||||
import type { FileEntity } from '../types'
|
||||
import type { FileUpload } from '@/app/components/base/features/types'
|
||||
import { SupportUploadFileTypes } from '@/app/components/workflow/types'
|
||||
import { TransferMethod } from '@/types/app'
|
||||
import { FileList } from '../file-uploader-in-chat-input/file-list'
|
||||
import { ToastProvider } from '@/app/components/base/toast'
|
||||
|
||||
const mockFiles: FileEntity[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Dataset.csv',
|
||||
size: 64000,
|
||||
type: 'text/csv',
|
||||
progress: 100,
|
||||
transferMethod: TransferMethod.local_file,
|
||||
supportFileType: SupportUploadFileTypes.document,
|
||||
},
|
||||
]
|
||||
|
||||
const chatUploadConfig: FileUpload = {
|
||||
enabled: true,
|
||||
allowed_file_upload_methods: [TransferMethod.local_file, TransferMethod.remote_url],
|
||||
allowed_file_types: ['image', 'document'],
|
||||
number_limits: 3,
|
||||
}
|
||||
|
||||
type ChatInputDemoProps = React.ComponentProps<typeof FileUploaderInChatInput> & {
|
||||
initialFiles?: FileEntity[]
|
||||
}
|
||||
|
||||
const ChatInputDemo = ({ initialFiles = mockFiles, ...props }: ChatInputDemoProps) => {
|
||||
const [files, setFiles] = useState<FileEntity[]>(initialFiles)
|
||||
|
||||
return (
|
||||
<ToastProvider>
|
||||
<FileContextProvider value={files} onChange={setFiles}>
|
||||
<div className="w-[360px] rounded-2xl border border-divider-subtle bg-components-panel-bg p-4">
|
||||
<div className="mb-3 text-xs text-text-secondary">Simulated chat input</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileUploaderInChatInput {...props} />
|
||||
<div className="flex-1 rounded-lg border border-divider-subtle bg-background-default-subtle p-2 text-xs text-text-tertiary">Type a message...</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<FileList files={files} />
|
||||
</div>
|
||||
</div>
|
||||
</FileContextProvider>
|
||||
</ToastProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Data Entry/FileUploaderInChatInput',
|
||||
component: ChatInputDemo,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Attachment trigger suited for chat inputs. Demonstrates integration with the shared file store and preview list.',
|
||||
},
|
||||
},
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
navigation: {
|
||||
pathname: '/chats/demo',
|
||||
params: { appId: 'demo-app' },
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
fileConfig: chatUploadConfig,
|
||||
initialFiles: mockFiles,
|
||||
},
|
||||
} satisfies Meta<typeof ChatInputDemo>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Playground: Story = {
|
||||
render: args => <ChatInputDemo {...args} />,
|
||||
}
|
||||
|
||||
export const RemoteOnly: Story = {
|
||||
args: {
|
||||
fileConfig: {
|
||||
...chatUploadConfig,
|
||||
allowed_file_upload_methods: [TransferMethod.remote_url],
|
||||
},
|
||||
initialFiles: [],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
} from 'react'
|
||||
import {
|
||||
RiAttachmentLine,
|
||||
} from '@remixicon/react'
|
||||
import FileFromLinkOrLocal from '../file-from-link-or-local'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { FileUpload } from '@/app/components/base/features/types'
|
||||
import { TransferMethod } from '@/types/app'
|
||||
|
||||
type FileUploaderInChatInputProps = {
|
||||
fileConfig: FileUpload
|
||||
}
|
||||
const FileUploaderInChatInput = ({
|
||||
fileConfig,
|
||||
}: FileUploaderInChatInputProps) => {
|
||||
const renderTrigger = useCallback((open: boolean) => {
|
||||
return (
|
||||
<ActionButton
|
||||
size='l'
|
||||
className={cn(open && 'bg-state-base-hover')}
|
||||
>
|
||||
<RiAttachmentLine className='h-5 w-5' />
|
||||
</ActionButton>
|
||||
)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<FileFromLinkOrLocal
|
||||
trigger={renderTrigger}
|
||||
fileConfig={fileConfig}
|
||||
showFromLocal={fileConfig?.allowed_file_upload_methods?.includes(TransferMethod.local_file)}
|
||||
showFromLink={fileConfig?.allowed_file_upload_methods?.includes(TransferMethod.remote_url)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(FileUploaderInChatInput)
|
||||
Reference in New Issue
Block a user