Update app.py

app.py

@@ -49,173 +49,182 @@ def chatbot(history, query):
     history.append((query, response))
     return history, history
 
-# Custom CSS for a modern, dynamic UI with mobile responsiveness
+# Custom CSS for a WhatsApp-like mobile view
 custom_css = """
 /* General container styling */
 .gradio-container {
     font-family: 'Segoe UI', Arial, sans-serif;
-    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+    background: #e5ddd5; /* WhatsApp-inspired light background */
     min-height: 100vh;
-    padding: 20px;
+    padding: 0;
+    margin: 0;
 }
 
 /* Header styling */
 h1 {
-    color: #0D47A1 !important;
-    font-size: 2.5em !important;
+    color: #075e54 !important; /* WhatsApp green */
+    font-size: 1.8em !important;
     text-align: center;
-    margin-bottom: 10px;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-    animation: fadeInDown 1s ease-in-out;
+    margin: 10px 0;
+    text-shadow: none;
 }
 
 p {
-    color: #1565C0 !important;
-    font-size: 1.2em !important;
+    color: #075e54 !important;
+    font-size: 1em !important;
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
-/* Chatbot container: Adjusted size and responsive design */
+/* Chatbot container: Mimics WhatsApp chat window */
 .chatbot {
-    border-radius: 15px !important;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
-    background: white !important;
-    padding: 15px !important;
-    max-width: 800px !important;
-    margin: 0 auto !important;
-    height: 600px !important; /* Increased chat window height */
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    background: #e5ddd5 !important;
+    padding: 0 !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    height: 80vh !important; /* Full height for mobile */
     overflow-y: auto !important;
+    display: flex;
+    flex-direction: column-reverse; /* Bottom-up chat like WhatsApp */
 }
 
-/* Mobile adjustments for chat window */
-@media (max-width: 768px) {
-    .chatbot {
-        max-width: 100% !important;
-        height: 400px !important; /* Reduced height for mobile */
-        margin: 0 !important;
-    }
-}
-
-/* Chat bubbles */
+/* Chat bubbles: WhatsApp-style design */
 .chatbot .bubble {
-    border-radius: 15px !important;
-    padding: 12px 18px !important;
-    margin: 8px !important;
-    max-width: 70% !important;
-    animation: slideIn 0.5s ease-in-out;
+    border-radius: 10px !important;
+    padding: 10px 15px !important;
+    margin: 5px 10px !important;
+    max-width: 65% !important;
+    font-size: 0.9em !important;
+    animation: slideIn 0.3s ease-in-out;
     transition: transform 0.2s ease;
 }
 
 .chatbot .bubble:hover {
-    transform: scale(1.02);
+    transform: scale(1.01);
 }
 
+/* User bubble: Right-aligned, green like WhatsApp sender */
 .chatbot .bubble:nth-child(odd) {
-    background: #0D47A1 !important;
-    color: white !important;
+    background: #dcf8c6 !important; /* WhatsApp sender bubble color */
+    color: #000 !important;
     margin-left: auto !important;
+    align-self: flex-end !important;
 }
 
+/* Bot bubble: Left-aligned, light gray like WhatsApp receiver */
 .chatbot .bubble:nth-child(even) {
-    background: #E3F2FD !important;
-    color: #1E1E1E !important;
+    background: #fff !important; /* WhatsApp receiver bubble color */
+    color: #000 !important;
     margin-right: auto !important;
+    align-self: flex-start !important;
 }
 
-/* Textbox styling */
+/* Input area: Bottom navigation bar style */
+.gradio-row:last-child {
+    position: fixed !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    background: #f0f0f0 !important; /* Light gray for input area */
+    padding: 10px !important;
+    box-shadow: 0 -2px 5px rgba(0,0,0,0.1) !important;
+    z-index: 1000 !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+/* Textbox styling: Compact and WhatsApp-like */
 input[type="text"] {
-    border: 2px solid #0D47A1 !important;
-    border-radius: 25px !important;
-    padding: 12px 20px !important;
-    font-size: 1em !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    border: 1px solid #ccc !important;
+    border-radius: 20px !important;
+    padding: 10px 15px !important;
+    font-size: 0.9em !important;
+    box-shadow: none !important;
     flex-grow: 1 !important;
+    margin-right: 10px !important;
 }
 
 input[type="text"]:focus {
-    border-color: #1565C0 !important;
-    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3) !important;
+    border-color: #075e54 !important;
     outline: none !important;
 }
 
-/* Button styling: Larger Send button */
+/* Send button: Large and prominent */
 button {
-    border-radius: 25px !important;
-    background: #0D47A1 !important;
+    border-radius: 20px !important;
+    background: #075e54 !important; /* WhatsApp green */
     color: white !important;
-    padding: 15px 30px !important; /* Increased padding for larger size */
-    font-size: 1em !important;
+    padding: 12px 25px !important; /* Larger size */
+    font-size: 0.9em !important;
     border: none !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
-    transition: background 0.3s ease, transform 0.2s ease !important;
-    min-width: 120px !important; /* Minimum width for Send button */
+    min-width: 100px !important;
+    transition: background 0.3s ease !important;
 }
 
 button:hover {
-    background: #1565C0 !important;
-    transform: translateY(-2px) !important;
-}
-
-button:active {
-    transform: translateY(0) !important;
+    background: #054d44 !important;
 }
 
-/* Clear button: Reduced size */
+/* Clear button: Reduced size and WhatsApp-like placement */
 button[aria-label="Clear Chat"] {
-    background: #B0BEC5 !important;
-    margin: 10px auto !important;
-    display: block !important;
-    padding: 8px 20px !important; /* Reduced padding */
-    font-size: 0.9em !important;
-    min-width: 100px !important; /* Reduced width */
+    background: #e0e0e0 !important;
+    padding: 8px 15px !important;
+    font-size: 0.8em !important;
+    min-width: 80px !important;
+    margin-top: 10px !important;
+    align-self: center !important;
 }
 
 button[aria-label="Clear Chat"]:hover {
-    background: #90A4AE !important;
+    background: #d0d0d0 !important;
 }
 
 /* Animations */
-@keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
 @keyframes slideIn {
     from {
         opacity: 0;
-        transform: translateX(-20px);
+        transform: translateY(10px);
     }
     to {
         opacity: 1;
-        transform: translateX(0);
+        transform: translateY(0);
     }
 }
 
 /* Scrollbar styling */
 .chatbot::-webkit-scrollbar {
-    width: 8px;
+    width: 5px;
 }
 
 .chatbot::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 10px;
+    background: #e5ddd5;
 }
 
 .chatbot::-webkit-scrollbar-thumb {
-    background: #0D47A1;
-    border-radius: 10px;
+    background: #075e54;
+    border-radius: 5px;
 }
 
 .chatbot::-webkit-scrollbar-thumb:hover {
-    background: #1565C0;
+    background: #054d44;
+}
+
+/* Mobile-specific adjustments (already optimized, but ensuring consistency) */
+@media (max-width: 768px) {
+    .chatbot {
+        height: 80vh !important;
+    }
+    .gradio-row:last-child {
+        padding: 5px !important;
+    }
+    input[type="text"] {
+        padding: 8px 12px !important;
+    }
+    button {
+        padding: 10px 20px !important;
+    }
 }
 """
 
@@ -227,7 +236,7 @@ with gr.Blocks(title="LIC Agent Chatbot", css=custom_css) as demo:
 
     chatbot_ui = gr.Chatbot(
         label="LIC Assistant",
-        height=600,  # Increased default height
+        height=600,  # Default height, adjusted by CSS
         bubble_full_width=False,
         avatar_images=("🧑", "🤖"),
         show_copy_button=True
@@ -254,7 +263,7 @@ with gr.Blocks(title="LIC Agent Chatbot", css=custom_css) as demo:
         return history, query
 
     send.click(fn=send_message, inputs=[state, msg], outputs=[chatbot_ui, msg])
-    msg.submit(fn=send_message, inputs=[state, msg], outputs=[chatbot_ui, msg])  # Add Enter key support
+    msg.submit(fn=send_message, inputs=[state, msg], outputs=[chatbot_ui, msg])  # Enter key support
     clear.click(lambda: ([], []), None, [chatbot_ui, state], queue=False)
 
 demo.launch()