import streamlit as st
import streamlit.components.v1 as components

# Title text
title_text = "<h1 style='color: #3A225D;'>Welcome to IPL Buddy...</h1>"
st.markdown(title_text, unsafe_allow_html=True)

# Caution text
caution_text = """
    <h5 style="color: #e10000;">
        N.B: The production server and the backend database are running on free tiers. So, it may take some time or a few multiple tries to get reply. Sorry for the inconvenience..🙂
    </h5>
"""
st.markdown(caution_text, unsafe_allow_html=True)

# Chatbot integration
dialogflow_bot = """
    <script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1">
    </script>
    <style>
        df-messenger {
        --df-messenger-bot-message: #878fac;
        --df-messenger-button-titlebar-color: #3A225D;
        --df-messenger-chat-background-color: #fafafa;
        --df-messenger-font-color: white;
        --df-messenger-send-icon: #878fac;
        --df-messenger-user-message: #479b3d;
        }
    </style>
    <df-messenger 
    intent="WELCOME"
    chat-title="IPL Buddy"
    agent-id="cc8dfc8c-36c0-420e-9c7b-aeb2ba566a1c"
    language-code="en"
    ></df-messenger>
"""

components.html(dialogflow_bot, height=680)