import gradio as gr
import random
import time
import itertools

def textbox_dynamic_ui(example: str):
    placeholders = itertools.cycle([
        "Ask something like, What is 2+2?",
        "Ask something like, What is the meaning of Life?",
        "Ask something like, What is Gradio?"
    ])
    while True:
        yield gr.Textbox(placeholder=next(placeholders))
        time.sleep(2)

# Starting with the CSS that worked for color, and adding gradient
custom_css = """
.gradio-container input::placeholder,
.gradio-container textarea::placeholder {
    color: #45B6FE;
    background: linear-gradient(to right, #45B6FE 0%, #38EF7D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
"""

with gr.Blocks(theme="ocean", css=custom_css) as demo:
    chatbot = gr.Chatbot(type="messages")
    with gr.Row(equal_height=True):
        msg = gr.Textbox(scale=9)
        btn = gr.Button(variant='primary', scale=1, min_width=100)

    def respond(message, chat_history):
        bot_message = random.choice(["How are you?", "Today is a great day", "I'm very hungry"])
        chat_history.append({"role": "user", "content": message})
        chat_history.append({"role": "assistant", "content": bot_message})
        time.sleep(2)
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])
    msg.blur(textbox_dynamic_ui, inputs=[msg], outputs=[msg], show_progress='hidden', ) #js=True, preprocess=False, postprocess=False)
    btn.click(respond, [msg, chatbot], [msg, chatbot])

demo.launch()