Update app.py

app.py

@@ -49,7 +49,7 @@ def chatbot(history, query):
     history.append((query, response))
     return history, history
 
-# Custom CSS for a WhatsApp-like mobile view with adjusted text size
+# Custom CSS for a WhatsApp-like mobile view with adjusted bubble size
 custom_css = """
 /* General container styling */
 .gradio-container {
@@ -58,12 +58,13 @@ custom_css = """
     min-height: 100vh;
     padding: 0;
     margin: 0;
+    font-size: 14px; /* Base font size for consistency */
 }
 
 /* Header styling */
 h1 {
     color: #075e54 !important; /* WhatsApp green */
-    font-size: 1.5em !important; /* Reduced header size */
+    font-size: 1.5em !important;
     text-align: center;
     margin: 10px 0;
     text-shadow: none;
@@ -71,7 +72,7 @@ h1 {
 
 p {
     color: #075e54 !important;
-    font-size: 0.9em !important; /* Reduced subtitle size */
+    font-size: 0.9em !important;
     text-align: center;
     margin-bottom: 10px;
 }
@@ -84,34 +85,36 @@ p {
     padding: 0 !important;
     max-width: 100% !important;
     margin: 0 !important;
-    height: 80vh !important; /* Full height for mobile */
+    height: 80vh !important;
     overflow-y: auto !important;
     display: flex;
     flex-direction: column-reverse; /* Bottom-up chat like WhatsApp */
 }
 
-/* Chat bubbles: WhatsApp-style design with reduced text size */
+/* Chat bubbles: WhatsApp-style design with reduced size */
 .chatbot .bubble {
     border-radius: 10px !important;
-    padding: 8px 12px !important; /* Reduced padding */
-    margin: 4px 8px !important; /* Reduced margin */
+    padding: 6px 10px !important; /* Reduced padding */
+    margin: 3px 6px !important; /* Reduced margin */
     max-width: 65% !important;
-    font-size: 0.85em !important; /* Reduced to normal size (approx 14px) */
-    word-wrap: break-word !important; /* Ensure text wraps properly */
-    line-height: 1.3 !important; /* Adjusted for readability */
-    color: #000 !important; /* Ensure text is visible */
+    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 */
+    word-wrap: break-word !important;
+    line-height: 1.2 !important; /* Tighter line spacing */
+    color: #000 !important;
 }
 
 /* User bubble: Right-aligned, green like WhatsApp sender */
 .chatbot .bubble:nth-child(odd) {
-    background: #dcf8c6 !important; /* WhatsApp sender bubble color */
+    background: #dcf8c6 !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: #fff !important; /* WhatsApp receiver bubble color */
+    background: #fff !important;
     margin-right: auto !important;
     align-self: flex-start !important;
 }
@@ -122,29 +125,29 @@ p {
     bottom: 0 !important;
     width: 100% !important;
     max-width: 100% !important;
-    background: #f0f0f0 !important; /* Light gray for input area */
-    padding: 8px !important; /* Reduced padding */
+    background: #f0f0f0 !important;
+    padding: 8px !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 with correct placeholder */
+/* Textbox styling: Compact and WhatsApp-like */
 input[type="text"] {
     border: 1px solid #ccc !important;
     border-radius: 20px !important;
-    padding: 8px 12px !important; /* Reduced padding */
-    font-size: 0.85em !important; /* Reduced to normal size */
+    padding: 8px 12px !important;
+    font-size: 14px !important;
     box-shadow: none !important;
     flex-grow: 1 !important;
-    margin-right: 8px !important; /* Reduced margin */
-    color: #000 !important; /* Ensure text is visible */
+    margin-right: 8px !important;
+    color: #000 !important;
 }
 
 input[type="text"]::placeholder {
-    color: #757575 !important; /* Gray placeholder like WhatsApp */
-    font-size: 0.85em !important; /* Match textbox size */
+    color: #757575 !important;
+    font-size: 14px !important;
 }
 
 input[type="text"]:focus {
@@ -155,29 +158,29 @@ input[type="text"]:focus {
 /* Send button: Large and prominent */
 button {
     border-radius: 20px !important;
-    background: #075e54 !important; /* WhatsApp green */
-    color: white !important; /* Ensure text is visible */
-    padding: 10px 20px !important; /* Adjusted for balance */
-    font-size: 0.85em !important; /* Reduced to normal size */
+    background: #075e54 !important;
+    color: white !important;
+    padding: 10px 20px !important;
+    font-size: 14px !important;
     border: none !important;
-    min-width: 90px !important; /* Slightly reduced */
+    min-width: 90px !important;
     transition: background 0.3s ease !important;
-    text-align: center !important; /* Center text */
+    text-align: center !important;
 }
 
 button:hover {
     background: #054d44 !important;
 }
 
-/* Clear button: Reduced size and WhatsApp-like placement */
+/* Clear button: Reduced size */
 button[aria-label="Clear Chat"] {
     background: #e0e0e0 !important;
-    padding: 6px 12px !important; /* Further reduced */
+    padding: 6px 12px !important;
     font-size: 0.8em !important;
-    min-width: 70px !important; /* Further reduced */
+    min-width: 70px !important;
     margin-top: 8px !important;
     align-self: center !important;
-    color: #000 !important; /* Ensure text is visible */
+    color: #000 !important;
 }
 
 button[aria-label="Clear Chat"]:hover {
@@ -239,7 +242,7 @@ with gr.Blocks(title="LIC Agent Chatbot", css=custom_css) as demo:
 
     chatbot_ui = gr.Chatbot(
         label="LIC Assistant",
-        height=600,  # Default height, adjusted by CSS
+        height=600,
         bubble_full_width=False,
         avatar_images=("🧑", "🤖"),
         show_copy_button=True
@@ -266,7 +269,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])  # Enter key support
+    msg.submit(fn=send_message, inputs=[state, msg], outputs=[chatbot_ui, msg])
     clear.click(lambda: ([], []), None, [chatbot_ui, state], queue=False)
 
 demo.launch()