import gradio as gr
from core import submit_query, clear_history

# Define Gradio interface
with gr.Blocks(theme=gr.themes.Soft(), css=".full-height { height: 100%; display: flex; align-items: stretch; min-height: 40px; } .full-height button { height: 100%; padding: 8px 16px; } .providers-row { height: 100%; display: flex; align-items: stretch; min-height: 40px; } .providers-row .checkbox-group { height: 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; }") as demo:
    gr.Markdown("# Multi-Model Chat")
    gr.Markdown("Chat with OpenAI, Anthropic, or Gemini. Select providers and compare responses side by side!")

    with gr.Row(elem_classes="providers-row"):
        providers = gr.CheckboxGroup(choices=["OpenAI", "Anthropic", "Gemini"], label="Select Providers", value=["OpenAI"], elem_classes="checkbox-group")

    with gr.Row(elem_classes="full-height"):
        query = gr.Textbox(
            label="Enter your query", 
            placeholder="e.g., What is the capital of the United States?", 
            scale=4,
            autofocus=True  # This will focus the textbox on load
        )
        submit_button = gr.Button("Submit", scale=1)

    with gr.Row():
        clear_button = gr.Button("Clear History")

    with gr.Row():
        openai_chatbot = gr.Chatbot(label="OpenAI", type="messages", scale=1)
        anthropic_chatbot = gr.Chatbot(label="Anthropic", type="messages", scale=1)
        gemini_chatbot = gr.Chatbot(label="Gemini", type="messages", scale=1)

    chat_history = gr.State([])

    # Handle both button click and Enter key
    query.submit(
        fn=submit_query,
        inputs=[query, providers, chat_history],
        outputs=[query, openai_chatbot, anthropic_chatbot, gemini_chatbot, chat_history]
    )
    
    submit_button.click(
        fn=submit_query,
        inputs=[query, providers, chat_history],
        outputs=[query, openai_chatbot, anthropic_chatbot, gemini_chatbot, chat_history]
    )

    clear_button.click(
        fn=clear_history,
        inputs=[],
        outputs=[openai_chatbot, anthropic_chatbot, gemini_chatbot, chat_history]
    )

demo.launch()