pages/Sql.py

import streamlit as st
import os
from langchain_huggingface import HuggingFaceEndpoint, ChatHuggingFace
from langchain_core.messages import HumanMessage, SystemMessage

# Set environment variables
hf = os.getenv('HF_TOKEN')
os.environ['HUGGINGFACEHUB_API_KEY'] = hf
os.environ['HF_TOKEN'] = hf

# Initialize DeepSeek model (you can replace this with your own model if needed)
def load_deepseek_model():
    deep_seek_model = HuggingFaceEndpoint(
        repo_id="deepseek-ai/DeepSeek-R1",
        provider="nebius",
        temperature=0.7,
        max_new_tokens=150,
        task="conversational"
    )
    return ChatHuggingFace(llm=deep_seek_model)

sql_mentor = load_deepseek_model()

# Streamlit page setup
st.set_page_config(page_title="SQL Mentor Chat", layout="centered")

# Improved custom CSS
st.markdown("""
    <style>
    .main {
        background: linear-gradient(to right, #1f4037, #99f2c8);
        padding: 2rem;
        font-family: 'Segoe UI', sans-serif;
    }
    .stButton>button {
        background-color: #ffffff10;
        color: white;
        font-weight: 600;
        border-radius: 10px;
        padding: 0.6rem 1rem;
        transition: all 0.3s ease;
        border: 1px solid white;
    }
    .stButton>button:hover {
        background-color: #ffffff30;
        color: white;
        border-color: #fff;
    }
    h1, h3, p, label {
        color: white;
        text-align: center;
    }
    .chat-bubble-user {
        background-color: #ffffff25;
        padding: 0.75rem 1rem;
        border-radius: 1rem;
        margin-bottom: 0.5rem;
        color: #fff;
        font-weight: 500;
        text-align: left;
        width: fit-content;
        max-width: 90%;
        align-self: flex-end;
    }
    .chat-bubble-bot {
        background-color: #ffffff15;
        padding: 0.75rem 1rem;
        border-radius: 1rem;
        margin-bottom: 0.5rem;
        color: #fff;
        text-align: left;
        width: fit-content;
        max-width: 90%;
        align-self: flex-start;
    }
    .chat-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 2rem;
    }
    </style>
""", unsafe_allow_html=True)

# Page title
st.markdown("<h1 style='margin-bottom: 0;'>🗃️ SQL Mentor Chat</h1>", unsafe_allow_html=True)
st.markdown("<p style='margin-top: 0.2rem;'>Learn SQL interactively from your AI mentor!</p>", unsafe_allow_html=True)

# Sidebar for user preference
st.sidebar.title("Mentor Preferences")
exp = st.sidebar.selectbox("Choose your experience level:", ["Beginner", "Intermediate", "Expert"])

# Session state key
PAGE_KEY = "chat_history"

# Initialize session state
if PAGE_KEY not in st.session_state:
    st.session_state[PAGE_KEY] = []

# Chat input box
st.markdown("<hr>", unsafe_allow_html=True)
with st.form(key="chat_form"):
    user_input = st.text_input("💬 Ask me anything about SQL:")
    submit = st.form_submit_button("Send")

# Chat logic
if submit and user_input:
    system_prompt = (
        f"Act as a SQL mentor with {exp.lower()} expertise. "
        f"Answer in a friendly tone and within 150 words. "
        f"If the question is not SQL-related, politely say it's out of scope."
    )
    messages = [SystemMessage(content=system_prompt), HumanMessage(content=user_input)]
    result = sql_mentor.invoke(messages)
    st.session_state[PAGE_KEY].append((user_input, result.content))

# Show conversation as chat bubbles
if st.session_state[PAGE_KEY]:
    st.markdown('<div class="chat-container">', unsafe_allow_html=True)
    for user, bot in st.session_state[PAGE_KEY]:
        st.markdown(f'<div class="chat-bubble-user">👤 <strong>You:</strong> {user}</div>', unsafe_allow_html=True)
        st.markdown(f'<div class="chat-bubble-bot">🧑‍🏫 <strong>Mentor:</strong> {bot}</div>', unsafe_allow_html=True)
    st.markdown('</div>', unsafe_allow_html=True)