Update app.py

app.py

@@ -120,15 +120,14 @@ def format_response_with_thinking(response):
 
 def chat_submit(message, history, conversation_state, model_name, max_length, temperature):
     """Process a new message and update the chat history"""
-    if not message.strip():
+    if not message or not message.strip():
         return "", history, conversation_state
     
+    # Debug print to check function execution
+    print(f"Processing message in chat_submit: {message}")
+    
     model_id = MODELS.get(model_name, MODELS["Athena-R3X 4B"])
     try:
-        # Print debug info to help diagnose issues
-        print(f"Processing message: {message}")
-        print(f"Selected model: {model_name} ({model_id})")
-        
         response, load_time, generation_time = generate_response(
             model_id, conversation_state, message, max_length, temperature
         )
@@ -225,8 +224,9 @@ css = """
 }
 """
 
-# Add JavaScript to make the thinking buttons work
+# Add JavaScript to make the thinking buttons work and fix enter key issues
 js = """
+// Function to handle thinking toggle buttons
 function setupThinkingToggle() {
     document.querySelectorAll('.thinking-toggle').forEach(button => {
         if (!button.hasEventListener) {
@@ -252,9 +252,45 @@ const observer = new MutationObserver(function(mutations) {
     setupThinkingToggle();
 });
 
-// Start observing the document body for changes
-document.addEventListener('DOMContentLoaded', () => {
+// Function to ensure the textbox and submit button work correctly
+function fixChatInputs() {
+    const textbox = document.querySelector('textarea[data-testid="textbox"]');
+    const submitBtn = document.querySelector('button[data-testid="send-btn"]');
+    
+    if (textbox && !textbox.hasEnterListener) {
+        console.log("Setting up enter key handler");
+        textbox.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                if (textbox.value.trim() !== '') {
+                    submitBtn.click();
+                }
+            }
+        });
+        textbox.hasEnterListener = true;
+    }
+    
+    if (submitBtn && !submitBtn.hasClickFix) {
+        console.log("Enhancing submit button");
+        submitBtn.addEventListener('click', function() {
+            console.log("Submit button clicked");
+        });
+        submitBtn.hasClickFix = true;
+    }
+}
+
+// Function to run all UI fixes
+function setupUI() {
     setupThinkingToggle();
+    fixChatInputs();
+}
+
+// Initial setup
+document.addEventListener('DOMContentLoaded', () => {
+    console.log("DOM loaded, setting up UI");
+    setTimeout(setupUI, 1000);
+    
+    // Set up observer after a delay
     setTimeout(() => {
         const chatbot = document.querySelector('.chatbot');
         if (chatbot) {
@@ -270,6 +306,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 subtree: true 
             });
         }
+        
+        // Run UI fixes periodically
+        setInterval(setupUI, 2000);
     }, 1000);
 });
 """
@@ -286,8 +325,22 @@ with gr.Blocks(title="Athena Playground Chat", css=css, theme=theme, js=js) as d
     chatbot = gr.Chatbot(height=500, label="Athena", render_markdown=True, elem_classes=["chatbot"])
     
     with gr.Row():
-        user_input = gr.Textbox(label="Your message", scale=8, autofocus=True, placeholder="Type your message here...")
-        send_btn = gr.Button(value="Send", scale=1, variant="primary")
+        user_input = gr.Textbox(
+            label="Your message", 
+            scale=8, 
+            autofocus=True,
+            placeholder="Type your message here...",
+            elem_id="chat-input",
+            lines=2,
+            max_lines=10,
+        )
+        send_btn = gr.Button(
+            value="Send", 
+            scale=1, 
+            variant="primary",
+            elem_id="send-btn",
+            min_width=100
+        )
 
     # Clear button for resetting the conversation
     clear_btn = gr.Button("Clear Conversation")
@@ -318,20 +371,26 @@ with gr.Blocks(title="Athena Playground Chat", css=css, theme=theme, js=js) as d
     
     # Connect the interface components - note the specific ordering
     user_input.submit(
-        chat_submit,
+        fn=chat_submit,
         inputs=[user_input, chatbot, conversation_state, model_choice, max_length, temperature],
-        outputs=[user_input, chatbot, conversation_state]
+        outputs=[user_input, chatbot, conversation_state],
+        api_name="submit_message"
     )
     
     # Make sure send button uses the exact same function with the same parameter ordering
     send_btn.click(
-        chat_submit,
+        fn=chat_submit,
         inputs=[user_input, chatbot, conversation_state, model_choice, max_length, temperature],
-        outputs=[user_input, chatbot, conversation_state]
+        outputs=[user_input, chatbot, conversation_state],
+        api_name="send_message"
     )
     
     # Connect clear button
-    clear_btn.click(clear_conversation, outputs=[chatbot, conversation_state])
+    clear_btn.click(
+        fn=clear_conversation, 
+        outputs=[chatbot, conversation_state],
+        api_name="clear_chat"
+    )
 
     # Add examples if desired
     gr.Examples(
@@ -351,4 +410,5 @@ with gr.Blocks(title="Athena Playground Chat", css=css, theme=theme, js=js) as d
     """)
 
 if __name__ == "__main__":
+    demo.queue()  # Enable queuing for smoother experience
     demo.launch(debug=True)  # Enable debug mode for better error reporting