102 lines
3.7 KiB
JavaScript
102 lines
3.7 KiB
JavaScript
// KI Chat Bubble — Flowise embed
|
|
// To remove: delete this file and the <script> tag in index.html that loads it.
|
|
|
|
import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js";
|
|
|
|
// On production the PHP proxy is used so credentials never appear in client JS.
|
|
// On localhost the embed talks directly to Flowise (dev only).
|
|
const isLocal = ['localhost', '127.0.0.1'].includes(window.location.hostname);
|
|
|
|
Chatbot.init({
|
|
chatflowid: isLocal ? "d63d3d02-b5fa-482c-9161-c21c615fb625" : "chat",
|
|
apiHost: isLocal ? "https://flowise.profice.de" : window.location.origin,
|
|
theme: {
|
|
button: {
|
|
backgroundColor: "#5a5252",
|
|
right: 24,
|
|
bottom: 24,
|
|
size: "medium",
|
|
iconColor: "#EBEBDE"
|
|
},
|
|
chatWindow: {
|
|
showTitle: true,
|
|
title: "Profice Assistent",
|
|
titleBackgroundColor: "#5a5252",
|
|
titleTextColor: "#EBEBDE",
|
|
welcomeMessage: "Hallo! Ich bin der KI-Assistent von Profice. Wie kann ich Ihnen helfen?\n\nIch berate Sie gerne zu unseren Lösungen für Automatisierung, KI-Systeme und digitale Prozesse.",
|
|
backgroundColor: "#ffffff",
|
|
fontSize: 15,
|
|
showAgentMessages: true,
|
|
poweredByTextColor: "#ffffff",
|
|
botMessage: {
|
|
backgroundColor: "#f5f4ef",
|
|
textColor: "#5a5252",
|
|
showAvatar: true,
|
|
avatarSrc: "/images/icons/KI.png"
|
|
},
|
|
userMessage: {
|
|
backgroundColor: "#5a5252",
|
|
textColor: "#EBEBDE",
|
|
showAvatar: false
|
|
},
|
|
textInput: {
|
|
placeholder: "Ihre Nachricht...",
|
|
backgroundColor: "#ffffff",
|
|
textColor: "#5a5252",
|
|
sendButtonColor: "#d4864a"
|
|
},
|
|
footer: {
|
|
textColor: "#999999",
|
|
text: "Dies ist ein KI-System. Bitte geben Sie keine sensiblen personenbezogenen Daten ein.",
|
|
company: " ",
|
|
companyLink: ""
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Inject orange border around just the header.
|
|
// ::part(header) is not exported by Flowise so we inject into the shadow root directly.
|
|
// The header is identified as the element that has the dark titleBackgroundColor AND
|
|
// contains the chat title — this avoids matching user message bubbles.
|
|
function injectHeaderStyle() {
|
|
const flowise = document.querySelector('flowise-chatbot');
|
|
if (!flowise?.shadowRoot) return false;
|
|
|
|
const shadow = flowise.shadowRoot;
|
|
if (shadow.querySelector('#profice-header-applied')) return true;
|
|
|
|
const all = [...shadow.querySelectorAll('*')];
|
|
|
|
const header = all.find(el => {
|
|
const bg = getComputedStyle(el).backgroundColor;
|
|
return bg === 'rgb(90, 82, 82)' && el.textContent.includes('Profice Assistent');
|
|
});
|
|
|
|
if (!header) return false;
|
|
|
|
header.style.border = '3px solid #d4864a';
|
|
header.style.boxSizing = 'border-box';
|
|
|
|
// Round the bottom corners of the chat window container (parent of the header)
|
|
const chatWindow = header.parentElement;
|
|
if (chatWindow) {
|
|
chatWindow.style.borderBottomLeftRadius = '12px';
|
|
chatWindow.style.borderBottomRightRadius = '12px';
|
|
chatWindow.style.overflow = 'hidden';
|
|
}
|
|
|
|
const marker = document.createElement('span');
|
|
marker.id = 'profice-header-applied';
|
|
marker.style.display = 'none';
|
|
shadow.appendChild(marker);
|
|
|
|
return true;
|
|
}
|
|
|
|
// Retry until shadow DOM is populated (widget loads async)
|
|
let attempts = 0;
|
|
const interval = setInterval(() => {
|
|
if (injectHeaderStyle() || ++attempts > 20) clearInterval(interval);
|
|
}, 300);
|