mirror of https://github.com/kortix-ai/suna.git
90 lines
2.5 KiB
Markdown
90 lines
2.5 KiB
Markdown
|
# File Browser System
|
||
|
|
|
||
|
|
A minimal file browser modal for React Native that integrates with your sandbox file system using Zustand and React Query.
|
||
|
|
|
||
|
|
## Features
|
||
|
|
|
||
|
|
- **Directory Navigation**: Browse folders and files in your sandbox workspace
|
||
|
|
- **File Viewing**: Preview text files and images inline
|
||
|
|
- **File Downloads**: Download files to device (basic functionality)
|
||
|
|
- **Breadcrumb Navigation**: Easy navigation with breadcrumbs
|
||
|
|
- **Cache Integration**: Uses React Query for efficient caching
|
||
|
|
- **Theme Support**: Follows your app's theme system
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
### Opening the File Browser
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { useFileBrowser } from '@/hooks/useFileBrowser';
|
||
|
|
|
||
|
|
const MyComponent = () => {
|
||
|
|
const { openFileBrowser } = useFileBrowser();
|
||
|
|
|
||
|
|
const handleOpenFiles = () => {
|
||
|
|
// Open file browser for a sandbox
|
||
|
|
openFileBrowser('sandbox-id-123');
|
||
|
|
|
||
|
|
// Or open to a specific file/path
|
||
|
|
openFileBrowser('sandbox-id-123', '/workspace/src/main.py');
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TouchableOpacity onPress={handleOpenFiles}>
|
||
|
|
<Text>Browse Files</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
### Integration with Existing File System
|
||
|
|
|
||
|
|
The file browser is already integrated with the MessageThread component, so clicking on file attachments will open the browser.
|
||
|
|
|
||
|
|
## Components
|
||
|
|
|
||
|
|
### FileBrowserModal
|
||
|
|
Main modal component that handles the entire file browsing experience.
|
||
|
|
|
||
|
|
### FileItem
|
||
|
|
Individual file/folder list item component.
|
||
|
|
|
||
|
|
### FileViewer
|
||
|
|
Component for displaying file content (text and images).
|
||
|
|
|
||
|
|
## API Integration
|
||
|
|
|
||
|
|
The system uses the following API endpoints:
|
||
|
|
- `GET /sandboxes/{id}/files?path={path}` - List directory contents
|
||
|
|
- `GET /sandboxes/{id}/files/content?path={path}` - Get file content
|
||
|
|
|
||
|
|
## Store Management
|
||
|
|
|
||
|
|
Uses Zustand for state management with the following key state:
|
||
|
|
- `isVisible`: Modal visibility
|
||
|
|
- `sandboxId`: Current sandbox ID
|
||
|
|
- `currentPath`: Current directory path
|
||
|
|
- `selectedFile`: Currently selected file
|
||
|
|
|
||
|
|
## Caching Strategy
|
||
|
|
|
||
|
|
- Directory listings cached for 30 seconds
|
||
|
|
- File content cached for 2 minutes
|
||
|
|
- Images cached as blobs for offline viewing
|
||
|
|
- Automatic cache invalidation on refresh
|
||
|
|
|
||
|
|
## Minimal Dependencies
|
||
|
|
|
||
|
|
The system uses only packages already in your project:
|
||
|
|
- React Query for data fetching and caching
|
||
|
|
- Zustand for state management
|
||
|
|
- expo-image for image display
|
||
|
|
- lucide-react-native for icons
|
||
|
|
|
||
|
|
## Future Enhancements
|
||
|
|
|
||
|
|
- File upload functionality
|
||
|
|
- File sharing with expo-sharing
|
||
|
|
- File system operations (rename, delete)
|
||
|
|
- Better download handling with expo-file-system
|
||
|
|
- Bulk operations
|