Skip to content

AI Content Editing System - Architektur

Executive Overview — all summaries for decision-makers.

🎯 Ziel

Ein AI-gestütztes Content-Editing-System, das:

  • ✅ Inhalte auf Basis von User-Anweisungen überarbeitet
  • ✅ Automatisch Abhängigkeiten und Auswirkungen erkennt
  • ✅ Folgeänderungen vorschlägt und durchführt
  • ✅ Vollständige Rollback-Funktion bietet
  • ✅ Super einfach zu bedienen ist

🏗️ Architektur-Prinzipien

1. Modularität

  • Kleine, wartbare Dateien (max. 200 Zeilen)
  • Klare Verantwortlichkeiten
  • Wiederverwendbare Komponenten

2. Versionierung

  • Jede Änderung wird versioniert
  • Vollständige Change History
  • Rollback auf jede Version möglich

3. User Experience

  • Ein-Klick AI-Bearbeitung
  • Klare Vorschau vor Änderungen
  • Transparente Impact-Analyse
  • Einfacher Rollback

📦 Backend-Architektur

Datenbank-Schema: Change History

prisma
// backend/prisma/schema/change-history.prisma

model ChangeHistory {
  id            String   @id @default(cuid())
  
  // What was changed
  entityType    String   // "Policy", "Risk", "Control", "SOP", etc.
  entityId      String   // ID of the changed entity
  
  // Change details
  changeType    String   // "AI_EDIT", "MANUAL_EDIT", "AI_CASCADE"
  fieldName     String?  // Which field was changed (optional)
  
  // Versions
  previousValue Json     // Old value (full object or field)
  newValue      Json     // New value (full object or field)
  
  // AI Context
  aiInstruction String?  @db.Text // User's instruction to AI
  aiReasoning   String?  @db.Text // AI's reasoning for the change
  
  // Impact tracking
  relatedChanges String[] // IDs of related ChangeHistory entries
  
  // Metadata
  userId        String
  user          User     @relation(fields: [userId], references: [id])
  createdAt     DateTime @default(now())
  
  // Rollback tracking
  rolledBackAt  DateTime?
  rolledBackBy  String?
  
  @@index([entityType, entityId])
  @@index([userId])
  @@index([createdAt])
}

Service-Layer (Backend)

backend/src/services/ai-editing/
├── ai-content-editor.ts       # Core AI editing logic
├── ai-impact-analyzer.ts      # Dependency & impact analysis
├── change-history-manager.ts  # Version management
├── rollback-service.ts        # Rollback orchestration
└── types.ts                   # Shared types

🎨 Frontend-Architektur

Component-Struktur

src/components/ai-editing/
├── ai-edit-button.tsx         # Button für AI-Bearbeitung
├── ai-edit-dialog.tsx         # Dialog für Anweisungen
├── ai-preview-panel.tsx       # Vorschau der Änderungen
├── impact-analysis-panel.tsx  # Zeigt betroffene Bereiche
├── change-history-panel.tsx   # Änderungshistorie
├── rollback-dialog.tsx        # Rollback-Bestätigung
└── types.ts                   # Shared types

API-Layer

src/api/ai-editing.ts          # API calls für AI-Editing

🔄 User Flow

1. AI-Bearbeitung starten

User auf Policy-Detail-Seite
  → Klickt "Mit AI bearbeiten" Button
  → Dialog öffnet sich
  → User gibt Anweisung ein: "Füge Abschnitt über DSGVO hinzu"

2. AI verarbeitet Anweisung

Frontend sendet Request
  → Backend: AI Content Editor analysiert Inhalt
  → AI generiert neue Version
  → Impact Analyzer prüft Abhängigkeiten
  → Findet: Control XYZ, Risk ABC betroffen

3. Vorschau & Bestätigung

User sieht:
  ✓ Vorschau der geänderten Policy
  ✓ Liste betroffener Bereiche
  ✓ Vorgeschlagene Folgeänderungen
  
User kann:
  → Änderungen akzeptieren
  → Folgeänderungen auswählen
  → Abbrechen

4. Änderungen durchführen

User bestätigt
  → Change History Entry erstellt
  → Policy wird aktualisiert
  → Optional: Folgeänderungen durchgeführt
  → Success-Nachricht

5. Rollback (falls nötig)

User öffnet Change History
  → Sieht alle Änderungen
  → Klickt "Rückgängig machen"
  → Bestätigt Rollback
  → Alte Version wird wiederhergestellt

📋 Nächste Schritte

  1. ✅ Prisma Schema erweitern (ChangeHistory)
  2. ✅ Backend Services implementieren
  3. ✅ Frontend Components erstellen
  4. ✅ Integration in bestehende Seiten
  5. ✅ Testing & Dokumentation