router.back()}>
-
-
Add Cloud Knowledge
+
+ Add from {getProviderDisplayName()}
+
- {connector.type === "google_drive" && (
-
- {selectedFiles.length > 0 && (
-
-
- handleSync(connector)}
- disabled={selectedFiles.length === 0 || isIngesting}
- >
- {isIngesting ? (
- <>Ingesting {selectedFiles.length} Files...
- ) : (
- <>Ingest Files ({selectedFiles.length})
- )}
-
-
+
+
+ router.back()}
+ >
+ Back
+
+ handleSync(connector)}
+ disabled={selectedFiles.length === 0 || isIngesting}
+ >
+ {isIngesting ? (
+ <>Ingesting {selectedFiles.length} Files...
+ ) : (
+ <>Start ingest
+ )}
+
- )}
+
{/* Success toast notification */}
void
- onFileSelected?: (files: GoogleDriveFile[] | OneDriveFile[], connectorType: string) => void
+ isOpen: boolean;
+ onOpenChange: (open: boolean) => void;
+ onFileSelected?: (files: CloudFile[], connectorType: string) => void;
}
-export function CloudConnectorsDialog({
- isOpen,
+export function CloudConnectorsDialog({
+ isOpen,
onOpenChange,
- onFileSelected
+ onFileSelected,
}: CloudConnectorsDialogProps) {
- const [connectors, setConnectors] = useState([])
- const [isLoading, setIsLoading] = useState(true)
- const [selectedFiles, setSelectedFiles] = useState<{[connectorId: string]: GoogleDriveFile[] | OneDriveFile[]}>({})
- const [connectorAccessTokens, setConnectorAccessTokens] = useState<{[connectorType: string]: string}>({})
- const [activePickerType, setActivePickerType] = useState(null)
+ const [connectors, setConnectors] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [selectedFiles, setSelectedFiles] = useState<{
+ [connectorId: string]: CloudFile[];
+ }>({});
+ const [connectorAccessTokens, setConnectorAccessTokens] = useState<{
+ [connectorType: string]: string;
+ }>({});
+ const [activePickerType, setActivePickerType] = useState(null);
const getConnectorIcon = (iconName: string) => {
const iconMap: { [key: string]: React.ReactElement } = {
- 'google-drive': (
+ "google-drive": (
G
),
- 'sharepoint': (
+ sharepoint: (
SP
),
- 'onedrive': (
+ onedrive: (
OD
),
- }
- return iconMap[iconName] || (
-
- ?
-
- )
- }
+ };
+ return (
+ iconMap[iconName] || (
+
+ ?
+
+ )
+ );
+ };
const fetchConnectorStatuses = useCallback(async () => {
- if (!isOpen) return
-
- setIsLoading(true)
+ if (!isOpen) return;
+
+ setIsLoading(true);
try {
// Fetch available connectors from backend
- const connectorsResponse = await fetch('/api/connectors')
+ const connectorsResponse = await fetch("/api/connectors");
if (!connectorsResponse.ok) {
- throw new Error('Failed to load connectors')
+ throw new Error("Failed to load connectors");
}
-
- const connectorsResult = await connectorsResponse.json()
- const connectorTypes = Object.keys(connectorsResult.connectors)
-
+
+ const connectorsResult = await connectorsResponse.json();
+ const connectorTypes = Object.keys(connectorsResult.connectors);
+
// Filter to only cloud connectors
- const cloudConnectorTypes = connectorTypes.filter(type =>
- ['google_drive', 'onedrive', 'sharepoint'].includes(type) &&
- connectorsResult.connectors[type].available
- )
-
+ const cloudConnectorTypes = connectorTypes.filter(
+ type =>
+ ["google_drive", "onedrive", "sharepoint"].includes(type) &&
+ connectorsResult.connectors[type].available
+ );
+
// Initialize connectors list
const initialConnectors = cloudConnectorTypes.map(type => ({
id: type,
@@ -115,82 +105,95 @@ export function CloudConnectorsDialog({
status: "not_connected" as const,
type: type,
hasAccessToken: false,
- accessTokenError: undefined
- }))
-
- setConnectors(initialConnectors)
+ accessTokenError: undefined,
+ clientId: "",
+ }));
+
+ setConnectors(initialConnectors);
// Check status for each cloud connector type
for (const connectorType of cloudConnectorTypes) {
try {
- const response = await fetch(`/api/connectors/${connectorType}/status`)
+ const response = await fetch(
+ `/api/connectors/${connectorType}/status`
+ );
if (response.ok) {
- const data = await response.json()
- const connections = data.connections || []
- const activeConnection = connections.find((conn: { connection_id: string; is_active: boolean }) => conn.is_active)
- const isConnected = activeConnection !== undefined
-
- let hasAccessToken = false
- let accessTokenError: string | undefined = undefined
+ const data = await response.json();
+ const connections = data.connections || [];
+ const activeConnection = connections.find(
+ (conn: { connection_id: string; is_active: boolean }) =>
+ conn.is_active
+ );
+ const isConnected = activeConnection !== undefined;
+
+ let hasAccessToken = false;
+ let accessTokenError: string | undefined = undefined;
// Try to get access token for connected connectors
if (isConnected && activeConnection) {
try {
- const tokenResponse = await fetch(`/api/connectors/${connectorType}/token?connection_id=${activeConnection.connection_id}`)
+ const tokenResponse = await fetch(
+ `/api/connectors/${connectorType}/token?connection_id=${activeConnection.connection_id}`
+ );
if (tokenResponse.ok) {
- const tokenData = await tokenResponse.json()
+ const tokenData = await tokenResponse.json();
if (tokenData.access_token) {
- hasAccessToken = true
+ hasAccessToken = true;
setConnectorAccessTokens(prev => ({
...prev,
- [connectorType]: tokenData.access_token
- }))
+ [connectorType]: tokenData.access_token,
+ }));
}
} else {
- const errorData = await tokenResponse.json().catch(() => ({ error: 'Token unavailable' }))
- accessTokenError = errorData.error || 'Access token unavailable'
+ const errorData = await tokenResponse
+ .json()
+ .catch(() => ({ error: "Token unavailable" }));
+ accessTokenError =
+ errorData.error || "Access token unavailable";
}
} catch {
- accessTokenError = 'Failed to fetch access token'
+ accessTokenError = "Failed to fetch access token";
}
}
-
- setConnectors(prev => prev.map(c =>
- c.type === connectorType
- ? {
- ...c,
- status: isConnected ? "connected" : "not_connected",
- connectionId: activeConnection?.connection_id,
- hasAccessToken,
- accessTokenError
- }
- : c
- ))
+
+ setConnectors(prev =>
+ prev.map(c =>
+ c.type === connectorType
+ ? {
+ ...c,
+ status: isConnected ? "connected" : "not_connected",
+ connectionId: activeConnection?.connection_id,
+ clientId: activeConnection?.client_id,
+ hasAccessToken,
+ accessTokenError,
+ }
+ : c
+ )
+ );
}
} catch (error) {
- console.error(`Failed to check status for ${connectorType}:`, error)
+ console.error(`Failed to check status for ${connectorType}:`, error);
}
}
} catch (error) {
- console.error('Failed to load cloud connectors:', error)
+ console.error("Failed to load cloud connectors:", error);
} finally {
- setIsLoading(false)
+ setIsLoading(false);
}
- }, [isOpen])
+ }, [isOpen]);
- const handleFileSelection = (connectorId: string, files: GoogleDriveFile[] | OneDriveFile[]) => {
+ const handleFileSelection = (connectorId: string, files: CloudFile[]) => {
setSelectedFiles(prev => ({
...prev,
- [connectorId]: files
- }))
-
- onFileSelected?.(files, connectorId)
- }
+ [connectorId]: files,
+ }));
+
+ onFileSelected?.(files, connectorId);
+ };
useEffect(() => {
- fetchConnectorStatuses()
- }, [fetchConnectorStatuses])
-
+ fetchConnectorStatuses();
+ }, [fetchConnectorStatuses]);
return (
@@ -218,19 +221,24 @@ export function CloudConnectorsDialog({
{connectors
.filter(connector => connector.status === "connected")
- .map((connector) => (
+ .map(connector => (
{
- e.preventDefault()
- e.stopPropagation()
+ title={
+ !connector.hasAccessToken
+ ? connector.accessTokenError ||
+ "Access token required - try reconnecting your account"
+ : `Select files from ${connector.name}`
+ }
+ onClick={e => {
+ e.preventDefault();
+ e.stopPropagation();
if (connector.hasAccessToken) {
- setActivePickerType(connector.id)
+ setActivePickerType(connector.id);
}
}}
className="min-w-[120px]"
@@ -243,54 +251,46 @@ export function CloudConnectorsDialog({
{connectors.every(c => c.status !== "connected") && (
No connected cloud providers found.
-
Go to Settings to connect your cloud storage accounts.
+
+ Go to Settings to connect your cloud storage accounts.
+
)}
-
- {/* Render pickers inside dialog */}
- {activePickerType && connectors.find(c => c.id === activePickerType) && (() => {
- const connector = connectors.find(c => c.id === activePickerType)!
-
- if (connector.type === "google_drive") {
+
+ {/* Render unified picker inside dialog */}
+ {activePickerType &&
+ connectors.find(c => c.id === activePickerType) &&
+ (() => {
+ const connector = connectors.find(
+ c => c.id === activePickerType
+ )!;
+
return (
- {
- handleFileSelection(connector.id, files)
- setActivePickerType(null)
+ {
+ handleFileSelection(connector.id, files);
+ setActivePickerType(null);
}}
- selectedFiles={selectedFiles[connector.id] as GoogleDriveFile[] || []}
+ selectedFiles={selectedFiles[connector.id] || []}
isAuthenticated={connector.status === "connected"}
accessToken={connectorAccessTokens[connector.type]}
onPickerStateChange={() => {}}
+ clientId={connector.clientId}
/>
- )
- }
-
- if (connector.type === "onedrive" || connector.type === "sharepoint") {
- return (
-
- {
- handleFileSelection(connector.id, files)
- setActivePickerType(null)
- }}
- selectedFiles={selectedFiles[connector.id] as OneDriveFile[] || []}
- isAuthenticated={connector.status === "connected"}
- accessToken={connectorAccessTokens[connector.type]}
- connectorType={connector.type as "onedrive" | "sharepoint"}
- />
-
- )
- }
-
- return null
- })()}
+ );
+ })()}
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/frontend/src/components/cloud-picker/file-item.tsx b/frontend/src/components/cloud-picker/file-item.tsx
new file mode 100644
index 00000000..3f6b5ab5
--- /dev/null
+++ b/frontend/src/components/cloud-picker/file-item.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { FileText, Folder, Trash } from "lucide-react";
+import { CloudFile } from "./types";
+
+interface FileItemProps {
+ file: CloudFile;
+ onRemove: (fileId: string) => void;
+}
+
+const getFileIcon = (mimeType: string) => {
+ if (mimeType.includes("folder")) {
+ return
;
+ }
+ return
;
+};
+
+const getMimeTypeLabel = (mimeType: string) => {
+ const typeMap: { [key: string]: string } = {
+ "application/vnd.google-apps.document": "Google Doc",
+ "application/vnd.google-apps.spreadsheet": "Google Sheet",
+ "application/vnd.google-apps.presentation": "Google Slides",
+ "application/vnd.google-apps.folder": "Folder",
+ "application/pdf": "PDF",
+ "text/plain": "Text",
+ "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+ "Word Doc",
+ "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+ "PowerPoint",
+ };
+
+ return typeMap[mimeType] || mimeType?.split("/").pop() || "Document";
+};
+
+const formatFileSize = (bytes?: number) => {
+ if (!bytes) return "";
+ const sizes = ["B", "KB", "MB", "GB", "TB"];
+ if (bytes === 0) return "0 B";
+ const i = Math.floor(Math.log(bytes) / Math.log(1024));
+ return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
+};
+
+export const FileItem = ({ file, onRemove }: FileItemProps) => (
+
+
+ {getFileIcon(file.mimeType)}
+ {file.name}
+
+ {getMimeTypeLabel(file.mimeType)}
+
+
+
+
+ {formatFileSize(file.size) || "—"}
+
+
+ onRemove(file.id)}
+ />
+
+
+);
diff --git a/frontend/src/components/cloud-picker/file-list.tsx b/frontend/src/components/cloud-picker/file-list.tsx
new file mode 100644
index 00000000..775d78c4
--- /dev/null
+++ b/frontend/src/components/cloud-picker/file-list.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { CloudFile } from "./types";
+import { FileItem } from "./file-item";
+
+interface FileListProps {
+ files: CloudFile[];
+ onClearAll: () => void;
+ onRemoveFile: (fileId: string) => void;
+}
+
+export const FileList = ({
+ files,
+ onClearAll,
+ onRemoveFile,
+}: FileListProps) => {
+ if (files.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+
Added files
+
+ Clear all
+
+
+
+ {files.map(file => (
+
+
+ );
+};
diff --git a/frontend/src/components/cloud-picker/index.ts b/frontend/src/components/cloud-picker/index.ts
new file mode 100644
index 00000000..ef7aa74b
--- /dev/null
+++ b/frontend/src/components/cloud-picker/index.ts
@@ -0,0 +1,7 @@
+export { UnifiedCloudPicker } from "./unified-cloud-picker";
+export { PickerHeader } from "./picker-header";
+export { FileList } from "./file-list";
+export { FileItem } from "./file-item";
+export { IngestSettings } from "./ingest-settings";
+export * from "./types";
+export * from "./provider-handlers";
diff --git a/frontend/src/components/cloud-picker/ingest-settings.tsx b/frontend/src/components/cloud-picker/ingest-settings.tsx
new file mode 100644
index 00000000..d5843a2a
--- /dev/null
+++ b/frontend/src/components/cloud-picker/ingest-settings.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ChevronRight, Info } from "lucide-react";
+import { IngestSettings as IngestSettingsType } from "./types";
+
+interface IngestSettingsProps {
+ isOpen: boolean;
+ onOpenChange: (open: boolean) => void;
+ settings?: IngestSettingsType;
+ onSettingsChange?: (settings: IngestSettingsType) => void;
+}
+
+export const IngestSettings = ({
+ isOpen,
+ onOpenChange,
+ settings,
+ onSettingsChange,
+}: IngestSettingsProps) => {
+ // Default settings
+ const defaultSettings: IngestSettingsType = {
+ chunkSize: 1000,
+ chunkOverlap: 200,
+ ocr: false,
+ pictureDescriptions: false,
+ embeddingModel: "text-embedding-3-small",
+ };
+
+ // Use provided settings or defaults
+ const currentSettings = settings || defaultSettings;
+
+ const handleSettingsChange = (newSettings: Partial
) => {
+ const updatedSettings = { ...currentSettings, ...newSettings };
+ onSettingsChange?.(updatedSettings);
+ };
+
+ return (
+
+
+
+ Ingest settings
+
+
+
+
+
+
+
+
Chunk size
+
+ handleSettingsChange({
+ chunkSize: parseInt(e.target.value) || 0,
+ })
+ }
+ />
+
+
+
Chunk overlap
+
+ handleSettingsChange({
+ chunkOverlap: parseInt(e.target.value) || 0,
+ })
+ }
+ />
+
+
+
+
+
+
OCR
+
+ Extracts text from images/PDFs. Ingest is slower when enabled.
+
+
+
+ handleSettingsChange({ ocr: checked })
+ }
+ />
+
+
+
+
+
+ Picture descriptions
+
+
+ Adds captions for images. Ingest is more expensive when enabled.
+
+
+
+ handleSettingsChange({ pictureDescriptions: checked })
+ }
+ />
+
+
+
+
+ Embedding model
+
+
+ handleSettingsChange({ embeddingModel: e.target.value })
+ }
+ placeholder="text-embedding-3-small"
+ />
+
+
+
+ );
+};
diff --git a/frontend/src/components/cloud-picker/picker-header.tsx b/frontend/src/components/cloud-picker/picker-header.tsx
new file mode 100644
index 00000000..05dcaebd
--- /dev/null
+++ b/frontend/src/components/cloud-picker/picker-header.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Plus } from "lucide-react";
+import { CloudProvider } from "./types";
+
+interface PickerHeaderProps {
+ provider: CloudProvider;
+ onAddFiles: () => void;
+ isPickerLoaded: boolean;
+ isPickerOpen: boolean;
+ accessToken?: string;
+ isAuthenticated: boolean;
+}
+
+const getProviderName = (provider: CloudProvider): string => {
+ switch (provider) {
+ case "google_drive":
+ return "Google Drive";
+ case "onedrive":
+ return "OneDrive";
+ case "sharepoint":
+ return "SharePoint";
+ default:
+ return "Cloud Storage";
+ }
+};
+
+export const PickerHeader = ({
+ provider,
+ onAddFiles,
+ isPickerLoaded,
+ isPickerOpen,
+ accessToken,
+ isAuthenticated,
+}: PickerHeaderProps) => {
+ if (!isAuthenticated) {
+ return (
+
+ Please connect to {getProviderName(provider)} first to select specific
+ files.
+
+ );
+ }
+
+ return (
+
+
+
+ Select files from {getProviderName(provider)} to ingest.
+
+
+
+
+ csv, json, pdf,{" "}
+
+16 more {" "}
+
150 MB max
+
+
+ );
+};
diff --git a/frontend/src/components/cloud-picker/provider-handlers.ts b/frontend/src/components/cloud-picker/provider-handlers.ts
new file mode 100644
index 00000000..4a39312f
--- /dev/null
+++ b/frontend/src/components/cloud-picker/provider-handlers.ts
@@ -0,0 +1,245 @@
+"use client";
+
+import {
+ CloudFile,
+ CloudProvider,
+ GooglePickerData,
+ GooglePickerDocument,
+} from "./types";
+
+export class GoogleDriveHandler {
+ private accessToken: string;
+ private onPickerStateChange?: (isOpen: boolean) => void;
+
+ constructor(
+ accessToken: string,
+ onPickerStateChange?: (isOpen: boolean) => void
+ ) {
+ this.accessToken = accessToken;
+ this.onPickerStateChange = onPickerStateChange;
+ }
+
+ async loadPickerApi(): Promise {
+ return new Promise(resolve => {
+ if (typeof window !== "undefined" && window.gapi) {
+ window.gapi.load("picker", {
+ callback: () => resolve(true),
+ onerror: () => resolve(false),
+ });
+ } else {
+ // Load Google API script
+ const script = document.createElement("script");
+ script.src = "https://apis.google.com/js/api.js";
+ script.async = true;
+ script.defer = true;
+ script.onload = () => {
+ window.gapi.load("picker", {
+ callback: () => resolve(true),
+ onerror: () => resolve(false),
+ });
+ };
+ script.onerror = () => resolve(false);
+ document.head.appendChild(script);
+ }
+ });
+ }
+
+ openPicker(onFileSelected: (files: CloudFile[]) => void): void {
+ if (!window.google?.picker) {
+ return;
+ }
+
+ try {
+ this.onPickerStateChange?.(true);
+
+ const picker = new window.google.picker.PickerBuilder()
+ .addView(window.google.picker.ViewId.DOCS)
+ .addView(window.google.picker.ViewId.FOLDERS)
+ .setOAuthToken(this.accessToken)
+ .enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED)
+ .setTitle("Select files from Google Drive")
+ .setCallback(data => this.pickerCallback(data, onFileSelected))
+ .build();
+
+ picker.setVisible(true);
+
+ // Apply z-index fix
+ setTimeout(() => {
+ const pickerElements = document.querySelectorAll(
+ ".picker-dialog, .goog-modalpopup"
+ );
+ pickerElements.forEach(el => {
+ (el as HTMLElement).style.zIndex = "10000";
+ });
+ const bgElements = document.querySelectorAll(
+ ".picker-dialog-bg, .goog-modalpopup-bg"
+ );
+ bgElements.forEach(el => {
+ (el as HTMLElement).style.zIndex = "9999";
+ });
+ }, 100);
+ } catch (error) {
+ console.error("Error creating picker:", error);
+ this.onPickerStateChange?.(false);
+ }
+ }
+
+ private async pickerCallback(
+ data: GooglePickerData,
+ onFileSelected: (files: CloudFile[]) => void
+ ): Promise {
+ if (data.action === window.google.picker.Action.PICKED) {
+ const files: CloudFile[] = data.docs.map((doc: GooglePickerDocument) => ({
+ id: doc[window.google.picker.Document.ID],
+ name: doc[window.google.picker.Document.NAME],
+ mimeType: doc[window.google.picker.Document.MIME_TYPE],
+ webViewLink: doc[window.google.picker.Document.URL],
+ iconLink: doc[window.google.picker.Document.ICON_URL],
+ size: doc["sizeBytes"] ? parseInt(doc["sizeBytes"]) : undefined,
+ modifiedTime: doc["lastEditedUtc"],
+ isFolder:
+ doc[window.google.picker.Document.MIME_TYPE] ===
+ "application/vnd.google-apps.folder",
+ }));
+
+ // Enrich with additional file data if needed
+ if (files.some(f => !f.size && !f.isFolder)) {
+ try {
+ const enrichedFiles = await Promise.all(
+ files.map(async file => {
+ if (!file.size && !file.isFolder) {
+ try {
+ const response = await fetch(
+ `https://www.googleapis.com/drive/v3/files/${file.id}?fields=size,modifiedTime`,
+ {
+ headers: {
+ Authorization: `Bearer ${this.accessToken}`,
+ },
+ }
+ );
+ if (response.ok) {
+ const fileDetails = await response.json();
+ return {
+ ...file,
+ size: fileDetails.size
+ ? parseInt(fileDetails.size)
+ : undefined,
+ modifiedTime:
+ fileDetails.modifiedTime || file.modifiedTime,
+ };
+ }
+ } catch (error) {
+ console.warn("Failed to fetch file details:", error);
+ }
+ }
+ return file;
+ })
+ );
+ onFileSelected(enrichedFiles);
+ } catch (error) {
+ console.warn("Failed to enrich file data:", error);
+ onFileSelected(files);
+ }
+ } else {
+ onFileSelected(files);
+ }
+ }
+
+ this.onPickerStateChange?.(false);
+ }
+}
+
+export class OneDriveHandler {
+ private accessToken: string;
+ private clientId: string;
+ private provider: CloudProvider;
+ private baseUrl?: string;
+
+ constructor(
+ accessToken: string,
+ clientId: string,
+ provider: CloudProvider = "onedrive",
+ baseUrl?: string
+ ) {
+ this.accessToken = accessToken;
+ this.clientId = clientId;
+ this.provider = provider;
+ this.baseUrl = baseUrl;
+ }
+
+ async loadPickerApi(): Promise {
+ return new Promise(resolve => {
+ const script = document.createElement("script");
+ script.src = "https://js.live.net/v7.2/OneDrive.js";
+ script.onload = () => resolve(true);
+ script.onerror = () => resolve(false);
+ document.head.appendChild(script);
+ });
+ }
+
+ openPicker(onFileSelected: (files: CloudFile[]) => void): void {
+ if (!window.OneDrive) {
+ return;
+ }
+
+ window.OneDrive.open({
+ clientId: this.clientId,
+ action: "query",
+ multiSelect: true,
+ advanced: {
+ endpointHint: "api.onedrive.com",
+ accessToken: this.accessToken,
+ },
+ success: (response: any) => {
+ const newFiles: CloudFile[] =
+ response.value?.map((item: any, index: number) => ({
+ id: item.id,
+ name:
+ item.name ||
+ `${this.getProviderName()} File ${index + 1} (${item.id.slice(
+ -8
+ )})`,
+ mimeType: item.file?.mimeType || "application/octet-stream",
+ webUrl: item.webUrl || "",
+ downloadUrl: item["@microsoft.graph.downloadUrl"] || "",
+ size: item.size,
+ modifiedTime: item.lastModifiedDateTime,
+ isFolder: !!item.folder,
+ })) || [];
+
+ onFileSelected(newFiles);
+ },
+ cancel: () => {
+ console.log("Picker cancelled");
+ },
+ error: (error: any) => {
+ console.error("Picker error:", error);
+ },
+ });
+ }
+
+ private getProviderName(): string {
+ return this.provider === "sharepoint" ? "SharePoint" : "OneDrive";
+ }
+}
+
+export const createProviderHandler = (
+ provider: CloudProvider,
+ accessToken: string,
+ onPickerStateChange?: (isOpen: boolean) => void,
+ clientId?: string,
+ baseUrl?: string
+) => {
+ switch (provider) {
+ case "google_drive":
+ return new GoogleDriveHandler(accessToken, onPickerStateChange);
+ case "onedrive":
+ case "sharepoint":
+ if (!clientId) {
+ throw new Error("Client ID required for OneDrive/SharePoint");
+ }
+ return new OneDriveHandler(accessToken, clientId, provider, baseUrl);
+ default:
+ throw new Error(`Unsupported provider: ${provider}`);
+ }
+};
diff --git a/frontend/src/components/cloud-picker/types.ts b/frontend/src/components/cloud-picker/types.ts
new file mode 100644
index 00000000..ca346bf0
--- /dev/null
+++ b/frontend/src/components/cloud-picker/types.ts
@@ -0,0 +1,106 @@
+export interface CloudFile {
+ id: string;
+ name: string;
+ mimeType: string;
+ webViewLink?: string;
+ iconLink?: string;
+ size?: number;
+ modifiedTime?: string;
+ isFolder?: boolean;
+ webUrl?: string;
+ downloadUrl?: string;
+}
+
+export type CloudProvider = "google_drive" | "onedrive" | "sharepoint";
+
+export interface UnifiedCloudPickerProps {
+ provider: CloudProvider;
+ onFileSelected: (files: CloudFile[]) => void;
+ selectedFiles?: CloudFile[];
+ isAuthenticated: boolean;
+ accessToken?: string;
+ onPickerStateChange?: (isOpen: boolean) => void;
+ // OneDrive/SharePoint specific props
+ clientId?: string;
+ baseUrl?: string;
+ // Ingest settings
+ onSettingsChange?: (settings: IngestSettings) => void;
+}
+
+export interface GoogleAPI {
+ load: (
+ api: string,
+ options: { callback: () => void; onerror?: () => void }
+ ) => void;
+}
+
+export interface GooglePickerData {
+ action: string;
+ docs: GooglePickerDocument[];
+}
+
+export interface GooglePickerDocument {
+ [key: string]: string;
+}
+
+declare global {
+ interface Window {
+ gapi: GoogleAPI;
+ google: {
+ picker: {
+ api: {
+ load: (callback: () => void) => void;
+ };
+ PickerBuilder: new () => GooglePickerBuilder;
+ ViewId: {
+ DOCS: string;
+ FOLDERS: string;
+ DOCS_IMAGES_AND_VIDEOS: string;
+ DOCUMENTS: string;
+ PRESENTATIONS: string;
+ SPREADSHEETS: string;
+ };
+ Feature: {
+ MULTISELECT_ENABLED: string;
+ NAV_HIDDEN: string;
+ SIMPLE_UPLOAD_ENABLED: string;
+ };
+ Action: {
+ PICKED: string;
+ CANCEL: string;
+ };
+ Document: {
+ ID: string;
+ NAME: string;
+ MIME_TYPE: string;
+ URL: string;
+ ICON_URL: string;
+ };
+ };
+ };
+ OneDrive?: any;
+ }
+}
+
+export interface GooglePickerBuilder {
+ addView: (view: string) => GooglePickerBuilder;
+ setOAuthToken: (token: string) => GooglePickerBuilder;
+ setCallback: (
+ callback: (data: GooglePickerData) => void
+ ) => GooglePickerBuilder;
+ enableFeature: (feature: string) => GooglePickerBuilder;
+ setTitle: (title: string) => GooglePickerBuilder;
+ build: () => GooglePicker;
+}
+
+export interface GooglePicker {
+ setVisible: (visible: boolean) => void;
+}
+
+export interface IngestSettings {
+ chunkSize: number;
+ chunkOverlap: number;
+ ocr: boolean;
+ pictureDescriptions: boolean;
+ embeddingModel: string;
+}
diff --git a/frontend/src/components/cloud-picker/unified-cloud-picker.tsx b/frontend/src/components/cloud-picker/unified-cloud-picker.tsx
new file mode 100644
index 00000000..fd77698f
--- /dev/null
+++ b/frontend/src/components/cloud-picker/unified-cloud-picker.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+ UnifiedCloudPickerProps,
+ CloudFile,
+ IngestSettings as IngestSettingsType,
+} from "./types";
+import { PickerHeader } from "./picker-header";
+import { FileList } from "./file-list";
+import { IngestSettings } from "./ingest-settings";
+import { createProviderHandler } from "./provider-handlers";
+
+export const UnifiedCloudPicker = ({
+ provider,
+ onFileSelected,
+ selectedFiles = [],
+ isAuthenticated,
+ accessToken,
+ onPickerStateChange,
+ clientId,
+ baseUrl,
+ onSettingsChange,
+}: UnifiedCloudPickerProps) => {
+ const [isPickerLoaded, setIsPickerLoaded] = useState(false);
+ const [isPickerOpen, setIsPickerOpen] = useState(false);
+ const [isIngestSettingsOpen, setIsIngestSettingsOpen] = useState(false);
+ const [isLoadingBaseUrl, setIsLoadingBaseUrl] = useState(false);
+ const [autoBaseUrl, setAutoBaseUrl] = useState(undefined);
+
+ // Settings state with defaults
+ const [ingestSettings, setIngestSettings] = useState({
+ chunkSize: 1000,
+ chunkOverlap: 200,
+ ocr: false,
+ pictureDescriptions: false,
+ embeddingModel: "text-embedding-3-small",
+ });
+
+ // Handle settings changes and notify parent
+ const handleSettingsChange = (newSettings: IngestSettingsType) => {
+ setIngestSettings(newSettings);
+ onSettingsChange?.(newSettings);
+ };
+
+ const effectiveBaseUrl = baseUrl || autoBaseUrl;
+
+ // Auto-detect base URL for OneDrive personal accounts
+ useEffect(() => {
+ if (
+ (provider === "onedrive" || provider === "sharepoint") &&
+ !baseUrl &&
+ accessToken &&
+ !autoBaseUrl
+ ) {
+ const getBaseUrl = async () => {
+ setIsLoadingBaseUrl(true);
+ try {
+ setAutoBaseUrl("https://onedrive.live.com/picker");
+ } catch (error) {
+ console.error("Auto-detect baseUrl failed:", error);
+ } finally {
+ setIsLoadingBaseUrl(false);
+ }
+ };
+
+ getBaseUrl();
+ }
+ }, [accessToken, baseUrl, autoBaseUrl, provider]);
+
+ // Load picker API
+ useEffect(() => {
+ if (!accessToken || !isAuthenticated) return;
+
+ const loadApi = async () => {
+ try {
+ const handler = createProviderHandler(
+ provider,
+ accessToken,
+ onPickerStateChange,
+ clientId,
+ effectiveBaseUrl
+ );
+ const loaded = await handler.loadPickerApi();
+ setIsPickerLoaded(loaded);
+ } catch (error) {
+ console.error("Failed to create provider handler:", error);
+ setIsPickerLoaded(false);
+ }
+ };
+
+ loadApi();
+ }, [
+ accessToken,
+ isAuthenticated,
+ provider,
+ clientId,
+ effectiveBaseUrl,
+ onPickerStateChange,
+ ]);
+
+ const handleAddFiles = () => {
+ if (!isPickerLoaded || !accessToken) {
+ return;
+ }
+
+ if ((provider === "onedrive" || provider === "sharepoint") && !clientId) {
+ console.error("Client ID required for OneDrive/SharePoint");
+ return;
+ }
+
+ try {
+ setIsPickerOpen(true);
+ onPickerStateChange?.(true);
+
+ const handler = createProviderHandler(
+ provider,
+ accessToken,
+ isOpen => {
+ setIsPickerOpen(isOpen);
+ onPickerStateChange?.(isOpen);
+ },
+ clientId,
+ effectiveBaseUrl
+ );
+
+ handler.openPicker((files: CloudFile[]) => {
+ // Merge new files with existing ones, avoiding duplicates
+ const existingIds = new Set(selectedFiles.map(f => f.id));
+ const newFiles = files.filter(f => !existingIds.has(f.id));
+ onFileSelected([...selectedFiles, ...newFiles]);
+ });
+ } catch (error) {
+ console.error("Error opening picker:", error);
+ setIsPickerOpen(false);
+ onPickerStateChange?.(false);
+ }
+ };
+
+ const handleRemoveFile = (fileId: string) => {
+ const updatedFiles = selectedFiles.filter(file => file.id !== fileId);
+ onFileSelected(updatedFiles);
+ };
+
+ const handleClearAll = () => {
+ onFileSelected([]);
+ };
+
+ if (isLoadingBaseUrl) {
+ return (
+
+ Loading...
+
+ );
+ }
+
+ if (
+ (provider === "onedrive" || provider === "sharepoint") &&
+ !clientId &&
+ isAuthenticated
+ ) {
+ return (
+
+ Configuration required: Client ID missing for{" "}
+ {provider === "sharepoint" ? "SharePoint" : "OneDrive"}.
+
+ );
+ }
+
+ return (
+
+ );
+};
diff --git a/frontend/src/components/google-drive-picker.tsx b/frontend/src/components/google-drive-picker.tsx
deleted file mode 100644
index c9dee19a..00000000
--- a/frontend/src/components/google-drive-picker.tsx
+++ /dev/null
@@ -1,341 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { FileText, Folder, Plus, Trash2 } from "lucide-react"
-import { Card, CardContent } from "@/components/ui/card"
-
-interface GoogleDrivePickerProps {
- onFileSelected: (files: GoogleDriveFile[]) => void
- selectedFiles?: GoogleDriveFile[]
- isAuthenticated: boolean
- accessToken?: string
- onPickerStateChange?: (isOpen: boolean) => void
-}
-
-interface GoogleDriveFile {
- id: string
- name: string
- mimeType: string
- webViewLink?: string
- iconLink?: string
- size?: number
- modifiedTime?: string
- isFolder?: boolean
-}
-
-interface GoogleAPI {
- load: (api: string, options: { callback: () => void; onerror?: () => void }) => void
-}
-
-interface GooglePickerData {
- action: string
- docs: GooglePickerDocument[]
-}
-
-interface GooglePickerDocument {
- [key: string]: string
-}
-
-declare global {
- interface Window {
- gapi: GoogleAPI
- google: {
- picker: {
- api: {
- load: (callback: () => void) => void
- }
- PickerBuilder: new () => GooglePickerBuilder
- ViewId: {
- DOCS: string
- FOLDERS: string
- DOCS_IMAGES_AND_VIDEOS: string
- DOCUMENTS: string
- PRESENTATIONS: string
- SPREADSHEETS: string
- }
- Feature: {
- MULTISELECT_ENABLED: string
- NAV_HIDDEN: string
- SIMPLE_UPLOAD_ENABLED: string
- }
- Action: {
- PICKED: string
- CANCEL: string
- }
- Document: {
- ID: string
- NAME: string
- MIME_TYPE: string
- URL: string
- ICON_URL: string
- }
- }
- }
- }
-}
-
-interface GooglePickerBuilder {
- addView: (view: string) => GooglePickerBuilder
- setOAuthToken: (token: string) => GooglePickerBuilder
- setCallback: (callback: (data: GooglePickerData) => void) => GooglePickerBuilder
- enableFeature: (feature: string) => GooglePickerBuilder
- setTitle: (title: string) => GooglePickerBuilder
- build: () => GooglePicker
-}
-
-interface GooglePicker {
- setVisible: (visible: boolean) => void
-}
-
-export function GoogleDrivePicker({
- onFileSelected,
- selectedFiles = [],
- isAuthenticated,
- accessToken,
- onPickerStateChange
-}: GoogleDrivePickerProps) {
- const [isPickerLoaded, setIsPickerLoaded] = useState(false)
- const [isPickerOpen, setIsPickerOpen] = useState(false)
-
- useEffect(() => {
- const loadPickerApi = () => {
- if (typeof window !== 'undefined' && window.gapi) {
- window.gapi.load('picker', {
- callback: () => {
- setIsPickerLoaded(true)
- },
- onerror: () => {
- console.error('Failed to load Google Picker API')
- }
- })
- }
- }
-
- // Load Google API script if not already loaded
- if (typeof window !== 'undefined') {
- if (!window.gapi) {
- const script = document.createElement('script')
- script.src = 'https://apis.google.com/js/api.js'
- script.async = true
- script.defer = true
- script.onload = loadPickerApi
- script.onerror = () => {
- console.error('Failed to load Google API script')
- }
- document.head.appendChild(script)
-
- return () => {
- if (document.head.contains(script)) {
- document.head.removeChild(script)
- }
- }
- } else {
- loadPickerApi()
- }
- }
- }, [])
-
-
- const openPicker = () => {
- if (!isPickerLoaded || !accessToken || !window.google?.picker) {
- return
- }
-
- try {
- setIsPickerOpen(true)
- onPickerStateChange?.(true)
-
- // Create picker with higher z-index and focus handling
- const picker = new window.google.picker.PickerBuilder()
- .addView(window.google.picker.ViewId.DOCS)
- .addView(window.google.picker.ViewId.FOLDERS)
- .setOAuthToken(accessToken)
- .enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED)
- .setTitle('Select files from Google Drive')
- .setCallback(pickerCallback)
- .build()
-
- picker.setVisible(true)
-
- // Apply z-index fix after a short delay to ensure picker is rendered
- setTimeout(() => {
- const pickerElements = document.querySelectorAll('.picker-dialog, .goog-modalpopup')
- pickerElements.forEach(el => {
- (el as HTMLElement).style.zIndex = '10000'
- })
- const bgElements = document.querySelectorAll('.picker-dialog-bg, .goog-modalpopup-bg')
- bgElements.forEach(el => {
- (el as HTMLElement).style.zIndex = '9999'
- })
- }, 100)
-
- } catch (error) {
- console.error('Error creating picker:', error)
- setIsPickerOpen(false)
- onPickerStateChange?.(false)
- }
- }
-
- const pickerCallback = async (data: GooglePickerData) => {
- if (data.action === window.google.picker.Action.PICKED) {
- const files: GoogleDriveFile[] = data.docs.map((doc: GooglePickerDocument) => ({
- id: doc[window.google.picker.Document.ID],
- name: doc[window.google.picker.Document.NAME],
- mimeType: doc[window.google.picker.Document.MIME_TYPE],
- webViewLink: doc[window.google.picker.Document.URL],
- iconLink: doc[window.google.picker.Document.ICON_URL],
- size: doc['sizeBytes'] ? parseInt(doc['sizeBytes']) : undefined,
- modifiedTime: doc['lastEditedUtc'],
- isFolder: doc[window.google.picker.Document.MIME_TYPE] === 'application/vnd.google-apps.folder'
- }))
-
- // If size is still missing, try to fetch it via Google Drive API
- if (accessToken && files.some(f => !f.size && !f.isFolder)) {
- try {
- const enrichedFiles = await Promise.all(files.map(async (file) => {
- if (!file.size && !file.isFolder) {
- try {
- const response = await fetch(`https://www.googleapis.com/drive/v3/files/${file.id}?fields=size,modifiedTime`, {
- headers: {
- 'Authorization': `Bearer ${accessToken}`
- }
- })
- if (response.ok) {
- const fileDetails = await response.json()
- return {
- ...file,
- size: fileDetails.size ? parseInt(fileDetails.size) : undefined,
- modifiedTime: fileDetails.modifiedTime || file.modifiedTime
- }
- }
- } catch (error) {
- console.warn('Failed to fetch file details:', error)
- }
- }
- return file
- }))
- onFileSelected(enrichedFiles)
- } catch (error) {
- console.warn('Failed to enrich file data:', error)
- onFileSelected(files)
- }
- } else {
- onFileSelected(files)
- }
- }
-
- setIsPickerOpen(false)
- onPickerStateChange?.(false)
- }
-
- const removeFile = (fileId: string) => {
- const updatedFiles = selectedFiles.filter(file => file.id !== fileId)
- onFileSelected(updatedFiles)
- }
-
- const getFileIcon = (mimeType: string) => {
- if (mimeType.includes('folder')) {
- return
- Please connect to Google Drive first to select specific files.
-
- )
- }
-
- return (
-
-
-
-
- Select files from Google Drive to ingest.
-
-
-
-
-
-
- {selectedFiles.length > 0 && (
-
-
-
- Added files
-
-
onFileSelected([])}
- size="sm"
- variant="ghost"
- className="text-xs h-6"
- >
- Clear all
-
-
-
- {selectedFiles.map((file) => (
-
-
- {getFileIcon(file.mimeType)}
- {file.name}
-
- {getMimeTypeLabel(file.mimeType)}
-
-
-
- {formatFileSize(file.size)}
- removeFile(file.id)}
- size="sm"
- variant="ghost"
- className="h-6 w-6 p-0"
- >
-
-
-
- ))}
-
-
-
- )}
-
([])
- const [isPickerOpen, setIsPickerOpen] = useState(false)
- const [currentPath, setCurrentPath] = useState(
- connectorType === "sharepoint" ? 'sites?search=' : 'me/drive/root/children'
- )
- const [breadcrumbs, setBreadcrumbs] = useState<{id: string, name: string}[]>([
- {id: 'root', name: connectorType === "sharepoint" ? 'SharePoint' : 'OneDrive'}
- ])
-
- useEffect(() => {
- const loadMGT = async () => {
- if (typeof window !== 'undefined' && !window.mgt) {
- try {
- await import('@microsoft/mgt-components')
- await import('@microsoft/mgt-msal2-provider')
-
- // For simplicity, we'll use direct Graph API calls instead of MGT components
- // MGT provider initialization would go here if needed
- } catch {
- console.warn('MGT not available, falling back to direct API calls')
- }
- }
- }
-
- loadMGT()
- }, [accessToken])
-
-
- const fetchFiles = async (path: string = currentPath) => {
- if (!accessToken) return
-
- setIsLoading(true)
- try {
- const response = await fetch(`https://graph.microsoft.com/v1.0/${path}`, {
- headers: {
- 'Authorization': `Bearer ${accessToken}`,
- 'Content-Type': 'application/json'
- }
- })
-
- if (response.ok) {
- const data: GraphResponse = await response.json()
- setFiles(data.value || [])
- } else {
- console.error('Failed to fetch OneDrive files:', response.statusText)
- }
- } catch (error) {
- console.error('Error fetching OneDrive files:', error)
- } finally {
- setIsLoading(false)
- }
- }
-
- const openPicker = () => {
- if (!accessToken) return
-
- setIsPickerOpen(true)
- onPickerStateChange?.(true)
- fetchFiles()
- }
-
- const closePicker = () => {
- setIsPickerOpen(false)
- onPickerStateChange?.(false)
- setFiles([])
- setCurrentPath(
- connectorType === "sharepoint" ? 'sites?search=' : 'me/drive/root/children'
- )
- setBreadcrumbs([
- {id: 'root', name: connectorType === "sharepoint" ? 'SharePoint' : 'OneDrive'}
- ])
- }
-
- const handleFileClick = (file: OneDriveFile) => {
- if (file.driveItem?.folder) {
- // Navigate to folder
- const newPath = `me/drive/items/${file.id}/children`
- setCurrentPath(newPath)
- setBreadcrumbs([...breadcrumbs, {id: file.id, name: file.name}])
- fetchFiles(newPath)
- } else {
- // Select file
- const isAlreadySelected = selectedFiles.some(f => f.id === file.id)
- if (!isAlreadySelected) {
- onFileSelected([...selectedFiles, file])
- }
- }
- }
-
- const navigateToBreadcrumb = (index: number) => {
- if (index === 0) {
- setCurrentPath('me/drive/root/children')
- setBreadcrumbs([{id: 'root', name: 'OneDrive'}])
- fetchFiles('me/drive/root/children')
- } else {
- const targetCrumb = breadcrumbs[index]
- const newPath = `me/drive/items/${targetCrumb.id}/children`
- setCurrentPath(newPath)
- setBreadcrumbs(breadcrumbs.slice(0, index + 1))
- fetchFiles(newPath)
- }
- }
-
- const removeFile = (fileId: string) => {
- const updatedFiles = selectedFiles.filter(file => file.id !== fileId)
- onFileSelected(updatedFiles)
- }
-
- const getFileIcon = (file: OneDriveFile) => {
- if (file.driveItem?.folder) {
- return
- Please connect to {serviceName} first to select specific files.
-
- )
- }
-
- return (
-
-
-
-
{serviceName} File Selection
-
- Choose specific files to sync instead of syncing everything
-
-
-
- {!accessToken ? "No Access Token" : "Select Files"}
-
-
-
- {/* Status message when access token is missing */}
- {isAuthenticated && !accessToken && (
-
-
Access token unavailable
-
The file picker requires an access token. Try disconnecting and reconnecting your {serviceName} account.
-
- )}
-
- {/* File Picker Modal */}
- {isPickerOpen && (
-
-
-
-
Select Files from {serviceName}
-
-
-
-
- {/* Breadcrumbs */}
-
- {breadcrumbs.map((crumb, index) => (
-
- {index > 0 && / }
- navigateToBreadcrumb(index)}
- className="text-blue-600 hover:underline"
- >
- {crumb.name}
-
-
- ))}
-
-
- {/* File List */}
-
- {isLoading ? (
-
Loading...
- ) : files.length === 0 ? (
-
No files found
- ) : (
-
- {files.map((file) => (
-
handleFileClick(file)}
- >
-
- {getFileIcon(file)}
- {file.name}
-
- {getMimeTypeLabel(file)}
-
-
- {selectedFiles.some(f => f.id === file.id) && (
-
Selected
- )}
-
- ))}
-
- )}
-
-
-
- )}
-
- {selectedFiles.length > 0 && (
-
-
- Selected files ({selectedFiles.length}):
-
-
- {selectedFiles.map((file) => (
-
-
- {getFileIcon(file)}
- {file.name}
-
- {getMimeTypeLabel(file)}
-
-
-
removeFile(file.id)}
- size="sm"
- variant="ghost"
- className="h-6 w-6 p-0"
- >
-
-
- ))}
-
-
onFileSelected([])}
- size="sm"
- variant="ghost"
- className="text-xs h-6"
- >
- Clear all
-
-
- )}
-