Create Sql.py

pages/Sql.py

@@ -0,0 +1,102 @@
+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_TOKEN'] = hf
+os.environ['HF_TOKEN'] = hf
+# 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"])
+
+# 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)