Update app.py

app.py

@@ -1,9 +1,8 @@
-import gradio as gr
+\import gradio as gr
 import requests
 import re
 import os
 
-
 API_ENDPOINT = os.getenv("API_ENDPOINT", "none")
 API_TOKEN = os.getenv("API_TOKEN")
 
@@ -11,7 +10,18 @@ def get_ai_response(message, history):
     """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}]
+    ]
+    # Build the API history using all prior complete pairs
+    for user_msg, ai_msg in history:
+        # Only include completed exchanges (skip "pending")
+        if ai_msg != "pending":
+            clean_ai_msg = re.sub(r'<details>.*?</details>', '', ai_msg, flags=re.DOTALL)
+            clean_ai_msg = re.sub(r'<[^>]*>', '', clean_ai_msg)
+            messages.append({"role": "user", "content": user_msg})
+            messages.append({"role": "assistant", "content": clean_ai_msg})
+    # Append the new user message for which we want a response
+    messages.append({"role": "user", "content": message})
+    
     payload = {
         "model": "RekaAI/reka-flash-3",  
         "messages": messages,
@@ -27,8 +37,6 @@ def get_ai_response(message, history):
         response = requests.post(API_ENDPOINT, headers=headers, json=payload)
         response.raise_for_status()
         raw_response = response.json()["choices"][0]["message"]["content"]
-        
-        # Convert reasoning tags to collapsible HTML
         html_response = convert_reasoning_to_collapsible(raw_response)
         return html_response
     except Exception as e:
@@ -36,43 +44,31 @@ def get_ai_response(message, history):
 
 def convert_reasoning_to_collapsible(text):
     """Convert reasoning tags to collapsible HTML sections."""
-    # Find all reasoning sections
     reasoning_pattern = re.compile(r'<reasoning>(.*?)</reasoning>', re.DOTALL)
-    
-    # Function to replace each reasoning section with collapsible HTML
     def replace_with_collapsible(match):
         reasoning_content = match.group(1).strip()
         return f'<details><summary><strong>See reasoning</strong></summary><div class="reasoning-content">{reasoning_content}</div></details>'
-    
-    # Replace reasoning tags with collapsible sections
     html_response = reasoning_pattern.sub(replace_with_collapsible, text)
-    
-    # Remove <sep> tags
     html_response = re.sub(r'<sep>.*?</sep>', '', html_response, flags=re.DOTALL)
     html_response = html_response.replace('<sep>', '').replace('</sep>', '')
-    
     return html_response
 
-def chat_interface(message, history):
-    """Handle chat interactions and update history."""
-    if not history:
+def add_user_message(message, history):
+    """Immediately add the user's message with a 'pending' assistant reply."""
+    if history is None:
         history = []
-    
-    # Convert history to the format expected by the API
-    api_history = []
-    for user_msg, ai_msg in history:
-        # Remove HTML tags for API history
-        clean_ai_msg = re.sub(r'<details>.*?</details>', '', ai_msg, flags=re.DOTALL)
-        clean_ai_msg = re.sub(r'<[^>]*>', '', clean_ai_msg)
-        
-        api_history.append({"role": "user", "content": user_msg})
-        api_history.append({"role": "assistant", "content": clean_ai_msg})
-    
-    ai_response = get_ai_response(message, api_history)
-    
-    # Update history in the format expected by Gradio chatbot
-    history.append((message, ai_response))
-    
+    history.append((message, "pending"))
+    return history
+
+def generate_response_from_history(history):
+    """Generate the assistant's reply and update the last pending message."""
+    if not history:
+        return history
+    # Get the last user message from history (which is paired with "pending")
+    last_user_message = history[-1][0]
+    # Get the full conversation (ignoring the pending reply)
+    ai_response = get_ai_response(last_user_message, history)
+    history[-1] = (last_user_message, ai_response)
     return history
 
 # Modern CSS for a clean UI
@@ -86,7 +82,6 @@ summary { cursor: pointer; color: #70a9e6; }
 .reasoning-content { padding: 10px; margin-top: 5px; background-color: #404040; border-radius: 5px; }
 """
 
-# Build the Gradio app
 with gr.Blocks(css=custom_css, title="Reka Flash 3") as demo:
     with gr.Column():
         gr.Markdown("## Reka Flash 3")
@@ -94,22 +89,19 @@ with gr.Blocks(css=custom_css, title="Reka Flash 3") as demo:
         chatbot = gr.Chatbot(elem_id="chatbot", render_markdown=False, bubble_full_width=True)
         with gr.Row():
             message = gr.Textbox(placeholder="Type your message...", show_label=False, container=False)
-            submit_btn = gr.Button("Send", size="sm")
+            # Make the button larger by using size "lg"
+            submit_btn = gr.Button("Send", size="lg")
         clear_chat_btn = gr.Button("Clear Chat")
     
-    # State management
     chat_state = gr.State([])    # Current chat history
 
-    # JavaScript for enabling HTML in chatbot
     js = """
     function() {
-        // Add event listener for when new messages are added
         const observer = new MutationObserver(function(mutations) {
             mutations.forEach(function(mutation) {
                 if (mutation.addedNodes.length) {
                     document.querySelectorAll('#chatbot .message:not(.processed)').forEach(msg => {
                         msg.classList.add('processed');
-                        // Replace content with innerHTML to render HTML
                         const content = msg.querySelector('.content');
                         if (content) {
                             content.innerHTML = content.textContent;
@@ -118,54 +110,50 @@ with gr.Blocks(css=custom_css, title="Reka Flash 3") as demo:
                 }
             });
         });
-        
-        // Start observing chatbot for changes
         const chatbot = document.getElementById('chatbot');
         if (chatbot) {
             observer.observe(chatbot, { childList: true, subtree: true });
         }
-
         return [];
     }
     """
 
-    # Event handlers
+    # First, add the user message immediately (with pending), then update it with the generated response.
     submit_btn.click(
-        chat_interface,
+        add_user_message,
         [message, chat_state],
-        [chat_state]
+        [chat_state, chatbot]
     ).then(
-        lambda history: history,
+        generate_response_from_history,
         chat_state,
-        chatbot
+        [chat_state, chatbot]
     ).then(
         lambda: "",  # Clear the input box
         None,
         message
     )
 
-    # Message submit via Enter key
+    # Allow pressing Enter to submit
     message.submit(
-        chat_interface,
+        add_user_message,
         [message, chat_state],
-        [chat_state]
+        [chat_state, chatbot]
     ).then(
-        lambda history: history,
+        generate_response_from_history,
         chat_state,
-        chatbot
+        [chat_state, chatbot]
     ).then(
-        lambda: "",  # Clear the input box
+        lambda: "",
         None,
         message
     )
 
     clear_chat_btn.click(
-        lambda: [],
+        lambda: ([], []),
         None,
         [chat_state, chatbot]
     )
 
-    # Load JavaScript for HTML rendering
     demo.load(
         fn=lambda: None,
         inputs=None,
@@ -173,4 +161,4 @@ with gr.Blocks(css=custom_css, title="Reka Flash 3") as demo:
         js=js
     )
 
-demo.launch()
+demo.launch()