Update app.py

app.py

@@ -4,30 +4,26 @@ import json
 import os
 from datetime import datetime
 
-# API configuration from environment variables
+# API configuration (replace with your actual endpoint and token)
 API_ENDPOINT = os.getenv("API_ENDPOINT", "none")
 API_TOKEN = os.getenv("API_TOKEN")
 
 def get_ai_response(message, history):
-    messages = [{"role": "user", "content": "You are a helpful assistant"}]  
-    for user_msg, ai_msg in history:
-        messages.append({"role": "user", "content": user_msg})
-        messages.append({"role": "assistant", "content": ai_msg})
-    messages.append({"role": "user", "content": message})
-
+    """Fetch AI response from the API using the modern messages format."""
+    messages = [
+        {"role": "system", "content": "You are a helpful assistant."}
+    ] + history + [{"role": "user", "content": message}]
     payload = {
-        "model": "RekaAI/reka-flash-3",
+        "model": "RekaAI/reka-flash-3",  
         "messages": messages,
         "stream": False,
         "max_tokens": 1024,
         "temperature": 0.7
     }
-
     headers = {
         "Authorization": f"Bearer {API_TOKEN}",
         "Content-Type": "application/json"
     }
-
     try:
         response = requests.post(API_ENDPOINT, headers=headers, json=payload)
         response.raise_for_status()
@@ -36,68 +32,56 @@ def get_ai_response(message, history):
         return f"Error: {str(e)}"
 
 def chat_interface(message, history, stored_history):
+    """Handle chat interactions and update history."""
     if history is None:
         history = []
-    
     ai_response = get_ai_response(message, history)
-    history.append((message, ai_response))
-    
+    new_history = history + [
+        {"role": "user", "content": message},
+        {"role": "assistant", "content": ai_response}
+    ]
     timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
     if stored_history is None:
         stored_history = []
-    stored_history.insert(0, {  # Insert at beginning for reverse chronological order
+    stored_history.insert(0, {
         "timestamp": timestamp,
         "user": message,
         "ai": ai_response
     })
-    
-    return history, stored_history
+    return new_history, stored_history
+
+def update_history_display(stored_history):
+    """Generate HTML for history display and save to local storage."""
+    if not stored_history:
+        html = "<p>No history yet</p>"
+    else:
+        html = "<ul id='history_list'>"
+        for item in stored_history[:10]:  # Limit to last 10 conversations
+            html += f"""
+                <li class='history-item'>
+                    <small>{item['timestamp']}</small><br>
+                    <strong>You:</strong> {item['user'][:50]}...<br>
+                    <strong>AI:</strong> {item['ai'][:50]}...
+                </li>
+            """
+        html += "</ul>"
+    # Embed script to save history to local storage
+    html += f"<script>localStorage.setItem('chat_history', JSON.stringify({json.dumps(stored_history)}))</script>"
+    return html
 
-# Modern black and white CSS
+# Modern CSS for a clean UI
 custom_css = """
-body {
-    background-color: #1a1a1a;
-    color: #ffffff;
-    font-family: 'Arial', sans-serif;
-}
-#chatbot {
-    height: 60vh;
-    background-color: #2d2d2d;
-    border: 1px solid #404040;
-    border-radius: 8px;
-}
-#sidebar {
-    background-color: #242424;
-    padding: 10px;
-    border-right: 1px solid #404040;
-    height: 80vh;
-    overflow-y: auto;
-}
-#history_list {
-    list-style: none;
-    padding: 0;
-}
-.history-item {
-    background-color: #333333;
-    margin: 5px 0;
-    padding: 10px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-.history-item:hover {
-    background-color: #404040;
-}
-input, button {
-    background-color: #333333;
-    color: #ffffff;
-    border: 1px solid #404040;
-    border-radius: 5px;
-}
-button:hover {
-    background-color: #404040;
-}
+body { background-color: #1a1a1a; color: #ffffff; font-family: 'Arial', sans-serif; }
+#chatbot { height: 60vh; background-color: #2d2d2d; border: 1px solid #404040; border-radius: 8px; }
+#sidebar { background-color: #242424; padding: 10px; border-right: 1px solid #404040; height: 80vh; overflow-y: auto; }
+#history_list { list-style: none; padding: 0; }
+.history-item { background-color: #333333; margin: 5px 0; padding: 10px; border-radius: 5px; cursor: pointer; }
+.history-item:hover { background-color: #404040; }
+input, button { background-color: #333333; color: #ffffff; border: 1px solid #404040; border-radius: 5px; }
+button:hover { background-color: #404040; }
 """
 
+# Build the Gradio app
 with gr.Blocks(css=custom_css, title="Modern AI Chatbot") as demo:
     with gr.Row():
         # Sidebar for history
@@ -108,35 +92,15 @@ with gr.Blocks(css=custom_css, title="Modern AI Chatbot") as demo:
         
         # Main chat area
         with gr.Column(scale=3):
-            chatbot = gr.Chatbot(elem_id="chatbot")
+            chatbot = gr.Chatbot(elem_id="chatbot", type="messages")  # Fix 1: Set type to 'messages'
             with gr.Row():
-                message = gr.Textbox(
-                    placeholder="Type your message...",
-                    show_label=False,
-                    container=False,
-                    elem_classes="input-box"
-                )
+                message = gr.Textbox(placeholder="Type your message...", show_label=False, container=False)
                 submit_btn = gr.Button("Send", size="sm")
             clear_chat_btn = gr.Button("Clear Chat")
     
-    # States
-    chat_state = gr.State([])
-    history_state = gr.State([])
-
-    def update_history_display(stored_history):
-        if not stored_history:
-            return "<p>No history yet</p>"
-        html = "<ul id='history_list'>"
-        for item in stored_history[:10]:  # Limit to last 10 conversations
-            html += f"""
-                <li class='history-item'>
-                    <small>{item['timestamp']}</small><br>
-                    <strong>You:</strong> {item['user'][:50]}...<br>
-                    <strong>AI:</strong> {item['ai'][:50]}...
-                </li>
-            """
-        html += "</ul>"
-        return html
+    # State management
+    chat_state = gr.State([])    # Current chat history
+    history_state = gr.State([]) # Stored history across sessions
 
     # Event handlers
     submit_btn.click(
@@ -148,7 +112,7 @@ with gr.Blocks(css=custom_css, title="Modern AI Chatbot") as demo:
         history_state,
         history_display
     ).then(
-        lambda: "",
+        lambda: "",  # Clear the input box
         None,
         message
     )
@@ -163,40 +127,20 @@ with gr.Blocks(css=custom_css, title="Modern AI Chatbot") as demo:
         lambda: ([], None),
         None,
         [history_state, history_display]
-    )
-
-    # Initial load
-    demo.load(
-        lambda: ([], []),
-        None,
-        [chat_state, history_state]
     ).then(
         update_history_display,
         history_state,
         history_display
     )
 
-    # Update local storage
-    demo.change(
-        None,
-        history_state,
-        None,
-        _js="""(stored_history) => {
-            localStorage.setItem('chat_history', JSON.stringify(stored_history));
-        }"""
-    ).then(
-        update_history_display,
-        history_state,
-        history_display
-    )
-
-    # Load from local storage
+    # Load initial history from local storage
     demo.load(
-        lambda: json.loads(localStorage.getItem('chat_history') or '[]'),
+        None,
         None,
         history_state,
         _js="""() => {
-            return localStorage.getItem('chat_history') || '[]';
+            const history = localStorage.getItem('chat_history');
+            return history ? JSON.parse(history) : [];
         }"""
     ).then(
         update_history_display,