import json

import gradio as gr

CSS = """.contain { display: flex; flex-direction: column; }
.gradio-container { height: 100vh !important; }
#component-0 { height: 100%; }
#chatbot { flex-grow: 1; overflow: auto;}
#chatbot .avatar-container {margin-right: 14px;}
#chatbot .avatar-image {padding: 0;}"""

saved_examples = []
try:
    for line in open("upvote_log.jsonl").readlines():
        j = json.loads(line)
        entry = []
        saved_examples.append(j)
except:
    saved_examples = [
        [
            {"role": "user", "content": "Hi, I need help with my marketing campaign."},
        ],
    ]


def update_chatbot(index):
    return saved_examples[index]


with gr.Blocks(css=CSS, theme="gradio/monochrome") as demo:
    gr.Markdown(
        "## *VariantX* Asset Performance Optimization & Insights for Performance Marketing\n"
    )
    options = gr.Dropdown(
        choices=[i for i in range(len(saved_examples))],
        value=0,
    )

    chat = gr.Chatbot(
        type="messages",
        bubble_full_width=False,
        value=saved_examples[0],
        elem_id="chatbot",
        avatar_images=(
            None,
            "https://cdn2.iconfinder.com/data/icons/adobe-square-2/243/adobe-square-1024.png",
        ),
    )

    options.change(
        update_chatbot,
        inputs=[options],
        outputs=[chat],
    )

if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", ssl_verify=False)