Replace HTML onclick with native Gradio buttons

- Removed problematic JavaScript onclick handlers
- Used native Gradio Button components instead of HTML buttons
- Added proper click handlers for question buttons
- Fixed JavaScript syntax errors
- Questions now populate input field using Gradio's event system

app.py

@@ -770,30 +770,25 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, js=question_js) as demo:
         
         # Right side - Question carousel
         with gr.Column(scale=1):
-            carousel_html = """
+            gr.HTML("""
             <div class="question-carousel">
                 <div class="carousel-title">💡 Quick Questions</div>
-            """
+            </div>
+            """)
             
+            # Create buttons for quick questions
+            question_buttons = []
             for category, questions in QUESTION_CATEGORIES.items():
-                carousel_html += f"""
-                <div class="carousel-card">
-                    <div class="carousel-card-title">{category}</div>
-                """
-                for i, question in enumerate(questions):
-                    # Escape quotes in the question for JavaScript
-                    escaped_question = question.replace("'", "\\'")
-                    carousel_html += f"""
-                    <button class="question-button" type="button" 
-                            onclick="const textarea = document.querySelector('textarea'); if (textarea) {{ textarea.value = '{escaped_question}'; textarea.dispatchEvent(new Event('input', {{bubbles: true}})); }}">
-                        {question}
-                    </button>
-                    """
-                carousel_html += "</div>"
-            
-            carousel_html += "</div>"
-            
-            gr.HTML(carousel_html)
+                with gr.Group():
+                    gr.HTML(f'<div class="carousel-card"><div class="carousel-card-title">{category}</div></div>')
+                    for question in questions:
+                        btn = gr.Button(
+                            question,
+                            variant="secondary",
+                            size="sm",
+                            elem_classes="question-button"
+                        )
+                        question_buttons.append((btn, question))
     
     # Advanced settings in collapsible section
     with gr.Accordion("⚙️ Advanced Settings", open=False, elem_classes="advanced-settings"):
@@ -930,6 +925,15 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, js=question_js) as demo:
         [chatbot, msg],
         queue=False
     )
+    
+    # Connect question button click handlers
+    for btn, question_text in question_buttons:
+        btn.click(
+            lambda q=question_text: q,
+            None,
+            msg,
+            queue=False
+        )
 
 # Launch configuration
 if __name__ == "__main__":