128 lines
4.2 KiB
JavaScript
128 lines
4.2 KiB
JavaScript
// ================= CONFIG =================
|
|
const baseUrl = 'http://localhost:8000'; // Base URL for all resources
|
|
|
|
const config = {
|
|
cssUrl: `${baseUrl}/agent.css`, // CSS file
|
|
api: `https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/702862fd-dd17-4a34-8efb-e9056d2c50df/chat`, // Backend webhook endpoint
|
|
buttonImage: `${baseUrl}/images/4.svg`, // Chat toggle button image
|
|
logoImage: `${baseUrl}/images/logo.svg`, // Logo image for chat widget
|
|
preamble: 'Hallo! Wie kann ich Ihnen helfen?' // Initial bot message
|
|
};
|
|
|
|
// ================= WIDGET HTML =================
|
|
const widgetHTML = `
|
|
<div id="cw-chatWidget">
|
|
<div class="cw-header">
|
|
<img src="${config.logoImage}" alt="Logo" class="cw-logo"/>
|
|
</div>
|
|
<div id="cw-chatMessages" class="cw-messages"></div>
|
|
<form id="cw-chatForm" class="cw-form">
|
|
<input type="text" id="cw-chatInput" placeholder="Type your message..." />
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
<div id="cw-status" class="cw-status"></div>
|
|
</div>
|
|
<button id="cw-chatToggle">
|
|
<img src="${config.buttonImage}" alt="Chat"/>
|
|
</button>
|
|
`;
|
|
|
|
// ================= UTILS =================
|
|
function loadCSS(url) {
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = url;
|
|
document.head.appendChild(link);
|
|
}
|
|
|
|
function appendMessage(chatMessages, text, sender) {
|
|
const msg = document.createElement('div');
|
|
msg.classList.add('cw-message', sender === 'user' ? 'user' : 'bot');
|
|
msg.innerHTML = text;
|
|
chatMessages.appendChild(msg);
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
}
|
|
|
|
// ================= MAIN =================
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
try {
|
|
// Load CSS
|
|
loadCSS(config.cssUrl);
|
|
|
|
// Inject chat widget HTML
|
|
document.body.insertAdjacentHTML('beforeend', widgetHTML);
|
|
document.dispatchEvent(new CustomEvent('JSsucks'));
|
|
|
|
// ================= DOM REFERENCES =================
|
|
const chatToggle = document.getElementById('cw-chatToggle');
|
|
const chatWidget = document.getElementById('cw-chatWidget');
|
|
const chatForm = document.getElementById('cw-chatForm');
|
|
const chatInput = document.getElementById('cw-chatInput');
|
|
const chatMessages = document.getElementById('cw-chatMessages');
|
|
const statusDiv = document.getElementById('cw-status');
|
|
|
|
const chatid = crypto.randomUUID();
|
|
let chatOpened = false;
|
|
|
|
// ================= BOT COMMUNICATION =================
|
|
async function sendMessageToBot(messageText) {
|
|
chatWidget.classList.add('active');
|
|
appendMessage(chatMessages, messageText, 'user');
|
|
chatInput.value = '';
|
|
chatInput.focus();
|
|
|
|
try {
|
|
const res = await fetch(config.api, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
action: 'sendMessage',
|
|
chatid,
|
|
chatInput: messageText
|
|
})
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (data.status) {
|
|
statusDiv.innerHTML = data.status;
|
|
requestAnimationFrame(() => {
|
|
statusDiv.style.maxHeight = statusDiv.scrollHeight + 'px';
|
|
statusDiv.style.padding = '10px';
|
|
});
|
|
} else {
|
|
statusDiv.style.maxHeight = '0';
|
|
statusDiv.style.padding = '0 10px';
|
|
}
|
|
|
|
appendMessage(chatMessages, data.output, 'bot');
|
|
} catch (error) {
|
|
appendMessage(chatMessages, 'Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
window.sendMessageToBot = sendMessageToBot;
|
|
|
|
// ================= EVENT LISTENERS =================
|
|
chatToggle.addEventListener('click', () => {
|
|
const isVisible = chatWidget.classList.contains('active');
|
|
chatWidget.classList.toggle('active', !isVisible);
|
|
|
|
if (!isVisible && !chatOpened) {
|
|
appendMessage(chatMessages, config.preamble, 'bot');
|
|
chatOpened = true;
|
|
}
|
|
});
|
|
|
|
chatForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const input = chatInput.value.trim();
|
|
if (input) sendMessageToBot(input);
|
|
});
|
|
|
|
} catch (err) {
|
|
console.error('Failed to initialize chat widget:', err);
|
|
}
|
|
});
|