From d3f4dbb267917835ffa4860c6440caf1ce933463 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Dec 2023 13:23:28 -0800
Subject: [PATCH 01/12] WIP workspace document

---
 .../components/Sidebar/OrganizationTab/index.tsx   |  2 +-
 frontend/src/components/Sidebar/index.tsx          |  2 +-
 frontend/src/layout/AppLayout.tsx                  |  4 ++--
 .../DocumentView/FragmentList/SearchView/index.tsx |  4 ++--
 .../src/pages/DocumentView/FragmentList/index.tsx  | 14 +++++++-------
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Sidebar/OrganizationTab/index.tsx b/frontend/src/components/Sidebar/OrganizationTab/index.tsx
index 6fbfb28..6df556f 100644
--- a/frontend/src/components/Sidebar/OrganizationTab/index.tsx
+++ b/frontend/src/components/Sidebar/OrganizationTab/index.tsx
@@ -82,7 +82,7 @@ export default function OrganizationTab({
         to={paths.organization(organization)}
         className={({ isActive: active }) => {
           setIsActive(active);
-          return `group relative flex w-[13vw] items-center justify-between rounded-lg border border-transparent bg-main-2 px-4 py-3 font-medium text-white duration-300 ease-in-out hover:border-sky-400 hover:text-white ${
+          return `group relative flex w-full items-center justify-between rounded-lg border border-transparent bg-main-2 px-4 py-3 font-medium text-white duration-300 ease-in-out hover:border-sky-400 hover:text-white ${
             active ? 'border-sky-400 !text-white' : ''
           }`;
         }}
diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx
index d841144..de2a38d 100644
--- a/frontend/src/components/Sidebar/index.tsx
+++ b/frontend/src/components/Sidebar/index.tsx
@@ -90,7 +90,7 @@ export default function Sidebar({
     <>
       <aside
         ref={sidebar}
-        className={`max-w-72.5 absolute left-0 top-0 z-9999 flex h-screen min-w-[220px] flex-col overflow-y-hidden bg-main duration-300 ease-linear lg:static lg:translate-x-0 ${
+        className={`max-w-72.5 absolute left-0 top-0 z-9999 flex h-screen min-w-[300px] flex-col overflow-y-hidden bg-main duration-300 ease-linear lg:static lg:translate-x-0 ${
           sidebarOpen ? 'translate-x-0' : '-translate-x-full'
         }`}
       >
diff --git a/frontend/src/layout/AppLayout.tsx b/frontend/src/layout/AppLayout.tsx
index b0b81f9..44e0b98 100644
--- a/frontend/src/layout/AppLayout.tsx
+++ b/frontend/src/layout/AppLayout.tsx
@@ -42,7 +42,7 @@ const AppLayout = ({
           loadMoreWorkspaces={loadMoreWorkspaces}
         />
 
-        <div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
+        <div className="w-full overflow-x-hidden">
           {!!headerEntity && (
             <div className="flex w-full items-center">
               <Header
@@ -56,7 +56,7 @@ const AppLayout = ({
             </div>
           )}
           <main>
-            <div className="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
+            <div className="mx-auto max-w-screen-2xl bg-main p-4 md:p-6 2xl:p-10">
               {children}
             </div>
           </main>
diff --git a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
index c528662..0428d70 100644
--- a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
@@ -90,7 +90,7 @@ export default function SearchView({
           <div className="relative flex">
             <button
               onClick={() => setShowSearchMethods(!showSearchMethods)}
-              className="z-10 inline-flex flex-shrink-0 items-center rounded-l-lg border border-gray-300 bg-gray-100 px-4 py-2.5 text-center text-sm font-medium text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-700"
+              className="z-10 inline-flex h-9 flex-shrink-0 items-center rounded-[100px] bg-zinc-700 px-5 text-center text-sm font-medium text-white hover:bg-opacity-60 focus:outline-none"
               type="button"
             >
               {SEARCH_MODES[searchBy].display}
@@ -128,7 +128,7 @@ export default function SearchView({
               <input
                 type="search"
                 name="query"
-                className="z-20 block w-full rounded-r-lg border border-l-2 border-gray-300 border-l-gray-50 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:border-l-gray-700  dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500"
+                className="z-20 block w-full rounded-[100px] bg-main-2 p-2.5 text-sm"
                 placeholder={SEARCH_MODES[searchBy].placeholder}
                 required
               />
diff --git a/frontend/src/pages/DocumentView/FragmentList/index.tsx b/frontend/src/pages/DocumentView/FragmentList/index.tsx
index 9f00515..8d4c4a4 100644
--- a/frontend/src/pages/DocumentView/FragmentList/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/index.tsx
@@ -75,14 +75,14 @@ export default function FragmentList({
 
   return (
     <>
-      <div className="col-span-12 flex-1 rounded-sm dark:border-strokedark dark:bg-boxdark xl:col-span-4">
+      <div className="col-span-12 h-screen flex-1 rounded-sm dark:border-strokedark dark:bg-boxdark xl:col-span-4">
         <div className="flex items-start justify-between">
           <div className="mb-6 flex flex-col gap-y-1 px-7.5 ">
             <div className="flex items-center gap-x-2">
-              <h4 className="text-3xl font-semibold text-black dark:text-white">
-                Embeddings Overview for Document #{document.id}
-              </h4>
-              <button
+              <div className="w-48 text-sm font-bold uppercase tracking-wide text-white">
+                embeddings overview
+              </div>
+              {/* <button
                 type="button"
                 onClick={() =>
                   window.document
@@ -98,10 +98,10 @@ export default function FragmentList({
                 className="rounded-lg px-4 py-2 text-sm text-slate-400 hover:bg-red-50 hover:text-red-600"
               >
                 Delete Document
-              </button>
+              </button> */}
             </div>
 
-            <p className="text-sm text-slate-500">{document?.name}</p>
+            {/* <p className="text-sm text-slate-500">{document?.name}</p> */}
           </div>
         </div>
 

From c2daeea0a0fccf17c5ffcc9ae0a09e4acf34e51f Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Thu, 7 Dec 2023 12:07:13 -0800
Subject: [PATCH 02/12] WIP workspace document UI

---
 frontend/src/components/Header/index.tsx      | 175 ++++++++--------
 .../Sidebar/OrganizationTab/index.tsx         |  19 +-
 frontend/src/components/Sidebar/index.tsx     |  10 +-
 frontend/src/images/logo/logo-sky.svg         |  11 +
 frontend/src/index.css                        |  33 +++
 frontend/src/layout/AppLayout.tsx             |   6 +-
 .../FragmentList/SearchView/index.tsx         |  55 +++--
 .../pages/DocumentView/FragmentList/index.tsx | 193 +++++++++---------
 frontend/src/pages/DocumentView/index.tsx     |   2 +-
 9 files changed, 293 insertions(+), 211 deletions(-)
 create mode 100644 frontend/src/images/logo/logo-sky.svg

diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index b68848b..f7d8060 100644
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -35,92 +35,99 @@ export default function Header(props: {
   }, [copied]);
 
   return (
-    <header className="sticky top-0 z-999 flex w-full bg-slate-900 drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none md:bg-white">
-      <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
-        <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
-          {/* <!-- Hamburger Toggle BTN --> */}
-          <button
-            aria-controls="sidebar"
-            onClick={(e) => {
-              e.stopPropagation();
-              props.setSidebarOpen(!props.sidebarOpen);
-            }}
-            className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
-          >
-            <span className="relative block h-5.5 w-5.5 cursor-pointer">
-              <span className="du-block absolute right-0 h-full w-full">
-                <span
-                  className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
-                    !props.sidebarOpen && '!w-full delay-300'
-                  }`}
-                ></span>
-                <span
-                  className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
-                    !props.sidebarOpen && 'delay-400 !w-full'
-                  }`}
-                ></span>
-                <span
-                  className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
-                    !props.sidebarOpen && '!w-full delay-500'
-                  }`}
-                ></span>
-              </span>
-              <span className="absolute right-0 h-full w-full rotate-45">
-                <span
-                  className={`absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
-                    !props.sidebarOpen && '!h-0 !delay-[0]'
-                  }`}
-                ></span>
-                <span
-                  className={`delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${
-                    !props.sidebarOpen && '!h-0 !delay-200'
-                  }`}
-                ></span>
-              </span>
-            </span>
-          </button>
-          {/* <!-- Hamburger Toggle BTN --> */}
+    // <header className="sticky top-0 z-999 flex w-full bg-slate-900 drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none md:bg-white">
+    //   <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+    //     <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
+    //       {/* <!-- Hamburger Toggle BTN --> */}
+    //       <button
+    //         aria-controls="sidebar"
+    //         onClick={(e) => {
+    //           e.stopPropagation();
+    //           props.setSidebarOpen(!props.sidebarOpen);
+    //         }}
+    //         className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
+    //       >
+    //         <span className="relative block h-5.5 w-5.5 cursor-pointer">
+    //           <span className="du-block absolute right-0 h-full w-full">
+    //             <span
+    //               className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
+    //                 !props.sidebarOpen && '!w-full delay-300'
+    //               }`}
+    //             ></span>
+    //             <span
+    //               className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
+    //                 !props.sidebarOpen && 'delay-400 !w-full'
+    //               }`}
+    //             ></span>
+    //             <span
+    //               className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
+    //                 !props.sidebarOpen && '!w-full delay-500'
+    //               }`}
+    //             ></span>
+    //           </span>
+    //           <span className="absolute right-0 h-full w-full rotate-45">
+    //             <span
+    //               className={`absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
+    //                 !props.sidebarOpen && '!h-0 !delay-[0]'
+    //               }`}
+    //             ></span>
+    //             <span
+    //               className={`delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${
+    //                 !props.sidebarOpen && '!h-0 !delay-200'
+    //               }`}
+    //             ></span>
+    //           </span>
+    //         </span>
+    //       </button>
+    //       {/* <!-- Hamburger Toggle BTN --> */}
 
-          <Link className="flex w-full justify-center lg:hidden" to="/">
-            <img src={Logo} alt="Logo" className="h-14" />
-          </Link>
-        </div>
+    //       <Link className="flex w-full justify-center lg:hidden" to="/">
+    //         <img src={Logo} alt="Logo" className="h-14" />
+    //       </Link>
+    //     </div>
 
-        <div className="hidden w-full sm:block">
-          <div className="flex w-full items-center justify-between">
-            <div className="flex items-center gap-x-4">
-              <p className="text-4xl font-semibold text-slate-800">
-                {truncate(entity[nameProp ?? 'name'], 20)}
-              </p>
-              <button
-                onClick={handleCopy}
-                disabled={copied}
-                className="transition-duration-300 font-mono flex items-center gap-x-2 rounded-md bg-slate-200 px-4 py-2 text-sm  text-slate-700 transition disabled:bg-green-300"
-              >
-                <p className="">ID: {entity[property]}</p>
-                {copied ? (
-                  <CheckCircle className="h-4 w-4" />
-                ) : (
-                  <Copy className="h-4 w-4" />
-                )}
-              </button>
-              {extendedItems}
-            </div>
-            <div className="flex w-fit items-center gap-x-2">
-              <Notifications />
-              <button
-                onClick={() => {
-                  if (!window) return;
-                  window.localStorage.removeItem(STORE_USER);
-                  window.localStorage.removeItem(STORE_TOKEN);
-                  window.location.replace(paths.home());
-                }}
-                className="rounded-lg px-4 py-2 text-slate-800 hover:bg-slate-200"
-              >
-                Logout
-              </button>
-            </div>
-          </div>
+    //     <div className="hidden w-full sm:block">
+    //       <div className="flex w-full items-center justify-between">
+    //         <div className="flex items-center gap-x-4">
+    //           <p className="text-4xl font-semibold text-slate-800">
+    //             {truncate(entity[nameProp ?? 'name'], 20)}
+    //           </p>
+    //           <button
+    //             onClick={handleCopy}
+    //             disabled={copied}
+    //             className="transition-duration-300 font-mono flex items-center gap-x-2 rounded-md bg-slate-200 px-4 py-2 text-sm  text-slate-700 transition disabled:bg-green-300"
+    //           >
+    //             <p className="">ID: {entity[property]}</p>
+    //             {copied ? (
+    //               <CheckCircle className="h-4 w-4" />
+    //             ) : (
+    //               <Copy className="h-4 w-4" />
+    //             )}
+    //           </button>
+    //           {extendedItems}
+    //         </div>
+    //         <div className="flex w-fit items-center gap-x-2">
+    //           <Notifications />
+    //           <button
+    //             onClick={() => {
+    //               if (!window) return;
+    //               window.localStorage.removeItem(STORE_USER);
+    //               window.localStorage.removeItem(STORE_TOKEN);
+    //               window.location.replace(paths.home());
+    //             }}
+    //             className="rounded-lg px-4 py-2 text-slate-800 hover:bg-slate-200"
+    //           >
+    //             Logout
+    //           </button>
+    //         </div>
+    //       </div>
+    //     </div>
+    //   </div>
+    // </header>
+    <header className=" flex w-full rounded-t-lg bg-main p-4">
+      <div>
+        <div className="w-fit rounded-lg border-2 border-white/20 px-5 py-2 text-sky-400">
+          Organization {'>'} Workspace 1 {'>'} Document 1 (placeholder info)
         </div>
       </div>
     </header>
diff --git a/frontend/src/components/Sidebar/OrganizationTab/index.tsx b/frontend/src/components/Sidebar/OrganizationTab/index.tsx
index 6df556f..f092574 100644
--- a/frontend/src/components/Sidebar/OrganizationTab/index.tsx
+++ b/frontend/src/components/Sidebar/OrganizationTab/index.tsx
@@ -102,9 +102,18 @@ export default function OrganizationTab({
           </div>
         </div>
       </NavLink>
-      {isActive && menuOpen && (
-        <>
-          <div className="mb-3.5 mt-4 flex items-center justify-between px-3">
+      {isActive && (
+        <div
+          className={`${
+            menuOpen
+              ? 'slide-down mb-4 mt-4 transition-all duration-300'
+              : 'slide-up'
+          }`}
+          style={{
+            animationDuration: '0.15s',
+          }}
+        >
+          <div className="mb-3.5 flex items-center justify-between px-3">
             <div className="flex w-full items-center gap-x-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -150,7 +159,7 @@ export default function OrganizationTab({
           {isSearching ? (
             <LoadingWorkspaceItem />
           ) : searchTerm !== '' && searchResults.length > 0 ? (
-            <div className="mt-2">
+            <div className="mt-2 max-h-[150px] overflow-y-auto">
               {searchResults.map((workspace, idx) => (
                 <WorkspaceItem key={idx} workspace={workspace} slug={slug} />
               ))}
@@ -195,7 +204,7 @@ export default function OrganizationTab({
             </div>
           )}
           <CreateWorkspaceModal organization={organization} />
-        </>
+        </div>
       )}
     </li>
   );
diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx
index de2a38d..018dfcb 100644
--- a/frontend/src/components/Sidebar/index.tsx
+++ b/frontend/src/components/Sidebar/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { NavLink, useLocation, useParams } from 'react-router-dom';
-import Logo from '../../images/logo/logo-light.png';
+import LogoSky from '../../images/logo/logo-sky.svg';
 import SidebarLinkGroup from '../SidebarLinkGroup';
 import paths from '../../utils/paths';
 import useUser from '../../hooks/useUser';
@@ -100,12 +100,8 @@ export default function Sidebar({
             to={paths.dashboard()}
             className="flex w-full shrink-0 justify-center"
           >
-            <div className="flex w-full justify-center rounded-br-[14px] bg-main-bg">
-              <img
-                src={Logo}
-                alt="Logo"
-                className="w-full max-w-[180px] object-cover p-4"
-              />
+            <div className="flex h-[62px] w-full items-center justify-center rounded-br-[14px] bg-main-bg">
+              <img src={LogoSky} alt="Logo" className="w-[170px]" />
             </div>
           </NavLink>
 
diff --git a/frontend/src/images/logo/logo-sky.svg b/frontend/src/images/logo/logo-sky.svg
new file mode 100644
index 0000000..2e76537
--- /dev/null
+++ b/frontend/src/images/logo/logo-sky.svg
@@ -0,0 +1,11 @@
+<svg width="141" height="23" viewBox="0 0 141 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_191_46023)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.46888 0.210969C6.96214 -0.0713591 7.56829 -0.0702503 8.06051 0.213881L21.646 8.05594C22.1402 8.34118 22.4446 8.86841 22.4446 9.43899V17.8454C22.4446 18.3901 22.1669 18.8973 21.708 19.1907L19.4455 20.6375C18.3825 21.3173 16.9882 20.5539 16.9882 19.2921V13.0727C16.9882 12.2322 16.5364 11.4566 15.8052 11.0422L4.04577 4.37642C2.9691 3.76612 2.96587 2.21598 4.03998 1.60119L6.46888 0.210969ZM4.24873 6.66747C4.73059 6.41443 5.30814 6.42421 5.78115 6.69343L7.81899 7.85331C8.92812 8.4846 8.88528 10.0975 7.74421 10.669L6.99693 11.0433C6.20701 11.439 5.70818 12.2467 5.70818 13.1302V19.3484C5.70818 20.6097 4.3148 21.3731 3.25179 20.6943L1.11248 19.3283C0.65305 19.0349 0.375 18.5275 0.375 17.9823V9.66688C0.375 9.07345 0.704068 8.52895 1.22946 8.25304L4.24873 6.66747ZM2.61988 4.25389C1.82663 3.82447 0.862561 4.39884 0.862561 5.30086C0.862561 6.21498 1.85009 6.78807 2.64377 6.33454C3.4542 5.87143 3.44073 4.69827 2.61988 4.25389ZM6.60963 20.8829C6.60963 19.9809 7.5737 19.4065 8.36695 19.8359C9.1878 20.2803 9.20127 21.4535 8.39084 21.9166C7.59716 22.3701 6.60963 21.797 6.60963 20.8829ZM20.8953 4.45311C21.6885 4.02369 22.6526 4.59805 22.6526 5.50008C22.6526 6.4142 21.6651 6.98729 20.8714 6.53376C20.061 6.07065 20.0744 4.89749 20.8953 4.45311ZM15.9729 13.7579C15.9729 12.8559 15.0088 12.2815 14.2156 12.7109C13.3947 13.1553 13.3813 14.3285 14.1917 14.7916C14.9854 15.2451 15.9729 14.672 15.9729 13.7579ZM7.70713 12.6883C7.5483 12.6004 7.35396 12.6074 7.20181 12.7064C7.06255 12.7969 6.97855 12.9518 6.97855 13.1179V17.0396C6.97855 17.6357 7.31056 18.1822 7.8396 18.4569L13.4298 21.3595C14.4929 21.9115 15.7626 21.14 15.7626 19.9422V18.0857C15.7626 17.5047 15.4471 16.9696 14.9386 16.6883L7.70713 12.6883ZM15.2571 0.780037C15.6579 0.56462 16.1415 0.571277 16.5361 0.797645L19.2273 2.34111C20.0985 2.84076 20.0821 4.10294 19.1982 4.57977C18.8176 4.78513 18.359 4.78453 17.9788 4.57818L15.2523 3.09806C14.3317 2.5983 14.3344 1.27597 15.2571 0.780037ZM29.8506 4.58928L34.5306 17.9993H37.3386L42.0006 4.58928H39.3366L35.9256 14.9059L32.5146 4.58928H29.8506ZM44.0429 17.5313C44.7989 17.9873 45.6809 18.2153 46.6889 18.2153C47.3609 18.2153 47.9729 18.1133 48.5249 17.9093C49.0889 17.7053 49.5749 17.4233 49.9829 17.0633C50.3909 16.7033 50.6909 16.2893 50.8829 15.8213L48.9749 14.8853C48.7589 15.2693 48.4589 15.5753 48.0749 15.8033C47.7029 16.0313 47.2469 16.1453 46.7069 16.1453C46.1669 16.1453 45.6869 16.0193 45.2669 15.7673C44.8589 15.5153 44.5469 15.1613 44.3309 14.7053C44.2057 14.4181 44.128 14.1061 44.0977 13.7693H51.1529C51.2009 13.6373 51.2309 13.4813 51.2429 13.3013C51.2669 13.1213 51.2789 12.9473 51.2789 12.7793C51.2789 12.1193 51.1709 11.5073 50.9549 10.9433C50.7389 10.3673 50.4269 9.85728 50.0189 9.41328C49.6109 8.96928 49.1129 8.62128 48.5249 8.36928C47.9489 8.11728 47.2769 7.99128 46.5089 7.99128C45.5969 7.99128 44.7689 8.21328 44.0249 8.65728C43.2929 9.10128 42.7109 9.70728 42.2789 10.4753C41.8589 11.2313 41.6489 12.1013 41.6489 13.0853C41.6489 14.0333 41.8589 14.8973 42.2789 15.6773C42.6989 16.4573 43.2869 17.0753 44.0429 17.5313ZM44.1463 11.9693C44.1846 11.7626 44.2401 11.5706 44.3129 11.3933C44.5169 10.9133 44.8109 10.5533 45.1949 10.3133C45.5789 10.0613 46.0169 9.93528 46.5089 9.93528C47.0249 9.93528 47.4629 10.0613 47.8229 10.3133C48.1949 10.5653 48.4589 10.9073 48.6149 11.3393C48.6917 11.5367 48.7396 11.7467 48.7588 11.9693H44.1463ZM54.7944 17.5493C55.5744 17.9933 56.4504 18.2153 57.4224 18.2153C58.1304 18.2153 58.7844 18.0953 59.3844 17.8553C59.9844 17.6033 60.5004 17.2613 60.9324 16.8293C61.3644 16.3853 61.6764 15.8873 61.8684 15.3353L59.7984 14.3993C59.6184 14.9033 59.3184 15.3053 58.8984 15.6053C58.4784 15.9053 57.9864 16.0553 57.4224 16.0553C56.9064 16.0553 56.4444 15.9293 56.0364 15.6773C55.6404 15.4253 55.3284 15.0773 55.1004 14.6333C54.8724 14.1893 54.7584 13.6793 54.7584 13.1033C54.7584 12.5273 54.8724 12.0173 55.1004 11.5733C55.3284 11.1293 55.6404 10.7813 56.0364 10.5293C56.4444 10.2773 56.9064 10.1513 57.4224 10.1513C57.9744 10.1513 58.4604 10.3013 58.8804 10.6013C59.3124 10.9013 59.6184 11.2973 59.7984 11.7893L61.8684 10.8893C61.6764 10.3013 61.3584 9.79728 60.9144 9.37728C60.4824 8.94528 59.9664 8.60928 59.3664 8.36928C58.7664 8.11728 58.1184 7.99128 57.4224 7.99128C56.4504 7.99128 55.5744 8.21328 54.7944 8.65728C54.0264 9.10128 53.4204 9.70728 52.9764 10.4753C52.5324 11.2433 52.3104 12.1133 52.3104 13.0853C52.3104 14.0573 52.5324 14.9333 52.9764 15.7133C53.4204 16.4813 54.0264 17.0933 54.7944 17.5493ZM65.1876 17.2073C65.7996 17.8073 66.6576 18.1073 67.7616 18.1073C67.9416 18.1073 68.1395 18.0953 68.3556 18.0713C68.5715 18.0473 68.7635 18.0233 68.9315 17.9993V15.9833C68.8236 15.9953 68.7095 16.0073 68.5896 16.0193C68.4816 16.0313 68.3856 16.0373 68.3016 16.0373C67.9175 16.0373 67.5995 15.9773 67.3475 15.8573C67.1076 15.7373 66.9276 15.5633 66.8075 15.3353C66.6996 15.1073 66.6456 14.8313 66.6456 14.5073V10.3133H68.8956V8.20728H66.6456V5.97528H64.2876V6.73128C64.2876 7.21128 64.1556 7.57728 63.8916 7.82928C63.6276 8.08128 63.2556 8.20728 62.7756 8.20728H62.5956V10.3133H64.2876V14.6333C64.2876 15.7373 64.5876 16.5953 65.1876 17.2073ZM72.4452 17.5493C73.2372 17.9933 74.1132 18.2153 75.0732 18.2153C76.0212 18.2153 76.8852 17.9933 77.6652 17.5493C78.4452 17.1053 79.0692 16.4993 79.5372 15.7313C80.0052 14.9633 80.2392 14.0873 80.2392 13.1033C80.2392 12.1073 80.0052 11.2313 79.5372 10.4753C79.0812 9.70728 78.4632 9.10128 77.6832 8.65728C76.9032 8.21328 76.0332 7.99128 75.0732 7.99128C74.1012 7.99128 73.2252 8.21328 72.4452 8.65728C71.6652 9.10128 71.0412 9.70728 70.5732 10.4753C70.1172 11.2433 69.8892 12.1193 69.8892 13.1033C69.8892 14.0873 70.1172 14.9633 70.5732 15.7313C71.0412 16.4993 71.6652 17.1053 72.4452 17.5493ZM76.4592 15.6773C76.0632 15.9293 75.6012 16.0553 75.0732 16.0553C74.5332 16.0553 74.0592 15.9293 73.6512 15.6773C73.2432 15.4253 72.9192 15.0773 72.6792 14.6333C72.4512 14.1773 72.3372 13.6673 72.3372 13.1033C72.3372 12.5273 72.4512 12.0233 72.6792 11.5913C72.9192 11.1473 73.2432 10.7993 73.6512 10.5473C74.0592 10.2833 74.5332 10.1513 75.0732 10.1513C75.6012 10.1513 76.0632 10.2833 76.4592 10.5473C76.8672 10.7993 77.1852 11.1473 77.4132 11.5913C77.6532 12.0233 77.7732 12.5273 77.7732 13.1033C77.7732 13.6673 77.6532 14.1773 77.4132 14.6333C77.1852 15.0773 76.8672 15.4253 76.4592 15.6773ZM83.8814 8.20728H81.6674V17.9993H84.0254V12.5453C84.0254 11.8013 84.2294 11.2253 84.6374 10.8173C85.0454 10.3973 85.5854 10.1873 86.2574 10.1873H87.1034V8.09928H86.5274C85.8434 8.09928 85.2554 8.24328 84.7634 8.53128C84.3953 8.75214 84.1013 9.10356 83.8814 9.58553V8.20728ZM91.7658 4.58928L87.1398 17.9993H89.7858L90.7578 15.1193H95.9418L96.8958 17.9993H99.5598L94.9338 4.58928H91.7658ZM93.3498 7.30452L95.2398 12.9593H91.4598L93.3498 7.30452ZM102.159 17.5493C102.903 17.9933 103.749 18.2153 104.697 18.2153C105.405 18.2153 106.059 18.0773 106.659 17.8013C107.121 17.5793 107.505 17.2861 107.811 16.9216V17.9993H110.043V4.37328H107.685V9.19664C107.401 8.8892 107.059 8.63741 106.659 8.44128C106.083 8.14128 105.423 7.99128 104.679 7.99128C103.755 7.99128 102.915 8.21928 102.159 8.67528C101.415 9.13128 100.827 9.74328 100.395 10.5113C99.9627 11.2793 99.7467 12.1433 99.7467 13.1033C99.7467 14.0513 99.9627 14.9153 100.395 15.6953C100.827 16.4753 101.415 17.0933 102.159 17.5493ZM106.371 15.6773C105.963 15.9293 105.489 16.0553 104.949 16.0553C104.421 16.0553 103.947 15.9293 103.527 15.6773C103.107 15.4253 102.777 15.0773 102.537 14.6333C102.309 14.1893 102.195 13.6793 102.195 13.1033C102.195 12.5273 102.309 12.0233 102.537 11.5913C102.777 11.1473 103.107 10.7993 103.527 10.5473C103.947 10.2833 104.421 10.1513 104.949 10.1513C105.489 10.1513 105.963 10.2773 106.371 10.5293C106.779 10.7813 107.097 11.1353 107.325 11.5913C107.565 12.0353 107.685 12.5393 107.685 13.1033C107.685 13.6793 107.565 14.1893 107.325 14.6333C107.097 15.0773 106.779 15.4253 106.371 15.6773ZM114.09 8.20728H111.876V17.9993H114.234V12.2573C114.234 11.8253 114.312 11.4533 114.468 11.1413C114.624 10.8293 114.846 10.5893 115.134 10.4213C115.422 10.2413 115.752 10.1513 116.124 10.1513C116.508 10.1513 116.838 10.2413 117.114 10.4213C117.402 10.5893 117.624 10.8293 117.78 11.1413C117.936 11.4533 118.014 11.8253 118.014 12.2573V17.9993H120.372V12.2573C120.372 11.8253 120.45 11.4533 120.606 11.1413C120.762 10.8293 120.984 10.5893 121.272 10.4213C121.56 10.2413 121.89 10.1513 122.262 10.1513C122.658 10.1513 122.994 10.2413 123.27 10.4213C123.546 10.5893 123.762 10.8293 123.918 11.1413C124.074 11.4533 124.152 11.8253 124.152 12.2573V17.9993H126.51V11.6993C126.51 10.9673 126.354 10.3253 126.042 9.77328C125.73 9.20928 125.298 8.77128 124.746 8.45928C124.206 8.14728 123.588 7.99128 122.892 7.99128C122.112 7.99128 121.422 8.18928 120.822 8.58528C120.436 8.83245 120.112 9.16164 119.85 9.57287C119.636 9.20322 119.336 8.88603 118.95 8.62128C118.338 8.20128 117.63 7.99128 116.826 7.99128C116.094 7.99128 115.458 8.16528 114.918 8.51328C114.566 8.74068 114.29 9.04493 114.09 9.42604V8.20728ZM130.503 8.20728H128.145V17.9993H130.503V8.20728ZM128.145 4.58928V7.10928H130.503V4.58928H128.145ZM134.535 8.20728H132.321V17.9993H134.679V12.2573C134.679 11.8253 134.763 11.4533 134.931 11.1413C135.099 10.8293 135.333 10.5893 135.633 10.4213C135.933 10.2413 136.275 10.1513 136.659 10.1513C137.055 10.1513 137.397 10.2413 137.685 10.4213C137.985 10.5893 138.219 10.8293 138.387 11.1413C138.555 11.4533 138.639 11.8253 138.639 12.2573V17.9993H140.997V11.6993C140.997 10.9673 140.841 10.3253 140.529 9.77328C140.217 9.20928 139.779 8.77128 139.215 8.45928C138.663 8.14728 138.027 7.99128 137.307 7.99128C136.611 7.99128 135.999 8.14728 135.471 8.45928C135.073 8.69034 134.761 9.00681 134.535 9.4087V8.20728Z" fill="#46C8FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1119 0.117188C1119 -7.6148 1112.73 -13.8828 1105 -13.8828H213C205.268 -13.8828 199 -7.6148 199 0.117188V30.9277C199 38.6597 192.732 44.9277 185 44.9277H-19.5C-27.232 44.9277 -33.5 51.1957 -33.5 58.9277V794.279C-33.5 802.011 -27.232 808.279 -19.5 808.279H1202.5C1210.23 808.279 1216.5 802.011 1216.5 794.279V58.9277C1216.5 51.1957 1210.23 44.9277 1202.5 44.9277H1133C1125.27 44.9277 1119 38.6597 1119 30.9277V0.117188Z" fill="#25272C"/>
+</g>
+<defs>
+<clipPath id="clip0_191_46023">
+<rect width="1281" height="832" fill="white" transform="translate(-49 -27)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3b8724f..b6f1125 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -50,3 +50,36 @@ dialog::backdrop {
   ) !important;
   box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
 }
+
+@keyframes slideDown {
+  from {
+    max-height: 0;
+    opacity: 0;
+  }
+  to {
+    max-height: 200px;
+    opacity: 1;
+  }
+}
+
+.slide-down {
+  animation: slideDown 0.3s ease-out forwards;
+}
+
+
+@keyframes slideUp {
+  from {
+    max-height: 200px;
+    opacity: 1;
+  }
+  to {
+    max-height: 0;
+    opacity: 0;
+  }
+}
+
+.slide-up {
+  animation: slideUp 0.3s ease-out forwards;
+}
+
+
diff --git a/frontend/src/layout/AppLayout.tsx b/frontend/src/layout/AppLayout.tsx
index 44e0b98..e54a7e0 100644
--- a/frontend/src/layout/AppLayout.tsx
+++ b/frontend/src/layout/AppLayout.tsx
@@ -30,7 +30,7 @@ const AppLayout = ({
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
-    <div className="dark:bg-boxdark-2 dark:text-bodydark">
+    <div className="bg-main-bg px-4 pt-4">
       <div className="flex h-screen overflow-hidden">
         <Sidebar
           workspaces={workspaces}
@@ -56,9 +56,7 @@ const AppLayout = ({
             </div>
           )}
           <main>
-            <div className="mx-auto max-w-screen-2xl bg-main p-4 md:p-6 2xl:p-10">
-              {children}
-            </div>
+            <div className="mx-auto bg-main pr-6 pt-6">{children}</div>
           </main>
         </div>
       </div>
diff --git a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
index 0428d70..48117e3 100644
--- a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
@@ -6,6 +6,7 @@ import {
   useState,
 } from 'react';
 import { ChevronDown, Search, Loader } from 'react-feather';
+import { CaretDown, Plus, MagnifyingGlass, X } from '@phosphor-icons/react';
 import Document from '../../../../models/document';
 
 export type ISearchTypes = 'semantic' | 'exactText' | 'metadata' | 'vectorId';
@@ -84,24 +85,34 @@ export default function SearchView({
   };
 
   return (
-    <div className="w-full flex-1 rounded-sm py-6">
+    <div className="w-full flex-1">
       <div className="flex items-center">
         <form ref={formEl} onSubmit={handleSearch} className="w-full">
           <div className="relative flex">
             <button
               onClick={() => setShowSearchMethods(!showSearchMethods)}
-              className="z-10 inline-flex h-9 flex-shrink-0 items-center rounded-[100px] bg-zinc-700 px-5 text-center text-sm font-medium text-white hover:bg-opacity-60 focus:outline-none"
+              className="z-10 inline-flex h-9 flex-shrink-0 items-center rounded-[100px] bg-zinc-700 px-5 text-center text-sm font-medium text-white transition-all duration-300 hover:bg-zinc-800 focus:outline-none"
               type="button"
             >
               {SEARCH_MODES[searchBy].display}
-              <ChevronDown size={18} />
+              <div
+                className={`ml-2 transition-all duration-300 ${
+                  showSearchMethods ? '' : 'rotate-180'
+                }`}
+              >
+                <CaretDown size={16} weight="bold" />
+              </div>
             </button>
             <div
-              hidden={!showSearchMethods}
-              className="absolute left-0 top-12 z-99 w-44 divide-y divide-gray-100 rounded-lg bg-white shadow dark:bg-gray-700"
+              className={`absolute left-0 top-12 z-99 w-44 divide-y divide-gray-100 rounded-lg bg-zinc-700 shadow ${
+                showSearchMethods ? 'slide-down' : 'slide-up'
+              }`}
+              style={{
+                animationDuration: '0.15s',
+              }}
             >
               <ul
-                className="py-2 text-sm text-gray-700 dark:text-gray-200"
+                className="py-2 text-sm text-white"
                 aria-labelledby="dropdown-button"
               >
                 {Object.keys(SEARCH_MODES).map((_key, i) => {
@@ -115,7 +126,7 @@ export default function SearchView({
                           setFragments([]);
                         }}
                         type="button"
-                        className="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                        className="inline-flex w-full px-4 py-2  hover:bg-zinc-800"
                       >
                         {SEARCH_MODES[method].display}
                       </button>
@@ -128,29 +139,41 @@ export default function SearchView({
               <input
                 type="search"
                 name="query"
-                className="z-20 block w-full rounded-[100px] bg-main-2 p-2.5 text-sm"
+                className="z-20 -ml-4 block h-9 w-full rounded-r-[100px] bg-main-2 pl-8 text-sm text-white focus:outline-none"
                 placeholder={SEARCH_MODES[searchBy].placeholder}
                 required
               />
               <button
                 type="submit"
                 disabled={searching}
-                className="absolute right-0 top-0 h-full rounded-r-lg border border-blue-700 bg-blue-700 p-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                className="absolute right-0 top-0 mr-4.5 flex h-full p-2.5 text-sm font-medium text-white focus:outline-none"
               >
                 {searching ? (
                   <Loader size={18} className="animate-spin" />
                 ) : (
-                  <Search size={18} />
+                  <MagnifyingGlass
+                    className="text-sky-400 transition-all duration-300 hover:text-sky-700"
+                    size={18}
+                    weight="bold"
+                  />
                 )}
                 <span className="sr-only">Search</span>
               </button>
             </div>
-            <button
-              onClick={clearSearch}
-              type="button"
-              className="ml-2 flex items-center rounded-lg px-4 py-2 text-center text-black hover:bg-gray-200"
-            >
-              X
+
+            {/* clear search button */}
+            {/* <div className="flex items-center justify-center">
+              <button
+                onClick={clearSearch}
+                type="button"
+                className="flex items-center rounded-full bg-main-2 p-1 text-center text-white"
+              >
+                <X className="h-4 w-4" weight="bold" />
+              </button>
+            </div> */}
+
+            <button className="flex items-center justify-center rounded-[100px] bg-sky-400 px-2.5 text-xs">
+              <div className="font-bold uppercase text-black">Upload</div>
             </button>
           </div>
         </form>
diff --git a/frontend/src/pages/DocumentView/FragmentList/index.tsx b/frontend/src/pages/DocumentView/FragmentList/index.tsx
index 8d4c4a4..674e9a8 100644
--- a/frontend/src/pages/DocumentView/FragmentList/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/index.tsx
@@ -2,13 +2,13 @@ import { lazy, memo, useEffect, useState } from 'react';
 import PreLoader from '../../../components/Preloader';
 import Document from '../../../models/document';
 import truncate from 'truncate';
-import moment from 'moment';
 import pluralize from 'pluralize';
 import { useParams } from 'react-router-dom';
 import paths from '../../../utils/paths';
 import DocumentListPagination from '../../../components/DocumentPaginator';
 import SearchView from './SearchView';
 import MetadataEditor from './MetadataEditor';
+import { Trash } from '@phosphor-icons/react';
 const DeleteEmbeddingConfirmation = lazy(
   () => import('./DeleteEmbeddingConfirmation')
 );
@@ -75,77 +75,80 @@ export default function FragmentList({
 
   return (
     <>
-      <div className="col-span-12 h-screen flex-1 rounded-sm dark:border-strokedark dark:bg-boxdark xl:col-span-4">
-        <div className="flex items-start justify-between">
-          <div className="mb-6 flex flex-col gap-y-1 px-7.5 ">
-            <div className="flex items-center gap-x-2">
-              <div className="w-48 text-sm font-bold uppercase tracking-wide text-white">
+      <div className="h-screen rounded-sm">
+        <div className="">
+          <div className="flex flex-col">
+            <div className="mb-6 flex w-full items-center justify-between gap-x-12">
+              <div className="ml-4 w-48 text-sm font-bold uppercase tracking-wide text-white">
                 embeddings overview
               </div>
-              {/* <button
-                type="button"
-                onClick={() =>
-                  window.document
-                    .getElementById(`copy-document-${document.id}-modal`)
-                    ?.showModal()
-                }
-                className="rounded-lg px-4 py-2 text-sm text-blue-400 hover:bg-blue-50 hover:text-blue-600"
-              >
-                Clone Document
-              </button>
-              <button
-                onClick={deleteDocument}
-                className="rounded-lg px-4 py-2 text-sm text-slate-400 hover:bg-red-50 hover:text-red-600"
-              >
-                Delete Document
-              </button> */}
+              <SearchView
+                searchMode={searchMode}
+                setSearchMode={setSearchMode}
+                document={document}
+                FragmentItem={Fragment}
+                canEdit={canEdit}
+              />
             </div>
-
-            {/* <p className="text-sm text-slate-500">{document?.name}</p> */}
+            {/* <button
+              type="button"
+              onClick={() =>
+                window.document
+                  .getElementById(`copy-document-${document.id}-modal`)
+                  ?.showModal()
+              }
+              className="rounded-lg px-4 py-2 text-sm text-blue-400 hover:bg-blue-50 hover:text-blue-600"
+            >
+              Clone Document
+            </button>
+            <button
+              onClick={deleteDocument}
+              className="rounded-lg px-4 py-2 text-sm text-slate-400 hover:bg-red-50 hover:text-red-600"
+            >
+              Delete Document
+            </button>
+            <p className="text-sm text-slate-500">{document?.name}</p> */}
           </div>
         </div>
 
-        <SearchView
-          searchMode={searchMode}
-          setSearchMode={setSearchMode}
-          document={document}
-          FragmentItem={Fragment}
-          canEdit={canEdit}
-        />
-        <div hidden={searchMode} className="px-6">
+        <div
+          hidden={searchMode}
+          className="h-full rounded-lg border-2 border-white/20"
+        >
           {loading ? (
-            <div>
+            <div className="mt-48 flex h-full w-full justify-center">
               <PreLoader />
             </div>
           ) : (
-            <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
-              <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
-                <tr>
-                  <th scope="col" className="px-6 py-3">
-                    #
+            <table className="w-full rounded-xl text-left text-xs font-medium text-white text-opacity-80">
+              <thead>
+                <tr className="mt-10">
+                  <th
+                    scope="col"
+                    className="px-6 pb-2 pt-6 text-xs font-light text-white text-opacity-80"
+                  >
+                    Vector ID
                   </th>
-                  <th scope="col" className="px-6 py-3">
-                    Vector DB Id
-                  </th>
-                  <th scope="col" className="px-6 py-3">
+                  <th
+                    scope="col"
+                    className="px-6 pb-2 pt-6 text-xs font-light text-white text-opacity-80"
+                  >
                     Text Chunk
                   </th>
-                  <th scope="col" className="px-6 py-3">
+                  <th
+                    scope="col"
+                    className="px-6 pb-2 pt-6 text-xs font-light text-white text-opacity-80"
+                  >
                     Metadata
                   </th>
-                  <th scope="col" className="px-6 py-3">
-                    Last Updated
-                  </th>
-                  <th scope="col" className="px-6 py-3">
-                    Actions
-                  </th>
                 </tr>
               </thead>
               <tbody>
-                {fragments.map((fragment) => {
+                {fragments.map((fragment, index) => {
                   return (
                     <Fragment
                       key={fragment.id}
+                      index={index}
                       fragment={fragment}
                       sourceDoc={sourceDoc}
                       canEdit={canEdit}
@@ -174,11 +177,13 @@ const Fragment = ({
   sourceDoc,
   canEdit,
   connector,
+  index,
 }: {
   fragment: any;
   sourceDoc: any;
   canEdit: boolean;
   connector: any;
+  index: number;
 }) => {
   const [data, setData] = useState(null);
   const [metadata, setMetadata] = useState({});
@@ -201,20 +206,18 @@ const Fragment = ({
     <>
       <tr
         id={`embedding-row-${fragment.id}`}
-        className="border-b bg-white transition-all duration-300 dark:border-gray-700 dark:bg-gray-800"
+        className={`h-9 transition-all duration-300 ${
+          index % 2 === 0 ? 'bg-main-2' : 'bg-main'
+        }`}
       >
-        <th
-          scope="row"
-          className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
-        >
-          {fragment.id}
-        </th>
-        <td className="px-6 py-4">{fragment.vectorId}</td>
-        <td className="px-6 py-4">
+        <td className="px-6 text-sm font-bold text-white">
+          {fragment.vectorId}
+        </td>
+        <td className="px-6 ">
           {truncate(data?.metadata?.text, 40)}
           {!!data?.metadata?.text ? (
             <button
-              className="text-blue-400"
+              className="rounded-lg px-2 py-1 text-sky-400 transition-all duration-300 hover:text-opacity-80"
               onClick={() => {
                 document.getElementById(`${fragment.id}-text`)?.showModal();
               }}
@@ -231,18 +234,21 @@ const Fragment = ({
             </>
           )}
         </td>
-        <td className="px-6 py-4">
+        <td className="px-6 ">
           {Object.keys(metadata)?.length > 0 ? (
             <button
-              onClick={() => {
+              onClick={() =>
                 document
                   .getElementById(`${fragment.id}-metadata-editor`)
-                  ?.showModal();
-              }}
-              className="rounded-full bg-blue-200 px-2 py-[1px] text-center text-blue-700 hover:bg-blue-300"
+                  ?.showModal()
+              }
             >
-              +{Object.keys(metadata).length} metadata{' '}
-              {pluralize('item', Object.keys(metadata).length)}
+              <div className="flex h-5 w-[62px] items-center justify-center rounded-[84px] bg-white bg-opacity-10 px-2 py-1">
+                <div className="text-[10px] text-white">
+                  +{Object.keys(metadata).length}{' '}
+                  {pluralize('item', Object.keys(metadata).length)}
+                </div>
+              </div>
             </button>
           ) : (
             <>
@@ -263,32 +269,31 @@ const Fragment = ({
             </>
           )}
         </td>
-        <td className="px-6 py-4">
-          {moment(fragment.lastUpdatedAt).fromNow()}
-        </td>
-        <td className="flex items-center gap-x-4 px-6 py-4">
-          <button
-            type="button"
-            onClick={() => {
-              document
-                .getElementById(`${fragment.id}-edit-embedding`)
-                ?.showModal();
-            }}
-            className="rounded-lg px-2 py-1 text-blue-400 transition-all duration-300 hover:bg-blue-50 hover:text-blue-600"
-          >
-            Edit
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              document
-                .getElementById(`${fragment.id}-delete-embedding`)
-                ?.showModal();
-            }}
-            className="rounded-lg px-2 py-1 text-red-400 transition-all duration-300 hover:bg-red-50 hover:text-red-600"
-          >
-            Delete
-          </button>
+        <td>
+          <div className="flex items-center gap-x-4 px-4">
+            <button
+              type="button"
+              onClick={() => {
+                document
+                  .getElementById(`${fragment.id}-edit-embedding`)
+                  ?.showModal();
+              }}
+              className="rounded-lg px-2 py-1 text-sky-400 transition-all duration-300 hover:bg-blue-50"
+            >
+              Edit
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                document
+                  .getElementById(`${fragment.id}-delete-embedding`)
+                  ?.showModal();
+              }}
+              className="rounded-lg px-2 py-1 text-white transition-all duration-300 hover:bg-red-50 hover:text-red-600"
+            >
+              <Trash size={16} />
+            </button>
+          </div>
         </td>
       </tr>
       {!!data && !!fragment && (
diff --git a/frontend/src/pages/DocumentView/index.tsx b/frontend/src/pages/DocumentView/index.tsx
index 492ea5a..eb49a51 100644
--- a/frontend/src/pages/DocumentView/index.tsx
+++ b/frontend/src/pages/DocumentView/index.tsx
@@ -110,7 +110,7 @@ export default function DocumentView() {
       hasMoreWorkspaces={hasMoreWorkspaces}
       loadMoreWorkspaces={fetchWorkspaces}
     >
-      <div className="mt-4 grid grid-cols-12 gap-4 md:mt-6 md:gap-6 2xl:mt-7.5 2xl:gap-7.5">
+      <div className="grid grid-cols-12">
         <div className="col-span-12 xl:col-span-12">
           <FragmentList
             connector={connector}

From e906e8a63a5192dfd6f0f74598eea60429c0c586 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Fri, 8 Dec 2023 12:51:53 -0800
Subject: [PATCH 03/12] working header for document view

---
 frontend/src/components/Header/index.tsx      | 21 ++++-
 .../Sidebar/OrganizationTab/index.tsx         |  2 +-
 frontend/src/components/Sidebar/index.tsx     |  6 +-
 frontend/src/layout/AppLayout.tsx             |  6 +-
 .../pages/Dashboard/DocumentsList/index.tsx   | 92 -------------------
 .../FragmentList/SearchView/index.tsx         |  8 +-
 .../pages/DocumentView/FragmentList/index.tsx |  9 +-
 frontend/src/pages/DocumentView/index.tsx     | 81 +++++++++++++++-
 8 files changed, 116 insertions(+), 109 deletions(-)

diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index f7d8060..9c11d3c 100644
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -124,11 +124,24 @@ export default function Header(props: {
     //     </div>
     //   </div>
     // </header>
-    <header className=" flex w-full rounded-t-lg bg-main p-4">
-      <div>
-        <div className="w-fit rounded-lg border-2 border-white/20 px-5 py-2 text-sky-400">
-          Organization {'>'} Workspace 1 {'>'} Document 1 (placeholder info)
+    <header className="mr-26 flex h-[76px] w-full rounded-t-xl bg-main">
+      <div className="flex w-full justify-between p-4">
+        {/* <div className="w-fit rounded-xl border-2 border-white/20 px-5 py-2 text-sky-400">
+          Organization {'>'} Workspace 1 {'>'} Document 1
         </div>
+        <div className="flex gap-x-3">
+          <button className="inline-flex h-11 w-[74px] flex-col items-center justify-center gap-2.5 rounded-lg bg-white bg-opacity-10 px-5 py-2.5 transition-all duration-300 hover:bg-opacity-5">
+            <div className="h-[25.53px] w-11 text-center font-['Satoshi'] text-base font-bold text-white">
+              Clone
+            </div>
+          </button>
+          <button className="inline-flex h-11 w-[74px] flex-col items-center justify-center gap-2.5 rounded-lg border border-white border-opacity-20 px-3.5 py-2.5 transition-all duration-300 hover:bg-red-500">
+            <div className="h-[25.53px] w-[59px] text-center font-['Satoshi'] text-base font-bold text-white">
+              Delete
+            </div>
+          </button>
+        </div> */}
+        {extendedItems}
       </div>
     </header>
   );
diff --git a/frontend/src/components/Sidebar/OrganizationTab/index.tsx b/frontend/src/components/Sidebar/OrganizationTab/index.tsx
index f092574..9b8161d 100644
--- a/frontend/src/components/Sidebar/OrganizationTab/index.tsx
+++ b/frontend/src/components/Sidebar/OrganizationTab/index.tsx
@@ -221,7 +221,7 @@ function WorkspaceItem({ workspace, slug }: any) {
           }`;
         }}
       >
-        {truncate(workspace.name, 24)}
+        {truncate(workspace.name, 23)}
       </NavLink>
     </li>
   );
diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx
index 018dfcb..573e4de 100644
--- a/frontend/src/components/Sidebar/index.tsx
+++ b/frontend/src/components/Sidebar/index.tsx
@@ -100,7 +100,7 @@ export default function Sidebar({
             to={paths.dashboard()}
             className="flex w-full shrink-0 justify-center"
           >
-            <div className="flex h-[62px] w-full items-center justify-center rounded-br-[14px] bg-main-bg">
+            <div className="flex h-[62px] w-full items-center justify-center rounded-br-xl bg-main-bg">
               <img src={LogoSky} alt="Logo" className="w-[170px]" />
             </div>
           </NavLink>
@@ -130,9 +130,9 @@ export default function Sidebar({
         </div>
         {/* <!-- SIDEBAR HEADER --> */}
 
-        <div className="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
+        <div className="no-scrollbar flex flex-col overflow-y-auto rounded-tl-xl bg-main duration-300 ease-linear">
           {/* <!-- Sidebar Menu --> */}
-          <div className="no-scrollbar m-4 h-screen flex-grow overflow-y-auto rounded-xl border-2 border-white/20">
+          <div className="no-scrollbar mx-4 mb-8 mt-4 h-screen flex-grow overflow-y-auto rounded-xl border-2 border-white/20">
             <nav className="p-4 px-4 py-4 lg:px-6">
               {/* <!-- Menu Group --> */}
               <div>
diff --git a/frontend/src/layout/AppLayout.tsx b/frontend/src/layout/AppLayout.tsx
index e54a7e0..dca417e 100644
--- a/frontend/src/layout/AppLayout.tsx
+++ b/frontend/src/layout/AppLayout.tsx
@@ -42,7 +42,7 @@ const AppLayout = ({
           loadMoreWorkspaces={loadMoreWorkspaces}
         />
 
-        <div className="w-full overflow-x-hidden">
+        <div className="no-scrollbar w-full overflow-x-hidden overflow-y-hidden">
           {!!headerEntity && (
             <div className="flex w-full items-center">
               <Header
@@ -56,7 +56,9 @@ const AppLayout = ({
             </div>
           )}
           <main>
-            <div className="mx-auto bg-main pr-6 pt-6">{children}</div>
+            <div className="mx-auto rounded-tr-xl bg-main pr-6 pt-6">
+              {children}
+            </div>
           </main>
         </div>
       </div>
diff --git a/frontend/src/pages/Dashboard/DocumentsList/index.tsx b/frontend/src/pages/Dashboard/DocumentsList/index.tsx
index e9a8640..5d180e3 100644
--- a/frontend/src/pages/Dashboard/DocumentsList/index.tsx
+++ b/frontend/src/pages/Dashboard/DocumentsList/index.tsx
@@ -230,95 +230,3 @@ export default function DocumentsList({
     </>
   );
 }
-
-// const CodeExampleModal = ({ organization }: { organization: any }) => {
-//   // Rework this to be an upload modal.
-//   return (
-//     <dialog id="document-code-modal" className="w-1/2 rounded-lg">
-//       <div className="rounded-sm bg-white dark:border-strokedark dark:bg-boxdark">
-//         <div className="px-6.5 py-4 dark:border-strokedark">
-//           <h3 className="font-medium text-black dark:text-white">
-//             Adding documents to Conifer
-//           </h3>
-//           <p className="text-sm text-gray-500">
-//             You can begin managing documents with the code you have already
-//             written. Our library currently only supports NodeJS environments.
-//           </p>
-//         </div>
-
-//         <p className="my-2 rounded-lg border border-orange-800 bg-orange-100 p-2 text-center text-sm text-orange-800">
-//           During the Pinecone Hackathon the library is a standalone fork of
-//           langchainJS, but ideally it would eventually be live in the main
-//           LangchainJS repo :)
-//           <br />
-//           We werent able to add uploading or deleting docs via the UI but how
-//           cool would that be. It can be done via the library though.
-//         </p>
-
-//         <div className="max-h-[50vh] w-full overflow-y-scroll bg-slate-50">
-//           <CodeBlock
-//             theme={vs2015}
-//             text={`/* How to sync documents to Pinecone and Conifer with LangchainJS
-// Be sure you have the correct packages installed!
-// example: package.json
-// {
-//   "dependencies": {
-//     "@mintplex-labs/langchain": "https://gitpkg.now.sh/Mintplex-Labs/langchainjs/langchain?conifer",
-//     ...other deps
-// }
-// */
-
-// // Now write code as you usually would!
-// import { PineconeClient } from "@pinecone-database/pinecone";
-// import { PineconeStore } from "@mintplex-labs/langchain/dist/vectorstores/pinecone.js"
-// import { ConiferVDBMS } from "@mintplex-labs/langchain/dist/vdbms/conifer.js"
-// import { OpenAIEmbeddings } from "langchain/embeddings/openai";
-
-// const client = new PineconeClient();
-// await client.init({
-//   apiKey: 'my-pinecone-api-key',
-//   environment: 'us-central-gcp',
-// });
-
-// const pineconeIndex = client.Index('hackathon');
-// const coniferInstance = new ConiferVDBMS({
-//   orgId: '${organization.orgId}',
-//   workspaceId: 'workspace-xxxx', // Get from workspace page.
-//   apiKey: 'ck-xxx' // Get from the api key at the top of the page.
-// })
-
-// // Split documents with LangChain text splitter as you normally would
-
-// await PineconeStore.fromDocumentsVerbose(
-//   documents,
-//   new OpenAIEmbeddings({ openAIApiKey: 'sk-xxxxxxxx' }),
-//   {
-//     pineconeIndex,
-//     namespace:' testing-collection',
-//   },
-//   coniferInstance
-// )
-
-// // Documents will now exist in Conifer!
-// // More CRUD methods available at ${window.location.origin}/api-docs
-// `}
-//             language="javascript"
-//             showLineNumbers={false}
-//           />
-//         </div>
-
-//         <div className="mt-4 flex flex-col gap-y-2">
-//           <button
-//             type="button"
-//             onClick={() => {
-//               document.getElementById('document-code-modal')?.close();
-//             }}
-//             className="flex w-full justify-center rounded bg-transparent p-3 font-medium text-slate-500 hover:bg-slate-200"
-//           >
-//             Close Preview
-//           </button>
-//         </div>
-//       </div>
-//     </dialog>
-//   );
-// };
diff --git a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
index 48117e3..e3e49cd 100644
--- a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
@@ -172,7 +172,13 @@ export default function SearchView({
               </button>
             </div> */}
 
-            <button className="flex items-center justify-center rounded-[100px] bg-sky-400 px-2.5 text-xs">
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                document.getElementById('upload-document-modal')?.showModal();
+              }}
+              className="flex w-18 items-center justify-center rounded-[100px] bg-sky-400 px-2.5 text-xs"
+            >
               <div className="font-bold uppercase text-black">Upload</div>
             </button>
           </div>
diff --git a/frontend/src/pages/DocumentView/FragmentList/index.tsx b/frontend/src/pages/DocumentView/FragmentList/index.tsx
index 674e9a8..4e0b496 100644
--- a/frontend/src/pages/DocumentView/FragmentList/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/index.tsx
@@ -75,7 +75,7 @@ export default function FragmentList({
 
   return (
     <>
-      <div className="h-screen rounded-sm">
+      <div className="h-screen bg-main">
         <div className="">
           <div className="flex flex-col">
             <div className="mb-6 flex w-full items-center justify-between gap-x-12">
@@ -90,6 +90,7 @@ export default function FragmentList({
                 canEdit={canEdit}
               />
             </div>
+
             {/* <button
               type="button"
               onClick={() =>
@@ -113,7 +114,7 @@ export default function FragmentList({
 
         <div
           hidden={searchMode}
-          className="h-full rounded-lg border-2 border-white/20"
+          className="h-full flex-grow overflow-y-auto rounded-xl border-2 border-white/20 bg-main"
         >
           {loading ? (
             <div className="mt-48 flex h-full w-full justify-center">
@@ -160,13 +161,13 @@ export default function FragmentList({
             </table>
           )}
         </div>
-        {!searchMode && (
+        {/* {!searchMode && (
           <DocumentListPagination
             pageCount={totalPages}
             currentPage={currentPage}
             gotoPage={handlePageChange}
           />
-        )}
+        )} */}
       </div>
     </>
   );
diff --git a/frontend/src/pages/DocumentView/index.tsx b/frontend/src/pages/DocumentView/index.tsx
index eb49a51..d32b5ed 100644
--- a/frontend/src/pages/DocumentView/index.tsx
+++ b/frontend/src/pages/DocumentView/index.tsx
@@ -11,6 +11,8 @@ import Document from '../../models/document';
 import System from '../../models/system';
 import Organization from '../../models/organization';
 import { APP_NAME } from '../../utils/constants';
+import { CaretDown } from '@phosphor-icons/react';
+import truncate from 'truncate';
 
 export default function DocumentView() {
   const { user } = useUser();
@@ -109,6 +111,13 @@ export default function DocumentView() {
       workspaces={workspaces}
       hasMoreWorkspaces={hasMoreWorkspaces}
       loadMoreWorkspaces={fetchWorkspaces}
+      headerExtendedItems={
+        <DocumentViewHeader
+          organization={organization}
+          workspace={workspace}
+          document={document}
+        />
+      }
     >
       <div className="grid grid-cols-12">
         <div className="col-span-12 xl:col-span-12">
@@ -128,6 +137,74 @@ export default function DocumentView() {
   );
 }
 
+function DocumentViewHeader({ organization, workspace, document }: any) {
+  const { slug, workspaceSlug } = useParams();
+  const deleteDocument = async () => {
+    if (!document) return false;
+    if (
+      !confirm(
+        'Are you sure you want to delete this document? This will remove the document from your vector database and remove it from the cache. This process cannot be undone.'
+      )
+    )
+      return false;
+    const success = await Document.delete(document.id);
+    if (!success) return false;
+    window.location.replace(paths.workspace(slug, workspaceSlug));
+  };
+
+  const cloneDocument = async () => {
+    window.document
+      .getElementById(`copy-document-${document.id}-modal`)
+      ?.showModal();
+  };
+
+  return (
+    <>
+      <div className=" mr-10 w-full rounded-xl border-2 border-white/20 px-5 py-2 text-sky-400">
+        <div className="flex items-center gap-x-2">
+          <a
+            href={paths.organization(organization)}
+            className="text-sky-400 hover:cursor-pointer hover:underline"
+          >
+            {truncate(organization?.name, 20)}
+          </a>
+          <div className="text-sky-400" style={{ transform: 'rotate(270deg)' }}>
+            <CaretDown weight="bold" />
+          </div>
+          <a
+            href={paths.workspace(slug, workspaceSlug)}
+            className="text-sky-400 hover:cursor-pointer hover:underline"
+          >
+            {truncate(workspace?.name, 20)}
+          </a>
+          <div className="text-sky-400" style={{ transform: 'rotate(270deg)' }}>
+            <CaretDown weight="bold" />
+          </div>
+          <span className="text-white">{truncate(document?.name, 30)}</span>
+        </div>
+      </div>
+      <div className="flex gap-x-3">
+        <button
+          onClick={cloneDocument}
+          className="inline-flex h-11 w-[74px] flex-col items-center justify-center gap-2.5 rounded-lg bg-white bg-opacity-10 px-5 py-2.5 transition-all duration-300 hover:bg-opacity-5"
+        >
+          <div className="h-[25.53px] w-11 text-center font-['Satoshi'] text-base font-bold text-white">
+            Clone
+          </div>
+        </button>
+        <button
+          onClick={deleteDocument}
+          className="inline-flex h-11 w-[74px] flex-col items-center justify-center gap-2.5 rounded-lg border border-white border-opacity-20 px-3.5 py-2.5 transition-all duration-300 hover:bg-red-500"
+        >
+          <div className="h-[25.53px] w-[59px] text-center font-['Satoshi'] text-base font-bold text-white">
+            Delete
+          </div>
+        </button>
+      </div>
+    </>
+  );
+}
+
 const CopyDocToModal = memo(
   ({
     document,
@@ -162,7 +239,7 @@ const CopyDocToModal = memo(
 
     return (
       <dialog
-        id={`copy-document-${document.id}-modal`}
+        id={`copy-document-${document?.id}-modal`}
         className="w-1/2 rounded-lg outline-none"
         onClick={(event) => {
           event.target == event.currentTarget && event.currentTarget?.close();
@@ -198,7 +275,7 @@ const CopyDocToModal = memo(
         <div className="my-2 flex w-full justify-center p-[20px]">
           <form onSubmit={copyToWorkspace} className="flex flex-col gap-y-1">
             <p className="my-2 text-sm text-gray-800">
-              Clone {document.name} and it's embeddings to...
+              Clone {document?.name} and it's embeddings to...
             </p>
             <select
               name="workspaceId"

From 4adb2e5101d3aed5b22a126f4625a0649cd935b1 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Fri, 8 Dec 2023 16:47:52 -0800
Subject: [PATCH 04/12] WIP fixing document search

---
 .../FragmentList/SearchView/index.tsx         | 351 +++++++++---------
 .../pages/DocumentView/FragmentList/index.tsx |  25 +-
 frontend/src/pages/DocumentView/index.tsx     |   8 +
 3 files changed, 190 insertions(+), 194 deletions(-)

diff --git a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
index e3e49cd..551171f 100644
--- a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
@@ -5,8 +5,8 @@ import {
   useRef,
   useState,
 } from 'react';
-import { ChevronDown, Search, Loader } from 'react-feather';
-import { CaretDown, Plus, MagnifyingGlass, X } from '@phosphor-icons/react';
+import { Loader } from 'react-feather';
+import { CaretDown, MagnifyingGlass } from '@phosphor-icons/react';
 import Document from '../../../../models/document';
 
 export type ISearchTypes = 'semantic' | 'exactText' | 'metadata' | 'vectorId';
@@ -70,195 +70,202 @@ export default function SearchView({
 
     setSearching(true);
     setSearchTerm(query);
+
+    console.log('searchBy', searchBy);
+    console.log('query', query);
+
     const matches = await Document.searchEmbeddings(
       document.id,
       searchBy,
       query
     );
 
-    const vectorIds = matches.map((fragment) => fragment.vectorId);
-    const metadataForIds = await Document.metadatas(document.id, vectorIds);
+    // console.log('matches', matches);
 
-    setSourceDoc(metadataForIds);
-    setFragments(matches);
-    setSearching(false);
+    // const vectorIds = matches.map((fragment) => fragment.vectorId);
+
+    // console.log('vectorIds', vectorIds);
+    // console.log('document.id', document.id);
+    // const metadataForIds = await Document.metadatas(document.id, vectorIds);
+
+    // setSourceDoc(metadataForIds);
+    // setFragments(matches);
+    // setSearching(false);
   };
 
   return (
-    <div className="w-full flex-1">
-      <div className="flex items-center">
-        <form ref={formEl} onSubmit={handleSearch} className="w-full">
-          <div className="relative flex">
-            <button
-              onClick={() => setShowSearchMethods(!showSearchMethods)}
-              className="z-10 inline-flex h-9 flex-shrink-0 items-center rounded-[100px] bg-zinc-700 px-5 text-center text-sm font-medium text-white transition-all duration-300 hover:bg-zinc-800 focus:outline-none"
-              type="button"
-            >
-              {SEARCH_MODES[searchBy].display}
-              <div
-                className={`ml-2 transition-all duration-300 ${
-                  showSearchMethods ? '' : 'rotate-180'
-                }`}
-              >
-                <CaretDown size={16} weight="bold" />
-              </div>
-            </button>
-            <div
-              className={`absolute left-0 top-12 z-99 w-44 divide-y divide-gray-100 rounded-lg bg-zinc-700 shadow ${
-                showSearchMethods ? 'slide-down' : 'slide-up'
-              }`}
-              style={{
-                animationDuration: '0.15s',
-              }}
-            >
-              <ul
-                className="py-2 text-sm text-white"
-                aria-labelledby="dropdown-button"
-              >
-                {Object.keys(SEARCH_MODES).map((_key, i) => {
-                  const method = _key as ISearchTypes;
-                  return (
-                    <li key={i}>
-                      <button
-                        onClick={() => {
-                          setSearchBy(method);
-                          setShowSearchMethods(false);
-                          setFragments([]);
-                        }}
-                        type="button"
-                        className="inline-flex w-full px-4 py-2  hover:bg-zinc-800"
-                      >
-                        {SEARCH_MODES[method].display}
-                      </button>
-                    </li>
-                  );
-                })}
-              </ul>
-            </div>
-            <div className="relative w-full">
-              <input
-                type="search"
-                name="query"
-                className="z-20 -ml-4 block h-9 w-full rounded-r-[100px] bg-main-2 pl-8 text-sm text-white focus:outline-none"
-                placeholder={SEARCH_MODES[searchBy].placeholder}
-                required
-              />
+    <>
+      <div className="w-full flex-1">
+        <div className="flex items-center">
+          <form ref={formEl} onSubmit={handleSearch} className="w-full">
+            <div className="relative flex">
               <button
-                type="submit"
-                disabled={searching}
-                className="absolute right-0 top-0 mr-4.5 flex h-full p-2.5 text-sm font-medium text-white focus:outline-none"
-              >
-                {searching ? (
-                  <Loader size={18} className="animate-spin" />
-                ) : (
-                  <MagnifyingGlass
-                    className="text-sky-400 transition-all duration-300 hover:text-sky-700"
-                    size={18}
-                    weight="bold"
-                  />
-                )}
-                <span className="sr-only">Search</span>
-              </button>
-            </div>
-
-            {/* clear search button */}
-            {/* <div className="flex items-center justify-center">
-              <button
-                onClick={clearSearch}
+                onClick={() => setShowSearchMethods(!showSearchMethods)}
+                className="z-10 inline-flex h-9 flex-shrink-0 items-center rounded-[100px] bg-zinc-700 px-5 text-center text-sm font-medium text-white transition-all duration-300 hover:bg-zinc-800 focus:outline-none"
                 type="button"
-                className="flex items-center rounded-full bg-main-2 p-1 text-center text-white"
               >
-                <X className="h-4 w-4" weight="bold" />
+                {SEARCH_MODES[searchBy].display}
+                <div
+                  className={`ml-2 transition-all duration-300 ${
+                    showSearchMethods ? '' : 'rotate-180'
+                  }`}
+                >
+                  <CaretDown size={16} weight="bold" />
+                </div>
               </button>
-            </div> */}
-
-            <button
-              onClick={(e) => {
-                e.preventDefault();
-                document.getElementById('upload-document-modal')?.showModal();
-              }}
-              className="flex w-18 items-center justify-center rounded-[100px] bg-sky-400 px-2.5 text-xs"
-            >
-              <div className="font-bold uppercase text-black">Upload</div>
-            </button>
-          </div>
-        </form>
-      </div>
-
-      <div hidden={!searchMode} className="h-auto w-auto">
-        {searching ? (
-          <div>
-            <div className="flex min-h-[40vh] w-full px-8">
-              <div className="flex flex h-auto w-full flex-col items-center justify-center gap-y-2 rounded-lg bg-slate-50">
-                <Loader size={15} className="animate-spin rounded-sm" />
-                <p className="text-sm">
-                  Running {SEARCH_MODES[searchBy].display} for{' '}
-                  <code className="bg-gray-200 px-2">"{searchTerm}"</code>
-                </p>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <>
-            {fragments.length > 0 ? (
-              <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
-                <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
-                  <tr>
-                    <th scope="col" className="px-6 py-3">
-                      #
-                    </th>
-                    <th scope="col" className="px-6 py-3">
-                      Vector DB Id
-                    </th>
-                    <th scope="col" className="px-6 py-3">
-                      Text Chunk
-                    </th>
-                    <th scope="col" className="px-6 py-3">
-                      Last Updated
-                    </th>
-                    <th scope="col" className="px-6 py-3">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {fragments.map((fragment) => {
+              <div
+                className={`absolute left-0 top-12 z-99 w-44 divide-y divide-gray-100 rounded-lg bg-zinc-700 shadow ${
+                  showSearchMethods ? 'slide-down' : 'slide-up'
+                }`}
+                style={{
+                  animationDuration: '0.15s',
+                }}
+              >
+                <ul
+                  className="py-2 text-sm text-white"
+                  aria-labelledby="dropdown-button"
+                >
+                  {Object.keys(SEARCH_MODES).map((_key, i) => {
+                    const method = _key as ISearchTypes;
                     return (
-                      <FragmentItem
-                        key={fragment.id}
-                        fragment={fragment}
-                        sourceDoc={sourceDoc}
-                        canEdit={canEdit}
-                      />
+                      <li key={i}>
+                        <button
+                          onClick={() => {
+                            setSearchBy(method);
+                            setShowSearchMethods(false);
+                            setFragments([]);
+                          }}
+                          type="button"
+                          className="inline-flex w-full px-4 py-2  hover:bg-zinc-800"
+                        >
+                          {SEARCH_MODES[method].display}
+                        </button>
+                      </li>
                     );
                   })}
-                </tbody>
-              </table>
-            ) : (
-              <>
-                <div>
-                  <div className="flex min-h-[40vh] w-full px-8">
-                    <div className="flex flex h-auto w-full flex-col items-center justify-center gap-y-2 rounded-lg bg-slate-50">
-                      {!!searchTerm ? (
-                        <p className="text-sm">
-                          No results on {SEARCH_MODES[searchBy].display} for{' '}
-                          <code className="bg-gray-200 px-2">
-                            "{searchTerm}"
-                          </code>
-                        </p>
-                      ) : (
-                        <p className="text-sm">
-                          Type in a query to search for an embedding
-                        </p>
-                      )}
+                </ul>
+              </div>
+              <div className="relative w-full">
+                <input
+                  type="search"
+                  name="query"
+                  className="z-20 -ml-4 block h-9 w-full rounded-r-[100px] bg-main-2 pl-8 text-sm text-white focus:outline-none"
+                  placeholder={SEARCH_MODES[searchBy].placeholder}
+                  required
+                />
+                <button
+                  type="submit"
+                  disabled={searching}
+                  className="absolute right-0 top-0 mr-4.5 flex h-full p-2.5 text-sm font-medium text-white focus:outline-none"
+                >
+                  {searching ? (
+                    <Loader size={18} className="animate-spin" />
+                  ) : (
+                    <MagnifyingGlass
+                      className="text-sky-400 transition-all duration-300 hover:text-sky-700"
+                      size={18}
+                      weight="bold"
+                    />
+                  )}
+                  <span className="sr-only">Search</span>
+                </button>
+              </div>
+              <button
+                onClick={(e) => {
+                  e.preventDefault();
+                  window.document
+                    ?.getElementById('upload-document-modal')
+                    ?.showModal();
+                }}
+                className="flex w-18 items-center justify-center rounded-[100px] bg-sky-400 px-2.5 text-xs"
+              >
+                <div className="font-bold uppercase text-black">Upload</div>
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <div hidden={!searchMode} className="h-auto w-auto">
+          {searching ? (
+            <div>
+              <div className="flex min-h-[40vh] w-full px-8">
+                <div className="flex flex h-auto w-full flex-col items-center justify-center gap-y-2 rounded-lg bg-slate-50">
+                  <Loader size={15} className="animate-spin rounded-sm" />
+                  <p className="text-sm">
+                    Running {SEARCH_MODES[searchBy].display} for{' '}
+                    <code className="bg-gray-200 px-2">"{searchTerm}"</code>
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <>
+              {fragments.length > 0 ? (
+                <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
+                  <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+                    <tr>
+                      <th scope="col" className="px-6 py-3">
+                        #
+                      </th>
+                      <th scope="col" className="px-6 py-3">
+                        Vector DB Id
+                      </th>
+                      <th scope="col" className="px-6 py-3">
+                        Text Chunk
+                      </th>
+                      <th scope="col" className="px-6 py-3">
+                        Last Updated
+                      </th>
+                      <th scope="col" className="px-6 py-3">
+                        Actions
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {fragments.map((fragment) => {
+                      return (
+                        <FragmentItem
+                          key={fragment.id}
+                          fragment={fragment}
+                          sourceDoc={sourceDoc}
+                          canEdit={canEdit}
+                        />
+                      );
+                    })}
+                  </tbody>
+                </table>
+              ) : (
+                <>
+                  <div>
+                    <div className="flex min-h-[40vh] w-full px-8">
+                      <div className="flex flex h-auto w-full flex-col items-center justify-center gap-y-2 rounded-lg bg-slate-50">
+                        {!!searchTerm ? (
+                          <p className="text-sm">
+                            No results on {SEARCH_MODES[searchBy].display} for{' '}
+                            <code className="bg-gray-200 px-2">
+                              "{searchTerm}"
+                            </code>
+                          </p>
+                        ) : (
+                          <p className="text-sm">
+                            Type in a query to search for an embedding
+                          </p>
+                        )}
+                      </div>
                     </div>
                   </div>
-                </div>
-              </>
-            )}
-          </>
-        )}
+                </>
+              )}
+            </>
+          )}
+        </div>
       </div>
-    </div>
+
+      {/* {canUpload ? (
+        <UploadDocumentModal workspaces={workspaces} />
+      ) : (
+        <UploadModalNoKey />
+      )} */}
+    </>
   );
 }
diff --git a/frontend/src/pages/DocumentView/FragmentList/index.tsx b/frontend/src/pages/DocumentView/FragmentList/index.tsx
index 4e0b496..d50b596 100644
--- a/frontend/src/pages/DocumentView/FragmentList/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/index.tsx
@@ -90,25 +90,6 @@ export default function FragmentList({
                 canEdit={canEdit}
               />
             </div>
-
-            {/* <button
-              type="button"
-              onClick={() =>
-                window.document
-                  .getElementById(`copy-document-${document.id}-modal`)
-                  ?.showModal()
-              }
-              className="rounded-lg px-4 py-2 text-sm text-blue-400 hover:bg-blue-50 hover:text-blue-600"
-            >
-              Clone Document
-            </button>
-            <button
-              onClick={deleteDocument}
-              className="rounded-lg px-4 py-2 text-sm text-slate-400 hover:bg-red-50 hover:text-red-600"
-            >
-              Delete Document
-            </button>
-            <p className="text-sm text-slate-500">{document?.name}</p> */}
           </div>
         </div>
 
@@ -244,7 +225,7 @@ const Fragment = ({
                   ?.showModal()
               }
             >
-              <div className="flex h-5 w-[62px] items-center justify-center rounded-[84px] bg-white bg-opacity-10 px-2 py-1">
+              <div className="flex h-5 items-center justify-center rounded-[84px] bg-white bg-opacity-10 px-2 py-1 hover:opacity-75">
                 <div className="text-[10px] text-white">
                   +{Object.keys(metadata).length}{' '}
                   {pluralize('item', Object.keys(metadata).length)}
@@ -262,9 +243,9 @@ const Fragment = ({
                       .getElementById(`${fragment.id}-metadata-editor`)
                       ?.showModal();
                   }}
-                  className="rounded-full bg-blue-200 px-2 py-[1px] text-center text-blue-700 hover:bg-blue-300"
+                  className="flex h-5 items-center justify-center rounded-[84px] bg-white bg-opacity-10 px-2 py-1"
                 >
-                  <p>none</p>
+                  <p className="text-[10px] text-white">none</p>
                 </button>
               )}
             </>
diff --git a/frontend/src/pages/DocumentView/index.tsx b/frontend/src/pages/DocumentView/index.tsx
index d32b5ed..dc3fe23 100644
--- a/frontend/src/pages/DocumentView/index.tsx
+++ b/frontend/src/pages/DocumentView/index.tsx
@@ -13,6 +13,8 @@ import Organization from '../../models/organization';
 import { APP_NAME } from '../../utils/constants';
 import { CaretDown } from '@phosphor-icons/react';
 import truncate from 'truncate';
+import UploadDocumentModal from './UploadModal';
+import UploadModalNoKey from './UploadModal/UploadModalNoKey';
 
 export default function DocumentView() {
   const { user } = useUser();
@@ -133,6 +135,12 @@ export default function DocumentView() {
         workspace={workspace}
         workspaces={workspaces}
       />
+
+      {canEdit ? (
+        <UploadDocumentModal workspaces={workspaces} />
+      ) : (
+        <UploadModalNoKey />
+      )}
     </AppLayout>
   );
 }

From e6790377ce7bdef55f695379fa77377f05f75fc9 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Fri, 8 Dec 2023 18:05:39 -0800
Subject: [PATCH 05/12] Add upload document modal for embeddings overview page

---
 .../UploadModal/FileUploadProgress/index.tsx  |  84 +++++++
 .../UploadModal/UploadModalNoKey.tsx          |  68 ++++++
 .../pages/DocumentView/UploadModal/index.tsx  | 213 ++++++++++++++++++
 3 files changed, 365 insertions(+)
 create mode 100644 frontend/src/pages/DocumentView/UploadModal/FileUploadProgress/index.tsx
 create mode 100644 frontend/src/pages/DocumentView/UploadModal/UploadModalNoKey.tsx
 create mode 100644 frontend/src/pages/DocumentView/UploadModal/index.tsx

diff --git a/frontend/src/pages/DocumentView/UploadModal/FileUploadProgress/index.tsx b/frontend/src/pages/DocumentView/UploadModal/FileUploadProgress/index.tsx
new file mode 100644
index 0000000..5d3876f
--- /dev/null
+++ b/frontend/src/pages/DocumentView/UploadModal/FileUploadProgress/index.tsx
@@ -0,0 +1,84 @@
+import { useState, useEffect, memo } from 'react';
+import Workspace from '../../../../models/workspace';
+import truncate from 'truncate';
+import { humanFileSize, milliToHms } from '../../../../utils/numbers';
+import { CheckCircle, XCircle } from 'react-feather';
+import { Grid } from 'react-loading-icons';
+
+function FileUploadProgressComponent({
+  slug,
+  workspace,
+  file,
+  rejected = false,
+  reason = null,
+}: {
+  workspace: any;
+  slug: string;
+  file: any;
+  rejected: any;
+  reason: any;
+}) {
+  const [timerMs, setTimerMs] = useState(10);
+  const [status, setStatus] = useState(file?.rejected ? 'uploading' : 'failed');
+
+  useEffect(() => {
+    async function uploadFile() {
+      const start = Number(new Date());
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      const timer = setInterval(() => {
+        setTimerMs(Number(new Date()) - start);
+      }, 100);
+
+      // Chunk streaming not working in production so we just sit and wait
+      const { success } = await Workspace.uploadFile(
+        slug,
+        workspace.slug,
+        formData
+      );
+      setStatus(success ? 'complete' : 'failed');
+      clearInterval(timer);
+    }
+    !!file && !rejected && uploadFile();
+  }, []);
+
+  if (rejected) {
+    return (
+      <div className="flex w-fit items-center gap-x-4 rounded-lg border border-blue-600 bg-blue-100 bg-opacity-50 px-2 py-2 dark:border-stone-600 dark:bg-stone-800">
+        <div className="h-6 w-6">
+          <XCircle className="h-6 h-full w-6 w-full rounded-full bg-red-500 stroke-white p-1" />
+        </div>
+        <div className="flex flex-col">
+          <p className="font-mono overflow-x-scroll text-sm text-black dark:text-stone-200">
+            {truncate(file.name, 30)}
+          </p>
+          <p className="font-mono text-xs text-red-700 dark:text-red-400">
+            {reason}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-fit items-center gap-x-4 rounded-lg border border-blue-600 bg-blue-100 bg-opacity-50 px-2 py-2 dark:border-stone-600 dark:bg-stone-800">
+      <div className="h-6 w-6">
+        {status !== 'complete' ? (
+          <Grid className="grid-loader h-6 w-6" />
+        ) : (
+          <CheckCircle className="h-6 h-full w-6 w-full rounded-full bg-green-500 stroke-white p-1" />
+        )}
+      </div>
+      <div className="flex flex-col">
+        <p className="font-mono overflow-x-scroll text-sm text-black dark:text-stone-200">
+          {truncate(file.name, 30)}
+        </p>
+        <p className="font-mono text-xs text-gray-700 dark:text-stone-400">
+          {humanFileSize(file.size)} | {milliToHms(timerMs)}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default memo(FileUploadProgressComponent);
diff --git a/frontend/src/pages/DocumentView/UploadModal/UploadModalNoKey.tsx b/frontend/src/pages/DocumentView/UploadModal/UploadModalNoKey.tsx
new file mode 100644
index 0000000..c32e5f8
--- /dev/null
+++ b/frontend/src/pages/DocumentView/UploadModal/UploadModalNoKey.tsx
@@ -0,0 +1,68 @@
+import { AlertTriangle } from 'react-feather';
+import { APP_NAME } from '../../../utils/constants';
+import System from '../../../models/system';
+
+export default function UploadModalNoKey() {
+  const updateSystemSetting = async (e: any) => {
+    e.preventDefault();
+    const form = new FormData(e.target);
+    const open_ai_api_key = form.get('open_ai_api_key');
+    await System.updateSettings({ open_ai_api_key });
+    window.location.reload();
+  };
+
+  return (
+    <dialog
+      id="upload-document-modal"
+      className="w-1/2 rounded-lg"
+      onClick={(event) =>
+        event.target == event.currentTarget && event.currentTarget?.close()
+      }
+    >
+      <div className="my-4 flex w-full flex-col gap-y-1 p-[20px]">
+        <p className="text-lg font-semibold text-blue-600">
+          Upload new document
+        </p>
+      </div>
+      <div className="my-2 flex w-full p-[20px]">
+        <div className="flex flex w-full flex-col items-center gap-y-2 rounded-lg border border-orange-800 bg-orange-50 px-4 py-2 text-orange-800">
+          <div className="flex w-full items-center gap-x-2 text-lg">
+            <AlertTriangle /> You cannot upload and embed documents without an
+            OpenAI API Key.
+          </div>
+          <p>
+            {APP_NAME} will automatically upload and embed your documents for
+            you, but for this to happen we must have an OpenAI key set.
+          </p>
+          <form onSubmit={updateSystemSetting} className="w-full">
+            <div className="">
+              <div className="mb-4.5">
+                <label className="mb-2.5 block">Your OpenAI API Key</label>
+                <input
+                  required={true}
+                  type="password"
+                  name="open_ai_api_key"
+                  placeholder="sk-xxxxxxxxxx"
+                  autoComplete="off"
+                  className="w-full rounded border-[1.5px] border-stroke bg-transparent px-5 py-3 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
+                />
+              </div>
+              <div className="flex flex-col gap-y-2">
+                <button
+                  type="submit"
+                  className="flex w-full justify-center rounded bg-orange-500 p-3 font-medium text-white"
+                >
+                  Add OpenAI API Key
+                </button>
+              </div>
+            </div>
+            <p className="my-2 p-2 text-center text-sm text-orange-800">
+              This key will only be used for the embedding of documents you
+              upload via {APP_NAME}.
+            </p>
+          </form>
+        </div>
+      </div>
+    </dialog>
+  );
+}
diff --git a/frontend/src/pages/DocumentView/UploadModal/index.tsx b/frontend/src/pages/DocumentView/UploadModal/index.tsx
new file mode 100644
index 0000000..e3ddb80
--- /dev/null
+++ b/frontend/src/pages/DocumentView/UploadModal/index.tsx
@@ -0,0 +1,213 @@
+import { useCallback, useState, useEffect, ReactNode } from 'react';
+import { APP_NAME } from '../../../utils/constants';
+import { useDropzone } from 'react-dropzone';
+import { v4 } from 'uuid';
+import System from '../../../models/system';
+import { Frown } from 'react-feather';
+import FileUploadProgress from './FileUploadProgress';
+import { useParams } from 'react-router-dom';
+
+export default function UploadDocumentModal({
+  workspaces,
+}: {
+  workspaces: any;
+}) {
+  const { slug } = useParams();
+  const [targetWorkspace, setTargetWorkspace] = useState(null);
+  const [ready, setReady] = useState<boolean | null>(null);
+  const [files, setFiles] = useState([]);
+  const [fileTypes, setFileTypes] = useState({});
+  const onDrop = useCallback(
+    async (acceptedFiles: any[], rejections: any[]) => {
+      const newAccepted = acceptedFiles.map((file) => {
+        return {
+          uid: v4(),
+          workspaceId: targetWorkspace?.id,
+          file,
+        };
+      });
+      const newRejected = rejections.map((file) => {
+        return {
+          uid: v4(),
+          file: file.file,
+          rejected: true,
+          reason: file.errors[0].code,
+        };
+      });
+
+      setFiles([...files, ...newAccepted, ...newRejected]);
+    },
+    []
+  );
+
+  useEffect(() => {
+    async function checkProcessorOnline() {
+      const online = await System.documentProcessorOnline();
+      const acceptedTypes = await System.acceptedDocumentTypes();
+      setFileTypes(acceptedTypes ?? {});
+      setReady(online);
+    }
+    checkProcessorOnline();
+  }, []);
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    accept: {
+      ...fileTypes,
+    },
+  });
+
+  if (ready === null || !slug) {
+    return (
+      <ModalWrapper>
+        <div className="flex h-[20rem] w-full cursor-wait overflow-x-hidden overflow-y-scroll rounded-lg bg-stone-400 bg-opacity-20 outline-none transition-all duration-300">
+          <div className="flex h-full w-full flex-col items-center justify-center gap-y-1">
+            <p className="text-xs text-slate-400">
+              Checking document processor is online - please wait.
+            </p>
+            <p className="text-xs text-slate-400">
+              this should only take a few moments.
+            </p>
+          </div>
+        </div>
+      </ModalWrapper>
+    );
+  }
+
+  if (ready === false) {
+    return (
+      <ModalWrapper>
+        <div className="flex h-[20rem] w-full overflow-x-hidden overflow-y-scroll rounded-lg bg-red-200 outline-none transition-all duration-300">
+          <div className="flex h-full w-full flex-col items-center justify-center gap-y-1 px-2 md:px-0">
+            <Frown className="h-8 w-8 text-red-800" />
+            <p className="text-center text-xs text-red-800">
+              Document processor is offline.
+            </p>
+            <p className="text-center text-[10px] text-red-800 md:text-xs">
+              you cannot upload documents from the UI right now
+            </p>
+          </div>
+        </div>
+      </ModalWrapper>
+    );
+  }
+
+  if (ready === true && targetWorkspace === null) {
+    const saveWorkspace = (e: any) => {
+      e.preventDefault();
+      const form = new FormData(e.target);
+      const selectedWsId = form.get('workspaceId');
+      const workspace = workspaces.find(
+        (ws: any) => ws.id === Number(selectedWsId)
+      );
+      if (!workspace) return false;
+      setTargetWorkspace(workspace);
+    };
+
+    return (
+      <ModalWrapper>
+        <div className="flex h-[20rem] w-full overflow-x-hidden overflow-y-scroll rounded-lg bg-stone-400 bg-opacity-20 outline-none transition-all duration-300">
+          <div className="flex h-full w-full flex-col items-center justify-center gap-y-1">
+            <p className="text-sm text-slate-800">
+              Please select the workspace you wish to upload documents to.
+            </p>
+            <form onSubmit={saveWorkspace} className="flex flex-col gap-y-1">
+              <select
+                name="workspaceId"
+                className="rounded-lg px-4 py-2 outline-none"
+              >
+                {workspaces.map((ws: any) => {
+                  return <option value={ws.id}>{ws.name}</option>;
+                })}
+              </select>
+              <button className="my-2 rounded-lg px-4 py-2 text-blue-800 hover:bg-blue-50">
+                Continue &rarr;
+              </button>
+            </form>
+          </div>
+        </div>
+      </ModalWrapper>
+    );
+  }
+
+  return (
+    <ModalWrapper>
+      <div className="flex w-full flex-col gap-y-1">
+        <div
+          {...getRootProps()}
+          className="flex h-[20rem] w-full cursor-pointer overflow-x-hidden overflow-y-scroll rounded-lg bg-stone-400 bg-opacity-20 outline-none transition-all duration-300 hover:bg-opacity-40"
+        >
+          <input {...getInputProps()} />
+          {files.length === 0 ? (
+            <div className="flex h-full w-full flex-col items-center justify-center">
+              <div className="flex flex-col items-center justify-center pb-6 pt-5">
+                <svg
+                  aria-hidden="true"
+                  className="mb-3 h-10 w-10 text-gray-600 dark:text-slate-300"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  ></path>
+                </svg>
+                <p className="mb-2 text-sm text-gray-600 dark:text-slate-300">
+                  <span className="font-semibold">Click to upload</span> or drag
+                  and drop
+                </p>
+                <p className="text-xs text-gray-600 dark:text-slate-300"></p>
+              </div>
+            </div>
+          ) : (
+            <div className="flex w-full flex-col gap-y-2 p-4">
+              {files.map((file) => (
+                <FileUploadProgress
+                  key={file.uid}
+                  file={file.file}
+                  slug={slug}
+                  workspace={targetWorkspace}
+                  rejected={file?.rejected}
+                  reason={file?.reason}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+        <p className="text-xs text-gray-600 dark:text-stone-400 ">
+          supported file extensions are{' '}
+          <code className="font-mono rounded-sm bg-gray-200 px-1 text-xs text-gray-800 dark:bg-stone-800 dark:text-slate-400">
+            {Object.values(fileTypes).flat().join(' ')}
+          </code>
+        </p>
+      </div>
+    </ModalWrapper>
+  );
+}
+
+const ModalWrapper = ({ children }: { children: ReactNode }) => {
+  return (
+    <dialog
+      id="upload-document-modal"
+      className="w-1/2 rounded-lg outline-none"
+      onClick={(event) => {
+        event.target == event.currentTarget && event.currentTarget?.close();
+      }}
+    >
+      <div className="my-4 flex w-full flex-col gap-y-1 p-[20px]">
+        <p className="text-lg font-semibold text-blue-600">
+          Upload new document
+        </p>
+        <p className="text-base text-slate-800">
+          Select a workspace and document you wish to upload and {APP_NAME} will
+          process, embed and store the data for you automatically.
+        </p>
+      </div>
+      <div className="my-2 flex w-full p-[20px]">{children}</div>
+    </dialog>
+  );
+};

From 6e7df0d513864429938e211a4b7b81667344137c Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 11 Dec 2023 12:55:22 -0800
Subject: [PATCH 06/12] working search in document view WIP loading states/no
 results

---
 backend/endpoints/v1/documents/index.js       |  1 +
 .../FragmentList/SearchView/index.tsx         | 62 +++++++++++--------
 .../pages/DocumentView/FragmentList/index.tsx | 61 ++++++++++++------
 frontend/src/utils/constants.ts               | 21 +++++++
 4 files changed, 99 insertions(+), 46 deletions(-)

diff --git a/backend/endpoints/v1/documents/index.js b/backend/endpoints/v1/documents/index.js
index 8ac7179..db4c56e 100644
--- a/backend/endpoints/v1/documents/index.js
+++ b/backend/endpoints/v1/documents/index.js
@@ -409,6 +409,7 @@ function documentEndpoints(app) {
           method,
           query
         );
+
         response.status(200).json({ fragments, error });
       } catch (e) {
         console.log(e.message, e);
diff --git a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
index 551171f..6bc03a7 100644
--- a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
@@ -6,8 +6,9 @@ import {
   useState,
 } from 'react';
 import { Loader } from 'react-feather';
-import { CaretDown, MagnifyingGlass } from '@phosphor-icons/react';
+import { CaretDown, MagnifyingGlass, X } from '@phosphor-icons/react';
 import Document from '../../../../models/document';
+import { set } from 'lodash';
 
 export type ISearchTypes = 'semantic' | 'exactText' | 'metadata' | 'vectorId';
 
@@ -38,25 +39,34 @@ export default function SearchView({
   document,
   FragmentItem,
   canEdit,
+  setSearchFragments,
+  setSearching,
+  searching,
+  searchBy,
+  setSearchBy,
+  searchTerm,
+  setSearchTerm,
 }: {
   searchMode: boolean;
   document: object;
   setSearchMode: Dispatch<SetStateAction<boolean>>;
   FragmentItem: (props: any) => JSX.Element;
   canEdit: boolean;
+  setSearchFragments: Dispatch<SetStateAction<[]>>;
+  setSearching: Dispatch<SetStateAction<boolean>>;
+  searching: boolean;
+  searchBy: ISearchTypes;
+  setSearchBy: Dispatch<SetStateAction<ISearchTypes>>;
+  searchTerm: string;
+  setSearchTerm: Dispatch<SetStateAction<string>>;
 }) {
   const formEl = useRef<HTMLFormElement>(null);
-  const [searching, setSearching] = useState(false);
   const [showSearchMethods, setShowSearchMethods] = useState(false);
-  const [searchBy, setSearchBy] = useState<ISearchTypes>('exactText');
-  const [searchTerm, setSearchTerm] = useState<string>('');
-  const [fragments, setFragments] = useState([]);
   const [sourceDoc, setSourceDoc] = useState(null);
 
-  const clearSearch = () => {
+  const clearSearch = (e: SyntheticEvent<HTMLElement, SubmitEvent>) => {
+    e.preventDefault();
     setSearchBy('exactText');
-    setSearchTerm('');
-    setFragments([]);
     setSearching(false);
     setSearchMode(false);
     setSourceDoc(null);
@@ -71,26 +81,17 @@ export default function SearchView({
     setSearching(true);
     setSearchTerm(query);
 
-    console.log('searchBy', searchBy);
-    console.log('query', query);
-
     const matches = await Document.searchEmbeddings(
       document.id,
       searchBy,
       query
     );
 
-    // console.log('matches', matches);
-
-    // const vectorIds = matches.map((fragment) => fragment.vectorId);
-
-    // console.log('vectorIds', vectorIds);
-    // console.log('document.id', document.id);
-    // const metadataForIds = await Document.metadatas(document.id, vectorIds);
-
-    // setSourceDoc(metadataForIds);
-    // setFragments(matches);
-    // setSearching(false);
+    const vectorIds = matches.map((fragment) => fragment.vectorId);
+    const metadataForIds = await Document.metadatas(document.id, vectorIds);
+    setSourceDoc(metadataForIds);
+    setSearchFragments(matches);
+    setSearching(false);
   };
 
   return (
@@ -133,7 +134,7 @@ export default function SearchView({
                           onClick={() => {
                             setSearchBy(method);
                             setShowSearchMethods(false);
-                            setFragments([]);
+                            setSearchMode(false);
                           }}
                           type="button"
                           className="inline-flex w-full px-4 py-2  hover:bg-zinc-800"
@@ -147,7 +148,6 @@ export default function SearchView({
               </div>
               <div className="relative w-full">
                 <input
-                  type="search"
                   name="query"
                   className="z-20 -ml-4 block h-9 w-full rounded-r-[100px] bg-main-2 pl-8 text-sm text-white focus:outline-none"
                   placeholder={SEARCH_MODES[searchBy].placeholder}
@@ -159,7 +159,15 @@ export default function SearchView({
                   className="absolute right-0 top-0 mr-4.5 flex h-full p-2.5 text-sm font-medium text-white focus:outline-none"
                 >
                   {searching ? (
-                    <Loader size={18} className="animate-spin" />
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-white border-t-transparent" />
+                  ) : searchMode ? (
+                    <button onClick={clearSearch}>
+                      <X
+                        size={16}
+                        className="text-sky-400 transition-all duration-300 hover:text-sky-700"
+                        weight="bold"
+                      />
+                    </button>
                   ) : (
                     <MagnifyingGlass
                       className="text-sky-400 transition-all duration-300 hover:text-sky-700"
@@ -185,7 +193,7 @@ export default function SearchView({
           </form>
         </div>
 
-        <div hidden={!searchMode} className="h-auto w-auto">
+        {/* <div hidden={!searchMode} className="h-auto w-auto">
           {searching ? (
             <div>
               <div className="flex min-h-[40vh] w-full px-8">
@@ -258,7 +266,7 @@ export default function SearchView({
               )}
             </>
           )}
-        </div>
+        </div> */}
       </div>
 
       {/* {canUpload ? (
diff --git a/frontend/src/pages/DocumentView/FragmentList/index.tsx b/frontend/src/pages/DocumentView/FragmentList/index.tsx
index d50b596..656daec 100644
--- a/frontend/src/pages/DocumentView/FragmentList/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/index.tsx
@@ -9,6 +9,7 @@ import DocumentListPagination from '../../../components/DocumentPaginator';
 import SearchView from './SearchView';
 import MetadataEditor from './MetadataEditor';
 import { Trash } from '@phosphor-icons/react';
+import { SEARCH_MODES } from '../../../utils/constants';
 const DeleteEmbeddingConfirmation = lazy(
   () => import('./DeleteEmbeddingConfirmation')
 );
@@ -33,6 +34,10 @@ export default function FragmentList({
   const [sourceDoc, setSourceDoc] = useState(null);
   const [totalFragments, setTotalFragments] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
+  const [searchFragments, setSearchFragments] = useState([]);
+  const [searching, setSearching] = useState(false);
+  const [searchBy, setSearchBy] = useState<ISearchTypes>('exactText');
+  const [searchTerm, setSearchTerm] = useState('');
   const totalPages = Math.ceil(totalFragments / PAGE_SIZE);
 
   const handlePageChange = (page: number) => {
@@ -73,6 +78,10 @@ export default function FragmentList({
     getFragments(currentPage);
   }, [document, currentPage]);
 
+  useEffect(() => {
+    console.log('searchFragments', searchFragments);
+  }, [searchFragments]);
+
   return (
     <>
       <div className="h-screen bg-main">
@@ -88,18 +97,30 @@ export default function FragmentList({
                 document={document}
                 FragmentItem={Fragment}
                 canEdit={canEdit}
+                setSearchFragments={setSearchFragments}
+                setSearching={setSearching}
+                searching={searching}
+                searchBy={searchBy}
+                setSearchBy={setSearchBy}
+                searchTerm={searchTerm}
+                setSearchTerm={setSearchTerm}
               />
             </div>
           </div>
         </div>
 
-        <div
-          hidden={searchMode}
-          className="h-full flex-grow overflow-y-auto rounded-xl border-2 border-white/20 bg-main"
-        >
-          {loading ? (
-            <div className="mt-48 flex h-full w-full justify-center">
-              <PreLoader />
+        <div className="h-full flex-grow overflow-y-auto rounded-xl border-2 border-white/20 bg-main">
+          {loading || searching ? (
+            <div className="flex h-full w-full items-center justify-center">
+              <div className="flex flex-col items-center justify-center gap-y-4 text-center">
+                <PreLoader />
+                {searching && (
+                  <p className="text-white text-opacity-80">
+                    Running {SEARCH_MODES[searchBy].display} for{' '}
+                    <code className="px-2">"{searchTerm}"</code>
+                  </p>
+                )}
+              </div>
             </div>
           ) : (
             <table className="w-full rounded-xl text-left text-xs font-medium text-white text-opacity-80">
@@ -126,18 +147,20 @@ export default function FragmentList({
                 </tr>
               </thead>
               <tbody>
-                {fragments.map((fragment, index) => {
-                  return (
-                    <Fragment
-                      key={fragment.id}
-                      index={index}
-                      fragment={fragment}
-                      sourceDoc={sourceDoc}
-                      canEdit={canEdit}
-                      connector={connector}
-                    />
-                  );
-                })}
+                {(searchMode ? searchFragments : fragments).map(
+                  (fragment, index) => {
+                    return (
+                      <Fragment
+                        key={fragment.id}
+                        index={index}
+                        fragment={fragment}
+                        sourceDoc={sourceDoc}
+                        canEdit={canEdit}
+                        connector={connector}
+                      />
+                    );
+                  }
+                )}
               </tbody>
             </table>
           )}
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 39dd0f5..414b3d1 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -9,3 +9,24 @@ export const SUPPORTED_VECTOR_DBS = [
   'qdrant',
   'weaviate',
 ];
+
+export const SEARCH_MODES = {
+  exactText: {
+    display: 'Fuzzy Text Search',
+    placeholder: 'Find embedding via a fuzzy text match on your query.',
+  },
+  semantic: {
+    display: 'Semantic Search',
+    placeholder:
+      'Search with natural language finding the most similar embedding by meaning. Use of this search will cost OpenAI credits to embed the query.',
+  },
+  metadata: {
+    display: 'Metadata',
+    placeholder:
+      'Find embedding by exact key:value pair. Formatted as key:value_to_look_for',
+  },
+  vectorId: {
+    display: 'Vector Id',
+    placeholder: 'Find by a specific vector ID',
+  },
+};

From ccc1409e67548af93425bdc248ad2ca33de1b176 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 11 Dec 2023 15:40:43 -0800
Subject: [PATCH 07/12] show no results when no search results and loader for
 searching

---
 .../FragmentList/SearchView/index.tsx         | 147 ++++--------------
 .../pages/DocumentView/FragmentList/index.tsx |  29 +++-
 2 files changed, 49 insertions(+), 127 deletions(-)

diff --git a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
index 6bc03a7..b029270 100644
--- a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
@@ -9,30 +9,10 @@ import { Loader } from 'react-feather';
 import { CaretDown, MagnifyingGlass, X } from '@phosphor-icons/react';
 import Document from '../../../../models/document';
 import { set } from 'lodash';
+import { SEARCH_MODES } from '../../../../utils/constants';
 
 export type ISearchTypes = 'semantic' | 'exactText' | 'metadata' | 'vectorId';
 
-const SEARCH_MODES = {
-  exactText: {
-    display: 'Fuzzy Text Search',
-    placeholder: 'Find embedding via a fuzzy text match on your query.',
-  },
-  semantic: {
-    display: 'Semantic Search',
-    placeholder:
-      'Search with natural language finding the most similar embedding by meaning. Use of this search will cost OpenAI credits to embed the query.',
-  },
-  metadata: {
-    display: 'Metadata',
-    placeholder:
-      'Find embedding by exact key:value pair. Formatted as key:value_to_look_for',
-  },
-  vectorId: {
-    display: 'Vector Id',
-    placeholder: 'Find by a specific vector ID',
-  },
-};
-
 export default function SearchView({
   searchMode,
   setSearchMode,
@@ -88,6 +68,11 @@ export default function SearchView({
     );
 
     const vectorIds = matches.map((fragment) => fragment.vectorId);
+    if (vectorIds.length === 0) {
+      setSearching(false);
+      setSearchFragments([]);
+      return;
+    }
     const metadataForIds = await Document.metadatas(document.id, vectorIds);
     setSourceDoc(metadataForIds);
     setSearchFragments(matches);
@@ -153,30 +138,33 @@ export default function SearchView({
                   placeholder={SEARCH_MODES[searchBy].placeholder}
                   required
                 />
-                <button
-                  type="submit"
-                  disabled={searching}
-                  className="absolute right-0 top-0 mr-4.5 flex h-full p-2.5 text-sm font-medium text-white focus:outline-none"
-                >
-                  {searching ? (
+                {searching ? (
+                  <div className="absolute right-0 top-0 mr-4.5 flex h-full p-2.5 text-sm font-medium text-white focus:outline-none">
                     <div className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-white border-t-transparent" />
-                  ) : searchMode ? (
-                    <button onClick={clearSearch}>
-                      <X
-                        size={16}
-                        className="text-sky-400 transition-all duration-300 hover:text-sky-700"
-                        weight="bold"
-                      />
-                    </button>
-                  ) : (
+                  </div>
+                ) : searchMode ? (
+                  <button
+                    onClick={clearSearch}
+                    className="absolute right-0 top-0 mr-4.5 flex h-full items-center justify-center p-2.5 text-sm font-medium text-white focus:outline-none"
+                  >
+                    <X
+                      size={16}
+                      className="text-sky-400 transition-all duration-300 hover:text-sky-700"
+                      weight="bold"
+                    />
+                  </button>
+                ) : (
+                  <button
+                    type="submit"
+                    className="absolute right-0 top-0 mr-4.5 flex h-full items-center justify-center p-2.5 text-sm font-medium text-white focus:outline-none"
+                  >
                     <MagnifyingGlass
                       className="text-sky-400 transition-all duration-300 hover:text-sky-700"
                       size={18}
                       weight="bold"
                     />
-                  )}
-                  <span className="sr-only">Search</span>
-                </button>
+                  </button>
+                )}
               </div>
               <button
                 onClick={(e) => {
@@ -192,88 +180,7 @@ export default function SearchView({
             </div>
           </form>
         </div>
-
-        {/* <div hidden={!searchMode} className="h-auto w-auto">
-          {searching ? (
-            <div>
-              <div className="flex min-h-[40vh] w-full px-8">
-                <div className="flex flex h-auto w-full flex-col items-center justify-center gap-y-2 rounded-lg bg-slate-50">
-                  <Loader size={15} className="animate-spin rounded-sm" />
-                  <p className="text-sm">
-                    Running {SEARCH_MODES[searchBy].display} for{' '}
-                    <code className="bg-gray-200 px-2">"{searchTerm}"</code>
-                  </p>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <>
-              {fragments.length > 0 ? (
-                <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
-                  <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
-                    <tr>
-                      <th scope="col" className="px-6 py-3">
-                        #
-                      </th>
-                      <th scope="col" className="px-6 py-3">
-                        Vector DB Id
-                      </th>
-                      <th scope="col" className="px-6 py-3">
-                        Text Chunk
-                      </th>
-                      <th scope="col" className="px-6 py-3">
-                        Last Updated
-                      </th>
-                      <th scope="col" className="px-6 py-3">
-                        Actions
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {fragments.map((fragment) => {
-                      return (
-                        <FragmentItem
-                          key={fragment.id}
-                          fragment={fragment}
-                          sourceDoc={sourceDoc}
-                          canEdit={canEdit}
-                        />
-                      );
-                    })}
-                  </tbody>
-                </table>
-              ) : (
-                <>
-                  <div>
-                    <div className="flex min-h-[40vh] w-full px-8">
-                      <div className="flex flex h-auto w-full flex-col items-center justify-center gap-y-2 rounded-lg bg-slate-50">
-                        {!!searchTerm ? (
-                          <p className="text-sm">
-                            No results on {SEARCH_MODES[searchBy].display} for{' '}
-                            <code className="bg-gray-200 px-2">
-                              "{searchTerm}"
-                            </code>
-                          </p>
-                        ) : (
-                          <p className="text-sm">
-                            Type in a query to search for an embedding
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </>
-              )}
-            </>
-          )}
-        </div> */}
       </div>
-
-      {/* {canUpload ? (
-        <UploadDocumentModal workspaces={workspaces} />
-      ) : (
-        <UploadModalNoKey />
-      )} */}
     </>
   );
 }
diff --git a/frontend/src/pages/DocumentView/FragmentList/index.tsx b/frontend/src/pages/DocumentView/FragmentList/index.tsx
index 656daec..0605301 100644
--- a/frontend/src/pages/DocumentView/FragmentList/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/index.tsx
@@ -77,11 +77,6 @@ export default function FragmentList({
   useEffect(() => {
     getFragments(currentPage);
   }, [document, currentPage]);
-
-  useEffect(() => {
-    console.log('searchFragments', searchFragments);
-  }, [searchFragments]);
-
   return (
     <>
       <div className="h-screen bg-main">
@@ -164,6 +159,26 @@ export default function FragmentList({
               </tbody>
             </table>
           )}
+          {searchMode && searchFragments.length === 0 && (
+            <div className="flex h-full w-full items-center justify-center">
+              <div className="flex flex-col items-center justify-center gap-y-4 text-center">
+                <p className="text-white text-opacity-80">
+                  No results found on {SEARCH_MODES[searchBy].display} for{' '}
+                  <code className="px-2">"{searchTerm}"</code>
+                </p>
+              </div>
+            </div>
+          )}
+          {fragments.length === 0 && !searching && (
+            <div className="flex h-full w-full items-center justify-center">
+              <div className="flex flex-col items-center justify-center gap-y-4 text-center">
+                <p className="text-white text-opacity-80">
+                  No vectors found for this document.
+                  <code className="px-2">"{searchTerm}"</code>
+                </p>
+              </div>
+            </div>
+          )}
         </div>
         {/* {!searchMode && (
           <DocumentListPagination
@@ -219,7 +234,7 @@ const Fragment = ({
           {fragment.vectorId}
         </td>
         <td className="px-6 ">
-          {truncate(data?.metadata?.text, 40)}
+          {truncate(data?.metadata?.text, 30)}
           {!!data?.metadata?.text ? (
             <button
               className="rounded-lg px-2 py-1 text-sky-400 transition-all duration-300 hover:text-opacity-80"
@@ -249,7 +264,7 @@ const Fragment = ({
               }
             >
               <div className="flex h-5 items-center justify-center rounded-[84px] bg-white bg-opacity-10 px-2 py-1 hover:opacity-75">
-                <div className="text-[10px] text-white">
+                <div className="whitespace-nowrap text-[10px] text-white">
                   +{Object.keys(metadata).length}{' '}
                   {pluralize('item', Object.keys(metadata).length)}
                 </div>

From bf0b067a246cfcc0818af26d70249cd3f805c812 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Mon, 11 Dec 2023 16:44:31 -0800
Subject: [PATCH 08/12] update dialog styles

---
 frontend/src/index.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index b6f1125..4d45823 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -26,7 +26,7 @@ dialog {
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.2s;
-  display: flex;
+  display: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -34,6 +34,7 @@ dialog {
 
 dialog[open] {
   opacity: 1;
+  display: flex;
   pointer-events: inherit;
 }
 
@@ -56,6 +57,7 @@ dialog::backdrop {
     max-height: 0;
     opacity: 0;
   }
+
   to {
     max-height: 200px;
     opacity: 1;
@@ -66,12 +68,12 @@ dialog::backdrop {
   animation: slideDown 0.3s ease-out forwards;
 }
 
-
 @keyframes slideUp {
   from {
     max-height: 200px;
     opacity: 1;
   }
+
   to {
     max-height: 0;
     opacity: 0;
@@ -81,5 +83,3 @@ dialog::backdrop {
 .slide-up {
   animation: slideUp 0.3s ease-out forwards;
 }
-
-

From 89eeccf8f3da19c5631ee9de82327eb11e10c3de Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Mon, 11 Dec 2023 17:05:22 -0800
Subject: [PATCH 09/12] patch: fix some imports for types, solve white bg at
 bottom of screens, update document view

---
 backend/storage/settings.json                 | 1076 +++++++----------
 frontend/src/layout/AppLayout.tsx             |    2 +-
 frontend/src/models/document.ts               |    3 +-
 frontend/src/models/workspace.ts              |    3 +-
 .../FragmentList/SearchView/index.tsx         |    8 +-
 .../pages/DocumentView/FragmentList/index.tsx |   23 +-
 .../DocumentsList/SearchView/index.tsx        |   24 +-
 frontend/src/utils/constants.ts               |    1 +
 8 files changed, 475 insertions(+), 665 deletions(-)

diff --git a/backend/storage/settings.json b/backend/storage/settings.json
index afc8999..98f127d 100644
--- a/backend/storage/settings.json
+++ b/backend/storage/settings.json
@@ -1,468 +1,4 @@
 {
-  "_prisma_migrations": {
-    "slug": "_prisma_migrations",
-    "table": {
-      "name": "_prisma_migrations",
-      "pk": "id",
-      "verbose": "_prisma_migrations"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "varchar(36)",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "checksum",
-        "verbose": "checksum",
-        "control": {
-          "text": true
-        },
-        "type": "varchar(64)",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "finished_at",
-        "verbose": "finished_at",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": true,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "migration_name",
-        "verbose": "migration_name",
-        "control": {
-          "text": true
-        },
-        "type": "varchar(255)",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "logs",
-        "verbose": "logs",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": true,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "rolled_back_at",
-        "verbose": "rolled_back_at",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": true,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "started_at",
-        "verbose": "started_at",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "now()",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "applied_steps_count",
-        "verbose": "applied_steps_count",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": "0",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
-  "system_settings": {
-    "slug": "system_settings",
-    "table": {
-      "name": "system_settings",
-      "pk": "id",
-      "verbose": "system_settings"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "label",
-        "verbose": "label",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "value",
-        "verbose": "value",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "createdAt",
-        "verbose": "createdAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "lastUpdatedAt",
-        "verbose": "lastUpdatedAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
-  "users": {
-    "slug": "users",
-    "table": {
-      "name": "users",
-      "pk": "id",
-      "verbose": "users"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "email",
-        "verbose": "email",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "password",
-        "verbose": "password",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "role",
-        "verbose": "role",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": "'default'::text",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "createdAt",
-        "verbose": "createdAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "lastUpdatedAt",
-        "verbose": "lastUpdatedAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
-  "organization_users": {
-    "slug": "organization_users",
-    "table": {
-      "name": "organization_users",
-      "pk": "id",
-      "verbose": "organization_users"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "user_id",
-        "verbose": "user_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "organization_id",
-        "verbose": "organization_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "createdAt",
-        "verbose": "createdAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "lastUpdatedAt",
-        "verbose": "lastUpdatedAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
   "organizations": {
     "slug": "organizations",
     "table": {
@@ -795,6 +331,154 @@
       "readonly": false
     }
   },
+  "organization_workspaces": {
+    "slug": "organization_workspaces",
+    "table": {
+      "name": "organization_workspaces",
+      "pk": "id",
+      "verbose": "organization_workspaces"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "name",
+        "verbose": "name",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "slug",
+        "verbose": "slug",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "uuid",
+        "verbose": "uuid",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "fname",
+        "verbose": "fname",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "organization_id",
+        "verbose": "organization_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "createdAt",
+        "verbose": "createdAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "lastUpdatedAt",
+        "verbose": "lastUpdatedAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
   "workspace_documents": {
     "slug": "workspace_documents",
     "table": {
@@ -1075,6 +759,222 @@
       "readonly": false
     }
   },
+  "users": {
+    "slug": "users",
+    "table": {
+      "name": "users",
+      "pk": "id",
+      "verbose": "users"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "email",
+        "verbose": "email",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "password",
+        "verbose": "password",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "role",
+        "verbose": "role",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": "'default'::text",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "createdAt",
+        "verbose": "createdAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "lastUpdatedAt",
+        "verbose": "lastUpdatedAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
+  "system_settings": {
+    "slug": "system_settings",
+    "table": {
+      "name": "system_settings",
+      "pk": "id",
+      "verbose": "system_settings"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "label",
+        "verbose": "label",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "value",
+        "verbose": "value",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "createdAt",
+        "verbose": "createdAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "lastUpdatedAt",
+        "verbose": "lastUpdatedAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
   "jobs": {
     "slug": "jobs",
     "table": {
@@ -1239,154 +1139,6 @@
       "readonly": false
     }
   },
-  "organization_workspaces": {
-    "slug": "organization_workspaces",
-    "table": {
-      "name": "organization_workspaces",
-      "pk": "id",
-      "verbose": "organization_workspaces"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "name",
-        "verbose": "name",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "slug",
-        "verbose": "slug",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "uuid",
-        "verbose": "uuid",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "organization_id",
-        "verbose": "organization_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "createdAt",
-        "verbose": "createdAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "lastUpdatedAt",
-        "verbose": "lastUpdatedAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "fname",
-        "verbose": "fname",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
   "organization_notifications": {
     "slug": "organization_notifications",
     "table": {
@@ -1551,6 +1303,106 @@
       "readonly": false
     }
   },
+  "organization_users": {
+    "slug": "organization_users",
+    "table": {
+      "name": "organization_users",
+      "pk": "id",
+      "verbose": "organization_users"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "user_id",
+        "verbose": "user_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "organization_id",
+        "verbose": "organization_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "createdAt",
+        "verbose": "createdAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "lastUpdatedAt",
+        "verbose": "lastUpdatedAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
   "organization_rag_tests": {
     "slug": "organization_rag_tests",
     "table": {
diff --git a/frontend/src/layout/AppLayout.tsx b/frontend/src/layout/AppLayout.tsx
index dca417e..25d236c 100644
--- a/frontend/src/layout/AppLayout.tsx
+++ b/frontend/src/layout/AppLayout.tsx
@@ -42,7 +42,7 @@ const AppLayout = ({
           loadMoreWorkspaces={loadMoreWorkspaces}
         />
 
-        <div className="no-scrollbar w-full overflow-x-hidden overflow-y-hidden">
+        <div className="no-scrollbar w-full overflow-x-hidden">
           {!!headerEntity && (
             <div className="flex w-full items-center">
               <Header
diff --git a/frontend/src/models/document.ts b/frontend/src/models/document.ts
index 8414614..3583465 100644
--- a/frontend/src/models/document.ts
+++ b/frontend/src/models/document.ts
@@ -1,5 +1,4 @@
-import { ISearchTypes } from '../pages/DocumentView/FragmentList/SearchView';
-import { API_BASE } from '../utils/constants';
+import { API_BASE, ISearchTypes } from '../utils/constants';
 import { baseHeaders, getAPIUrlString } from '../utils/request';
 
 const Document = {
diff --git a/frontend/src/models/workspace.ts b/frontend/src/models/workspace.ts
index a079911..59deb6b 100644
--- a/frontend/src/models/workspace.ts
+++ b/frontend/src/models/workspace.ts
@@ -1,5 +1,4 @@
-import { ISearchTypes } from '../pages/WorkspaceDashboard/DocumentsList/SearchView';
-import { API_BASE } from '../utils/constants';
+import { API_BASE, ISearchTypes } from '../utils/constants';
 import { baseHeaders, getAPIUrlString } from '../utils/request';
 
 const Workspace = {
diff --git a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
index b029270..0ba2635 100644
--- a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
@@ -5,13 +5,9 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Loader } from 'react-feather';
 import { CaretDown, MagnifyingGlass, X } from '@phosphor-icons/react';
 import Document from '../../../../models/document';
-import { set } from 'lodash';
-import { SEARCH_MODES } from '../../../../utils/constants';
-
-export type ISearchTypes = 'semantic' | 'exactText' | 'metadata' | 'vectorId';
+import { SEARCH_MODES, ISearchTypes } from '../../../../utils/constants';
 
 export default function SearchView({
   searchMode,
@@ -156,7 +152,7 @@ export default function SearchView({
                 ) : (
                   <button
                     type="submit"
-                    className="absolute right-0 top-0 mr-4.5 flex h-full items-center justify-center p-2.5 text-sm font-medium text-white focus:outline-none"
+                    className="absolute -right-1 top-0 mr-4.5 flex h-full items-center justify-center rounded-r-[100px] bg-[#303237] p-2.5 text-sm font-medium text-white focus:outline-none"
                   >
                     <MagnifyingGlass
                       className="text-sky-400 transition-all duration-300 hover:text-sky-700"
diff --git a/frontend/src/pages/DocumentView/FragmentList/index.tsx b/frontend/src/pages/DocumentView/FragmentList/index.tsx
index 0605301..780ef3a 100644
--- a/frontend/src/pages/DocumentView/FragmentList/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/index.tsx
@@ -4,12 +4,11 @@ import Document from '../../../models/document';
 import truncate from 'truncate';
 import pluralize from 'pluralize';
 import { useParams } from 'react-router-dom';
-import paths from '../../../utils/paths';
 import DocumentListPagination from '../../../components/DocumentPaginator';
 import SearchView from './SearchView';
 import MetadataEditor from './MetadataEditor';
 import { Trash } from '@phosphor-icons/react';
-import { SEARCH_MODES } from '../../../utils/constants';
+import { ISearchTypes, SEARCH_MODES } from '../../../utils/constants';
 const DeleteEmbeddingConfirmation = lazy(
   () => import('./DeleteEmbeddingConfirmation')
 );
@@ -27,7 +26,6 @@ export default function FragmentList({
   document: any;
   canEdit: boolean;
 }) {
-  const { slug, workspaceSlug } = useParams();
   const [loading, setLoading] = useState(true);
   const [searchMode, setSearchMode] = useState(false);
   const [fragments, setFragments] = useState([]);
@@ -44,19 +42,6 @@ export default function FragmentList({
     setCurrentPage(page);
   };
 
-  const deleteDocument = async () => {
-    if (!document) return false;
-    if (
-      !confirm(
-        'Are you sure you want to delete this document? This will remove the document from your vector database and remove it from the cache. This process cannot be undone.'
-      )
-    )
-      return false;
-    const success = await Document.delete(document.id);
-    if (!success) return false;
-    window.location.replace(paths.workspace(slug, workspaceSlug));
-  };
-
   const getFragments = async (page = 1) => {
     if (!document?.id) return;
     setLoading(true);
@@ -79,7 +64,7 @@ export default function FragmentList({
   }, [document, currentPage]);
   return (
     <>
-      <div className="h-screen bg-main">
+      <div className="max-h-[100vh] bg-main">
         <div className="">
           <div className="flex flex-col">
             <div className="mb-6 flex w-full items-center justify-between gap-x-12">
@@ -180,13 +165,13 @@ export default function FragmentList({
             </div>
           )}
         </div>
-        {/* {!searchMode && (
+        {!searchMode && (
           <DocumentListPagination
             pageCount={totalPages}
             currentPage={currentPage}
             gotoPage={handlePageChange}
           />
-        )} */}
+        )}
       </div>
     </>
   );
diff --git a/frontend/src/pages/WorkspaceDashboard/DocumentsList/SearchView/index.tsx b/frontend/src/pages/WorkspaceDashboard/DocumentsList/SearchView/index.tsx
index af9a3bd..a1caae3 100644
--- a/frontend/src/pages/WorkspaceDashboard/DocumentsList/SearchView/index.tsx
+++ b/frontend/src/pages/WorkspaceDashboard/DocumentsList/SearchView/index.tsx
@@ -5,29 +5,7 @@ import truncate from 'truncate';
 import moment from 'moment';
 import paths from '../../../../utils/paths';
 import Workspace from '../../../../models/workspace';
-
-export type ISearchTypes = 'semantic' | 'exactText' | 'metadata' | 'vectorId';
-
-const SEARCH_MODES = {
-  exactText: {
-    display: 'Fuzzy Text Search',
-    placeholder: 'Find documents via a fuzzy text match on your query.',
-  },
-  semantic: {
-    display: 'Semantic Search',
-    placeholder:
-      'Search with natural language finding the most similar text by meaning. Use of this search will cost OpenAI credits to embed the query.',
-  },
-  metadata: {
-    display: 'Metadata',
-    placeholder:
-      'Find documents by exact key:value pair. Formatted as key:value_to_look_for',
-  },
-  vectorId: {
-    display: 'Vector Id',
-    placeholder: 'Find a document which contains a specific vector ID',
-  },
-};
+import { SEARCH_MODES, ISearchTypes } from '../../../../utils/constants';
 
 export default function SearchView({
   organization,
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 414b3d1..d9e8364 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -10,6 +10,7 @@ export const SUPPORTED_VECTOR_DBS = [
   'weaviate',
 ];
 
+export type ISearchTypes = 'semantic' | 'exactText' | 'metadata' | 'vectorId';
 export const SEARCH_MODES = {
   exactText: {
     display: 'Fuzzy Text Search',

From 700c9520fbc010bb14025e4314595952a1370072 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 11 Dec 2023 17:46:32 -0800
Subject: [PATCH 10/12] loading state fix

---
 frontend/src/pages/DocumentView/FragmentList/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/DocumentView/FragmentList/index.tsx b/frontend/src/pages/DocumentView/FragmentList/index.tsx
index 780ef3a..cb9c850 100644
--- a/frontend/src/pages/DocumentView/FragmentList/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/index.tsx
@@ -154,7 +154,7 @@ export default function FragmentList({
               </div>
             </div>
           )}
-          {fragments.length === 0 && !searching && (
+          {!searchMode && fragments.length === 0 && !searching && !loading && (
             <div className="flex h-full w-full items-center justify-center">
               <div className="flex flex-col items-center justify-center gap-y-4 text-center">
                 <p className="text-white text-opacity-80">

From 03f5c38f3383f807fed6d6b8a5310b701437769e Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 12 Dec 2023 10:53:20 -0800
Subject: [PATCH 11/12] fix styling for document paginator and search modes

---
 .../components/DocumentPaginator/index.tsx    | 39 ++++++++++++++++---
 .../pages/DocumentView/FragmentList/index.tsx | 17 ++++++--
 frontend/src/pages/DocumentView/index.tsx     |  2 +-
 3 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/DocumentPaginator/index.tsx b/frontend/src/components/DocumentPaginator/index.tsx
index 3d72889..d55fb93 100644
--- a/frontend/src/components/DocumentPaginator/index.tsx
+++ b/frontend/src/components/DocumentPaginator/index.tsx
@@ -1,3 +1,4 @@
+import { CaretDown } from '@phosphor-icons/react';
 import { numberWithCommas } from '../../utils/numbers';
 
 function generatePageItems(total: number, current: number) {
@@ -30,17 +31,37 @@ export default function DocumentListPagination({
   gotoPage,
 }: IPaginationProps) {
   const pageItems = generatePageItems(pageCount, currentPage);
+
+  const hasPrevious = currentPage > 1;
+  const hasNext = currentPage < pageCount;
+
+  const goToPrevious = () => {
+    if (currentPage > 1) gotoPage(currentPage - 1);
+  };
+
+  const goToNext = () => {
+    if (currentPage < pageCount) gotoPage(currentPage + 1);
+  };
+
   return (
-    <div className="my-4 flex justify-center">
+    <div className="my-4 mb-8 flex justify-center">
+      {hasPrevious && (
+        <button
+          onClick={goToPrevious}
+          className="rotate-90 px-2 text-white/20 transition-all duration-300 hover:text-sky-400"
+        >
+          <CaretDown size={20} weight="bold" />
+        </button>
+      )}
       <ul className="pagination pagination-sm">
         {pageItems.map((item, i) =>
           typeof item === 'number' ? (
             <button
               key={item}
-              className={`border px-3 py-2 text-sm ${
+              className={`border px-3 py-2 text-sm transition-all duration-300 hover:border-sky-400 hover:bg-sky-400/20 ${
                 currentPage === item
-                  ? 'border-blue-500 text-blue-500'
-                  : 'border-gray-300 text-gray-500'
+                  ? 'border-sky-400 bg-sky-400 bg-opacity-20 text-white'
+                  : 'border-white border-opacity-20 text-white text-opacity-60'
               } ${i === 0 ? 'rounded-l-lg' : ''} ${
                 i === pageItems.length - 1 ? 'rounded-r-lg' : ''
               }`}
@@ -51,13 +72,21 @@ export default function DocumentListPagination({
           ) : (
             <button
               key={item}
-              className={`border border-gray-300 px-3 py-2 text-sm text-gray-500`}
+              className={`border border-white border-opacity-20 px-3 py-2 text-sm text-gray-500`}
             >
               ...
             </button>
           )
         )}
       </ul>
+      {hasNext && (
+        <button
+          onClick={goToNext}
+          className="-rotate-90 px-2 text-white/20 transition-all duration-300 hover:text-sky-400"
+        >
+          <CaretDown size={20} weight="bold" />
+        </button>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/pages/DocumentView/FragmentList/index.tsx b/frontend/src/pages/DocumentView/FragmentList/index.tsx
index cb9c850..5943e86 100644
--- a/frontend/src/pages/DocumentView/FragmentList/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/index.tsx
@@ -64,7 +64,10 @@ export default function FragmentList({
   }, [document, currentPage]);
   return (
     <>
-      <div className="max-h-[100vh] bg-main">
+      <div
+        className="flex h-screen flex-col overflow-hidden bg-main transition-all duration-300"
+        style={{ height: `calc(100vh - ${searchMode ? '130px' : '100px'})` }}
+      >
         <div className="">
           <div className="flex flex-col">
             <div className="mb-6 flex w-full items-center justify-between gap-x-12">
@@ -89,7 +92,7 @@ export default function FragmentList({
           </div>
         </div>
 
-        <div className="h-full flex-grow overflow-y-auto rounded-xl border-2 border-white/20 bg-main">
+        <div className="flex-grow overflow-y-auto rounded-xl border-2 border-white/20 bg-main">
           {loading || searching ? (
             <div className="flex h-full w-full items-center justify-center">
               <div className="flex flex-col items-center justify-center gap-y-4 text-center">
@@ -104,7 +107,7 @@ export default function FragmentList({
             </div>
           ) : (
             <table className="w-full rounded-xl text-left text-xs font-medium text-white text-opacity-80">
-              <thead>
+              <thead className="sticky top-0 w-full bg-main">
                 <tr className="mt-10">
                   <th
                     scope="col"
@@ -124,6 +127,12 @@ export default function FragmentList({
                   >
                     Metadata
                   </th>
+                  <th
+                    scope="col"
+                    className="px-6 pb-2 pt-6 text-xs font-light text-white text-opacity-80"
+                  >
+                    {' '}
+                  </th>
                 </tr>
               </thead>
               <tbody>
@@ -144,7 +153,7 @@ export default function FragmentList({
               </tbody>
             </table>
           )}
-          {searchMode && searchFragments.length === 0 && (
+          {searchMode && searchFragments.length === 0 && !searching && (
             <div className="flex h-full w-full items-center justify-center">
               <div className="flex flex-col items-center justify-center gap-y-4 text-center">
                 <p className="text-white text-opacity-80">
diff --git a/frontend/src/pages/DocumentView/index.tsx b/frontend/src/pages/DocumentView/index.tsx
index dc3fe23..474aef0 100644
--- a/frontend/src/pages/DocumentView/index.tsx
+++ b/frontend/src/pages/DocumentView/index.tsx
@@ -122,7 +122,7 @@ export default function DocumentView() {
       }
     >
       <div className="grid grid-cols-12">
-        <div className="col-span-12 xl:col-span-12">
+        <div className="col-span-12 h-screen bg-main xl:col-span-12">
           <FragmentList
             connector={connector}
             document={document}

From f0ac186da72def039275ee30800db72bd3cc6729 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Thu, 21 Dec 2023 11:04:21 -0800
Subject: [PATCH 12/12] cleanup PRs

---
 backend/endpoints/v1/documents/index.js       |   1 -
 backend/storage/settings.json                 | 512 +++++++++---------
 frontend/src/components/Header/index.tsx      | 122 +----
 .../FragmentList/SearchView/index.tsx         |   4 -
 .../pages/DocumentView/FragmentList/index.tsx |   1 -
 5 files changed, 258 insertions(+), 382 deletions(-)

diff --git a/backend/endpoints/v1/documents/index.js b/backend/endpoints/v1/documents/index.js
index db4c56e..8ac7179 100644
--- a/backend/endpoints/v1/documents/index.js
+++ b/backend/endpoints/v1/documents/index.js
@@ -409,7 +409,6 @@ function documentEndpoints(app) {
           method,
           query
         );
-
         response.status(200).json({ fragments, error });
       } catch (e) {
         console.log(e.message, e);
diff --git a/backend/storage/settings.json b/backend/storage/settings.json
index 98f127d..49c5de5 100644
--- a/backend/storage/settings.json
+++ b/backend/storage/settings.json
@@ -611,154 +611,6 @@
       "readonly": false
     }
   },
-  "document_vectors": {
-    "slug": "document_vectors",
-    "table": {
-      "name": "document_vectors",
-      "pk": "id",
-      "verbose": "document_vectors"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "docId",
-        "verbose": "docId",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "vectorId",
-        "verbose": "vectorId",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "document_id",
-        "verbose": "document_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "workspace_id",
-        "verbose": "workspace_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "organization_id",
-        "verbose": "organization_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "createdAt",
-        "verbose": "createdAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "lastUpdatedAt",
-        "verbose": "lastUpdatedAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
   "users": {
     "slug": "users",
     "table": {
@@ -875,12 +727,12 @@
       "readonly": false
     }
   },
-  "system_settings": {
-    "slug": "system_settings",
+  "document_vectors": {
+    "slug": "document_vectors",
     "table": {
-      "name": "system_settings",
+      "name": "document_vectors",
       "pk": "id",
-      "verbose": "system_settings"
+      "verbose": "document_vectors"
     },
     "columns": [
       {
@@ -900,8 +752,8 @@
         }
       },
       {
-        "name": "label",
-        "verbose": "label",
+        "name": "docId",
+        "verbose": "docId",
         "control": {
           "text": true
         },
@@ -916,8 +768,8 @@
         }
       },
       {
-        "name": "value",
-        "verbose": "value",
+        "name": "vectorId",
+        "verbose": "vectorId",
         "control": {
           "text": true
         },
@@ -931,6 +783,54 @@
           "show": true
         }
       },
+      {
+        "name": "document_id",
+        "verbose": "document_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "workspace_id",
+        "verbose": "workspace_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "organization_id",
+        "verbose": "organization_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
       {
         "name": "createdAt",
         "verbose": "createdAt",
@@ -1139,6 +1039,206 @@
       "readonly": false
     }
   },
+  "system_settings": {
+    "slug": "system_settings",
+    "table": {
+      "name": "system_settings",
+      "pk": "id",
+      "verbose": "system_settings"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "label",
+        "verbose": "label",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "value",
+        "verbose": "value",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "createdAt",
+        "verbose": "createdAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "lastUpdatedAt",
+        "verbose": "lastUpdatedAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
+  "organization_users": {
+    "slug": "organization_users",
+    "table": {
+      "name": "organization_users",
+      "pk": "id",
+      "verbose": "organization_users"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "user_id",
+        "verbose": "user_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "organization_id",
+        "verbose": "organization_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "createdAt",
+        "verbose": "createdAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "lastUpdatedAt",
+        "verbose": "lastUpdatedAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
   "organization_notifications": {
     "slug": "organization_notifications",
     "table": {
@@ -1303,106 +1403,6 @@
       "readonly": false
     }
   },
-  "organization_users": {
-    "slug": "organization_users",
-    "table": {
-      "name": "organization_users",
-      "pk": "id",
-      "verbose": "organization_users"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "user_id",
-        "verbose": "user_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "organization_id",
-        "verbose": "organization_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "createdAt",
-        "verbose": "createdAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "lastUpdatedAt",
-        "verbose": "lastUpdatedAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
   "organization_rag_tests": {
     "slug": "organization_rag_tests",
     "table": {
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index 9c11d3c..494d37e 100644
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -1,11 +1,4 @@
-import { Link } from 'react-router-dom';
-import Logo from '../../images/logo/logo-light.png';
-import { CheckCircle, Copy } from 'react-feather';
 import { useEffect, useState } from 'react';
-import paths from '../../utils/paths';
-import { STORE_TOKEN, STORE_USER } from '../../utils/constants';
-import truncate from 'truncate';
-import Notifications from './Notifications';
 
 export default function Header(props: {
   entity?: any | null;
@@ -17,12 +10,7 @@ export default function Header(props: {
 }) {
   const [copied, setCopied] = useState(false);
   if (!props.entity) return null;
-  const { entity, property, nameProp, extendedItems = <></> } = props;
-
-  const handleCopy = () => {
-    window.navigator.clipboard.writeText(entity[property]);
-    setCopied(true);
-  };
+  const { extendedItems = <></> } = props;
 
   useEffect(() => {
     function manageCopy() {
@@ -35,114 +23,8 @@ export default function Header(props: {
   }, [copied]);
 
   return (
-    // <header className="sticky top-0 z-999 flex w-full bg-slate-900 drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none md:bg-white">
-    //   <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
-    //     <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
-    //       {/* <!-- Hamburger Toggle BTN --> */}
-    //       <button
-    //         aria-controls="sidebar"
-    //         onClick={(e) => {
-    //           e.stopPropagation();
-    //           props.setSidebarOpen(!props.sidebarOpen);
-    //         }}
-    //         className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
-    //       >
-    //         <span className="relative block h-5.5 w-5.5 cursor-pointer">
-    //           <span className="du-block absolute right-0 h-full w-full">
-    //             <span
-    //               className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
-    //                 !props.sidebarOpen && '!w-full delay-300'
-    //               }`}
-    //             ></span>
-    //             <span
-    //               className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
-    //                 !props.sidebarOpen && 'delay-400 !w-full'
-    //               }`}
-    //             ></span>
-    //             <span
-    //               className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
-    //                 !props.sidebarOpen && '!w-full delay-500'
-    //               }`}
-    //             ></span>
-    //           </span>
-    //           <span className="absolute right-0 h-full w-full rotate-45">
-    //             <span
-    //               className={`absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
-    //                 !props.sidebarOpen && '!h-0 !delay-[0]'
-    //               }`}
-    //             ></span>
-    //             <span
-    //               className={`delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${
-    //                 !props.sidebarOpen && '!h-0 !delay-200'
-    //               }`}
-    //             ></span>
-    //           </span>
-    //         </span>
-    //       </button>
-    //       {/* <!-- Hamburger Toggle BTN --> */}
-
-    //       <Link className="flex w-full justify-center lg:hidden" to="/">
-    //         <img src={Logo} alt="Logo" className="h-14" />
-    //       </Link>
-    //     </div>
-
-    //     <div className="hidden w-full sm:block">
-    //       <div className="flex w-full items-center justify-between">
-    //         <div className="flex items-center gap-x-4">
-    //           <p className="text-4xl font-semibold text-slate-800">
-    //             {truncate(entity[nameProp ?? 'name'], 20)}
-    //           </p>
-    //           <button
-    //             onClick={handleCopy}
-    //             disabled={copied}
-    //             className="transition-duration-300 font-mono flex items-center gap-x-2 rounded-md bg-slate-200 px-4 py-2 text-sm  text-slate-700 transition disabled:bg-green-300"
-    //           >
-    //             <p className="">ID: {entity[property]}</p>
-    //             {copied ? (
-    //               <CheckCircle className="h-4 w-4" />
-    //             ) : (
-    //               <Copy className="h-4 w-4" />
-    //             )}
-    //           </button>
-    //           {extendedItems}
-    //         </div>
-    //         <div className="flex w-fit items-center gap-x-2">
-    //           <Notifications />
-    //           <button
-    //             onClick={() => {
-    //               if (!window) return;
-    //               window.localStorage.removeItem(STORE_USER);
-    //               window.localStorage.removeItem(STORE_TOKEN);
-    //               window.location.replace(paths.home());
-    //             }}
-    //             className="rounded-lg px-4 py-2 text-slate-800 hover:bg-slate-200"
-    //           >
-    //             Logout
-    //           </button>
-    //         </div>
-    //       </div>
-    //     </div>
-    //   </div>
-    // </header>
     <header className="mr-26 flex h-[76px] w-full rounded-t-xl bg-main">
-      <div className="flex w-full justify-between p-4">
-        {/* <div className="w-fit rounded-xl border-2 border-white/20 px-5 py-2 text-sky-400">
-          Organization {'>'} Workspace 1 {'>'} Document 1
-        </div>
-        <div className="flex gap-x-3">
-          <button className="inline-flex h-11 w-[74px] flex-col items-center justify-center gap-2.5 rounded-lg bg-white bg-opacity-10 px-5 py-2.5 transition-all duration-300 hover:bg-opacity-5">
-            <div className="h-[25.53px] w-11 text-center font-['Satoshi'] text-base font-bold text-white">
-              Clone
-            </div>
-          </button>
-          <button className="inline-flex h-11 w-[74px] flex-col items-center justify-center gap-2.5 rounded-lg border border-white border-opacity-20 px-3.5 py-2.5 transition-all duration-300 hover:bg-red-500">
-            <div className="h-[25.53px] w-[59px] text-center font-['Satoshi'] text-base font-bold text-white">
-              Delete
-            </div>
-          </button>
-        </div> */}
-        {extendedItems}
-      </div>
+      <div className="flex w-full justify-between p-4">{extendedItems}</div>
     </header>
   );
 }
diff --git a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
index 0ba2635..7c4bfe4 100644
--- a/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/SearchView/index.tsx
@@ -38,14 +38,12 @@ export default function SearchView({
 }) {
   const formEl = useRef<HTMLFormElement>(null);
   const [showSearchMethods, setShowSearchMethods] = useState(false);
-  const [sourceDoc, setSourceDoc] = useState(null);
 
   const clearSearch = (e: SyntheticEvent<HTMLElement, SubmitEvent>) => {
     e.preventDefault();
     setSearchBy('exactText');
     setSearching(false);
     setSearchMode(false);
-    setSourceDoc(null);
     (formEl.current as HTMLFormElement).reset();
   };
   const handleSearch = async (e: SyntheticEvent<HTMLElement, SubmitEvent>) => {
@@ -69,8 +67,6 @@ export default function SearchView({
       setSearchFragments([]);
       return;
     }
-    const metadataForIds = await Document.metadatas(document.id, vectorIds);
-    setSourceDoc(metadataForIds);
     setSearchFragments(matches);
     setSearching(false);
   };
diff --git a/frontend/src/pages/DocumentView/FragmentList/index.tsx b/frontend/src/pages/DocumentView/FragmentList/index.tsx
index 5943e86..b244922 100644
--- a/frontend/src/pages/DocumentView/FragmentList/index.tsx
+++ b/frontend/src/pages/DocumentView/FragmentList/index.tsx
@@ -3,7 +3,6 @@ import PreLoader from '../../../components/Preloader';
 import Document from '../../../models/document';
 import truncate from 'truncate';
 import pluralize from 'pluralize';
-import { useParams } from 'react-router-dom';
 import DocumentListPagination from '../../../components/DocumentPaginator';
 import SearchView from './SearchView';
 import MetadataEditor from './MetadataEditor';