Update app.py

app.py

@@ -23,53 +23,112 @@ def respond(message, history: list[dict[str, str]]):
             response += msg.choices[0].delta.content
         yield response
 
-# Custom bubble-style CSS
+# 💜 Modern Chatbot CSS
 custom_css = """
 .gradio-container {
-    background: #f5f5f5;
     font-family: 'Segoe UI', sans-serif;
+    background: #f3f3f9;
+    height: 100vh;
 }
 
+/* Top Header */
+.top-bar {
+    background: linear-gradient(90deg, #7E498B, #9b59b6);
+    color: white;
+    font-size: 20px;
+    font-weight: 600;
+    padding: 14px 20px;
+    border-radius: 12px 12px 0 0;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+}
+
+/* Chat window */
 .chatbot {
-    height: 600px !important;
+    height: 70vh !important;
     overflow-y: auto !important;
     background: white;
-    border-radius: 12px;
-    padding: 15px;
+    padding: 20px;
+    border-radius: 0 0 12px 12px;
     box-shadow: 0px 4px 20px rgba(0,0,0,0.05);
 }
 
-/* User bubble */
+/* Bubbles */
 .user-message {
-    background-color: #7E498B;
+    background: linear-gradient(135deg, #7E498B, #9b59b6);
     color: white;
-    padding: 10px 14px;
+    padding: 12px 16px;
     border-radius: 18px 18px 0 18px;
     margin: 8px 0;
     display: inline-block;
-    max-width: 80%;
+    max-width: 75%;
     float: right;
     clear: both;
+    font-size: 15px;
+    animation: fadeIn 0.3s ease-in;
 }
 
-/* Bot bubble */
 .bot-message {
-    background-color: #eeeeee;
-    color: black;
-    padding: 10px 14px;
+    background: #f1f1f1;
+    color: #333;
+    padding: 12px 16px;
     border-radius: 18px 18px 18px 0;
     margin: 8px 0;
     display: inline-block;
-    max-width: 80%;
+    max-width: 75%;
     float: left;
     clear: both;
+    font-size: 15px;
+    box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
+    animation: fadeIn 0.3s ease-in;
+}
+
+/* Input area */
+.input-area {
+    display: flex;
+    gap: 10px;
+    margin-top: 12px;
+}
+
+.input-area textarea {
+    flex: 1;
+    border-radius: 25px !important;
+    padding: 12px 18px !important;
+    font-size: 15px !important;
+    border: 1px solid #ddd !important;
+    resize: none !important;
+    outline: none !important;
+}
+
+.input-area button {
+    background: linear-gradient(135deg, #7E498B, #9b59b6) !important;
+    color: white !important;
+    border-radius: 50% !important;
+    width: 50px;
+    height: 50px;
+    font-size: 18px;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.input-area button:hover {
+    background: #632f73 !important;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {opacity: 0; transform: translateY(10px);}
+    to {opacity: 1; transform: translateY(0);}
 }
 """
 
 with gr.Blocks(css=custom_css) as demo:
-    chatbot = gr.Chatbot(elem_classes="chatbot", bubble_full_width=False, show_copy_button=True)
-    msg = gr.Textbox(placeholder="Type your message...")
-    clear = gr.Button("Clear Chat")
+    with gr.Column():
+        gr.HTML("<div class='top-bar'>💬 Virtual Chatbot</div>")
+        chatbot = gr.Chatbot(elem_classes="chatbot", bubble_full_width=False, show_copy_button=False)
+        with gr.Row(elem_classes="input-area"):
+            msg = gr.Textbox(placeholder="Type your message...", lines=1)
+            send_btn = gr.Button("➤")
 
     def user_submit(user_message, chat_history):
         return "", chat_history + [(user_message, None)]
@@ -85,7 +144,9 @@ with gr.Blocks(css=custom_css) as demo:
     msg.submit(user_submit, [msg, chatbot], [msg, chatbot]).then(
         bot_response, chatbot, chatbot
     )
-    clear.click(lambda: None, None, chatbot)
+    send_btn.click(user_submit, [msg, chatbot], [msg, chatbot]).then(
+        bot_response, chatbot, chatbot
+    )
 
 if __name__ == "__main__":
     demo.launch(share=True)