updated ui with theme toggle

chatbot-gradio.py

@@ -290,6 +290,17 @@ minimal_css = """
     z-index: 10001;
 }
 
+#theme-toggle-btn {
+    position: fixed !important;
+    top: 20px;
+    right: 20px;
+    z-index: 10002;
+    border-radius: 50% !important;
+    width: 50px !important;
+    height: 50px !important;
+    min-width: 50px !important;
+}
+
 #chatbot-panel {
     position: fixed;
     bottom: 5vh;  
@@ -337,9 +348,14 @@ minimal_css = """
         bottom: 0;
     }
 
-"""
-panel_visible = False
+    #theme-toggle-btn {
+        top: 15px;
+        right: 15px;
+        width: 45px !important;
+        height: 45px !important;
+    }
 
+"""
 def format_faq_question(question):
     """Format FAQ questions with proper capitalization and punctuation"""
     # Remove extra whitespace
@@ -387,7 +403,6 @@ async def get_chatbot_examples():
         examples = []
         for faq in faqs:
             faq = format_faq_question(faq)
-            print(faq)
             examples.append({
                 "text": faq,
                 "display_text": faq
@@ -398,7 +413,6 @@ async def get_chatbot_examples():
         logger.error(f"Failed to load FAQ examples: {str(e)}")
         return []
     
-    
 def get_examples_sync():
     try:
         loop = asyncio.get_event_loop()
@@ -425,6 +439,14 @@ with gr.Blocks(theme=custom_theme, css=minimal_css) as demo:
         variant="primary",
         size="sm"
     )
+    
+    theme_toggle = gr.Button(
+                "🌙",
+                elem_id="theme-toggle-btn",
+                variant="secondary",
+                scale=0,
+                min_width=50
+    )
 
     # Chat panel
     chat_panel = gr.Column(visible=panel_visible, elem_id="chatbot-panel")
@@ -447,7 +469,7 @@ with gr.Blocks(theme=custom_theme, css=minimal_css) as demo:
                 Lofty the TAL Bot
             </div>
         """)
-        
+
         # Chatbot with theme styling
         chatbot = gr.Chatbot(
             type="messages",
@@ -471,6 +493,65 @@ with gr.Blocks(theme=custom_theme, css=minimal_css) as demo:
                 variant="primary",
                 scale=1
             )
+    def toggle_theme():
+        # This uses Gradio's built-in JavaScript functionality
+        return gr.update(), gr.update()
+
+    theme_toggle.click(
+        fn=None,
+        js="""
+        () => {
+            // Toggle dark mode using Gradio's built-in functionality
+            const isDark = document.body.classList.contains('dark');
+            if (isDark) {
+                document.body.classList.remove('dark');
+                // Update button text
+                const buttons = document.querySelectorAll('button');
+                buttons.forEach(btn => {
+                    if (btn.textContent.trim() === '☀️') {
+                        btn.textContent = '🌙';
+                    }
+                });
+                localStorage.setItem('gradio-theme', 'light');
+            } else {
+                document.body.classList.add('dark');
+                // Update button text
+                const buttons = document.querySelectorAll('button');
+                buttons.forEach(btn => {
+                    if (btn.textContent.trim() === '🌙') {
+                        btn.textContent = '☀️';
+                    }
+                });
+                localStorage.setItem('gradio-theme', 'dark');
+            }
+        }
+        """
+    )
+
+    # Initialize theme on load
+    demo.load(
+        fn=None,
+        js="""
+        () => {
+            // Check saved theme preference
+            const savedTheme = localStorage.getItem('gradio-theme');
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            
+            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+                document.body.classList.add('dark');
+                // Update button text
+                setTimeout(() => {
+                    const buttons = document.querySelectorAll('button');
+                    buttons.forEach(btn => {
+                        if (btn.textContent.trim() === '🌙') {
+                            btn.textContent = '☀️';
+                        }
+                    });
+                }, 100);
+            }
+        }
+        """
+    )
 
     def handle_example_select(evt: gr.SelectData):
         """Handle when user clicks on an example"""