React-Group/ai-virtual-assistant
Archived
3
2
Fork 2
Code Issues 24 Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request 'fix scroll bar' (#34) from YasinOnm08/ai-virtual-assistant:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/ai-virtual-assistant/pulls/34
This commit is contained in:
Patrick 2024-09-17 16:36:56 +02:00
commit 33ef734c70
2 changed files with 260 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

158
py/static/styles.css
View file

@ -4,17 +4,17 @@
--font-family: Arial, sans-serif; --font-family: Arial, sans-serif;
--history-background-color: rgb(0, 0, 48); --history-background-color: rgb(0, 0, 48);
--models-background-color: rgb(0, 0, 48); --models-background-color: rgb(0, 0, 48);
--code-model-color: red; --output-background-color: black;
--math-model-color: green; /* Set the conversation background to black */
--language-model-color: blue; --user-message-color: rgb(0, 128, 255);
--default-model-color: yellow; /* Blueish bubble for user */
--custom-model-color: purple; --ai-message-color: rgb(100, 100, 255);
--output-background-color: black; /* Set the conversation background to black */ /* Lighter blue for AI */
--user-message-color: rgb(0, 128, 255); /* Blueish bubble for user */
--ai-message-color: rgb(100, 100, 255); /* Lighter blue for AI */
--input-background-color: rgb(0, 0, 48); --input-background-color: rgb(0, 0, 48);
--input-button-color: rgb(0, 128, 255); --input-button-color: rgb(0, 128, 255);
--input-button-hover-color: rgb(0, 100, 200); --input-button-hover-color: rgb(0, 100, 200);
--scrollbar-track: rgb(91, 172, 253);
--scrollbar-thumb: rgb(0, 88, 176);
} }
/* Global Reset */ /* Global Reset */
@ -24,9 +24,13 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, body {
html,
body {
height: 100vh; height: 100vh;
overflow: hidden; /* Prevent scrolling */ overflow: hidden;
/* Prevent scrolling */
} }
/* Body Styling */ /* Body Styling */
@ -80,21 +84,28 @@ header a:hover {
.container { .container {
display: grid; display: grid;
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 1fr 0.5fr; grid-template-rows: 3fr 1fr 1fr 1fr;
gap: 10px; gap: 10px;
width: 90vw; width: 90vw;
height: 90vh; height: 95vh;
} }
/* History Section */ /* History Section */
.history {
grid-column: 1; .history-background {
grid-row: 1; grid-column: 1/2;
border-radius: 2em; grid-row: 1/2;
height: 100%;
overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;
overflow-y: auto; border-radius: 2em;
height: 50vh; }
.history {
height: 100%;
overflow-y: scroll;
padding-right: 10px;
} }
.history ul { .history ul {
@ -120,13 +131,33 @@ header a:hover {
} }
/* Models Section */ /* Models Section */
.models { .model-background {
grid-column: 1/2;
grid-row: 2/5;
overflow-y: auto; overflow-y: auto;
background-color: var(--models-background-color); background-color: var(--models-background-color);
border-radius: 2em; border-radius: 2em;
padding: 1em; padding: 1em;
height: 40vh; height: 90%;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
}
.models {
grid-column: 1/2;
grid-row: 2/5;
overflow-y: auto;
background-color: var(--models-background-color);
border-radius: 2em;
padding: 1em;
height: 100%;
box-sizing: border-box;
overflow: hidden;
overflow-y: scroll;
}
.models form {
padding: 0;
} }
.models .titel { .models .titel {
@ -134,14 +165,17 @@ header a:hover {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 1.5vh; gap: 1.5vh;
height: calc(100% - 2em); /* height: calc(100% - 2em); */
}
.grid h3 {
font-size: x-large;
} }
.model-box { .model-box {
@ -152,10 +186,12 @@ header a:hover {
border-radius: 5%; border-radius: 5%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
height: 20vh; height: 18vh;
width: 18vh;
margin: auto;
} }
.overlay{ .overlay {
z-index: 900; z-index: 900;
position: absolute; position: absolute;
left: 0; left: 0;
@ -171,10 +207,10 @@ header a:hover {
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
font-size:xx-large; font-size: xx-large;
} }
.model-box:hover .overlay{ .model-box:hover .overlay {
opacity: 1; opacity: 1;
} }
@ -210,7 +246,7 @@ header a:hover {
/* Output Section */ /* Output Section */
.output { .output {
grid-column: 2; grid-column: 2;
grid-row: 1 / span 2; grid-row: 1 / 4;
border-radius: 2em; border-radius: 2em;
background-color: var(--output-background-color); background-color: var(--output-background-color);
padding: 1.5em; padding: 1.5em;
@ -219,7 +255,7 @@ header a:hover {
justify-content: flex-start; justify-content: flex-start;
font-size: 1.2em; font-size: 1.2em;
overflow-y: auto; overflow-y: auto;
max-height: 75vh; min-height: 75vh;
margin-bottom: 0; margin-bottom: 0;
width: 100%; width: 100%;
} }
@ -232,9 +268,11 @@ header a:hover {
padding: 10px; padding: 10px;
overflow-y: auto; overflow-y: auto;
max-height: 80vh; max-height: 80vh;
background-color: var(--output-background-color); /* Black background */ background-color: var(--output-background-color);
/* Black background */
border-radius: 10px; border-radius: 10px;
scroll-behavior: smooth; /* Optional: Smooth scrolling */ scroll-behavior: smooth;
/* Optional: Smooth scrolling */
} }
.user-message, .user-message,
@ -243,9 +281,11 @@ header a:hover {
padding: 10px 15px; padding: 10px 15px;
border-radius: 15px; border-radius: 15px;
max-width: 60%; max-width: 60%;
width: fit-content; /* Adjusts width to fit the content */ width: fit-content;
/* Adjusts width to fit the content */
word-wrap: break-word; word-wrap: break-word;
display: block; /* Changed from inline-block to block */ display: block;
/* Changed from inline-block to block */
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
} }
@ -255,7 +295,8 @@ header a:hover {
color: var(--text-color); color: var(--text-color);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
margin-left: auto; margin-left: auto;
text-align: right; /* Align text to the right */ text-align: right;
/* Align text to the right */
} }
/* Align AI message to the left */ /* Align AI message to the left */
@ -264,7 +305,8 @@ header a:hover {
color: var(--text-color); color: var(--text-color);
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
margin-right: auto; margin-right: auto;
text-align: left; /* Align text to the left */ text-align: left;
/* Align text to the left */
} }
@ -295,23 +337,23 @@ header a:hover {
/* Input Section */ /* Input Section */
.input { .input {
grid-column: 2; grid-column: 2/3;
grid-row: 3; grid-row: 4/5;
border-radius: 2em; border-radius: 20px;
background-color: var(--input-background-color); background-color: var(--input-background-color);
padding: 1em; padding: 1.5vh;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: auto; height: auto;
margin-top: -9em; /* margin-top: -9em; */
gap: 10px; gap: 10px;
height: 7em; height: 10vh;
} }
.input input { .input input {
flex-grow: 1; flex-grow: 1;
padding: 12px; padding: 5px;
font-size: 1.2em; font-size: 1.2em;
border-radius: 8px; border-radius: 8px;
border: 2px solid var(--input-button-color); border: 2px solid var(--input-button-color);
@ -320,6 +362,7 @@ header a:hover {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
color: #333; color: #333;
transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out;
height: 7vh;
} }
.input input:focus { .input input:focus {
@ -327,7 +370,7 @@ header a:hover {
} }
.input button { .input button {
padding:1em; padding: 1em;
margin: 5px; margin: 5px;
background-color: var(--input-button-color); background-color: var(--input-button-color);
color: white; color: white;
@ -396,10 +439,31 @@ header a:hover {
transition: background-color 0.3s; transition: background-color 0.3s;
} }
::-webkit-scrollbar {
width: 7px;
margin-left: 10px;
}
::-webkit-scrollbar-track {
background-color: var(--scrollbar-track);
border-radius: 5px;
overflow: hidden;
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border-radius: 5px;
}
@media (max-width: 1400px) { @media (max-width: 1400px) {
.grid{ .grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.model-box {
width: 15vw;
aspect-ratio: 1/1;
}
} }
/* Responsive Adjustments */ /* Responsive Adjustments */
@ -410,8 +474,10 @@ header a:hover {
width: 95vw; width: 95vw;
} }
.history, .models { .history,
display: none; /* Hide history and models */ .models {
display: none;
/* Hide history and models */
} }
.output { .output {
@ -422,7 +488,7 @@ header a:hover {
.input { .input {
grid-column: 1; grid-column: 1;
grid-row: 3; grid-row: 3;
margin-top: -4em; /* margin-top: -4em; */
} }
.input button { .input button {

101
py/templates/index.html
View file

@ -1,18 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/static/styles.css"> <link rel="stylesheet" href="styles.css" />
<title>AI Assistant</title> <title>AI Assistant</title>
</head> </head>
<body>
<body>
<header> <header>
<div class="header-menu"> <div class="header-menu">
<ul> <ul>
<li> <li>
<a href="/"> <a href="/">
<img src="/static/img/logo.png" alt="logo"> <img src="/static/img/logo.png" alt="logo" />
</a> </a>
</li> </li>
<li> <li>
@ -31,7 +32,8 @@
<!-- Main container for the layout --> <!-- Main container for the layout -->
<div class="container"> <div class="container">
<!-- History section --> <!-- History section -->
<div class="history hidden"> <div class="history-background hidden">
<div class="history">
<ul> <ul>
<!-- Populate with history items --> <!-- Populate with history items -->
<li><a href="#">history1</a></li> <li><a href="#">history1</a></li>
@ -56,70 +58,73 @@
<li><a href="#">history20</a></li> <li><a href="#">history20</a></li>
</ul> </ul>
</div> </div>
</div>
<!-- Models section --> <!-- Models section -->
<div class="model-background">
<div class="models"> <div class="models">
<div class="titel"> <div class="titel">
<h1>Different AI models</h1> <h1>Different AI models</h1>
</div> </div>
<form action="">
<div class="grid"> <div class="grid">
<div class="code-model model-box"> <button class="code-model model-box">
<div class="overlay"> <div class="overlay">
<h3>Code</h3> <h3>Code</h3>
</div> </div>
</div> </button>
<div class="math-model model-box"> <button class="math-model model-box">
<div class="overlay"> <div class="overlay">
<h3>Math</h3> <h3>Math</h3>
</div> </div>
</div> </button>
<div class="language-model model-box"> <button class="language-model model-box">
<div class="overlay"> <div class="overlay">
<h3>Language</h3> <h3>Language</h3>
</div> </div>
</div> </button>
<div class="default-model model-box"> <button class="default-model model-box">
<div class="overlay"> <div class="overlay">
<h3>Default</h3> <h3>Default</h3>
</div> </div>
</div> </button>
<div class="default-model model-box"> <button class="default-model model-box">
<div class="overlay"> <div class="overlay">
<h3>Default</h3> <h3>Default</h3>
</div> </div>
</div> </button>
<div class="default-model model-box"> <button class="default-model model-box">
<div class="overlay"> <div class="overlay">
<h3>Default</h3> <h3>Default</h3>
</div> </div>
</div> </button>
<div class="default-model model-box"> <button class="default-model model-box">
<div class="overlay"> <div class="overlay">
<h3>Default</h3> <h3>Default</h3>
</div> </div>
</button>
</div> </div>
</form>
</div> </div>
</div> </div>
<!-- Output section --> <!-- Output section -->
<div class="output"> <div class="output">
<div class="conversation" id="conversation"> <div class="conversation" id="conversation">
{% for message in messages %} {% for message in messages %} {% if message.startswith('User:') %}
{% if message.startswith('User:') %}
<div class="user-message">{{ message }}</div> <div class="user-message">{{ message }}</div>
{% else %} {% else %}
<div class="ai-message">{{ message }}</div> <div class="ai-message">{{ message }}</div>
{% endif %} {% endif %} {% endfor %}
{% endfor %}
<form method="POST" action="" id="buttonForm"> <form method="POST" action="" id="buttonForm">
<button type="submit" name="chat" value="resend"> <button type="button" name="option" value="chat">
<img src="/static/img/resend.svg" alt="resend"> <img src="/static/img/resend.svg" alt="resend" />
</button> </button>
<button type="submit" name="chat" value="edit"> <button type="button" name="option" value="chat">
<img src="/static/img/edit.svg" alt="edit"> <img src="/static/img/edit.svg" alt="edit" />
</button> </button>
<button type="submit" name="chat" value="copy"> <button type="button" name="option" value="answer">
<img src="/static/img/copy.svg" alt="copy"> <img src="/static/img/copy.svg" alt="copy" />
</button> </button>
</form> </form>
</div> </div>
@ -127,46 +132,50 @@
<!-- Input section --> <!-- Input section -->
<form class="input" method="POST" action="" id="inputForm"> <form class="input" method="POST" action="" id="inputForm">
<input type="text" name="user_message" placeholder="Type your message here..." value="{{ input }}"> <input
type="text"
name="user_message"
placeholder="Type your message here..."
/>
<button type="submit" name="option" value="chat"> <button type="submit" name="option" value="chat">
<img src="/static/img/send.svg" alt="send"> <img src="/static/img/send.svg" alt="send" />
</button> </button>
<button type="submit" name="option" value="voice"> <button type="submit" name="option" value="voice">
<img src="/static/img/microphone.svg" alt="microphone"> <img src="/static/img/microphone.svg" alt="microphone" />
</button> </button>
</form> </form>
</div> </div>
<script> <script>
function scrollToBottom() { function scrollToBottom() {
const conversation = document.getElementById('conversation'); const conversation = document.getElementById("conversation");
conversation.scrollTop = conversation.scrollHeight; conversation.scrollTop = conversation.scrollHeight;
} }
document.addEventListener('DOMContentLoaded', function() { document.addEventListener("DOMContentLoaded", function () {
scrollToBottom(); // Scroll to the bottom when the page loads scrollToBottom(); // Scroll to the bottom when the page loads
const conversation = document.getElementById('conversation'); const conversation = document.getElementById("conversation");
// Listen for changes in the conversation element // Listen for changes in the conversation element
conversation.addEventListener('DOMSubtreeModified', function() { conversation.addEventListener("DOMSubtreeModified", function () {
scrollToBottom(); // Scroll to the bottom when a new message is added scrollToBottom(); // Scroll to the bottom when a new message is added
}); });
const button = document.getElementById('toggleButton'); const button = document.getElementById("toggleButton");
button.addEventListener('click', function() { button.addEventListener("click", function () {
const divs = document.querySelectorAll('div.hidden'); const divs = document.querySelectorAll("div.hidden");
divs.forEach(div => { divs.forEach((div) => {
if (div.style.display === 'none' || div.style.display === '') { if (div.style.display === "none" || div.style.display === "") {
div.style.display = 'block'; // Show the div div.style.display = "block"; // Show the div
} else { } else {
div.style.display = 'none'; // Hide the div div.style.display = "none"; // Hide the div
} }
}); });
}); });
}); });
</script> </script>
</body> </body>
</html> </html>