Update app.py

app.py

@@ -23,130 +23,76 @@ def respond(message, history: list[dict[str, str]]):
             response += msg.choices[0].delta.content
         yield response
 
-# 💜 Modern Chatbot CSS
+
+# 💜 Improved Purple + White/Grey Theme CSS
 custom_css = """
 .gradio-container {
+    background: linear-gradient(to bottom right, #7E498B, #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: 70vh !important;
-    overflow-y: auto !important;
-    background: white;
-    padding: 20px;
-    border-radius: 0 0 12px 12px;
-    box-shadow: 0px 4px 20px rgba(0,0,0,0.05);
+/* Chat box styling */
+.svelte-1ipelgc, .svelte-1f354aw {
+    border-radius: 16px !important;
+    background: white !important;
+    padding: 12px !important;
+    box-shadow: 0px 4px 20px rgba(0,0,0,0.08) !important;
 }
 
-/* Bubbles */
-.user-message {
-    background: linear-gradient(135deg, #7E498B, #9b59b6);
-    color: white;
-    padding: 12px 16px;
-    border-radius: 18px 18px 0 18px;
-    margin: 8px 0;
-    display: inline-block;
-    max-width: 75%;
-    float: right;
-    clear: both;
-    font-size: 15px;
+/* User bubble */
+.user.svelte-1ipelgc {
+    background: linear-gradient(135deg, #7E498B, #9b59b6) !important;
+    color: white !important;
+    border-radius: 18px 18px 0 18px !important;
+    padding: 10px 14px !important;
+    max-width: 80% !important;
     animation: fadeIn 0.3s ease-in;
 }
 
-.bot-message {
-    background: #f1f1f1;
-    color: #333;
-    padding: 12px 16px;
-    border-radius: 18px 18px 18px 0;
-    margin: 8px 0;
-    display: inline-block;
-    max-width: 75%;
-    float: left;
-    clear: both;
-    font-size: 15px;
-    box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
+/* Bot bubble */
+.bot.svelte-1ipelgc {
+    background: #f1f1f1 !important;
+    color: #333 !important;
+    border-radius: 18px 18px 18px 0 !important;
+    padding: 10px 14px !important;
+    max-width: 80% !important;
+    box-shadow: 0px 2px 6px rgba(0,0,0,0.05) !important;
     animation: fadeIn 0.3s ease-in;
 }
 
-/* Input area */
-.input-area {
-    display: flex;
-    gap: 10px;
-    margin-top: 12px;
-}
-
-.input-area textarea {
-    flex: 1;
+/* Input box */
+textarea {
     border-radius: 25px !important;
-    padding: 12px 18px !important;
-    font-size: 15px !important;
+    padding: 12px 16px !important;
     border: 1px solid #ddd !important;
-    resize: none !important;
     outline: none !important;
+    font-size: 15px !important;
+    resize: none !important;
 }
 
-.input-area button {
+/* Send button */
+button {
+    border-radius: 25px !important;
     background: linear-gradient(135deg, #7E498B, #9b59b6) !important;
     color: white !important;
-    border-radius: 50% !important;
-    width: 50px;
-    height: 50px;
-    font-size: 18px;
-    font-weight: bold;
+    font-weight: bold !important;
     transition: 0.3s;
 }
 
-.input-area button:hover {
+button:hover {
     background: #632f73 !important;
 }
 
-/* Animations */
+/* Animation */
 @keyframes fadeIn {
     from {opacity: 0; transform: translateY(10px);}
     to {opacity: 1; transform: translateY(0);}
 }
 """
 
-with gr.Blocks(css=custom_css) as demo:
-    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)]
-
-    def bot_response(chat_history):
-        user_message = chat_history[-1][0]
-        response = ""
-        for partial in respond(user_message, [{"role": "user", "content": h[0]} for h in chat_history[:-1]]):
-            response = partial
-        chat_history[-1] = (chat_history[-1][0], response)
-        return chat_history
-
-    msg.submit(user_submit, [msg, chatbot], [msg, chatbot]).then(
-        bot_response, chatbot, chatbot
-    )
-    send_btn.click(user_submit, [msg, chatbot], [msg, chatbot]).then(
-        bot_response, chatbot, chatbot
-    )
+with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
+    gr.ChatInterface(respond, type="messages")   
 
 if __name__ == "__main__":
     demo.launch(share=True)