Update app.py

app.py

@@ -487,143 +487,77 @@ def rag_memory_stream(message, history):
     user_session.add_to_history("assistant", full_response)
 
 
-
+import gradio as gr
 
 # 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).
+    You are a compassionate and supportive AI assistant specializing in helping individuals affected by Gender-Based Violence (GBV) with emotional awareness.
 
-    Previous conversation:
-    {conversation_history}
+      **Previous conversation:**
+      {conversation_history}
 
-    Context information:
-    {context}
+      **Context information:**
+      {context}
 
-    User {first_name} asks: {question}
+      **User's Question:** {question}
 
-    Respond with empathy, providing support and resources based on the conversation. Keep answers short unless the user asks for more details, while maintaining a warm, supportive tone.
-    """
+      Respond to {first_name} with these guidelines:
 
-    # Create the RAG chain with user context
-    global rag_chain
-    rag_chain = create_rag_chain(retriever, template, api_key)
+      1. **Emotional Awareness**
+        - Acknowledge emotions with empathy (e.g., "I understand how you feel")
+        - Offer comfort for negative emotions
 
+      2. **Communication Approach**
+        - Occasionaly use a warm welcome or check-in (e.g., "Hello {first_name}! How are you feeling today?")
+        - Use occasional appropriate emojis (😊, 🤗, ❤️)
+        - Keep responses concise unless details are requested
+        - Maintain warm but professional tone
 
+      3. **Information Handling**
+        - Extract relevant details from context
+        - Provide links when specifically requested
+        - If information isn't available, respond with: "I don't have that information at the moment, {first_name}. 😊"
+        - Never generate unsupported content or speculate
 
-    with gr.Blocks(css="""
-        :root {
-          --background: #000000;
-          --text: #FFFFFF;
-        }
-
-        body {
-            background: var(--background) !important;
-            color: var(--text) !important;
-            font-family: 'Inter', system-ui, sans-serif;
-            margin: 0 !important;
-            padding: 0 !important;
-            width: 100vw !important;
-            height: 100vh !important;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .gradio-container {
-            max-width: 100% !important;
-            width: 100vw !important;
-            height: 100vh !important;
-            margin: 0 !important;
-            padding: 20px !important;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .welcome-box, .chat-container, .gr-textbox, .bot {
-            background: var(--background) !important;
-            color: var(--text) !important;
-            border-radius: 12px !important;
-            padding: 2rem !important;
-            border: 1px solid rgba(255, 255, 255, 0.1) !important;
-            box-shadow: 0 4px 6px rgba(255, 255, 255, 0.05) !important;
-        }
-
-        .gr-button-primary {
-            background: var(--background) !important;
-            color: var(--text) !important;
-            padding: 12px 24px !important;
-            border-radius: 8px !important;
-            transition: all 0.3s ease !important;
-            border: 1px solid rgba(255, 255, 255, 0.1) !important;
-        }
-
-        .gr-button-primary:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
-        }
-
-        footer {
-            text-align: center !important;
-            color: var(--text) !important;
-            opacity: 0.7 !important;
-            padding: 1rem !important;
-            font-size: 0.9em !important;
-        }
-
-        .gr-markdown h3 {
-            color: var(--text) !important;
-            margin-bottom: 1rem !important;
-        }
-        
+      Your response should be supportive, accurate, and centered on the user's immediate needs.
+    """
 
-        
-    """) as demo:
+    # Create the RAG chain with user context
+    rag_chain = create_rag_chain(retriever, template, api_key)
+
+    with gr.Blocks() as demo:
         # User registration section
-        registration_container = gr.Column(visible=True)
-        with registration_container:
-            gr.Markdown("### Your privacy is our concern, please provide your nickname. ")
-        # with registration_container:
-        #     gr.Markdown(
-        #         "### Your privacy is our concern, please provide your nickname.",
-        #         elem_id="registration-markdown"
-        #     )
+        with gr.Column(visible=True, elem_id="registration_container") as registration_container:
+            gr.Markdown("### Your privacy is our concern, please provide your nickname.")
 
             with gr.Row():
                 first_name = gr.Textbox(
                     label="Nickname",
                     placeholder="Enter your Nickname",
-                    scale=1
+                    scale=1,
+                    elem_id="input_nickname"
                 )
 
             with gr.Row():
                 submit_btn = gr.Button("Start Chatting", variant="primary", scale=2)
 
-            response_message = gr.Markdown(elem_id="welcome-message")
+            response_message = gr.Markdown()
 
         # Chatbot section (initially hidden)
-        chatbot_container = gr.Column(visible=False)
-        with chatbot_container:
+        with gr.Column(visible=False, elem_id="chatbot_container") as chatbot_container:
             chat_interface = gr.ChatInterface(
                 fn=rag_memory_stream,
                 title="Chat with GBVR",
                 fill_height=True
             )
-        # with chatbot_container:
-        #     chat_interface = gr.ChatInterface(
-        #         fn=rag_memory_stream,
-        #         title="Chat with GBVR",
-        #         fill_height=True,
-        #         elem_id="chat-title"
-        #     )
 
             # Footer with version info
-            gr.Markdown("Ijwi ry'Ubufasha v1.0.0 © 2025", elem_id="footer")
+            gr.Markdown("Ijwi ry'Ubufasha v1.0.0 © 2025")
 
         # Handle user registration
         submit_btn.click(
@@ -632,9 +566,73 @@ def chatbot_interface():
             outputs=[response_message, chatbot_container, registration_container, chat_interface.chatbot]
         )
 
+    demo.css = """
+    :root {
+        --background: #f0f0f0;
+        --text: #000000;
+    }
+
+    body, .gradio-container {
+        margin: 0;
+        padding: 0;
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: var(--background);
+        color: var(--text);
+    }
+
+    .gradio-container {
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    .gr-box {
+        background: var(--background);
+        color: var(--text);
+        border-radius: 12px;
+        padding: 2rem;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    }
+
+    .gr-button-primary {
+        background: var(--background);
+        color: var(--text);
+        padding: 12px 24px;
+        border-radius: 8px;
+        transition: all 0.3s ease;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    .gr-button-primary:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+
+    footer {
+        text-align: center;
+        color: var(--text);
+        opacity: 0.7;
+        padding: 1rem;
+        font-size: 0.9em;
+    }
+
+    .gr-markdown h3 {
+        color: var(--text);
+        margin-bottom: 1rem;
+    }
+
+    .registration-markdown, .chat-title h1 {
+        color: var(--text);
+    }
+    """
+
     return demo
 
 # Launch the interface
 if __name__ == "__main__":
-    # Launch the interface
     chatbot_interface().launch(share=True)