# 🤖 AIgelb Chatbot Widget
Ein modernes, barrierefreies React-basiertes Chatbot-Widget für TYPO3 AIgelb Integration.
## ✨ Features
- **Streaming-Antworten** in Echtzeit mit AI-Gelb API
- **Externe Konfiguration** über AI-Gelb Agent API mit automatischem CSS-Loading
- **Vollständig barrierefrei** (WCAG 2.1 Level AA konform)
- **Erweiterte Theme-Konfiguration** mit JSON-basiertem Styling-System
- **Speech-to-Text (STT)** für Spracheingabe mit Mikrofon-Visualisierung
- **Text-to-Speech (TTS)** zum Vorlesen von Antworten (AI-Gelb API)
- **Easy Language** Modus für vereinfachte Sprache (nur Deutsch)
- **Message Simplification** für nachträgliche Vereinfachung einzelner Nachrichten
- **Mehrsprachigkeit** mit Language-Dropdown
- **Rating & Feedback System** mit Daumen hoch/runter und detailliertem Feedback
- **Quick-Buttons** für häufige Fragen (von Agent-Konfiguration geladen)
## 🚀 Integration
### Einfache Integration
```html
Meine Website
```
### Erweiterte Integration mit Theme-System
```html
```
## ⚙️ Konfiguration
### Basis-Attribute
| Attribut | Beschreibung | Standard | Beispiel |
| ------------------ | --------------------------------- | ------------------------------ | ----------------------------- |
| `agent-id` | **ERFORDERLICH** Agent-ID für API | null (Fehler) | "1" |
| `theme-config` | Figma-Variablen JSON Export | Default Theme | Siehe Theme-Beispiel oben |
| `languages` | Verfügbare Sprachen | "" | "Englisch, Französisch, Italienisch" |
| `default-language` | Standard-Sprache | "Deutsch" | "Englisch" |
### Externe Agent-Konfiguration
Das Widget lädt automatisch Konfiguration von der AI-Gelb Agent API:
```html
```
### Design-Anpassung mit Theme-Config
```html
```
## ♿ Barrierefreiheits-Features
### Speech-to-Text & Text-to-Speech
```html
```
**STT Features:**
- 🎤 Mikrofon-Button mit Visualisierung
- 🌐 Mehrsprachige Spracherkennung
- ⚡ Echtzeit-Transkription
**TTS Features:**
- 🔊 AI-basierte Sprachsynthese (gpt-4o-mini-tts)
- 📱 Unterstützung für alle Bot-Antworten
- 🎯 Automatische Text-Bereinigung für bessere Aussprache
### Easy Language & Message Simplification
```html
```
**Easy Language:** Gesamte Konversation in vereinfachter Sprache (nur Deutsch)
**Message Simplification:** Nachträgliche Vereinfachung einzelner Bot-Antworten
### Rating & Feedback System
- 👍👎 Daumen hoch/runter Bewertung für jede Bot-Antwort
- 📝 Detailliertes Feedback-Formular
- 🔄 Feedback wird an AI-Gelb API übertragen
### Mehrsprachigkeit
```html
```
## 🎯 WCAG 2.1 Level AA Konformität
- ✅ **Tastatur-Navigation** (ESC schließt, Enter sendet, Tab-Navigation)
- ✅ **Screen Reader Support** mit ARIA-Labels
- ✅ **Focus-Management** mit deutlichen Fokus-Indikatoren
- ✅ **Speech Features** für motorische und visuelle Einschränkungen
- ✅ **Easy Language** für kognitive Barrierefreiheit
- ✅ **Farbkontrast** erfüllt WCAG AA Standards
## 📱 Browser-Unterstützung
### Widget Grundfunktionen
- ✅ **Chrome/Edge/Firefox/Safari** - Vollständig unterstützt
- ✅ **Mobile Browser** - iOS Safari, Chrome Mobile
### Speech Features (STT/TTS)
- ✅ **Chrome Desktop/Mobile** - STT + TTS vollständig
- ✅ **Edge** - STT + TTS vollständig
- ✅ **Safari iOS** - STT + TTS vollständig
- ⚠️ **Firefox** - Nur TTS, STT experimentell
- ⚠️ **Safari macOS** - TTS ja, STT eingeschränkt
## 🛠️ Wichtige Hinweise
### Agent-ID erforderlich
```html
```
### HTTPS für Speech Features
Speech-to-Text und Text-to-Speech benötigen HTTPS oder localhost.
### Theme-Config Format
Das `theme-config` Attribut erwartet einen Figma-Variablen JSON Export. Ungültige JSON-Strings werden ignoriert und das Standard-Theme verwendet.
### Script-Reihenfolge
```html
```