/* DEDICATED JAVASCRIPT FOR AIMOJSTER.SI CHATBOT WIDGET Last Updated: 16. September 2025 (v8.0 - Final Production Version) Author: Gemini AI for AIMojster.si This is the final, clean production version of the chatbot script. It reliably creates, stores (per session), and sends a unique session ID with every user message, ensuring that the n8n workflow functions correctly. */ document.addEventListener('DOMContentLoaded', function() { // --- DOM ELEMENTI --- const chatWidgetButton = document.getElementById('chat-widget-button'); const chatContainer = document.getElementById('chat-widget-container'); const closeChatBtn = document.getElementById('close-chat-btn'); const chatMessagesContainer = document.getElementById('chat-messages'); const chatInputForm = document.getElementById('chat-input-form'); const chatInputField = document.getElementById('chat-input'); // --- KONFIGURACIJA --- const N8N_WEBHOOK_URL = 'https://n8n.spletnimojster.si/webhook/joze/chat'; // Preverimo, ali obstajajo vsi potrebni HTML elementi za delovanje. if (!chatWidgetButton || !chatContainer || !chatInputForm) { console.error("Chatbot HTML elements could not be found. The script will not initialize."); return; } // ====================================================================== // // === UPRAVLJANJE S SEJO (SESSION ID MANAGEMENT) === // // ====================================================================== // /** * Zanesljivo pridobi ali ustvari unikaten Session ID za trenutni pogovor. * Uporablja `sessionStorage`, kar pomeni, da ID obstane med osveževanjem strani, * a se ponastavi, ko uporabnik zapre zavihek brskalnika. * @returns {string} The unique session ID for the current chat session. */ function getSessionId() { const SESSION_KEY = 'aimojster_chatbot_session_id'; // Uporabimo unikatno ime ključa let sessionId = sessionStorage.getItem(SESSION_KEY); if (!sessionId) { // crypto.randomUUID() je moderen, varen in standarden način za generiranje UUID-jev. sessionId = crypto.randomUUID(); sessionStorage.setItem(SESSION_KEY, sessionId); } return sessionId; } // ====================================================================== // // === KOMUNIKACIJA Z N8N === // // ====================================================================== // /** * Sestavi in pošlje uporabnikovo sporočilo skupaj s session ID-jem na n8n webhook. * @param {string} userMessage - Sporočilo, ki ga je vnesel uporabnik. */ async function sendMessageToBot(userMessage) { showTypingIndicator(); // Pridobimo ali ustvarimo session ID za to sejo. const currentSessionId = getSessionId(); // Sestavimo pravilen objekt (payload), ki ga n8n pričakuje. const payload = { sessionId: currentSessionId, chatInput: userMessage, action: "sendMessage" }; try { const response = await fetch(N8N_WEBHOOK_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) { throw new Error(`Server returned status: ${response.status}`); } const data = await response.json(); const botReply = data.output; if (botReply) { addBotMessageToUI(botReply); } else { // To se zgodi, če n8n vrne prazen odgovor ali napačno strukturo. console.error("Response from bot was empty or in a malformed structure.", data); throw new Error("Malformed response from server."); } } catch (error) { console.error('Error communicating with the chatbot API:', error); addBotMessageToUI("Oprostite, prišlo je do tehnične napake. Poskusite znova kasneje."); } } // ====================================================================== // // === UPRAVLJANJE Z UI IN DOGODKI === // // ====================================================================== // // --- Pomožne UI funkcije --- function openChatWidget() { chatContainer.classList.remove('hidden'); chatInputField.focus(); } function closeChatWidget() { chatContainer.classList.add('hidden'); } function addMessageToUI(text, sender) { const messageElement = document.createElement('div'); messageElement.classList.add('chat-message', `${sender}-message`); messageElement.textContent = text; chatMessagesContainer.appendChild(messageElement); chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight; } function showTypingIndicator() { if (chatMessagesContainer.querySelector('.typing-indicator')) return; const indicator = document.createElement('div'); indicator.classList.add('chat-message', 'bot-message', 'typing-indicator'); indicator.innerHTML = '...'; chatMessagesContainer.appendChild(indicator); chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight; } function hideTypingIndicator() { const indicator = chatMessagesContainer.querySelector('.typing-indicator'); if (indicator) indicator.remove(); } const addUserMessageToUI = (message) => addMessageToUI(message, 'user'); const addBotMessageToUI = (message) => { hideTypingIndicator(); addMessageToUI(message, 'bot'); }; // --- Glavni Event Listener za oddajo sporočila --- chatInputForm.addEventListener('submit', function(event) { event.preventDefault(); const userMessage = chatInputField.value.trim(); if (userMessage) { addUserMessageToUI(userMessage); sendMessageToBot(userMessage); chatInputField.value = ''; } }); // --- Event Listenerji za odpiranje in zapiranje okna --- chatWidgetButton.addEventListener('click', openChatWidget); closeChatBtn.addEventListener('click', closeChatWidget); console.log("Chatbot v8.0 (Final Production) initialized successfully."); });