0c0dd4e3a6
Add autonomous compliance agent that fetches web documents (cookie banners, privacy policies), classifies them via Qwen/Ollama, assesses DSGVO compliance, assigns to the responsible role, and sends notification emails. Components: - ZeroClaw SOP (6-step workflow: fetch, classify, assess, summarize, assign, notify) - Backend: /api/compliance/agent/analyze (combined endpoint) - Backend: /api/compliance/agent/notify (standalone email) - Frontend: /sdk/agent page (Manager UI with URL input + results) - Helper scripts + E2E test Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import { useAgentAnalysis } from './_hooks/useAgentAnalysis'
|
|
import { AnalysisResult } from './_components/AnalysisResult'
|
|
import { AnalysisHistory } from './_components/AnalysisHistory'
|
|
|
|
export default function AgentPage() {
|
|
const [url, setUrl] = useState('')
|
|
const { analyze, loading, error, result, history } = useAgentAnalysis()
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!url.trim()) return
|
|
analyze(url.trim())
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6 max-w-4xl">
|
|
{/* Header */}
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Compliance Agent</h1>
|
|
<p className="text-gray-500 mt-1">
|
|
Analysiere Webseiten auf DSGVO-Konformitaet. Der Agent holt das Dokument,
|
|
klassifiziert es, bewertet das Risiko und weist die Aufgabe der zustaendigen Rolle zu.
|
|
</p>
|
|
</div>
|
|
|
|
{/* URL Input */}
|
|
<form onSubmit={handleSubmit} className="flex gap-3">
|
|
<input
|
|
type="url"
|
|
value={url}
|
|
onChange={e => setUrl(e.target.value)}
|
|
placeholder="https://example.com/datenschutz"
|
|
className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
|
|
disabled={loading}
|
|
required
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={loading || !url.trim()}
|
|
className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2 text-sm font-medium"
|
|
>
|
|
{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>
|
|
Analysiere...
|
|
</>
|
|
) : (
|
|
'Analysieren'
|
|
)}
|
|
</button>
|
|
</form>
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Result */}
|
|
{result && (
|
|
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
|
|
<AnalysisResult result={result} />
|
|
</div>
|
|
)}
|
|
|
|
{/* History */}
|
|
<AnalysisHistory
|
|
history={history}
|
|
onSelect={r => {
|
|
setUrl(r.url)
|
|
analyze(r.url)
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|