Update app.py

app.py

@@ -182,6 +182,30 @@ class XylariaChat:
             padding: 10px;
             height: 100vh;
             overflow-y: auto;
+            transition: width 0.3s ease; /* Smooth transition for collapse */
+            width: 250px; /* Initial width */
+        }
+
+        #sidebar.collapsed {
+            width: 50px; /* Collapsed width */
+        }
+
+        #sidebar.collapsed #sidebar-content {
+            display: none; /* Hide content when collapsed */
+        }
+
+        #sidebar-content {
+            display: block;
+        }
+
+        #collapse-button {
+            width: 100%;
+            margin-bottom: 10px;
+            background-color: transparent;
+            border: none;
+            cursor: pointer;
+            text-align: left;
+            padding: 5px;
         }
 
         /* Main chat area */
@@ -223,15 +247,20 @@ class XylariaChat:
             with gr.Row():
                 # Sidebar for displaying chat history
                 with gr.Column(elem_id="sidebar", scale=1):
-                    gr.Markdown("### Chat History")
-                    load_button = gr.Button("Load Chat History")
-                    chat_list = gr.Markdown("No chat history found.")
-
-                    load_button.click(
-                        fn=lambda: gr.Markdown.update(value=self.format_chat_history()),
-                        inputs=None,
-                        outputs=[chat_list]
-                    )
+                    # Collapse button
+                    collapse_button = gr.Button("<<", elem_id="collapse-button")
+
+                    # Sidebar content (in a nested column for easier hiding)
+                    with gr.Column(elem_id="sidebar-content"):
+                        gr.Markdown("### Chat History")
+                        load_button = gr.Button("Load Chat History")
+                        chat_list = gr.Markdown("No chat history found.")
+
+                        load_button.click(
+                            fn=lambda: gr.Markdown.update(value=self.format_chat_history()),
+                            inputs=None,
+                            outputs=[chat_list]
+                        )
 
                 # Main chat interface
                 with gr.Column(elem_id="main-chat", scale=3):
@@ -275,6 +304,18 @@ class XylariaChat:
             def toggle_page(choice):
                 return gr.Column.update(visible=choice == "chat"), gr.Column.update(visible=choice == "start")
 
+            # Toggle sidebar visibility
+            def toggle_sidebar():
+                return gr.Column.update(visible=True)
+
+            collapse_button.click(
+                fn=lambda: (gr.Column.update(elem_id="sidebar"),
+                            gr.Column.update(elem_id="sidebar-content")),
+                inputs=None,
+                outputs=[gr.Column(elem_id="sidebar"),
+                         gr.Column(elem_id="sidebar-content")]
+            )
+
             # Submit prompt
             btn.click(
                 fn=streaming_response,