Update app.py

app.py

@@ -23,17 +23,69 @@ def respond(message, history: list[dict[str, str]]):
             response += msg.choices[0].delta.content
         yield response
 
-
-# Purple + White/Grey Theme CSS
+# Custom bubble-style CSS
 custom_css = """
 .gradio-container {
-    background: linear-gradient(to bottom right, #7E498B, #f5f5f5);
+    background: #f5f5f5;
     font-family: 'Segoe UI', sans-serif;
 }
+
+.chatbot {
+    height: 600px !important;
+    overflow-y: auto !important;
+    background: white;
+    border-radius: 12px;
+    padding: 15px;
+    box-shadow: 0px 4px 20px rgba(0,0,0,0.05);
+}
+
+/* User bubble */
+.user-message {
+    background-color: #7E498B;
+    color: white;
+    padding: 10px 14px;
+    border-radius: 18px 18px 0 18px;
+    margin: 8px 0;
+    display: inline-block;
+    max-width: 80%;
+    float: right;
+    clear: both;
+}
+
+/* Bot bubble */
+.bot-message {
+    background-color: #eeeeee;
+    color: black;
+    padding: 10px 14px;
+    border-radius: 18px 18px 18px 0;
+    margin: 8px 0;
+    display: inline-block;
+    max-width: 80%;
+    float: left;
+    clear: both;
+}
 """
 
-with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
-    gr.ChatInterface(respond, type="messages")   
+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")
+
+    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
+    )
+    clear.click(lambda: None, None, chatbot)
 
 if __name__ == "__main__":
-    demo.launch(share=True)
+    demo.launch(share=True)