Update app.py

app.py

@@ -156,6 +156,7 @@ custom_css = """
 /* Main container and background */
 .gradio-container {
     background-color: rgb(240, 236, 230) !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
 /* Centered chat interface */
@@ -181,73 +182,128 @@ custom_css = """
 .gradio-chatbot {
     flex: 1;
     overflow-y: auto;
+    border: none !important;
+    background-color: transparent !important;
 }
 
-/* General message bubble styling */
-.gradio-chatbot .message {
-    border-radius: 18px !important;
-    padding: 12px !important;
-    color: black !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+/* Message container styling */
+.gradio-chatbot .message-wrap {
+    margin: 0.5rem 0 !important;
 }
 
-/* Model's chat bubble color */
-.gradio-chatbot .message.bot {
+/* Bot message styling */
+.gradio-chatbot .message.bot .markdown {
     background-color: rgb(240, 185, 103) !important;
+    color: black !important;
+    border-radius: 18px !important;
+    padding: 12px 16px !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+    border: none !important;
+    max-width: 80%;
+    margin-left: 0;
+    margin-right: auto;
 }
 
-/* User's chat bubble color */
-.gradio-chatbot .message.user {
+/* User message styling */
+.gradio-chatbot .message.user .markdown {
     background-color: rgb(242, 238, 233) !important;
+    color: black !important;
+    border-radius: 18px !important;
+    padding: 12px 16px !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+    border: none !important;
+    max-width: 80%;
+    margin-left: auto;
+    margin-right: 0;
 }
 
-/* Hide the default Gradio avatars */
+/* Hide avatars */
 .gradio-chatbot .avatar-container {
     display: none !important;
 }
 
 /* Input textbox styling */
-.custom-textarea textarea {
+.input-container .wrap {
     background-color: rgb(242, 238, 233) !important;
     border: 2px solid rgb(28, 18, 5) !important;
     border-radius: 20px !important;
+    box-shadow: none !important;
+}
+
+.input-container textarea {
+    background-color: transparent !important;
+    border: none !important;
     color: black !important;
     padding: 15px !important;
     font-size: 16px !important;
     box-shadow: none !important;
+    outline: none !important;
 }
 
-/* Remove the label from the textbox */
-.custom-textarea label {
+.input-container textarea:focus {
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+/* Hide the label */
+.input-container label {
     display: none !important;
 }
+
+/* Remove any default margins/padding */
+.input-container {
+    margin-top: 1rem;
+}
+
+/* Clear button styling */
+.clear-btn {
+    background-color: rgb(28, 18, 5) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 8px 16px !important;
+    margin-top: 0.5rem;
+    cursor: pointer;
+}
+
+.clear-btn:hover {
+    background-color: rgba(28, 18, 5, 0.8) !important;
+}
 """
 
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks(css=custom_css, title="EduBot") as demo:
     with gr.Column(elem_classes=["chat-container"]):
         # Model Name in the top-left corner
         gr.HTML('<div class="model-name">🎓 EduBot</div>')
         
         # The main chatbot interface
         chatbot = gr.Chatbot(
-            elem_classes=["gradio-chatbot"],
-            show_copy_button=True,
-            avatar_images=[None, None], # Avatars are hidden by CSS but this is good practice
-            placeholder="Hi! I'm EduBot. What would you like to learn today? 📚"
+            type="messages",
+            height=500,
+            show_copy_button=False,
+            show_share_button=False,
+            avatar_images=None
         )
         
         # The user input textbox
-        msg = gr.Textbox(
-            placeholder="Ask me about math, research, study strategies, or any educational topic...",
-            show_label=False,
-            lines=2,
-            elem_classes=["custom-textarea"]
-        )
+        with gr.Row():
+            msg = gr.Textbox(
+                placeholder="Ask me about math, research, study strategies, or any educational topic...",
+                show_label=False,
+                lines=2,
+                elem_classes=["input-container"],
+                scale=4
+            )
+            clear = gr.Button("Clear", elem_classes=["clear-btn"], scale=1)
 
     def respond_and_update(message, history):
         """Main function to handle user submission."""
+        if not message.strip():
+            return history, ""
+        
         # Add user message to history
-        history.append([message, None])
+        history.append({"role": "user", "content": message})
         # Yield history to show the user message immediately, and clear the textbox
         yield history, "" 
 
@@ -255,11 +311,22 @@ with gr.Blocks(css=custom_css) as demo:
         full_response = ""
         for response_chunk in respond_with_enhanced_streaming(message, history):
             full_response = response_chunk
-            history[-1][1] = full_response
+            # Update the last message (bot's response)
+            if len(history) > 0 and history[-1]["role"] == "user":
+                history.append({"role": "assistant", "content": full_response})
+            else:
+                history[-1] = {"role": "assistant", "content": full_response}
             yield history, ""
 
+    def clear_chat():
+        """Clear the chat history."""
+        return [], ""
+
     # Set up the "send on Enter" event
     msg.submit(respond_and_update, [msg, chatbot], [chatbot, msg])
+    
+    # Set up the clear button
+    clear.click(clear_chat, outputs=[chatbot, msg])
 
 if __name__ == "__main__":
     logger.info("Starting EduBot...")