Update app.py

app.py

@@ -213,12 +213,14 @@ def build_ui():
     with gr.Blocks(
         theme=gr.themes.Soft(primary_hue="indigo"),
         css="""
-            /* --- Hide share/delete icons --- */
-            #ohamlab .wrap.svelte-1lcyrj3 > div > div > button {
+            /* --- Hide share & delete buttons (Gradio v4 compatible) --- */
+            [class*="message-actions"] button,
+            [class*="message-controls"] button {
                 display: none !important;
+                visibility: hidden !important;
             }
 
-            /* --- User (Right) Message Bubble --- */
+            /* --- Chat layout styling --- */
             #ohamlab .message.user {
                 background-color: #4f46e5 !important;
                 color: white !important;
@@ -226,9 +228,10 @@ def build_ui():
                 align-self: flex-end !important;
                 text-align: right !important;
                 margin-left: 25%;
+                padding: 0.6rem 1rem !important;
+                max-width: 70%;
             }
 
-            /* --- OhamLab (Left) Message Bubble --- */
             #ohamlab .message.assistant {
                 background-color: #f8f9fa !important;
                 color: #111 !important;
@@ -236,12 +239,24 @@ def build_ui():
                 align-self: flex-start !important;
                 text-align: left !important;
                 margin-right: 25%;
+                padding: 0.6rem 1rem !important;
+                max-width: 70%;
             }
-            #ohamlab .chatbot .wrap.svelte-1lcyrj3 > div > div > button {
-            display: none !important; /* hide share/delete icons */
-               }
 
-            /* --- Overall Container --- */
+            /* --- Replace circular bot icon text with 'OhamLab' --- */
+            #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;
+            }
+
+            /* --- Container and Inputs --- */
             .gradio-container {
                 max-width: 900px !important;
                 margin: auto;
@@ -253,6 +268,7 @@ def build_ui():
                 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;
@@ -261,9 +277,11 @@ def build_ui():
                 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;
@@ -271,12 +289,15 @@ def build_ui():
                 font-weight: 500;
                 transition: all 0.2s ease-in-out;
             }
+
             button.secondary:hover {
                 background-color: #e5e7eb !important;
             }
         """,
     ) as demo:
         
+
+        
         # Chatbot area
         chatbot = gr.Chatbot(
             label="💠 OhamLab Conversation",