From 0ee875bee45a8d4cb10d7e855f78788225076aec Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 18 Sep 2025 20:25:20 +0530
Subject: [PATCH] (fix:gdrive) missing appId in picker

---
 frontend/src/components/GoogleDrivePicker.tsx | 215 ++++++++++--------
 frontend/src/upload/types/ingestor.ts         |   3 +-
 2 files changed, 121 insertions(+), 97 deletions(-)

diff --git a/frontend/src/components/GoogleDrivePicker.tsx b/frontend/src/components/GoogleDrivePicker.tsx
index 9bda9798..c47794a0 100644
--- a/frontend/src/components/GoogleDrivePicker.tsx
+++ b/frontend/src/components/GoogleDrivePicker.tsx
@@ -59,7 +59,7 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
       if (!validateResponse.ok) {
         setIsConnected(false);
         setAuthError('Session expired. Please reconnect to Google Drive.');
-        return;
+        return false;
       }
 
       const validateData = await validateResponse.json();
@@ -68,14 +68,17 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
         setIsConnected(true);
         setAuthError('');
         setAccessToken(validateData.access_token || null);
+        return true;
       } else {
         setIsConnected(false);
         setAuthError(validateData.error || 'Session expired. Please reconnect your account.');
+        return false;
       }
     } catch (error) {
       console.error('Error validating session:', error);
       setAuthError('Failed to validate session. Please reconnect.');
       setIsConnected(false);
+      return false;
     }
   };
 
@@ -97,24 +100,40 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
     }
     
     try {
+      const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+      const developerKey = import.meta.env.VITE_GOOGLE_API_KEY;
+      const appId = import.meta.env.VITE_GOOGLE_DRIVE_APP_ID;
+
+      if (!clientId || !developerKey || !appId) {
+        console.error('Missing Google Drive configuration:', {
+          clientId: !!clientId,
+          developerKey: !!developerKey,
+          appId: !!appId
+        });
+        setAuthError('Google Drive configuration is incomplete. Please check your environment variables.');
+        setIsLoading(false);
+        return;
+      }
+
       openPicker({
-        clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
-        developerKey: import.meta.env.VITE_GOOGLE_API_KEY,
-        viewId: "DOCS_IMAGES_AND_VIDEOS",
+        clientId: clientId,
+        developerKey: developerKey,
+        appId: appId,
+        viewId: "DOCS",
         showUploadView: false,
         showUploadFolders: false,
-        supportDrives: true,
+        supportDrives: false,
         multiselect: true,
         token: accessToken,
-        viewMimeTypes: 'application/vnd.google-apps.folder,application/vnd.google-apps.document,application/pdf',
+        viewMimeTypes: 'application/vnd.google-apps.folder,application/vnd.google-apps.document,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.ms-powerpoint,application/vnd.ms-excel,text/plain,text/csv,text/html,application/rtf,image/jpeg,image/jpg,image/png',
         callbackFunction: (data:any) => {
           setIsLoading(false);
           if (data.action === 'picked') {
             const docs = data.docs;
-          
-            const files: PickerFile[] = [];
-            const folders: PickerFile[] = [];
-            
+
+            const newFiles: PickerFile[] = [];
+            const newFolders: PickerFile[] = [];
+
             docs.forEach((doc: any) => {
               const item = {
                 id: doc.id,
@@ -124,24 +143,29 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                 description: doc.description,
                 sizeBytes: doc.sizeBytes
               };
-              
+
               if (doc.mimeType === 'application/vnd.google-apps.folder') {
-                folders.push(item);
+                newFolders.push(item);
               } else {
-                files.push(item);
+                newFiles.push(item);
               }
             });
-            
-            setSelectedFiles(files);
-            setSelectedFolders(folders);
-            
-            const fileIds = files.map(file => file.id);
-            const folderIds = folders.map(folder => folder.id);
-            
-            console.log('Selected file IDs:', fileIds);
-            console.log('Selected folder IDs:', folderIds);
-            
-            onSelectionChange(fileIds, folderIds);
+
+            setSelectedFiles(prevFiles => {
+              const existingFileIds = new Set(prevFiles.map(file => file.id));
+              const uniqueNewFiles = newFiles.filter(file => !existingFileIds.has(file.id));
+              return [...prevFiles, ...uniqueNewFiles];
+            });
+
+            setSelectedFolders(prevFolders => {
+              const existingFolderIds = new Set(prevFolders.map(folder => folder.id));
+              const uniqueNewFolders = newFolders.filter(folder => !existingFolderIds.has(folder.id));
+              return [...prevFolders, ...uniqueNewFolders];
+            });
+            onSelectionChange(
+              [...selectedFiles, ...newFiles].map(file => file.id),
+              [...selectedFolders, ...newFolders].map(folder => folder.id)
+            );
           }
         },
       });
@@ -179,7 +203,7 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
 
   if (!isConnected) {
     return (
-      <div className="border border-[#EEE6FF78] rounded-lg dark:border-[#6A6A6A] p-6">
+      <div>
         {authError && (
           <div className="text-red-500 text-sm mb-4 text-center">{authError}</div>
         )}
@@ -192,6 +216,7 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
 
             if (data.session_token) {
               setSessionToken('google_drive', data.session_token);
+              validateSession(data.session_token);
             }
           }}
           onError={(error) => {
@@ -204,8 +229,8 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
   }
 
   return (
-    <div className="border border-[#EEE6FF78] rounded-lg dark:border-[#6A6A6A]">
-      <div className="p-3">
+    <div>
+      <div className="mb-4">
         <div className="w-full flex items-center justify-between rounded-[10px] bg-[#8FDD51] px-4 py-2 text-[#212121] font-medium text-sm">
           <div className="flex items-center gap-2">
             <svg className="h-4 w-4" viewBox="0 0 24 24">
@@ -222,75 +247,75 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
         </div>
       </div>
 
-      <div className="p-4">
-        <div className="flex justify-between items-center mb-4">
-          <h3 className="text-sm font-medium">Selected Files</h3>
-          <button
-            onClick={() => handleOpenPicker()}
-            className="bg-[#A076F6] hover:bg-[#8A5FD4] text-white text-sm py-1 px-3 rounded-md"
-            disabled={isLoading}
-          >
-            {isLoading ? 'Loading...' : 'Select Files'}
-          </button>
-        </div>
-
-        {selectedFiles.length === 0 && selectedFolders.length === 0 ? (
-          <p className="text-gray-600 dark:text-gray-400 text-sm">No files or folders selected</p>
-        ) : (
-          <div className="max-h-60 overflow-y-auto">
-            {/* Display folders */}
-            {selectedFolders.length > 0 && (
-              <div className="mb-2">
-                <h4 className="text-xs font-medium text-gray-500 mb-1">Folders</h4>
-                {selectedFolders.map((folder) => (
-                  <div key={folder.id} className="flex items-center p-2 border-b border-gray-200 dark:border-gray-700">
-                    <img src={folder.iconUrl} alt="Folder" className="w-5 h-5 mr-2" />
-                    <span className="text-sm truncate flex-1">{folder.name}</span>
-                    <button
-                      onClick={() => {
-                        const newSelectedFolders = selectedFolders.filter(f => f.id !== folder.id);
-                        setSelectedFolders(newSelectedFolders);
-                        onSelectionChange(
-                          selectedFiles.map(f => f.id),
-                          newSelectedFolders.map(f => f.id)
-                        );
-                      }}
-                      className="text-red-500 hover:text-red-700 text-sm ml-2"
-                    >
-                      Remove
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* Display files */}
-            {selectedFiles.length > 0 && (
-              <div>
-                <h4 className="text-xs font-medium text-gray-500 mb-1">Files</h4>
-                {selectedFiles.map((file) => (
-                  <div key={file.id} className="flex items-center p-2 border-b border-gray-200 dark:border-gray-700">
-                    <img src={file.iconUrl} alt="File" className="w-5 h-5 mr-2" />
-                    <span className="text-sm truncate flex-1">{file.name}</span>
-                    <button
-                      onClick={() => {
-                        const newSelectedFiles = selectedFiles.filter(f => f.id !== file.id);
-                        setSelectedFiles(newSelectedFiles);
-                        onSelectionChange(
-                          newSelectedFiles.map(f => f.id),
-                          selectedFolders.map(f => f.id)
-                        );
-                      }}
-                      className="text-red-500 hover:text-red-700 text-sm ml-2"
-                    >
-                      Remove
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
+      <div className="border border-[#EEE6FF78] rounded-lg dark:border-[#6A6A6A]">
+        <div className="p-4">
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-sm font-medium">Selected Files</h3>
+            <button
+              onClick={() => handleOpenPicker()}
+              className="bg-[#A076F6] hover:bg-[#8A5FD4] text-white text-sm py-1 px-3 rounded-md"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Loading...' : 'Select Files'}
+            </button>
           </div>
-        )}
+
+          {selectedFiles.length === 0 && selectedFolders.length === 0 ? (
+            <p className="text-gray-600 dark:text-gray-400 text-sm">No files or folders selected</p>
+          ) : (
+            <div className="max-h-60 overflow-y-auto">
+              {selectedFolders.length > 0 && (
+                <div className="mb-2">
+                  <h4 className="text-xs font-medium text-gray-500 mb-1">Folders</h4>
+                  {selectedFolders.map((folder) => (
+                    <div key={folder.id} className="flex items-center p-2 border-b border-gray-200 dark:border-gray-700">
+                      <img src={folder.iconUrl} alt="Folder" className="w-5 h-5 mr-2" />
+                      <span className="text-sm truncate flex-1">{folder.name}</span>
+                      <button
+                        onClick={() => {
+                          const newSelectedFolders = selectedFolders.filter(f => f.id !== folder.id);
+                          setSelectedFolders(newSelectedFolders);
+                          onSelectionChange(
+                            selectedFiles.map(f => f.id),
+                            newSelectedFolders.map(f => f.id)
+                          );
+                        }}
+                        className="text-red-500 hover:text-red-700 text-sm ml-2"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {selectedFiles.length > 0 && (
+                <div>
+                  <h4 className="text-xs font-medium text-gray-500 mb-1">Files</h4>
+                  {selectedFiles.map((file) => (
+                    <div key={file.id} className="flex items-center p-2 border-b border-gray-200 dark:border-gray-700">
+                      <img src={file.iconUrl} alt="File" className="w-5 h-5 mr-2" />
+                      <span className="text-sm truncate flex-1">{file.name}</span>
+                      <button
+                        onClick={() => {
+                          const newSelectedFiles = selectedFiles.filter(f => f.id !== file.id);
+                          setSelectedFiles(newSelectedFiles);
+                          onSelectionChange(
+                            newSelectedFiles.map(f => f.id),
+                            selectedFolders.map(f => f.id)
+                          );
+                        }}
+                        className="text-red-500 hover:text-red-700 text-sm ml-2"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/upload/types/ingestor.ts b/frontend/src/upload/types/ingestor.ts
index 08686796..f35b300a 100644
--- a/frontend/src/upload/types/ingestor.ts
+++ b/frontend/src/upload/types/ingestor.ts
@@ -41,8 +41,7 @@ export const IngestorFormSchemas: Record<IngestorType, FormField[]> = {
       label: 'Select Files from Google Drive',
       type: 'google_drive_picker',
       required: true,
-    },
-    { name: 'recursive', label: 'Include subfolders', type: 'boolean', required: false },
+    }
   ],
   local_file: [
     { name: 'files', label: 'Select files', type: 'local_file_picker', required: true },