// AI Chat System for Luftglanz Website
class AIChat {
constructor() {
this.apiKey = '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';
this.isOpen = false;
this.conversationHistory = [];
this.isTyping = false;
// Product knowledge base
this.productKnowledge = `
LUFTGLANZ PRODUCT KNOWLEDGE BASE:
1. COMPANY: Luftglanz - Professional drone-based roof and surface cleaning services
2. MAIN PRODUCTS:
A) AGO QUART GRÜNBELAGENTFERNER (Green algae and lichen remover)
PRODUCT DETAILS:
- Name: AGO Quart Algenentferner, Grünbelag- und Flechtenentferner
- Function: Highly effective against algae, green deposits, and lichens
- Active period: Up to 18 months continuous protection
- Application: Apply only on dry surfaces, no rain for 8 hours after application
- Coverage: 0.5L bottle covers approximately 100m² surface area
- Price: 19,90 € (39,80 € per liter)
MIXING RATIOS:
- Light deposits: 1:20 with water
- Heavy deposits (black algae, lichens): 1:10 with water
INGREDIENTS: Water, Benzalkonium-Chlorides, Tideceth-8, Cocamidopropyl-Betaine, Isopropyl-Alcohol
APPLICATION PROCESS:
1. Apply only on dry surfaces
2. Ensure no rain for minimum 8 hours after application
3. Works on surface level, not suitable for moss removal in joints/cracks
4. Cleaning duration depends on contamination severity
5. Active for up to 18 months, provides thorough cleaning and prevents recontamination
6. Never rinse with water after application - product must bind with surface
EFFECTIVENESS TIMELINE:
- Green deposits: Disappear within days
- Red/black algae: Several months for significant improvement
- Heavy lichen contamination: Up to 2 years for complete removal
SUITABLE SURFACES: All waterproof surfaces (roofs, terraces, facades, etc.)
IMPORTANT: AGO Quart is also SAFE for solar panels! According to the manufacturer: "Sie können die Solar-Platten bedenkenlos einsprühen. Unser AGO Quart greift dies nicht an. Es wird auch sehr erfolgreich von Firmen eingesetzt, die Solaranlagen reinigen."
BENEFITS:
- No high-pressure cleaning needed
- No scrubbing required
- Chlorine and acid-free
- Gentle cleaning without material damage
- Long-term protection against recontamination
- Self-cleaning effect through weather interaction
B) MELLERUD PHOTOVOLTAIK & SOLARANLAGEN REINIGER KONZENTRAT
PRODUCT DETAILS:
- Name: Mellerud Photovoltaik & Solaranlagen Reiniger Konzentrat
- Size: 0.5L concentrate
- Price: 8,99 € (17,98 € per liter)
- Function: Gentle and effective cleaning solution specifically for solar panels and photovoltaic systems
- Removes: Dust, general dirt, soot residues, fine dust, and pollen
- Special features: Streak-free, residue-free cleaning with water-repellent protection
MIXING RATIO:
- Standard cleaning: 1:20 with water (ideally distilled water)
INGREDIENTS & SPECS:
- Composition: Aqueous mixture of surfactants, complexing agents, and effectiveness enhancers
- pH value: 5.70 - 6.50
- Density: 1.020 kg/l
APPLICATION PROCESS:
1. Remove coarse dirt, leaves, and debris by lightly sweeping (avoid intensive scrubbing)
2. Mix concentrate 1:20 with water (preferably distilled water)
3. Apply carefully with specialized solar/PV equipment, soft sponge, cloth, or squeegee
4. Allow to work briefly
5. Rinse thoroughly with clear water (preferably distilled water)
SUITABLE EQUIPMENT:
- Specialized equipment for solar and PV systems
- Particularly soft sponges
- Soft cloths or squeegees
- Avoid intensive scrubbing to prevent damage
BENEFITS:
- Improves performance and lifespan of solar systems
- Creates sustainable protection against re-contamination through water-repellent effect
- Gentle cleaning without damage to sensitive modules
- Streak-free and residue-free results
- Suitable for all types of solar and PV panels
SAFETY INFORMATION:
- Causes severe eye irritation
- Keep out of reach of children
- Wash hands thoroughly after use
- In case of eye contact: rinse gently with water for several minutes
- Remove contact lenses if present and continue rinsing
- If eye irritation persists: seek medical advice
WHY DISTILLED WATER?
- Minimizes residues and promotes streak-free cleaning
- Supports optimal care of PV and solar systems
DRONE SERVICES:
- Professional application using drones for hard-to-reach areas
- Precise, even distribution of both AGO Quart and Mellerud products
- Safe application on steep roofs and high buildings
- Cost-effective compared to traditional scaffolding methods
- Specialized equipment for solar panel cleaning via drone
SAFETY INFORMATION:
- Use biocides safely
- Always read labeling and product information
- AGO Quart: Causes skin irritation (H315), serious eye damage (H318), very toxic to aquatic organisms (H410)
- Mellerud: Causes severe eye irritation, keep away from children
CONTACT INFORMATION:
AGO: AGO Sauberheit für Haus und Garten! GmbH & Co. KG, Brilloner Str. 39, 59909 Bestwig
Phone: 02904 / 98 98 98-0, Email: info@agoshop.de
Mellerud: MELLERUD CHEMIE GMBH, Bernhard-Röttgen-Waldweg 20, 41379 Brüggen
Phone: +49 (0) 2163 / 950 90 999, Email: shop@mellerud.de, experten-service@mellerud.de
`;
this.init();
}
init() {
this.createChatWidget();
this.attachEventListeners();
this.loadConversationHistory();
}
createChatWidget() {
// Chat toggle button
const chatButton = document.createElement('div');
chatButton.id = 'ai-chat-toggle';
chatButton.innerHTML = `
KI-Assistent
`;
// Chat window
const chatWindow = document.createElement('div');
chatWindow.id = 'ai-chat-window';
chatWindow.innerHTML = `
🤖 Luftglanz KI-Assistent
Hallo! Ich bin Ihr KI-Assistent für Fragen zu unseren Drohnen-Reinigungsservices und AGO Quart Produkten. Wie kann ich Ihnen helfen?
`;
document.body.appendChild(chatButton);
document.body.appendChild(chatWindow);
}
attachEventListeners() {
const toggleButton = document.getElementById('ai-chat-toggle');
const closeButton = document.getElementById('chat-close');
const sendButton = document.getElementById('chat-send');
const chatInput = document.getElementById('chat-input');
toggleButton.addEventListener('click', () => this.toggleChat());
closeButton.addEventListener('click', () => this.closeChat());
sendButton.addEventListener('click', () => this.sendMessage());
chatInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
this.sendMessage();
}
});
}
toggleChat() {
this.isOpen = !this.isOpen;
const chatWindow = document.getElementById('ai-chat-window');
const toggleButton = document.getElementById('ai-chat-toggle');
if (this.isOpen) {
chatWindow.classList.add('open');
toggleButton.classList.add('active');
} else {
chatWindow.classList.remove('open');
toggleButton.classList.remove('active');
}
}
closeChat() {
this.isOpen = false;
const chatWindow = document.getElementById('ai-chat-window');
const toggleButton = document.getElementById('ai-chat-toggle');
chatWindow.classList.remove('open');
toggleButton.classList.remove('active');
}
async sendMessage() {
const input = document.getElementById('chat-input');
const message = input.value.trim();
if (!message || this.isTyping) return;
// Add user message
this.addMessage(message, 'user');
input.value = '';
// Show typing indicator
this.showTypingIndicator();
try {
// Send to OpenAI
const response = await this.callOpenAI(message);
this.hideTypingIndicator();
this.addMessage(response, 'bot');
} catch (error) {
this.hideTypingIndicator();
this.addMessage('Entschuldigung, es gab einen Fehler bei der Kommunikation mit dem KI-System. Bitte versuchen Sie es erneut.', 'bot');
console.error('OpenAI API Error:', error);
}
}
async callOpenAI(userMessage) {
// Try PHP backend first (more secure), fallback to direct API call
try {
return await this.callPHPBackend(userMessage);
} catch (error) {
console.warn('PHP backend failed, trying direct API call:', error);
return await this.callDirectAPI(userMessage);
}
}
async callPHPBackend(userMessage) {
const response = await fetch('ai-chat-api.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: userMessage,
history: this.conversationHistory.slice(-10) // Keep last 10 for context
})
});
if (!response.ok) {
throw new Error(`PHP Backend error: ${response.status}`);
}
const data = await response.json();
if (!data.success) {
throw new Error(data.error || 'Backend error');
}
// Update conversation history
this.conversationHistory.push(
{ role: 'user', content: userMessage },
{ role: 'assistant', content: data.message }
);
this.saveConversationHistory();
return data.message;
}
async callDirectAPI(userMessage) {
const systemPrompt = `Du bist ein hilfsreicher KI-Assistent für Luftglanz, ein Unternehmen für professionelle Drohnen-basierte Dach- und Oberflächenreinigung.
WICHTIGE ANWEISUNGEN:
- Antworte immer auf Deutsch
- Verwende IMMER die höfliche Anrede "Sie" (niemals "du" oder "dir")
- Sei freundlich, professionell und hilfsbereit
- Nutze AUSSCHLIESSLICH die bereitgestellten Produktinformationen für präzise Antworten
- Gib konkrete Produktdetails, Preise und Anwendungshinweise aus der Wissensbasis
- Bei Fragen zu Solaranlagen: Erkläre dass SOWOHL AGO Quart ALS AUCH Mellerud geeignet sind
- AGO Quart: Laut Hersteller sicher für Solar-Platten, wird von Reinigungsfirmen eingesetzt
- Mellerud: Speziell für Solaranlagen entwickelt mit schonender Formel
- Bei Fragen zu Algen/Grünbelägen auf Dächern, empfehle AGO Quart
- Erwähne die Vorteile der Drohnen-Anwendung wenn relevant
- Erkläre Unterschiede zwischen den Produkten detailliert basierend auf der Wissensbasis
- Gib konkrete Mischungsverhältnisse und Preise an
WICHTIG: Du kennst diese BEIDEN spezifischen Produkte sehr genau:
1. AGO Quart (19,90€) - für Algen, Grünbeläge, Flechten auf Dächern/Terrassen
2. Mellerud Photovoltaik Reiniger (8,99€) - speziell für Solaranlagen
PRODUKTWISSEN: ${this.productKnowledge}
Beantworte Fragen zu:
- Unterschiede zwischen AGO Quart und Mellerud Produkten
- Spezifische Anwendung für Solaranlagen vs. Dächer
- Konkrete Preise, Mischungsverhältnisse und Reichweiten
- Drohnen-Anwendung beider Produkte
- Sicherheitshinweise für beide Produkte
- Warum destilliertes Wasser bei Mellerud wichtig ist
- Kontaktdaten beider Hersteller`;
const messages = [
{ role: 'system', content: systemPrompt },
...this.conversationHistory.slice(-10), // Keep last 10 messages for context
{ role: 'user', content: userMessage }
];
const response = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.apiKey}`
},
body: JSON.stringify({
model: 'gpt-3.5-turbo',
messages: messages,
max_tokens: 500,
temperature: 0.7,
presence_penalty: 0.1,
frequency_penalty: 0.1
})
});
if (!response.ok) {
throw new Error(`OpenAI API error: ${response.status}`);
}
const data = await response.json();
const assistantMessage = data.choices[0].message.content;
// Update conversation history
this.conversationHistory.push(
{ role: 'user', content: userMessage },
{ role: 'assistant', content: assistantMessage }
);
this.saveConversationHistory();
return assistantMessage;
}
addMessage(content, sender) {
const messagesContainer = document.getElementById('chat-messages');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}-message`;
const messageContent = document.createElement('div');
messageContent.className = 'message-content';
messageContent.textContent = content;
messageDiv.appendChild(messageContent);
messagesContainer.appendChild(messageDiv);
// Auto-scroll to bottom
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
showTypingIndicator() {
this.isTyping = true;
const messagesContainer = document.getElementById('chat-messages');
const typingDiv = document.createElement('div');
typingDiv.id = 'typing-indicator';
typingDiv.className = 'message bot-message typing';
typingDiv.innerHTML = `
`;
messagesContainer.appendChild(typingDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
hideTypingIndicator() {
this.isTyping = false;
const typingIndicator = document.getElementById('typing-indicator');
if (typingIndicator) {
typingIndicator.remove();
}
}
saveConversationHistory() {
try {
localStorage.setItem('luftglanz_chat_history', JSON.stringify(this.conversationHistory));
} catch (error) {
console.warn('Could not save conversation history:', error);
}
}
loadConversationHistory() {
try {
const saved = localStorage.getItem('luftglanz_chat_history');
if (saved) {
this.conversationHistory = JSON.parse(saved);
}
} catch (error) {
console.warn('Could not load conversation history:', error);
this.conversationHistory = [];
}
}
}
// Initialize chat when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
window.aiChat = new AIChat();
});