Update app.py

app.py

@@ -33,20 +33,31 @@ def load_model():
     print("Model loaded successfully!")
 
 def format_thinking_text(text):
-    """Format text to properly display <think> tags in Gradio with better styling"""
+    """Format text to properly display <think> tags in Gradio with blue border styling like HelpingAI"""
     if not text:
         return text
 
-    # More sophisticated formatting for thinking blocks
-    # Replace <think> and </think> tags with styled markdown
+    # More sophisticated formatting for thinking blocks with blue styling
     formatted_text = text
 
-    # Handle thinking blocks with proper markdown formatting
+    # Handle thinking blocks with proper HTML-like styling for Gradio
     thinking_pattern = r'<think>(.*?)</think>'
 
     def replace_thinking_block(match):
         thinking_content = match.group(1).strip()
-        return f"\n\n💭 **Thinking Process:**\n\n```\n{thinking_content}\n```\n\n"
+        # Use HTML div with inline CSS for blue border styling like HelpingAI
+        return f'''
+
+<div style="border-left: 4px solid #4a90e2; background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%); padding: 16px 20px; margin: 16px 0; border-radius: 12px; font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15); border: 1px solid rgba(74, 144, 226, 0.2);">
+<div style="color: #4a90e2; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; font-size: 14px;">
+<span style="margin-right: 8px;">🧠</span> Think
+</div>
+<div style="color: #2c3e50; line-height: 1.6; font-size: 14px;">
+{thinking_content}
+</div>
+</div>
+
+'''
 
     formatted_text = re.sub(thinking_pattern, replace_thinking_block, formatted_text, flags=re.DOTALL)
 
@@ -171,26 +182,25 @@ custom_css = """
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-/* Thinking block styling */
+/* Enhanced thinking block styling - now handled via inline HTML */
 .thinking-block {
     background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
     border-left: 4px solid #4a90e2;
     border-radius: 8px;
     padding: 12px 16px;
     margin: 12px 0;
-    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-family: 'Segoe UI', sans-serif;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     position: relative;
 }
 
-.thinking-block::before {
-    content: "🤔";
-    position: absolute;
-    top: -8px;
-    left: 12px;
-    background: white;
-    padding: 0 4px;
-    font-size: 16px;
+/* Support for HTML content in chatbot */
+.chatbot .message {
+    overflow: visible;
+}
+
+.chatbot .message div {
+    max-width: none;
 }
 
 /* Message styling */
@@ -305,6 +315,7 @@ with gr.Blocks(
                 show_share_button=True,
                 avatar_images=("👤", "🤖"),
                 render_markdown=True,
+                sanitize_html=False,  # Allow HTML for thinking blocks
                 latex_delimiters=[
                     {"left": "$$", "right": "$$", "display": True},
                     {"left": "$", "right": "$", "display": False}