fix upload

2025-11-29 16:43:16 +00:00 · 2024-10-08 17:04:53 +05:30
parent e66535c572
commit faef061d74
8 changed files with 204 additions and 101 deletions
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -209,24 +209,29 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
          <img
            src={Expand}
            alt="menu toggle"
-            className={`${!navOpen ? 'rotate-180' : 'rotate-0'
-              } m-auto transition-all duration-200`}
+            className={`${
+              !navOpen ? 'rotate-180' : 'rotate-0'
+            } m-auto transition-all duration-200`}
          />
        </button>
      )}
      <div
        ref={navRef}
-        className={`${!navOpen && '-ml-96 md:-ml-[18rem]'
-          } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
+        className={`${
+          !navOpen && '-ml-96 md:-ml-[18rem]'
+        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
      >
        <div
          className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
        >
-          <div className="my-auto mx-4 flex cursor-pointer gap-1.5" onClick={() => {
-            if (isMobile) {
-              setNavOpen(!navOpen);
-            }
-          }}>
+          <div
+            className="my-auto mx-4 flex cursor-pointer gap-1.5"
+            onClick={() => {
+              if (isMobile) {
+                setNavOpen(!navOpen);
+              }
+            }}
+          >
            <a href="/" className="flex gap-1.5">
              <img className="mb-2 h-10" src={DocsGPT3} alt="" />
              <p className="my-auto text-2xl font-semibold">DocsGPT</p>
@@ -241,8 +246,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
            <img
              src={Expand}
              alt="menu toggle"
-              className={`${!navOpen ? 'rotate-180' : 'rotate-0'
-                } m-auto transition-all duration-200`}
+              className={`${
+                !navOpen ? 'rotate-180' : 'rotate-0'
+              } m-auto transition-all duration-200`}
            />
          </button>
        </div>
@@ -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);
                  }
-                }
-                }></img>
+                }}
+              ></img>
            </div>
            <p className="ml-5 mt-3 text-sm font-semibold">{t('sourceDocs')}</p>
          </div>
@@ -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) {
      <Upload
        modalState={uploadModalState}
        setModalState={setUploadModalState}
+        isOnboarding={false}
      ></Upload>
    </>
  );
--- a/frontend/src/assets/file_upload.svg
+++ b/frontend/src/assets/file_upload.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 26.0003H18C19.1 26.0003 20 25.1003 20 24.0003V14.0003H23.18C24.96 14.0003 25.86 11.8403 24.6 10.5803L15.42 1.40032C15.235 1.21491 15.0152 1.06782 14.7732 0.967453C14.5313 0.86709 14.2719 0.81543 14.01 0.81543C13.7481 0.81543 13.4887 0.86709 13.2468 0.967453C13.0048 1.06782 12.785 1.21491 12.6 1.40032L3.42 10.5803C2.16 11.8403 3.04 14.0003 4.82 14.0003H8V24.0003C8 25.1003 8.9 26.0003 10 26.0003ZM2 30.0003H26C27.1 30.0003 28 30.9003 28 32.0003C28 33.1003 27.1 34.0003 26 34.0003H2C0.9 34.0003 0 33.1003 0 32.0003C0 30.9003 0.9 30.0003 2 30.0003Z" fill="#828282"/>
+</svg>
--- a/frontend/src/assets/website_collect.svg
+++ b/frontend/src/assets/website_collect.svg
@@ -0,0 +1,6 @@
+<svg width="58" height="49" viewBox="0 0 58 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.0002 45.3337H6.3335C5.27263 45.3337 4.25521 44.9122 3.50507 44.1621C2.75492 43.4119 2.3335 42.3945 2.3335 41.3337V6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V24.0003M42.3335 40.0003L49.0002 46.667M49.0002 46.667L55.6668 40.0003M49.0002 46.667V30.667" stroke="#626262" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.3335 6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V18.667H2.3335V6.66699Z" stroke="#626262" stroke-width="4"/>
+<path d="M7.66667 10.6673C7.66667 9.19456 8.86057 8.00065 10.3333 8.00065C11.8061 8.00065 13 9.19456 13 10.6673C13 12.1401 11.8061 13.334 10.3333 13.334C8.86057 13.334 7.66667 12.1401 7.66667 10.6673Z" fill="#626262"/>
+<path d="M15.6667 10.6673C15.6667 9.19456 16.8606 8.00065 18.3333 8.00065C19.8061 8.00065 21 9.19456 21 10.6673C21 12.1401 19.8061 13.334 18.3333 13.334C16.8606 13.334 15.6667 12.1401 15.6667 10.6673Z" fill="#626262"/>
+</svg>
--- 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",
--- 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",
--- 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までアップロードしてください",
--- 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",
--- 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<string>('file');
+  const [activeTab, setActiveTab] = useState<string | null>(null);
  const [files, setfiles] = useState<File[]>([]);
  const [progress, setProgress] = useState<{
    type: 'UPLOAD' | 'TRAINING';
@@ -66,18 +72,24 @@ function Upload({

  function ProgressBar({ progressPercent }: { progressPercent: number }) {
    return (
-      <div className="my-5 w-[50%]">
-        <div
-          className={`h-8 overflow-hidden rounded-xl border border-purple-30 text-xs text-bright-gray outline-none `}
-        >
+      <div className="flex items-center justify-center h-full w-full my-8">
+        <div className="relative w-32 h-32 rounded-full">
+          <div className="absolute inset-0 rounded-full shadow-[0_0_10px_2px_rgba(0,0,0,0.3)_inset] dark:shadow-[0_0_10px_2px_rgba(0,0,0,0.3)_inset]"></div>
          <div
-            className={`h-full border-none text-xl w-${
-              progress || 0
-            }%  flex items-center justify-center bg-purple-30 outline-none transition-all`}
-            style={{ width: `${progressPercent || 0}%` }}
-          >
-            {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'}`,
+            }}
+          ></div>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className="text-2xl font-bold">{progressPercent}%</span>
          </div>
+          <style>
+            {`@keyframes rotate {
+                0% { transform: rotate(0deg); }
+                100%{ transform: rotate(360deg); }
+              }`}
+          </style>
        </div>
      </div>
    );
@@ -87,20 +99,47 @@ function Upload({
    title,
    isCancellable = false,
    isFailed = false,
+    isTraining = false,
  }: {
    title: string;
    isCancellable?: boolean;
    isFailed?: boolean;
+    isTraining?: boolean;
  }) {
    return (
      <div className="mt-5 flex flex-col items-center gap-2 text-gray-2000 dark:text-bright-gray">
-        <p className="text-gra text-xl tracking-[0.15px]">{title}...</p>
+        <p className="text-gra text-xl tracking-[0.15px]">
+          {isTraining &&
+            (progress?.percentage === 100 ? 'Training completed' : title)}
+          {!isTraining && title}
+        </p>
        <p className="text-sm">This may take several minutes</p>
        <p className={`ml-5 text-xl text-red-400 ${isFailed ? '' : 'hidden'}`}>
          Over the token limit, please consider uploading smaller document
        </p>
        {/* <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p> */}
-        <ProgressBar progressPercent={progress?.percentage as number} />
+        <ProgressBar progressPercent={progress?.percentage || 0} />
+        {isTraining &&
+          (progress?.percentage === 100 ? (
+            <button
+              onClick={() => {
+                setDocName('');
+                setfiles([]);
+                setProgress(undefined);
+                setModalState('INACTIVE');
+              }}
+              className="cursor-pointer rounded-3xl px-6 py-2 text-sm bg-purple-30 text-white hover:bg-[#6F3FD1] shadow-lg"
+            >
+              {t('modals.uploadDoc.start')}
+            </button>
+          ) : (
+            <button
+              className="ml-2 cursor-pointer rounded-3xl text-sm py-2 px-6 bg-purple-300 text-gray-300 shadow-lg"
+              disabled
+            >
+              {t('modals.uploadDoc.wait')}
+            </button>
+          ))}
      </div>
    );
  }
@@ -191,6 +230,7 @@ function Upload({
        title="Training is in progress"
        isCancellable={progress?.percentage === 100}
        isFailed={progress?.failed === true}
+        isTraining={true}
      ></Progress>
    );
  }
@@ -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 = <TrainingProgress></TrainingProgress>;
  } else {
    view = (
-      <>
-        <p className="text-xl text-jet dark:text-bright-gray">
+      <div className="flex flex-col gap-4 w-full">
+        <p className="text-xl text-jet dark:text-bright-gray text-center font-semibold">
          {t('modals.uploadDoc.label')}
        </p>
-        <div>
-          <button
-            onClick={() => setActiveTab('file')}
-            className={`${
-              activeTab === 'file'
-                ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400'
-                : 'text-sonic-silver  hover:text-purple-30'
-            } mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
-          >
-            {t('modals.uploadDoc.file')}
-          </button>
-          <button
-            onClick={() => setActiveTab('remote')}
-            className={`${
-              activeTab === 'remote'
-                ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400'
-                : 'text-sonic-silver  hover:text-purple-30'
-            } mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
-          >
-            {t('modals.uploadDoc.remote')}
-          </button>
-        </div>
+        {!activeTab && (
+          <div>
+            <p className="text-gray-6000 dark:text-light-gray text-sm text-center">
+              {t('modals.uploadDoc.select')}
+            </p>
+            <div className="w-full gap-4 h-full p-4 flex flex-col md:flex-row md:gap-4 justify-center items-center">
+              <button
+                onClick={() => setActiveTab('file')}
+                className="rounded-3xl text-md font-medium border flex flex-col items-center justify-center hover:shadow-lg dark:hover:shadow-lg p-8 dark:active:shadow-lg gap-4 bg-white dark:bg-outer-space dark:text-light-gray hover:bg-gray-100 dark:hover:bg-[#767183]/50 hover:text-purple-30 dark:hover:text-gray-30 border-purple-30 dark:border-gray-700 h-40 w-40 md:w-52 md:h-52"
+              >
+                <img
+                  src={FileUpload}
+                  className="w-8 h-8 mr-2 dark:filter dark:invert"
+                />
+                {t('modals.uploadDoc.file')}
+              </button>
+              <button
+                onClick={() => setActiveTab('remote')}
+                className="rounded-3xl text-md font-medium border flex flex-col items-center justify-center hover:shadow-lg dark:hover:shadow-lg p-8 dark:active:shadow-lg gap-4 bg-white dark:bg-outer-space dark:text-light-gray hover:bg-gray-100 dark:hover:bg-[#767183]/50 hover:text-purple-30 dark:hover:text-gray-30 border-purple-30 dark:border-gray-700 h-40 w-40 md:w-52 md:h-52"
+              >
+                <img
+                  src={WebsiteCollect}
+                  className="w-8 h-8 mr-2 dark:filter dark:invert"
+                />
+                {t('modals.uploadDoc.remote')}
+              </button>
+            </div>
+          </div>
+        )}

        {activeTab === 'file' && (
          <>
@@ -517,43 +566,45 @@ function Upload({
            )}
          </>
        )}
-
-        <div className="flex flex-row-reverse">
-          {activeTab === 'file' ? (
+        {activeTab && (
+          <div className="flex flex-row-reverse">
+            {activeTab === 'file' ? (
+              <button
+                onClick={uploadFile}
+                className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 text-sm text-white ${
+                  files.length > 0 && docName.trim().length > 0
+                    ? 'hover:bg-[#6F3FD1]'
+                    : 'bg-opacity-75 text-opacity-80'
+                } py-2 px-6`}
+                disabled={
+                  (files.length === 0 || docName.trim().length === 0) &&
+                  activeTab === 'file'
+                }
+              >
+                {t('modals.uploadDoc.train')}
+              </button>
+            ) : (
+              <button
+                onClick={uploadRemote}
+                className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 py-2 px-6 text-sm text-white hover:bg-[#6F3FD1]`}
+              >
+                {t('modals.uploadDoc.train')}
+              </button>
+            )}
            <button
-              onClick={uploadFile}
-              className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 text-sm text-white ${
-                files.length > 0 && docName.trim().length > 0
-                  ? 'hover:bg-[#6F3FD1]'
-                  : 'bg-opacity-75 text-opacity-80'
-              } py-2 px-6`}
-              disabled={
-                (files.length === 0 || docName.trim().length === 0) &&
-                activeTab === 'file'
-              }
+              onClick={() => {
+                setDocName('');
+                setfiles([]);
+                setActiveTab(null);
+              }}
+              className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50 flex items-center gap-1"
            >
-              {t('modals.uploadDoc.train')}
+              <img src={ArrowLeft} className="w-[12px] h-[12px]" />
+              {t('modals.uploadDoc.back')}
            </button>
-          ) : (
-            <button
-              onClick={uploadRemote}
-              className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 py-2 px-6 text-sm text-white hover:bg-[#6F3FD1]`}
-            >
-              {t('modals.uploadDoc.train')}
-            </button>
-          )}
-          <button
-            onClick={() => {
-              setDocName('');
-              setfiles([]);
-              setModalState('INACTIVE');
-            }}
-            className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
-          >
-            {t('modals.uploadDoc.cancel')}
-          </button>
-        </div>
-      </>
+          </div>
+        )}
+      </div>
    );
  }

@@ -561,9 +612,22 @@ function Upload({
    <article
      className={`${
        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+      } absolute z-30 bg-gray-alpha flex items-center justify-center h-[calc(100vh-4rem)] md:h-screen w-full`}
    >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg dark:bg-outer-space">
+      <article className="relative mx-auto flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg dark:bg-outer-space h-fit-content">
+        {!isOnboarding && !progress && (
+          <button
+            className="absolute top-4 right-4 m-1 w-3"
+            onClick={() => {
+              setDocName('');
+              setfiles([]);
+              setModalState('INACTIVE');
+              setActiveTab(null);
+            }}
+          >
+            <img className="filter dark:invert" src={Exit} />
+          </button>
+        )}
        {view}
      </article>
    </article>