import os
import gradio as gr
import time
from gradio_client import Client



def get_response(query, history):

    history = str(history)
    client = Client("https://traversaal-fitx-ai.hf.space/", hf_token="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")
    result = client.predict(
				query,	# str in 'query' Textbox component
				history,	# str in 'history' Textbox component
				api_name="/predict"
    )
    
    return result



custom_css = """
<style>
    .gr-chatbox-container {
        border: 2px solid #007BFF;
        border-radius: 5px;
        padding: 10px;
    }
    .gr-chatbox-container .chat-history .history-item:nth-child(even) {
        background-color: #f0f0f0;
        border-radius: 5px;
        margin: 5px 0;
        padding: 10px;
    }
    .gr-chatbox-container .chat-input .text-box {
        border: 2px solid #007BFF;
        border-radius: 5px;
        padding: 10px;
    }
    .gr-chatbox-container .chat-input button {
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .gr-chatbox-container .chat-input button:hover {
        background-color: #0056b3;
    }
    .gr-chatbox-container .chat-title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
    }
</style>
"""

def respond(message, chat_history):

    bot_message = get_response(message, chat_history)
    chat_history.append((message, bot_message))
    time.sleep(0.5)
    return "", chat_history


with gr.Blocks(theme=gr.themes.Soft()) as demo:
    chatbot = gr.Chatbot(title="Fitx AI Chatbot")
    msg = gr.Textbox(placeholder="I am your personal AI Trainer. Ask me a question")

    msg.submit(respond, [msg, chatbot], [msg, chatbot])


demo.launch(debug=True)