Update app.py

app.py

@@ -55,12 +55,25 @@ def clear_chat():
     """Clear chat history"""
     return [], ""
 
-# Custom CSS for better styling
+# Responsive CSS with mobile-first approach
 css = """
+/* Base styles - Mobile first */
 .gradio-container {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+/* Large screens - center content with max width */
+@media (min-width: 1200px) {
+    .gradio-container {
+        max-width: 1400px;
+        padding: 20px;
+    }
 }
 
+/* Chat message styling */
 .chat-message {
     padding: 10px;
     margin: 5px 0;
@@ -69,25 +82,168 @@ css = """
 
 .user-message {
     background-color: #e3f2fd;
-    margin-left: 20%;
+    margin-left: 10%;
 }
 
 .bot-message {
     background-color: #f5f5f5;
-    margin-right: 20%;
+    margin-right: 10%;
+}
+
+/* Responsive layout adjustments */
+@media (max-width: 768px) {
+    .user-message {
+        margin-left: 5%;
+    }
+    .bot-message {
+        margin-right: 5%;
+    }
+}
+
+/* Chatbot container responsive height */
+.chatbot-container {
+    height: 400px;
+}
+
+@media (min-width: 768px) {
+    .chatbot-container {
+        height: 500px;
+    }
+}
+
+@media (min-width: 1024px) {
+    .chatbot-container {
+        height: 600px;
+    }
+}
+
+/* Input row responsive behavior */
+.input-row {
+    display: flex;
+    gap: 10px;
+    align-items: flex-end;
+    flex-wrap: nowrap;
+}
+
+@media (max-width: 480px) {
+    .input-row {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .input-row .textbox {
+        width: 100% !important;
+    }
+    
+    .input-row .button {
+        width: 100% !important;
+        min-width: unset !important;
+    }
+}
+
+/* Button responsive sizing */
+.send-button {
+    min-width: 80px;
+    white-space: nowrap;
+}
+
+@media (max-width: 480px) {
+    .send-button {
+        min-width: unset;
+        padding: 8px 16px;
+    }
+}
+
+/* Settings panel responsive behavior */
+.settings-panel {
+    min-width: 200px;
+}
+
+@media (max-width: 1024px) {
+    .settings-panel {
+        min-width: 180px;
+    }
 }
 
-#component-0 {
-    max-height: 600px;
+@media (max-width: 768px) {
+    .settings-panel {
+        min-width: 160px;
+    }
 }
 
+/* Info boxes responsive */
+.info-box {
+    margin-top: 20px;
+    padding: 15px;
+    border-radius: 10px;
+    font-size: 14px;
+}
+
+@media (max-width: 768px) {
+    .info-box {
+        margin-top: 15px;
+        padding: 12px;
+        font-size: 13px;
+    }
+}
+
+@media (max-width: 480px) {
+    .info-box {
+        margin-top: 10px;
+        padding: 10px;
+        font-size: 12px;
+    }
+}
+
+/* Header responsive */
+.header {
+    text-align: center;
+    padding: 20px;
+}
+
+@media (max-width: 768px) {
+    .header {
+        padding: 15px 10px;
+    }
+    
+    .header h1 {
+        font-size: 24px;
+    }
+    
+    .header p {
+        font-size: 16px;
+    }
+}
+
+@media (max-width: 480px) {
+    .header {
+        padding: 10px 5px;
+    }
+    
+    .header h1 {
+        font-size: 20px;
+    }
+    
+    .header p {
+        font-size: 14px;
+    }
+}
+
+/* Footer responsive */
 .footer {
     text-align: center;
     margin-top: 20px;
-    padding: 10px;
+    padding: 15px;
     font-size: 14px;
     color: #666;
 }
+
+@media (max-width: 768px) {
+    .footer {
+        font-size: 12px;
+        padding: 10px;
+    }
+}
 """
 
 # Create Gradio interface
@@ -95,42 +251,52 @@ with gr.Blocks(css=css, title="🤖 Codestral AI Chat", theme=gr.themes.Soft())
     
     # Header
     gr.HTML("""
-        <div style="text-align: center; padding: 20px;">
+        <div class="header">
             <h1>🤖 Codestral AI Chat with LangChain</h1>
-            <p style="font-size: 18px; color: #666;">
+            <p style="color: #666;">
                 Powered by <strong>Codestral AI</strong> from Mistral AI | Built with <strong>LangChain</strong> & <strong>Gradio</strong>
             </p>
         </div>
     """)
     
+    # Main layout - responsive row
     with gr.Row():
         # Main chat area
-        with gr.Column(scale=4):
+        with gr.Column(scale=3, min_width=300):
             chatbot = gr.Chatbot(
                 label="💬 Chat with Codestral AI",
                 height=500,
                 show_label=True,
                 container=True,
-                bubble_full_width=False
+                bubble_full_width=False,
+                elem_classes=["chatbot-container"]
             )
             
-            with gr.Row():
+            # Input row with responsive design
+            with gr.Row(elem_classes=["input-row"]):
                 msg = gr.Textbox(
                     label="Your Message",
                     placeholder="Type your question here...",
                     lines=2,
-                    max_lines=5,
+                    max_lines=4,
                     scale=4,
-                    container=True
+                    container=True,
+                    elem_classes=["textbox"]
+                )
+                send_btn = gr.Button(
+                    "Send 🚀", 
+                    variant="primary", 
+                    scale=1,
+                    elem_classes=["button", "send-button"]
                 )
-                send_btn = gr.Button("Send 🚀", variant="primary", scale=1)
             
+            # Clear button row
             with gr.Row():
                 clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary")
                 
-        # Settings sidebar
-        with gr.Column(scale=1, min_width=250):
-            gr.HTML("<h3>⚙️ Model Settings</h3>")
+        # Settings sidebar - responsive
+        with gr.Column(scale=1, min_width=200, elem_classes=["settings-panel"]):
+            gr.HTML("<h3 style='margin-bottom: 15px;'>⚙️ Model Settings</h3>")
             
             temperature = gr.Slider(
                 minimum=0.0,
@@ -150,10 +316,11 @@ with gr.Blocks(css=css, title="🤖 Codestral AI Chat", theme=gr.themes.Soft())
                 info="Maximum response length"
             )
             
+            # Tips box
             gr.HTML("""
-                <div style="margin-top: 30px; padding: 15px; background-color: #f8f9fa; border-radius: 10px;">
-                    <h4>💡 Tips:</h4>
-                    <ul style="font-size: 14px; margin: 10px 0;">
+                <div class="info-box" style="background-color: #f8f9fa;">
+                    <h4 style="margin-top: 0;">💡 Tips:</h4>
+                    <ul style="margin: 10px 0; padding-left: 20px;">
                         <li>Ask coding questions</li>
                         <li>Request explanations</li>
                         <li>Get creative writing help</li>
@@ -162,10 +329,11 @@ with gr.Blocks(css=css, title="🤖 Codestral AI Chat", theme=gr.themes.Soft())
                 </div>
             """)
             
+            # Features box
             gr.HTML("""
-                <div style="margin-top: 20px; padding: 15px; background-color: #e8f5e8; border-radius: 10px;">
-                    <h4>🔧 Features:</h4>
-                    <ul style="font-size: 14px; margin: 10px 0;">
+                <div class="info-box" style="background-color: #e8f5e8;">
+                    <h4 style="margin-top: 0;">🔧 Features:</h4>
+                    <ul style="margin: 10px 0; padding-left: 20px;">
                         <li>✅ Codestral AI Model</li>
                         <li>✅ LangChain Integration</li>
                         <li>✅ Real-time Responses</li>