506 lines
18 KiB
TypeScript
506 lines
18 KiB
TypeScript
import React, { useEffect, useMemo, useState, useRef } from 'react';
|
|
import {
|
|
ThemeProvider,
|
|
createTheme,
|
|
useMediaQuery,
|
|
Button,
|
|
List,
|
|
ListItem,
|
|
ListItemText,
|
|
IconButton,
|
|
styled,
|
|
CircularProgress,
|
|
Divider,
|
|
Menu,
|
|
MenuItem,
|
|
Box,
|
|
Typography,
|
|
LinearProgress,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
Chip,
|
|
Tooltip,
|
|
Alert
|
|
} from '@mui/material';
|
|
import UploadIcon from '@mui/icons-material/Upload';
|
|
import FolderIcon from '@mui/icons-material/Folder';
|
|
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import RefreshIcon from '@mui/icons-material/Refresh';
|
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
import ImageIcon from '@mui/icons-material/Image';
|
|
import DescriptionIcon from '@mui/icons-material/Description';
|
|
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
|
|
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
|
|
import { useTLDraw } from '../../../../../contexts/TLDrawContext';
|
|
import { supabase } from '../../../../../supabaseClient';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
pickDirectory,
|
|
processDirectoryFiles,
|
|
calculateDirectoryStats,
|
|
createDirectoryTree,
|
|
formatFileSize,
|
|
isDirectoryPickerSupported,
|
|
FileWithPath
|
|
} from '../../../../folderPicker';
|
|
import pLimit from 'p-limit';
|
|
|
|
const Container = styled('div')(() => ({
|
|
padding: '8px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '8px',
|
|
height: '100%'
|
|
}));
|
|
|
|
const Row = styled('div')(() => ({
|
|
display: 'flex',
|
|
gap: '8px',
|
|
alignItems: 'center'
|
|
}));
|
|
|
|
type Cabinet = { id: string; name: string };
|
|
type FileRow = { id: string; name: string; mime_type?: string; is_directory?: boolean; size_bytes?: number };
|
|
type Artefact = { id: string; type: string; rel_path: string; created_at: string };
|
|
|
|
interface UploadProgress {
|
|
path: string;
|
|
size: number;
|
|
status: 'queued' | 'uploading' | 'done' | 'error';
|
|
progress: number;
|
|
error?: string;
|
|
}
|
|
|
|
export const CCFilesPanelEnhanced: React.FC = () => {
|
|
const { tldrawPreferences, authToken } = useTLDraw() as { tldrawPreferences?: { colorScheme?: 'light' | 'dark' | 'system' }, authToken?: string };
|
|
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
|
const [cabinets, setCabinets] = useState<Cabinet[]>([]);
|
|
const [selectedCabinet, setSelectedCabinet] = useState<string>('');
|
|
const [files, setFiles] = useState<FileRow[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [menuAnchor, setMenuAnchor] = useState<null | { el: HTMLElement; fileId: string }>(null);
|
|
const [artefacts, setArtefacts] = useState<Artefact[]>([]);
|
|
|
|
// Directory upload states
|
|
const [uploadProgress, setUploadProgress] = useState<UploadProgress[]>([]);
|
|
const [showUploadDialog, setShowUploadDialog] = useState(false);
|
|
const [isUploading, setIsUploading] = useState(false);
|
|
const [selectedFiles, setSelectedFiles] = useState<FileWithPath[]>([]);
|
|
const [directoryStats, setDirectoryStats] = useState<any>(null);
|
|
|
|
const navigate = useNavigate();
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const dirInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const theme = useMemo(() => {
|
|
const mode = (tldrawPreferences?.colorScheme === 'system')
|
|
? (prefersDarkMode ? 'dark' : 'light')
|
|
: (tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light');
|
|
return createTheme({ palette: { mode, divider: 'var(--color-divider)' } });
|
|
}, [tldrawPreferences?.colorScheme, prefersDarkMode]);
|
|
|
|
type RequestInitLike = { method?: string; body?: FormData | string | Blob | null; headers?: Record<string, string> } | undefined;
|
|
type HeadersInitLike = Record<string, string>;
|
|
|
|
const API_BASE: string = (import.meta as unknown as { env?: { VITE_API_BASE?: string } })?.env?.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api');
|
|
|
|
const apiFetch = async (url: string, init?: RequestInitLike) => {
|
|
const headers: HeadersInitLike = {
|
|
'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || authToken || ''}`,
|
|
...(init?.headers || {})
|
|
};
|
|
const fullUrl = url.startsWith('http') ? url : `${API_BASE}${url}`;
|
|
const res = await fetch(fullUrl, { ...(init || {}), headers });
|
|
if (!res.ok) throw new Error(await res.text());
|
|
return res.json();
|
|
};
|
|
|
|
const loadCabinets = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await apiFetch('/database/cabinets');
|
|
const all = [...(data.owned || []), ...(data.shared || [])];
|
|
setCabinets(all);
|
|
if (all.length && !selectedCabinet) setSelectedCabinet(all[0].id);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadFiles = async (cabinetId: string) => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await apiFetch(`/simple-upload/files?cabinet_id=${encodeURIComponent(cabinetId)}`);
|
|
setFiles(data.files || []);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { loadCabinets(); }, []);
|
|
useEffect(() => { if (selectedCabinet) loadFiles(selectedCabinet); }, [selectedCabinet]);
|
|
|
|
const handleSingleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (!e.target.files || !selectedCabinet) return;
|
|
const file = e.target.files[0];
|
|
const form = new FormData();
|
|
form.append('cabinet_id', selectedCabinet);
|
|
form.append('path', file.name);
|
|
form.append('scope', 'teacher');
|
|
form.append('file', file);
|
|
|
|
try {
|
|
await apiFetch('/simple-upload/files/upload', { method: 'POST', body: form });
|
|
await loadFiles(selectedCabinet);
|
|
(e.target as HTMLInputElement).value = '';
|
|
} catch (error) {
|
|
console.error('Upload failed:', error);
|
|
alert(`Upload failed: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleDirectoryPicker = async () => {
|
|
try {
|
|
const files = await pickDirectory();
|
|
prepareDirectoryUpload(files);
|
|
} catch (error: any) {
|
|
if (error.message === 'fallback-input') {
|
|
// Use fallback input
|
|
dirInputRef.current?.click();
|
|
} else if (error.message === 'user-cancelled') {
|
|
// User cancelled, do nothing
|
|
} else {
|
|
console.error('Directory picker error:', error);
|
|
alert('Failed to pick directory. Please try the fallback method.');
|
|
dirInputRef.current?.click();
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleFallbackDirectorySelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (!e.target.files) return;
|
|
const files = processDirectoryFiles(e.target.files);
|
|
prepareDirectoryUpload(files);
|
|
e.target.value = ''; // Reset input
|
|
};
|
|
|
|
const prepareDirectoryUpload = (files: FileWithPath[]) => {
|
|
if (files.length === 0) {
|
|
alert('No files selected');
|
|
return;
|
|
}
|
|
|
|
setSelectedFiles(files);
|
|
setDirectoryStats(calculateDirectoryStats(files));
|
|
|
|
// Initialize upload progress
|
|
const progress: UploadProgress[] = files.map(file => ({
|
|
path: file.relativePath,
|
|
size: file.size,
|
|
status: 'queued',
|
|
progress: 0
|
|
}));
|
|
setUploadProgress(progress);
|
|
setShowUploadDialog(true);
|
|
};
|
|
|
|
const startDirectoryUpload = async () => {
|
|
if (!selectedCabinet || selectedFiles.length === 0) return;
|
|
|
|
setIsUploading(true);
|
|
|
|
try {
|
|
// Get directory name from first file's path
|
|
const firstFilePath = selectedFiles[0].relativePath;
|
|
const directoryName = firstFilePath.split('/')[0] || 'uploaded-folder';
|
|
|
|
// Prepare form data
|
|
const formData = new FormData();
|
|
formData.append('cabinet_id', selectedCabinet);
|
|
formData.append('scope', 'teacher');
|
|
formData.append('directory_name', directoryName);
|
|
|
|
// Add all files
|
|
selectedFiles.forEach(file => {
|
|
formData.append('files', file);
|
|
});
|
|
|
|
// Add relative paths as JSON
|
|
const relativePaths = selectedFiles.map(f => f.relativePath);
|
|
formData.append('file_paths', JSON.stringify(relativePaths));
|
|
|
|
// Upload directory
|
|
const result = await apiFetch('/simple-upload/files/upload-directory', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
console.log('Directory upload result:', result);
|
|
|
|
// Update progress to completed
|
|
setUploadProgress(prev => prev.map(item => ({
|
|
...item,
|
|
status: 'done',
|
|
progress: 100
|
|
})));
|
|
|
|
// Refresh file list
|
|
await loadFiles(selectedCabinet);
|
|
|
|
// Close dialog after a short delay
|
|
setTimeout(() => {
|
|
setShowUploadDialog(false);
|
|
setIsUploading(false);
|
|
setSelectedFiles([]);
|
|
setUploadProgress([]);
|
|
}, 2000);
|
|
|
|
} catch (error) {
|
|
console.error('Directory upload failed:', error);
|
|
alert(`Directory upload failed: ${error}`);
|
|
|
|
// Mark all as error
|
|
setUploadProgress(prev => prev.map(item => ({
|
|
...item,
|
|
status: 'error',
|
|
error: String(error)
|
|
})));
|
|
|
|
setIsUploading(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (fileId: string) => {
|
|
try {
|
|
await apiFetch(`/simple-upload/files/${fileId}`, { method: 'DELETE' });
|
|
await loadFiles(selectedCabinet);
|
|
} catch (error) {
|
|
console.error('Delete failed:', error);
|
|
alert(`Delete failed: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleGenerateInitial = async (fileId: string) => {
|
|
// This would trigger manual processing if we implement it later
|
|
alert('Manual processing not yet implemented');
|
|
};
|
|
|
|
const openMenu = (el: HTMLElement, fileId: string) => setMenuAnchor({ el, fileId });
|
|
const closeMenu = () => setMenuAnchor(null);
|
|
|
|
const goToAIContent = () => {
|
|
if (!menuAnchor) return;
|
|
const fileId = menuAnchor.fileId;
|
|
closeMenu();
|
|
navigate(`/doc-intelligence/${encodeURIComponent(fileId)}`);
|
|
};
|
|
|
|
const iconForMime = (mime?: string, isDirectory?: boolean) => {
|
|
if (isDirectory) return <FolderIcon />;
|
|
if (!mime) return <InsertDriveFileIcon />;
|
|
if (mime.startsWith('image/')) return <ImageIcon />;
|
|
if (mime === 'application/pdf' || mime.startsWith('application/')) return <DescriptionIcon />;
|
|
return <InsertDriveFileIcon />;
|
|
};
|
|
|
|
const formatFileInfo = (file: FileRow) => {
|
|
if (file.is_directory) {
|
|
return `Directory • ${file.size_bytes ? formatFileSize(file.size_bytes) : 'Unknown size'}`;
|
|
}
|
|
return file.size_bytes ? formatFileSize(file.size_bytes) : 'Unknown size';
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<Container>
|
|
<Row>
|
|
<Button size="small" startIcon={<RefreshIcon/>} onClick={loadCabinets}>Refresh</Button>
|
|
</Row>
|
|
|
|
<List dense sx={{ border: '1px solid var(--color-divider)', borderRadius: '4px', overflow: 'auto', maxHeight: 140 }}>
|
|
{cabinets.map(c => (
|
|
<ListItem key={c.id} selected={c.id === selectedCabinet} onClick={() => setSelectedCabinet(c.id)} sx={{ cursor: 'pointer' }}>
|
|
<FolderIcon sx={{ mr: 1 }}/>
|
|
<ListItemText primary={c.name} secondary={c.id} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
|
|
<Divider/>
|
|
|
|
<Row>
|
|
{/* Single file upload */}
|
|
<input id="cc-file-input" type="file" style={{ display: 'none' }} onChange={handleSingleUpload}/>
|
|
<label htmlFor="cc-file-input">
|
|
<Button size="small" variant="outlined" startIcon={<UploadIcon/>} component="span" disabled={!selectedCabinet}>
|
|
Upload File
|
|
</Button>
|
|
</label>
|
|
|
|
{/* Directory upload */}
|
|
<input
|
|
ref={dirInputRef}
|
|
type="file"
|
|
style={{ display: 'none' }}
|
|
webkitdirectory=""
|
|
multiple
|
|
onChange={handleFallbackDirectorySelect}
|
|
/>
|
|
|
|
<Tooltip title={isDirectoryPickerSupported() ? "Uses modern directory picker" : "Uses fallback method"}>
|
|
<Button
|
|
size="small"
|
|
variant="outlined"
|
|
startIcon={<FolderOpenIcon/>}
|
|
onClick={handleDirectoryPicker}
|
|
disabled={!selectedCabinet}
|
|
>
|
|
Upload Folder
|
|
</Button>
|
|
</Tooltip>
|
|
</Row>
|
|
|
|
{loading ? <CircularProgress size={20}/> : (
|
|
<List dense sx={{ border: '1px solid var(--color-divider)', borderRadius: '4px', overflow: 'auto', flex: 1 }}>
|
|
{files.map(f => (
|
|
<ListItem key={f.id}
|
|
secondaryAction={
|
|
<>
|
|
<IconButton size="small" onClick={(e) => openMenu(e.currentTarget, f.id)} title="File actions">
|
|
<MoreVertIcon/>
|
|
</IconButton>
|
|
<IconButton edge="end" size="small" onClick={() => handleDelete(f.id)} title="Delete file">
|
|
<DeleteIcon/>
|
|
</IconButton>
|
|
</>
|
|
}
|
|
>
|
|
{iconForMime(f.mime_type, f.is_directory)}
|
|
<ListItemText
|
|
sx={{ ml: 1 }}
|
|
primary={f.name}
|
|
secondary={formatFileInfo(f)}
|
|
/>
|
|
{f.is_directory && <Chip label="Directory" size="small" />}
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
)}
|
|
|
|
<Menu
|
|
anchorEl={menuAnchor?.el ?? null}
|
|
open={!!menuAnchor}
|
|
onClose={closeMenu}
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
|
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
>
|
|
<MenuItem onClick={() => { if (menuAnchor) { handleGenerateInitial(menuAnchor.fileId); closeMenu(); } }}>
|
|
Process manually
|
|
</MenuItem>
|
|
<MenuItem onClick={goToAIContent}>Open AI content</MenuItem>
|
|
</Menu>
|
|
|
|
{/* Directory Upload Dialog */}
|
|
<Dialog open={showUploadDialog} onClose={() => !isUploading && setShowUploadDialog(false)} maxWidth="md" fullWidth>
|
|
<DialogTitle>
|
|
<Box display="flex" alignItems="center" gap={1}>
|
|
<CloudUploadIcon />
|
|
Directory Upload
|
|
{isUploading && <CircularProgress size={20} />}
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
<DialogContent>
|
|
{directoryStats && (
|
|
<Box sx={{ mb: 2 }}>
|
|
<Alert severity="info">
|
|
<Typography variant="body2">
|
|
<strong>{directoryStats.fileCount} files</strong> in{' '}
|
|
<strong>{directoryStats.directoryCount} folders</strong><br/>
|
|
Total size: <strong>{directoryStats.formattedSize}</strong>
|
|
</Typography>
|
|
</Alert>
|
|
</Box>
|
|
)}
|
|
|
|
<Box sx={{ mb: 2 }}>
|
|
<Typography variant="h6" gutterBottom>
|
|
Upload Progress
|
|
</Typography>
|
|
|
|
{uploadProgress.length > 0 && (
|
|
<>
|
|
<Box sx={{ mb: 1 }}>
|
|
<Typography variant="body2" color="textSecondary">
|
|
{uploadProgress.filter(p => p.status === 'done').length} / {uploadProgress.length} files completed
|
|
</Typography>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={(uploadProgress.filter(p => p.status === 'done').length / uploadProgress.length) * 100}
|
|
sx={{ mt: 1 }}
|
|
/>
|
|
</Box>
|
|
|
|
<Box sx={{ maxHeight: 300, overflow: 'auto', border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
|
|
<table style={{ width: '100%', fontSize: '0.875rem' }}>
|
|
<thead>
|
|
<tr style={{ borderBottom: '1px solid', backgroundColor: 'rgba(0,0,0,0.05)' }}>
|
|
<th style={{ textAlign: 'left', padding: '8px' }}>Path</th>
|
|
<th style={{ textAlign: 'right', padding: '8px' }}>Size</th>
|
|
<th style={{ textAlign: 'center', padding: '8px' }}>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{uploadProgress.map((item, i) => (
|
|
<tr key={i} style={{ borderBottom: '1px solid rgba(0,0,0,0.1)' }}>
|
|
<td style={{ padding: '4px 8px', maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
{item.path}
|
|
</td>
|
|
<td style={{ padding: '4px 8px', textAlign: 'right' }}>
|
|
{formatFileSize(item.size)}
|
|
</td>
|
|
<td style={{ padding: '4px 8px', textAlign: 'center' }}>
|
|
<Chip
|
|
label={item.status}
|
|
size="small"
|
|
color={
|
|
item.status === 'done' ? 'success' :
|
|
item.status === 'error' ? 'error' :
|
|
item.status === 'uploading' ? 'primary' : 'default'
|
|
}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</Box>
|
|
</>
|
|
)}
|
|
</Box>
|
|
</DialogContent>
|
|
|
|
<DialogActions>
|
|
<Button onClick={() => setShowUploadDialog(false)} disabled={isUploading}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={startDirectoryUpload}
|
|
variant="contained"
|
|
disabled={isUploading || selectedFiles.length === 0}
|
|
startIcon={isUploading ? <CircularProgress size={16} /> : <CloudUploadIcon />}
|
|
>
|
|
{isUploading ? 'Uploading...' : 'Start Upload'}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</Container>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default CCFilesPanelEnhanced;
|