Update app.py

app.py

@@ -159,81 +159,58 @@ def init():
     return [{"role": "assistant", "content": WELCOME_MESSAGE_EN}], 0, "", [], False
 
 with gr.Blocks(css="""
-html, body {
-  margin: 0 !important;
-  padding: 0 !important;
-  height: 100vh !important;
-  overflow: hidden !important;
-}
-#chatbox {
-  height: 100% !important;
-  overflow-y: auto !important;
-  padding-bottom: 160px !important;
-}
-.input-row {
-  position: fixed !important;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: white;
-  padding: 10px 20px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  z-index: 10;
-}
 .send-btn {
   background-color: #25D366 !important;
   color: white !important;
-  border: none !important;
-  border-radius: 24px !important;
-  font-size: 20px !important;
-  padding: 8px 20px !important;
-  height: 48px !important;
-  width: 60px !important;
-  margin-left: 8px !important;
-  cursor: pointer !important;
+  border: none;
+  border-radius: 24px;
+  font-size: 20px;
+  padding: 8px 20px;
+  height: 48px;
+  width: 60px;
+  margin-left: 8px;
+  cursor: pointer;
 }
 #chatbox .avatar-container {
     width: 64px !important;
     height: 64px !important;
+    min-width: 64px !important;
+    min-height: 64px !important;
     background-size: 100% 100% !important;
+    background-position: center center !important;
     border-radius: 50% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
     background-color: transparent !important;
 }
 #chatbox .message.user { background-color: #DCF8C6 !important; }
 #chatbox .message.assistant { background-color: #ffffff !important; }
-footer, .icon-button-wrapper, label.svelte-1to105q {
+footer { display: none !important; }
+.svelte-1ipelgc { display: none !important; }
+
+.icon-button-wrapper {
+  display: none !important;
+}
+
+label.svelte-1to105q {
   display: none !important;
 }
+
+
 """) as demo:
     gr.HTML("""
     <script>
-      const scrollToBottom = () => {
-        const chatbox = document.getElementById("chatbox");
-        if (!chatbox) return;
-        let attempts = 0;
-        const maxAttempts = 10;
-        const scroll = () => {
-          chatbox.scrollTop = chatbox.scrollHeight + 200;
-          attempts += 1;
-          if (attempts < maxAttempts) {
-            setTimeout(scroll, 100);
-          }
-        };
-        scroll();
-      };
-
       const waitForChatbox = () => {
         const chatbox = document.getElementById("chatbox");
         if (chatbox) {
           const observer = new MutationObserver(() => {
-            scrollToBottom();
+            chatbox.scrollTop = chatbox.scrollHeight;
           });
           observer.observe(chatbox, { childList: true, subtree: true });
         } else {
-          setTimeout(waitForChatbox, 300);
+          setTimeout(waitForChatbox, 500);
         }
       };
       waitForChatbox();
@@ -245,11 +222,12 @@ footer, .icon-button-wrapper, label.svelte-1to105q {
         label="",
         avatar_images=["user_avatar.jpg", "humanlike_avatar.png"],
         bubble_full_width=False,
+        height=500,
         show_copy_button=False,
         type="messages"
     )
 
-    with gr.Row(elem_classes="input-row"):
+    with gr.Row():
         user_input = gr.Textbox(
             show_label=False,
             placeholder="Type your message here and press send...",