From 6f7fd6613a50957277e9c652ba1afde8647704af Mon Sep 17 00:00:00 2001 From: Joel Date: Tue, 30 Jan 2024 15:55:07 +0800 Subject: [PATCH] feat: file icon support doc and docx (#2289) --- .../components/app/chat/citation/popup.tsx | 4 +-- web/app/components/base/file-icon/index.tsx | 6 ++++ .../base/icons/src/public/files/index.ts | 2 ++ .../datasets/create/assets/docx.svg | 22 ++++++------ .../create/file-uploader/index.module.css | 35 +++++++++++++++++-- .../datasets/create/step-two/index.module.css | 4 +++ .../datasets/documents/style.module.css | 3 ++ web/assets/docx.svg | 22 ++++++------ 8 files changed, 71 insertions(+), 27 deletions(-) diff --git a/web/app/components/app/chat/citation/popup.tsx b/web/app/components/app/chat/citation/popup.tsx index ea2e8a9b24..be3034d374 100644 --- a/web/app/components/app/chat/citation/popup.tsx +++ b/web/app/components/app/chat/citation/popup.tsx @@ -48,7 +48,7 @@ const Popup: FC = ({ > setOpen(v => !v)}>
- +
{data.documentName}
 @@ -56,7 +56,7 @@ const Popup: FC = ({
- +
{data.documentName}
diff --git a/web/app/components/base/file-icon/index.tsx b/web/app/components/base/file-icon/index.tsx index 64d1b88b45..874637ca7a 100644 --- a/web/app/components/base/file-icon/index.tsx +++ b/web/app/components/base/file-icon/index.tsx @@ -1,6 +1,8 @@ import type { FC } from 'react' import { Csv, + Doc, + Docx, Html, Json, Md, @@ -23,6 +25,10 @@ const FileIcon: FC = ({ switch (type) { case 'csv': return + case 'doc': + return + case 'docx': + return case 'htm': case 'html': return diff --git a/web/app/components/base/icons/src/public/files/index.ts b/web/app/components/base/icons/src/public/files/index.ts index e122bb3974..9b868b9f6a 100644 --- a/web/app/components/base/icons/src/public/files/index.ts +++ b/web/app/components/base/icons/src/public/files/index.ts @@ -1,4 +1,6 @@ export { default as Csv } from './Csv' +export { default as Doc } from './Doc' +export { default as Docx } from './Docx' export { default as Html } from './Html' export { default as Json } from './Json' export { default as Md } from './Md' diff --git a/web/app/components/datasets/create/assets/docx.svg b/web/app/components/datasets/create/assets/docx.svg index 4d70dbfc8a..5f8fa519c2 100644 --- a/web/app/components/datasets/create/assets/docx.svg +++ b/web/app/components/datasets/create/assets/docx.svg @@ -1,23 +1,23 @@ - - - + + + - + - - - - + + + + - + - - + + diff --git a/web/app/components/datasets/create/file-uploader/index.module.css b/web/app/components/datasets/create/file-uploader/index.module.css index 1ba282513c..d141815c5a 100644 --- a/web/app/components/datasets/create/file-uploader/index.module.css +++ b/web/app/components/datasets/create/file-uploader/index.module.css @@ -1,6 +1,7 @@ .fileUploader { @apply mb-6; } + .fileUploader .title { @apply mb-2; font-weight: 500; @@ -8,12 +9,14 @@ line-height: 24px; color: #344054; } + .fileUploader .tip { font-weight: 400; font-size: 12px; line-height: 18px; color: #667085; } + .uploader { @apply relative box-border flex justify-center items-center mb-2 p-3; flex-direction: column; @@ -27,10 +30,12 @@ line-height: 20px; color: #667085; } + .uploader.dragging { background: #F5F8FF; border: 1px dashed #B2CCFF; } + .uploader .draggingCover { position: absolute; top: 0; @@ -38,6 +43,7 @@ width: 100%; height: 100%; } + .uploader .uploadIcon { content: ''; display: block; @@ -47,25 +53,29 @@ background: center no-repeat url(../assets/upload-cloud-01.svg); background-size: contain; } -.uploader .browse{ + +.uploader .browse { @apply pl-1 cursor-pointer; color: #155eef; } + .fileList { @apply space-y-2; } + .file { @apply box-border relative flex items-center justify-between; padding: 8px 12px 8px 8px; max-width: 640px; height: 40px; background: #ffffff; - border: 0.5px solid #EAECF0; + border: 0.5px solid #EAECF0; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 8px; overflow: hidden; cursor: pointer; } + .progressbar { position: absolute; top: 0; @@ -79,11 +89,13 @@ background: #FCFCFD; border: 0.5px solid #EAECF0; } + .file.active { background: #F5F8FF; border: 1px solid #D1E0FF; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); } + .file:hover { background: #F5F8FF; border: 1px solid #D1E0FF; @@ -95,33 +107,46 @@ background-image: url(../assets/unknow.svg); background-size: 24px; } + .fileIcon.csv { background-image: url(../assets/csv.svg); } + +.fileIcon.doc { + background-image: url(../assets/doc.svg); +} + .fileIcon.docx { background-image: url(../assets/docx.svg); } + .fileIcon.xlsx, .fileIcon.xls { background-image: url(../assets/xlsx.svg); } + .fileIcon.pdf { background-image: url(../assets/pdf.svg); } + .fileIcon.html, .fileIcon.htm { background-image: url(../assets/html.svg); } + .fileIcon.md, .fileIcon.markdown { background-image: url(../assets/md.svg); } + .fileIcon.txt { background-image: url(../assets/txt.svg); } + .fileIcon.json { background-image: url(../assets/json.svg); } + .fileInfo { @apply grow flex items-center; z-index: 1; @@ -129,6 +154,7 @@ text-overflow: ellipsis; white-space: nowrap; } + .filename { font-weight: 500; font-size: 13px; @@ -143,10 +169,12 @@ line-height: 18px; color: #667085; } + .actionWrapper { @apply flex items-center shrink-0; z-index: 1; } + .actionWrapper .percent { font-weight: 400; font-size: 13px; @@ -162,6 +190,7 @@ background-size: 16px; cursor: pointer; } + .file:hover .actionWrapper .remove { display: block; -} +} \ No newline at end of file diff --git a/web/app/components/datasets/create/step-two/index.module.css b/web/app/components/datasets/create/step-two/index.module.css index 9c7dee5781..b5089b5fa3 100644 --- a/web/app/components/datasets/create/step-two/index.module.css +++ b/web/app/components/datasets/create/step-two/index.module.css @@ -291,6 +291,10 @@ background-image: url(../assets/csv.svg); } +.fileIcon.doc { + background-image: url(../assets/doc.svg); +} + .fileIcon.docx { background-image: url(../assets/docx.svg); } diff --git a/web/app/components/datasets/documents/style.module.css b/web/app/components/datasets/documents/style.module.css index c69144b4fd..58b573bb50 100644 --- a/web/app/components/datasets/documents/style.module.css +++ b/web/app/components/datasets/documents/style.module.css @@ -87,6 +87,9 @@ .csvIcon { background-image: url(~@/assets/csv.svg); } +.docIcon { + background-image: url(~@/assets/doc.svg); +} .docxIcon { background-image: url(~@/assets/docx.svg); } diff --git a/web/assets/docx.svg b/web/assets/docx.svg index 4d70dbfc8a..5f8fa519c2 100644 --- a/web/assets/docx.svg +++ b/web/assets/docx.svg @@ -1,23 +1,23 @@ - - - + + + - + - - - - + + + + - + - - + +