Spaces:

Ritesh-hf
/

ADAFSA-FLASK-APP-DEMO

Sleeping

App Files Files Community

Ritesh Thawkar commited on Oct 3, 2024

Commit

46de9df

1 Parent(s): 24e37bf

made chat response list styled

Browse files

Files changed (3) hide show

.gitignore +2 -1
app.py +22 -12
templates/chat.html +49 -52

.gitignore CHANGED Viewed

	@@ -1 +1,2 @@
1	- .env


1	+ .env
2	+ .adafsa-env

app.py CHANGED Viewed

@@ -59,7 +59,7 @@ combined_vectorstore = excel_vectorstore
 with open('combined_recursive_keyword_retriever.pkl', 'rb') as f:
     combined_keyword_retriever = pickle.load(f)
-    combined_keyword_retriever.k = 1000
 semantic_retriever = combined_vectorstore.as_retriever(search_type="mmr", search_kwargs={"k": 100})
@@ -76,23 +76,33 @@ compression_retriever = ContextualCompressionRetriever(
 )
 template = """
-User Instructions:
-You are an Arabic AI Assistant focused on providing clear, concise responses.
-Always answer truthfully. If the user query is irrelevant to the provided CONTEXT, respond stating the reason.
-For general questions like greetings reply with formal greetings.
-Generate responses in Arabic. Format any English words and numbers appropriately for clarity.
-Round off numbers with decimal integers to two decimal integers.
-Use numbered lists where applicable for better organization.
-Provide detailed yet concise answers, covering all important aspects.
-Remember, responding outside the CONTEXT may lead to the termination of the interaction.
 CONTEXT: {context}
 Query: {question}
-After generating your response, ensure proper formatting and text direction of Arabic and English words/numbers. Return only the AI-generated answer.
 """
 prompt = ChatPromptTemplate.from_template(template)

 with open('combined_recursive_keyword_retriever.pkl', 'rb') as f:
     combined_keyword_retriever = pickle.load(f)
+    # combined_keyword_retriever.k = 1000
 semantic_retriever = combined_vectorstore.as_retriever(search_type="mmr", search_kwargs={"k": 100})
 )
 template = """
+You are an Arabic AI Assistant focused on providing clear, detailed responses in HTML format with appropriate direction for Arabic language (right-to-left).
+    - Always answer truthfully. If the user query is irrelevant to the provided CONTEXT, respond by stating the reason.
+    - For general questions like greetings, reply with formal Arabic greetings.
+    - Generate responses in Arabic, and format any English words and numbers appropriately for clarity.
+Response Formatting Guidelines:
+    - All responses must be generated in HTML and wrapped inside a <div dir="rtl"> tag.
+    - Utilize proper HTML tags for structuring the response:
+        - Use <p> for paragraphs.
+        - Apply <strong> for bold texts.
+        - Organize content with ordered (<ol>) or unordered (<ul>) lists as needed.
+        - Include line breaks (<br>) where appropriate for readability.
+    - Wrap all English words/numbers or sentences in a <span dir="ltr"> tag to maintain left-to-right directionality.
+    - Numbers with decimal values should be rounded off to two decimal places.
+    - Follow right-to-left language rules (dir="rtl"), ensuring Arabic text is properly aligned.
+Additional Instructions:
+    - Provide detailed yet concise answers, covering all important aspects.
+    - Ensure proper HTML formatting is applied to the entire response for clarity and structure.
+    - Only return the AI-generated answer in HTML format.
+    - Responding outside the provided CONTEXT may result in the termination of the interaction.
 CONTEXT: {context}
 Query: {question}
 """
 prompt = ChatPromptTemplate.from_template(template)

templates/chat.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,17 +15,17 @@
     <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{
@@ -46,24 +46,10 @@
             font-family: "DM Sans", sans-serif;
         }
-        /* @media(max-width: 800px){
-        .chat-container-wrapper{
-            width: calc(100% - 30px);
-            margin: auto;
-        }
-        } */
         .chat-container-wrapper * {
             font-family: "DM Sans", sans-serif;
         }
-        /* .chat-container-wrapper .chatbot-header{
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-between;
-        } */
         .chat-container-wrapper a{
             color: rgb(11, 172, 235);
             text-decoration:underline;
@@ -78,29 +64,29 @@
         /* Hide scrollbar for Chrome, Safari and Opera */
         .styled-scrolllbar::-webkit-scrollbar {
-        display: none;
         }
         /* Hide scrollbar for IE, Edge and Firefox */
         ::-webkit-scrollbar {
-        width: 6px;
-        border-radius: 5px;
         }
         /* Track */
         ::-webkit-scrollbar-track {
-        background: #f1f1f1;
         }
         /* Handle */
         ::-webkit-scrollbar-thumb {
-        background: #888;
-        border-radius: 10px;
         }
         /* Handle on hover */
         ::-webkit-scrollbar-thumb:hover {
-        background: #555;
         }
         /* Hide scrollbar for Chrome, Safari and Opera */
@@ -115,7 +101,7 @@
         }
         .question-item:hover{
-        background-color: rgb(245, 245, 245);
         }
         .sendbtn{
@@ -138,17 +124,13 @@
             pointer-events: none;
         }
-        /* div[contenteditable]:focus:empty:before {
-            content: 'Start typing';
-        } */
-        /* HTML: <div class="loader"></div> */
-        /* HTML: <div class="loader"></div> */
         .chat-loader {
             display: flex;
             align-items: center;
             gap: 6px;
             padding: 8px 10px;
         }
         .chat-loader .dot {
             width: 8px;
             aspect-ratio: 1;
@@ -156,19 +138,24 @@
             background-color: gray;
             animation: l5 0.6s ease-in-out infinite;
         }
         .chat-loader .dot:nth-child(1){
             animation-delay: 0s;
         }
         .chat-loader .dot:nth-child(2){
             animation-delay: 0.2s;
         }
         .chat-loader .dot:nth-child(3){
             animation-delay: 0.3s;
         }
         .message-content *{
             width: 100%;
-            font-size: 16px;
         }
         .neumorphic-box-shadow{
             border-radius: 50px;
             background: #e0e0e0;
@@ -207,6 +194,7 @@
         .bg-special-secondary{
             background-color: rgb(230, 230, 230);
         }
         .message-content *:not(i){
             font-family: "DM Sans", sans-serif;
         }
@@ -215,37 +203,49 @@
             color: black;
             font-weight: bold;
         }
         .message-content h3:not(:first-of-type){
             margin: 18px 0px 10px 0px;
             color: black;
         }
         .message-content h4{
             margin: 15px 0px 8px 0px;
         }
         .message-content h5, .message-content h6{
             margin: 12px 0px 6px 0px;
         }
         .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:not(:first-of-type){
             margin-bottom: 18px;
             text-wrap: pretty;
         }
         .message-content a{
             text-wrap: pretty;
         }
         .loading-text{
             position: relative;
         }
         .loading-text::after{
             content: '....';
             animation: loading-text-animation 1s infinite;
         }
         @keyframes loading-text-animation {
             0%{
                 content: ''
@@ -277,6 +277,12 @@
             direction: ltr;
             unicode-bidi: embed;
         }
     </style>
@@ -303,7 +309,7 @@
             <hr>
-            <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,7 +385,6 @@
                         </div>
                     </div>
                 </div>
             </div>
             <div class="absolute w-full h-full top-0 left-0 z-0 flex items-center justify-center">
@@ -408,7 +413,7 @@
     <script>
         // Initialize Socket.IO client
-        var socket = io.connect('https://ritesh-hf-adafsa-flask-app-demo.hf.space', {
             transports: ['websocket']
         });
@@ -431,7 +436,7 @@
             const isRTL = true;
             $(".chat-container").append(
                 `
-                    <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>
@@ -464,7 +469,7 @@
             formatted_question = converter.makeHtml(formatted_question);
             $(".chat-container").append(`
-                <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>
@@ -503,28 +508,26 @@
         function appendAnswer(answer) {
             let lastElement = $(".chat-container .chat-block:last-child");
-            const englishRegex = /[A-Za-z0-9]+(?:\.[0-9]+)?/g;
             // Wrap English text and numbers in <span dir="ltr">
             formatted_answer = answer.replace(englishRegex, function(match) {
                 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-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>
                             </span>
                         </div>
                         <div class="px-3 py-1">
-                            <div class="message-content pr-2" style="width: 100%; height: 100%; margin: auto; font-weight: 500; text-wrap: pretty;" style="-webkit-locale: "ar";" >
                                 ${formatted_answer}
                             </div>
                         </div>
@@ -583,19 +586,13 @@
             console.error("Connection error:", error);
             appendMessage("Sorry, there was a problem connecting to the server. Please try again later.");
         });
-        // // Handle disconnection
-        // socket.on('connect', (reason) => {
-        //     // Emit website category via Socket.IO
-        //     socket.emit('website', { website: "UAE_Legislation", session_id: 'abc123'  });
-        // });
         // Handle disconnection
         socket.on('disconnect', (reason) => {
             console.warn("Disconnected from server:", reason);
             response = "";
             // appendAnswer("You have been disconnected from the server. Please refresh the page to reconnect.");
-            socket = io.connect('https://ritesh-hf-adafsa-flask-app-demo.hf.space', {
                 transports: ['websocket']
             });
         });

 <!DOCTYPE html>
+<html lang="ar">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         *:lang(ar-AR){
             font-family: "Rubik", sans-serif;
             font-optical-sizing: auto;
+            font-style: normal;
         }
         .main-chat-container{
             font-family: "DM Sans", sans-serif;
         }
         .chat-container-wrapper * {
             font-family: "DM Sans", sans-serif;
         }
         .chat-container-wrapper a{
             color: rgb(11, 172, 235);
             text-decoration:underline;
         /* Hide scrollbar for Chrome, Safari and Opera */
         .styled-scrolllbar::-webkit-scrollbar {
+            display: none;
         }
         /* Hide scrollbar for IE, Edge and Firefox */
         ::-webkit-scrollbar {
+            width: 6px;
+            border-radius: 5px;
         }
         /* Track */
         ::-webkit-scrollbar-track {
+            background: #f1f1f1;
         }
         /* Handle */
         ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
         }
         /* Handle on hover */
         ::-webkit-scrollbar-thumb:hover {
+            background: #555;
         }
         /* Hide scrollbar for Chrome, Safari and Opera */
         }
         .question-item:hover{
+            background-color: rgb(245, 245, 245);
         }
         .sendbtn{
             pointer-events: none;
         }
         .chat-loader {
             display: flex;
             align-items: center;
             gap: 6px;
             padding: 8px 10px;
         }
         .chat-loader .dot {
             width: 8px;
             aspect-ratio: 1;
             background-color: gray;
             animation: l5 0.6s ease-in-out infinite;
         }
         .chat-loader .dot:nth-child(1){
             animation-delay: 0s;
         }
         .chat-loader .dot:nth-child(2){
             animation-delay: 0.2s;
         }
         .chat-loader .dot:nth-child(3){
             animation-delay: 0.3s;
         }
         .message-content *{
             width: 100%;
+            font-size: 18px;
         }
         .neumorphic-box-shadow{
             border-radius: 50px;
             background: #e0e0e0;
         .bg-special-secondary{
             background-color: rgb(230, 230, 230);
         }
         .message-content *:not(i){
             font-family: "DM Sans", sans-serif;
         }
             color: black;
             font-weight: bold;
         }
         .message-content h3:not(:first-of-type){
             margin: 18px 0px 10px 0px;
             color: black;
         }
         .message-content h4{
             margin: 15px 0px 8px 0px;
         }
         .message-content h5, .message-content h6{
             margin: 12px 0px 6px 0px;
         }
         .message-content ol, .message-content ul{
             margin: 18px 0px;
+            list-style-type:disc;
+            list-style-position: outside;
+            padding-right: 40px;
         }
         .message-content ol li, .message-content ul li{
             margin: 12px 0px ;
         }
+        .response-block .message-content p{
             margin-bottom: 18px;
             text-wrap: pretty;
         }
         .message-content a{
             text-wrap: pretty;
         }
         .loading-text{
             position: relative;
         }
         .loading-text::after{
             content: '....';
             animation: loading-text-animation 1s infinite;
         }
         @keyframes loading-text-animation {
             0%{
                 content: ''
             direction: ltr;
             unicode-bidi: embed;
         }
+        ol, ul{
+            list-style: disc;
+            padding-right: 40px;
+            list-style-position: outside;
+        }
     </style>
             <hr>
+            <div class="relative chat-container w-full mx-auto hide-scrolllbar rounded-xl mb-20 flex flex-col 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">
                         </div>
                     </div>
                 </div>
             </div>
             <div class="absolute w-full h-full top-0 left-0 z-0 flex items-center justify-center">
     <script>
         // Initialize Socket.IO client
+        var socket = io.connect('http://127.0.0.1:5000/', {
             transports: ['websocket']
         });
             const isRTL = true;
             $(".chat-container").append(
                 `
+                    <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-gray-100/60">
                         <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>
             formatted_question = converter.makeHtml(formatted_question);
             $(".chat-container").append(`
+                <div class="chat-block question-block w-full flex flex-row-reverse items-start justify-end p-5 z-10 rounded-2xl bg-white/60">
                     <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>
         function appendAnswer(answer) {
             let lastElement = $(".chat-container .chat-block:last-child");
+            const englishRegex = /[0-9]+(?:\.[0-9]+)?/g;
             // Wrap English text and numbers in <span dir="ltr">
             formatted_answer = answer.replace(englishRegex, function(match) {
                 return `<span class="special-span px-1" dir="ltr">${match}</span>`;
             });
             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-5 rounded-2xl rtl z-10 bg-gray-100/60">
                         <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>
                             </span>
                         </div>
                         <div class="px-3 py-1">
+                            <div class="message-content pr-2" style="width: 100%; height: 100%; margin: auto; text-wrap: pretty;" style="-webkit-locale: "ar";" >
                                 ${formatted_answer}
                             </div>
                         </div>
             console.error("Connection error:", error);
             appendMessage("Sorry, there was a problem connecting to the server. Please try again later.");
         });
         // Handle disconnection
         socket.on('disconnect', (reason) => {
             console.warn("Disconnected from server:", reason);
             response = "";
             // appendAnswer("You have been disconnected from the server. Please refresh the page to reconnect.");
+            socket = io.connect('http://127.0.0.1:5000/', {
                 transports: ['websocket']
             });
         });