From f74e2c9da1c51ec774492a44a686173d7ffa54d2 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 16 Sep 2025 14:50:58 +0530
Subject: [PATCH] (feat:filepciker) load inside table, ui

---
 frontend/src/components/FilePicker.tsx | 26 +++++++-------------------
 frontend/src/components/Table.tsx      |  6 +++---
 frontend/src/upload/Upload.tsx         | 24 ++++++++++++++----------
 3 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/FilePicker.tsx b/frontend/src/components/FilePicker.tsx
index fad833fb..c31c4e62 100644
--- a/frontend/src/components/FilePicker.tsx
+++ b/frontend/src/components/FilePicker.tsx
@@ -359,7 +359,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
       </div>
 
       <div className="border border-[#EEE6FF78] rounded-lg dark:border-[#6A6A6A] mt-3">
-        <div className="border-b border-[#EEE6FF78] dark:border-[#6A6A6A] rounded-t-lg">
+        <div className=" border-[#EEE6FF78] dark:border-[#6A6A6A] rounded-t-lg">
           {/* Breadcrumb navigation */}
           <div className="px-4 pt-4 bg-[#EEE6FF78] dark:bg-[#2A262E] rounded-t-lg">
             <div className="flex items-center gap-1 mb-2">
@@ -396,7 +396,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
 
             {/* Selected Files Message */}
             <div className="pb-3 text-sm text-gray-600 dark:text-gray-400">
-              {selectedFiles.length} file(s) selected
+              {selectedFiles.length + selectedFolders.length} selected
             </div>
           </div>
 
@@ -407,18 +407,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
               className="scrollbar-thin  md:w-4xl lg:w-5xl"
               bordered={false}
             >
-              {isLoading && files.length === 0 ? (
-                <div className="flex items-center justify-center h-full">
-                  <div className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
-                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent"></div>
-                    Loading files...
-                  </div>
-                </div>
-              ) : files.length === 0 ? (
-                <div className="flex items-center justify-center h-full text-sm text-gray-500 dark:text-gray-400">
-                  No files found in your {getProviderConfig(provider).displayName}
-                </div>
-              ) : (
+              {(
                 <>
                   <Table minWidth="1200px">
                     <TableHead>
@@ -433,7 +422,6 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
                       {files.map((file, index) => (
                         <TableRow
                           key={`${file.id}-${index}`}
-                          className={selectedFiles.includes(file.id) ? 'bg-blue-50 dark:bg-blue-900/20' : ''}
                           onClick={() => {
                             if (isFolder(file)) {
                               handleFolderClick(file.id, file.name);
@@ -444,7 +432,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
                         >
                           <TableCell width="40px" align="center">
                             <div
-                              className="flex h-5 w-5 shrink-0 items-center justify-center border border-[#EEE6FF78] p-[0.5px] dark:border-[#6A6A6A] cursor-pointer mx-auto"
+                              className="flex h-5 w-5 text-sm shrink-0 items-center justify-center border border-[#EEE6FF78] p-[0.5px] dark:border-[#6A6A6A] cursor-pointer mx-auto"
                               onClick={(e) => {
                                 e.stopPropagation();
                                 handleFileSelect(file.id, isFolder(file));
@@ -471,10 +459,10 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
                               <span className="truncate">{file.name}</span>
                             </div>
                           </TableCell>
-                          <TableCell>
+                          <TableCell className='text-xs'>
                             {formatDate(file.modifiedTime)}
                           </TableCell>
-                          <TableCell>
+                          <TableCell className='text-xs'>
                             {file.size ? formatBytes(file.size) : '-'}
                           </TableCell>
                         </TableRow>
@@ -482,7 +470,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
                     </TableBody>
                   </Table>
 
-                  {isLoading && files.length > 0 && (
+                  {isLoading && (
                     <div className="flex items-center justify-center p-4 border-t border-[#EEE6FF78] dark:border-[#6A6A6A]">
                       <div className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                         <div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent"></div>
diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx
index 6eb49349..54aba156 100644
--- a/frontend/src/components/Table.tsx
+++ b/frontend/src/components/Table.tsx
@@ -44,7 +44,7 @@ const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(({
     <div className={`relative rounded-[6px] ${className}`}>
       <div
         ref={ref}
-        className={`w-full overflow-x-auto rounded-[6px] bg-gray-100 dark:bg-[#27282D] ${bordered ? 'border border-[#EEE6FF78] dark:border-[#6A6A6A]' : ''}`}
+        className={`w-full overflow-x-auto rounded-[6px] bg-transparent ${bordered ? 'border border-[#D7D7D7] dark:border-[#6A6A6A]' : ''}`}
         style={{
           maxHeight: height === 'auto' ? undefined : height,
           overflowY: height === 'auto' ? 'hidden' : 'auto'
@@ -89,7 +89,7 @@ const TableBody: React.FC<TableHeadProps> = ({ children, className = '' }) => {
 };
 
 const TableRow: React.FC<TableRowProps> = ({ children, className = '', onClick }) => {
-  const baseClasses = "border-b border-[#EEE6FF78] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]";
+  const baseClasses = "border-b border-[#D7D7D7] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]";
   const cursorClass = onClick ? "cursor-pointer" : "";
 
   return (
@@ -117,7 +117,7 @@ const TableHeader: React.FC<TableCellProps> = ({
     }
   };
 
-  const baseClasses = `px-2 py-3 text-sm font-medium text-gray-700 lg:px-3 dark:text-[#59636E] border-t border-b border-[#EEE6FF78] dark:border-[#6A6A6A] relative box-border ${getAlignmentClass()}`;
+  const baseClasses = `px-2 py-3 text-sm font-medium text-gray-700 lg:px-3 dark:text-[#59636E] border-t border-b border-[#D7D7D7] dark:border-[#6A6A6A] relative box-border ${getAlignmentClass()}`;
   const widthClasses = minWidth ? minWidth : '';
 
   return (
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index e6914ebe..fe675330 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -259,13 +259,13 @@ function Upload({
   const { t } = useTranslation();
   const setTimeoutRef = useRef<number | null>(null);
 
-  const ingestorOptions: { label: string; value: IngestorType; icon: string }[] = [
-    { label: 'Upload File', value: 'local_file', icon: FileUploadIcon },
-    { label: 'Crawler', value: 'crawler', icon: CrawlerIcon },
-    { label: 'Link', value: 'url', icon: UrlIcon },
-    { label: 'GitHub', value: 'github', icon: GithubIcon },
-    { label: 'Reddit', value: 'reddit', icon: RedditIcon },
-    { label: 'Google Drive', value: 'google_drive', icon: DriveIcon },
+  const ingestorOptions: { label: string; value: IngestorType; icon: string; heading: string }[] = [
+    { label: 'Upload File', value: 'local_file', icon: FileUploadIcon, heading: 'Upload new document' },
+    { label: 'Crawler', value: 'crawler', icon: CrawlerIcon, heading: 'Add content with Web Crawler' },
+    { label: 'Link', value: 'url', icon: UrlIcon, heading: 'Add content from URL' },
+    { label: 'GitHub', value: 'github', icon: GithubIcon, heading: 'Add content from GitHub' },
+    { label: 'Reddit', value: 'reddit', icon: RedditIcon, heading: 'Add content from Reddit' },
+    { label: 'Google Drive', value: 'google_drive', icon: DriveIcon, heading: 'Upload from Google Drive' },
   ];
 
   const sourceDocs = useSelector(selectSourceDocs);
@@ -672,11 +672,11 @@ function Upload({
 
   const renderIngestorSelection = () => {
     return (
-      <div className="grid grid-cols-3 gap-4 w-full">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
         {ingestorOptions.map((option) => (
           <div
             key={option.value}
-            className={`relative flex flex-col justify-between rounded-2xl cursor-pointer w-[181px] h-[91.2px] border border-solid pt-[21.1px] pr-[21px] pb-[15px] pl-[21px] gap-[13.1px] transition-colors duration-300 ease-out ${
+            className={`relative flex flex-col justify-between rounded-2xl cursor-pointer w-full max-w-[181px] h-[91.2px] border border-solid pt-[21.1px] pr-[21px] pb-[15px] pl-[21px] gap-[13.1px] transition-colors duration-300 ease-out mx-auto ${
               ingestor.type === option.value 
                 ? 'bg-[#7D54D1] text-white border-[#7D54D1] shadow-[0px_0px_8px_0px_#FFFFFF1A] dark:shadow-[0px_0px_8px_0px_#FFFFFF1A]' 
                 : 'bg-transparent hover:bg-[#ECECEC]/30 dark:hover:bg-[#383838]/30 border-[#D7D7D7] dark:border-[#4A4A4A] shadow-[0px_4px_40px_-3px_#0000001A]'
@@ -732,6 +732,10 @@ function Upload({
                   <span>Back</span>
                 </button>
 
+                <h2 className="font-inter font-semibold text-[22px] leading-[28px] tracking-[0.15px] text-black dark:text-[#E0E0E0]">
+                  {ingestor.type && ingestorOptions.find(option => option.value === ingestor.type)?.heading}
+                </h2>
+
                 <Input
                   type="text"
                   colorVariant="silver"
@@ -746,7 +750,7 @@ function Upload({
                   placeholder="Name"
                   required={true}
                   labelBgClassName="bg-white dark:bg-charleston-green-2"
-                  className="max-w-xs"
+                  className={ingestor.type === 'google_drive' ? "max-w-xs" : "w-full"}
                 />
                 {renderFormFields()}
               </div>