joakimp/python_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tog bort sektionen <style>, länkar till extern stilmall istället. Lade till möjlighet att ändra storlek på chattfönstret.

Browse Source
This commit is contained in:
Joakim Persson
2024-07-23 21:44:33 +02:00
parent d0935f771a
commit a2144e0480
1 changed files with 8 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
smartassist/src/client.html
+8 -71
View File
@@ -3,77 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Ollama Chat</title> <title>Ollama Chat</title>
<style> <link rel="stylesheet" href="./clientstyle.css">
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;
}
#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;
}
</style>
</head> </head>
<body> <body>
<h1>Ollama Chat</h1> <h1>Ollama Chat</h1>
@@ -85,6 +15,13 @@
<script src="frontend.js"></script> <script src="frontend.js"></script>
<script> <script>
const chatContainer = document.getElementById('chatbox');
// Handle resize events
window.addEventListener('resize', function() {
chatContainer.style.height = 'auto';
});
const userInputElement = document.getElementById('userInput'); const userInputElement = document.getElementById('userInput');
userInputElement.addEventListener('keydown', function(event) { userInputElement.addEventListener('keydown', function(event) {