Update app.py

app.py

@@ -143,6 +143,7 @@ def chat_fn(message, history):
 # 6️⃣ Gradio 介面
 # =============================================
 
+# === Logo 圖片處理 ===
 # === Logo 圖片處理 ===
 logo_base64 = ""
 if os.path.exists(LOGO_PATH):
@@ -171,7 +172,6 @@ with gr.Blocks(
             #logo-top img { width: 90px; }
             .gradio-container { padding: 8px; }
             #footer { font-size: 12px; margin-top: 10px; }
-            #main-title { font-size: 22px !important; line-height: 1.4; }
         }
 
         /* === 桌機/手機自適應標題 === */
@@ -203,7 +203,7 @@ with gr.Blocks(
             }
         }
 
-        /* ✅ 修正輸入框高度與送出鍵比例 */
+        /* ✅ 修正輸入框高度與按鈕比例 */
         #chat-input textarea {
             height: 48px !important;
             min-height: 48px !important;
@@ -220,15 +220,31 @@ with gr.Blocks(
             font-size: 16px !important;
             border-radius: 10px !important;
         }
-        
-        /* ✅ 桌機版比例：輸入框 8、按鈕 2 */
-        #chat-row > .gr-textbox { flex: 8 !important; }
-        #chat-row > .gr-button { flex: 2 !important; }
 
-        /* ✅ 手機版比例：輸入框 9、按鈕 1 */
+        /* ✅ 桌機版比例：輸入框 9、按鈕 1 */
+        #chat-row > .gr-textbox { flex: 9 !important; }
+        #chat-row > .gr-button { flex: 1 !important; }
+
+        /* ✅ 手機版比例：輸入框 9、按鈕 1 + 固定底部 */
         @media (max-width: 768px) {
             #chat-row > .gr-textbox { flex: 9 !important; }
             #chat-row > .gr-button { flex: 1 !important; }
+
+            /* 固定輸入列到底部 */
+            #chat-row {
+                position: fixed !important;
+                bottom: 0 !important;
+                left: 0 !important;
+                width: 100% !important;
+                background-color: white !important;
+                padding: 8px !important;
+                box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
+                z-index: 999;
+            }
+            /* 確保聊天區不被輸入列擋住 */
+            .gr-chatbot {
+                padding-bottom: 100px !important;
+            }
         }
     """
 ) as demo:
@@ -251,17 +267,22 @@ with gr.Blocks(
         with gr.Column(scale=4, min_width=300):
             chatbot = gr.Chatbot(label="💬 對話紀錄", type="messages", height=500)
 
-            # ✅ 輸入框與送出鍵同行排列
+            # ✅ 輸入框與送出鍵同行排列（桌機 8:2、手機 9:1）
             with gr.Row(elem_id="chat-row"):
                 user_input = gr.Textbox(
-                    placeholder="請輸入您的問題...",
+                    placeholder="請輸入您的問題（Enter 送出 / Shift+Enter 換行）...",
                     show_label=False,
                     lines=1,
-                    max_lines=1,
+                    max_lines=3,
                     elem_id="chat-input",
                     scale=9
                 )
-                send_btn = gr.Button("送出", variant="primary", elem_id="send-btn",scale=1 )
+                send_btn = gr.Button(
+                    "送出",
+                    variant="primary",
+                    elem_id="send-btn",
+                    scale=1
+                )
 
             # === 輸入邏輯 ===
             def handle_input(message, history):
@@ -276,8 +297,25 @@ with gr.Blocks(
                 ]
                 return history, gr.update(value="")
 
-            user_input.submit(handle_input, [user_input, chatbot], [chatbot, user_input])
-            send_btn.click(handle_input, [user_input, chatbot], [chatbot, user_input])
+            # ✅ 綁定事件（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])     # Button click
+
+            # ✅ JS 事件處理：Shift+Enter 換行、Enter 送出
+            gr.HTML("""
+            <script>
+            const textarea = document.querySelector('textarea');
+            if (textarea) {
+                textarea.addEventListener('keydown', function(e) {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        const sendBtn = document.querySelector('#send-btn button');
+                        if (sendBtn) sendBtn.click();
+                    }
+                });
+            }
+            </script>
+            """)
 
         # 右側：常見問題 + 清除對話
         with gr.Column(scale=1, min_width=200):