More responsive

application/static/dist/css/output.css

@@ -517,6 +517,14 @@ video {
   position: static;
 }
 
+.fixed {
+  position: fixed;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -537,6 +545,34 @@ video {
   display: flex;
 }
 
+.hidden {
+  display: none;
+}
+
+.h-5\/6 {
+  height: 83.333333%;
+}
+
+.h-1\/2 {
+  height: 50%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.max-h-screen {
+  max-height: 100vh;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .w-3\/4 {
   width: 75%;
 }
@@ -592,19 +628,19 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.bg-blue-100 {
+.bg-red-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
+.bg-gray-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
-.bg-gray-500 {
+.bg-yellow-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
 .p-2 {

application/static/src/chat.js

@@ -8,7 +8,7 @@ if (el) {
         msg_html += message
         msg_html += '</p></div>'
         document.getElementById("messages").innerHTML += msg_html;
-        let chatWindow = document.getElementById("chat-container");
+        let chatWindow = document.getElementById("messages-container");
         chatWindow.scrollTop = chatWindow.scrollHeight;
         document.getElementById("message-input").value = "";
         document.getElementById("button-submit").innerHTML = '<i class="fa fa-circle-o-notch fa-spin"></i> Thinking...';
@@ -28,7 +28,7 @@ if (el) {
                 msg_html += data.answer
                 msg_html += '</code></div>'
                 document.getElementById("messages").innerHTML += msg_html;
-                let chatWindow = document.getElementById("chat-container");
+                let chatWindow = document.getElementById("messages-container");
                 chatWindow.scrollTop = chatWindow.scrollHeight;
                 document.getElementById("button-submit").innerHTML = 'Send';
                 document.getElementById("button-submit").disabled = false;

application/templates/index.html

@@ -13,9 +13,9 @@
       <a href="https://github.com/arc53/docsgpt" class="text-blue-500 hover:text-blue-800">About</a>
     </header>
     <div class="flex">
-      <div class="w-3/4">
+      <div class="w-3/4 min-h-screen max-h-screen">
         <div class="w-full flex flex-col h-5/6">
-          <div id="chat-container">
+          <div id="messages-container" style="overflow: auto;" class="">
 
             <div id="messages" class="w-full flex flex-col" >
               <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
@@ -36,9 +36,9 @@ This will return a new DataFrame with all the columns from both tables, and only
           </div>
         </div>
 
-        <div class="flex mt-4 mb-2">
+        <div class="fixed bottom-0 w-full mt-4 mb-2">
         <form id="message-form" autocomplete="off">
-          <input autocomplete="false" id="message-input" class="bg-white p-2 rounded-lg ml-2 w-[46rem]" type="text" placeholder="Type your message here...">
+          <input autocomplete="off" id="message-input" class="bg-white p-2 rounded-lg ml-2 w-[46rem]" type="text" placeholder="Type your message here...">
           <button id="button-submit" class="bg-blue-500 text-white p-2 rounded-lg ml-2 mr-2 ml-2" type="submit">Send</button>
         </form>
         </div>