Connecting to backend step #1

Added a load directory button to select a folder for embeddings. Button looks like shit but it works.
alexpinel · Dec 30, 2023 · 922701b · 922701b
1 parent 8f26c35
commit 922701b
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 8 deletions.
diff --git a/src/dist/output.css b/src/dist/output.css
@@ -1258,6 +1258,14 @@ input:checked + .toggle-bg {
   height: 100vh;
 }
 
+.h-64 {
+  height: 16rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1294,6 +1302,14 @@ input:checked + .toggle-bg {
   width: 0.75rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1454,11 +1470,19 @@ input:checked + .toggle-bg {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-x {
   border-left-width: 1px;
   border-right-width: 1px;
 }
 
+.border-dashed {
+  border-style: dashed;
+}
+
 .border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(28 100 242 / var(--tw-border-opacity));
@@ -1589,6 +1613,14 @@ input:checked + .toggle-bg {
   padding-top: 0.5rem;
 }
 
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -2057,6 +2089,11 @@ input:checked + .toggle-bg {
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));
 }
 
+:is(:where(.dark) .dark\:hover\:border-gray-500:hover) {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
 :is(:where(.dark) .dark\:hover\:bg-blue-700:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(26 86 219 / var(--tw-bg-opacity));
@@ -2092,6 +2129,11 @@ input:checked + .toggle-bg {
   --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));
 }
 
+:is(:where(.dark) .dark\:focus\:ring-blue-800:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(30 66 159 / var(--tw-ring-opacity));
+}
+
 :is(:where(.dark) .peer:focus ~ .dark\:peer-focus\:ring-green-800) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(3 84 63 / var(--tw-ring-opacity));

diff --git a/src/index.html b/src/index.html
@@ -13,12 +13,27 @@
                 id="menu-side"
                 class="flex h-full w-1/5 flex-col justify-between border-x border-gray-400 bg-gray-50"
             >
-                <h1
-                    id="title"
-                    class="mx-1.5 text-2xl font-bold dark:text-white"
-                >
-                    My Documents
-                </h1>
+                <div class="flex items-center">
+                    <h1
+                        id="title"
+                        class="mx-1.5 text-2xl font-bold dark:text-white"
+                    >
+                        My Documents
+                    </h1>
+                    <button
+                        id="selectDirectoryButton"
+                        type="button"
+                        class="me-2 inline-flex items-center rounded-lg bg-blue-700 p-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                    >
+                        <img
+                            src="./Assets/icons/new folder LM.png"
+                            alt="Icon"
+                            class="h-5 w-5"
+                        />
+                        <span class="sr-only">Icon description</span>
+                    </button>
+                </div>
+
                 <div
                     id="switches and logo"
                     class="flex grow flex-col items-center justify-end"
@@ -76,11 +91,12 @@
                 >
                     <input
                         type="text"
-                        id="default-input"
+                        id="user-input"
                         class="h-9.5 focus:ring-none block flex-grow rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-base text-gray-900 shadow-md focus:border-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                     />
                     <!-- send button -->
                     <button
+                        id="send-button"
                         class="0 group relative me-2 ml-1 inline-flex h-11 items-end justify-end overflow-hidden rounded-lg bg-gradient-to-br from-cyan-500 to-blue-500 p-0.5 text-sm font-medium text-gray-900 shadow-md hover:text-white focus:border-none focus:outline-none group-hover:from-cyan-500 group-hover:to-blue-500 dark:text-white dark:focus:ring-cyan-800"
                     >
                         <span
@@ -97,6 +113,9 @@
             </div>
         </div>
 
-        <script src="/node_modules/flowbite/dist/flowbite.min.js"></script>
+        <script src="./render.js"></script>
+        <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="../node_modules/marked/marked.min.js"></script>
+        <script src="../node_modules/flowbite/dist/flowbite.min.js"></script>
     </body>
 </html>