Update app.py

app.py

@@ -175,7 +175,7 @@ theme = gr.themes.Glass(
     button_border_width='*block_border_width'
 )
 
-# Responsive interface with flexible height
+# Responsive interface with flexible height and custom styling
 with gr.Blocks(theme=theme, css="""
     .main-container {
         max-width: 900px;
@@ -206,9 +206,63 @@ with gr.Blocks(theme=theme, css="""
         min-height: 400px;
         max-height: calc(100vh - 200px);
     }
+    
+    /* Hide the chat icon */
+    .chat-bot .message-wrap .avatar-container {
+        display: none !important;
+    }
+    .gradio-chatbot .message-wrap .avatar-container {
+        display: none !important;
+    }
+    .gradio-chatbot .message.bot .avatar-container,
+    .gradio-chatbot .message.user .avatar-container {
+        display: none !important;
+    }
+    
+    /* Style the input area */
     .input-row {
         flex-shrink: 0;
         margin-top: 0.5rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        max-width: 700px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    
+    /* Custom textbox styling */
+    .custom-textbox input {
+        border-radius: 25px !important;
+        border: 2px solid #64748b !important;
+        padding: 15px 20px !important;
+        font-size: 16px !important;
+        background: white !important;
+        outline: none !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    .custom-textbox input:focus {
+        border-color: #475569 !important;
+        box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.1) !important;
+    }
+    
+    /* Remove textbox label */
+    .custom-textbox label {
+        display: none !important;
+    }
+    
+    /* Center the send button */
+    .send-button {
+        border-radius: 50% !important;
+        width: 50px !important;
+        height: 50px !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        flex-shrink: 0 !important;
     }
     
     /* Mobile responsiveness */
@@ -226,6 +280,12 @@ with gr.Blocks(theme=theme, css="""
         }
         .input-row {
             margin-top: 0.25rem;
+            max-width: 100%;
+            padding: 0 0.5rem;
+        }
+        .custom-textbox input {
+            padding: 12px 15px !important;
+            font-size: 14px !important;
         }
     }
     
@@ -268,21 +328,22 @@ with gr.Blocks(theme=theme, css="""
         with gr.Column(elem_classes=["chat-container"]):
             chatbot = gr.Chatbot(
                 show_copy_button=True,
-                avatar_images=["👤", "🎓"],
+                avatar_images=[None, None],  # Remove avatars
                 placeholder="Hi! I'm EduBot. What would you like to learn today? 📚",
                 container=True,
                 elem_classes=["gradio-chatbot"]
             )
         
-        # Textbox and send button
+        # Centered textbox and send button
         with gr.Row(elem_classes=["input-row"]):
             msg = gr.Textbox(
                 placeholder="Ask me about math, research, study strategies, or any educational topic...",
                 container=False,
                 show_label=False,
-                scale=8
+                scale=8,
+                elem_classes=["custom-textbox"]
             )
-            send_btn = gr.Button("📤 Send", variant="primary", scale=1)
+            send_btn = gr.Button("📤", variant="primary", scale=1, elem_classes=["send-button"])
     
     # Enhanced response function
     def respond_and_update(message, history):
@@ -304,5 +365,5 @@ with gr.Blocks(theme=theme, css="""
     )
 
 if __name__ == "__main__":
-    logger.info("Starting EduBot with responsive interface...")
+    logger.info("Starting EduBot with custom styling...")
     demo.launch()