ui change and auto-save conversation history

app.py

@@ -6,27 +6,29 @@ The Interface Skeleton - The code sets up the navigation panel and the multimoda
 """
 
 
-import gradio as gr
-from core_logic import chat_function
-from storage import save_chat, load_history, get_chat_content
-
 import gradio as gr
 from core_logic import chat_function
 from storage import save_chat, load_history, get_chat_content
 
 with gr.Blocks() as demo:
+    # This state keeps track of the filename for the current session
     chat_id_state = gr.State("")
     
     with gr.Row():
+        # --- Sidebar ---
         with gr.Column(scale=1, variant="secondary"):
             gr.Markdown("### 🛠️ Silicon Architect")
             new_btn = gr.Button("➕ New Chat", variant="primary")
+            
+            # The sidebar component
             history_list = gr.Dataset(
                 components=[gr.Textbox(visible=False)], 
                 label="Recent Conversations", 
-                samples=load_history()
+                samples=load_history(),
+                type="values" # Ensures we get the string value when clicked
             )
             
+        # --- Main Chat ---
         with gr.Column(scale=4):
             chatbot = gr.Chatbot(show_label=False, height=700)
             chat_input = gr.MultimodalTextbox(
@@ -35,25 +37,53 @@ with gr.Blocks() as demo:
                 show_label=False
             )
 
-    def bot_response(message, history):
-        # 1. Add User Message
+    # --- LOGIC FUNCTIONS ---
+
+    def bot_response(message, history, chat_id):
         user_content = message["text"]
         history.append({"role": "user", "content": user_content})
-        
-        # 2. Add empty Assistant Message to be filled
         history.append({"role": "assistant", "content": ""})
         
-        # 3. Stream the response
-        # history[:-1] sends everything EXCEPT the empty assistant slot we just made
         for partial_resp in chat_function(message, history[:-1]):
             history[-1]["content"] = partial_resp
             yield history
 
-    # Event Handlers
-    chat_input.submit(bot_response, [chat_input, chatbot], [chatbot]).then(
-        lambda h: save_chat(None, h), [chatbot], None
+    def handle_save(history, chat_id):
+        # Saves the chat and returns the updated list for the sidebar
+        new_id = save_chat(chat_id, history)
+        return new_id, load_history()
+
+    def load_past_chat(selected_list):
+        # selected_list comes as [ 'chat_id' ]
+        chat_id = selected_list[0]
+        content = get_chat_content(chat_id)
+        return content, chat_id
+
+    # --- EVENT HANDLERS ---
+
+    # 1. Submit Chat -> Stream Response -> Save -> Refresh Sidebar
+    chat_input.submit(
+        bot_response, 
+        [chat_input, chatbot, chat_id_state], 
+        [chatbot]
+    ).then(
+        handle_save, 
+        [chatbot, chat_id_state], 
+        [chat_id_state, history_list]
     )
     
-    new_btn.click(lambda: ([], ""), None, [chatbot, chat_id_state])
+    # 2. Click Sidebar Item -> Load Content
+    history_list.click(
+        load_past_chat, 
+        [history_list], 
+        [chatbot, chat_id_state]
+    )
+
+    # 3. New Chat Button
+    new_btn.click(
+        lambda: ([], "", load_history()), 
+        None, 
+        [chatbot, chat_id_state, history_list]
+    )
 
 demo.launch(theme=gr.themes.Soft(), css="styles.css")

app_earlier.py

@@ -0,0 +1,55 @@
+
+# ./app.py
+
+"""
+The Interface Skeleton - The code sets up the navigation panel and the multimodal chat interface
+"""
+
+
+import gradio as gr
+from core_logic import chat_function
+from storage import save_chat, load_history, get_chat_content
+
+with gr.Blocks() as demo:
+    chat_id_state = gr.State("")
+    
+    with gr.Row():
+        with gr.Column(scale=1, variant="secondary"):
+            gr.Markdown("### 🛠️ Silicon Architect")
+            new_btn = gr.Button("➕ New Chat", variant="primary")
+            history_list = gr.Dataset(
+                components=[gr.Textbox(visible=False)], 
+                label="Recent Conversations", 
+                samples=load_history()
+            )
+            
+        with gr.Column(scale=4):
+            chatbot = gr.Chatbot(show_label=False, height=700)
+            chat_input = gr.MultimodalTextbox(
+                interactive=True,
+                placeholder="Discuss architecture or upload code...",
+                show_label=False
+            )
+
+    def bot_response(message, history):
+        # 1. Add User Message
+        user_content = message["text"]
+        history.append({"role": "user", "content": user_content})
+        
+        # 2. Add empty Assistant Message to be filled
+        history.append({"role": "assistant", "content": ""})
+        
+        # 3. Stream the response
+        # history[:-1] sends everything EXCEPT the empty assistant slot we just made
+        for partial_resp in chat_function(message, history[:-1]):
+            history[-1]["content"] = partial_resp
+            yield history
+
+    # Event Handlers
+    chat_input.submit(bot_response, [chat_input, chatbot], [chatbot]).then(
+        lambda h: save_chat(None, h), [chatbot], None
+    )
+    
+    new_btn.click(lambda: ([], ""), None, [chatbot, chat_id_state])
+
+demo.launch(theme=gr.themes.Soft(), css="styles.css")

storage.py

@@ -51,14 +51,10 @@ def load_history():
     try:
         # We pull the list from the Hub so the sidebar reflects all saved sessions
         files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset")
-        chat_files = [
-            f.split("/")[-1].replace(".json", "") 
-            for f in files if f.startswith("chats/")
-        ]
-        # Return as list of lists for Gradio Dataset component
+        chat_files = [f.split("/")[-1].replace(".json", "") for f in files if f.startswith("chats/")]
+        # IMPORTANT: Sorted by newest first; return as list of lists for Gradio Dataset component
         return [[f] for f in sorted(chat_files, reverse=True)]
-    except Exception as e:
-        print(f"Error loading history from Hub: {e}")
+    except:
         return []
 
 def get_chat_content(chat_id):

styles.css

@@ -21,4 +21,14 @@
 button.primary {
     background: #007bff !important;
     border: none !important;
+}
+
+/* Making sidebar items look professional and clickable */
+.gr-dataset {
+    cursor: pointer;
+    border: none !important;
+}
+
+.gr-dataset:hover {
+    background-color: #e8eaed !important;
 }