update be call

frontend/src/app/connectors/page.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from "react";
 import { GoogleDrivePicker } from "@/components/google-drive-picker"
+import { useTask } from "@/contexts/task-context"
 
 interface GoogleDriveFile {
   id: string;
@@ -12,21 +13,63 @@ interface GoogleDriveFile {
 }
 
 export default function ConnectorsPage() {
+  const { addTask } = useTask()
   const [selectedFiles, setSelectedFiles] = useState<GoogleDriveFile[]>([]);
+  const [isSyncing, setIsSyncing] = useState<boolean>(false);
+  const [syncResult, setSyncResult] = useState<any>(null);
 
   const handleFileSelection = (files: GoogleDriveFile[]) => {
     setSelectedFiles(files);
   };
 
-  const handleSync = () => {
+  const handleSync = async (connector: { connectionId: string, type: string }) => {
-    const fileIds = selectedFiles.map(file => file.id);
+    if (!connector.connectionId || selectedFiles.length === 0) return
-    const body = {
-      file_ids: fileIds,
-      folder_ids: [], // Add folder handling if needed
-      recursive: true,
-    };
     
-    console.log('Syncing with:', body);
+    setIsSyncing(true)
+    setSyncResult(null)
+    
+    try {
+      const syncBody: {
+        connection_id: string;
+        max_files?: number;
+        selected_files?: string[];
+      } = {
+        connection_id: connector.connectionId,
+        selected_files: selectedFiles.map(file => file.id)
+      }
+      
+      const response = await fetch(`/api/connectors/${connector.type}/sync`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(syncBody),
+      })
+      
+      const result = await response.json()
+      
+      if (response.status === 201) {
+        const taskId = result.task_id
+        if (taskId) {
+          addTask(taskId)
+          setSyncResult({ 
+            processed: 0, 
+            total: selectedFiles.length,
+            status: 'started'
+          })
+        }
+      } else if (response.ok) {
+        setSyncResult(result)
+      } else {
+        console.error('Sync failed:', result.error)
+        setSyncResult({ error: result.error || 'Sync failed' })
+      }
+    } catch (error) {
+      console.error('Sync error:', error)
+      setSyncResult({ error: 'Network error occurred' })
+    } finally {
+      setIsSyncing(false)
+    }
   };
 
   return (
@@ -48,12 +91,37 @@ export default function ConnectorsPage() {
       </div>
 
       {selectedFiles.length > 0 && (
-        <button 
+        <div className="space-y-4">
-          onClick={handleSync}
+          <button 
-          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+            onClick={() => handleSync({ connectionId: "google-drive-connection-id", type: "google-drive" })}
-        >
+            disabled={isSyncing}
-          Sync {selectedFiles.length} Selected Items
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
-        </button>
+          >
+            {isSyncing ? (
+              <>Syncing {selectedFiles.length} Selected Items...</>
+            ) : (
+              <>Sync {selectedFiles.length} Selected Items</>
+            )}
+          </button>
+          
+          {syncResult && (
+            <div className="p-3 bg-gray-100 rounded text-sm">
+              {syncResult.error ? (
+                <div className="text-red-600">Error: {syncResult.error}</div>
+              ) : syncResult.status === 'started' ? (
+                <div className="text-blue-600">
+                  Sync started for {syncResult.total} files. Check the task notification for progress.
+                </div>
+              ) : (
+                <div className="text-green-600">
+                  <div>Processed: {syncResult.processed || 0}</div>
+                  <div>Added: {syncResult.added || 0}</div>
+                  {syncResult.errors && <div>Errors: {syncResult.errors}</div>}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
       )}
     </div>
   );

frontend/src/app/upload/[provider]/page.tsx

@@ -7,6 +7,7 @@ import { Badge } from "@/components/ui/badge"
 import { ArrowLeft, AlertCircle } from "lucide-react"
 import { GoogleDrivePicker } from "@/components/google-drive-picker"
 import { OneDrivePicker } from "@/components/onedrive-picker"
+import { useTask } from "@/contexts/task-context"
 
 interface GoogleDriveFile {
   id: string
@@ -42,12 +43,15 @@ export default function UploadProviderPage() {
   const params = useParams()
   const router = useRouter()
   const provider = params.provider as string
+  const { addTask } = useTask()
 
   const [connector, setConnector] = useState<CloudConnector | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [accessToken, setAccessToken] = useState<string | null>(null)
   const [selectedFiles, setSelectedFiles] = useState<GoogleDriveFile[] | OneDriveFile[]>([])
+  const [isSyncing, setIsSyncing] = useState<boolean>(false)
+  const [syncResult, setSyncResult] = useState<any>(null)
 
   useEffect(() => {
     const fetchConnectorInfo = async () => {
@@ -132,6 +136,56 @@ export default function UploadProviderPage() {
     // You can add additional handling here like triggering sync, etc.
   }
 
+  const handleSync = async (connector: CloudConnector) => {
+    if (!connector.connectionId || selectedFiles.length === 0) return
+    
+    setIsSyncing(true)
+    setSyncResult(null)
+    
+    try {
+      const syncBody: {
+        connection_id: string;
+        max_files?: number;
+        selected_files?: string[];
+      } = {
+        connection_id: connector.connectionId,
+        selected_files: selectedFiles.map(file => file.id)
+      }
+      
+      const response = await fetch(`/api/connectors/${connector.type}/sync`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(syncBody),
+      })
+      
+      const result = await response.json()
+      
+      if (response.status === 201) {
+        const taskId = result.task_id
+        if (taskId) {
+          addTask(taskId)
+          setSyncResult({ 
+            processed: 0, 
+            total: selectedFiles.length,
+            status: 'started'
+          })
+        }
+      } else if (response.ok) {
+        setSyncResult(result)
+      } else {
+        console.error('Sync failed:', result.error)
+        setSyncResult({ error: result.error || 'Sync failed' })
+      }
+    } catch (error) {
+      console.error('Sync error:', error)
+      setSyncResult({ error: 'Network error occurred' })
+    } finally {
+      setIsSyncing(false)
+    }
+  }
+
   const getProviderDisplayName = () => {
     const nameMap: { [key: string]: string } = {
       'google_drive': 'Google Drive',
@@ -284,22 +338,42 @@ export default function UploadProviderPage() {
       </div>
 
       {selectedFiles.length > 0 && (
-        <div className="max-w-4xl mx-auto mt-8 flex justify-center gap-3">
+        <div className="max-w-4xl mx-auto mt-8">
-          <Button 
+          <div className="flex justify-center gap-3 mb-4">
-            onClick={() => {
+            <Button 
-              // Handle sync/upload action here
+              onClick={() => handleSync(connector)}
-              console.log('Starting sync for selected files:', selectedFiles)
+              disabled={selectedFiles.length === 0 || isSyncing}
-              // You can add API call to trigger sync
+            >
-            }}
+              {isSyncing ? (
-            disabled={selectedFiles.length === 0}
+                <>Syncing {selectedFiles.length} Selected Files...</>
-          >
+              ) : (
-            Sync Selected Files ({selectedFiles.length})
+                <>Sync Selected Files ({selectedFiles.length})</>
-          </Button>
+              )}
-          <Button 
+            </Button>
-            variant="outline"
+            <Button 
-            onClick={() => setSelectedFiles([])}>
+              variant="outline"
-            Clear Selection
+              onClick={() => setSelectedFiles([])}>
-          </Button>
+              Clear Selection
+            </Button>
+          </div>
+          
+          {syncResult && (
+            <div className="p-3 bg-gray-100 rounded text-sm text-center">
+              {syncResult.error ? (
+                <div className="text-red-600">Error: {syncResult.error}</div>
+              ) : syncResult.status === 'started' ? (
+                <div className="text-blue-600">
+                  Sync started for {syncResult.total} files. Check the task notification for progress.
+                </div>
+              ) : (
+                <div className="text-green-600">
+                  <div>Processed: {syncResult.processed || 0}</div>
+                  <div>Added: {syncResult.added || 0}</div>
+                  {syncResult.errors && <div>Errors: {syncResult.errors}</div>}
+                </div>
+              )}
+            </div>
+          )}
         </div>
       )}
     </div>

frontend/src/components/google-drive-picker.tsx

@@ -241,7 +241,7 @@ export function GoogleDrivePicker({
           size="sm"
           variant="outline"
         >
-          {isPickerOpen ? 'Opening Picker...' : 'Select Files'}
+          {isPickerOpen ? 'Opening Picker...' : 'Add Files'}
         </Button>
       </div>