{"id":75554,"date":"2025-07-30T17:11:27","date_gmt":"2025-07-30T17:11:27","guid":{"rendered":"https:\/\/lumi-systems.io\/?page_id=75554"},"modified":"2026-04-16T09:07:34","modified_gmt":"2026-04-16T07:07:34","slug":"ai-support-assistent","status":"publish","type":"page","link":"https:\/\/lumi-systems.io\/en\/ai-support-assistent\/","title":{"rendered":"AI Support Assistent"},"content":{"rendered":"\n<!-- LUMI-SYSTEMS.IO AI SUPPORT ASSISTENT -->\n<!-- Migrated from Elementor to Gutenberg\/Kadence -->\n<!-- Custom shortcode preserved below -->\n\n<style>\n#lumi-ai-page {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: #1f2937;\n    max-width: 1000px;\n    margin: 0 auto;\n    padding: 40px 20px;\n}\n\n#lumi-ai-page h1 {\n    font-size: 36px;\n    font-weight: 700;\n    color: #0f172a;\n    margin-bottom: 16px;\n    text-align: center;\n}\n\n#lumi-ai-page .intro-text {\n    font-size: 18px;\n    color: #666;\n    text-align: center;\n    margin-bottom: 40px;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.feature-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 20px;\n    margin-bottom: 50px;\n}\n\n.feature-card {\n    background: linear-gradient(135deg, #f0f9ff, #f5faff);\n    border: 1px solid #dbeafe;\n    padding: 20px;\n    border-radius: 8px;\n}\n\n.feature-icon {\n    font-size: 32px;\n    margin-bottom: 12px;\n}\n\n.feature-card h3 {\n    font-size: 16px;\n    font-weight: 600;\n    color: #0f172a;\n    margin-bottom: 8px;\n}\n\n.feature-card p {\n    font-size: 14px;\n    color: #666;\n    margin: 0;\n}\n<\/style>\n\n<div id=\"lumi-ai-page\">\n    <img decoding=\"async\" src=\"https:\/\/lumi-systems.io\/wp-content\/uploads\/2025\/07\/how_can_I_help_bg-transparent-1-1024x512.png\" alt=\"AI Support Assistant\" style=\"width: 100%; height: auto; border-radius: 12px; margin-bottom: 40px;\">\n    \n    <h1>Willkommen beim Lumi-Systems AI Support Assistant<\/h1>\n    \n    <p class=\"intro-text\">\n        Unser KI-gest\u00fctzter Support-Assistent hilft Ihnen rund um die Uhr bei Fragen zur Windows-Linux-Migration, Linux-Konfiguration und technischen Themen rund um unsere Produkte und Dienstleistungen.\n    <\/p>\n    \n    <div class=\"feature-cards\">\n        <div class=\"feature-card\">\n            <div class=\"feature-icon\">\ud83e\udd16<\/div>\n            <h3>24\/7 Verf\u00fcgbarkeit<\/h3>\n            <p>Stellen Sie Ihre Fragen jederzeit, auch au\u00dferhalb unserer Gesch\u00e4ftszeiten.<\/p>\n        <\/div>\n        \n        <div class=\"feature-card\">\n            <div class=\"feature-icon\">\u26a1<\/div>\n            <h3>Sofortige Antworten<\/h3>\n            <p>Erhalten Sie instant L\u00f6sungen und Anleitung zu Linux-Betriebssystemen.<\/p>\n        <\/div>\n        \n        <div class=\"feature-card\">\n            <div class=\"feature-icon\">\ud83d\udca1<\/div>\n            <h3>Praktische Tipps<\/h3>\n            <p>Von Anf\u00e4nger bis Expert &#8211; wir helfen bei allen Fragen.<\/p>\n        <\/div>\n        \n        <div class=\"feature-card\">\n            <div class=\"feature-icon\">\ud83d\udcc1<\/div>\n            <h3>Datei-Upload<\/h3>\n            <p>Laden Sie Screenshots oder Dateien hoch f\u00fcr detaillierte Hilfe.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n    \n    <!-- Markdown-Parser f\u00fcr AI-Antworten -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/marked\/marked.min.js\"><\/script>\n    \n    <div id=\"ai-assistant-69e123557aee7\" class=\"lumi-ai-assistant\" style=\"max-width: 100%; margin: 0 auto; text-align: center;\">\n        \n        <!-- H\u00e4ufige Fragen f\u00fcr Windows zu Linux Migration -->\n        <div class=\"ai-questions\">\n            <h3>H\u00e4ufige Fragen zur Windows-Linux Migration:<\/h3>\n            <div class=\"questions-grid\">\n                <button class=\"question-btn\" data-question=\"Wie kann ich meine Windows-Daten vor dem Umstieg auf Linux sichern?\">Datensicherung vor Migration<\/button>\n                \n                <button class=\"question-btn\" data-question=\"Welche Linux-Distribution ist am besten f\u00fcr Windows-Umsteiger geeignet?\">Beste Linux-Distribution f\u00fcr Einsteiger<\/button>\n                \n                <button class=\"question-btn\" data-question=\"Kann ich Linux neben Windows installieren (Dual-Boot)?\">Dual-Boot Installation einrichten<\/button>\n                \n                <button class=\"question-btn\" data-question=\"Funktionieren meine Windows-Programme unter Linux?\">Windows-Programme unter Linux nutzen<\/button>\n                \n                <button class=\"question-btn\" data-question=\"Wie \u00fcbertrage ich meine Dateien von Windows zu Linux?\">Dateien von Windows \u00fcbertragen<\/button>\n                \n                <button class=\"question-btn\" data-question=\"Welche Hardware-Treiber ben\u00f6tige ich f\u00fcr Linux?\">Hardware-Treiber f\u00fcr Linux finden<\/button>\n                \n                <button class=\"question-btn\" data-question=\"Wie lerne ich die Linux-Kommandozeile als Windows-Nutzer?\">Linux Terminal f\u00fcr Windows-Nutzer<\/button>\n                \n                <button class=\"question-btn\" data-question=\"Was sind die wichtigsten Unterschiede zwischen Windows und Linux?\">Windows vs Linux Unterschiede<\/button>\n            <\/div>\n        <\/div>\n        \n        <!-- Chat-Bereich -->\n        <div class=\"ai-chat-container\" style=\"height: 600px;\">\n            <div class=\"ai-messages\" id=\"messages-ai-assistant-69e123557aee7\">\n                <div class=\"ai-message\">\n                    <div class=\"message-content\">\n                        <strong>Lumi-Systems AI Support Assistant:<\/strong><br>\n                        Hallo! Ich bin Ihr Lumi-Systems AI Support Assistant. \n                        Ich helfe Ihnen gerne bei Fragen zur Windows-Linux Migration und allen technischen Aspekten des Umstiegs. \n                        W\u00e4hlen Sie eine der vorgeschlagenen Fragen oder stellen Sie Ihre eigene Frage!\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Eingabebereich -->\n            <div class=\"ai-input-area\">\n                <div class=\"input-group\">\n                    <textarea \n                        id=\"user-input-ai-assistant-69e123557aee7\" \n                        placeholder=\"Stellen Sie hier Ihre Frage zu Linux, Ubuntu oder AnduinOS...\"\n                        rows=\"3\"\n                    ><\/textarea>\n                    <button id=\"send-btn-ai-assistant-69e123557aee7\" class=\"send-button\">\n                        \ud83d\udce4 Senden\n                    <\/button>\n                <\/div>\n                \n                <!-- Datei-Upload Bereich -->\n                <div class=\"file-upload-area\">\n                    <input \n                        type=\"file\" \n                        id=\"file-input-ai-assistant-69e123557aee7\" \n                        accept=\"image\/*,.jpg,.jpeg,.png,.gif,.webp,.bmp,.pdf,.txt,.doc,.docx\" \n                        multiple \n                        style=\"display: none;\"\n                        title=\"Unterst\u00fctzte Formate: Alle Bildformate, PDF, Text, Word\"\n                    >\n                    <button id=\"upload-btn-ai-assistant-69e123557aee7\" class=\"upload-button\">\n                        \ud83d\udcce Dateien hochladen (max. 10MB)\n                    <\/button>\n                    <div id=\"file-preview-ai-assistant-69e123557aee7\" class=\"file-preview\"><\/div>\n                <\/div>\n                \n                <div class=\"loading-indicator\" id=\"loading-ai-assistant-69e123557aee7\" style=\"display: none;\">\n                    <span>\ud83e\udd16 AI denkt nach...<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n    .lumi-ai-assistant {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        border: 1px solid #e1e5e9;\n        border-radius: 12px;\n        background: #ffffff;\n        box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n        overflow: hidden;\n        max-width: 900px;\n        margin: 20px auto;\n        text-align: center;\n    }\n    \n    \/* Questions Section *\/\n    .ai-questions {\n        padding: 30px 25px;\n        background: #ffffff;\n    }\n    \n    .ai-questions h3 {\n        text-align: center;\n        margin: 0 0 30px 0;\n        color: #2c3e50;\n        font-size: 1.4em;\n        font-weight: 600;\n        line-height: 1.3;\n    }\n    \n    .questions-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n        gap: 15px;\n        max-width: 850px;\n        margin: 0 auto;\n    }\n    \n    .question-btn {\n        background: #f8f9fa;\n        border: 1px solid #dee2e6;\n        border-radius: 8px;\n        padding: 16px 20px;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        font-size: 0.95em;\n        font-weight: 500;\n        color: #495057;\n        text-align: left;\n        line-height: 1.4;\n        width: 100%;\n    }\n    \n    .question-btn:hover {\n        background: #e9ecef;\n        border-color: #667eea;\n        transform: translateY(-2px);\n        box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n        color: #2c3e50;\n    }\n    \n    .question-btn:active {\n        transform: translateY(0);\n        box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n    }\n    \n    .ai-chat-container {\n        display: flex;\n        flex-direction: column;\n        background: white;\n        border-radius: 0 0 16px 16px;\n    }\n    \n    .ai-messages {\n        flex: 1;\n        padding: 25px;\n        overflow-y: auto;\n        max-height: calc(100% - 120px);\n        background: #fafbfc;\n    }\n    \n    .user-message, .ai-message {\n        margin-bottom: 20px;\n        padding: 16px 20px;\n        border-radius: 18px;\n        max-width: 80%;\n        position: relative;\n        animation: messageSlide 0.3s ease-out;\n        text-align: left;\n    }\n    \n    @keyframes messageSlide {\n        from {\n            opacity: 0;\n            transform: translateY(20px);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n    \n    .user-message {\n        background: #4169E1;\n        color: white;\n        margin-left: auto;\n        text-align: left;\n        box-shadow: 0 4px 12px rgba(65, 105, 225, 0.3);\n    }\n    \n    .ai-message {\n        background: white;\n        border: 1px solid #e9ecef;\n        color: #495057;\n        box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    }\n    \n    .message-content {\n        line-height: 1.6;\n        font-size: 0.95em;\n    }\n    \n    .ai-input-area {\n        padding: 25px;\n        border-top: 1px solid #e9ecef;\n        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n    }\n    \n    .input-group {\n        display: flex;\n        gap: 15px;\n        align-items: flex-end;\n        background: white;\n        border-radius: 25px;\n        padding: 8px;\n        box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n    }\n    \n    .input-group textarea {\n        flex: 1;\n        border: none;\n        border-radius: 20px;\n        padding: 15px 20px;\n        font-family: inherit;\n        font-size: 15px;\n        resize: none;\n        min-height: 20px;\n        background: #f8f9fa;\n        transition: all 0.3s ease;\n    }\n    \n    .input-group textarea:focus {\n        outline: none;\n        background: white;\n        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);\n    }\n    \n    .send-button {\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        color: white;\n        border: none;\n        border-radius: 20px;\n        padding: 15px 25px;\n        cursor: pointer;\n        font-weight: 600;\n        transition: all 0.3s ease;\n        white-space: nowrap;\n        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);\n    }\n    \n    \/* File Upload Styles *\/\n    .file-upload-area {\n        margin-top: 15px;\n        text-align: center;\n    }\n    \n    .upload-button {\n        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);\n        color: white;\n        border: none;\n        border-radius: 20px;\n        padding: 12px 20px;\n        cursor: pointer;\n        font-weight: 600;\n        transition: all 0.3s ease;\n        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);\n        font-size: 14px;\n    }\n    \n    .upload-button:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);\n    }\n    \n    .file-preview {\n        margin-top: 15px;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 10px;\n        justify-content: center;\n    }\n    \n    .file-item {\n        background: white;\n        border: 1px solid #dee2e6;\n        border-radius: 8px;\n        padding: 10px;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        font-size: 14px;\n        box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        position: relative;\n    }\n    \n    .file-item .remove-file {\n        background: #dc3545;\n        color: white;\n        border: none;\n        border-radius: 50%;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        font-size: 12px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-left: 5px;\n    }\n    \n    .file-item .remove-file:hover {\n        background: #c82333;\n    }\n    \n    .file-item img {\n        max-width: 50px;\n        max-height: 50px;\n        border-radius: 4px;\n        object-fit: cover;\n    }\n    \n    .send-button:hover {\n        background: #5a6fd8;\n    }\n    \n    .send-button:disabled {\n        background: #6c757d;\n        cursor: not-allowed;\n    }\n    \n    .loading-indicator {\n        text-align: center;\n        padding: 10px;\n        color: #6c757d;\n        font-style: italic;\n    }\n    \n    @media (max-width: 768px) {\n        .suggestion-buttons {\n            grid-template-columns: 1fr;\n        }\n        \n        .input-group {\n            flex-direction: column;\n            align-items: stretch;\n        }\n    }\n    <\/style>\n\n    <script>\n    (function() {\n        const containerId = 'ai-assistant-69e123557aee7';\n        const messagesContainer = document.getElementById('messages-' + containerId);\n        const userInput = document.getElementById('user-input-' + containerId);\n        const sendButton = document.getElementById('send-btn-' + containerId);\n        const loadingIndicator = document.getElementById('loading-' + containerId);\n        const fileInput = document.getElementById('file-input-' + containerId);\n        const uploadButton = document.getElementById('upload-btn-' + containerId);\n        const filePreview = document.getElementById('file-preview-' + containerId);\n        \n        let conversationHistory = [];\n        let attachedFiles = [];\n        \n        \/\/ Event Listeners\n        sendButton.addEventListener('click', sendMessage);\n        userInput.addEventListener('keypress', function(e) {\n            if (e.key === 'Enter' && !e.shiftKey) {\n                e.preventDefault();\n                sendMessage();\n            }\n        });\n        \n        \/\/ Clipboard Paste Event f\u00fcr Screenshots\n        \/\/ Nur ein Event-Listener auf dem Container, um Doppel-Events zu vermeiden\n        document.getElementById(containerId).addEventListener('paste', function(e) {\n            handleClipboardPaste(e);\n        });\n        \n        \/\/ Upload Event Listeners\n        uploadButton.addEventListener('click', function() {\n            fileInput.click();\n        });\n        \n        fileInput.addEventListener('change', function(e) {\n            handleFileSelection(e.target.files);\n        });\n        \n        \/\/ Fragen-Buttons\n        document.querySelectorAll('#ai-assistant-69e123557aee7 .question-btn').forEach(btn => {\n            btn.addEventListener('click', function() {\n                const question = this.getAttribute('data-question');\n                userInput.value = question;\n                sendMessage();\n            });\n        });\n        \n        function handleFileSelection(files) {\n            Array.from(files).forEach(file => {\n                \/\/ Dateigr\u00f6\u00dfe pr\u00fcfen (10MB Limit)\n                if (file.size > 10 * 1024 * 1024) {\n                    showNotification('Datei ist zu gro\u00df. Maximum: 10MB', 'error');\n                    return;\n                }\n                \n                \/\/ Unterst\u00fctzte Dateitypen pr\u00fcfen\n                const supportedTypes = [\n                    'image\/jpeg', 'image\/jpg', 'image\/png', 'image\/gif', 'image\/webp', 'image\/bmp',\n                    'application\/pdf', 'text\/plain',\n                    'application\/msword', 'application\/vnd.openxmlformats-officedocument.wordprocessingml.document'\n                ];\n                \n                if (!supportedTypes.includes(file.type) && !file.type.startsWith('image\/')) {\n                    showNotification('Dateityp nicht unterst\u00fctzt. Unterst\u00fctzt: Bilder, PDF, Text, Word', 'error');\n                    return;\n                }\n                \n                const fileId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);\n                const fileObj = {\n                    id: fileId,\n                    file: file,\n                    name: file.name,\n                    type: file.type,\n                    size: file.size\n                };\n                \n                attachedFiles.push(fileObj);\n                displayFilePreview(fileObj);\n                \n                \/\/ Erfolgreiche Upload-Benachrichtigung f\u00fcr Bilder\n                if (file.type.startsWith('image\/')) {\n                    showNotification('Bild erfolgreich hinzugef\u00fcgt: ' + file.name, 'success');\n                }\n            });\n        }\n        \n        function displayFilePreview(fileObj) {\n            const fileItem = document.createElement('div');\n            fileItem.className = 'file-item';\n            fileItem.setAttribute('data-file-id', fileObj.id);\n            \n            let fileIcon = '\ud83d\udcc4';\n            let fileInfo = '';\n            \n            if (fileObj.type.startsWith('image\/')) {\n                fileIcon = '\ud83d\uddbc\ufe0f';\n                const sizeKB = Math.round(fileObj.size \/ 1024);\n                fileInfo = `<small style=\"color: #666; display: block;\">Bild \u2022 ${sizeKB} KB \u2022 Bereit f\u00fcr AI-Analyse<\/small>`;\n            } else if (fileObj.type.includes('pdf')) {\n                fileIcon = '\ud83d\udcc4';\n                fileInfo = `<small style=\"color: #666; display: block;\">PDF \u2022 ${Math.round(fileObj.size \/ 1024)} KB<\/small>`;\n            } else {\n                fileInfo = `<small style=\"color: #666; display: block;\">${fileObj.type} \u2022 ${Math.round(fileObj.size \/ 1024)} KB<\/small>`;\n            }\n            \n            fileItem.innerHTML = `\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\n                    <div style=\"flex: 1;\">\n                        <div>${fileIcon} ${fileObj.name}<\/div>\n                        ${fileInfo}\n                    <\/div>\n                    <button class=\"remove-file\" onclick=\"removeFile('${fileObj.id}')\" style=\"background: #ff4757; color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 14px;\">\u00d7<\/button>\n                <\/div>\n            `;\n            \n            \/\/ F\u00fcr Bilder: Thumbnail anzeigen mit verbesserter Darstellung\n            if (fileObj.type.startsWith('image\/')) {\n                const reader = new FileReader();\n                reader.onload = function(e) {\n                    const imgContainer = document.createElement('div');\n                    imgContainer.style.cssText = 'margin-top: 8px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; max-width: 200px;';\n                    \n                    const img = document.createElement('img');\n                    img.src = e.target.result;\n                    img.style.cssText = 'width: 100%; height: auto; max-height: 150px; object-fit: cover; display: block;';\n                    \n                    imgContainer.appendChild(img);\n                    fileItem.appendChild(imgContainer);\n                    \n                    \/\/ Analyse-Hinweis hinzuf\u00fcgen\n                    const analysisHint = document.createElement('div');\n                    analysisHint.style.cssText = 'margin-top: 5px; padding: 5px; background: #e3f2fd; border-radius: 4px; font-size: 12px; color: #1976d2;';\n                    analysisHint.innerHTML = '\ud83d\udca1 Tipp: Fragen Sie \"Was siehst du in diesem Bild?\" oder \"Analysiere dieses Bild\"';\n                    fileItem.appendChild(analysisHint);\n                };\n                reader.readAsDataURL(fileObj.file);\n            }\n            \n            filePreview.appendChild(fileItem);\n        }\n        \n        window.removeFile = function(fileId) {\n            attachedFiles = attachedFiles.filter(f => f.id !== fileId);\n            const fileItem = document.querySelector(`[data-file-id=\"${fileId}\"]`);\n            if (fileItem) {\n                fileItem.remove();\n            }\n        }\n        \n        function handleClipboardPaste(e) {\n            const clipboardData = e.clipboardData || window.clipboardData;\n            if (!clipboardData) return;\n            \n            const items = clipboardData.items;\n            let hasImage = false;\n            \n            for (let i = 0; i < items.length; i++) {\n                const item = items[i];\n                \n                \/\/ Pr\u00fcfe auf Bilder in der Zwischenablage\n                if (item.type.indexOf('image') !== -1) {\n                    hasImage = true;\n                    e.preventDefault(); \/\/ Verhindere Standard-Paste-Verhalten\n                    e.stopPropagation(); \/\/ Stoppe Event-Bubbling\n                    \n                    const blob = item.getAsFile();\n                    if (blob) {\n                        \/\/ Erstelle ein File-Objekt aus dem Blob\n                        const timestamp = new Date().toISOString().replace(\/[:.]\/g, '-');\n                        const file = new File([blob], `screenshot-${timestamp}.png`, {\n                            type: blob.type || 'image\/png'\n                        });\n                        \n                        \/\/ Verarbeite das Bild wie eine hochgeladene Datei\n                        handleFileSelection([file]);\n                        \n                        \/\/ Zeige Feedback\n                        showPasteNotification('Screenshot eingef\u00fcgt!');\n                    }\n                    return false; \/\/ Stoppe weitere Verarbeitung\n                }\n            }\n            \n            \/\/ Falls kein Bild gefunden wurde, erlaube normales Text-Paste\n            if (!hasImage) {\n                \/\/ Normales Paste-Verhalten f\u00fcr Text\n                return true;\n            }\n        }\n        \n        function showPasteNotification(message) {\n            \/\/ Erstelle eine tempor\u00e4re Benachrichtigung\n            const notification = document.createElement('div');\n            notification.style.cssText = `\n                position: fixed;\n                top: 20px;\n                right: 20px;\n                background: #28a745;\n                color: white;\n                padding: 12px 20px;\n                border-radius: 8px;\n                box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n                z-index: 10000;\n                font-family: inherit;\n                font-size: 14px;\n                opacity: 0;\n                transform: translateY(-20px);\n                transition: all 0.3s ease;\n            `;\n            notification.textContent = message;\n            \n            document.body.appendChild(notification);\n            \n            \/\/ Animation einblenden\n            setTimeout(() => {\n                notification.style.opacity = '1';\n                notification.style.transform = 'translateY(0)';\n            }, 10);\n            \n            \/\/ Nach 3 Sekunden ausblenden\n            setTimeout(() => {\n                notification.style.opacity = '0';\n                notification.style.transform = 'translateY(-20px)';\n                setTimeout(() => {\n                    if (notification.parentNode) {\n                        notification.parentNode.removeChild(notification);\n                    }\n                }, 300);\n            }, 3000);\n        }\n        \n        async function sendMessage() {\n            const message = userInput.value.trim();\n            if (!message && attachedFiles.length === 0) return;\n            \n            \/\/ UI Updates\n            let displayMessage = message;\n            if (attachedFiles.length > 0) {\n                displayMessage += ` [${attachedFiles.length} Datei(en) angeh\u00e4ngt]`;\n            }\n            addMessage(displayMessage, 'user');\n            userInput.value = '';\n            setLoading(true);\n            \n            try {\n                const formData = new FormData();\n                formData.append('message', message);\n                formData.append('history', JSON.stringify(conversationHistory));\n                \n                \/\/ Dateien hinzuf\u00fcgen\n                attachedFiles.forEach((fileObj, index) => {\n                    formData.append(`files[${index}]`, fileObj.file);\n                });\n                \n                const response = await fetch('https:\/\/lumi-systems.io\/en\/wp-json\/ai-assistant\/v1\/chat', {\n                    method: 'POST',\n                    body: formData\n                });\n                \n                const data = await response.json();\n                \n                \/\/ VERBESSERTE FEHLERBEHANDLUNG\n                if (data.success) {\n                    addMessage(data.response, 'ai');\n                    \n                    \/\/ Verlauf aktualisieren\n                    conversationHistory.push({\n                        role: 'user',\n                        parts: [{text: message}]\n                    });\n                    conversationHistory.push({\n                        role: 'model',\n                        parts: [{text: data.response}]\n                    });\n                    \n                    \/\/ Dateien zur\u00fccksetzen\n                    attachedFiles = [];\n                    filePreview.innerHTML = '';\n                } else {\n                    \/\/ Detaillierte Fehlerbehandlung\n                    let errorMessage = '\u274c Fehler: ';\n                    \n                    if (data.error && data.message) {\n                        errorMessage += data.message;\n                        console.error('AI Assistant Error:', data.error, data.message);\n                    } else if (data.message) {\n                        errorMessage += data.message;\n                    } else if (data.error) {\n                        errorMessage += data.error;\n                    } else {\n                        errorMessage += 'Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es erneut.';\n                    }\n                    \n                    addMessage(errorMessage, 'ai');\n                    \n                    \/\/ Debug-Informationen in Konsole\n                    console.error('Full error response:', data);\n                }\n            } catch (error) {\n                console.error('Network or parsing error:', error);\n                addMessage('\u274c Verbindungsfehler: ' + error.message + ' - Bitte pr\u00fcfen Sie Ihre Internetverbindung und versuchen Sie es erneut.', 'ai');\n            }\n            \n            setLoading(false);\n        }\n        \n        function addMessage(content, type) {\n            const messageDiv = document.createElement('div');\n            messageDiv.className = type + '-message';\n            \n            const contentDiv = document.createElement('div');\n            contentDiv.className = 'message-content';\n            \n            if (type === 'ai') {\n                \/\/ HTML-Links sind bereits vom Backend verarbeitet - direkt verwenden\n                \/\/ Markdown-Parsing deaktiviert, da es die Links zerst\u00f6rt\n                let processedContent = content;\n                \n                \/\/ Einfache Zeilenumbr\u00fcche in <br> umwandeln f\u00fcr bessere Formatierung\n                processedContent = processedContent.replace(\/\\n\/g, '<br>');\n                \n                contentDiv.innerHTML = '<strong>AI Support Assistant:<\/strong><br>' + processedContent;\n            } else {\n                contentDiv.innerHTML = '<strong>Sie:<\/strong><br>' + content;\n            }\n            \n            messageDiv.appendChild(contentDiv);\n            messagesContainer.appendChild(messageDiv);\n            messagesContainer.scrollTop = messagesContainer.scrollHeight;\n        }\n        \n        function setLoading(loading) {\n            loadingIndicator.style.display = loading ? 'block' : 'none';\n            sendButton.disabled = loading;\n        }\n    })();\n    <\/script>\n    \n    \n","protected":false},"excerpt":{"rendered":"<p>Willkommen beim Lumi-Systems AI Support Assistant Unser KI-gest\u00fctzter Support-Assistent hilft Ihnen rund um die Uhr bei Fragen zur Windows-Linux-Migration, Linux-Konfiguration und technischen Themen rund um unsere Produkte und Dienstleistungen. \ud83e\udd16 24\/7 Verf\u00fcgbarkeit Stellen Sie Ihre Fragen jederzeit, auch au\u00dferhalb unserer Gesch\u00e4ftszeiten. \u26a1 Sofortige Antworten Erhalten Sie instant L\u00f6sungen und Anleitung zu Linux-Betriebssystemen. \ud83d\udca1 Praktische Tipps&#8230;<\/p>","protected":false},"author":2,"featured_media":75556,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-75554","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/lumi-systems.io\/en\/wp-json\/wp\/v2\/pages\/75554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lumi-systems.io\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lumi-systems.io\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lumi-systems.io\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lumi-systems.io\/en\/wp-json\/wp\/v2\/comments?post=75554"}],"version-history":[{"count":71,"href":"https:\/\/lumi-systems.io\/en\/wp-json\/wp\/v2\/pages\/75554\/revisions"}],"predecessor-version":[{"id":76363,"href":"https:\/\/lumi-systems.io\/en\/wp-json\/wp\/v2\/pages\/75554\/revisions\/76363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lumi-systems.io\/en\/wp-json\/wp\/v2\/media\/75556"}],"wp:attachment":[{"href":"https:\/\/lumi-systems.io\/en\/wp-json\/wp\/v2\/media?parent=75554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}