Benjamin Admin
0d0e705117
New 3-tab structure: Website-Scan, Compliance-Check, Banner-Check. Compliance-Check Tab (replaces Dokumenten-Pruefung + Impressum-Check): - 8 document rows: DSI, Impressum, Social Media, Cookie, AGB, Nutzungsbedingungen, Widerruf, DSB-Kontakt - Each row: URL input + "Text laden" + file upload + manual text - "Text laden" extracts via consent-tester, shows in editable textarea - User verifies/corrects text before checking - Empty fields = "not present" → own finding Business Profiler (business_profiler.py): - Detects B2B/B2C/B2G from all documents together - Recognizes regulated professions, online shops, editorial content - Context-aware: INFO checks become PASS/FAIL based on profile Backend: /compliance-check + /extract-text endpoints Frontend: ComplianceCheckTab.tsx + DocumentRow.tsx API proxies: compliance-check/route.ts + extract-text/route.ts Also: Impressum regex fixes (Telefon, AG, Geschaeftsfuehrung) and INFO severity for context-dependent checks. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
353 lines
13 KiB
TypeScript
353 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useCallback } from 'react'
|
|
import { ChecklistView } from './ChecklistView'
|
|
import { DocumentRow } from './DocumentRow'
|
|
|
|
const DOCUMENT_TYPES = [
|
|
{ id: 'dse', label: 'DSI (Datenschutzinformation)', required: true },
|
|
{ id: 'impressum', label: 'Impressum', required: true },
|
|
{ id: 'social_media', label: 'Social Media DSE', required: false },
|
|
{ id: 'cookie', label: 'Cookie-Richtlinie', required: false },
|
|
{ id: 'agb', label: 'AGB', required: false },
|
|
{ id: 'nutzungsbedingungen', label: 'Nutzungsbedingungen', required: false },
|
|
{ id: 'widerruf', label: 'Widerrufsbelehrung', required: false },
|
|
{ id: 'dsb', label: 'DSB-Kontakt', required: false },
|
|
] as const
|
|
|
|
type DocTypeId = typeof DOCUMENT_TYPES[number]['id']
|
|
|
|
interface DocState {
|
|
url: string
|
|
text: string
|
|
loading: boolean
|
|
error: string | null
|
|
}
|
|
|
|
type DocsState = Record<DocTypeId, DocState>
|
|
|
|
const STORAGE_KEY_STATE = 'compliance-check-state'
|
|
const STORAGE_KEY_RESULTS = 'compliance-check-results'
|
|
const STORAGE_KEY_HISTORY = 'compliance-check-history'
|
|
|
|
function emptyDocState(): DocState {
|
|
return { url: '', text: '', loading: false, error: null }
|
|
}
|
|
|
|
function initState(): DocsState {
|
|
if (typeof window === 'undefined') {
|
|
return Object.fromEntries(DOCUMENT_TYPES.map(d => [d.id, emptyDocState()])) as DocsState
|
|
}
|
|
try {
|
|
const saved = localStorage.getItem(STORAGE_KEY_STATE)
|
|
if (saved) {
|
|
const parsed = JSON.parse(saved) as Record<string, { url?: string; text?: string }>
|
|
return Object.fromEntries(
|
|
DOCUMENT_TYPES.map(d => [d.id, {
|
|
url: parsed[d.id]?.url || '',
|
|
text: parsed[d.id]?.text || '',
|
|
loading: false,
|
|
error: null,
|
|
}])
|
|
) as DocsState
|
|
}
|
|
} catch { /* ignore */ }
|
|
return Object.fromEntries(DOCUMENT_TYPES.map(d => [d.id, emptyDocState()])) as DocsState
|
|
}
|
|
|
|
function countWords(text: string): number {
|
|
if (!text.trim()) return 0
|
|
return text.trim().split(/\s+/).length
|
|
}
|
|
|
|
interface HistoryEntry {
|
|
date: string
|
|
docCount: number
|
|
findings: number
|
|
resultKey: string
|
|
}
|
|
|
|
export function ComplianceCheckTab() {
|
|
const [docs, setDocs] = useState<DocsState>(initState)
|
|
const [useAgent, setUseAgent] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const [progress, setProgress] = useState('')
|
|
const [results, setResults] = useState<any>(() => {
|
|
if (typeof window === 'undefined') return null
|
|
try { const s = localStorage.getItem(STORAGE_KEY_RESULTS); return s ? JSON.parse(s) : null } catch { return null }
|
|
})
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [history, setHistory] = useState<HistoryEntry[]>(() => {
|
|
if (typeof window === 'undefined') return []
|
|
try { return JSON.parse(localStorage.getItem(STORAGE_KEY_HISTORY) || '[]') } catch { return [] }
|
|
})
|
|
|
|
// Persist URLs and texts (not loading/error state)
|
|
React.useEffect(() => {
|
|
const toSave: Record<string, { url: string; text: string }> = {}
|
|
for (const [key, val] of Object.entries(docs)) {
|
|
toSave[key] = { url: val.url, text: val.text }
|
|
}
|
|
try { localStorage.setItem(STORAGE_KEY_STATE, JSON.stringify(toSave)) } catch { /* quota */ }
|
|
}, [docs])
|
|
|
|
const updateDoc = useCallback((docType: DocTypeId, patch: Partial<DocState>) => {
|
|
setDocs(prev => ({ ...prev, [docType]: { ...prev[docType], ...patch } }))
|
|
}, [])
|
|
|
|
const handleFetchText = useCallback(async (docType: DocTypeId) => {
|
|
const url = docs[docType].url.trim()
|
|
if (!url) return
|
|
|
|
updateDoc(docType, { loading: true, error: null })
|
|
try {
|
|
const res = await fetch('/api/sdk/v1/agent/extract-text', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ url }),
|
|
})
|
|
if (!res.ok) {
|
|
const msg = res.status === 404
|
|
? 'Seite nicht erreichbar'
|
|
: `Fehler beim Laden (${res.status})`
|
|
throw new Error(msg)
|
|
}
|
|
const data = await res.json()
|
|
updateDoc(docType, { text: data.text || '', loading: false })
|
|
} catch (e) {
|
|
updateDoc(docType, {
|
|
loading: false,
|
|
error: e instanceof Error ? e.message : 'Text konnte nicht geladen werden',
|
|
})
|
|
}
|
|
}, [docs, updateDoc])
|
|
|
|
const handleFileUpload = useCallback(async (docType: DocTypeId, file: File) => {
|
|
// For now, read as text. PDF/DOCX parsing can be added server-side later.
|
|
const reader = new FileReader()
|
|
reader.onload = () => {
|
|
updateDoc(docType, { text: reader.result as string })
|
|
}
|
|
reader.readAsText(file)
|
|
}, [updateDoc])
|
|
|
|
const filledCount = Object.values(docs).filter(d => d.url.trim() || d.text.trim()).length
|
|
|
|
const handleSubmit = async () => {
|
|
if (filledCount === 0) return
|
|
|
|
setLoading(true)
|
|
setError(null)
|
|
setResults(null)
|
|
setProgress('Compliance-Check wird gestartet...')
|
|
|
|
try {
|
|
const entries = DOCUMENT_TYPES
|
|
.filter(dt => docs[dt.id].url.trim() || docs[dt.id].text.trim())
|
|
.map(dt => ({
|
|
doc_type: dt.id,
|
|
label: dt.label,
|
|
url: docs[dt.id].url.trim(),
|
|
text: docs[dt.id].text.trim() || undefined,
|
|
}))
|
|
|
|
const startRes = await fetch('/api/sdk/v1/agent/compliance-check', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
entries,
|
|
use_agent: useAgent,
|
|
}),
|
|
})
|
|
if (!startRes.ok) throw new Error(`Pruefung konnte nicht gestartet werden: ${startRes.status}`)
|
|
const { check_id } = await startRes.json()
|
|
if (!check_id) throw new Error('Keine Check-ID erhalten')
|
|
|
|
// Poll for results
|
|
let attempts = 0
|
|
while (attempts < 120) {
|
|
await new Promise(r => setTimeout(r, 3000))
|
|
const pollRes = await fetch(`/api/sdk/v1/agent/compliance-check?check_id=${check_id}`)
|
|
if (!pollRes.ok) { attempts++; continue }
|
|
const pollData = await pollRes.json()
|
|
if (pollData.progress) setProgress(pollData.progress)
|
|
if (pollData.status === 'completed' && pollData.result) {
|
|
setResults(pollData.result)
|
|
setProgress('')
|
|
localStorage.setItem(STORAGE_KEY_RESULTS, JSON.stringify(pollData.result))
|
|
|
|
const resultKey = `compliance-check-result-${Date.now()}`
|
|
try { localStorage.setItem(resultKey, JSON.stringify(pollData.result)) } catch { /* quota */ }
|
|
const entry: HistoryEntry = {
|
|
date: new Date().toISOString(),
|
|
docCount: entries.length,
|
|
findings: pollData.result.total_findings || 0,
|
|
resultKey,
|
|
}
|
|
const updated = [entry, ...history].slice(0, 30)
|
|
setHistory(updated)
|
|
localStorage.setItem(STORAGE_KEY_HISTORY, JSON.stringify(updated))
|
|
break
|
|
}
|
|
if (pollData.status === 'failed') {
|
|
throw new Error(pollData.error || 'Pruefung fehlgeschlagen')
|
|
}
|
|
attempts++
|
|
}
|
|
if (attempts >= 120) throw new Error('Zeitlimit ueberschritten')
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
|
|
setProgress('')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const loadFromHistory = (entry: HistoryEntry) => {
|
|
if (entry.resultKey) {
|
|
try {
|
|
const saved = localStorage.getItem(entry.resultKey)
|
|
if (saved) { setResults(JSON.parse(saved)); return }
|
|
} catch { /* ignore */ }
|
|
}
|
|
try {
|
|
const last = localStorage.getItem(STORAGE_KEY_RESULTS)
|
|
if (last) setResults(JSON.parse(last))
|
|
} catch { /* ignore */ }
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Info box */}
|
|
<div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
|
|
<h3 className="text-sm font-semibold text-purple-900">Compliance-Check (Alle Dokumente)</h3>
|
|
<p className="text-xs text-purple-700 mt-1">
|
|
Geben Sie die URLs Ihrer Rechtstexte ein oder laden Sie die Dokumente hoch.
|
|
Das System prueft alle Pflichtangaben nach DSGVO, TDDDG, TMG und UWG.
|
|
Pflichtdokumente sind mit * markiert.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Document rows */}
|
|
<div className="space-y-2">
|
|
{DOCUMENT_TYPES.map(dt => (
|
|
<DocumentRow
|
|
key={dt.id}
|
|
label={dt.label}
|
|
docType={dt.id}
|
|
required={dt.required}
|
|
url={docs[dt.id].url}
|
|
text={docs[dt.id].text}
|
|
loading={docs[dt.id].loading}
|
|
error={docs[dt.id].error}
|
|
wordCount={countWords(docs[dt.id].text)}
|
|
onUrlChange={url => updateDoc(dt.id, { url })}
|
|
onFetchText={() => handleFetchText(dt.id)}
|
|
onTextChange={text => updateDoc(dt.id, { text })}
|
|
onFileUpload={file => handleFileUpload(dt.id, file)}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Agent toggle + submit */}
|
|
<div className="flex items-center justify-between">
|
|
<button
|
|
type="button"
|
|
onClick={() => setUseAgent(!useAgent)}
|
|
className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors ${
|
|
useAgent
|
|
? 'bg-emerald-100 border-emerald-300 text-emerald-800'
|
|
: 'bg-gray-50 border-gray-200 text-gray-500 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<span className={`w-2 h-2 rounded-full ${useAgent ? 'bg-emerald-500' : 'bg-gray-300'}`} />
|
|
{useAgent ? 'KI-Agent aktiv (alle MCs)' : 'KI-Agent aus'}
|
|
</button>
|
|
|
|
<span className="text-xs text-gray-500">
|
|
{filledCount} von {DOCUMENT_TYPES.length} Dokumenten ausgefuellt
|
|
</span>
|
|
</div>
|
|
|
|
{/* Submit button */}
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={loading || filledCount === 0}
|
|
className="w-full px-4 py-3 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50 transition-colors text-sm flex items-center justify-center gap-2"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
Pruefe...
|
|
</>
|
|
) : (
|
|
`Compliance-Check starten (${filledCount} Dokument${filledCount !== 1 ? 'e' : ''})`
|
|
)}
|
|
</button>
|
|
|
|
{/* Progress */}
|
|
{progress && (
|
|
<div className="bg-purple-50 border border-purple-200 rounded-lg p-3 text-sm text-purple-700 flex items-center gap-3">
|
|
<svg className="animate-spin w-4 h-4 text-purple-500 shrink-0" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
{progress}
|
|
</div>
|
|
)}
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">{error}</div>
|
|
)}
|
|
|
|
{/* Results */}
|
|
{results && results.results && (
|
|
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
|
|
<ChecklistView results={results.results} />
|
|
|
|
{/* Email status */}
|
|
{results.email_status && (
|
|
<div className="mt-3 text-xs text-gray-500 flex items-center gap-2">
|
|
<span className={`w-2 h-2 rounded-full ${results.email_status === 'sent' ? 'bg-green-400' : 'bg-gray-300'}`} />
|
|
E-Mail: {results.email_status === 'sent' ? 'Gesendet' : results.email_status}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* History */}
|
|
{history.length > 0 && (
|
|
<div className="border border-gray-200 rounded-xl p-4">
|
|
<h4 className="text-sm font-medium text-gray-700 mb-2">Letzte Compliance-Checks</h4>
|
|
<div className="space-y-1">
|
|
{history.map((h, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => loadFromHistory(h)}
|
|
className="w-full flex items-center justify-between text-sm py-2 px-2 rounded-lg border border-gray-50 hover:border-purple-200 hover:bg-purple-50/30 transition-all text-left"
|
|
>
|
|
<span className="text-gray-600">
|
|
{new Date(h.date).toLocaleDateString('de-DE', {
|
|
day: '2-digit', month: '2-digit', year: 'numeric',
|
|
hour: '2-digit', minute: '2-digit',
|
|
})}
|
|
</span>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs text-gray-500">{h.docCount} Dok.</span>
|
|
<span className={`text-xs font-medium ${h.findings > 0 ? 'text-amber-600' : 'text-green-600'}`}>
|
|
{h.findings} Findings
|
|
</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|