You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
282 lines
10 KiB
282 lines
10 KiB
'use client';
|
|
|
|
import { useState, useRef } from 'react';
|
|
import { Send, Upload, Check, AlertCircle, FileText, Plus } from 'lucide-react';
|
|
|
|
const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
|
|
|
interface LogResponse {
|
|
success: boolean;
|
|
file_path: string;
|
|
timestamp: string;
|
|
message: string;
|
|
}
|
|
|
|
interface UploadResponse {
|
|
success: boolean;
|
|
file_path: string;
|
|
filename: string;
|
|
size_bytes: number;
|
|
message: string;
|
|
}
|
|
|
|
export default function CapturePage() {
|
|
// Log state
|
|
const [logContent, setLogContent] = useState('');
|
|
const [logTitle, setLogTitle] = useState('');
|
|
const [logTags, setLogTags] = useState('');
|
|
const [logStatus, setLogStatus] = useState<'idle' | 'sending' | 'success' | 'error'>('idle');
|
|
const [logMessage, setLogMessage] = useState('');
|
|
|
|
// Upload state
|
|
const [uploadStatus, setUploadStatus] = useState<'idle' | 'uploading' | 'success' | 'error'>('idle');
|
|
const [uploadMessage, setUploadMessage] = useState('');
|
|
const [uploadFolder, setUploadFolder] = useState('documents');
|
|
const [uploadTags, setUploadTags] = useState('');
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleLogSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!logContent.trim()) return;
|
|
|
|
setLogStatus('sending');
|
|
setLogMessage('');
|
|
|
|
try {
|
|
const tags = logTags.split(',').map(t => t.trim()).filter(Boolean);
|
|
|
|
const res = await fetch(`${API_BASE}/api/v1/capture/log`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
content: logContent,
|
|
title: logTitle || undefined,
|
|
tags: tags.length > 0 ? tags : undefined,
|
|
}),
|
|
});
|
|
|
|
if (!res.ok) throw new Error(`Failed: ${res.status}`);
|
|
|
|
const data: LogResponse = await res.json();
|
|
setLogStatus('success');
|
|
setLogMessage(data.message);
|
|
setLogContent('');
|
|
setLogTitle('');
|
|
setLogTags('');
|
|
|
|
// Reset status after 3s
|
|
setTimeout(() => setLogStatus('idle'), 3000);
|
|
} catch (err) {
|
|
setLogStatus('error');
|
|
setLogMessage(err instanceof Error ? err.message : 'Failed to save log');
|
|
}
|
|
};
|
|
|
|
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
setUploadStatus('uploading');
|
|
setUploadMessage('');
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
formData.append('folder', uploadFolder);
|
|
if (uploadTags) {
|
|
formData.append('tags', uploadTags);
|
|
}
|
|
|
|
const res = await fetch(`${API_BASE}/api/v1/capture/upload`, {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const errData = await res.json().catch(() => ({}));
|
|
throw new Error(errData.detail || `Upload failed: ${res.status}`);
|
|
}
|
|
|
|
const data: UploadResponse = await res.json();
|
|
setUploadStatus('success');
|
|
setUploadMessage(`${data.filename} uploaded (${(data.size_bytes / 1024).toFixed(1)} KB)`);
|
|
|
|
// Reset
|
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
|
setTimeout(() => setUploadStatus('idle'), 3000);
|
|
} catch (err) {
|
|
setUploadStatus('error');
|
|
setUploadMessage(err instanceof Error ? err.message : 'Upload failed');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-8 max-w-4xl mx-auto">
|
|
<h1 className="text-2xl font-bold text-slate-900 mb-2">Quick Capture</h1>
|
|
<p className="text-slate-500 mb-8">
|
|
Add notes to your Second Brain or upload documents for indexing.
|
|
</p>
|
|
|
|
{/* Quick Log Section */}
|
|
<div className="bg-slate-800 rounded-xl p-6 mb-8">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<FileText size={20} className="text-brain-400" />
|
|
<h2 className="text-lg font-semibold text-white">Quick Log</h2>
|
|
</div>
|
|
|
|
<form onSubmit={handleLogSubmit} className="space-y-4">
|
|
<div className="flex gap-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Title (optional)"
|
|
value={logTitle}
|
|
onChange={(e) => setLogTitle(e.target.value)}
|
|
className="flex-1 bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-white placeholder-slate-400 focus:outline-none focus:border-brain-500"
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder="Tags (comma-separated)"
|
|
value={logTags}
|
|
onChange={(e) => setLogTags(e.target.value)}
|
|
className="w-64 bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-white placeholder-slate-400 focus:outline-none focus:border-brain-500"
|
|
/>
|
|
</div>
|
|
|
|
<textarea
|
|
placeholder="What's on your mind? Write your note here..."
|
|
value={logContent}
|
|
onChange={(e) => setLogContent(e.target.value)}
|
|
rows={4}
|
|
className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-slate-400 focus:outline-none focus:border-brain-500 resize-none"
|
|
/>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2 text-sm">
|
|
{logStatus === 'success' && (
|
|
<>
|
|
<Check size={16} className="text-green-400" />
|
|
<span className="text-green-400">{logMessage}</span>
|
|
</>
|
|
)}
|
|
{logStatus === 'error' && (
|
|
<>
|
|
<AlertCircle size={16} className="text-red-400" />
|
|
<span className="text-red-400">{logMessage}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={!logContent.trim() || logStatus === 'sending'}
|
|
className="flex items-center gap-2 bg-brain-600 hover:bg-brain-500 disabled:bg-slate-600 disabled:cursor-not-allowed text-white px-5 py-2 rounded-lg font-medium transition-colors"
|
|
>
|
|
{logStatus === 'sending' ? (
|
|
<>Saving...</>
|
|
) : (
|
|
<>
|
|
<Send size={16} />
|
|
Save Log
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Upload Section */}
|
|
<div className="bg-slate-800 rounded-xl p-6">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Upload size={20} className="text-brain-400" />
|
|
<h2 className="text-lg font-semibold text-white">Upload Document</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex gap-4">
|
|
<div className="flex-1">
|
|
<label className="block text-sm text-slate-400 mb-1">Folder</label>
|
|
<select
|
|
value={uploadFolder}
|
|
onChange={(e) => setUploadFolder(e.target.value)}
|
|
className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-brain-500"
|
|
>
|
|
<option value="documents">documents</option>
|
|
<option value="uploads">uploads</option>
|
|
<option value="notes">notes</option>
|
|
<option value="research">research</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex-1">
|
|
<label className="block text-sm text-slate-400 mb-1">Tags (for .md files)</label>
|
|
<input
|
|
type="text"
|
|
placeholder="e.g. project, research"
|
|
value={uploadTags}
|
|
onChange={(e) => setUploadTags(e.target.value)}
|
|
className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-white placeholder-slate-400 focus:outline-none focus:border-brain-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-2 border-dashed border-slate-600 rounded-xl p-8 text-center hover:border-brain-500 transition-colors">
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".md,.txt,.pdf,.json,.yaml,.yml,.csv"
|
|
onChange={handleFileUpload}
|
|
className="hidden"
|
|
id="file-upload"
|
|
/>
|
|
<label
|
|
htmlFor="file-upload"
|
|
className="cursor-pointer flex flex-col items-center gap-3"
|
|
>
|
|
<div className="w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center">
|
|
<Plus size={24} className="text-slate-400" />
|
|
</div>
|
|
<div>
|
|
<span className="text-brain-400 font-medium">Click to upload</span>
|
|
<span className="text-slate-400"> or drag and drop</span>
|
|
</div>
|
|
<span className="text-slate-500 text-sm">
|
|
Supports: .md, .txt, .pdf, .json, .yaml, .csv
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
{uploadStatus !== 'idle' && (
|
|
<div className="flex items-center gap-2 text-sm">
|
|
{uploadStatus === 'uploading' && (
|
|
<span className="text-slate-400">Uploading...</span>
|
|
)}
|
|
{uploadStatus === 'success' && (
|
|
<>
|
|
<Check size={16} className="text-green-400" />
|
|
<span className="text-green-400">{uploadMessage}</span>
|
|
</>
|
|
)}
|
|
{uploadStatus === 'error' && (
|
|
<>
|
|
<AlertCircle size={16} className="text-red-400" />
|
|
<span className="text-red-400">{uploadMessage}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tips */}
|
|
<div className="mt-8 p-4 bg-slate-800/50 rounded-lg border border-slate-700">
|
|
<h3 className="text-sm font-medium text-slate-300 mb-2">💡 Tips</h3>
|
|
<ul className="text-sm text-slate-400 space-y-1">
|
|
<li>• Quick logs are saved to daily files (logs/YYYY-MM-DD.md)</li>
|
|
<li>• Uploaded documents will be indexed automatically</li>
|
|
<li>• Use tags to organize and find content faster</li>
|
|
<li>• Markdown files support frontmatter for metadata</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|