Update app.py

app.py

@@ -51,15 +51,13 @@ def chatbot(user_input, history=[]):
 
 # Function to display saved chats
 def display_saved_chats():
-    def format_chats(category):
-        return "\n".join([f"**You**: {u}\n**Bot**: {b}" for u, b in saved_chats[category]]) or "No messages yet."
-    
-    return (
-        format_chats("Stress Management"),
-        format_chats("Career Advice"),
-        format_chats("General"),
-        format_chats("Suggestions")
-    )
+    display = ""
+    for category, chats in saved_chats.items():
+        display += f"<div class='chat-category'><h3>{category}</h3>"
+        for user_message, bot_response in chats:
+            display += f"<p><strong>You:</strong> {user_message}<br><strong>Bot:</strong> {bot_response}</p>"
+        display += "</div>"
+    return display.strip()
 
 # Gradio Interface setup
 chat_interface = gr.Blocks(css="""
@@ -88,37 +86,83 @@ header, footer {
     margin-bottom: 1rem;
     box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
 }
+
+.chatbot-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border-radius: 15px;
+    background: rgba(255, 255, 255, 0.8);
+    padding: 1rem;
+    height: 400px;
+    overflow-y: auto;
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+input, button {
+    border: none;
+    padding: 0.8rem;
+    border-radius: 10px;
+    margin: 0.5rem 0;
+    outline: none;
+}
+
+input {
+    background: #fff;
+    color: #333;
+    font-size: 1rem;
+}
+
+button {
+    background: linear-gradient(90deg, #6a11cb, #2575fc);
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    transition: transform 0.2s, background 0.2s;
+}
+
+button:hover {
+    transform: scale(1.05);
+    background: linear-gradient(90deg, #2575fc, #6a11cb);
+}
+
+.chat-category {
+    background: rgba(0, 0, 0, 0.05);
+    border: 2px solid #ff7eb3;
+    margin: 1rem 0;
+    padding: 1rem;
+    border-radius: 10px;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.chat-category:hover {
+    transform: translateY(-3px);
+    box-shadow: 0px 4px 15px rgba(255, 127, 179, 0.5);
+}
 """)
 
 with chat_interface:
     with gr.Row():
         gr.Markdown("<h1 style='text-align:center;'>🌈 Vibrant Motivational Chatbot</h1>")
+    with gr.Row():
+        gr.Markdown("*Feeling stressed or unmotivated? Share your thoughts and let me help!*")
+    with gr.Row():
+        chatbot_output = gr.Chatbot(label="Motivator Bot")
     with gr.Row():
         user_input = gr.Textbox(label="Your Message", placeholder="Type something...")
         send_button = gr.Button("Send")
     with gr.Row():
-        chatbot_output = gr.Chatbot(label="Chat History")
-
-    with gr.Row():
-        with gr.Column():
-            stress_display = gr.Textbox(label="Stress Management", interactive=False, lines=10)
-        with gr.Column():
-            career_display = gr.Textbox(label="Career Advice", interactive=False, lines=10)
-        with gr.Column():
-            general_display = gr.Textbox(label="General", interactive=False, lines=10)
-        with gr.Column():
-            suggestions_display = gr.Textbox(label="Suggestions", interactive=False, lines=10)
+        saved_chats_display = gr.HTML(label="Saved Chats", value=display_saved_chats())
+        refresh_button = gr.Button("Refresh Saved Chats")
     
     def handle_interaction(user_input, history):
         if not user_input.strip():
-            return history, *display_saved_chats()
+            return history, display_saved_chats()
         updated_history, _ = chatbot(user_input, history)
-        return updated_history, *display_saved_chats()
-
-    send_button.click(
-        fn=handle_interaction,
-        inputs=[user_input, chatbot_output],
-        outputs=[chatbot_output, stress_display, career_display, general_display, suggestions_display]
-    )
+        return updated_history, display_saved_chats()
+    
+    send_button.click(handle_interaction, inputs=[user_input, chatbot_output], outputs=[chatbot_output, saved_chats_display])
+    refresh_button.click(display_saved_chats, inputs=[], outputs=saved_chats_display)
 
-chat_interface.launch()
+if _name_ == "_main_":
+    chat_interface.launch()