Update app.py

app.py

@@ -70,20 +70,16 @@ def render_message(history):
     
     return messages_html
 
-with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto;}") as demo:
-    gr.Markdown("## P-MSQ Chat Interface with Profile Pictures")
-    gr.Markdown("""
-    Welcome to the **P-MSQ** (Messaging Service Query) chat interface! 
-    You are interacting with a friendly AI chatbot that can assist you in various situations.
-    Use the text input box below to start chatting.
-    """)
+with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; background-color: #f9f9f9;}") as demo:
+    gr.Markdown("## P-MSQ Chat Interface")
 
-    chatbot_output = gr.HTML(elem_id="chatbox", label="Chat History") 
+    chatbot_output = gr.HTML(elem_id="chatbox", label="Chat History", interactive=False)  
 
     msg_input = gr.Textbox(
         show_label=False, 
         placeholder="Type your message and press Enter...", 
-        lines=2
+        lines=2,
+        elem_id="input-text"
     )
 
     send_btn = gr.Button("Send")
@@ -126,5 +122,33 @@ with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto;}") as demo:
         send_btn
         regen_btn
 
+    gr.HTML("""
+    <style>
+    #chatbox {
+        max-height: 400px;
+        overflow-y: auto;
+        border: 1px solid #ccc;
+        background-color: #f9f9f9;
+        padding: 10px;
+    }
+
+    #input-text {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .gr-button { 
+        margin: 5px;
+        padding: 8px 16px;
+        font-size: 14px;
+    }
+
+    .gr-row { 
+        justify-content: flex-end;
+    }
+
+    </style>
+    """)
+
 if __name__ == "__main__":
     demo.launch()