[split-required] Split remaining 500-680 LOC files (final batch)
website (17 pages + 3 components): - multiplayer/wizard, middleware/wizard+test-wizard, communication - builds/wizard, staff-search, voice, sbom/wizard - foerderantrag, mail/tasks, tools/communication, sbom - compliance/evidence, uni-crawler, brandbook (already done) - CollectionsTab, IngestionTab, RiskHeatmap backend-lehrer (5 files): - letters_api (641 → 2), certificates_api (636 → 2) - alerts_agent/db/models (636 → 3) - llm_gateway/communication_service (614 → 2) - game/database already done in prior batch klausur-service (2 files): - hybrid_vocab_extractor (664 → 2) - klausur-service/frontend: api.ts (620 → 3), EHUploadWizard (591 → 2) voice-service (3 files): - bqas/rag_judge (618 → 3), runner (529 → 2) - enhanced_task_orchestrator (519 → 2) studio-v2 (6 files): - korrektur/[klausurId] (578 → 4), fairness (569 → 2) - AlertsWizard (552 → 2), OnboardingWizard (513 → 2) - korrektur/api.ts (506 → 3), geo-lernwelt (501 → 2) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -9,35 +9,15 @@
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
const API_BASE = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
|
||||
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
interface LegalReference {
|
||||
law: string
|
||||
paragraph: string
|
||||
title: string
|
||||
summary: string
|
||||
relevance: string
|
||||
}
|
||||
|
||||
interface GFKPrinciple {
|
||||
principle: string
|
||||
description: string
|
||||
example: string
|
||||
}
|
||||
|
||||
interface ValidationResult {
|
||||
is_valid: boolean
|
||||
issues: string[]
|
||||
suggestions: string[]
|
||||
positive_elements: string[]
|
||||
gfk_score: number
|
||||
}
|
||||
import {
|
||||
API_BASE,
|
||||
Option,
|
||||
LegalReference,
|
||||
GFKPrinciple,
|
||||
ValidationResult,
|
||||
} from './_components/types'
|
||||
import { InputForm } from './_components/InputForm'
|
||||
import { OutputArea } from './_components/OutputArea'
|
||||
|
||||
export default function CommunicationToolPage() {
|
||||
// Form state
|
||||
@@ -64,8 +44,6 @@ export default function CommunicationToolPage() {
|
||||
// UI state
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [showGFKInfo, setShowGFKInfo] = useState(false)
|
||||
const [showLegalInfo, setShowLegalInfo] = useState(false)
|
||||
|
||||
// Fetch options on mount
|
||||
useEffect(() => {
|
||||
@@ -214,304 +192,40 @@ export default function CommunicationToolPage() {
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Input Form */}
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Nachricht erstellen</h2>
|
||||
<InputForm
|
||||
communicationType={communicationType}
|
||||
setCommunicationType={setCommunicationType}
|
||||
tone={tone}
|
||||
setTone={setTone}
|
||||
state={state}
|
||||
setState={setState}
|
||||
studentName={studentName}
|
||||
setStudentName={setStudentName}
|
||||
parentName={parentName}
|
||||
setParentName={setParentName}
|
||||
situation={situation}
|
||||
setSituation={setSituation}
|
||||
additionalInfo={additionalInfo}
|
||||
setAdditionalInfo={setAdditionalInfo}
|
||||
types={types}
|
||||
tones={tones}
|
||||
states={states}
|
||||
gfkPrinciples={gfkPrinciples}
|
||||
error={error}
|
||||
loading={loading}
|
||||
onGenerate={handleGenerate}
|
||||
/>
|
||||
|
||||
{/* Communication Type */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Art der Kommunikation *
|
||||
</label>
|
||||
<select
|
||||
value={communicationType}
|
||||
onChange={(e) => setCommunicationType(e.target.value)}
|
||||
className="w-full border rounded-md p-2"
|
||||
>
|
||||
{types.map((t) => (
|
||||
<option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Tone */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Tonalitaet
|
||||
</label>
|
||||
<select
|
||||
value={tone}
|
||||
onChange={(e) => setTone(e.target.value)}
|
||||
className="w-full border rounded-md p-2"
|
||||
>
|
||||
{tones.map((t) => (
|
||||
<option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* State */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Bundesland (fuer rechtliche Referenzen)
|
||||
</label>
|
||||
<select
|
||||
value={state}
|
||||
onChange={(e) => setState(e.target.value)}
|
||||
className="w-full border rounded-md p-2"
|
||||
>
|
||||
{states.map((s) => (
|
||||
<option key={s.value} value={s.value}>
|
||||
{s.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Student Name */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Name des Schuelers/der Schuelerin *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={studentName}
|
||||
onChange={(e) => setStudentName(e.target.value)}
|
||||
placeholder="z.B. Max"
|
||||
className="w-full border rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Parent Name */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Anrede der Eltern *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={parentName}
|
||||
onChange={(e) => setParentName(e.target.value)}
|
||||
placeholder="z.B. Frau Mueller"
|
||||
className="w-full border rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Situation */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Beschreibung der Situation *
|
||||
</label>
|
||||
<textarea
|
||||
value={situation}
|
||||
onChange={(e) => setSituation(e.target.value)}
|
||||
placeholder="Beschreiben Sie die Situation sachlich und konkret..."
|
||||
rows={4}
|
||||
className="w-full border rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Zusaetzliche Informationen (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={additionalInfo}
|
||||
onChange={(e) => setAdditionalInfo(e.target.value)}
|
||||
placeholder="Besondere Umstaende, gewuenschte Termine, etc."
|
||||
rows={2}
|
||||
className="w-full border rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-red-50 text-red-700 rounded-md text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Generate Button */}
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={loading}
|
||||
className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Wird generiert...' : 'Nachricht generieren'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* GFK Info Toggle */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<button
|
||||
onClick={() => setShowGFKInfo(!showGFKInfo)}
|
||||
className="flex items-center justify-between w-full text-left"
|
||||
>
|
||||
<span className="font-semibold">Was ist GFK?</span>
|
||||
<span>{showGFKInfo ? '-' : '+'}</span>
|
||||
</button>
|
||||
{showGFKInfo && (
|
||||
<div className="mt-4 space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
Die Gewaltfreie Kommunikation (GFK) nach Marshall Rosenberg
|
||||
ist ein Kommunikationsmodell, das auf vier Schritten basiert:
|
||||
</p>
|
||||
{gfkPrinciples.map((p, i) => (
|
||||
<div key={i} className="border-l-4 border-blue-500 pl-3">
|
||||
<h4 className="font-medium">{i + 1}. {p.principle}</h4>
|
||||
<p className="text-sm text-gray-600">{p.description}</p>
|
||||
<p className="text-xs text-gray-500 italic mt-1">
|
||||
Beispiel: {p.example}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Output Area */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Generated Message */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold">Generierte Nachricht</h2>
|
||||
{generatedMessage && (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleImprove}
|
||||
disabled={loading}
|
||||
className="text-sm bg-green-100 text-green-700 px-3 py-1 rounded hover:bg-green-200"
|
||||
>
|
||||
Verbessern
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="text-sm bg-gray-100 text-gray-700 px-3 py-1 rounded hover:bg-gray-200"
|
||||
>
|
||||
Kopieren
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{subject && (
|
||||
<div className="mb-3 p-2 bg-gray-50 rounded">
|
||||
<span className="text-sm font-medium text-gray-500">Betreff: </span>
|
||||
<span className="text-sm">{subject}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{generatedMessage ? (
|
||||
<textarea
|
||||
value={generatedMessage}
|
||||
onChange={(e) => setGeneratedMessage(e.target.value)}
|
||||
className="w-full border rounded-md p-4 min-h-[400px] font-mono text-sm"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-gray-400 text-center py-20 border-2 border-dashed rounded-md">
|
||||
Hier erscheint die generierte Nachricht
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Validation */}
|
||||
{validation && (
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">GFK-Analyse</h3>
|
||||
|
||||
{/* Score */}
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-sm font-medium">GFK-Score</span>
|
||||
<span className={`text-sm font-bold ${
|
||||
validation.gfk_score >= 0.8 ? 'text-green-600' :
|
||||
validation.gfk_score >= 0.6 ? 'text-yellow-600' : 'text-red-600'
|
||||
}`}>
|
||||
{Math.round(validation.gfk_score * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className={`h-2 rounded-full ${
|
||||
validation.gfk_score >= 0.8 ? 'bg-green-500' :
|
||||
validation.gfk_score >= 0.6 ? 'bg-yellow-500' : 'bg-red-500'
|
||||
}`}
|
||||
style={{ width: `${validation.gfk_score * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Issues */}
|
||||
{validation.issues.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<h4 className="text-sm font-medium text-red-600 mb-2">
|
||||
Verbesserungsvorschlaege:
|
||||
</h4>
|
||||
<ul className="text-sm space-y-1">
|
||||
{validation.issues.map((issue, i) => (
|
||||
<li key={i} className="flex items-start">
|
||||
<span className="text-red-500 mr-2">!</span>
|
||||
<span>{issue}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Positive Elements */}
|
||||
{validation.positive_elements.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-green-600 mb-2">
|
||||
Positive Elemente:
|
||||
</h4>
|
||||
<ul className="text-sm space-y-1">
|
||||
{validation.positive_elements.map((elem, i) => (
|
||||
<li key={i} className="flex items-start">
|
||||
<span className="text-green-500 mr-2">+</span>
|
||||
<span>{elem}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Legal References */}
|
||||
{legalRefs.length > 0 && (
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<button
|
||||
onClick={() => setShowLegalInfo(!showLegalInfo)}
|
||||
className="flex items-center justify-between w-full text-left"
|
||||
>
|
||||
<h3 className="text-lg font-semibold">Rechtliche Grundlagen</h3>
|
||||
<span>{showLegalInfo ? '-' : '+'}</span>
|
||||
</button>
|
||||
{showLegalInfo && (
|
||||
<div className="mt-4 space-y-4">
|
||||
{legalRefs.map((ref, i) => (
|
||||
<div key={i} className="border rounded-md p-3 bg-gray-50">
|
||||
<div className="font-medium">
|
||||
{ref.law} {ref.paragraph}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">{ref.title}</div>
|
||||
<div className="text-sm mt-1">{ref.summary}</div>
|
||||
<div className="text-xs text-blue-600 mt-1">
|
||||
Relevanz: {ref.relevance}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<OutputArea
|
||||
generatedMessage={generatedMessage}
|
||||
setGeneratedMessage={setGeneratedMessage}
|
||||
subject={subject}
|
||||
validation={validation}
|
||||
legalRefs={legalRefs}
|
||||
loading={loading}
|
||||
onImprove={handleImprove}
|
||||
onCopy={handleCopy}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
|
||||
Reference in New Issue
Block a user