app.py

import streamlit as st
from chatbot.core import get_chat_response, memory, cmp

# === Page configuration must be the first Streamlit command ===
st.set_page_config(page_title="RangDong Chatbot", layout="wide")

# --- Global CSS for styling ---
st.markdown("""
<style>
/* Title styling */
.title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Chat container padding */
.chat-container .stChatMessage {
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Compare button styling */
.custom-cmp .stButton>button {
    background-color: #0072C3;
    color: white;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: none;
    width: 100%;
    max-width: 300px;
    margin: 1rem auto;
    display: block;
}
</style>
""", unsafe_allow_html=True)

# --- Application title ---
st.markdown(
    '<h1 class="title">RangDong Sale Assistant</h1>',
    unsafe_allow_html=True
)

# --- Initialize chat history in session state ---
if "messages" not in st.session_state:
    st.session_state.messages = []

# --- Display chat history ---
for msg in st.session_state.messages:
    with st.chat_message(msg["role"]):
        st.markdown(msg["content"])

# --- Chat input box ---
user_input = st.chat_input("Trợ lý ảo Rạng Đông có thể giúp được gì cho bạn...")

if user_input:
    # 1) Hiển thị ngay tin nhắn user
    st.session_state.messages.append({"role": "user", "content": user_input})
    with st.chat_message("user"):
        st.markdown(user_input)

    # 2) Spinner-Only placeholder cho response
    spinner = st.empty()
    with spinner:
        with st.spinner("Rạng Đông Chatbot đang suy nghĩ..."):
            response = get_chat_response(user_input)
    spinner.empty()

    # 3) Hiển thị bubble mới và lưu lại
    st.session_state.messages.append({"role": "assistant", "content": response})
    with st.chat_message("assistant"):
        st.markdown(response)

# --- Compare button + spinner-only ---
if any(m["role"] == "user" for m in st.session_state.messages) and memory.cache:
    st.markdown('<div class="custom-cmp">', unsafe_allow_html=True)
    if st.button("So sánh các sản phẩm tương tự", key="cmp_button"):
        # Spinner-only placeholder
        spinner_cmp = st.empty()
        with spinner_cmp:
            with st.spinner("Đang so sánh các sản phẩm..."):
                cmp_response = cmp()
        spinner_cmp.empty()

        # Show new compare bubble
        st.session_state.messages.append({"role": "assistant", "content": cmp_response})
        with st.chat_message("assistant"):
            st.markdown(cmp_response)
    st.markdown('</div>', unsafe_allow_html=True)