Update app.py

app.py

@@ -126,6 +126,7 @@ css = """
 body {
     background: var(--background) !important;
     color: var(--text) !important;
+    transition: all 0.3s ease;
 }
 
 .gr-box {
@@ -146,6 +147,7 @@ body {
 #chatbot {
     background: var(--chatbot-bg) !important;
     border-color: var(--border) !important;
+    min-height: 500px;
 }
 
 .gr-textbox input {
@@ -155,18 +157,26 @@ body {
 .dark .gr-markdown {
     color: var(--text) !important;
 }
+
+.settings-panel {
+    border-left: 1px solid var(--border) !important;
+    padding-left: 20px !important;
+}
 """
 
 with gr.Blocks(css=css, title="HROM-V1.5 Chatbot") as demo:
-    current_theme = gr.Variable("light")
+    current_theme = gr.State("light")
     
     with gr.Row():
         with gr.Column(scale=3):
             gr.Markdown("# HROM-V1.5 Chatbot")
             chatbot = gr.Chatbot(height=500, elem_id="chatbot")
-            msg = gr.Textbox(label="Your Message", placeholder="Type your message...", show_label=False)
+            msg = gr.Textbox(label="Your Message", 
+                           placeholder="Type your message...", 
+                           show_label=False,
+                           container=False)
             
-        with gr.Column(scale=1, min_width=300):
+        with gr.Column(scale=1, min_width=300, elem_classes="settings-panel"):
             with gr.Accordion("⚙️ Settings", open=False):
                 with gr.Row():
                     theme_btn = gr.Button("🌙 Dark Theme", variant="secondary")
@@ -178,27 +188,30 @@ with gr.Blocks(css=css, title="HROM-V1.5 Chatbot") as demo:
                                          value=CONFIG["max_seq_len"] - max_response_length, step=1,
                                          label="Context Window Size")
                 with gr.Row():
-                    clear_btn = gr.Button("Clear Chat History", variant="secondary")
+                    clear_btn = gr.Button("🧹 Clear History", variant="secondary")
 
     token_state = gr.State([])
+    theme_css = gr.HTML("<style></style>")
 
     def toggle_theme(theme):
         new_theme = "dark" if theme == "light" else "light"
         btn_text = "🌞 Light Theme" if new_theme == "light" else "🌙 Dark Theme"
-        return (
-            new_theme,
-            gr.Button.update(value=btn_text),
-            gr.HTML.update(value=f"<style>.dark {{display: {'block' if new_theme == 'dark' else 'none'}}}</style>")
+        css = """
+        <style>
+            body { background: %s !important; color: %s !important; }
+            .dark-mode { display: %s !important; }
+        </style>
+        """ % (
+            "var(--background)", 
+            "var(--text)",
+            "block" if new_theme == "dark" else "none"
         )
+        return new_theme, btn_text, css
 
     theme_btn.click(
         toggle_theme,
         current_theme,
-        [current_theme, theme_btn],
-        _js="""(theme) => {
-            document.body.classList.toggle('dark');
-            return document.body.classList.contains('dark') ? 'dark' : 'light';
-        }"""
+        [current_theme, theme_btn, theme_css]
     )
     
     msg.submit(