From 734d7f3a0937559344fc111f66333b89f8cd2e8e Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Tue, 17 Sep 2024 16:32:27 +0200
Subject: [PATCH] fix scrolling bar

---
 py/static/styles.css    | 160 +++++++++++++++-------
 py/templates/index.html | 285 +++++++++++++++++++++-------------------
 2 files changed, 260 insertions(+), 185 deletions(-)

diff --git a/py/static/styles.css b/py/static/styles.css
index eea09ad..e541b87 100644
--- a/py/static/styles.css
+++ b/py/static/styles.css
@@ -4,17 +4,17 @@
     --font-family: Arial, sans-serif;
     --history-background-color: rgb(0, 0, 48);
     --models-background-color: rgb(0, 0, 48);
-    --code-model-color: red;
-    --math-model-color: green;
-    --language-model-color: blue;
-    --default-model-color: yellow;
-    --custom-model-color: purple;
-    --output-background-color: black; /* Set the conversation background to black */
-    --user-message-color: rgb(0, 128, 255); /* Blueish bubble for user */
-    --ai-message-color: rgb(100, 100, 255); /* Lighter blue for AI */
+    --output-background-color: black;
+    /* Set the conversation background to black */
+    --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-button-color: rgb(0, 128, 255);
     --input-button-hover-color: rgb(0, 100, 200);
+    --scrollbar-track: rgb(91, 172, 253);
+    --scrollbar-thumb: rgb(0, 88, 176);
 }
 
 /* Global Reset */
@@ -24,9 +24,13 @@
     box-sizing: border-box;
 }
 
-html, body {
+
+
+html,
+body {
     height: 100vh;
-    overflow: hidden; /* Prevent scrolling */
+    overflow: hidden;
+    /* Prevent scrolling */
 }
 
 /* Body Styling */
@@ -80,21 +84,28 @@ header a:hover {
 .container {
     display: grid;
     grid-template-columns: 1fr 3fr;
-    grid-template-rows: 1fr 1fr 0.5fr;
+    grid-template-rows: 3fr 1fr 1fr 1fr;
     gap: 10px;
     width: 90vw;
-    height: 90vh;
+    height: 95vh;
 }
 
 /* History Section */
-.history {
-    grid-column: 1;
-    grid-row: 1;
-    border-radius: 2em;
+
+.history-background {
+    grid-column: 1/2;
+    grid-row: 1/2;
+    height: 100%;
+    overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
-    overflow-y: auto;
-    height: 50vh;
+    border-radius: 2em;
+}
+
+.history {
+    height: 100%;
+    overflow-y: scroll;
+    padding-right: 10px;
 }
 
 .history ul {
@@ -120,13 +131,33 @@ header a:hover {
 }
 
 /* Models Section */
-.models {
+.model-background {
+    grid-column: 1/2;
+    grid-row: 2/5;
     overflow-y: auto;
     background-color: var(--models-background-color);
     border-radius: 2em;
     padding: 1em;
-    height: 40vh;
+    height: 90%;
     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 {
@@ -134,14 +165,17 @@ header a:hover {
     display: flex;
     justify-content: center;
     align-items: center;
-
 }
 
 .grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5vh;
-    height: calc(100% - 2em);
+    /* height: calc(100% - 2em); */
+}
+
+.grid h3 {
+    font-size: x-large;
 }
 
 .model-box {
@@ -152,10 +186,12 @@ header a:hover {
     border-radius: 5%;
     overflow: hidden;
     position: relative;
-    height: 20vh;
+    height: 18vh;
+    width: 18vh;
+    margin: auto;
 }
 
-.overlay{
+.overlay {
     z-index: 900;
     position: absolute;
     left: 0;
@@ -171,10 +207,10 @@ header a:hover {
     transition: opacity 0.5s ease;
     pointer-events: none;
     opacity: 0;
-    font-size:xx-large;
+    font-size: xx-large;
 }
 
-.model-box:hover .overlay{
+.model-box:hover .overlay {
     opacity: 1;
 }
 
@@ -210,7 +246,7 @@ header a:hover {
 /* Output Section */
 .output {
     grid-column: 2;
-    grid-row: 1 / span 2;
+    grid-row: 1 / 4;
     border-radius: 2em;
     background-color: var(--output-background-color);
     padding: 1.5em;
@@ -219,7 +255,7 @@ header a:hover {
     justify-content: flex-start;
     font-size: 1.2em;
     overflow-y: auto;
-    max-height: 75vh;
+    min-height: 75vh;
     margin-bottom: 0;
     width: 100%;
 }
@@ -232,9 +268,11 @@ header a:hover {
     padding: 10px;
     overflow-y: auto;
     max-height: 80vh;
-    background-color: var(--output-background-color); /* Black background */
+    background-color: var(--output-background-color);
+    /* Black background */
     border-radius: 10px;
-    scroll-behavior: smooth; /* Optional: Smooth scrolling */
+    scroll-behavior: smooth;
+    /* Optional: Smooth scrolling */
 }
 
 .user-message,
@@ -243,9 +281,11 @@ header a:hover {
     padding: 10px 15px;
     border-radius: 15px;
     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;
-    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);
 }
 
@@ -255,7 +295,8 @@ header a:hover {
     color: var(--text-color);
     border-bottom-right-radius: 0;
     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 */
@@ -264,7 +305,8 @@ header a:hover {
     color: var(--text-color);
     border-bottom-left-radius: 0;
     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 {
-    grid-column: 2;
-    grid-row: 3;
-    border-radius: 2em;
+    grid-column: 2/3;
+    grid-row: 4/5;
+    border-radius: 20px;
     background-color: var(--input-background-color);
-    padding: 1em;
+    padding: 1.5vh;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: auto;
-    margin-top: -9em;
+    /* margin-top: -9em; */
     gap: 10px;
-    height: 7em;
+    height: 10vh;
 }
 
 .input input {
     flex-grow: 1;
-    padding: 12px;
+    padding: 5px;
     font-size: 1.2em;
     border-radius: 8px;
     border: 2px solid var(--input-button-color);
@@ -320,6 +362,7 @@ header a:hover {
     background-color: rgba(255, 255, 255, 0.9);
     color: #333;
     transition: border-color 0.3s ease-in-out;
+    height: 7vh;
 }
 
 .input input:focus {
@@ -327,7 +370,7 @@ header a:hover {
 }
 
 .input button {
-    padding:1em;
+    padding: 1em;
     margin: 5px;
     background-color: var(--input-button-color);
     color: white;
@@ -396,10 +439,31 @@ header a:hover {
     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) {
-    .grid{
+    .grid {
         grid-template-columns: 1fr;
     }
+
+    .model-box {
+        width: 15vw;
+        aspect-ratio: 1/1;
+    }
 }
 
 /* Responsive Adjustments */
@@ -410,8 +474,10 @@ header a:hover {
         width: 95vw;
     }
 
-    .history, .models {
-        display: none; /* Hide history and models */
+    .history,
+    .models {
+        display: none;
+        /* Hide history and models */
     }
 
     .output {
@@ -422,7 +488,7 @@ header a:hover {
     .input {
         grid-column: 1;
         grid-row: 3;
-        margin-top: -4em;
+        /* margin-top: -4em; */
     }
 
     .input button {
@@ -433,4 +499,4 @@ header a:hover {
     .output form button img {
         height: 1.5em;
     }
-}
+}
\ No newline at end of file
diff --git a/py/templates/index.html b/py/templates/index.html
index 548d50a..ca3c99e 100644
--- a/py/templates/index.html
+++ b/py/templates/index.html
@@ -1,172 +1,181 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/static/styles.css">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
     <title>AI Assistant</title>
-</head>
-<body>
+  </head>
+
+  <body>
     <header>
-        <div class="header-menu">
-            <ul>
-                <li>
-                    <a href="/">
-                        <img src="/static/img/logo.png" alt="logo">
-                    </a>
-                </li>
-                <li>
-                    <a href="/documentation">Documentation</a>
-                </li>
-                <li>
-                    <a href="/faq">FAQ</a>
-                </li>
-                <li>
-                    <button id="toggleButton">Show Divs</button>
-                </li>
-            </ul>
-        </div>
+      <div class="header-menu">
+        <ul>
+          <li>
+            <a href="/">
+              <img src="/static/img/logo.png" alt="logo" />
+            </a>
+          </li>
+          <li>
+            <a href="/documentation">Documentation</a>
+          </li>
+          <li>
+            <a href="/faq">FAQ</a>
+          </li>
+          <li>
+            <button id="toggleButton">Show Divs</button>
+          </li>
+        </ul>
+      </div>
     </header>
 
     <!-- Main container for the layout -->
     <div class="container">
-        <!-- History section -->
-        <div class="history hidden">
-            <ul>
-                <!-- Populate with history items -->
-                <li><a href="#">history1</a></li>
-                <li><a href="#">history2</a></li>
-                <li><a href="#">history3</a></li>
-                <li><a href="#">history4</a></li>
-                <li><a href="#">history5</a></li>
-                <li><a href="#">history6</a></li>
-                <li><a href="#">history7</a></li>
-                <li><a href="#">history8</a></li>
-                <li><a href="#">history9</a></li>
-                <li><a href="#">history10</a></li>
-                <li><a href="#">history11</a></li>
-                <li><a href="#">history12</a></li>
-                <li><a href="#">history13</a></li>
-                <li><a href="#">history14</a></li>
-                <li><a href="#">history15</a></li>
-                <li><a href="#">history16</a></li>
-                <li><a href="#">history17</a></li>
-                <li><a href="#">history18</a></li>
-                <li><a href="#">history19</a></li>
-                <li><a href="#">history20</a></li>
-            </ul>
+      <!-- History section -->
+      <div class="history-background hidden">
+        <div class="history">
+          <ul>
+            <!-- Populate with history items -->
+            <li><a href="#">history1</a></li>
+            <li><a href="#">history2</a></li>
+            <li><a href="#">history3</a></li>
+            <li><a href="#">history4</a></li>
+            <li><a href="#">history5</a></li>
+            <li><a href="#">history6</a></li>
+            <li><a href="#">history7</a></li>
+            <li><a href="#">history8</a></li>
+            <li><a href="#">history9</a></li>
+            <li><a href="#">history10</a></li>
+            <li><a href="#">history11</a></li>
+            <li><a href="#">history12</a></li>
+            <li><a href="#">history13</a></li>
+            <li><a href="#">history14</a></li>
+            <li><a href="#">history15</a></li>
+            <li><a href="#">history16</a></li>
+            <li><a href="#">history17</a></li>
+            <li><a href="#">history18</a></li>
+            <li><a href="#">history19</a></li>
+            <li><a href="#">history20</a></li>
+          </ul>
         </div>
+      </div>
 
-        <!-- Models section -->
+      <!-- Models section -->
+      <div class="model-background">
         <div class="models">
-            <div class="titel">
-                <h1>Different AI models</h1>
-            </div>
+          <div class="titel">
+            <h1>Different AI models</h1>
+          </div>
+          <form action="">
             <div class="grid">
-                <div class="code-model model-box">
-                    <div class="overlay">
-                        <h3>Code</h3>
-                    </div>
+              <button class="code-model model-box">
+                <div class="overlay">
+                  <h3>Code</h3>
                 </div>
-                <div class="math-model model-box">
-                    <div class="overlay">
-                        <h3>Math</h3>
-                    </div>
+              </button>
+              <button class="math-model model-box">
+                <div class="overlay">
+                  <h3>Math</h3>
                 </div>
-                <div class="language-model model-box">
-                    <div class="overlay">
-                        <h3>Language</h3>
-                    </div>
+              </button>
+              <button class="language-model model-box">
+                <div class="overlay">
+                  <h3>Language</h3>
                 </div>
-                <div class="default-model model-box">
-                    <div class="overlay">
-                        <h3>Default</h3>
-                    </div>
+              </button>
+              <button class="default-model model-box">
+                <div class="overlay">
+                  <h3>Default</h3>
                 </div>
-                <div class="default-model model-box">
-                    <div class="overlay">
-                        <h3>Default</h3>
-                    </div>
+              </button>
+              <button class="default-model model-box">
+                <div class="overlay">
+                  <h3>Default</h3>
                 </div>
-                <div class="default-model model-box">
-                    <div class="overlay">
-                        <h3>Default</h3>
-                    </div>
+              </button>
+              <button class="default-model model-box">
+                <div class="overlay">
+                  <h3>Default</h3>
                 </div>
-                <div class="default-model model-box">
-                    <div class="overlay">
-                        <h3>Default</h3>
-                    </div>
+              </button>
+              <button class="default-model model-box">
+                <div class="overlay">
+                  <h3>Default</h3>
                 </div>
+              </button>
             </div>
+          </form>
         </div>
+      </div>
 
-        <!-- Output section -->
-        <div class="output">
-            <div class="conversation" id="conversation">
-                {% for message in messages %}
-                    {% if message.startswith('User:') %}
-                        <div class="user-message">{{ message }}</div>
-                    {% else %}
-                        <div class="ai-message">{{ message }}</div>
-                    {% endif %}
-                {% endfor %}
-                <form method="POST" action="" id="buttonForm">
-                    <button type="submit" name="chat" value="resend">
-                        <img src="/static/img/resend.svg" alt="resend">
-                    </button>
-                    <button type="submit" name="chat" value="edit">
-                        <img src="/static/img/edit.svg" alt="edit">
-                    </button>
-                    <button type="submit" name="chat" value="copy">
-                        <img src="/static/img/copy.svg" alt="copy">
-                    </button>
-                </form>
-            </div>
+      <!-- Output section -->
+      <div class="output">
+        <div class="conversation" id="conversation">
+          {% for message in messages %} {% if message.startswith('User:') %}
+          <div class="user-message">{{ message }}</div>
+          {% else %}
+          <div class="ai-message">{{ message }}</div>
+          {% endif %} {% endfor %}
+          <form method="POST" action="" id="buttonForm">
+            <button type="button" name="option" value="chat">
+              <img src="/static/img/resend.svg" alt="resend" />
+            </button>
+            <button type="button" name="option" value="chat">
+              <img src="/static/img/edit.svg" alt="edit" />
+            </button>
+            <button type="button" name="option" value="answer">
+              <img src="/static/img/copy.svg" alt="copy" />
+            </button>
+          </form>
         </div>
+      </div>
 
-        <!-- Input section -->
-        <form class="input" method="POST" action="" id="inputForm">
-            <input type="text" name="user_message" placeholder="Type your message here..." value="{{ input }}">
-            <button type="submit" name="option" value="chat">
-                <img src="/static/img/send.svg" alt="send">
-            </button>
-            <button type="submit" name="option" value="voice">
-                <img src="/static/img/microphone.svg" alt="microphone">
-            </button>
-        </form>
+      <!-- Input section -->
+      <form class="input" method="POST" action="" id="inputForm">
+        <input
+          type="text"
+          name="user_message"
+          placeholder="Type your message here..."
+        />
+        <button type="submit" name="option" value="chat">
+          <img src="/static/img/send.svg" alt="send" />
+        </button>
+        <button type="submit" name="option" value="voice">
+          <img src="/static/img/microphone.svg" alt="microphone" />
+        </button>
+      </form>
     </div>
 
     <script>
       function scrollToBottom() {
-            const conversation = document.getElementById('conversation');
-            conversation.scrollTop = conversation.scrollHeight;
-        }
+        const conversation = document.getElementById("conversation");
+        conversation.scrollTop = conversation.scrollHeight;
+      }
 
-        document.addEventListener('DOMContentLoaded', function() {
-            scrollToBottom(); // Scroll to the bottom when the page loads
+      document.addEventListener("DOMContentLoaded", function () {
+        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
-            conversation.addEventListener('DOMSubtreeModified', function() {
-                scrollToBottom(); // Scroll to the bottom when a new message is added
-            });
-
-            const button = document.getElementById('toggleButton');
-
-            button.addEventListener('click', function() {
-                const divs = document.querySelectorAll('div.hidden');
-
-                divs.forEach(div => {
-                    if (div.style.display === 'none' || div.style.display === '') {
-                        div.style.display = 'block'; // Show the div
-                    } else {
-                        div.style.display = 'none'; // Hide the div
-                    }
-                });
-            });
+        // Listen for changes in the conversation element
+        conversation.addEventListener("DOMSubtreeModified", function () {
+          scrollToBottom(); // Scroll to the bottom when a new message is added
         });
+
+        const button = document.getElementById("toggleButton");
+
+        button.addEventListener("click", function () {
+          const divs = document.querySelectorAll("div.hidden");
+
+          divs.forEach((div) => {
+            if (div.style.display === "none" || div.style.display === "") {
+              div.style.display = "block"; // Show the div
+            } else {
+              div.style.display = "none"; // Hide the div
+            }
+          });
+        });
+      });
     </script>
-</body>
+  </body>
 </html>
-- 
2.39.5