# Luftglanz AI Chat System

Ein intelligenter KI-Assistent für die Luftglanz Website, der Kunden bei Fragen zu Drohnen-Reinigungsservices und AGO Quart Produkten unterstützt.

## 🚀 Features

- **Intelligente Antworten**: Basiert auf OpenAI GPT-3.5-turbo mit spezifischem Produktwissen
- **Deutsche Sprache**: Kommuniziert natürlich auf Deutsch
- **Produktwissen**: Umfassendes Wissen über AGO Quart Grünbelagentferner
- **Responsive Design**: Funktioniert perfekt auf Desktop und Mobile
- **Sicher**: Unterstützt sowohl PHP-Backend als auch direkte API-Aufrufe
- **Persistent**: Speichert Konversationshistorie lokal

## 📁 Dateien

### JavaScript
- `js/ai-chat.js` - Haupt-Chat-System mit Frontend-Logik
- `css/components/ai-chat.css` - Styling für den Chat-Widget

### PHP Backend
- `ai-chat-api.php` - Sicherer PHP-Endpoint für OpenAI API-Aufrufe

### Demo & Test
- `ai-chat-demo.html` - Demo-Seite zum Testen des Chat-Systems

## 🛠️ Installation

### 1. Dateien einbinden

Fügen Sie diese Zeilen in den `<head>` Ihrer HTML-Seiten ein:
```html
<link rel="stylesheet" href="css/components/ai-chat.css">
```

Fügen Sie vor dem schließenden `</body>` Tag ein:
```html
<script src="js/ai-chat.js"></script>
```

### 2. API-Konfiguration

**Option A: PHP Backend (Empfohlen)**
- Der API-Key ist sicher im PHP-Backend gespeichert
- Keine weitere Konfiguration nötig

**Option B: Direkte API-Aufrufe**
- API-Key ist im JavaScript sichtbar (weniger sicher)
- Für Entwicklung und Tests geeignet

### 3. Server-Anforderungen

Für PHP Backend:
- PHP 7.0+
- cURL-Erweiterung aktiviert
- Internetverbindung für OpenAI API

## 💡 Verwendung

### Automatische Initialisierung
Der Chat wird automatisch geladen, wenn die Seite vollständig geladen ist:

```javascript
document.addEventListener('DOMContentLoaded', () => {
    window.aiChat = new AIChat();
});
```

### Manueller Test
Öffnen Sie `ai-chat-demo.html` in Ihrem Browser, um das System zu testen.

## 🎯 Produktwissen

Der KI-Assistent verfügt über umfassendes Wissen zu:

### AGO Quart Grünbelagentferner
- **Funktion**: Hochwirksam gegen Algen, Grünbeläge und Flechten
- **Wirkdauer**: Bis zu 18 Monate aktive Schutzwirkung
- **Anwendung**: Nur auf trockene Flächen, 8h kein Regen
- **Reichweite**: 0,5L Flasche für ca. 100m² (19,90 €)
- **Mischungsverhältnisse**: 
  - Leichte Beläge: 1:20 mit Wasser
  - Starke Beläge: 1:10 mit Wasser

### Drohnen-Services
- Professionelle Anwendung mit Drohnen
- Präzise, gleichmäßige Verteilung
- Sichere Anwendung auf steilen Dächern
- Kosteneffektiv vs. Gerüstaufbau

### Sicherheitsinformationen
- Korrekte Anwendungshinweise
- Sicherheitsdatenblätter
- Umweltschutz-Aspekte

## 🔧 Anpassungen

### Produktwissen erweitern
Bearbeiten Sie die `productKnowledge` Variable in:
- `js/ai-chat.js` (Zeile ~XX)
- `ai-chat-api.php` (Zeile ~XX)

### Styling anpassen
Ändern Sie Farben und Design in `css/components/ai-chat.css`:

```css
:root {
    --primary-color: #2980b9;
    --accent-color: #00adb8;
    /* Weitere Farb-Variablen... */
}
```

### API-Einstellungen
In `js/ai-chat.js` können Sie anpassen:
- `model`: OpenAI Modell (z.B. 'gpt-4')
- `max_tokens`: Maximale Antwortlänge
- `temperature`: Kreativität der Antworten (0.0 - 1.0)

## 📱 Mobile Optimierung

Der Chat ist vollständig responsive:
- Tablet: Kompakte Darstellung
- Smartphone: Vollbild-Chat
- Touch-optimierte Bedienung

## 🔒 Sicherheit

### PHP Backend Vorteile:
- API-Key nicht im Frontend sichtbar
- Server-seitige Validierung
- Rate-Limiting möglich
- Logging und Monitoring

### Best Practices:
- Verwenden Sie immer das PHP Backend in Production
- Überwachen Sie API-Kosten regelmäßig
- Implementieren Sie Rate-Limiting bei Bedarf

## 🐛 Troubleshooting

### Chat erscheint nicht
- Prüfen Sie Browser-Konsole auf JavaScript-Fehler
- Stellen Sie sicher, dass alle CSS/JS-Dateien geladen werden
- Testen Sie mit `ai-chat-demo.html`

### API-Fehler
- Prüfen Sie API-Key Gültigkeit
- Kontrollieren Sie Internetverbindung
- Schauen Sie in Browser-Netzwerk-Tab für Details

### PHP Backend Probleme
- Prüfen Sie PHP-Fehlerlog
- Stellen Sie sicher, dass cURL aktiviert ist
- Testen Sie API-Key mit direktem curl-Aufruf

## 📊 Monitoring

### API-Kosten überwachen
- Besuchen Sie das OpenAI Dashboard
- Setzen Sie Ausgabenlimits
- Überwachen Sie monatliche Nutzung

### Performance
- Chat-Antwortzeiten überwachen
- Conversation History begrenzen (aktuell: 10 Nachrichten)
- Cache häufige Fragen falls nötig

## 🔄 Updates

### Produktwissen aktualisieren
1. Bearbeiten Sie die Knowledge-Base in beiden Dateien
2. Testen Sie mit Demo-Seite
3. Deployen Sie auf Live-System

### OpenAI API Updates
- Überwachen Sie OpenAI Changelogs
- Testen Sie neue Modelle in Development
- Aktualisieren Sie Prompts bei Bedarf

## 💬 Support

Bei Fragen oder Problemen:
1. Prüfen Sie die Browser-Konsole
2. Testen Sie mit der Demo-Seite
3. Kontaktieren Sie das Entwicklungsteam

---

**Version**: 1.0  
**Letztes Update**: Juli 2025  
**Kompatibilität**: Alle modernen Browser, PHP 7.0+
