import gradio as gr
from chatbot import generate_answer

# Function to display chatbot answer
def main():
    # Define custom CSS for styling the interface
    css = """
    .chatbox-container {
        background-color: #f0f0f0;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 600px;
        margin: auto;
    }
    .chatbox-container h1 {
        color: #4CAF50;
        font-size: 2rem;
        text-align: center;
        font-family: 'Arial', sans-serif;
    }
    .chatbox-container .output-box {
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        font-size: 1.1rem;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    }
    .gradio-container {
        background-color: #fafafa;
    }
    .gradio-row {
        margin-bottom: 20px;
    }
    """
    
    # Define Gradio interface with a more structured layout
    with gr.Blocks(css=css) as demo:
        with gr.Column(elem_id="chatbox-container"):
            gr.Markdown("<h1>General Knowledge & Current Affairs Chatbot</h1>")
            chatbot = gr.Chatbot(label="Ask Me Anything", type="messages")
            textbox = gr.Textbox(label="Type your question")
            submit_button = gr.Button("Ask")
            
            submit_button.click(generate_answer, inputs=textbox, outputs=chatbot)

    demo.launch()

if __name__ == "__main__":
    main()