`
container.appendChild(typing)
}
scrollMessagesToBottom()
}
function renderQuickActions() {
const container = document.getElementById('chatQuickActions')
if (!container) return
container.innerHTML = QUICK_ACTIONS.map(
(qa) => `
`,
).join('')
}
function escapeHtml(text: string): string {
return text
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/\n/g, ' ')
}
function addMessage(role: 'user' | 'assistant', text: string) {
state.messages.push({ role, text, timestamp: Date.now() })
renderMessages()
}
function setTyping(typing: boolean) {
state.isTyping = typing
renderMessages()
}
// Auto-grow textarea
function autoGrow(el: HTMLTextAreaElement) {
el.style.height = 'auto'
el.style.height = Math.min(el.scrollHeight, 120) + 'px'
}
// Handle quick actions
function handleQuickAction(action: string) {
switch (action) {
case 'book':
addMessage('user', 'Ich möchte einen Termin buchen.')
void handleBookingMessage('Termin buchen')
break
case 'callback':
addMessage('user', 'Ich möchte einen Rückruf anfordern.')
void handleBookingMessage('Rückruf anfordern')
break
case 'components':
addMessage('user', 'Ich möchte mehr über die Komponenten erfahren.')
simulateResponse('Wir bieten Komponenten für Zutritt, Alarm & Sicherheit, Licht, Beschattung, Klima und Energie. Welches Thema interessiert Sie?')
break
}
}
function simulateResponse(text: string, delayMs = 1400) {
setTyping(true)
setTimeout(() => {
setTyping(false)
addMessage('assistant', text)
}, delayMs)
}
function isBookingMessage(text: string): boolean {
const lower = text.toLowerCase().trim()
const activeState = getSessionState('default')
if (activeState !== 'IDLE' && activeState !== 'BOOKED') return true
return [
'termin',
'buch',
'beratung',
'kalender',
'rückruf',
'rueckruf',
'anruf',
'telefon',
'callback',
].some((keyword) => lower.includes(keyword))
}
async function handleBookingMessage(text: string) {
setTyping(true)
try {
const reply = await processMessage(text)
setTyping(false)
if (reply) addMessage('assistant', reply)
} catch (error) {
console.error('Booking assistant failed', error)
setTyping(false)
addMessage(
'assistant',
'Entschuldigung, der Terminassistent ist gerade nicht erreichbar. Sie können direkt über Cal.com buchen: https://cal.com/its-boehmer/beratung',
)
}
}
// Process user message
function processUserMessage(text: string) {
const lower = text.toLowerCase().trim()
if (isBookingMessage(text)) {
void handleBookingMessage(text)
return
}
// Smart routing based on keywords
if (lower.includes('preis') || lower.includes('kost') || lower.includes('angebot')) {
simulateResponse('Die Kosten hängen von Ihrem Gebäude, der Verkabelung und den gewünschten Funktionen ab. Für Smart Home Siegen, Homematic IP Betzdorf oder Gebäudeautomatisierung Freudenberg nutzen Sie am besten unseren Gebäudeplaner — oder wir klären es direkt in einer kurzen Beratung.')
return
}
if (lower.includes('komponent') || lower.includes('baustein') || lower.includes('produkt')) {
simulateResponse('Wir planen Homematic IP Komponenten für Zutritt, Alarm & Sicherheit, Licht, Beschattung, Klima und Energie — passend für Bestandsbauten, Neubau und Smart Office Wissen. Welcher Bereich ist für Sie gerade am wichtigsten?')
return
}
if (lower.includes('knx') || lower.includes('verkabel') || lower.includes('neubau')) {
simulateResponse('Bei Neubau oder Kernsanierung lohnt sich ein Blick auf KNX Programmierung im Siegerland und strukturierte Verkabelung. Für Bestandsbauten ist Homematic IP oft schneller und wirtschaftlicher nachrüstbar. Ich kann Ihnen die passende Variante einordnen.')
return
}
if (lower.includes('danke') || lower.includes('perfekt') || lower.includes('super')) {
simulateResponse('Sehr gerne! Wenn Sie weitere Fragen haben, sind wir jederzeit für Sie da. 😊')
return
}
if (lower.includes('hallo') || lower.includes('hi') || lower.includes('guten tag')) {
simulateResponse('Hallo und willkommen bei ITS-Böhmer! Wie kann ich Ihnen helfen? Ich kann Sie zu Terminen, Komponenten oder Ihrem Smart-Home-Projekt beraten.')
return
}
// Default response
simulateResponse('Danke für Ihre Nachricht! Unser Team meldet sich in Kürze bei Ihnen. Sie können auch direkt einen Termin buchen oder uns unter info@its-boehmer.de erreichen.')
}
function setPanelAccessibility(open: boolean) {
const panel = document.getElementById('chatPanel')
if (!panel) return
panel.setAttribute('aria-hidden', String(!open))
panel.querySelectorAll('button, textarea, a, [tabindex]').forEach((el) => {
if (open) el.removeAttribute('tabindex')
else el.setAttribute('tabindex', '-1')
})
}
function openChat(options: { intent?: string } = {}) {
const wasOpen = state.isOpen
if (!wasOpen) state.lastFocusedElement = document.activeElement as HTMLElement | null
state.isOpen = true
const panel = document.getElementById('chatPanel')
const trigger = document.getElementById('chatTrigger')
panel?.classList.add('is-open')
setPanelAccessibility(true)
trigger?.classList.add('is-open')
trigger?.setAttribute('aria-expanded', 'true')
trigger?.setAttribute('aria-label', 'Beratungschat schließen')
// On small screens, CTAs usually sit in the mobile navigation. Wait until
// the menu has closed and then bring the chat panel into view without
// unexpectedly opening the on-screen keyboard.
window.requestAnimationFrame(() => {
panel?.scrollIntoView({ block: 'end', inline: 'nearest', behavior: 'smooth' })
if (window.matchMedia('(min-width: 641px)').matches) {
document.getElementById('chatInput')?.focus()
} else if (!wasOpen) {
const firstQuickAction = document.querySelector('.chat-quick-btn')
firstQuickAction?.focus({ preventScroll: true })
}
})
if (options.intent) {
handleCtaIntent(options.intent)
}
}
function closeChat() {
state.isOpen = false
const panel = document.getElementById('chatPanel')
const trigger = document.getElementById('chatTrigger')
panel?.classList.remove('is-open')
setPanelAccessibility(false)
trigger?.classList.remove('is-open')
trigger?.setAttribute('aria-expanded', 'false')
trigger?.setAttribute('aria-label', 'Beratungschat öffnen')
state.lastFocusedElement?.focus?.({ preventScroll: true })
state.lastFocusedElement = null
}
function toggleChat() {
if (state.isOpen) {
closeChat()
} else {
openChat()
}
}
function handleCtaIntent(intent: string) {
const alreadyAnswered = state.messages.some((message) => (
message.role === 'assistant' && message.text.includes('Ihr Projekt kurz einordnen')
))
if (alreadyAnswered) return
switch (intent) {
case 'project':
addMessage(
'assistant',
'Gerne — ich kann Ihr Projekt kurz einordnen. Geht es um ein Eigenheim, einen Neubau, eine Nachrüstung, Smart Office Wissen oder Gebäudeautomatisierung Freudenberg im Raum Siegen, Betzdorf oder Wissen?',
)
break
case 'planner':
addMessage(
'assistant',
'Der Gebäudeplaner ist ideal für eine erste Material- und Raumübersicht. Wenn Sie möchten, können Sie mir hier kurz Objektart, Räume und gewünschte Funktionen nennen.',
)
break
case 'booking':
addMessage(
'assistant',
'Für eine Beratung können wir direkt einen Termin abstimmen. Schreiben Sie mir kurz Ihr Anliegen oder nutzen Sie die Schnellaktion „Termin buchen“.',
)
break
}
}
function sendMessage() {
const input = document.getElementById('chatInput') as HTMLTextAreaElement | null
if (!input || !input.value.trim()) return
const text = input.value.trim()
input.value = ''
autoGrow(input)
addMessage('user', text)
processUserMessage(text)
}
// Global function to open chat from planner or other scripts
function openChatWidget() {
openChat()
}
// Expose globally so planner.ts and other scripts can call it
;(window as unknown as Record).openChatWidget = openChatWidget
function initChat() {
if (document.querySelector('.chat-widget')) return
injectStyles()
const widget = buildWidget()
document.body.appendChild(widget)
// Send greeting after a short delay (only if no messages yet)
if (state.messages.length === 0) {
setTimeout(() => {
addMessage(
'assistant',
'Hallo! 👋 Schön, dass Sie da sind. Ich bin der ITS-Böhmer Assistant für Smart Home im Siegerland. Ob Smart Home in Siegen, Homematic IP in Betzdorf, Smart Office in Wissen oder Gebäudeautomatisierung in Freudenberg — ich helfe Ihnen gerne weiter. Was kann ich für Sie tun?',
)
renderQuickActions()
}, 600)
}
widget.addEventListener('chat:close', closeChat)
// Trigger button
document.getElementById('chatTrigger')?.addEventListener('click', toggleChat)
// Close button
document.getElementById('chatCloseBtn')?.addEventListener('click', closeChat)
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && state.isOpen) closeChat()
if (e.key === 'Tab' && state.isOpen) {
const panel = document.getElementById('chatPanel')
if (!panel) return
const focusable = Array.from(panel.querySelectorAll('button:not([disabled]), textarea:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])'))
if (!focusable.length) return
const first = focusable[0]
const last = focusable[focusable.length - 1]
if (e.shiftKey && document.activeElement === first) {
e.preventDefault()
last.focus()
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault()
first.focus()
}
}
})
document.addEventListener('itsb:mobile-nav-open', closeChat)
// Send button
document.getElementById('chatSendBtn')?.addEventListener('click', sendMessage)
// Enter to send (Shift+Enter for newline)
const input = document.getElementById('chatInput') as HTMLTextAreaElement | null
input?.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
sendMessage()
}
})
input?.addEventListener('input', () => {
if (input) autoGrow(input)
})
// Quick action buttons
document.getElementById('chatQuickActions')?.addEventListener('click', (e) => {
const btn = (e.target as HTMLElement).closest('.chat-quick-btn') as HTMLElement | null
if (btn) handleQuickAction(btn.dataset.action ?? '')
})
// Global trigger: any element with data-chat-trigger
document.addEventListener('click', (e) => {
const trigger = (e.target as HTMLElement).closest('[data-chat-trigger]') as HTMLElement | null
if (!trigger) return
// Only intercept if the chat panel is actually available; otherwise let the
// native link/button behavior (e.g. href="/kontakt/") work as a fallback.
const panel = document.getElementById('chatPanel')
if (panel) {
e.preventDefault()
openChat({ intent: trigger.dataset.chatIntent })
}
})
}
// Init when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initChat)
} else {
initChat()
}