From 9203641e6acaf55da53795108c0b16fb6f7b9066 Mon Sep 17 00:00:00 2001 From: Joakim Persson Date: Wed, 31 Jul 2024 15:46:18 +0200 Subject: [PATCH] =?UTF-8?q?Inl=C3=A4sning=20av=20apiEndpoint=20och=20useMo?= =?UTF-8?q?del=20har=20flyttats=20hit.=20Funktioner=20och=20variabler=20fr?= =?UTF-8?q?=C3=A5n=20frontend.js=20exporteras=20numer=20via=20frontendApi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- smartassist/src/static/js/frontend.js | 216 +++++++++++++++++++------- 1 file changed, 160 insertions(+), 56 deletions(-) diff --git a/smartassist/src/static/js/frontend.js b/smartassist/src/static/js/frontend.js index a3ecdc0..6cccd64 100644 --- a/smartassist/src/static/js/frontend.js +++ b/smartassist/src/static/js/frontend.js @@ -1,88 +1,192 @@ +// // Get the user input element from the DOM +// const chatbox = document.getElementById('chatbox'); +// const userInput = document.getElementById('userInput'); + +// const parser = window.markdownit({ +// linkify: true, +// strikethrough: true, +// }); + +// parser.enable(['table']); + +// // const apiEndpoint = window.apiEndpoint; // Get the API endpoint +// // const useModel = window.useModel; // Get whether to use a model or not +// // console.log("frontend.js - API Endpoint: ", window.apiEndpoint); +// // console.log("frontend.js - Use model: ", window.useModel); + +// let apiEndpoint; // Make variable available outside of the scope of the event listener +// let useModel; // Make variable available outside of the scope of the event listener +// window.addEventListener('message', function(event) { +// if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin +// const { apiEndpoint, useModel } = event.data; +// console.log("client.html - API Endpoint: ", apiEndpoint); +// console.log("client.html - use model: ", useModel); +// window.apiEndpoint = apiEndpoint; +// window.useModel = useModel; +// } +// }); + +// console.log("frontend.js - API Endpoint: ", window.apiEndpoint); +// console.log("frontend.js - Use model: ", window.useModel); + +// // Define a function to send the user's message to the AI +// function sendMessage() { +// // Get the user's input message and trim any whitespace +// const query = userInput.value.trim(); + +// // Check if the message is not empty +// if (query !== '') { + +// // fetch(`${apiEndpoint}`, { +// fetch(apiEndpoint, { +// method: 'POST', +// headers: { 'Content-Type': 'application/json' }, +// body: JSON.stringify({ query, model: useModel }), // Add these parameters here +// // body: JSON.stringify({ query, url_server: "http://your-custom-url", model: "phi3:mini" }), // Add these parameters here +// }) +// .then(response => response.json()) +// .then(data => { +// // Get the AI's response from the API data +// const aiResponse = data.response; + +// // Render the user's original message in the chatbox +// renderMessage(query, 'user-message'); + +// // Render the AI's response in the chatbox +// renderMessage(aiResponse, 'ai-response'); + +// // Clear the user input field for the next message +// userInput.value = ''; +// }) +// .catch(error => console.error('Error sending message:', error)); +// } +// } + + + +// // Define a function to render a message in the chatbox with a specific class name +// function renderMessage(text, className) { +// // Create a new div element to hold the message +// const messageElement = document.createElement('div'); + +// // Add the specified class name to the element +// messageElement.className = className; + +// // // Set the text content of the element to the message text +// // messageElement.textContent = text; + +// // Use the markdown-it parser +// const html = parser.render(text); +// messageElement.innerHTML = html; + +// // Append the message element to the chatbox immediately +// // chatbox.appendChild(messageElement); + +// // Typeset math in the message element +// MathJax.typesetPromise([messageElement]).then(() => { +// // No need to append anything here, it's already appended above +// chatbox.appendChild(messageElement); + +// }); +// } + +// // Make the button toggle colour when user presses Enter on keyboard +// const sendButton = document.getElementById('sendButton'); + +// document.addEventListener('keydown', function(event) { +// if (event.key === 'Enter') { +// sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed +// } +// }); + +// document.addEventListener('keyup', function() { +// sendButton.style.backgroundColor = ''; // Restore the original style when any key is released +// }); + + + // Get the user input element from the DOM const chatbox = document.getElementById('chatbox'); const userInput = document.getElementById('userInput'); - const parser = window.markdownit({ linkify: true, strikethrough: true, }); - parser.enable(['table']); -console.log("frontend.js - API Endpoint: ", apiEndpoint); -console.log("frontend.js - use model: ", useModel); +let apiEndpoint; // Make variable available outside of the scope of the event listener +let useModel; // Make variable available outside of the scope of the event listener -// Define a function to send the user's message to the AI -function sendMessage() { - // Get the user's input message and trim any whitespace +const frontendApi = { + // Define a function to send the user's message to the AI + sendMessage: function() { + if (!window.apiEndpoint || !window.useModel) { // Check if we're ready before proceeding + console.error("Not ready yet. Please wait for apiEndpoint and useModel to be set."); + return; + } + + // Get the user's input message and trim any whitespace const query = userInput.value.trim(); - // Check if the message is not empty if (query !== '') { - - // fetch(`${apiEndpoint}`, { - fetch(apiEndpoint, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ query, model: useModel }), // Add these parameters here - // body: JSON.stringify({ query, url_server: "http://your-custom-url", model: "phi3:mini" }), // Add these parameters here - }) - .then(response => response.json()) - .then(data => { - // Get the AI's response from the API data - const aiResponse = data.response; - - // Render the user's original message in the chatbox - renderMessage(query, 'user-message'); - - // Render the AI's response in the chatbox - renderMessage(aiResponse, 'ai-response'); - - // Clear the user input field for the next message - userInput.value = ''; - }) - .catch(error => console.error('Error sending message:', error)); + fetch(window.apiEndpoint, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ query, model: window.useModel }), // Add these parameters here + }) + .then(response => response.json()) + .then(data => { + // Get the AI's response from the API data + const aiResponse = data.response; + // Render the user's original message in the chatbox + this.renderMessage(query, 'user-message'); + // Render the AI's response in the chatbox + this.renderMessage(aiResponse, 'ai-response'); + // Clear the user input field for the next message + userInput.value = ''; + }) + .catch(error => console.error('Error sending message:', error)); } -} - - - -// Define a function to render a message in the chatbox with a specific class name -function renderMessage(text, className) { + }, + // Define a function to render a message in the chatbox with a specific class name + renderMessage: function(text, className) { // Create a new div element to hold the message const messageElement = document.createElement('div'); - // Add the specified class name to the element messageElement.className = className; - - // // Set the text content of the element to the message text - // messageElement.textContent = text; - // Use the markdown-it parser const html = parser.render(text); messageElement.innerHTML = html; - // Append the message element to the chatbox immediately - // chatbox.appendChild(messageElement); + chatbox.appendChild(messageElement); + }, +}; - // Typeset math in the message element - MathJax.typesetPromise([messageElement]).then(() => { - // No need to append anything here, it's already appended above - chatbox.appendChild(messageElement); +// Wait for the event listener to set apiEndpoint and useModel +window.addEventListener('message', function(event) { + if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin + const { apiEndpoint, useModel } = event.data; + console.log("fronend.js - API Endpoint: ", apiEndpoint); + console.log("fronend.js - use model: ", useModel); + window.apiEndpoint = apiEndpoint; + window.useModel = useModel; + } +}); + +// Wait for the DOM to be fully loaded before making the API available +document.addEventListener('DOMContentLoaded', function() { + window.frontendApi = frontendApi; +}); - }); -} // Make the button toggle colour when user presses Enter on keyboard const sendButton = document.getElementById('sendButton'); - document.addEventListener('keydown', function(event) { - if (event.key === 'Enter') { - sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed - } + if (event.key === 'Enter') { + sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed + } }); - document.addEventListener('keyup', function() { - sendButton.style.backgroundColor = ''; // Restore the original style when any key is released + sendButton.style.backgroundColor = ''; // Restore the original style when any key is released });