Update app.py

app.py

@@ -213,7 +213,10 @@ def build_ui():
     with gr.Blocks(
         theme=gr.themes.Soft(primary_hue="indigo"),
         css="""
-            /* --- Hide Share & Delete Buttons --- */
+            /* --- Hide share/delete icons --- */
+            #ohamlab .wrap.svelte-1lcyrj3 > div > div > button {
+                display: none !important;
+            }
             [data-testid="share-btn"],
             [data-testid="delete-btn"],
             .message-controls,
@@ -222,7 +225,7 @@ def build_ui():
                 visibility: hidden !important;
             }
 
-            /* --- User (Right Side) --- */
+            /* --- User (Right) Message Bubble --- */
             #ohamlab .message.user {
                 background-color: #4f46e5 !important;
                 color: white !important;
@@ -230,11 +233,9 @@ def build_ui():
                 align-self: flex-end !important;
                 text-align: right !important;
                 margin-left: 25%;
-                padding: 0.6rem 1rem !important;
-                max-width: 70%;
             }
 
-            /* --- Bot (Left Side) --- */
+            /* --- OhamLab (Left) Message Bubble --- */
             #ohamlab .message.assistant {
                 background-color: #f8f9fa !important;
                 color: #111 !important;
@@ -242,99 +243,47 @@ def build_ui():
                 align-self: flex-start !important;
                 text-align: left !important;
                 margin-right: 25%;
-                padding: 0.6rem 1rem !important;
-                max-width: 70%;
-            }
-
-            /* --- Replace bot icon with 'OhamLab' label --- */
-            #ohamlab .avatar span,
-            #ohamlab .avatar {
-                background: none !important;
-                color: #4f46e5 !important;
-                font-weight: 700 !important;
-                font-size: 0.9rem !important;
-            }
-            #ohamlab .avatar::before {
-                content: "OhamLab" !important;
-                display: inline-block;
             }
 
+            
+            #ohamlab .chatbot .wrap.svelte-1lcyrj3 > div > div > button {
+                   display: none !important; /* hide share/delete icons */
+               }
+         
+            /* --- Overall Container --- */
             .gradio-container {
                 max-width: 900px !important;
                 margin: auto;
                 padding-top: .5rem;
             }
+            textarea {
+                resize: none !important;
+                border-radius: 12px !important;
+                border: 1px solid #d1d5db !important;
+                box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+            }
+            button.primary {
+                background-color: #4f46e5 !important;
+                color: white !important;
+                border-radius: 10px !important;
+                padding: 0.6rem 1.4rem !important;
+                font-weight: 600;
+                transition: all 0.2s ease-in-out;
+            }
+            button.primary:hover {
+                background-color: #4338ca !important;
+            }
+            button.secondary {
+                background-color: #f3f4f6 !important;
+                border-radius: 10px !important;
+                color: #374151 !important;
+                font-weight: 500;
+                transition: all 0.2s ease-in-out;
+            }
+            button.secondary:hover {
+                background-color: #e5e7eb !important;
+            }
         """,
-        # css="""
-        #     /* --- Hide share/delete icons --- */
-        #     #ohamlab .wrap.svelte-1lcyrj3 > div > div > button {
-        #         display: none !important;
-        #     }
-        #     [data-testid="share-btn"],
-        #     [data-testid="delete-btn"],
-        #     .message-controls,
-        #     .message-actions {
-        #         display: none !important;
-        #         visibility: hidden !important;
-        #     }
-
-        #     /* --- User (Right) Message Bubble --- */
-        #     #ohamlab .message.user {
-        #         background-color: #4f46e5 !important;
-        #         color: white !important;
-        #         border-radius: 14px !important;
-        #         align-self: flex-end !important;
-        #         text-align: right !important;
-        #         margin-left: 25%;
-        #     }
-
-        #     /* --- OhamLab (Left) Message Bubble --- */
-        #     #ohamlab .message.assistant {
-        #         background-color: #f8f9fa !important;
-        #         color: #111 !important;
-        #         border-radius: 14px !important;
-        #         align-self: flex-start !important;
-        #         text-align: left !important;
-        #         margin-right: 25%;
-        #     }
-        #     #ohamlab .chatbot .wrap.svelte-1lcyrj3 > div > div > button {
-        #     display: none !important; /* hide share/delete icons */
-        #        }
-
-        #     /* --- Overall Container --- */
-        #     .gradio-container {
-        #         max-width: 900px !important;
-        #         margin: auto;
-        #         padding-top: .5rem;
-        #     }
-        #     textarea {
-        #         resize: none !important;
-        #         border-radius: 12px !important;
-        #         border: 1px solid #d1d5db !important;
-        #         box-shadow: 0 1px 3px rgba(0,0,0,0.08);
-        #     }
-        #     button.primary {
-        #         background-color: #4f46e5 !important;
-        #         color: white !important;
-        #         border-radius: 10px !important;
-        #         padding: 0.6rem 1.4rem !important;
-        #         font-weight: 600;
-        #         transition: all 0.2s ease-in-out;
-        #     }
-        #     button.primary:hover {
-        #         background-color: #4338ca !important;
-        #     }
-        #     button.secondary {
-        #         background-color: #f3f4f6 !important;
-        #         border-radius: 10px !important;
-        #         color: #374151 !important;
-        #         font-weight: 500;
-        #         transition: all 0.2s ease-in-out;
-        #     }
-        #     button.secondary:hover {
-        #         background-color: #e5e7eb !important;
-        #     }
-        # """,
     ) as demo:
         
         # Chatbot area