Update app.py

app.py

@@ -219,14 +219,15 @@ with gr.Blocks(
             border-radius: 10px !important;
         }
 
-        /* ✅ 桌機版比例：輸入框 9、按鈕 1 */
-        #chat-row > .gr-textbox { flex: 9 !important; }
-        #chat-row > .gr-button { flex: 1 !important; }
+        /* ✅ 桌機版比例：輸入框 8、按鈕 2 */
+        #chat-row .gr-textbox, #chat-row textarea { flex: 9 !important; width: 90% !important; }
+        #chat-row .gr-button, #chat-row button { flex: 1 !important; width: 10% !important; }
 
-        /* ✅ 手機版比例：輸入框 9、按鈕 1 */
+        /* ✅ 手機版比例：輸入框 9、按鈕 1（強制套用到 Hugging Face 結構） */
         @media (max-width: 768px) {
-            #chat-row > .gr-textbox { flex: 9 !important; }
-            #chat-row > .gr-button { flex: 1 !important; }
+            #chat-row .gr-textbox, #chat-row textarea { flex: 9 !important; width: 90% !important; }
+            #chat-row .gr-button, #chat-row button { flex: 1 !important; width: 10% !important; max-width: 80px !important; min-width: 60px !important; }
+            #send-btn button { padding: 0 10px !important; }
         }
     """
 ) as demo:
@@ -249,7 +250,7 @@ with gr.Blocks(
         with gr.Column(scale=4, min_width=300):
             chatbot = gr.Chatbot(label="💬 對話紀錄", type="messages", height=500)
 
-            # ✅ 輸入框與送出鍵同行排列（桌機 8:2、手機 9:1）
+            # ✅ 輸入框與送出鍵同行排列（桌機、手機 9:1）
             with gr.Row(elem_id="chat-row"):
                 user_input = gr.Textbox(
                     placeholder="請輸入您的問題（Enter 送出 / Shift+Enter 換行）...",
@@ -280,28 +281,34 @@ with gr.Blocks(
                 return history, gr.update(value="")
 
             # ✅ 綁定事件（Enter送出、Shift+Enter換行）
-            user_input.submit(handle_input, [user_input, chatbot], [chatbot, user_input])  # Enter 觸發送出
-            send_btn.click(handle_input, [user_input, chatbot], [chatbot, user_input])     # 按鈕觸發送出
+            user_input.submit(handle_input, [user_input, chatbot], [chatbot, user_input])
+            send_btn.click(handle_input, [user_input, chatbot], [chatbot, user_input])
 
-            # ✅ 修正版 JS：適用桌機與手機
+            # ✅ JS 修正版：支援桌機 / 手機 / HuggingFace IFrame
             gr.HTML("""
             <script>
             document.addEventListener("DOMContentLoaded", function() {
-              const textareas = document.querySelectorAll("textarea");
-              textareas.forEach((ta) => {
-                ta.addEventListener("keydown", function(e) {
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault();
-                    const sendBtn = document.querySelector('#send-btn button, #send-btn');
-                    if (sendBtn) sendBtn.click();
+              const observer = new MutationObserver(() => {
+                const textareas = document.querySelectorAll("textarea");
+                textareas.forEach((ta) => {
+                  if (!ta.dataset.bound) {
+                    ta.dataset.bound = "true";
+                    ta.addEventListener("keydown", function(e) {
+                      if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        const sendBtn = document.querySelector('#send-btn button, #send-btn');
+                        if (sendBtn) sendBtn.click();
+                      }
+                    });
                   }
                 });
               });
+              observer.observe(document.body, { childList: true, subtree: true });
             });
             </script>
             """)
 
-        # 右側：常見問題 + 整理畫面
+        # 右側：常見問題 + 清除對話
         with gr.Column(scale=1, min_width=200):
             gr.Markdown("### 🔍 常見問題")
             examples = [
@@ -323,7 +330,7 @@ with gr.Blocks(
                 memory.clear()
                 return [], gr.update(value="")
             gr.Markdown("---")
-            gr.Button("🧹 整理畫面").click(clear_all, outputs=[chatbot, user_input])
+            gr.Button("🧹 清除對話").click(clear_all, outputs=[chatbot, user_input])
 
     gr.HTML("<div id='footer'>© Fintech Assistant — 僅業務使用，非官方授權</div>")