Update app.py

app.py

@@ -33,13 +33,20 @@ def get_ai_response(message, history):
 
 def chat_interface(message, history, stored_history):
     """Handle chat interactions and update history."""
-    if history is None:
+    if not history:
         history = []
-    ai_response = get_ai_response(message, history)
-    new_history = history + [
-        {"role": "user", "content": message},
-        {"role": "assistant", "content": ai_response}
-    ]
+    
+    # Convert history to the format expected by the API
+    api_history = []
+    for user_msg, ai_msg in history:
+        api_history.append({"role": "user", "content": user_msg})
+        api_history.append({"role": "assistant", "content": ai_msg})
+    
+    ai_response = get_ai_response(message, api_history)
+    
+    # Update history in the format expected by Gradio chatbot
+    history.append((message, ai_response))
+    
     timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
     if stored_history is None:
         stored_history = []
@@ -48,7 +55,7 @@ def chat_interface(message, history, stored_history):
         "user": message,
         "ai": ai_response
     })
-    return new_history, stored_history
+    return history, stored_history
 
 def update_history_display(stored_history):
     """Generate HTML for history display and save to local storage."""
@@ -69,9 +76,10 @@ def update_history_display(stored_history):
     html += f"<script>localStorage.setItem('chat_history', JSON.stringify({json.dumps(stored_history)}))</script>"
     return html
 
-# Function to load history from JavaScript
-def load_history_from_js():
-    return gr.Var(value=[], js="() => { const history = localStorage.getItem('chat_history'); return history ? JSON.parse(history) : []; }")
+def load_history_from_storage():
+    """Function to load history from JavaScript"""
+    # This is a placeholder that will be replaced by the JavaScript function
+    return []
 
 # Modern CSS for a clean UI
 custom_css = """
@@ -96,7 +104,7 @@ with gr.Blocks(css=custom_css, title="Reka Flash 3 Demo") as demo:
         
         # Main chat area
         with gr.Column(scale=3):
-            chatbot = gr.Chatbot(elem_id="chatbot")
+            chatbot = gr.Chatbot(elem_id="chatbot")  # Removed type="messages" which was causing errors
             with gr.Row():
                 message = gr.Textbox(placeholder="Type your message...", show_label=False, container=False)
                 submit_btn = gr.Button("Send", size="sm")
@@ -106,11 +114,23 @@ with gr.Blocks(css=custom_css, title="Reka Flash 3 Demo") as demo:
     chat_state = gr.State([])    # Current chat history
     history_state = gr.State([]) # Stored history across sessions
 
+    # JavaScript for loading history from local storage
+    load_history_js = """
+    function() {
+        const history = localStorage.getItem('chat_history');
+        return history ? JSON.parse(history) : [];
+    }
+    """
+
     # Event handlers
     submit_btn.click(
         chat_interface,
         [message, chat_state, history_state],
-        [chatbot, history_state]
+        [chat_state, history_state]
+    ).then(
+        lambda history: history,
+        chat_state,
+        chatbot
     ).then(
         update_history_display,
         history_state,
@@ -124,34 +144,29 @@ with gr.Blocks(css=custom_css, title="Reka Flash 3 Demo") as demo:
     clear_chat_btn.click(
         lambda: ([], None),
         None,
-        [chatbot, chat_state]
+        [chat_state, chatbot]
     )
 
     clear_history_btn.click(
-        lambda: ([], None),
+        lambda: [],
         None,
-        [history_state, history_display]
+        history_state
     ).then(
         update_history_display,
         history_state,
         history_display
     )
 
-    # Load initial history with JavaScript
-    history_from_js = gr.JSON(visible=False)
-    
+    # Load initial history from local storage using JavaScript
     demo.load(
-        load_history_from_js,
+        fn=load_history_from_storage,
         inputs=None,
-        outputs=history_from_js
-    ).then(
-        lambda x: x,
-        inputs=history_from_js,
-        outputs=history_state
+        outputs=history_state,
+        js=load_history_js
     ).then(
         update_history_display,
-        inputs=history_state,
-        outputs=history_display
+        history_state,
+        history_display
     )
 
 demo.launch()