Update templates/chat.html

templates/chat.html

@@ -10,12 +10,24 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
 
     <script src="https://cdn.tailwindcss.com"></script>
 
     <style>
 
+        // <uniquifier>: Use a unique and descriptive class name
+            // <weight>: Use a value from 300 to 900
+            
+        *:lang(ar-AR){
+            font-family: "Rubik", sans-serif;
+            font-optical-sizing: auto;
+            font-size: 1.01.rem
+        }
+
         .main-chat-container{
             position: relative;
             background-color: rgb(0, 0, 0, 0.4);
@@ -31,7 +43,6 @@
             flex-direction: column;
             box-shadow: 0px 0px 15px 8px rgba(255,255,255,0.1);
             z-index: 9999;
-            /* border: 10 px solid red; */
             font-family: "DM Sans", sans-serif;
         }
 
@@ -193,22 +204,13 @@
             display: none;
         }
 
-
-        /*small{*/
-        /*font-size: 12px;*/
-        /*}*/
-
         .bg-special-secondary{
-        background-color: rgb(230, 230, 230);
+            background-color: rgb(230, 230, 230);
         }
         .message-content *:not(i){
             font-family: "DM Sans", sans-serif;
         }
 
-        .message-content *:not(h1,h2,h3,h4,h5,h6){
-            font-weight: 500;
-        }
-
         .message-content strong{
             color: black;
             font-weight: bold;
@@ -225,11 +227,12 @@
         }
         .message-content ol, .message-content ul{
             margin: 18px 0px;
+            list-style="bullet";
         }
         .message-content ol li, .message-content ul li{
             margin: 12px 0px ;
         }
-        .message-content p{
+        .message-content p:not(:first-of-type){
             margin-bottom: 18px;
             text-wrap: pretty;
         }
@@ -266,9 +269,6 @@
             direction: RTL; 
         }
 
-    </style>
-
-    <style>
         #question-box span[dir="rtl"] {
             direction: rtl;
             unicode-bidi: embed;
@@ -290,7 +290,7 @@
                     <!-- <span class="text-dark mb-0 chatbot-title" style="font-weight: 800; font-size: 20px; direction: ltr;">ADAFSA Chatbot</span> -->
                 </div>
                 <div class="flex items-center" style="gap: 5px;">
-                    <button class="clearBtn flex items-center justify-center gap-1 px-4 py-2 bg-black rounded-full" type="button" style="direction: ltr;">
+                    <button class="clearBtn flex items-center justify-center gap-1 px-4 py-2 bg-black rounded-full z-10" type="button" style="direction: ltr;">
                         <span class="flex items-center justify-center" style="width: 20px; height: 20px;">
                             <svg width="24px" height="24px" viewBox="-3.2 -3.2 22.40 22.40" xmlns="http://www.w3.org/2000/svg" fill="#050505" stroke="#ffffff" stroke-width="0.064"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" d="M13.9907,1.31133017e-07 C14.8816,1.31133017e-07 15.3277,1.07714 14.6978,1.70711 L13.8556,2.54922 C14.421,3.15654 14.8904,3.85028 15.2448,4.60695 C15.8028,5.79836 16.0583,7.109 15.9888,8.42277 C15.9193,9.73654 15.5268,11.0129 14.8462,12.1388 C14.1656,13.2646 13.2178,14.2053 12.0868,14.8773 C10.9558,15.5494 9.67655,15.9322 8.3623,15.9918 C7.04804,16.0514 5.73937,15.7859 4.55221,15.2189 C3.36505,14.652 2.33604,13.8009 1.55634,12.7413 C0.776635,11.6816 0.270299,10.446 0.0821822,9.14392 C0.00321229,8.59731 0.382309,8.09018 0.928918,8.01121 C1.47553,7.93224 1.98266,8.31133 2.06163,8.85794 C2.20272,9.83451 2.58247,10.7612 3.16725,11.556 C3.75203,12.3507 4.52378,12.989 5.41415,13.4142 C6.30452,13.8394 7.28602,14.0385 8.27172,13.9939 C9.25741,13.9492 10.2169,13.6621 11.0651,13.158 C11.9133,12.6539 12.6242,11.9485 13.1346,11.1041 C13.6451,10.2597 13.9395,9.30241 13.9916,8.31708 C14.0437,7.33175 13.8521,6.34877 13.4336,5.45521 C13.178,4.90949 12.8426,4.40741 12.4402,3.96464 L11.7071,4.69779 C11.0771,5.32776 9.99996,4.88159 9.99996,3.99069 L9.99996,1.31133017e-07 L13.9907,1.31133017e-07 Z M1.499979,4 C2.05226,4 2.499979,4.44772 2.499979,5 C2.499979,5.55229 2.05226,6 1.499979,6 C0.947694,6 0.499979,5.55228 0.499979,5 C0.499979,4.44772 0.947694,4 1.499979,4 Z M3.74998,1.25 C4.30226,1.25 4.74998,1.69772 4.74998,2.25 C4.74998,2.80229 4.30226,3.25 3.74998,3.25 C3.19769,3.25 2.74998,2.80228 2.74998,2.25 C2.74998,1.69772 3.19769,1.25 3.74998,1.25 Z M6.99998,0 C7.55226,0 7.99998,0.447716 7.99998,1 C7.99998,1.55229 7.55226,2 6.99998,2 C6.44769,2 5.99998,1.55229 5.99998,1 C5.99998,0.447716 6.44769,0 6.99998,0 Z"></path> </g></svg>
                         </span>
@@ -303,7 +303,7 @@
             <hr>
 
 
-            <div class="relative chat-container w-full mx-auto hide-scrolllbar rounded-xl mb-2" style="max-width: 800px; flex-grow: 1; padding: 20px 0px; display: flex; flex-direction: column; gap: 10px; text-wrap: pretty; overflow-y: auto; overflow-x: hidden;">
+            <div class="relative chat-container w-full mx-auto hide-scrolllbar rounded-xl mb-20 flex flex-col gap-4 my-8" style="max-width: 900px; flex-grow: 1; padding: 20px 0px; text-wrap: pretty; overflow-y: auto; overflow-x: hidden;">
                 <div class="start-block load-chat-block w-full flex-grow flex flex-col items-center justify-center bg-white z-10">
                     <div class="w-full flex-grow flex flex-col items-center justify-center y-4 text-center">
                         <img src="./static/bg-image.jpg" class="w-1/2" alt="adafsa-logo">
@@ -379,15 +379,15 @@
                         </div>
                     </div>
                 </div>
+               
+            </div>
 
-                <div class="absolute w-full h-full top-0 left-0 z-0 flex items-center justify-center">
-                    <img src="./static/image.png" class="opacity-10" alt="greyscale-image">
-                </div>
-
+            <div class="absolute w-full h-full top-0 left-0 z-0 flex items-center justify-center">
+                <img src="./static/image.png" class="opacity-5" alt="greyscale-image">
             </div>
 
-            <div class="w-full bg-transparent">
-                <div class="input-options-container  max-w-3xl p-3 flex flex-row items-center justify-between border rounded-full shadow-xl mx-auto">
+            <div class="w-full bg-transparent mx-auto pb-3 absolute bottom-0 left-1/2 z-10 -translate-x-1/2" style="max-width: 900px;">
+                <div class="input-options-container  w-5xl p-3 flex flex-row items-center justify-between border-2 border-gray-400 rounded-full shadow-2xl mx-auto bg-gray-50">
                     <div id="question-box" dir="auto" class="inline-block px-4 text-2xl overflow-hidden" contenteditable="true" data-placeholder="أكتب سؤالك هنا..." style="width: 100%; max-height: 100px; outline: none; font-weight: 500; font-size: 14px;"></div>
                     <button class="sendbtn " style="width: 40px; height: 40px; padding: 8px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 30px; border: none; color: white;">
                         <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 6V18M12 6L7 11M12 6L17 11" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
@@ -431,7 +431,7 @@
             const isRTL = true;
             $(".chat-container").append(
                 `
-                    <div class="chat-block load-chat-block w-full flex flex-row-reverse items-center justify-end bg-secondary p-3 rounded-xl z-10" style="background-color: rgba(242, 255, 225, 0.678);">
+                    <div class="chat-block load-chat-block w-full flex flex-row-reverse items-start justify-end bg-secondary p-5 rounded-2xl rtl z-10 bg-green-200/50">
                         <div class="flex items-center order-2" >
                             <span class="bg-white" style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50px; padding: 5px; border: 2px solid #c2c2c2;">
                                 <svg fill="#000000" width="36px" height="36px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M21.928 11.607c-.202-.488-.635-.605-.928-.633V8c0-1.103-.897-2-2-2h-6V4.61c.305-.274.5-.668.5-1.11a1.5 1.5 0 0 0-3 0c0 .442.195.836.5 1.11V6H5c-1.103 0-2 .897-2 2v2.997l-.082.006A1 1 0 0 0 1.99 12v2a1 1 0 0 0 1 1H3v5c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5a1 1 0 0 0 1-1v-1.938a1.006 1.006 0 0 0-.072-.455zM5 20V8h14l.001 3.996L19 12v2l.001.005.001 5.995H5z"></path><ellipse cx="8.5" cy="12" rx="1.5" ry="2"></ellipse><ellipse cx="15.5" cy="12" rx="1.5" ry="2"></ellipse><path d="M8 16h8v2H8z"></path></g></svg>
@@ -439,7 +439,7 @@
                         </div>
                         <div class="px-3 py-1 order-1">
                             <div class="message-content pr-2" style="width: 100%; height: 100%; margin: auto; font-weight: 500; text-wrap: pretty; text-align: right;">
-                            <span class="loading-text">البحث</span>
+                                <span class="loading-text">البحث</span>
                             </div>
                         </div>
                     </div>
@@ -461,15 +461,17 @@
                 return `<span class="special-span" dir="ltr"> ${match} </span>`;
             });
 
+            formatted_question = converter.makeHtml(formatted_question);
+
             $(".chat-container").append(`
-                <div class="chat-block question-block w-full flex flex-row-reverse items-center justify-end p-3 z-10" style="background-color: rgba(255, 255, 255, 0.529);">
-                    <div class="flex items-center order-2">
+                <div class="chat-block question-block w-full flex flex-row-reverse items-start justify-end p-5 z-10 rounded-2xl bg-blue-200/50">
+                    <div class="flex items-center order-2 bg-white rounded-full">
                         <span style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50px; padding: 3px; border: 2px solid #c2c2c2;">
                             <svg fill="#000000" width="36px" height="36px" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M128,76a44,44,0,1,1-44,44A43.99983,43.99983,0,0,1,128,76Zm48-12h16V80a8,8,0,0,0,16,0V64h16a8,8,0,0,0,0-16H208V32a8,8,0,0,0-16,0V48H176a8,8,0,0,0,0,16Zm45.56006,40.95605a8.00039,8.00039,0,0,0-6.64893,9.15381A89.00044,89.00044,0,0,1,216,128a87.63672,87.63672,0,0,1-22.24182,58.41016,79.7044,79.7044,0,0,0-24.431-22.97461,59.83641,59.83641,0,0,1-82.6543,0A79.70345,79.70345,0,0,0,62.2417,186.41016,87.9498,87.9498,0,0,1,128,40a89.02966,89.02966,0,0,1,13.89062,1.08887,7.99994,7.99994,0,1,0,2.50391-15.80274A104.0826,104.0826,0,0,0,24,128a103.74716,103.74716,0,0,0,33.81934,76.68066,7.94507,7.94507,0,0,0,1.32629,1.18946,103.784,103.784,0,0,0,137.71252-.00293,7.94633,7.94633,0,0,0,1.31678-1.18115A103.74751,103.74751,0,0,0,232,128a105.04749,105.04749,0,0,0-1.28613-16.39453A7.99752,7.99752,0,0,0,221.56006,104.95605Z"></path> </g></svg>
                         </span>
                     </div>
-                    <div class="px-3 order-1">
-                        <div class="message-content pr-2" dir="auto" style="width: 100%; margin: auto; text-wrap: pretty; font-size: 14px; text-align: right;">
+                    <div class="px-3 py-1 order-1">
+                        <div class="message-content pr-2 font-medium" dir="auto" style="width: 100%; margin: auto; text-wrap: pretty; font-size: 14px; text-align: right;">
                             ${formatted_question}
                         </div>
                     </div>
@@ -508,12 +510,14 @@
                 return `<span class="special-span px-1" dir="ltr">${match}</span>`;
             });
 
+            formatted_answer = converter.makeHtml(formatted_answer);
+
             if (lastElement.hasClass("response-block")) {
                 $(".chat-container .chat-block:last-child").find(".message-content").html(formatted_answer);
             } else {
                 lastElement.remove();
                 $(".chat-container").append(`
-                    <div class="chat-block response-block w-full flex flex-row-reverse items-start justify-end bg-secondary p-3 rounded-xl rtl z-10" style="background-color: rgba(242, 255, 225, 0.529);">
+                    <div class="chat-block response-block w-full flex flex-row-reverse items-start justify-end bg-secondary p-5 rounded-2xl rtl z-10 bg-green-200/50">
                         <div class="flex items-center order-2" >
                             <span class="bg-white" style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50px; padding: 5px; border: 2px solid #c2c2c2;">
                                 <svg fill="#000000" width="36px" height="36px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M21.928 11.607c-.202-.488-.635-.605-.928-.633V8c0-1.103-.897-2-2-2h-6V4.61c.305-.274.5-.668.5-1.11a1.5 1.5 0 0 0-3 0c0 .442.195.836.5 1.11V6H5c-1.103 0-2 .897-2 2v2.997l-.082.006A1 1 0 0 0 1.99 12v2a1 1 0 0 0 1 1H3v5c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5a1 1 0 0 0 1-1v-1.938a1.006 1.006 0 0 0-.072-.455zM5 20V8h14l.001 3.996L19 12v2l.001.005.001 5.995H5z"></path><ellipse cx="8.5" cy="12" rx="1.5" ry="2"></ellipse><ellipse cx="15.5" cy="12" rx="1.5" ry="2"></ellipse><path d="M8 16h8v2H8z"></path></g></svg>