From 9bb9b762278094947a76553695586f23da9dd4c0 Mon Sep 17 00:00:00 2001
From: Joakim Persson <joakim.m.persson@ericsson.com>
Date: Tue, 23 Jul 2024 20:34:23 +0200
Subject: [PATCH] =?UTF-8?q?Snyggat=20till=20klienten=20med=20tydligare=20m?=
 =?UTF-8?q?arkeringar=20och=20b=C3=A4ttre=20textinmatning.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 smartassist/src/client.html | 110 +++++++++++++++++++++++++++---------
 1 file changed, 82 insertions(+), 28 deletions(-)
diff --git a/smartassist/src/client.html b/smartassist/src/client.html
index 9b3cacb..dcf9565 100644
--- a/smartassist/src/client.html
+++ b/smartassist/src/client.html
@@ -1,50 +1,104 @@
-<!--
-Run a simple HTTP server in the directory containing your HTML file
-python -m http.server 8000
-Open your web browser and navigate to http://localhost:8000/smartassist/src/client.html
-Note that the path starts from where the python venv was defined (project root)
--->
-
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Ollama Interaction</title>
+    <title>Ollama Chat</title>
     <style>
-        /* Basic styling */
-        body { font-family: Arial, sans-serif; }
-        #chatbox {
-            width: 80%; /* responsive width */
-            max-width: 400px;
-            height: 300px;
-            border: 1px solid #ccc;
-            overflow-y: scroll;
-            padding: 10px;
+        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-y: scroll; /* Allow scrolling within the chatbox */
+        }
+
         .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;
         }
-        .user-message {
-            background-color: #eae2d5;
-            padding: 10px;
-            border-radius: 10px;
+
+        #userInput:focus {
+            outline: none;
+            border-color: #66afe9; /* Blue outline on focus */
         }
-        .ai-response {
-            background-color: #cfc68b;
-            padding: 10px;
-            border-radius: 10px;
+
+        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;
         }
+
     </style>
 </head>
 <body>
-    <h1>Ollama Interaction</h1>
+    <h1>Ollama Chat</h1>
     <div id="chatbox">
         <!-- messages will be rendered here -->
     </div>
-    <input type="text" id="userInput" placeholder="Type your message here...">
+    <textarea id="userInput" placeholder="Type your message..." rows="5"></textarea>
     <button onclick="sendMessage()">Send</button>
 
-    <!-- Link to the external frontend.js script (relative or absolute path)-->
     <script src="frontend.js"></script>
+    <script>
+        const userInputElement = document.getElementById('userInput');
+
+        userInputElement.addEventListener('keydown', function(event) {
+            if (event.shiftKey && event.key === 'Enter') { // Shift+Enter for newline
+                event.preventDefault(); 
+                userInputElement.value += '\n';
+            } else if (event.key === 'Enter') {  // Enter to send message
+                sendMessage();
+                userInputElement.value = ''; // Clear the input field after sending
+                event.preventDefault();
+            }
+        });
+
+    </script>
 </body>
 </html>
+
