@aigelb/chatbot-widget

v6.3.1

Published

20 hours ago

Embeddable chatbot widget for websites

0High
0Medium
0Low

db1189

chatbot widget aigelb

🤖 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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Meine Website</title>
  </head>
  <body>
    <!-- Ihr Website-Inhalt -->

    <!-- AIgelb Chatbot Widget - Minimale Konfiguration -->
    <aigelb-chatbot
      agent-id="1"
      languages="Englisch, Französisch, Italienisch, Polnisch, Türkisch, Griechisch, Russisch"
      default-language="Deutsch"
    ></aigelb-chatbot>

    <!-- Widget-Script -->
    <script src="chatbot-widget.js"></script>
  </body>
</html>

Erweiterte Integration mit Theme-System

<!-- Vollständige Konfiguration mit JSON Theme -->
<aigelb-chatbot
  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"
        }
      }
    }
  }'
></aigelb-chatbot>

⚙️ 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:

<!-- Minimale Konfiguration - alles andere wird von der API geladen -->
<aigelb-chatbot agent-id="1"></aigelb-chatbot>

Design-Anpassung mit Theme-Config

<aigelb-chatbot
  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"}}
    }
  }'
></aigelb-chatbot>

♿ Barrierefreiheits-Features

Speech-to-Text & Text-to-Speech

<!-- STT/TTS werden automatisch über AI-Gelb API aktiviert -->
<aigelb-chatbot
  agent-id="1"
  languages="Englisch, Französisch, Italienisch, Polnisch, Türkisch, Griechisch, Russisch"
></aigelb-chatbot>

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

<aigelb-chatbot agent-id="1" default-language="Deutsch"></aigelb-chatbot>

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

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

🎯 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

<!-- ERFORDERLICH: Ohne agent-id wird ein Fehler angezeigt -->
<aigelb-chatbot agent-id="1"></aigelb-chatbot>

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

<!-- Widget HTML VOR dem Script -->
<aigelb-chatbot agent-id="1"></aigelb-chatbot>
<script src="chatbot-widget.js"></script>