Update app.py

app.py

@@ -194,7 +194,7 @@ def process_example(example: str) -> tuple:
 
 def main():
     """Main function to set up and launch the Gradio interface"""
-    with gr.Blocks(css=CSS) as demo:  # Removed invalid theme
+    with gr.Blocks(css=CSS, theme="JohnSmith9982/small_and_pretty'") as demo:
         gr.HTML(TITLE)
         gr.DuplicateButton(
             value="",
@@ -211,19 +211,17 @@ def main():
                     elem_classes=["chat-area"],
                 )
                 
-                # Removed Form wrapper and simplified structure
                 message = gr.TextArea(
                     placeholder=PLACEHOLDER,
                     label="Your message",
                     lines=3,
-                    elem_classes=["message-input"],
-                    elem_id="message-input"  # Added elem_id for JavaScript
+                    elem_classes=["message-input"]
                 )
                 
                 with gr.Row():
-                    submit = gr.Button("Send", elem_id="submit-btn")
+                    submit = gr.Button("Send")
                     clear = gr.Button("Clear")
-
+                
                 with gr.Accordion("⚙️ Advanced Settings", open=False):
                     system_prompt = gr.TextArea(
                         value=DEFAULT_SYSTEM_PROMPT,
@@ -265,7 +263,7 @@ def main():
                         value=1.2,
                         label="Repetition Penalty",
                     )
-
+                
                 examples = gr.Examples(
                     examples=create_examples(),
                     inputs=[message],
@@ -273,43 +271,30 @@ def main():
                     fn=process_example,
                     cache_examples=False,
                 )
-
-        # Updated JavaScript handler
+        
+        # JavaScript to handle Enter key submission and RTL direction
         js_handler = """
-        function setupKeyboardHandler() {
-            const textArea = document.getElementById('message-input').querySelector('textarea');
-            const submitBtn = document.getElementById('submit-btn');
-            
-            if (textArea && submitBtn) {
-                textArea.addEventListener('keydown', function(e) {
-                    // Check for Arabic characters
-                    const containsArabic = /[\u0600-\u06FF]/.test(this.value);
-                    
-                    // Apply RTL class for Arabic text
-                    if (containsArabic) {
-                        this.classList.add('arabic-input');
-                    } else {
-                        this.classList.remove('arabic-input');
-                    }
-
-                    // Submit on Enter without Shift
-                    if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault();
-                        submitBtn.click();
-                    }
-                });
+        function handleKeyPress(textArea, submitButton) {
+            textArea.addEventListener('keydown', function(e) {
+                // Check for Arabic characters
+                const containsArabic = /[\u0600-\u06FF]/.test(textArea.value);
+                
+                // Apply RTL class for Arabic text
+                if (containsArabic) {
+                    textArea.classList.add('arabic-input');
+                } else {
+                    textArea.classList.remove('arabic-input');
+                }
 
-                // Focus the textarea on load
-                textArea.focus();
-            }
+                // Handle Enter key for submission (without Shift)
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault(); // Prevent default new line
+                    submitButton.click(); // Trigger submit button click
+                }
+            });
         }
-
-        // Run setup when the page loads
-        document.addEventListener('DOMContentLoaded', setupKeyboardHandler);
-        // Also run setup after any Gradio refreshes
-        document.addEventListener('change', setupKeyboardHandler);
         """
-
+        
         # Set up event handlers
         submit_click = submit.click(
             chat_response,
@@ -331,8 +316,8 @@ def main():
         # Clear input after submission
         submit_click.then(lambda: "", outputs=message)
         
-        # Add JavaScript handlers
-        demo.load(None, _js=js_handler)
+        # Add JavaScript to handle Enter key and RTL
+        demo.load(None, inputs=[message, submit], js=js_handler)
         
         clear.click(
             lambda: ([], ""),