Update app.py

app.py

@@ -488,176 +488,149 @@ def rag_memory_stream(message, history):
     # After generating the complete response, add it to history
     user_session.add_to_history("assistant", full_response)
 
-custom_css = """
-body, html {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    font-family: "Arial", serif;
-}
-
-.gradio-container {
-    font-family: "Times New Roman", serif;
-    width: 100vw;
-    height: 100vh;
-    max-width: 100% !important;
-    max-height: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    display: flex;
-    flex-direction: column;
-}
-
-.main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    max-width: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-.gr-button {
-    background-color: #007bff; /* Blue button */
-    color: white;
-    border: none;
-    border-radius: 5px;
-    font-size: 16px;
-    padding: 10px 20px;
-    cursor: pointer;
-}
-
-.gr-textbox:focus, .gr-button:focus {
-    outline: none; /* Remove outline focus for a cleaner look */
-}
-
-/* Custom CSS for the examples section */
-.gr-examples {
-    font-size: 30px; /* Increase font size of examples */
-    background-color: #f9f9f9; /* Light background color */
-    border-radius: 30px; /* Rounded corners */
-}
-
-.gr-examples .example {
-    background-color: white; /* White background for each example */
-    cursor: pointer; /* Change cursor to pointer on hover */
-    transition: background-color 0.3s ease; /* Smooth hover effect */
-}
-
-.gr-examples .example:hover {
-    background-color: #f1f1f1; /* Light gray background on hover */
-}
-
-/* Make chat interface fill available space */
-.chat-interface {
-    height: 100% !important;
-    display: flex;
-    flex-direction: column;
-}
-
-.chat-panel {
-    flex: 1;
-    overflow-y: auto;
-    min-height: 70vh;
-}
-
-.registration-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    width: 100%;
-}
-
-footer {
-    margin-top: auto;
-    text-align: center;
-    padding: 10px;
-}
-
-/* Make chatbot container fill the screen */
-.chatbot-container {
-    height: 100vh;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-/* Center form elements */
-.form-row {
-    display: flex;
-    justify-content: center;
-    margin: 10px 0;
-}
-"""
 
 # Gradio Interface Setup with improved UX
 def chatbot_interface():
     # Get API key (in a real application, handle this more securely)
     api_key = api  # This should be properly defined or imported elsewhere
-    
+
     # Update the template to include conversation history
     global template
     template = """
     You are a compassionate and supportive AI assistant specializing in helping individuals affected by Gender-Based Violence (GBV).
-    
+
     Previous conversation:
     {conversation_history}
-    
+
     Context information:
     {context}
-    
+
     User {first_name} asks: {question}
-    
+
     Respond with empathy and provide support and resources based on the conversation and context. Always maintain a warm, supportive tone.
     """
 
     # Create the RAG chain with user context
     global rag_chain
     rag_chain = create_rag_chain(retriever, template, api_key)
-    
-    with gr.Blocks(css=custom_css, theme="soft") as demo:
+
+    with gr.Blocks(css="""
+        :root {
+            --background: #343541;
+            --primary-text: #ececf1;
+            --input-bg: #40414f;
+            --border: #555766;
+            --button-bg: #19c37d;
+            --button-hover: #15a46a;
+            --user-bubble: #343541;
+            --bot-bubble: #444654;
+        }
+
+        body {
+            background: var(--background) !important;
+            font-family: 'Segoe UI', system-ui, sans-serif !important;
+            color: var(--primary-text) !important;
+        }
+
+        .welcome-container {
+            max-width: 500px;
+            margin: 2rem auto;
+            padding: 2rem;
+            background: var(--input-bg);
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+
+        .chatbot {
+            border: none !important;
+            background: transparent !important;
+            box-shadow: none !important;
+            min-height: 70vh;
+        }
+
+        .user, .bot {
+            padding: 12px 16px !important;
+            margin: 8px 0 !important;
+            border-radius: 8px !important;
+            max-width: 80%;
+        }
+
+        .user {
+            background: var(--user-bubble) !important;
+            margin-left: auto !important;
+            border: 1px solid var(--border);
+        }
+
+        .bot {
+            background: var(--bot-bubble) !important;
+            margin-right: auto !important;
+        }
+
+        .textbox {
+            background: var(--input-bg) !important;
+            border: 1px solid var(--border) !important;
+            border-radius: 8px !important;
+            color: var(--primary-text) !important;
+            padding: 12px !important;
+        }
+
+        .feedback-btn {
+            background: var(--button-bg) !important;
+            color: white !important;
+            border: none !important;
+            border-radius: 6px !important;
+            padding: 8px 16px !important;
+            transition: background 0.3s ease;
+        }
+
+        .feedback-btn:hover {
+            background: var(--button-hover) !important;
+        }
+
+        footer {
+            color: #888 !important;
+            font-size: 0.9em;
+            padding: 1rem;
+        }
+
+        #component-0 {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+    """) as demo:
+
         # User registration section
-        registration_container = gr.Column(visible=True, elem_classes=["registration-container"])
+        registration_container = gr.Column(visible=True)
         with registration_container:
-            gr.Markdown(
-                """
-                <div style='font-size: 32px; text-align: center;'>
-                    Your privacy is our concern, please provide your nickname.
-                </div>
-                """,
-                elem_id="welcome-title"
-            )
+            gr.Markdown("### To prioritize your privacy, please provide your nickname. ")
 
-            with gr.Row(elem_classes=["form-row"]):
+            with gr.Row():
                 first_name = gr.Textbox(
                     label="Nickname",
-                    placeholder="Enter your Nickname"
+                    placeholder="Enter your Nickname",
+                    scale=1
                 )
-               
-            with gr.Row(elem_classes=["form-row"]):
-                submit_btn = gr.Button("Start Chatting", variant="primary")
-                
+
+            with gr.Row():
+                submit_btn = gr.Button("Start Chatting", variant="primary", scale=2)
+
             response_message = gr.Markdown(elem_id="welcome-message")
-            
+
         # Chatbot section (initially hidden)
-        chatbot_container = gr.Column(visible=False, elem_classes=["chatbot-container"])
+        chatbot_container = gr.Column(visible=False)
         with chatbot_container:
             chat_interface = gr.ChatInterface(
                 fn=rag_memory_stream,
-                title="Chat with GBVR",
+                title=gr.Markdown("# Ijwi ry'Ubufasha", elem_classes="chat-title"),
                 fill_height=True,
-                elem_classes=["chat-interface"]
+                textbox=gr.Textbox(placeholder="Type your message here...", show_label=False),
+                submit_btn=gr.Button("Send", variant="primary")
             )
-            
+
             # Footer with version info
-            gr.Markdown("Ijwi ry'Ubufasha v1.0.0 © 2025", elem_id="footer", elem_classes=["footer"])
-            
+            gr.Markdown("Ijwi ry'Ubufasha v1.0.0 © 2025", elem_id="footer")
+
         # Handle user registration
         submit_btn.click(
             collect_user_info,
@@ -669,6 +642,6 @@ def chatbot_interface():
 
 # Launch the interface
 if __name__ == "__main__":
-    # Launch the interface
-    chatbot_interface().launch(share=True, inbrowser=True, debug=True)
-    
+
+    chatbot_interface().launch(share=True, inbrowser=True)
+