Update app.py

app.py

@@ -95,9 +95,8 @@ class XylariaChat:
             "photosynthesis": "process used by plants to convert light to energy"
         }
 
-        # Initialize chat history file
+        # Initialize chat history file in the client's local storage
         self.chat_history_file = "chat_history.json"
-        self.load_all_chats()
         
 
     def update_internal_state(self, emotion_deltas, cognitive_load_deltas, introspection_delta, engagement_delta):
@@ -571,6 +570,7 @@ class XylariaChat:
             "timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
             "conversation": self.conversation_history
         }
+
         try:
             with open(self.chat_history_file, "r") as f:
                 all_chats = json.load(f)
@@ -601,6 +601,7 @@ class XylariaChat:
             return self.conversation_history
         else:
             raise ValueError("Invalid chat index")
+
             
     def delete_chat(self, chat_index):
         all_chats = self.load_all_chats()
@@ -753,7 +754,7 @@ class XylariaChat:
             self.save_chat()
             all_chats = self.load_all_chats()
             chat_titles = [f"{chat['timestamp']}: {chat['conversation'][0]['content'][:30]}..." if len(chat['conversation']) > 0 and chat['conversation'][0]['content'] else f"{chat['timestamp']}: Empty Chat" for chat in all_chats]
-            yield "", updated_history, None, None, gr.update(choices=chat_titles)
+            yield "", updated_history, None, None, gr.update(choices=chat_titles, visible=True)
 
         def load_selected_chat(chat_index, evt: gr.SelectData):
             if chat_index is not None:
@@ -766,10 +767,15 @@ class XylariaChat:
             if chat_index is not None:
                 all_chats = self.delete_chat(evt.index)
                 chat_titles = [f"{chat['timestamp']}: {chat['conversation'][0]['content'][:30]}..." if len(chat['conversation']) > 0 and chat['conversation'][0]['content'] else f"{chat['timestamp']}: Empty Chat" for chat in all_chats]
-                return gr.update(choices=chat_titles)
+                return gr.update(choices=chat_titles, visible=True)
             else:
                 return gr.update()
 
+        def toggle_sidebar():
+            all_chats = self.load_all_chats()
+            chat_titles = [f"{chat['timestamp']}: {chat['conversation'][0]['content'][:30]}..." if len(chat['conversation']) > 0 and chat['conversation'][0]['content'] else f"{chat['timestamp']}: Empty Chat" for chat in all_chats]
+            return gr.update(visible=True), gr.update(choices=chat_titles, visible=True)
+
         custom_css = """
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         body, .gradio-container {
@@ -848,19 +854,33 @@ class XylariaChat:
             height: 500px;
             overflow-y: auto;
         }
+        .sidebar-open #sidebar, .sidebar-open #main-content {
+            flex: 0 0 20%;
+            transition: flex 0.3s ease;
+        }
+        #sidebar {
+            flex: 0 0 0%;
+            overflow: hidden;
+            transition: flex 0.3s ease;
+        }
+        #main-content {
+            flex: 1;
+            transition: flex 0.3s ease;
+        }
         """
 
         with gr.Blocks(theme='soft', css=custom_css) as demo:
             with gr.Row():
-                with gr.Column(scale=1):
+                with gr.Column(scale=1, elem_id="sidebar"):
+                    toggle_button = gr.Button("Toggle Sidebar")
                     all_chats = self.load_all_chats()
                     chat_titles = [f"{chat['timestamp']}: {chat['conversation'][0]['content'][:30]}..." if len(chat['conversation']) > 0 and chat['conversation'][0]['content'] else f"{chat['timestamp']}: Empty Chat" for chat in all_chats]
 
-                    chat_list = gr.Radio(label="Chat History", choices=chat_titles, type="index", elem_id="chat_list")
+                    chat_list = gr.Radio(label="Chat History", choices=chat_titles, type="index", elem_id="chat_list", visible=False)
                     
                     load_button = gr.Button("Load Selected Chat")
                     delete_button = gr.Button("Delete Selected Chat")
-                with gr.Column(scale=4):
+                with gr.Column(scale=4, elem_id="main-content"):
                     chatbot = gr.Chatbot(
                         label="Xylaria 1.5 Senoa",
                         height=500,
@@ -896,7 +916,21 @@ class XylariaChat:
                     with gr.Row():
                         clear = gr.Button("Clear Conversation")
                         clear_memory = gr.Button("Clear Memory")
+
             
+            toggle_button.click(
+                fn=toggle_sidebar,
+                inputs=None,
+                outputs=[chat_list, chat_list],
+                js="""
+                () => {
+                    const sidebar = document.getElementById('sidebar');
+                    const mainContent = document.getElementById('main-content');
+                    document.body.classList.toggle('sidebar-open');
+                }
+                """
+            )
+
             load_button.click(fn=load_selected_chat, inputs=[chat_list], outputs=[chatbot])
             delete_button.click(fn=delete_selected_chat, inputs=[chat_list], outputs=[chat_list])