Update app.py

app.py

@@ -213,10 +213,7 @@ 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 {
-                display: none !important;
-            }
+            /* --- Hide Share & Delete Buttons --- */
             [data-testid="share-btn"],
             [data-testid="delete-btn"],
             .message-controls,
@@ -225,7 +222,7 @@ def build_ui():
                 visibility: hidden !important;
             }
 
-            /* --- User (Right) Message Bubble --- */
+            /* --- User (Right Side) --- */
             #ohamlab .message.user {
                 background-color: #4f46e5 !important;
                 color: white !important;
@@ -233,9 +230,11 @@ 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 --- */
+            /* --- Bot (Left Side) --- */
             #ohamlab .message.assistant {
                 background-color: #f8f9fa !important;
                 color: #111 !important;
@@ -243,45 +242,99 @@ 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