import os
import streamlit as st
from groq import Groq
from dotenv import load_dotenv

load_dotenv()
groq_api_key = os.getenv("groq_api_key")

st.sidebar.title(":white[_Tailor_]")
prompt = st.sidebar.title(":red[_System Prompt:_] ")
model = st.sidebar.selectbox(
    'Choose a model', ['Llama3-8b-8192', 'Llama3-70b-8192','Mixtral-8x7b-32768','Gemma-7b-It']
)

# Groq client
client = Groq(api_key = groq_api_key)

# Streamlit Interface
st.title("🗨️ LLMS :red[Interaction] - :blue[By Raj]")

# Define the CSS for the animation
animation_css = """
<style>
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    animation: fadeInLeft 2s ease-out;
}

.fadeInRight {
    animation: fadeInRight 2s ease-out;
}
</style>
"""

# Apply the animation to your text
animated_text = """
<div class="fadeInLeft">Welcome to the LLMS Interaction web app!</div>
<div class="fadeInRight">This app allows you to interact with the LLMS AI model. To use the app, follow these steps:</div>
<div class="fadeInLeft">1. Enter your question in the text input box.</div>
<div class="fadeInRight">2. Click the 'Submit' button to send your question to the AI model.</div>
<div class="fadeInLeft">3. The response will be displayed below the text input box.</div>
<div class="fadeInRight">4. You can view the history of your queries and responses in the sidebar.</div>
<div class="fadeInLeft">5. To view the details of a specific query, click on the corresponding button in the sidebar.</div>
<div class="fadeInRight">Please note that this web app is super fast and utilizes custom api integration to fetch responses.</div>
<div class="fadeInLeft">Try it</div>
"""

# Combine the CSS and the text
final_output = animation_css + animated_text

# Display using st.markdown
st.markdown(final_output, unsafe_allow_html=True)

# Initialize sessesion state for history
if "history" not in st.session_state:
    st.session_state.history = []

user_input = st.text_input("Enter your question: ", "")

if st.button("Submit"):
    chat_completion = client.chat.completions.create(
        messages=[
            {
                "role" : "user",
                "content" : user_input,
            }
        ],
        model = model,
    )
    # Store the query and response in history
    response = chat_completion.choices[0].message.content
    st.session_state.history.append({"query" : user_input, "response" : response})

    # Display the response
    st.markdown(f'<div class="response-box">{response}</div>', unsafe_allow_html=True)

# Display history
st.sidebar.title(":rainbow[Memory]")
for i, entry in enumerate(st.session_state.history):
    if st.sidebar.button(f'Query {i+1}: {entry["query"]}'):
        st.markdown(f'<div class="response-box">{entry["response"]}</div>', unsafe_allow_html=True)
        
# Add a footer with fade-in animation
footer = """
<style>
.my-footer {
    position: fixed;
    bottom: -50px;
    left: 0;
    width: 100%;
    background-color: black;
    text-align: center;
    padding: 10px;
    font-size: 20px; /* Increased the font size to medium */
    color: white;
    animation: fade-in 1s ease-in-out 3s forwards;
}

.my-footer img {
    width: 40px; /* Increased the logo size to large */
    height: 40px;
}

@keyframes fade-in {
    0% {
        bottom: -50px;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}
</style>
<div class='my-footer'>Made by The Raj | Follow me on <a href='https://instagram.com/theraj7171' target='_blank'><img src='https://static.vecteezy.com/system/resources/previews/018/930/692/original/instagram-logo-instagram-icon-transparent-free-png.png' alt='Instagram' width='40' height='40'></a> | Connect with me on <a href='https://www.linkedin.com/in/the-raj71' target='_blank'><img src='https://static.vecteezy.com/system/resources/previews/022/511/448/non_2x/linkedin-logo-editorial-free-vector.jpg' alt='LinkedIn' width='40' height='40'></a> | Check out my <a href='https://github.com/TheRaj71' target='_blank'><img src='https://2.bp.blogspot.com/-7M-f2FzhZl8/WxLdqW_NTMI/AAAAAAAANVw/a5zQzCdh4-89d1OXrPrEYhyarOAFsLY6gCLcBGAs/s640/github-mark.png' alt='GitHub' width='40' height='40'></a></div>
"""
st.markdown(footer, unsafe_allow_html=True)