import gradio as gr

# Gradio application setup
def create_demo():
    # JavaScript to disable the slider after the upload button is pressed
    javascript = """
    document.querySelector('input[type=file]').addEventListener('change', function() {
        if (this.files.length > 0) {
            document.getElementById('slider1').setAttribute('disabled', true);
        }
    });
    """

    with gr.Blocks(title="RAG Chatbot Q&A", theme="Soft", js=javascript) as demo:
        with gr.Column():
            with gr.Row():
                chat_history = gr.Chatbot(value=[], elem_id='chatbot', height=680)
                show_img = gr.Image(label='Overview', height=680)

        with gr.Row():
            with gr.Column():  # Adjust scale as needed
                slider1 = gr.Slider(minimum=256, maximum=1024, value=256, label="Chunk Size", elem_id='slider1')
        with gr.Row():
            with gr.Column(scale=0.60):
                text_input = gr.Textbox(
                    show_label=False,
                    placeholder="Type here to ask your PDF",
                container=False)
            with gr.Column(scale=0.20):
                submit_button = gr.Button('Send')
            with gr.Column(scale=0.20):
                uploaded_pdf = gr.UploadButton("📁 Upload PDF", file_types=[".pdf"], elem_id='upload_pdf')

    return demo, chat_history, show_img, text_input, submit_button, uploaded_pdf, slider1

if __name__ == '__main__':
    demo, chatbot, show_img, text_input, submit_button, uploaded_pdf, slider1 = create_demo()
    demo.queue()
    demo.launch()