with gr.Accordion("選擇 AI 小精靈", open=True):

app.py

@@ -2177,6 +2177,48 @@ 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 小精靈", open=True):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    chatbot_avatar_url = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
+                    chatbot_description = """Hi，我是你的AI學伴【飛特精靈】，我可以陪你一起學習本次的內容，有什麼問題都可以問我喔！
+                    🤔 如果你不知道怎麼發問，可以點擊左下方的問題一、問題二、問題三，我會幫你生成問題！
+                    🗣️ 也可以點擊右下方用語音輸入，我會幫你轉換成文字，厲害吧！
+                    🔠 或是直接鍵盤輸入你的問題，我會盡力回答你的問題喔！
+                    💤 但我還在成長，體力有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！
+                    🦄 如果達到上限，或是遇到精靈很累，請問問其他朋友，像是飛特音速說話的速度比較快，你是否跟得上呢？你也可以和其他精靈互動看看喔！
+                    """
+                    
+                    gr.Image(value=chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
+                    gr.Button("👆選擇【飛特精靈】", elem_id="chatbot_btn", visible=True, variant="primary")
+                    gr.Textbox(label="Chatbot Description", value=chatbot_description, visible=True)
+                with gr.Column(scale=1):
+                    streaming_chatbot_avatar_url = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
+                    streaming_chatbot_description = """Hi，我是你的AI學伴【飛特精靈】，我可以陪你一起學習本次的內容，有什麼問題都可以問我喔！
+                    🤔 如果你不知道怎麼發問，可以點擊左下方的問題一、問題二、問題三，我會幫你生成問題！
+                    🗣️ 也可以點擊右下方用語音輸入，我會幫你轉換成文字，厲害吧！
+                    🔠 或是直接鍵盤輸入你的問題，我會盡力回答你的問題喔！
+                    💤 但我還在成長，體力有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！
+                    🦄 如果達到上限，或是遇到精靈很累，請問問其他朋友，像是飛特音速說話的速度比較快，你是否跟得上呢？你也可以和其他精靈互動看看喔！
+                    """
+                    gr.Image(value=streaming_chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
+                    gr.Button("👆選擇【飛特音速】", elem_id="streaming_chatbot_btn", visible=True, variant="primary")
+                    gr.Textbox(label="Chatbot Description", value=streaming_chatbot_description, visible=True)
+                with gr.Column(scale=1):
+                    jutor_chatbot_avatar_url = "https://junyitopicimg.s3.amazonaws.com/s4byy--icon.jpe?v=20200513013523726"
+                    jutor_chatbot_description = """Hi，我是你的AI學伴【飛特精靈】，我可以陪你一起學習本次的內容，有什麼問題都可以問我喔！
+                    🤔 如果你不知道怎麼發問，可以點擊左下方的問題一、問題二、問題三，我會幫你生成問題！
+                    🗣️ 也可以點擊右下方用語音輸入，我會幫你轉換成文字，厲害吧！
+                    🔠 或是直接鍵盤輸入你的問題，我會盡力回答你的問題喔！
+                    💤 但我還在成長，體力有限，每一次學習只能回答十個問題，請讓我休息一下再問問題喔！
+                    🦄 如果達到上限，或是遇到精靈很累，請問問其他朋友，像是飛特音速說話的速度比較快，你是否跟得上呢？你也可以和其他精靈互動看看喔！
+                    """
+                    gr.Image(value=jutor_chatbot_avatar_url, height=100, width=100, show_label=False, show_download_button=False)
+                    gr.Button("👆選擇【梨梨】", elem_id="jutor_chatbot_btn", visible=True, variant="primary")
+                    gr.Textbox(label="Chatbot Description", value=jutor_chatbot_description, visible=True)
+                    
+
+
         with gr.Row():
             with gr.Tab("飛特精靈"):
                 user_avatar = "https://em-content.zobj.net/source/google/263/flushed-face_1f633.png"
@@ -2223,8 +2265,7 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
                     clear_btn="🗑️ 清除全部",
                     stop_btn=None,
                     description=streaming_chat_greeting
-                )
-            
+                )        
             with gr.Tab("其他精靈"):
                 ai_chatbot_greeting = [[
                     None,