enhanced-chat-ui

v1.0.2

Published

10 months ago

Eine moderne, animierte und anpassbare UI für Chatbots

Downloads

0High
0Medium
0Low

beatax34

chat chatbot ui enhanced modern animated tailwind

Enhanced Chat UI

Eine moderne, animierte und anpassbare UI für Chatbots. Diese verbesserte Version bietet eine Reihe von Funktionen, die die Benutzerinteraktion verbessern und das Erscheinungsbild des Chats modernisieren.

Installation

NPM

npm install enhanced-chat-ui

CDN (JSDelivr)

<!-- CSS einbinden -->
<link href="https://cdn.jsdelivr.net/npm/enhanced-chat-ui/enhanced-chat.css" rel="stylesheet" />

<!-- JavaScript einbinden -->
<script type="module">
	import { createEnhancedChat } from 'https://cdn.jsdelivr.net/npm/enhanced-chat-ui/enhanced-chat.js';

	createEnhancedChat({
		webhookUrl: 'DEINE_WEBHOOK_URL'
	});
</script>

Funktionen

Moderne UI: Sauberes, modernes Design mit Tailwind-ähnlichen Klassen
Animationen: Sanfte Animationen für das Öffnen/Schließen des Chats, Nachrichteneingabe und Antworten
Typing-Indikator: Animierter Indikator, wenn der Bot eine Antwort generiert
Anpassbare Themes: Einfache Anpassung von Farben und Stilen
Schnellantworten: Vordefinierte Antworten für häufige Fragen
Responsive Design: Optimiert für Desktop und Mobile
Dark Mode: Automatische Unterstützung für Dark Mode
Barrierefreiheit: Verbesserte Unterstützung für Screenreader und Tastaturnavigation
Markdown-Unterstützung: Formatierung von Nachrichten mit Markdown
Internationalisierung: Mehrsprachige Unterstützung

Verwendung

Grundlegende Einrichtung

createEnhancedChat({
	webhookUrl: 'https://your-webhook-url.com/webhook/chat-trigger',
	target: '#chat-container',
	mode: 'window', // 'window' oder 'fullscreen'
	defaultLanguage: 'de'
});

Vollständige Konfiguration

createEnhancedChat({
	// Erforderliche Optionen
	webhookUrl: 'https://your-webhook-url.com/webhook/chat-trigger',
	
	// Webhook-Konfiguration
	webhookConfig: {
		method: 'POST',
		headers: {
			'Authorization': 'Bearer YOUR_API_KEY'
		}
	},
	
	// Darstellungsoptionen
	target: '#chat-container',
	mode: 'window', // 'window' oder 'fullscreen'
	
	// Daten-Schlüssel
	chatInputKey: 'chatInput',
	chatSessionKey: 'sessionId',
	
	// Metadaten (werden mit jeder Anfrage gesendet)
	metadata: {
		source: 'website',
		page: 'home'
	},
	
	// Willkommensbildschirm anzeigen
	showWelcomeScreen: false,
	
	// Sprache
	defaultLanguage: 'de',
	
	// Initiale Nachrichten
	initialMessages: [
		'Hallo! 👋',
		'Wie kann ich dir heute helfen?'
	],
	
	// Theme-Anpassung
	theme: {
		primary: '#4f46e5', // Indigo
		secondary: '#10b981', // Emerald
		background: '#ffffff',
		text: '#1f2937',
		botMessage: '#f3f4f6',
		userMessage: '#4f46e5',
		botMessageText: '#1f2937',
		userMessageText: '#ffffff',
	},
	
	// Animationen
	animations: {
		enabled: true,
		typing: 'bounce', // 'bounce', 'pulse', 'scale'
		messageTransition: 'slide', // 'slide', 'fade', 'zoom'
		openCloseTransition: 'scale', // 'scale', 'slide', 'fade'
	},
	
	// Übersetzungen
	i18n: {
		de: {
			title: 'Hallo! 👋',
			subtitle: 'Starte einen Chat. Wir sind rund um die Uhr für dich da.',
			footer: 'Powered by Enhanced Chat',
			getStarted: 'Neue Konversation',
			inputPlaceholder: 'Schreibe deine Frage...',
			sendButton: 'Senden',
			typingIndicator: 'schreibt...',
			quickReplies: {
				title: 'Schnellantworten',
				options: [
					'Wie kann ich einen Workflow erstellen?',
					'Was sind die neuesten Features?',
					'Ich brauche Hilfe bei der Automatisierung'
				]
			}
		},
		// Weitere Sprachen...
	}
});

Anpassung des Themes

Vordefinierte Themes

Du kannst vordefinierte Themes verwenden, indem du das data-theme-Attribut auf dem html- oder body-Element setzt:

<html data-theme="blue">

Verfügbare Themes:

blue
green
purple
orange
pink

Benutzerdefiniertes Theme

Du kannst ein benutzerdefiniertes Theme erstellen, indem du die CSS-Variablen überschreibst oder die theme-Option beim Erstellen des Chats verwendest.

Voraussetzungen

Stelle sicher, dass du einen Webhook-Endpunkt hast, der die Chat-Anfragen verarbeiten kann. Der Webhook sollte folgende Aktionen unterstützen:

sendMessage: Wenn der Benutzer eine Nachricht sendet
loadPreviousSession: Wenn eine vorherige Chat-Sitzung geladen werden soll

Lizenz

MIT