app.py

import streamlit as st
from groq import Groq

# Define the API key here
GROQ_API_KEY = "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"

# Initialize session state for chat history
if "chat_history" not in st.session_state:
    st.session_state.chat_history = [
        {"role": "system", "content": "you are a helpful assistant. Take the input from the users and try to provide as detailed response as possible. Provide proper examples to help the user. Try to mention references or provide citations to make it more detail-oriented."}
    ]
if "previous_sessions" not in st.session_state:
    st.session_state.previous_sessions = []

# Function to fetch response
def fetch_response(user_input):
    client = Groq(api_key=GROQ_API_KEY)
    st.session_state.chat_history.append({"role": "user", "content": user_input})
    chat_completion = client.chat.completions.create(
        messages=st.session_state.chat_history,
        model="mixtral-8x7b-32768",
        stream=False
    )
    response = chat_completion.choices[0].message.content
    st.session_state.chat_history.append({"role": "assistant", "content": response})
    return response

# Streamlit app
st.set_page_config(page_title="Fastest AI Chatbot", page_icon="🤖", layout="wide")

st.markdown(
    """
    <style>
    body {
        background-color: #1f1f2e;
        color: #e1e1e1;
        font-family: 'Courier New', Courier, monospace;
    }
    .css-18e3th9 {
        padding: 2rem;
    }
    .css-1d391kg {
        background: linear-gradient(145deg, #3d3d5c, #2e2e4a);
        box-shadow: 20px 20px 60px #29293f, -20px -20px 60px #3a3a56;
        border-radius: 15px;
        padding: 2rem;
    }
    .stButton>button {
        background: linear-gradient(145deg, #5e5e87, #4a4a6c);
        box-shadow: 8px 8px 16px #29293f, -8px -8px 16px #3a3a56;
        color: #e1e1e1;
        border: none;
        border-radius: 12px;
        padding: 0.5rem 2rem;
        font-size: 1.2rem;
        margin-top: 1rem;
    }
    .chat-container {
        padding-bottom: 100px;
    }
    .chat-input {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        background: linear-gradient(145deg, #5e5e87, #4a4a6c);
        box-shadow: inset 8px 8px 16px #29293f, inset -8px -8px 16px #3a3a56;
        border: none;
        border-radius: 12px;
        color: #e1e1e1;
        padding: 1rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
    }
    .chat-input input {
        flex: 1;
        background: transparent;
        border: none;
        color: inherit;
        font-size: inherit;
        padding: 0;
        margin: 0;
    }
    .chat-input button {
        background: transparent;
        border: none;
        color: inherit;
        font-size: inherit;
        margin-left: 1rem;
        cursor: pointer;
    }
    .previous-sessions {
        color: #e1e1e1;
    }
    footer {
        color: #e1e1e1;
        font-size: small;
        text-align: right;
        margin-top: 2rem;
    }
    .save-session {
        position: fixed;
        bottom: 10px;
        right: 10px;
        background: linear-gradient(145deg, #5e5e87, #4a4a6c);
        box-shadow: 8px 8px 16px #29293f, -8px -8px 16px #3a3a56;
        border: none;
        border-radius: 12px;
        color: #e1e1e1;
        padding: 0.5rem 2rem;
        font-size: 1rem;
        cursor: pointer;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Sidebar for previous sessions
st.sidebar.title("Previous Sessions")
st.sidebar.markdown("<div class='previous-sessions'>", unsafe_allow_html=True)
for i, session in enumerate(st.session_state.previous_sessions):
    if st.sidebar.button(f"Session {i + 1}"):
        st.session_state.chat_history = session
st.sidebar.markdown("</div>", unsafe_allow_html=True)

st.title("Fastest AI Chatbot")
st.write("Ask a question and get a response.")

# Display chat history
st.markdown("<div class='chat-container'>", unsafe_allow_html=True)
for chat in st.session_state.chat_history:
    if chat["role"] == "user":
        st.markdown(f"**You:** {chat['content']}")
    elif chat["role"] == "assistant":
        st.markdown(f"**AI:** {chat['content']}")
st.markdown("</div>", unsafe_allow_html=True)

# Custom input field
st.markdown(
    """
    <div class="chat-input">
        <input type="text" id="chat-input-field" placeholder="Type your message here..." onkeydown="if(event.key === 'Enter'){sendChat();}">
        <button id="chat-submit-button" onclick="sendChat()">Send</button>
    </div>
    <script>
    function sendChat() {
        const inputField = document.getElementById('chat-input-field');
        const message = inputField.value;
        if (message) {
            inputField.value = '';
            fetch('/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ 'user_input': message })
            }).then(response => {
                if (response.ok) {
                    location.reload();
                }
            });
        }
    }
    </script>
    """,
    unsafe_allow_html=True
)

# Custom Save Session button
st.markdown(
    """
    <button class="save-session" onclick="saveSession()">Save Session</button>
    <script>
    function saveSession() {
        fetch('/save-session', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
        }).then(response => {
            if (response.ok) {
                location.reload();
            }
        });
    }
    </script>
    """,
    unsafe_allow_html=True
)

# Handling Save Session in Streamlit
if st.button("Trigger Save Session", key="trigger_save_session", help="Hidden button to handle session saving"):
    st.session_state.previous_sessions.append(st.session_state.chat_history)
    st.session_state.chat_history = [
        {"role": "system", "content": "you are a helpful assistant. Take the input from the users and try to provide as detailed response as possible. Provide proper examples to help the user. Try to mention references or provide citations to make it more detail-oriented."}
    ]
    st.experimental_rerun()

# Footer
st.markdown(
    """
    <footer>
        By DL TITANS
    </footer>
    """,
    unsafe_allow_html=True
)