Merge pull request #112 from Mintplex-Labs/ui-v2

UI v2

.gitignore

@@ -6,4 +6,6 @@ node_modules
 __pycache__
 v-env
 .DS_Store
-yarn-error.log
+yarn-error.log
+yarn.lock
+frontend/.env.development

backend/endpoints/v1/workspaces/index.js

@@ -305,6 +305,7 @@ function workspaceEndpoints(app) {
           documents: "countForEntity",
           vectors: "calcVectors",
           "cache-size": "calcVectorCache",
+          dimensions: "calcDimensions",
         };
 
         if (!Object.keys(methods).includes(statistic)) {
@@ -314,7 +315,6 @@ function workspaceEndpoints(app) {
           return;
         }
 
-        console.log(workspace);
         const value = await WorkspaceDocument[methods[statistic]](
           "workspace_id",
           workspace.id

backend/models/workspaceDocument.js

@@ -159,6 +159,30 @@ const WorkspaceDocument = {
 
     return totalBytes;
   },
+
+  calcDimensions: async function (field = "workspace_id", value = null) {
+    try {
+      const { OrganizationConnection } = require("./organizationConnection");
+
+      const workspace = await prisma.organization_workspaces.findUnique({
+        where: { id: value },
+        include: { organization: true },
+      });
+
+      const connector = await OrganizationConnection.get({
+        organization_id: workspace.organization.id,
+      });
+
+      const vectorDb = selectConnector(connector);
+      const dimensions = await vectorDb.indexDimensions(workspace.fname);
+
+      return dimensions;
+    } catch (e) {
+      console.error(e);
+      return 0;
+    }
+  },
+
   // Will get both the remote and local count of vectors to see if the numbers match.
   vectorCount: async function (field = "organization_id", value = null) {
     try {

backend/utils/vectordatabases/providers/chroma/index.js

@@ -98,6 +98,12 @@ class Chroma {
     return { result: totalVectors, error: null };
   }
 
+  // TODO: Solve this issue
+  async indexDimensions() {
+    // Chroma does not support this, defaulting to openai's 1536
+    return 1536;
+  }
+
   // Collections === namespaces for Chroma to normalize interfaces
   async collections() {
     return await this.namespaces();

backend/utils/vectordatabases/providers/weaviate/index.js

@@ -66,7 +66,6 @@ class Weaviate {
     var totalVectors = 0;
     for (const collection of collections) {
       if (!collection || !collection.name) continue;
-      console.log({ dim: await this.indexDimensions(collection.name) });
       totalVectors +=
         (await this.namespaceWithClient(client, collection.name))
           ?.vectorCount || 0;

frontend/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@dqbd/tiktoken": "^1.0.7",
     "@metamask/jazzicon": "^2.0.0",
+    "@phosphor-icons/react": "^2.0.15",
     "jsvectormap": "^1.5.1",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",

frontend/src/App.tsx

@@ -17,10 +17,13 @@ const OrganizationSettingsView = lazy(
 const OrganizationDashboard = lazy(() => import('./pages/Dashboard'));
 const WorkspaceDashboard = lazy(() => import('./pages/WorkspaceDashboard'));
 const DocumentView = lazy(() => import('./pages/DocumentView'));
-const SystemSetup = lazy(() => import('./pages/Authentication/SystemSetup'));
 const OnboardingSecuritySetup = lazy(
   () => import('./pages/Onboarding/security')
 );
+
+// Onboarding v2
+const OnboardingFlow = lazy(() => import('./pages/OnboardingFlow'));
+
 const OrganizationJobsView = lazy(() => import('./pages/Jobs'));
 const OrganizationToolsView = lazy(() => import('./pages/Tools'));
 const SystemSettingsView = lazy(() => import('./pages/SystemSettings'));
@@ -75,6 +78,7 @@ function App() {
             element={<PrivateRoute Component={DocumentView} />}
           />
 
+          <Route path="/onboarding-setup" element={<OnboardingFlow />} />
           <Route
             path="/onboarding"
             element={<PrivateRoute Component={OnboardingHome} />}
@@ -103,7 +107,6 @@ function App() {
 
           <Route path="/auth/sign-up" element={<SignUp />} />
           <Route path="/auth/sign-in" element={<SignIn />} />
-          <Route path="/system-setup" element={<SystemSetup />} />
           <Route
             path="/system-settings"
             element={<AdminRoute Component={SystemSettingsView} />}

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,39 @@ 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);
+  };
+
+  if (pageCount < 2) return <div className="mb-18"></div>;
+
   return (
-    <div className="my-4 flex justify-center">
+    <div className="my-4 -mt-8 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 +74,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>
   );
 }