Update app.py

app.py

@@ -49,187 +49,175 @@ def chatbot(history, query):
     history.append((query, response))
     return history, history
 
-# Custom CSS for a WhatsApp-like mobile view with adjusted bubble size
+# Custom CSS for a normal chatbot visual design
 custom_css = """
 /* General container styling */
 .gradio-container {
-    font-family: 'Segoe UI', Arial, sans-serif;
-    background: #e5ddd5; /* WhatsApp-inspired light background */
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Neutral gradient */
     min-height: 100vh;
     padding: 0;
     margin: 0;
-    font-size: 14px; /* Base font size for consistency */
+    font-size: 14px; /* Base font size */
 }
 
 /* Header styling */
 h1 {
-    color: #075e54 !important; /* WhatsApp green */
-    font-size: 1.5em !important;
+    color: #2c3e50 !important; /* Dark blue for professionalism */
+    font-size: 24px !important;
     text-align: center;
-    margin: 10px 0;
+    margin: 15px 0;
     text-shadow: none;
 }
 
 p {
-    color: #075e54 !important;
-    font-size: 0.9em !important;
+    color: #34495e !important; /* Slightly lighter blue */
+    font-size: 14px !important;
     text-align: center;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
 }
 
-/* Chatbot container: Mimics WhatsApp chat window */
+/* Chatbot container */
 .chatbot {
-    border-radius: 0 !important;
-    box-shadow: none !important;
-    background: #e5ddd5 !important;
-    padding: 0 !important;
-    max-width: 100% !important;
-    margin: 0 !important;
-    height: 80vh !important;
+    border-radius: 8px !important;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
+    background: #ffffff !important;
+    padding: 10px !important;
+    max-width: 800px !important;
+    margin: 0 auto !important;
+    height: 70vh !important; /* Adjusted for normal view */
     overflow-y: auto !important;
-    display: flex;
-    flex-direction: column-reverse; /* Bottom-up chat like WhatsApp */
+    display: block; /* Reset to default flow */
 }
 
-/* Chat bubbles: WhatsApp-style design with reduced size */
+/* Chat bubbles: Normal design */
 .chatbot .bubble {
-    border-radius: 10px !important;
-    padding: 6px 10px !important; /* Reduced padding */
-    margin: 3px 6px !important; /* Reduced margin */
-    max-width: 65% !important;
-    font-size: 14px !important; /* Absolute size for consistency */
-    min-height: 20px !important; /* Minimum height to control size */
-    min-width: 50px !important; /* Minimum width to control size */
+    border-radius: 8px !important;
+    padding: 8px 12px !important;
+    margin: 5px 0 !important;
+    max-width: 70% !important;
+    font-size: 14px !important; /* Normal text size */
+    min-height: 30px !important; /* Controlled minimum height */
+    min-width: 60px !important; /* Controlled minimum width */
     word-wrap: break-word !important;
-    line-height: 1.2 !important; /* Tighter line spacing */
-    color: #000 !important;
+    line-height: 1.4 !important; /* Readable line spacing */
+    color: #2c3e50 !important; /* Consistent text color */
 }
 
-/* User bubble: Right-aligned, green like WhatsApp sender */
+/* User bubble: Right-aligned, light blue */
 .chatbot .bubble:nth-child(odd) {
-    background: #dcf8c6 !important;
+    background: #3498db !important; /* Light blue for user */
+    color: #ffffff !important; /* White text for contrast */
     margin-left: auto !important;
     align-self: flex-end !important;
 }
 
-/* Bot bubble: Left-aligned, light gray like WhatsApp receiver */
+/* Bot bubble: Left-aligned, light gray */
 .chatbot .bubble:nth-child(even) {
-    background: #fff !important;
+    background: #ecf0f1 !important; /* Light gray for bot */
     margin-right: auto !important;
     align-self: flex-start !important;
 }
 
-/* Input area: Bottom navigation bar style */
+/* Input area */
 .gradio-row:last-child {
-    position: fixed !important;
-    bottom: 0 !important;
     width: 100% !important;
-    max-width: 100% !important;
-    background: #f0f0f0 !important;
-    padding: 8px !important;
-    box-shadow: 0 -2px 5px rgba(0,0,0,0.1) !important;
-    z-index: 1000 !important;
+    max-width: 800px !important;
+    margin: 10px auto !important;
+    padding: 10px !important;
     display: flex !important;
     align-items: center !important;
+    background: transparent !important;
 }
 
-/* Textbox styling: Compact and WhatsApp-like */
+/* Textbox styling */
 input[type="text"] {
-    border: 1px solid #ccc !important;
-    border-radius: 20px !important;
+    border: 1px solid #bdc3c7 !important;
+    border-radius: 4px !important;
     padding: 8px 12px !important;
     font-size: 14px !important;
-    box-shadow: none !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
     flex-grow: 1 !important;
-    margin-right: 8px !important;
-    color: #000 !important;
+    margin-right: 10px !important;
+    color: #2c3e50 !important;
 }
 
 input[type="text"]::placeholder {
-    color: #757575 !important;
+    color: #7f8c8d !important; /* Gray placeholder */
     font-size: 14px !important;
 }
 
 input[type="text"]:focus {
-    border-color: #075e54 !important;
+    border-color: #3498db !important;
     outline: none !important;
 }
 
-/* Send button: Large and prominent */
+/* Send button */
 button {
-    border-radius: 20px !important;
-    background: #075e54 !important;
+    border-radius: 4px !important;
+    background: #3498db !important; /* Matching user bubble */
     color: white !important;
-    padding: 10px 20px !important;
+    padding: 8px 20px !important;
     font-size: 14px !important;
     border: none !important;
-    min-width: 90px !important;
+    min-width: 80px !important;
     transition: background 0.3s ease !important;
     text-align: center !important;
 }
 
 button:hover {
-    background: #054d44 !important;
+    background: #2980b9 !important;
 }
 
-/* Clear button: Reduced size */
+/* Clear button */
 button[aria-label="Clear Chat"] {
-    background: #e0e0e0 !important;
-    padding: 6px 12px !important;
-    font-size: 0.8em !important;
-    min-width: 70px !important;
-    margin-top: 8px !important;
+    background: #bdc3c7 !important; /* Silver gray */
+    padding: 6px 15px !important;
+    font-size: 14px !important;
+    min-width: 90px !important;
+    margin-top: 10px !important;
     align-self: center !important;
-    color: #000 !important;
+    color: #ffffff !important;
 }
 
 button[aria-label="Clear Chat"]:hover {
-    background: #d0d0d0 !important;
-}
-
-/* Animations */
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+    background: #95a5a6 !important;
 }
 
 /* Scrollbar styling */
 .chatbot::-webkit-scrollbar {
-    width: 5px;
+    width: 6px;
 }
 
 .chatbot::-webkit-scrollbar-track {
-    background: #e5ddd5;
+    background: #f5f7fa;
 }
 
 .chatbot::-webkit-scrollbar-thumb {
-    background: #075e54;
-    border-radius: 5px;
+    background: #3498db;
+    border-radius: 3px;
 }
 
 .chatbot::-webkit-scrollbar-thumb:hover {
-    background: #054d44;
+    background: #2980b9;
 }
 
 /* Mobile-specific adjustments */
 @media (max-width: 768px) {
     .chatbot {
-        height: 80vh !important;
+        max-width: 100% !important;
+        height: 65vh !important; /* Adjusted for mobile */
+        margin: 0 !important;
     }
     .gradio-row:last-child {
+        max-width: 100% !important;
         padding: 5px !important;
     }
     input[type="text"] {
         padding: 6px 10px !important;
     }
     button {
-        padding: 8px 18px !important;
+        padding: 6px 15px !important;
     }
 }
 """