Update app.py

app.py

@@ -206,20 +206,24 @@ with gr.Blocks(css="""
   background-color: #25D366 !important;
   color: white !important;
   border: none;
-  border-radius: 10px;
-  font-size: 20px;
+  border-radius: 20px;
+  font-size: 18px;
+  padding: 6px 12px;
   height: 42px;
-  width: 100%;
-  padding: 0;
-  margin: 0;
+  width: 52px;
+  margin-left: 6px;
   cursor: pointer;
 }
+#chatbox {
+  max-width: 100% !important;
+  padding: 0 8px !important;
+}
 #chatbox .avatar-container {
     width: 48px !important;
     height: 48px !important;
     min-width: 48px !important;
     min-height: 48px !important;
-    margin-right: 8px !important;
+    margin-right: 6px !important;
     background-size: 100% 100% !important;
     background-position: center center !important;
     border-radius: 50% !important;
@@ -229,17 +233,16 @@ with gr.Blocks(css="""
     background-color: transparent !important;
 }
 #chatbox .message {
-  line-height: 1.6em !important;
+  line-height: 1.5em !important;
   padding: 10px 14px !important;
   border-radius: 12px !important;
   font-size: 16px !important;
-  max-width: 85% !important;
+  max-width: 90% !important;
   word-wrap: break-word !important;
   word-break: break-word !important;
   white-space: normal !important;
   overflow-wrap: break-word !important;
 }
-
 #chatbox .message.user { background-color: #DCF8C6 !important; }
 #chatbox .message.assistant { background-color: #ffffff !important; }
 footer { display: none !important; }
@@ -247,8 +250,6 @@ footer { display: none !important; }
 .icon-button-wrapper { display: none !important; }
 label.svelte-1to105q { display: none !important; }
 """) as demo:
-
-    # 自动滚动到底部的脚本
     gr.HTML("""
     <script>
       const waitForChatbox = () => {
@@ -266,36 +267,31 @@ label.svelte-1to105q { display: none !important; }
     </script>
     """)
 
-    # 聊天框
     chatbot = gr.Chatbot(
         elem_id="chatbox",
         label="",
         avatar_images=["user_avatar.jpg", "humanlike_avatar.png"],
         bubble_full_width=False,
-        height="80vh",
+        height=500,
         show_copy_button=False,
         type="messages"
     )
 
-    # 输入 + 发送按钮布局（两列）
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=11):
-            user_input = gr.Textbox(
-                show_label=False,
-                placeholder="Type your message here and press send...",
-                container=True
-            )
-        with gr.Column(scale=1, min_width=48):
-            send_btn = gr.Button(value="➤", elem_classes="send-btn")
+    with gr.Row():
+        user_input = gr.Textbox(
+            show_label=False,
+            placeholder="Type your message here and press send...",
+            container=True,
+            scale=10
+        )
+        send_btn = gr.Button(value="➤", elem_classes="send-btn")
 
-    # 状态变量
     state = gr.State([])
     step = gr.State(0)
     language = gr.State("")
     questions = gr.State([])
     followup_mode = gr.State(False)
 
-    # 加载和按钮触发
     demo.load(fn=init, outputs=[chatbot, step, language, questions, followup_mode])
     user_input.submit(respond, [user_input, state, step, language, questions, followup_mode],
                       [chatbot, user_input, step, language, questions, followup_mode])