import gradio as gr
import time
from openai import OpenAI
client = OpenAI(api_key="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")

def slowecho(message, history):
    for i in range(len(message)):
        time.sleep(0.05)
        yield "You typed: " + message[: i + 1]
    
js = """
function createGradioAnimation() {
    var container = document.createElement('div');
    container.id = 'gradio-animation';
    container.style.fontSize = '2em';
    container.style.fontWeight = 'bold';
    container.style.textAlign = 'center';
    container.style.marginBottom = '20px';
    container.style.color = 'black';

    var text = 'Assistente virtuale di Fabio Pizzul!';
    for (var i = 0; i < text.length; i++) {
        (function(i){
            setTimeout(function(){
                var letter = document.createElement('span');
                letter.style.opacity = '0';
                letter.style.transition = 'opacity 0.5s';
                letter.innerText = text[i];

                container.appendChild(letter);

                setTimeout(function() {
                    letter.style.opacity = '1';
                }, 50);
            }, i * 250);
        })(i);
    }

    var gradioContainer = document.querySelector('.gradio-container');
    gradioContainer.insertBefore(container, gradioContainer.firstChild);

     //Sfondo
    gradioContainer.style.background = 'white';
    gradioContainer.style.color = 'black';


    return 'Animation created';
}
"""
theme = gr.themes.Base(
    neutral_hue="zinc",
)

textbox=gr.Textbox(placeholder="Fammi una domanda", container=False, scale=7)

with gr.Blocks(js=js, theme=theme) as demo:
    chat= gr.ChatInterface(
        slowecho,
        textbox=textbox,
        retry_btn=None,
        undo_btn=None,
        clear_btn=None,
    )

demo.launch()