Snyggat till klienten med tydligare markeringar och bättre textinmatning.

2024-07-23 20:34:23 +02:00
parent 3b2577084e
commit 9bb9b76227
1 changed files with 82 additions and 28 deletions
@@ -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>
+