displayDiv.style.display = 'none';

app.py

@@ -2623,6 +2623,28 @@ HEAD = """
             }
         }
     </script>
+
+    <script>
+        var selectButtons = document.querySelectorAll('.chatbot_select_btn');
+
+        // 为每个按钮添加点击事件监听器
+        selectButtons.forEach(function(button) {
+            button.addEventListener('click', function() {
+                // 获取 #chatbot_select_accordion 下的第一个 button 元素
+                var firstButton = document.querySelector('#chatbot_select_accordion button');
+                var displayDiv = document.querySelector('#chatbot_select_accordion div:nth-child(3)');
+                // 检查这个按钮是否存在
+                if (firstButton) {
+                    // 移除 'open' 类
+                    firstButton.classList.remove('open');
+                }
+                if (displayDiv) {
+                    // display none
+                    displayDiv.style.display = 'none';
+                }
+            });
+        });
+    </script>
 """
 
 with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, secondary_hue=gr.themes.colors.amber, text_size = gr.themes.sizes.text_lg), head=HEAD) as demo:
@@ -2641,7 +2663,7 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
         key_moments_state = gr.State()  # 使用 gr.State 存储 key_moments
         streaming_chat_thread_id_state = gr.State()  # 使用 gr.State 存储 streaming_chat_thread_id
     with gr.Tab("AI小精靈"):
-        with gr.Accordion("選擇 AI 小精靈") as chatbot_select_accordion:
+        with gr.Accordion("選擇 AI 小精靈", elem_id="chatbot_select_accordion") as chatbot_select_accordion:
             with gr.Row():
                 user_avatar = "https://em-content.zobj.net/source/google/263/flushed-face_1f633.png"
                 ai_chatbot_bot_avatar = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
@@ -2683,7 +2705,7 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                     """
                     foxcat_chatbot_name = gr.State("foxcat")
                     gr.Image(value=foxcat_chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
-                    foxcat_chatbot_select_btn = gr.Button("👆選擇【狐狸貓】", visible=True, variant="primary")
+                    foxcat_chatbot_select_btn = gr.Button("👆選擇【狐狸貓】", visible=True, variant="primary", elem_classes="chatbot_select_btn")
                     foxcat_chatbot_description_value = gr.Markdown(value=foxcat_chatbot_description, visible=True)
                 # 梨梨
                 with gr.Column(scale=1, variant="panel"): 
@@ -2698,7 +2720,7 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                     """
                     lili_chatbot_name = gr.State("lili")
                     gr.Image(value=lili_chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
-                    lili_chatbot_select_btn = gr.Button("👆選擇【梨梨】", visible=True, variant="primary")
+                    lili_chatbot_select_btn = gr.Button("👆選擇【梨梨】", visible=True, variant="primary", elem_classes="chatbot_select_btn")
                     lili_chatbot_description_value = gr.Markdown(value=lili_chatbot_description, visible=True)
                 # 麥麥
                 with gr.Column(scale=1, variant="panel"): 
@@ -2713,7 +2735,7 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                     """
                     maimai_chatbot_name = gr.State("maimai")
                     gr.Image(value=maimai_chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
-                    maimai_chatbot_select_btn = gr.Button("👆選擇【麥麥】", visible=True, variant="primary")
+                    maimai_chatbot_select_btn = gr.Button("👆選擇【麥麥】", visible=True, variant="primary", elem_classes="chatbot_select_btn")
                     maimai_chatbot_description_value = gr.Markdown(value=maimai_chatbot_description, visible=True)
                     
         with gr.Row("飛特精靈") as chatbot_open_ai: