app.py

import streamlit as st

# Set the page configuration
st.set_page_config(
    page_title="IT-support assistant",
    layout="wide",
)

# Apply CSS for custom background and layout
st.markdown(
    f"""
    <style>
    .stApp {{
        background-image: url("https://t3.ftcdn.net/jpg/04/35/60/34/240_F_435603418_Wq7wq8dPK1lJk2p3MZhENa52g9DEHGoe.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }}
    .headline {{
        font-size: 4em;
        color: white;
        font-weight: bold;
        text-align: center;
        margin-top: 20%;
    }}
    .sidebar .sidebar-content {{
        background: rgba(0, 123, 255, 0.5);
        color: white;
    }}
    .chat-container {{
        border-radius: 10px;
        padding: 20px;
        margin-top: 20px;
        max-height: 200px;
        overflow-y: auto;
    }}
    .chat-box {{
        color: white;
        font-size: 1.2em;
        margin-top: 10px;
    }}
    .stTextInput>div>div>input {{
        background: white;
        color: black;
    }}
    .stTextInput>div>div>input::placeholder {{
        color: white;
    }}
    .stTextInput>div>div {{
        background: white;
        border-radius: 10px;
    }}
    .green-text {{
        color: green;
    }}
    .red-text {{
        color: red;
    }}
    .star-rating {{
        direction: rtl;
        font-size: 2em;
        display: inline-flex;
    }}
    .star-rating input[type='radio'] {{
        display: none;
    }}
    .star-rating label {{
        cursor: pointer;
        color: lightgray;
    }}
    .star-rating input[type='radio']:checked ~ label,
    .star-rating label:hover,
    .star-rating label:hover ~ label {{
        color: gold;
    }}
    .back-to-home {{
        margin-top: 20px;
    }}
    .faq-content {{
        color: white;
        background: rgba(0, 0, 139, 0.7);
        padding: 10px;
        border-radius: 10px;
    }}
    .faq-question {{
        color: white;
        font-size: 1.5em;
        font-weight: bold;
        margin-top: 10px;
    }}
    .faq-answer {{
        color: white;
        font-size: 1.2em;
        margin-bottom: 10px;
    }}
    </style>
    """,
    unsafe_allow_html=True
)

# Sidebar buttons
st.sidebar.markdown('<h3 style="text-align: center;">Quick Help</h3>', unsafe_allow_html=True)

# Function 1: Frequently Asked Questions
if st.sidebar.button('Frequently Asked Questions'):
    st.session_state.page = "faq"

# Function 2: Internet status
if st.sidebar.button('Internet status'):
    st.sidebar.markdown('<p>The internet is currently <span class="red-text">not working</span>.</p>', unsafe_allow_html=True)

# Function 3: Intranet status
if st.sidebar.button('Intranet status'):
    st.sidebar.markdown('<p>The intranet is currently <span class="green-text">working</span>.</p>', unsafe_allow_html=True)

# Function 4: Contact Human Support
if st.sidebar.button('Contact Human Support'):
    st.sidebar.markdown('<p>If you do not wish to use the bot feature and want to contact second level support directly, please either call them at 44 353 4434 or write them at secondlevelsupport@email.com</p>', unsafe_allow_html=True)

# Function 5: Video Tutorials
if st.sidebar.button('Video Tutorials'):
    st.session_state.page = "videos"

# Function 6: Review IT-Support service
if st.sidebar.button('Review IT-Support service'):
    st.session_state.page = "review"

# Display the headline
if 'page' not in st.session_state:
    st.markdown('<div class="headline">IT-support assistant</div>', unsafe_allow_html=True)

# Check for pages
if 'page' in st.session_state and st.session_state.page == "faq":
    st.markdown('<h2 style="color: white;">Frequently Asked Questions</h2>', unsafe_allow_html=True)
    st.markdown('<div class="faq-content">', unsafe_allow_html=True)
    
    # Add FAQ content
    st.markdown('<div class="faq-question">Q1: How can I set up a VPN on my device?</div>', unsafe_allow_html=True)
    st.markdown('<div class="faq-answer">A1: To set up a VPN, go to your device\'s network settings, choose \'Add VPN\', and enter the VPN details provided by your IT department.</div>', unsafe_allow_html=True)
    
    st.markdown('<div class="faq-question">Q2: What should I do if my computer is running slow?</div>', unsafe_allow_html=True)
    st.markdown('<div class="faq-answer">A2: Try restarting your computer, closing unnecessary applications, and checking for available updates. If the issue persists, contact IT support.</div>', unsafe_allow_html=True)
    
    st.markdown('<div class="faq-question">Q3: How do I set up my email on my phone?</div>', unsafe_allow_html=True)
    st.markdown('<div class="faq-answer">A3: Go to your phone\'s email settings, add a new account, and enter your email address and password. Follow the prompts to complete the setup.</div>', unsafe_allow_html=True)
    
    st.markdown('</div>', unsafe_allow_html=True)
    
    if st.button("Back to Home"):
        st.session_state.page = None

elif 'page' in st.session_state and st.session_state.page == "videos":
    st.markdown('<h2 style="color: white;">Video Tutorials</h2>', unsafe_allow_html=True)
    st.markdown('<p style="color: white;">Here you can find video tutorials to help you with common tasks.</p>', unsafe_allow_html=True)
    # Add video tutorial content here

    if st.button("Back to Home"):
        st.session_state.page = None

elif 'page' in st.session_state and st.session_state.page == "review":
    st.markdown('<h2 style="color: white;">Review IT-Support service</h2>', unsafe_allow_html=True)
    st.markdown('<p style="color: white;">Please provide your feedback below:</p>', unsafe_allow_html=True)
    
    # Star rating
    st.markdown(
        """
        <div class="star-rating">
            <input type="radio" id="star5" name="rating" value="5"><label for="star5">☆</label>
            <input type="radio" id="star4" name="rating" value="4"><label for="star4">☆</label>
            <input type="radio" id="star3" name="rating" value="3"><label for="star3">☆</label>
            <input type="radio" id="star2" name="rating" value="2"><label for="star2">☆</label>
            <input type="radio" id="star1" name="rating" value="1"><label for="star1">☆</label>
        </div>
        """,
        unsafe_allow_html=True
    )
    
    # Feedback form
    feedback = st.text_area("Your comments")
    if st.button("Submit"):
        st.success("Thank you for your feedback, we will use it to improve our service.")
    
    if st.button("Back to Home"):
        st.session_state.page = None

else:
    # Initialize chat session state
    if 'chat_history' not in st.session_state:
        st.session_state.chat_history = []

    # Chat panel container
    st.markdown('<div class="chat-container">', unsafe_allow_html=True)

    # Display chat history
    for message in st.session_state.chat_history:
        st.markdown(f"<div class='chat-box'>{message}</div>", unsafe_allow_html=True)

    # Close the chat-container div
    st.markdown('</div>', unsafe_allow_html=True)

    # Input form for chat
    with st.form(key='chat_form', clear_on_submit=True):
        user_input = st.text_input("Type your request here...", "")
        submit_button = st.form_submit_button(label='Send')

    if submit_button and user_input:
        st.session_state.chat_history.append(f"You: {user_input}")

        # Basic chat logic
        if "hello" in user_input.lower():
            st.session_state.chat_history.append("Bot: Hello, how may I assist you today?")
        elif "password" in user_input.lower() or "locked" in user_input.lower():
            st.session_state.chat_history.append("Bot: Would you like me to reset your password for you?")
        elif "yes please" in user_input.lower():
            st.session_state.chat_history.append("Bot: Okay, I have reset your password. Please login with 12345678 as your password and then change it to a new password of your own choosing once prompted. Is there anything else I can help you with?")
        elif "thank you" in user_input.lower():
            st.session_state.chat_history.append("Bot: You are welcome! Is there anything else I can help you with?")
        elif "internet" in user_input.lower() and "not" in user_input.lower():
            st.session_state.chat_history.append("Bot: Please hold while I check the current status of the internet connection.")
        elif "delay 1" in user_input.lower():
            st.session_state.chat_history.append("Bot: You are right, it does appear that the internet is not functioning. Would you like me to contact second level support to attempt to resolve the problem?")
        elif user_input.lower() == "yes":
            st.session_state.chat_history.append("Bot: Okay, please hold while I contact second level support.")
        elif "delay 2" in user_input.lower():
            st.session_state.chat_history.append("Bot: Second level confirmed that there was an issue with the internet and have restarted the router. The internet appears to be working now. Please let me know if you are still experiencing any issues.")
        else:
            st.session_state.chat_history.append("Bot: I'm sorry, I didn't understand that. Can you please clarify?")

        # Refresh the chat panel to display new messages
        st.experimental_rerun()