# import gradio as gr

# def chat_response(message, history):
#     # This is a simple echo bot for demonstration
#     return f"Bot: You said: {message}"

# with gr.Blocks() as demo:
#     gr.Markdown("# Simple Chatbot with Feedback Popup")
#     gr.Markdown("This is a simple echo chatbot. Type a message and the bot will respond. You can also provide feedback.")
    
#     chatbot = gr.Chatbot()
#     msg = gr.Textbox()
#     clear = gr.Button("Clear")
#     feedback_btn = gr.Button("Provide Feedback", elem_id="feedback-btn")

#     with gr.Column(visible=True, elem_id="feedback-form") as feedback_form:
#         feedback_box = gr.Textbox(placeholder="Enter your feedback here...", label="Feedback")
#         feedback_submit = gr.Button("Submit Feedback", elem_id="feedback-submit")
#         response_box = gr.Textbox(label="Response", interactive=False)

#     def user(user_message, history):
#         return "", history + [[user_message, None]]

#     def bot(history):
#         bot_message = chat_response(history[-1][0], history)
#         history[-1][1] = bot_message
#         return history

#     msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
#         bot, chatbot, chatbot
#     )
#     clear.click(lambda: None, None, chatbot, queue=False)
#     feedback_btn.click(None, None, None, _js="showPopup")
#     feedback_submit.click(submit_feedback, inputs=feedback_box, outputs=response_box).then(
#         None, None, None, _js="hidePopup"
#     )

# demo.launch(server_port=7865, server_name="0.0.0.0", share=True,)




import gradio as gr

def chat_response(message, history):
    # This is a simple echo bot for demonstration
    return f"Bot: You said: {message}"

def submit_feedback(feedback):
    # Here you would typically save or process the feedback
    print(f"Received feedback: {feedback}")
    return "Thank you for your feedback!"

# Custom JavaScript for creating and managing the popup
custom_js = """
function showPopup() {
    document.getElementById('feedback-popup').style.display = 'block';
}

function hidePopup() {
    document.getElementById('feedback-popup').style.display = 'none';
}

function setupPopup() {
    var popup = document.createElement('div');
    popup.id = 'feedback-popup';
    popup.style.display = 'none';
    popup.style.position = 'fixed';
    popup.style.zIndex = '1000';
    popup.style.left = '0';
    popup.style.top = '0';
    popup.style.width = '100%';
    popup.style.height = '100%';
    popup.style.overflow = 'auto';
    popup.style.backgroundColor = 'rgba(0,0,0,0.4)';
    
    var content = document.createElement('div');
    content.style.backgroundColor = '#fefefe';
    content.style.margin = '15% auto';
    content.style.padding = '20px';
    content.style.border = '1px solid #888';
    content.style.width = '80%';
    content.style.maxWidth = '600px';
    
    popup.appendChild(content);
    document.body.appendChild(popup);
    
    // Move the feedback form into the popup
    var feedbackForm = document.getElementById('feedback-form');
    content.appendChild(feedbackForm);
    
    // Close popup when clicking outside
    popup.onclick = function(event) {
        if (event.target == popup) {
            hidePopup();
        }
    }
}

// Run setup when the page loads
if (document.readyState === 'complete') {
    setupPopup();
} else {
    window.addEventListener('load', setupPopup);
}
"""

with gr.Blocks(js=custom_js) as demo:
    gr.Markdown("# Simple Chatbot with Feedback Popup")
    gr.Markdown("This is a simple echo chatbot. Type a message and the bot will respond. You can also provide feedback.")
    
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.Button("Clear")
    feedback_btn = gr.Button("Provide Feedback", elem_id="feedback-btn")

    with gr.Column(visible=True, elem_id="feedback-form") as feedback_form:
        feedback_box = gr.Textbox(placeholder="Enter your feedback here...", label="Feedback")
        feedback_submit = gr.Button("Submit Feedback", elem_id="feedback-submit")
        response_box = gr.Textbox(label="Response", interactive=False)

    def user(user_message, history):
        return "", history + [[user_message, None]]

    def bot(history):
        bot_message = chat_response(history[-1][0], history)
        history[-1][1] = bot_message
        return history

    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
        bot, chatbot, chatbot
    )
    clear.click(lambda: None, None, chatbot, queue=False)
    feedback_btn.click(None, None, None, js="showPopup")
    feedback_submit.click(submit_feedback, inputs=feedback_box, outputs=response_box).then(
        None, None, None, js="hidePopup"
    )

demo.launch(server_port=7860, server_name="0.0.0.0", share=True, control_port=7861)