🤖 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

$3

``html










agent-id="1"
languages="Englisch, Französisch, Italienisch, Polnisch, Türkisch, Griechisch, Russisch"
default-language="Deutsch"
>





`

$3

`html

agent-id="1"
languages="Englisch, Französisch, Italienisch, Polnisch, Türkisch, Griechisch, Russisch"
default-language="Deutsch"
theme-config='{
"colors": {
"brand": {
"red": "rgb(204, 7, 30)",
"cream": "rgb(251, 245, 239)"
}
},
"lightMode": {
"button": {
"main": {
"button-bg": "colors:brand/cream",
"button-bg-hover": "colors:brand/red"
}
}
}
}'
>
`

⚙️ Konfiguration

$3

| 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" |

$3

Das Widget lädt automatisch Konfiguration von der AI-Gelb Agent API:

`html


`

$3

`html
agent-id="1"
theme-config='{
"colors": {
"brand": {"red": "rgb(204, 7, 30)"},
"neutrals": {"neutral-000": "rgb(255, 255, 255)"}
},
"lightMode": {
"chat": {"chat-ai-bg": "colors:neutrals/neutral-000"},
"button": {"main": {"button-bg-hover": "colors:brand/red"}}
}
}'
>
`

♿ Barrierefreiheits-Features

$3

`html

agent-id="1"
languages="Englisch, Französisch, Italienisch, Polnisch, Türkisch, Griechisch, Russisch"
>
`

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

$3

`html

`

Easy Language: Gesamte Konversation in vereinfachter Sprache (nur Deutsch)
Message Simplification: Nachträgliche Vereinfachung einzelner Bot-Antworten

$3

- 👍👎 Daumen hoch/runter Bewertung für jede Bot-Antwort
- 📝 Detailliertes Feedback-Formular
- 🔄 Feedback wird an AI-Gelb API übertragen

$3

`html
agent-id="1"
languages="Englisch, Französisch, Italienisch, Polnisch, Türkisch, Griechisch, Russisch"
default-language="Deutsch"
>
`

🎯 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

$3

- ✅ Chrome/Edge/Firefox/Safari - Vollständig unterstützt
- ✅ Mobile Browser - iOS Safari, Chrome Mobile

$3

- ✅ 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

$3

`html


`

$3

Speech-to-Text und Text-to-Speech benötigen HTTPS oder localhost.

$3

Das theme-config Attribut erwartet einen Figma-Variablen JSON Export. Ungültige JSON-Strings werden ignoriert und das Standard-Theme verwendet.

$3

`html



``