add file-uploader

web/app/components/base/file-uploader/file-type-icon.tsx

@@ -0,0 +1,86 @@
+import { memo } from 'react'
+import {
+  RiFile3Fill,
+  RiFileCodeFill,
+  RiFileExcelFill,
+  RiFileGifFill,
+  RiFileImageFill,
+  RiFileMusicFill,
+  RiFilePdf2Fill,
+  RiFilePpt2Fill,
+  RiFileTextFill,
+  RiFileVideoFill,
+  RiFileWordFill,
+  RiMarkdownFill,
+} from '@remixicon/react'
+import { FileTypeEnum } from './types'
+import cn from '@/utils/classnames'
+
+const FILE_TYPE_ICON_MAP = {
+  [FileTypeEnum.PDF]: {
+    component: RiFilePdf2Fill,
+    color: 'text-[#EA3434]',
+  },
+  [FileTypeEnum.IMAGE]: {
+    component: RiFileImageFill,
+    color: 'text-[#00B2EA]',
+  },
+  [FileTypeEnum.VIDEO]: {
+    component: RiFileVideoFill,
+    color: 'text-[#844FDA]',
+  },
+  [FileTypeEnum.AUDIO]: {
+    component: RiFileMusicFill,
+    color: 'text-[#FF3093]',
+  },
+  [FileTypeEnum.DOCUMENT]: {
+    component: RiFileTextFill,
+    color: 'text-[#6F8BB5]',
+  },
+  [FileTypeEnum.CODE]: {
+    component: RiFileCodeFill,
+    color: 'text-[#BCC0D1]',
+  },
+  [FileTypeEnum.MARKDOWN]: {
+    component: RiMarkdownFill,
+    color: 'text-[#309BEC]',
+  },
+  [FileTypeEnum.OTHER]: {
+    component: RiFile3Fill,
+    color: 'text-[#BCC0D1]',
+  },
+  [FileTypeEnum.EXCEL]: {
+    component: RiFileExcelFill,
+    color: 'text-[#01AC49]',
+  },
+  [FileTypeEnum.WORD]: {
+    component: RiFileWordFill,
+    color: 'text-[#2684FF]',
+  },
+  [FileTypeEnum.PPT]: {
+    component: RiFilePpt2Fill,
+    color: 'text-[#FF650F]',
+  },
+  [FileTypeEnum.GIF]: {
+    component: RiFileGifFill,
+    color: 'text-[#00B2EA]',
+  },
+}
+type FileTypeIconProps = {
+  type: keyof typeof FileTypeEnum
+  className?: string
+}
+const FileTypeIcon = ({
+  type,
+  className,
+}: FileTypeIconProps) => {
+  const Icon = FILE_TYPE_ICON_MAP[type].component
+  const color = FILE_TYPE_ICON_MAP[type].color
+
+  if (!Icon)
+    return null
+
+  return <Icon className={cn('w-5 h-5', color, className)} />
+}
+
+export default memo(FileTypeIcon)

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

@@ -0,0 +1,29 @@
+import { memo } from 'react'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
+import FileTypeIcon from '../file-type-icon'
+import ActionButton from '@/app/components/base/action-button'
+
+const FileInAttachmentItem = () => {
+  return (
+    <div className='flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs'>
+      <div className='shrink-0 flex items-center justify-center w-12 h-12'>
+        <FileTypeIcon type='AUDIO' />
+      </div>
+      <div className='grow'>
+        <div className='mb-0.5 system-xs-medium text-text-secondary'>Yellow mountain range.jpg</div>
+        <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
+          <span>JPG</span>
+          <span className='mx-1 system-2xs-medium'>•</span>
+          <span>21.5 MB</span>
+        </div>
+      </div>
+      <ActionButton className='shrink-0 mr-3'>
+        <RiDeleteBinLine className='w-4 h-4' />
+      </ActionButton>
+    </div>
+  )
+}
+
+export default memo(FileInAttachmentItem)

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

@@ -0,0 +1,47 @@
+import { memo } from 'react'
+import {
+  RiLink,
+  RiUploadCloud2Line,
+} from '@remixicon/react'
+import FileInAttachmentItem from './file-in-attachment-item'
+import Button from '@/app/components/base/button'
+
+const FileUploaderInAttachment = () => {
+  const options = [
+    {
+      value: 'local',
+      label: 'Local upload',
+      icon: <RiUploadCloud2Line className='w-4 h-4' />,
+    },
+    {
+      value: 'link',
+      label: 'Paste file link',
+      icon: <RiLink className='w-4 h-4' />,
+    },
+  ]
+
+  return (
+    <div>
+      <div className='flex items-center space-x-1'>
+        {
+          options.map(option => (
+            <Button
+              key={option.value}
+              variant='tertiary'
+              className='grow'
+            >
+              {option.icon}
+              {option.label}
+            </Button>
+          ))
+        }
+      </div>
+      <div className='mt-1 space-y-1'>
+        <FileInAttachmentItem />
+        <FileInAttachmentItem />
+      </div>
+    </div>
+  )
+}
+
+export default memo(FileUploaderInAttachment)

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

@@ -0,0 +1,2 @@
+export { default as FileUploaderInAttachment } from './file-uploader-in-attachment'
+export { default as FileTypeIcon } from './file-type-icon'

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

@@ -0,0 +1,14 @@
+export enum FileTypeEnum {
+  IMAGE = 'IMAGE',
+  VIDEO = 'VIDEO',
+  AUDIO = 'AUDIO',
+  DOCUMENT = 'DOCUMENT',
+  CODE = 'CODE',
+  PDF = 'PDF',
+  MARKDOWN = 'MARKDOWN',
+  EXCEL = 'EXCEL',
+  WORD = 'WORD',
+  PPT = 'PPT',
+  GIF = 'GIF',
+  OTHER = 'OTHER',
+}