Spaces:
Sleeping
Sleeping
File size: 3,782 Bytes
f871fed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
# AddSourceDialog Component
The `AddSourceDialog` component provides a comprehensive interface for adding new sources to notebooks with async processing support.
## Features
- **Multi-type source support**: Links, file uploads, and text content
- **Multi-notebook selection**: Add sources to multiple notebooks simultaneously
- **Transformations**: Apply transformations during source processing
- **Async processing**: Background processing with status monitoring
- **Form validation**: Comprehensive validation with Zod and React Hook Form
- **File upload support**: Handle file uploads with progress indicators
- **Responsive design**: Works well on desktop and mobile
## Usage
### Basic Usage
```tsx
import { AddSourceDialog } from '@/components/sources'
function MyComponent() {
const [dialogOpen, setDialogOpen] = useState(false)
return (
<>
<button onClick={() => setDialogOpen(true)}>
Add Source
</button>
<AddSourceDialog
open={dialogOpen}
onOpenChange={setDialogOpen}
/>
</>
)
}
```
### With Default Notebook
```tsx
<AddSourceDialog
open={dialogOpen}
onOpenChange={setDialogOpen}
defaultNotebookId="notebook:123"
/>
```
### Using the Button Component
```tsx
import { AddSourceButton } from '@/components/sources'
function MyComponent() {
return (
<AddSourceButton
defaultNotebookId="notebook:123"
variant="outline"
size="sm"
/>
)
}
```
## Props
### AddSourceDialog
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | `boolean` | - | Controls dialog visibility |
| `onOpenChange` | `(open: boolean) => void` | - | Called when dialog should open/close |
| `defaultNotebookId` | `string` | - | Pre-select a notebook |
### AddSourceButton
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `defaultNotebookId` | `string` | - | Pre-select a notebook in dialog |
| `variant` | `'default' \| 'outline' \| 'ghost'` | `'default'` | Button styling variant |
| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` | Button size |
| `className` | `string` | - | Additional CSS classes |
## Source Types
### Link Sources
- Requires a valid URL
- Automatically extracts content from web pages
- Supports most web content formats
### File Upload Sources
- Supports: PDF, DOC, DOCX, TXT, MD, EPUB
- Handles large files with async processing
- Shows upload progress
### Text Sources
- Direct text input
- Useful for pasting content
- Supports markdown formatting
## Processing Options
### Embedding
- **Enabled by default**: Makes sources searchable via vector search
- **Disable for**: Sources you don't want in search results
### Async Processing (Recommended)
- **Default**: Background processing for better UX
- **Benefits**: Non-blocking, handles large files, progress monitoring
- **Disable for**: Small sources that need immediate processing
## Integration with Hooks
The component integrates with several custom hooks:
- `useNotebooks()` - Fetches available notebooks
- `useTransformations()` - Fetches available transformations
- `useCreateSource()` - Handles source creation
- `useSourceStatus()` - Monitors processing status
## Error Handling
The component includes comprehensive error handling:
- Form validation errors are shown inline
- Network errors show toast notifications
- File upload errors are handled gracefully
- Processing errors are displayed with retry options
## Accessibility
- Full keyboard navigation support
- Screen reader friendly
- ARIA labels and descriptions
- Focus management
## Dependencies
- React Hook Form for form handling
- Zod for validation
- TanStack Query for data fetching
- shadcn/ui for components
- Lucide React for icons |