feat: implement admin knowledge extraction system with document upload and AI pipeline integration

2026-05-10 11:18:48 +02:00
parent f8d0c68f84
commit 260644b41a
7 changed files with 625 additions and 5 deletions
--- a/src/components/admin/UploadZone.jsx
+++ b/src/components/admin/UploadZone.jsx
@@ -0,0 +1,137 @@
+import React, { useState, useRef } from 'react';
+import { UploadCloud, Link as LinkIcon, AlertCircle, CheckCircle } from 'lucide-react';
+import { processSourceText } from '../../lib/extractionPipeline';
+import Card from '../ui/Card';
+import Button from '../ui/Button';
+import Input from '../ui/Input';
+
+const UploadZone = ({ onUploadComplete }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [url, setUrl] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [status, setStatus] = useState(null); // { type: 'error' | 'success', msg: string }
+  
+  const fileInputRef = useRef(null);
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const processFile = async (file) => {
+    setIsProcessing(true);
+    setStatus(null);
+    try {
+      const text = await file.text();
+      await processSourceText(text, file.name);
+      setStatus({ type: 'success', msg: `Succesvol verwerkt: ${file.name}` });
+      if (onUploadComplete) onUploadComplete();
+    } catch (error) {
+      setStatus({ type: 'error', msg: `Fout bij verwerken: ${error.message}` });
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const file = e.dataTransfer.files[0];
+      if (file.type === 'text/plain' || file.name.endsWith('.md')) {
+        processFile(file);
+      } else {
+        setStatus({ type: 'error', msg: 'Alleen .txt en .md bestanden worden momenteel ondersteund.' });
+      }
+    }
+  };
+
+  const handleFileSelect = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      processFile(e.target.files[0]);
+    }
+  };
+
+  const handleUrlSubmit = async (e) => {
+    e.preventDefault();
+    if (!url) return;
+    
+    setIsProcessing(true);
+    setStatus(null);
+    try {
+      // In a real scenario, this would call a backend proxy to bypass CORS.
+      // For this prototype, we'll simulate fetching or only support text URLs.
+      setStatus({ type: 'error', msg: 'URL import is experimenteel en momenteel uitgeschakeld ivm CORS restricties in browser.' });
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card 
+        className={`border-2 border-dashed transition-colors flex flex-col items-center justify-center py-12 ${
+          isDragging ? 'border-teal bg-teal/5' : 'border-bg-warm bg-bg-warm/20'
+        } ${isProcessing ? 'opacity-50 pointer-events-none' : ''}`}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <UploadCloud size={48} className="text-teal/40 mb-4" />
+        <p className="font-medium text-lg">Sleep bestanden hierheen</p>
+        <p className="text-sm text-fg-muted mb-4">Ondersteunt .txt en .md (Max 5MB)</p>
+        <Button variant="outline" type="button" disabled={isProcessing}>
+          {isProcessing ? 'Bezig met AI extractie...' : 'Bladeren op apparaat'}
+        </Button>
+        <input 
+          type="file" 
+          ref={fileInputRef} 
+          onChange={handleFileSelect} 
+          accept=".txt,.md" 
+          className="hidden" 
+        />
+      </Card>
+
+      <div className="flex items-center gap-4">
+        <div className="flex-1 border-t border-bg-warm"></div>
+        <span className="text-sm text-fg-muted uppercase tracking-wider">OF</span>
+        <div className="flex-1 border-t border-bg-warm"></div>
+      </div>
+
+      <form onSubmit={handleUrlSubmit} className="flex gap-2 items-end">
+        <div className="flex-1">
+          <Input 
+            label="Importeer van URL"
+            placeholder="https://wiki.respellion.nl/artikel"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            disabled={isProcessing}
+          />
+        </div>
+        <Button type="submit" disabled={isProcessing || !url}>
+          <LinkIcon size={18} className="mr-2" /> Import
+        </Button>
+      </form>
+
+      {status && (
+        <div className={`p-4 rounded-[var(--r-sm)] flex items-start gap-3 ${
+          status.type === 'error' ? 'bg-red-50 text-red-900 border border-red-200' : 'bg-teal-50 text-teal-900 border border-teal-200'
+        }`}>
+          {status.type === 'error' ? <AlertCircle className="text-red-500 flex-shrink-0" /> : <CheckCircle className="text-teal-600 flex-shrink-0" />}
+          <div>
+            <p className="font-medium">{status.type === 'error' ? 'Fout' : 'Succes'}</p>
+            <p className="text-sm">{status.msg}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UploadZone;