311 lines
9.8 KiB
TypeScript
311 lines
9.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { FileText, Folder, Plus, Trash2, ArrowLeft } from "lucide-react"
|
|
|
|
interface OneDrivePickerProps {
|
|
onFileSelected: (files: OneDriveFile[]) => void
|
|
selectedFiles?: OneDriveFile[]
|
|
isAuthenticated: boolean
|
|
accessToken?: string
|
|
connectorType?: "onedrive" | "sharepoint"
|
|
onPickerStateChange?: (isOpen: boolean) => void
|
|
}
|
|
|
|
interface OneDriveFile {
|
|
id: string
|
|
name: string
|
|
mimeType?: string
|
|
webUrl?: string
|
|
driveItem?: {
|
|
file?: { mimeType: string }
|
|
folder?: unknown
|
|
}
|
|
}
|
|
|
|
interface GraphResponse {
|
|
value: OneDriveFile[]
|
|
}
|
|
|
|
export function OneDrivePicker({
|
|
onFileSelected,
|
|
selectedFiles = [],
|
|
isAuthenticated,
|
|
accessToken,
|
|
connectorType = "onedrive",
|
|
onPickerStateChange
|
|
}: OneDrivePickerProps) {
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [files, setFiles] = useState<OneDriveFile[]>([])
|
|
const [isPickerOpen, setIsPickerOpen] = useState(false)
|
|
const [currentPath, setCurrentPath] = useState<string>(
|
|
connectorType === "sharepoint" ? 'sites?search=' : 'me/drive/root/children'
|
|
)
|
|
const [breadcrumbs, setBreadcrumbs] = useState<{id: string, name: string}[]>([
|
|
{id: 'root', name: connectorType === "sharepoint" ? 'SharePoint' : 'OneDrive'}
|
|
])
|
|
|
|
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 navigateBack = () => {
|
|
if (breadcrumbs.length > 1) {
|
|
const newBreadcrumbs = breadcrumbs.slice(0, -1)
|
|
setBreadcrumbs(newBreadcrumbs)
|
|
|
|
if (newBreadcrumbs.length === 1) {
|
|
setCurrentPath('me/drive/root/children')
|
|
fetchFiles('me/drive/root/children')
|
|
} else {
|
|
const parentCrumb = newBreadcrumbs[newBreadcrumbs.length - 1]
|
|
const newPath = `me/drive/items/${parentCrumb.id}/children`
|
|
setCurrentPath(newPath)
|
|
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 <Folder className="h-4 w-4 text-blue-600" />
|
|
}
|
|
return <FileText className="h-4 w-4 text-gray-600" />
|
|
}
|
|
|
|
const getMimeTypeLabel = (file: OneDriveFile) => {
|
|
const mimeType = file.driveItem?.file?.mimeType || file.mimeType || ''
|
|
const typeMap: { [key: string]: string } = {
|
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word Doc',
|
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel',
|
|
'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PowerPoint',
|
|
'application/pdf': 'PDF',
|
|
'text/plain': 'Text',
|
|
'image/jpeg': 'Image',
|
|
'image/png': 'Image',
|
|
}
|
|
|
|
if (file.driveItem?.folder) return 'Folder'
|
|
return typeMap[mimeType] || 'Document'
|
|
}
|
|
|
|
const serviceName = connectorType === "sharepoint" ? "SharePoint" : "OneDrive"
|
|
|
|
if (!isAuthenticated) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center text-center p-6">
|
|
<p className="text-sm text-gray-600">
|
|
Please connect to {serviceName} first to select specific files.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
if (!accessToken) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center text-center p-6">
|
|
<p className="text-sm text-gray-600 mb-2">
|
|
Access token unavailable
|
|
</p>
|
|
<p className="text-xs text-amber-600">
|
|
Try disconnecting and reconnecting your {serviceName} account.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{!isPickerOpen ? (
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center text-center p-6">
|
|
<p className="text-sm text-gray-600 mb-4">
|
|
Select files from {serviceName} to ingest.
|
|
</p>
|
|
<Button
|
|
onClick={openPicker}
|
|
className="bg-black text-white hover:bg-gray-800"
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Files
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-semibold">Select Files from {serviceName}</h3>
|
|
<Button onClick={closePicker} size="sm" variant="outline">
|
|
Done
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<div className="flex items-center space-x-2 mb-4">
|
|
{breadcrumbs.length > 1 && (
|
|
<Button
|
|
onClick={navigateBack}
|
|
size="sm"
|
|
variant="ghost"
|
|
className="p-1"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
<div className="text-sm text-gray-600">
|
|
{breadcrumbs.map((crumb, index) => (
|
|
<span key={crumb.id}>
|
|
{index > 0 && <span className="mx-1">/</span>}
|
|
{crumb.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* File List */}
|
|
<div className="border rounded-md max-h-96 overflow-y-auto">
|
|
{isLoading ? (
|
|
<div className="p-4 text-center text-gray-600">Loading...</div>
|
|
) : files.length === 0 ? (
|
|
<div className="p-4 text-center text-gray-600">No files found</div>
|
|
) : (
|
|
<div className="divide-y">
|
|
{files.map((file) => (
|
|
<div
|
|
key={file.id}
|
|
className="flex items-center p-3 hover:bg-gray-50 cursor-pointer"
|
|
onClick={() => handleFileClick(file)}
|
|
>
|
|
<div className="flex items-center gap-3 flex-1">
|
|
{getFileIcon(file)}
|
|
<span className="font-medium">{file.name}</span>
|
|
<Badge variant="secondary" className="text-xs">
|
|
{getMimeTypeLabel(file)}
|
|
</Badge>
|
|
</div>
|
|
{selectedFiles.some(f => f.id === file.id) && (
|
|
<Badge className="text-xs bg-green-100 text-green-800">Selected</Badge>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{selectedFiles.length > 0 && (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs text-gray-600">
|
|
Added files
|
|
</p>
|
|
<Button
|
|
onClick={() => onFileSelected([])}
|
|
size="sm"
|
|
variant="ghost"
|
|
className="text-xs h-6"
|
|
>
|
|
Clear all
|
|
</Button>
|
|
</div>
|
|
<div className="max-h-64 overflow-y-auto space-y-1">
|
|
{selectedFiles.map((file) => (
|
|
<div
|
|
key={file.id}
|
|
className="flex items-center justify-between p-2 bg-gray-100 rounded-md text-xs"
|
|
>
|
|
<div className="flex items-center gap-2 flex-1 min-w-0">
|
|
{getFileIcon(file)}
|
|
<span className="truncate font-medium">{file.name}</span>
|
|
<Badge variant="secondary" className="text-xs px-1 py-0.5 h-auto">
|
|
{getMimeTypeLabel(file)}
|
|
</Badge>
|
|
</div>
|
|
<Button
|
|
onClick={() => removeFile(file.id)}
|
|
size="sm"
|
|
variant="ghost"
|
|
className="h-6 w-6 p-0"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|