file uploader

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

@@ -1,8 +1,9 @@
 import { memo } from 'react'
-import { RiDeleteBinLine } from '@remixicon/react'
+import {
+  RiDeleteBinLine,
+  RiDownloadLine,
+} from '@remixicon/react'
 import FileTypeIcon from '../file-type-icon'
-import type { FileEntity } from '../types'
-import { useFile } from '../hooks'
 import {
   getFileAppearanceType,
   getFileExtension,
@@ -16,35 +17,46 @@ import cn from '@/utils/classnames'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 
 type FileInAttachmentItemProps = {
-  file: FileEntity
+  fileId: string
+  file: File
+  imageUrl?: string
+  progress?: number
+  showDeleteAction?: boolean
+  showDownloadAction?: boolean
+  onRemove?: (fileId: string) => void
+  onReUpload?: (fileId: string) => void
 }
 const FileInAttachmentItem = ({
+  fileId,
   file,
+  imageUrl,
+  progress = 0,
+  showDeleteAction,
+  showDownloadAction = true,
+  onRemove,
+  onReUpload,
 }: FileInAttachmentItemProps) => {
-  const {
+  const isImageFile = isImage(file)
-    handleRemoveFile,
+  const ext = getFileExtension(file)
-    handleReUploadFile,
-  } = useFile()
-  const ext = getFileExtension(file.file)
 
   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',
-      file.progress === -1 && 'bg-state-destructive-hover border-state-destructive-border',
+      progress === -1 && 'bg-state-destructive-hover border-state-destructive-border',
     )}>
       <div className='flex items-center justify-center w-12 h-12'>
         {
-          isImage(file?.file) && (
+          isImageFile && (
             <FileImageRender
               className='w-8 h-8'
-              imageUrl={file.base64Url || ''}
+              imageUrl={imageUrl || ''}
             />
           )
         }
         {
-          !isImage(file.file) && (
+          !isImageFile && (
             <FileTypeIcon
-              type={getFileAppearanceType(file?.file)}
+              type={getFileAppearanceType(file)}
               size='lg'
             />
           )
@@ -53,9 +65,9 @@ const FileInAttachmentItem = ({
       <div className='grow w-0'>
         <div
           className='mb-0.5 system-xs-medium text-text-secondary truncate'
-          title={file.file?.name}
+          title={file.name}
         >
-          {file.file?.name}
+          {file.name}
         </div>
         <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
           {
@@ -64,31 +76,44 @@ const FileInAttachmentItem = ({
             )
           }
           <span className='mx-1 system-2xs-medium'>•</span>
-          <span>{formatFileSize(file.file?.size || 0)}</span>
+          <span>{formatFileSize(file.size || 0)}</span>
         </div>
       </div>
       <div className='shrink-0 flex items-center'>
         {
-          file.progress >= 0 && file.progress < 100 && (
+          progress > 0 && progress < 100 && (
             <ProgressCircle
               className='mr-2.5'
-              percentage={file.progress}
+              percentage={progress}
             />
           )
         }
         {
-          file.progress === -1 && (
+          progress === -1 && (
             <ActionButton
               className='mr-1'
-              onClick={() => handleReUploadFile(file.id)}
+              onClick={() => onReUpload?.(fileId)}
             >
               <ReplayLine className='w-4 h-4 text-text-tertiary' />
             </ActionButton>
           )
         }
-        <ActionButton onClick={() => handleRemoveFile(file.id)}>
+        {
+          showDeleteAction && (
+            <ActionButton onClick={() => onRemove?.(fileId)}>
               <RiDeleteBinLine className='w-4 h-4' />
             </ActionButton>
+          )
+        }
+        {
+          showDownloadAction && (
+            <ActionButton
+              size='xs'
+            >
+              <RiDownloadLine className='w-3.5 h-3.5 text-text-tertiary' />
+            </ActionButton>
+          )
+        }
       </div>
     </div>
   )

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

@@ -13,7 +13,8 @@ import {
 } from '../store'
 import type { FileEntity } from '../types'
 import FileInput from '../file-input'
-import FileInAttachmentItem from './file-in-attachment-item'
+import { useFile } from '../hooks'
+import FileItem from './file-item'
 import Button from '@/app/components/base/button'
 import cn from '@/utils/classnames'
 
@@ -25,6 +26,10 @@ type Option = {
 const FileUploaderInAttachment = () => {
   const { t } = useTranslation()
   const files = useStore(s => s.files)
+  const {
+    handleRemoveFile,
+    handleReUploadFile,
+  } = useFile()
   const options = [
     {
       value: 'local',
@@ -81,9 +86,16 @@ const FileUploaderInAttachment = () => {
       <div className='mt-1 space-y-1'>
         {
           files.map(file => (
-            <FileInAttachmentItem
+            <FileItem
-              key={file.id}
+              key={file.fileId}
-              file={file}
+              fileId={file.fileId}
+              file={file.file}
+              progress={file.progress}
+              imageUrl={file.base64Url}
+              showDeleteAction
+              showDownloadAction={false}
+              onRemove={() => handleRemoveFile(file.fileId)}
+              onReUpload={() => handleReUploadFile(file.fileId)}
             />
           ))
         }

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

@@ -1,37 +1,46 @@
 import { RiCloseLine } from '@remixicon/react'
 import FileImageRender from '../file-image-render'
-import type { FileEntity } from '../types'
-import { useFile } from '../hooks'
 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'
 
 type FileImageItemProps = {
-  file: FileEntity
+  fileId: string
-  className?: string
+  imageUrl?: string
+  progress?: number
+  showDeleteAction?: boolean
+  onRemove?: (fileId: string) => void
+  onReUpload?: (fileId: string) => void
 }
 const FileImageItem = ({
-  file,
+  fileId,
+  imageUrl,
+  progress = 0,
+  showDeleteAction,
+  onRemove,
+  onReUpload,
 }: FileImageItemProps) => {
-  const { handleRemoveFile } = useFile()
-
   return (
     <div className='group relative'>
+      {
+        showDeleteAction && (
           <Button
             className='hidden group-hover:flex absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-10'
-        onClick={() => handleRemoveFile(file.id)}
+            onClick={() => onRemove?.(fileId)}
           >
             <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
           </Button>
+        )
+      }
       <FileImageRender
         className='w-[68px] h-[68px] shadow-md'
-        imageUrl={file.base64Url || ''}
+        imageUrl={imageUrl || ''}
       />
       {
-        file.progress > 0 && file.progress < 100 && (
+        progress > 0 && progress < 100 && (
           <div className='absolute inset-0 flex items-center justify-center border-[2px] border-effects-image-frame bg-background-overlay-alt'>
             <ProgressCircle
-              percentage={file.progress}
+              percentage={progress}
               size={12}
               circleStrokeColor='stroke-components-progress-white-border'
               circleFillColor='fill-transparent'
@@ -41,9 +50,12 @@ const FileImageItem = ({
         )
       }
       {
-        file.progress === -1 && (
+        progress === -1 && (
           <div className='absolute inset-0 flex items-center justify-center border-[2px] border-state-destructive-border bg-background-overlay-destructive'>
-            <ReplayLine className='w-5 h-5' />
+            <ReplayLine
+              className='w-5 h-5'
+              onClick={() => onReUpload?.(fileId)}
+            />
           </div>
         )
       }

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

@@ -2,12 +2,10 @@ import {
   RiCloseLine,
   RiDownloadLine,
 } from '@remixicon/react'
-import type { FileEntity } from '../types'
 import {
   getFileAppearanceType,
   getFileExtension,
 } from '../utils'
-import { useFile } from '../hooks'
 import FileTypeIcon from '../file-type-icon'
 import cn from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
@@ -17,17 +15,25 @@ import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
 
 type FileItemProps = {
-  file: FileEntity
+  fileId: string
-  showDownload?: boolean
+  file: File
-  className?: string
+  progress?: number
+  showDeleteAction?: boolean
+  showDownloadAction?: boolean
+  onRemove?: (fileId: string) => void
+  onReUpload?: (fileId: string) => void
 }
 const FileItem = ({
+  fileId,
   file,
-  showDownload,
+  progress = 0,
+  showDeleteAction,
+  showDownloadAction = true,
+  onRemove,
+  onReUpload,
 }: FileItemProps) => {
-  const { handleRemoveFile } = useFile()
+  const ext = getFileExtension(file)
-  const ext = getFileExtension(file.file)
+  const uploadError = progress === -1
-  const uploadError = file.progress === -1
 
   return (
     <div
@@ -38,20 +44,24 @@ const FileItem = ({
         uploadError && 'hover:border-[0.5px] hover:border-state-destructive-border bg-state-destructive-hover-alt',
       )}
     >
+      {
+        showDeleteAction && (
           <Button
             className='hidden group-hover:flex absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-10'
-        onClick={() => handleRemoveFile(file.id)}
+            onClick={() => onRemove?.(fileId)}
           >
             <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
           </Button>
+        )
+      }
       <div className='mb-1 h-8 line-clamp-2 system-xs-medium text-text-tertiary'>
-        {file.file?.name}
+        {file.name}
       </div>
       <div className='flex items-center justify-between'>
         <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
           <FileTypeIcon
             size='sm'
-            type={getFileAppearanceType(file.file)}
+            type={getFileAppearanceType(file)}
             className='mr-1'
           />
           {
@@ -62,10 +72,10 @@ const FileItem = ({
               </>
             )
           }
-          {formatFileSize(file.file?.size || 0)}
+          {formatFileSize(file.size || 0)}
         </div>
         {
-          showDownload && (
+          showDownloadAction && (
             <ActionButton
               size='xs'
             >
@@ -74,17 +84,18 @@ const FileItem = ({
           )
         }
         {
-          file.progress > 0 && file.progress < 100 && (
+          progress > 0 && progress < 100 && (
             <ProgressCircle
-              percentage={file.progress}
+              percentage={progress}
               size={12}
             />
           )
         }
         {
-          file.progress === -1 && (
+          uploadError && (
             <ReplayLine
               className='w-4 h-4 text-text-tertiary'
+              onClick={() => onReUpload?.(fileId)}
             />
           )
         }

web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx

@@ -1,10 +1,15 @@
 import { isImage } from '../utils'
+import { useFile } from '../hooks'
 import { useStore } from '../store'
 import FileImageItem from './file-image-item'
 import FileItem from './file-item'
 
 const FileList = () => {
   const files = useStore(s => s.files)
+  const {
+    handleRemoveFile,
+    handleReUploadFile,
+  } = useFile()
 
   return (
     <div className='flex flex-wrap gap-2'>
@@ -13,16 +18,27 @@ const FileList = () => {
           if (isImage(file.file)) {
             return (
               <FileImageItem
-                key={file.id}
+                key={file.fileId}
-                file={file}
+                fileId={file.fileId}
+                imageUrl={file.base64Url}
+                progress={file.progress}
+                showDeleteAction
+                onRemove={handleRemoveFile}
+                onReUpload={handleReUploadFile}
               />
             )
           }
 
           return (
             <FileItem
-              key={file.id}
+              key={file.fileId}
-              file={file}
+              fileId={file.fileId}
+              file={file.file}
+              progress={file.progress}
+              showDeleteAction
+              showDownloadAction={false}
+              onRemove={handleRemoveFile}
+              onReUpload={handleReUploadFile}
             />
           )
         })

web/app/components/base/file-uploader/hooks.ts

@@ -25,7 +25,7 @@ export const useFile = () => {
     } = fileStore.getState()
 
     const newFiles = produce(files, (draft) => {
-      const index = draft.findIndex(file => file.id === newFile.id)
+      const index = draft.findIndex(file => file.fileId === newFile.fileId)
 
       if (index > -1)
         draft[index] = newFile
@@ -41,7 +41,7 @@ export const useFile = () => {
       setFiles,
     } = fileStore.getState()
 
-    const newFiles = files.filter(file => file.id !== fileId)
+    const newFiles = files.filter(file => file.fileId !== fileId)
     setFiles(newFiles)
   }, [fileStore])
 
@@ -50,7 +50,7 @@ export const useFile = () => {
       files,
       setFiles,
     } = fileStore.getState()
-    const index = files.findIndex(file => file.id === fileId)
+    const index = files.findIndex(file => file.fileId === fileId)
 
     if (index > -1) {
       const uploadingFile = files[index]
@@ -94,7 +94,7 @@ export const useFile = () => {
       'load',
       () => {
         const uploadingFile = {
-          id: uuid4(),
+          fileId: uuid4(),
           file,
           url: '',
           progress: 0,
@@ -107,7 +107,7 @@ export const useFile = () => {
             handleAddOrUpdateFiles({ ...uploadingFile, progress })
           },
           onSuccessCallback: (res) => {
-            handleAddOrUpdateFiles({ ...uploadingFile, fileId: res.id, progress: 100 })
+            handleAddOrUpdateFiles({ ...uploadingFile, fileStorageId: res.id, progress: 100 })
           },
           onErrorCallback: () => {
             notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerUploadError') })

web/app/components/base/file-uploader/index.ts

@@ -1,4 +1,6 @@
 export { default as FileUploaderInAttachmentWrapper } from './file-uploader-in-attachment'
+export { default as FileItemInAttachment } from './file-uploader-in-attachment/file-item'
 export { default as FileUploaderInChatInput } from './file-uploader-in-chat-input'
 export { default as FileTypeIcon } from './file-type-icon'
 export { default as FileListInChatInput } from './file-uploader-in-chat-input/file-list'
+export { default as FileItemInChatInput } from './file-uploader-in-chat-input/file-list'

web/app/components/base/file-uploader/types.ts

@@ -16,9 +16,9 @@ export enum FileAppearanceTypeEnum {
 export type FileAppearanceType = keyof typeof FileAppearanceTypeEnum
 
 export type FileEntity = {
-  id: string
+  fileId: string
-  file?: File
+  file: File
-  fileId?: string
+  fileStorageId?: string
   progress: number
   url?: string
   base64Url?: string