question number alighments

templates/chat.html

@@ -15,9 +15,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
 
     <style>
-        *{
-            direction: rtl;
-        }
+
         .main-chat-container{
             position: relative;
             background-color: rgb(0, 0, 0, 0.4);
@@ -263,7 +261,7 @@
             }
         }
 
-        *{ 
+        *:not(.special-span){ 
             unicode-bidi:bidi-override; 
             direction: RTL; 
         }
@@ -456,18 +454,29 @@
                 $(".start-block").removeClass("flex");
             }
 
-            const isRTL = true;
+            const englishRegex = /[A-Za-z0-9]+/g;
+
+
+            // Wrap Arabic text in <span dir="rtl">
+            // content = content.replace(arabicRegex, function(match) {
+            //     return `<span dir="rtl">${match}</span>`;
+            // });
+
+            // Wrap English text and numbers in <span dir="ltr">
+            formatted_question = question.replace(englishRegex, function(match) {
+                return `<span class="special-span" dir="ltr">${match}</span>`;
+            });
 
             $(".chat-container").append(`
-                <div class="chat-block question-block w-full flex flex-row-reverse items-center justify-end p-3 rtl z-10" style="background-color: rgba(255, 255, 255, 0.529);">
+                <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">
                         <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" style="width: 100%; margin: auto; text-wrap: pretty; font-size: 14px; text-align: right;">
-                            <span> ${question} </span>
+                        <div class="message-content pr-2" dir="auto" style="width: 100%; margin: auto; text-wrap: pretty; font-size: 14px; text-align: right;">
+                            ${formatted_question}
                         </div>
                     </div>
                 </div>