Fix the build

selfie-ui/package.json

@@ -15,6 +15,7 @@
     "@rjsf/utils": "^5.17.1",
     "@rjsf/validator-ajv8": "^5.17.1",
     "@tailwindcss/typography": "^0.5.10",
+    "@tanstack/match-sorter-utils": "^8.11.8",
     "@tanstack/react-table": "^8.13.2",
     "daisyui": "^4.6.1",
     "deep-chat-react": "^1.4.11",

selfie-ui/src/app/components/Chat.tsx

@@ -68,19 +68,17 @@ export const Chat = ({
     }
   };
 
-  const auxiliaryStyle = {
-    scrollbar: {
-      width: '10px',
-      height: '10px',
-      thumb: {
-        backgroundColor: 'oklch(var(--n))',
-        borderRadius: '5px'
-      },
-      track: {
-        backgroundColor: 'unset'
-      }
-    }
+  const auxiliaryStyle=`::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: oklch(var(--n));
+    border-radius: 5px;
   }
+  ::-webkit-scrollbar-track {
+    background-color: unset;
+  }`
 
   useEffect(() => {
     setShowIntroPanel(!!instruction);

selfie-ui/src/app/components/DocumentTable/DocumentTable.tsx

@@ -10,28 +10,20 @@ import {
   getFilteredRowModel,
   getSortedRowModel,
   SortingState,
-  useReactTable
+  useReactTable,
+  ColumnDef,
 } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils'
 
-interface Document {
-  id: string;
-  created_at: string;
-  updated_at: string;
-  content_type: string;
-  name: string;
-  size: number;
-  connector_name: string;
-}
 
-const fuzzyFilter = (row, columnId, value, addMeta) => {
+const fuzzyFilter = (row: any, columnId: string, value: any, addMeta: any) => {
   const itemRank = rankItem(row.getValue(columnId), value)
   addMeta({ itemRank })
   return itemRank.passed
 }
 
 const columnHelper = createColumnHelper<Document>();
-const customColumnDefinitions = {
+const customColumnDefinitions: Partial<Record<keyof Document, { header: string, cell?: (value: any) => JSX.Element | string }>> = {
   id: {
     header: 'ID',
   },
@@ -60,29 +52,35 @@ const generateColumns = (data: Document[]) => {
 
     return columnHelper.accessor(id, {
       header: () => <span>{custom?.header || id.toString().replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</span>,
-      cell: custom?.cell ? (info) => custom.cell(info.getValue()) : (info) => info.getValue(),
+      cell: custom?.cell ? (info) => custom?.cell?.(info.getValue()) : (info) => info.getValue(),
     });
   });
 };
 
-const DocumentTable = ({ data, onDeleteDocuments, onSelectionChange = (data: string[]) => {} }) => {
+interface DocumentTableProps {
+  data: Document[];
+  onDeleteDocuments: (docIds: string[]) => void;
+  onSelectionChange?: (selectedIds: string[]) => void;
+}
+
+const DocumentTable: React.FC<DocumentTableProps> = ({ data, onDeleteDocuments, onSelectionChange = () => {} }) => {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [selectedRows, setSelectedRows] = useState<Record<string, boolean>>({});
   const [globalFilter, setGlobalFilter] = useState('');
 
   const allRowsSelected = data.length > 0 && data.every(({ id }) => selectedRows[id]);
 
   useEffect(() => {
-    setSelectedRows((prevSelectedRows) => {
-      const newDataIds = new Set(data.map(d => d.id));
-      return Object.keys(prevSelectedRows).reduce((acc, cur) => {
+    const newDataIds = new Set(data.map(item => item.id));
+    setSelectedRows(prevSelectedRows => {
+      return Object.keys(prevSelectedRows).reduce((acc: Record<string, boolean>, cur: string) => {
         if (newDataIds.has(cur)) {
           acc[cur] = prevSelectedRows[cur];
         }
         return acc;
       }, {});
     });
-  }, [data]);
+  }, [data]);;
 
   useEffect(() => {
     onSelectionChange(Object.keys(selectedRows).filter((id) => selectedRows[id]));
@@ -92,7 +90,7 @@ const DocumentTable = ({ data, onDeleteDocuments, onSelectionChange = (data: str
     if (allRowsSelected) {
       setSelectedRows({});
     } else {
-      const newSelectedRows = {};
+      const newSelectedRows: Record<string, boolean> = {};
       data.forEach(({ id }) => {
         newSelectedRows[id] = true;
       });
@@ -137,7 +135,7 @@ const DocumentTable = ({ data, onDeleteDocuments, onSelectionChange = (data: str
         </button>
       ),
     }) : null].filter(Boolean),
-  ], [data, selectedRows, onDeleteDocuments]);
+  ].filter((column): column is ColumnDef<Document, any> => column !== null), [data, selectedRows, onDeleteDocuments, allRowsSelected, toggleAllRowsSelected]);
 
   const table = useReactTable({
     data: data ?? [],

selfie-ui/src/app/components/ManageData.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import React, {useCallback, useEffect, useState} from 'react';
-import {Documents} from "@/app/types";
+import {Document} from "@/app/types";
 import {apiBaseUrl} from "@/app/config";
 import TaskToast from "@/app/components/TaskToast";
 import useAsyncTask from "@/app/hooks/useAsyncTask";
 import {DocumentTable} from "@/app/components/DocumentTable";
 
 
 const ManageData = () => {
-  const [documents, setDocuments] = useState<Documents>({});
+  const [documents, setDocuments] = useState<Document[]>([]);
 
   const { isTaskRunning, taskMessage, executeTask } = useAsyncTask();
 
@@ -22,7 +22,7 @@ const ManageData = () => {
       success: 'Documents loaded',
       error: 'Failed to load documents',
     });
-  }, [executeTask, apiBaseUrl]);
+  }, [executeTask]);
 
   useEffect(() => {
     fetchDocuments();
@@ -62,7 +62,7 @@ const ManageData = () => {
       ].join(' ')}>
 
         <DocumentTable
-          data={Object.values(documents).flat()}
+          data={documents}
           onDeleteDocuments={deleteDocuments}
         />
       </div>

selfie-ui/src/app/types/index.ts

@@ -1,13 +1,14 @@
 // TODO: define this type
-export type Document = any
-// export interface Document {
-//   id: string
-//   metadata: {
-//     [key: string]: any
-//   }
-//   is_indexed: boolean
-//   num_index_documents?: number
-// }
+
+export interface Document {
+  id: string;
+  created_at: string;
+  updated_at: string;
+  content_type: string;
+  name: string;
+  size: number;
+  connector_name: string;
+}
 
 export interface Documents {
   [sourceId: string]: Document[]

selfie-ui/yarn.lock

@@ -271,6 +271,13 @@
     lodash.merge "^4.6.2"
     postcss-selector-parser "6.0.10"
 
+"@tanstack/match-sorter-utils@^8.11.8":
+  version "8.11.8"
+  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.11.8.tgz#9132c2a21cf18ca2f0071b604ddadb7a66e73367"
+  integrity sha512-3VPh0SYMGCa5dWQEqNab87UpCMk+ANWHDP4ALs5PeEW9EpfTAbrezzaOk/OiM52IESViefkoAOYuxdoa04p6aA==
+  dependencies:
+    remove-accents "0.4.2"
+
 "@tanstack/react-table@^8.13.2":
   version "8.13.2"
   resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.13.2.tgz#a3aa737ae464abc651f68daa7e82dca17813606c"
@@ -3011,6 +3018,11 @@ remarkable@^2.0.1:
     argparse "^1.0.10"
     autolinker "^3.11.0"
 
+[email protected]:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
+
 require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"