CODEFIX: Added Adrega styling to fonts and improved breaking after bulletpoints etc

app.py

@@ -1,6 +1,8 @@
 import streamlit as st
 import streamlit.components.v1 as components
 import os
+import html
+import re
 from datasets import load_dataset
 from langchain_ollama import OllamaLLM
 from langchain_huggingface import HuggingFaceEmbeddings
@@ -108,7 +110,14 @@ retriever = st.session_state.db.as_retriever(search_kwargs={"k": 5})
 
 # 🔹 UI Styling
 st.markdown("""<style>
-.scrollable-div { max-height: 400px; overflow-y: auto; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; }
+.scrollable-div { 
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; 
+    max-height: 400px; 
+    overflow-y: auto; 
+    padding: 10px; 
+    border: 1px solid #ccc; 
+    background-color: #f9f9f9; 
+}
 input[data-testid="stTextInput"] { cursor: pointer; }
 input[data-testid="stTextInput"]:focus { cursor: text; }
 </style>
@@ -149,9 +158,11 @@ def build_context(history, max_chars=10000):
     return "\n".join(context)
 
 def render_chat():
-    html = """
+    
+    html_content = """
     <style>
         .scrollable-div {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; 
             max-height: 400px;
             overflow-y: auto;
             padding: 10px;
@@ -165,41 +176,64 @@ def render_chat():
     for msg in st.session_state.chat_history:
         content = msg["content"]
         
+        # Decode HTML entities first
+        content = html.unescape(content)
+        
         # Convert markdown to HTML
         content = content.replace('\n', '<br>')  # Line breaks
         content = content.replace('**', '<b>', 1).replace('**', '</b>', 1)
         while '**' in content:
             content = content.replace('**', '<b>', 1).replace('**', '</b>', 1)
         
-        # Convert markdown lists to HTML
+        # Convert lists to HTML
         lines = content.split('<br>')
         processed_lines = []
-        in_list = False
+        in_ul_list = False
+        in_ol_list = False
         
         for line in lines:
             stripped = line.strip()
-            if stripped.startswith('- ') or stripped.startswith('* '):
-                if not in_list:
+            # Check for numbered lists (1. 2. etc.)
+            if re.match(r'^\d+\.\s+', stripped):
+                if in_ul_list:
+                    processed_lines.append('</ul>')
+                    in_ul_list = False
+                if not in_ol_list:
+                    processed_lines.append('<ol>')
+                    in_ol_list = True
+                item_text = re.sub(r'^\d+\.\s+', '', stripped)
+                processed_lines.append(f'<li>{item_text}</li>')
+            # Check for bullet lists
+            elif stripped.startswith('- ') or stripped.startswith('* '):
+                if in_ol_list:
+                    processed_lines.append('</ol>')
+                    in_ol_list = False
+                if not in_ul_list:
                     processed_lines.append('<ul>')
-                    in_list = True
+                    in_ul_list = True
                 processed_lines.append(f'<li>{stripped[2:]}</li>')
             else:
-                if in_list:
+                if in_ul_list:
                     processed_lines.append('</ul>')
-                    in_list = False
+                    in_ul_list = False
+                if in_ol_list:
+                    processed_lines.append('</ol>')
+                    in_ol_list = False
                 processed_lines.append(line)
         
-        if in_list:
+        if in_ul_list:
             processed_lines.append('</ul>')
+        if in_ol_list:
+            processed_lines.append('</ol>')
         
         content = ''.join(processed_lines)
         
         if msg["role"] == "user":
-            html += f'<div style="background-color:#e0e0e0; padding:8px; border-radius:5px; margin-bottom:6px;"><b>You:</b> {content}</div>'
+            html_content += f'<div style="background-color:#e0e0e0; padding:8px; border-radius:5px; margin-bottom:6px;"><b>You:</b> {content}</div>'
         else:
-            html += f'<div style="padding:8px; margin-bottom:6px;"><b>Adrega AI:</b> {content}</div>'
+            html_content += f'<div style="padding:8px; margin-bottom:6px;"><b>Adrega AI:</b> {content}</div>'
 
-    html += """
+    html_content += """
     </div>
     <script>
         const chatBox = document.getElementById("chat-box");
@@ -209,7 +243,7 @@ def render_chat():
     </script>
     """
 
-    components.html(html, height=420, scrolling=False)
+    components.html(html_content, height=420, scrolling=False)
 
 # 🔹 Handle user input
 def handle_submit():

styles.css

@@ -1,3 +1,7 @@
+* {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+}
+
 .st-emotion-cache-1w723zb {
     padding: 4rem !important; /* Adjust the padding value as needed */
 }