diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 0d99fd75..052a9643 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -209,24 +209,29 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { menu toggle )}
-
{ - if (isMobile) { - setNavOpen(!navOpen); - } - }}> +
{ + if (isMobile) { + setNavOpen(!navOpen); + } + }} + >

DocsGPT

@@ -241,8 +246,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { menu toggle
@@ -255,7 +261,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { resetConversation(); }} className={({ isActive }) => - `${isActive ? 'bg-gray-3000 dark:bg-transparent' : '' + `${ + isActive ? 'bg-gray-3000 dark:bg-transparent' : '' } group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000 dark:border-purple-taupe dark:text-white dark:hover:bg-transparent` } > @@ -280,7 +287,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { key={conversation.id} conversation={conversation} selectConversation={(id) => handleConversationClick(id)} - onCoversationClick={() => {if (isMobile) { setNavOpen(false) }}} + onCoversationClick={() => { + if (isMobile) { + setNavOpen(false); + } + }} onDeleteConversation={(id) => handleDeleteConversation(id)} onSave={(conversation) => updateConversationName(conversation) @@ -306,7 +317,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { handleDeleteClick={handleDeleteClick} handlePostDocumentSelect={(option?: string) => { if (isMobile) { - setNavOpen(!navOpen) + setNavOpen(!navOpen); } }} /> @@ -314,12 +325,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { className="mt-2 h-9 w-9 hover:cursor-pointer" src={UploadIcon} onClick={() => { - setUploadModalState('ACTIVE') + setUploadModalState('ACTIVE'); if (isMobile) { setNavOpen(!navOpen); } - } - }> + }} + >

{t('sourceDocs')}

@@ -333,7 +344,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { }} to="/settings" className={({ isActive }) => - `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${isActive ? 'bg-gray-3000 dark:bg-transparent' : '' + `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${ + isActive ? 'bg-gray-3000 dark:bg-transparent' : '' }` } > @@ -357,7 +369,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { }} to="/about" className={({ isActive }) => - `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : '' + `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${ + isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : '' }` } > @@ -437,6 +450,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { ); diff --git a/frontend/src/assets/file_upload.svg b/frontend/src/assets/file_upload.svg new file mode 100644 index 00000000..f48d8d81 --- /dev/null +++ b/frontend/src/assets/file_upload.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/assets/website_collect.svg b/frontend/src/assets/website_collect.svg new file mode 100644 index 00000000..b7aa60cf --- /dev/null +++ b/frontend/src/assets/website_collect.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json index fcd7ba83..76bdea56 100644 --- a/frontend/src/locale/en.json +++ b/frontend/src/locale/en.json @@ -75,8 +75,12 @@ "modals": { "uploadDoc": { "label": "Upload New Documentation", - "file": "From File", - "remote": "Remote", + "select": "Choose how to upload your document to DocsGPT", + "file": "Upload from device", + "back": "Back", + "wait": "Please wait ...", + "remote": "Collect from a website", + "start": "Start Chatting", "name": "Name", "choose": "Choose Files", "info": "Please upload .pdf, .txt, .rst, .csv, .xlsx, .docx, .md, .zip limited to 25mb", diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json index 02485261..793efcb9 100644 --- a/frontend/src/locale/es.json +++ b/frontend/src/locale/es.json @@ -75,8 +75,12 @@ "modals": { "uploadDoc": { "label": "Subir Nueva Documentación", - "file": "Desde Archivo", - "remote": "Remota", + "select": "Elija cómo cargar su documento en DocsGPT", + "file": "Subir desde el dispositivo", + "back": "Atrás", + "wait": "Espere por favor ...", + "remote": "Recoger desde un sitio web", + "start": "Empezar a chatear", "name": "Nombre", "choose": "Seleccionar Archivos", "info": "Por favor, suba archivos .pdf, .txt, .rst, .docx, .md, .zip limitados a 25 MB", diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json index 331891df..725bfeb4 100644 --- a/frontend/src/locale/jp.json +++ b/frontend/src/locale/jp.json @@ -75,8 +75,12 @@ "modals": { "uploadDoc": { "label": "新規書類のアップロード", - "file": "ファイルから", - "remote": "リモート", + "select": "ドキュメントを DocsGPT にアップロードする方法を選択します", + "file": "デバイスからアップロード", + "back": "戻る", + "wait": "お待ちください ...", + "remote": "ウェブサイトから収集する", + "start": "チャットを開始する", "name": "名前", "choose": "ファイルを選択", "info": ".pdf, .txt, .rst, .docx, .md, .zipファイルを25MBまでアップロードしてください", diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json index 13eebab2..79cf6341 100644 --- a/frontend/src/locale/zh.json +++ b/frontend/src/locale/zh.json @@ -75,8 +75,12 @@ "modals": { "uploadDoc": { "label": "上传新文档资料", - "file": "从文件", - "remote": "远程", + "select": "选择如何将文档上传到 DocsGPT", + "file": "从设备上传", + "back": "后退", + "wait": "请稍等 ...", + "remote": "从网站收集", + "start": "开始聊天", "name": "名称", "choose": "选择文件", "info": "请上传 .pdf, .txt, .rst, .docx, .md, .zip 文件，限 25MB", diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx index c09bab53..37a1fc0c 100644 --- a/frontend/src/upload/Upload.tsx +++ b/frontend/src/upload/Upload.tsx @@ -4,6 +4,10 @@ import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import userService from '../api/services/userService'; +import Exit from '../assets/exit.svg'; +import ArrowLeft from '../assets/arrow-left.svg'; +import FileUpload from '../assets/file_upload.svg'; +import WebsiteCollect from '../assets/website_collect.svg'; import Dropdown from '../components/Dropdown'; import Input from '../components/Input'; import { ActiveState, Doc } from '../models/misc'; @@ -17,9 +21,11 @@ import { function Upload({ modalState, setModalState, + isOnboarding, }: { modalState: ActiveState; setModalState: (state: ActiveState) => void; + isOnboarding: boolean; }) { const [docName, setDocName] = useState(''); const [urlName, setUrlName] = useState(''); @@ -32,7 +38,7 @@ function Upload({ search_queries: [''], number_posts: 10, }); - const [activeTab, setActiveTab] = useState('file'); + const [activeTab, setActiveTab] = useState(null); const [files, setfiles] = useState([]); const [progress, setProgress] = useState<{ type: 'UPLOAD' | 'TRAINING'; @@ -66,18 +72,24 @@ function Upload({ function ProgressBar({ progressPercent }: { progressPercent: number }) { return ( -
-
+
+
+
- {progressPercent >= 5 && `${progressPercent}%`} + className={`absolute inset-0 rounded-full ${progressPercent === 100 ? 'shadow-xl shadow-lime-300/50 dark:shadow-lime-300/50 bg-gradient-to-r from-white to-gray-400 dark:bg-gradient-to-br dark:from-gray-500 dark:to-gray-300' : 'shadow-[0_2px_0_#FF3D00_inset] dark:shadow-[0_2px_0_#FF3D00_inset]'}`} + style={{ + animation: `${progressPercent === 100 ? 'none' : 'rotate 2s linear infinite'}`, + }} + >
+
+ {progressPercent}%
+
); @@ -87,20 +99,47 @@ function Upload({ title, isCancellable = false, isFailed = false, + isTraining = false, }: { title: string; isCancellable?: boolean; isFailed?: boolean; + isTraining?: boolean; }) { return (
-

{title}...

+

+ {isTraining && + (progress?.percentage === 100 ? 'Training completed' : title)} + {!isTraining && title} +

This may take several minutes

Over the token limit, please consider uploading smaller document

{/*

{progress?.percentage || 0}%

*/} - + + {isTraining && + (progress?.percentage === 100 ? ( + + ) : ( + + ))}
); } @@ -191,6 +230,7 @@ function Upload({ title="Training is in progress" isCancellable={progress?.percentage === 100} isFailed={progress?.failed === true} + isTraining={true} > ); } @@ -275,7 +315,9 @@ function Upload({ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'], 'text/csv': ['.csv'], - 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'], + 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [ + '.xlsx', + ], }, }); @@ -303,32 +345,39 @@ function Upload({ view = ; } else { view = ( - <> -

+

+

{t('modals.uploadDoc.label')}

-
- - -
+ {!activeTab && ( +
+

+ {t('modals.uploadDoc.select')} +

+
+ + +
+
+ )} {activeTab === 'file' && ( <> @@ -517,43 +566,48 @@ function Upload({ )} )} - -
- {activeTab === 'file' ? ( + {activeTab && ( +
+ {activeTab === 'file' ? ( + + ) : ( + + )} - ) : ( - - )} - -
- +
+ )} +
); } @@ -561,9 +615,22 @@ function Upload({
-
+
+ {!isOnboarding && !progress && ( + + )} {view}