Upload app.py

app.py

@@ -213,6 +213,30 @@ html, body, [class*="css"] {
     color: var(--text) !important;
     border-radius: 10px !important;
 }
+
+/* ── st.chat_message styling ── */
+[data-testid="stChatMessage"] {
+    background: #111d35 !important;
+    border: 1px solid #1e3058 !important;
+    border-radius: 12px !important;
+    padding: 0.8rem 1rem !important;
+    margin: 0.5rem 0 !important;
+}
+[data-testid="stChatMessageContent"] p {
+    color: #e2e8f0 !important;
+    font-family: 'Nunito', sans-serif !important;
+    font-size: 0.93rem !important;
+    line-height: 1.8 !important;
+}
+/* Make math blocks stand out */
+.katex-display {
+    background: rgba(56,189,248,0.05) !important;
+    border-left: 3px solid #38bdf8 !important;
+    padding: 0.5rem 1rem !important;
+    border-radius: 0 8px 8px 0 !important;
+    margin: 0.5rem 0 !important;
+}
+
 </style>
 """, unsafe_allow_html=True)
 
@@ -446,57 +470,31 @@ st.markdown("""
 """, unsafe_allow_html=True)
 
 
-# ─── Chat Display ────────────────────────────────────────────────────────────────
-chat_html = '<div class="chat-area" id="chatArea">'
-
+# ─── Chat Display (uses st.chat_message for proper LaTeX rendering) ─────────────
 if not st.session_state.messages:
-    chat_html += """
+    st.markdown("""
     <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;
-                height:300px;color:#334155;text-align:center;">
-        <div style="font-size:3rem;margin-bottom:1rem;">📐</div>
-        <div style="font-family:'Rajdhani',sans-serif;font-size:1.2rem;color:#475569;letter-spacing:1px;">
+                height:260px;text-align:center;
+                background:#0d1526;border:1px solid #1e3058;border-radius:14px;
+                margin-bottom:1rem;">
+        <div style="font-size:3rem;margin-bottom:0.8rem;">📐</div>
+        <div style="font-family:'Rajdhani',sans-serif;font-size:1.2rem;
+                    color:#475569;letter-spacing:1px;">
             Ask any BSc Mathematics problem
         </div>
         <div style="font-size:0.82rem;color:#334155;margin-top:0.5rem;">
             Calculus · Linear Algebra · Number Theory · ODEs · Real Analysis · and more
         </div>
     </div>
-    """
+    """, unsafe_allow_html=True)
 else:
     for msg in st.session_state.messages:
         if msg["role"] == "user":
-            # Escape HTML to prevent rendering issues with math symbols
-            safe = (msg['content']
-                    .replace("&", "&amp;")
-                    .replace("<", "&lt;")
-                    .replace(">", "&gt;"))
-            chat_html += f'<div class="msg-user"><div class="bubble">🧑‍🎓 {safe}</div></div>'
+            with st.chat_message("user", avatar="🧑‍🎓"):
+                st.markdown(msg["content"])
         else:
-            content = msg['content']
-            # Escape first, then apply safe bold conversion
-            content = (content
-                       .replace("&", "&amp;")
-                       .replace("<", "&lt;")
-                       .replace(">", "&gt;"))
-            content = re.sub(r'\*\*(.*?)\*\*', r'<b>\1</b>', content)
-            content = content.replace('\n', '<br>')
-            chat_html += (
-                f'<div class="msg-ai">'
-                f'<div class="ai-avatar">∑</div>'
-                f'<div class="bubble">{content}</div>'
-                f'</div>'
-            )
-
-chat_html += '</div>'
-st.markdown(chat_html, unsafe_allow_html=True)
-
-st.markdown("""
-<script>
-    const c = document.getElementById('chatArea');
-    if (c) c.scrollTop = c.scrollHeight;
-</script>
-""", unsafe_allow_html=True)
-
+            with st.chat_message("assistant", avatar="📐"):
+                st.markdown(msg["content"])
 
 # ─── Input Row ──────────────────────────────────────────────────────────────────
 col1, col2 = st.columns([5, 1])