From 2232bdc0910f677174e4ad2cb12476890e3caa0c Mon Sep 17 00:00:00 2001
From: Alex <gh@cld.tushynski.me>
Date: Mon, 6 Feb 2023 11:45:42 +0000
Subject: [PATCH] More responsive

---
 application/static/dist/css/output.css | 48 ++++++++++++++++++++++----
 application/static/src/chat.js         |  4 +--
 application/templates/index.html       |  8 ++---
 3 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/application/static/dist/css/output.css b/application/static/dist/css/output.css
index a9afa825..c2ecec57 100644
--- a/application/static/dist/css/output.css
+++ b/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 {
diff --git a/application/static/src/chat.js b/application/static/src/chat.js
index ee53617a..df26216d 100644
--- a/application/static/src/chat.js
+++ b/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;
diff --git a/application/templates/index.html b/application/templates/index.html
index 4ebd3c8a..7277c01d 100644
--- a/application/templates/index.html
+++ b/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>