Update app.py

app.py

@@ -116,6 +116,7 @@ class XylariaChat:
             response_stream = self.get_response(message)
 
             if isinstance(response_stream, str):
+                # Error handling: directly append error message to chat history
                 return "", chat_history + [[message, response_stream]]
 
             full_response = ""
@@ -140,10 +141,21 @@ class XylariaChat:
 
             self.save_chat()  # Save after each interaction
 
-        def load_chat_interface():
-            self.load_chat()
-            return self.conversation_history
-
+        # Function to format and display chat history
+        def format_chat_history():
+            self.load_chat()  # Load the chat history first
+            if not self.conversation_history:
+                return "No chat history found."
+
+            formatted_history = ""
+            for chat in self.conversation_history:
+                if chat["role"] == "user":
+                    formatted_history += f"**You:** {chat['content']}\n\n"
+                elif chat["role"] == "assistant":
+                    formatted_history += f"**Xylaria:** {chat['content']}\n\n"
+
+            return formatted_history
+        
         # Custom CSS for improved colors and styling
         custom_css = """
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@@ -243,27 +255,32 @@ class XylariaChat:
         def forward_prompt(prompt):
             return prompt
 
-        with gr.Blocks(theme='soft', css=custom_css) as demo:
+        # Create the interface
+        with gr.Blocks(css=custom_css) as demo:
+            # State variables to track visibility (for older Gradio versions)
+            chat_visible = gr.Variable(False)  # Use Variable instead of State
+            sidebar_collapsed = gr.Variable(False)  # Use Variable instead of State
+
             with gr.Row():
                 # Sidebar for displaying chat history
-                with gr.Column(elem_id="sidebar", scale=1):
+                with gr.Column(scale=1) as sidebar:
                     # 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"):
+                    with gr.Column(elem_id="sidebar-content") as 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()),
+                            fn=lambda *args: format_chat_history(),  # Use format_chat_history directly
                             inputs=None,
                             outputs=[chat_list]
                         )
 
                 # Main chat interface
-                with gr.Column(elem_id="main-chat", scale=3):
+                with gr.Column(scale=3) as main_chat:
                     # Input row (stays visible)
                     with gr.Row():
                         txt = gr.Textbox(
@@ -280,8 +297,8 @@ class XylariaChat:
                         with gr.Row():
                             for prompt in example_prompts:
                                 gr.Button(prompt).click(
-                                    fn=forward_prompt,
-                                    inputs=gr.State(prompt),
+                                    fn=lambda p=prompt: p,  # Capture prompt in a closure
+                                    inputs=gr.Variable(prompt),  # Pass prompt as Variable
                                     outputs=txt
                                 )
 
@@ -292,60 +309,67 @@ class XylariaChat:
                             height=500,
                             show_copy_button=True,
                             avatar_images=("user.png", "xylaria.png"),  # Replace with your image paths
-                            bubble_full_width=False,
-                            type="messages"
+                            bubble_full_width=False
                         )
 
                         # Clear history and memory buttons
                         clear = gr.Button("Clear Conversation")
                         clear_memory = gr.Button("Clear Memory")
 
-            # Toggle between start and chat pages
-            def toggle_page(choice):
-                return gr.Column.update(visible=choice == "chat"), gr.Column.update(visible=choice == "start")
+            # Toggle between start and chat pages (using visibility)
+            def toggle_page(show_chat, *args):
+                return not show_chat, show_chat  # Invert visibility
 
             # Toggle sidebar visibility
-            def toggle_sidebar():
-                return gr.Column.update(visible=True)
-
+            def toggle_sidebar(collapsed, *args):
+                if collapsed:
+                    # If currently collapsed, expand
+                    return False, "250px", "block"  # Expand, normal width, display content
+                else:
+                    # If currently expanded, collapse
+                    return True, "50px", "none"  # Collapse, narrow width, hide content
+
+            # Collapse button click (handle sidebar toggling)
             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")]
+                fn=toggle_sidebar,
+                inputs=[sidebar_collapsed],
+                outputs=[sidebar_collapsed, sidebar, sidebar_content]
             )
 
             # Submit prompt
-            btn.click(
+            submit_event = btn.click(
                 fn=streaming_response,
                 inputs=[txt, chatbot],
                 outputs=[txt, chatbot]
-            ).then(
-                fn=lambda: toggle_page("chat"),
-                inputs=gr.State("chat"),
-                outputs=[chat_page, start_page]
             )
-            txt.submit(
+            txt_submit_event = txt.submit(
                 fn=streaming_response,
                 inputs=[txt, chatbot],
                 outputs=[txt, chatbot]
-            ).then(
-                fn=lambda: toggle_page("chat"),
-                inputs=gr.State("chat"),
-                outputs=[chat_page, start_page]
+            )
+
+            # Toggle to chat page after sending the first message
+            submit_event.then(
+                fn=toggle_page,
+                inputs=[chat_visible],
+                outputs=[start_page, chat_page]
+            )
+            txt_submit_event.then(
+                fn=toggle_page,
+                inputs=[chat_visible],
+                outputs=[start_page, chat_page]
             )
 
             # Clear conversation
             clear.click(
-                fn=lambda: None,
+                fn=lambda *args: [],  # Clear chatbot by returning an empty list
                 inputs=None,
                 outputs=[chatbot],
                 queue=False
             ).then(
-                fn=lambda: toggle_page("start"),
+                fn=lambda *args: (True, False),  # Show start page, hide chat page
                 inputs=None,
-                outputs=[chat_page, start_page]
+                outputs=[start_page, chat_page]
             )
 
             # Clear memory
@@ -355,9 +379,16 @@ class XylariaChat:
                 outputs=None,
                 queue=False
             ).then(
-                fn=lambda: toggle_page("start"),
-                inputs=gr.State("start"),
-                outputs=[chat_page, start_page]
+                fn=lambda *args: (True, False),  # Show start page, hide chat page
+                inputs=None,
+                outputs=[start_page, chat_page]
+            )
+            
+            # Update chat_visible state when chat_page visibility changes
+            chat_page.change(
+              fn=lambda visible, *args: visible,
+              inputs=[chat_page],
+              outputs=[chat_visible]
             )
 
             # Load on startup