Update app.py

app.py

@@ -267,8 +267,10 @@ import gradio as gr
 from typing import Iterator
 import time
 
+
 # Refined Template with Emotional Awareness
 template = ("""
+    **Role**: Compassionate Regal Assistance and GBV Support Specialist with Emotional Awareness.
     You are a friendly and empathetic chatbot designed to assist users in a conversational and human-like manner. Your goal is to provide accurate, helpful, and emotionally supportive responses based on the provided context: {context}. Follow these guidelines:
 
     1. **Emotional Awareness**
@@ -279,18 +281,19 @@ template = ("""
     2. **Contextual Interaction**
       - Begin with a warm and empathetic welcome message.
       - Extract precise details from the provided context: {context}.
-      - Respond directly to the user's question: {question}.
-      - Remember the user's name is {first_name}. some time you can address it  occasionally
+      - Respond directly to the user's question: {question}.\
+      - Only provide detailed information if user requests it.
+      - Remember the user's name is {first_name}.
 
     3. **Communication Guidelines**
-      - Maintain a warm, conversational tone.
-      - Use occasional emojis for engagement (e.g., 😊, 👍,👋, ❤️).
+      - Maintain a warm, conversational tone (avoid over-familiarity).
+      - Use occasional emojis for engagement (e.g., 😊, 🤗, ❤️).
       - Provide clear, concise, and emotionally supportive information.
 
     4. **Response Strategies**
       - Greet users naturally and ask about their wellbeing (e.g., "Welcome, {first_name}! 😊 How are you feeling today?", "Hello {first_name}! 🤗 What's on your mind?").
       - Always start with a check-in about the user's wellbeing or current situation.
-      - Deliver only relevant information.
+      - Provide a concise summary with only relevant information.
       - Avoid generating content beyond the context.
       - Handle missing information transparently.
 
@@ -309,12 +312,11 @@ template = ("""
     7. **Real-Time Awareness**
       - Acknowledge the current context when appropriate.
       - Stay focused on the user's immediate needs.
-      - If this is the first message, always ask how the user is feeling and what they would like help with today.
 
-  
+
     **Context:** {context}
     **User's Question:** {question}
-    **Your Response:** 
+    **Your Response:**
 """)
 
 rag_prompt = PromptTemplate.from_template(template)
@@ -489,11 +491,14 @@ def rag_memory_stream(message, history):
     user_session.add_to_history("assistant", full_response)
 
 
+
+
 # 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 = """
@@ -507,103 +512,115 @@ def chatbot_interface():
 
     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.
+    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.
     """
 
     # Create the RAG chain with user context
     global rag_chain
     rag_chain = create_rag_chain(retriever, template, api_key)
 
+
+
     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:
+         :root {
+          --primary: #10A37F;
+          --secondary: #19C99D;
+          --accent: #FF6B6B;
+          --background: #000000;
+          --text: #FFFFFF;
+          --card-bg: #1E1E1E;
+      }
+
+      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 {
+          background: var(--card-bg) !important;
+          border-radius: 12px !important;
+          padding: 2rem !important;
+          box-shadow: 0 4px 6px rgba(255, 255, 255, 0.05) !important;
+          border: 1px solid rgba(255, 255, 255, 0.1) !important;
+      }
+
+      .chat-container {
+          border-radius: 12px !important;
+          background: var(--card-bg) !important;
+          box-shadow: 0 4px 6px rgba(255, 255, 255, 0.05) !important;
+          border: 1px solid rgba(255, 255, 255, 0.1) !important;
+          flex-grow: 1;
+          min-height: 600px;
+      }
+
+      .gr-button-primary {
+          background: var(--primary) !important;
+          color: white !important;
+          padding: 12px 24px !important;
+          border-radius: 8px !important;
+          transition: all 0.3s ease !important;
+      }
+
+      .gr-button-primary:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(16, 163, 127, 0.2) !important;
+      }
+
+      .gr-textbox {
+          background: var(--card-bg) !important;
+          color: var(--text) !important;
+          border-radius: 8px !important;
+          padding: 12px 16px !important;
+          border: 1px solid rgba(255, 255, 255, 0.1) !important;
+      }
+
+      .chatbot {
+          background: transparent !important;
+          border: none !important;
+      }
+
+      .bot {
+          background: var(--card-bg) !important;
+          border: 1px solid rgba(255, 255, 255, 0.1) !important;
+          margin-right: auto !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(--primary) !important;
+          margin-bottom: 1rem !important;
+      }
 
+        
+    """) as demo:
         # User registration section
         registration_container = gr.Column(visible=True)
         with registration_container:
-            gr.Markdown("### To prioritize your privacy, please provide your nickname. ")
+            gr.Markdown("### Your privacy is our concern, please provide your nickname. ")
 
             with gr.Row():
                 first_name = gr.Textbox(
@@ -622,10 +639,8 @@ def chatbot_interface():
         with chatbot_container:
             chat_interface = gr.ChatInterface(
                 fn=rag_memory_stream,
-                title=gr.Markdown("# Ijwi ry'Ubufasha", elem_classes="chat-title"),
-                fill_height=True,
-                textbox=gr.Textbox(placeholder="Type your message here...", show_label=False),
-                submit_btn=gr.Button("Send", variant="primary")
+                title="Chat with GBVR",
+                fill_height=True
             )
 
             # Footer with version info
@@ -642,6 +657,5 @@ def chatbot_interface():
 
 # Launch the interface
 if __name__ == "__main__":
-
-    chatbot_interface().launch(share=True, inbrowser=True)
-
+    # Launch the interface
+    chatbot_interface().launch(share=True)