Merge pull request #29 from arc53/ui-fixes

UI fixes

application/app.py

@@ -52,6 +52,7 @@ def api_answer():
     result['answer'] = result['answer'].replace("\\n", "<br>")
     result['answer'] = result['answer'].replace("SOURCES:", "")
 
+
     return result
 
 

application/static/dist/css/output.css

@@ -517,6 +517,34 @@ video {
   position: static;
 }
 
+.fixed {
+  position: fixed;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.left-10 {
+  left: 2.5rem;
+}
+
+.right-10 {
+  right: 2.5rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -537,20 +565,20 @@ video {
   display: flex;
 }
 
-.w-3\/4 {
-  width: 75%;
+.h-5\/6 {
+  height: 83.333333%;
 }
 
-.w-full {
-  width: 100%;
+.max-h-screen {
+  max-height: 100vh;
 }
 
-.w-\[46rem\] {
-  width: 46rem;
+.min-h-screen {
+  min-height: 100vh;
 }
 
-.w-1\/4 {
-  width: 25%;
+.w-full {
+  width: 100%;
 }
 
 .flex-col {
@@ -561,6 +589,10 @@ video {
   align-items: center;
 }
 
+.items-stretch {
+  align-items: stretch;
+}
+
 .justify-between {
   justify-content: space-between;
 }
@@ -573,6 +605,10 @@ video {
   align-self: flex-end;
 }
 
+.justify-self-stretch {
+  justify-self: stretch;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -592,21 +628,6 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.bg-blue-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-}
-
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
-.bg-gray-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-}
-
 .p-2 {
   padding: 0.5rem;
 }
@@ -635,39 +656,18 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-#chat-container {
-  height: 44rem;
-  background-color: white;
-  padding: 10px;
-  overflow: auto;
-}
-
-.bg-gray-200 {
-  background-color: #edf2f7;
-}
-
-.bg-gray-900 {
-  background-color: #1a202c;
-}
-
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
-.shadow {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-.text-gray-700 {
-  color: #4a5568;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-}
+@media screen and (max-width: 1024px) {
+  .text-lg {
+    font-size: 3.125rem;
+    margin: 2rem;
+    line-height: inherit;
+  }
 
-.p-4 {
-  padding: 1.5rem;
+  .text-sm {
+    font-size: 2.5rem;
+    margin: 1.5rem;
+    line-height: inherit;
+  }
 }
 
 .loader {
@@ -696,4 +696,42 @@ video {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+@media (min-width: 640px) {
+  @media not all and (min-width: 1024px) {
+    .sm\:max-lg\:mb-12 {
+      margin-bottom: 3rem;
+    }
+
+    .sm\:max-lg\:mb-\[12rem\] {
+      margin-bottom: 12rem;
+    }
+
+    .sm\:max-lg\:hidden {
+      display: none;
+    }
+
+    .sm\:max-lg\:p-5 {
+      padding: 1.25rem;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:w-3\/4 {
+    width: 75%;
+  }
+
+  .lg\:w-\[46rem\] {
+    width: 46rem;
+  }
+
+  .lg\:w-1\/4 {
+    width: 25%;
+  }
+}
+
 

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/static/src/input.css

@@ -2,42 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
-#chat-container {
-    height: 44rem;
-    background-color: white;
-    padding: 10px;
-    overflow: auto;
-}
-
-
-
-.bg-gray-200 {
-    background-color: #edf2f7;
-  }
-
-  .bg-gray-900 {
-    background-color: #1a202c;
-  }
 
-  .rounded-lg {
-    border-radius: 0.5rem;
-  }
-
-  .shadow {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  }
 
-  .text-gray-700 {
-    color: #4a5568;
+@media screen and (max-width: 1024px) {
+  .text-lg {
+    font-size: 3.125rem;
+    margin: 2rem;
+    line-height: inherit;
   }
-
   .text-sm {
-    font-size: 0.875rem;
+    font-size: 2.5rem;
+    margin: 1.5rem;
+    line-height: inherit;
   }
 
-  .p-4 {
-    padding: 1.5rem;
-  }
+}
+
 
 .loader {
   border: 16px solid #f3f3f3; /* Light grey */

application/templates/index.html

@@ -10,14 +10,14 @@
   <body>
     <header class="bg-white p-2 flex justify-between items-center">
       <h1 class="text-lg font-medium">DocsGPT 🦖 Very early Preview</h1>
-      <a href="https://github.com/arc53/docsgpt" class="text-blue-500 hover:text-blue-800">About</a>
+      <a href="https://github.com/arc53/docsgpt" class="text-blue-500 hover:text-blue-800 text-sm">About</a>
     </header>
-    <div class="flex">
-      <div class="w-3/4">
+    <div class="lg:flex ml-2 mr-2">
+      <div class="lg: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="sm:max-lg:mb-[12rem]">
 
-            <div id="messages" class="w-full flex flex-col" >
+            <div id="messages" class="w-full flex flex-col mt-2" >
               <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
                 <p class="text-sm">Hello, ask me anything about this library. Im here to help</p>
               </div>
@@ -36,17 +36,17 @@ This will return a new DataFrame with all the columns from both tables, and only
           </div>
         </div>
 
-        <div class="flex 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...">
-          <button id="button-submit" class="bg-blue-500 text-white p-2 rounded-lg ml-2 mr-2 ml-2" type="submit">Send</button>
+        <div class="fixed bottom-0 w-full mt-4 mb-2 lg:w-3/4">
+        <form id="message-form" autocomplete="off" class="flex items-stretch">
+          <input autocomplete="off" id="message-input" class="bg-white p-2 rounded-lg ml-2 text-sm w-full" 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 text-sm sm:max-lg:p-5" type="submit">Send</button>
         </form>
         </div>
 
 
     </div>
         </div>
-        <div class="w-1/4 p-2">
+        <div class="lg:w-1/4 p-2 sm:max-lg:hidden">
           <p class="text-sm">This is a chatbot that uses the GPT-3, Faiss and <a href="https://github.com/hwchase17/langchain" class="text-blue-500 hover:text-blue-800">LangChain</a> to answer questions</p>
           <br>
           <p class="text-sm">The source code is available on <a href="https://github.com/arc53/docsgpt" class="text-blue-500 hover:text-blue-800">Github</a></p><br>