const chatbotToggler = document.querySelector(".chatbot-toggler"); const closeBtn = document.querySelector(".close-btn"); const chatbox = document.querySelector(".chatbox"); const chatInput = document.querySelector(".chat-input textarea"); const sendChatBtn = document.querySelector(".chat-input span"); // Функция для получения или генерации session_id //function getSessionId() { // let sessionId = localStorage.getItem('session_id'); // if (!sessionId) { // sessionId = crypto.randomUUID(); // localStorage.setItem('session_id', sessionId); // } // return sessionId; let userMessage = null; // Variable to store user's message //const API_KEY = "PASTE-YOUR-API-KEY"; // Paste your API key here const inputInitHeight = chatInput.scrollHeight; const createChatLi = (message, className) => { // Create a chat
  • element with passed message and className const chatLi = document.createElement("li"); chatLi.classList.add("chat", `${className}`); let chatContent = className === "outgoing" ? `

    ` : `smart_toy

    `; chatLi.innerHTML = chatContent; chatLi.querySelector("p").textContent = message; return chatLi; // return chat
  • element } const generateResponse = (chatElement) => { const API_URL = "https://hgswdi5icult2y-8002.proxy.runpod.net/query"; const messageElement = chatElement.querySelector("p"); const sessionId = getSessionId(); //const sessionId = getSessionId(); //const sessionId = "1234567"; // Define the properties and message for the API request const requestOptions = { method: "POST", headers: { 'Content-Type': 'application/json', 'X-Session-ID': sessionId // Передача session_id через заголовок }, body: JSON.stringify(userMessage) } // Send POST request to API, get response and set the reponse as paragraph text fetch(API_URL, requestOptions).then(res => res.text()).then(data => { //messageElement.textContent = data.trim(); //messageElement.textContent = data.replace(/"/g, '').replace(/\\n/g, '
    '); messageElement.textContent = data.replace(/"/g, '').replace(/\\n/g, ' ').trim(); }).catch(() => { messageElement.classList.add("error"); messageElement.textContent = "Упс! Что-то пошло не так. Пожалуйста, попробуйте еще раз."; }).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight)); } const handleChat = () => { userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace if(!userMessage) return; // Clear the input textarea and set its height to default chatInput.value = ""; chatInput.style.height = `${inputInitHeight}px`; // Append the user's message to the chatbox chatbox.appendChild(createChatLi(userMessage, "outgoing")); chatbox.scrollTo(0, chatbox.scrollHeight); setTimeout(() => { // Display "Thinking..." message while waiting for the response const incomingChatLi = createChatLi("Думаю...", "incoming"); chatbox.appendChild(incomingChatLi); chatbox.scrollTo(0, chatbox.scrollHeight); generateResponse(incomingChatLi); }, 600); } chatInput.addEventListener("input", () => { // Adjust the height of the input textarea based on its content chatInput.style.height = `${inputInitHeight}px`; chatInput.style.height = `${chatInput.scrollHeight}px`; }); chatInput.addEventListener("keydown", (e) => { // If Enter key is pressed without Shift key and the window // width is greater than 800px, handle the chat if(e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) { e.preventDefault(); handleChat(); } }); sendChatBtn.addEventListener("click", handleChat); closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot")); chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));