diff --git a/smartassist/src/css/clientstyle.css b/smartassist/src/css/clientstyle.css new file mode 100644 index 0000000..a160ceb --- /dev/null +++ b/smartassist/src/css/clientstyle.css @@ -0,0 +1,69 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f4f4f4; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + margin: 0; +} + +h1 { + color: #333; + margin-bottom: 20px; +} + +#chatbox { + width: 80%; + max-width: 500px; + background-color: #fff; + border-radius: 10px; + padding: 20px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + overflow: auto; /* Allow horizontal and vertical scrolling of the chatbox */ + resize: both; /* Allow resizing vertically */ +} + +.message { + margin-bottom: 15px; +} + +.user-message { + background-color: #9cc1ecbb; + padding: 10px 15px; + border-radius: 10px; + text-align: left; /* Align user messages to the left */ +} + +.ai-response { + background-color: #f0f8ff; + padding: 10px 15px; + border-radius: 10px; + text-align: left; /* Align AI responses to the left */ +} + +#userInput { + width: calc(50% - 60px); /* Adjust width for input and button */ + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + margin-bottom: 10px; +} + +#userInput:focus { + outline: none; + border-color: #66afe9; /* Blue outline on focus */ +} + +button[onclick="sendMessage()"] { + background-color: #4CAF50; /* Green */ + border: none; + color: white; + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + border-radius: 5px; + cursor: pointer; +} diff --git a/smartassist/src/html/client.html b/smartassist/src/html/client.html new file mode 100644 index 0000000..482f745 --- /dev/null +++ b/smartassist/src/html/client.html @@ -0,0 +1,41 @@ + + + + + Ollama Chat + + + +

Ollama Chat

+
+ +
+ + + + + + + + diff --git a/smartassist/src/js/frontend.js b/smartassist/src/js/frontend.js new file mode 100644 index 0000000..92c6c28 --- /dev/null +++ b/smartassist/src/js/frontend.js @@ -0,0 +1,60 @@ + +// Get the user input element from the DOM +const chatbox = document.getElementById('chatbox'); +const userInput = document.getElementById('userInput'); + +// Get API endpoint for chat from environment variable +const apiEndpoint = process.env.BE_API_ENDPOINT || 'http://localhost:5005/api/chat'; // Default if not found +console.log("The API Endpoint is:", apiEndpoint); + + + +// 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 !== '') { + // Send a POST request to the /api/chat endpoint with the message + // fetch('http://localhost:5005/api/chat', { + fetch(apiEndpoint, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ query }), + }) + .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; + + // Append the message element to the chatbox + chatbox.appendChild(messageElement); +}