Create app.py

app.py

@@ -0,0 +1,44 @@
+import gradio as gr
+
+# === Simple echo bot logic ===
+def chat_response(history, message):
+    response = f"You said: {message}"
+    history = history + [(message, response)]
+    return history, ""
+
+# === HTML + JS to inject Quill ===
+quill_html = """
+<div id="editor-container" style="height: 150px; border: 1px solid #ccc;"></div>
+<button onclick="submitQuill()" style="margin-top:10px;">Send</button>
+
+<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
+<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+
+<script>
+  let quill = new Quill('#editor-container', {
+    theme: 'snow'
+  });
+
+  function submitQuill() {
+    const text = quill.root.innerHTML;
+    document.querySelector('textarea[data-testid="quill_input"]').value = text;
+    document.querySelector('button[data-testid="quill_hidden_submit"]').click();
+  }
+</script>
+"""
+
+# === Gradio Interface ===
+with gr.Blocks() as demo:
+    chatbot = gr.Chatbot()
+    with gr.Row():
+        gr.HTML(quill_html)
+    # Hidden components to pass data from JS
+    msg = gr.Textbox(visible=False, elem_id="quill_input")
+    submit_btn = gr.Button("Submit Hidden", visible=False, elem_id="quill_hidden_submit")
+    state = gr.State([])
+
+    submit_btn.click(chat_response, inputs=[state, msg], outputs=[chatbot, msg], show_progress=False).then(
+        lambda h: h, inputs=chatbot, outputs=state
+    )
+
+demo.launch(share=True, debug=True)