Update app.py

app.py

@@ -1,236 +1,242 @@
 import streamlit as st
 import time
 import random
-import os
 
-# تنظیمات اصلی چت‌بات
-ADMIN_USERNAME = "admin"
-ADMIN_PASSWORD = "password"
-
-# CSS سفارشی برای ظاهر چت‌بات و حالت تیره و روشن
-CUSTOM_CSS = """
+# تنظیمات استایل مدرن با گلس مورفیسم و نئومورفیسم
+MODERN_CSS = """
 <style>
-:root {
-    --primary-color: #4a90e2;
-    --secondary-color: #ff6b6b;
-    --neutral-color: #f5f5f5;
-    --accent-color: #50e3c2;
-    --background-light: #e8effa;
-    --background-dark: #1c1c1e;
-    --text-color-light: #333;
-    --text-color-dark: #e0e0e0;
-    --shadow-color: rgba(0, 0, 0, 0.1);
-}
-
-body {
-    font-family: 'Vazir', sans-serif;
-    background: var(--background-color);
-}
-
-.chat-container {
-    max-width: 400px;
-    margin: 0 auto;
-    border-radius: 15px;
-    box-shadow: 0px 4px 12px var(--shadow-color);
-    overflow: hidden;
-    background: var(--background-color);
-}
-
-.header {
-    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-    color: white;
-    padding: 10px;
-    text-align: center;
-    font-weight: bold;
-    font-size: 18px;
-}
-
-.chat-body {
-    background: var(--neutral-color);
-    padding: 15px;
-    height: 300px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-}
-
-.message {
-    padding: 12px 15px;
-    margin: 10px 0;
-    border-radius: 15px;
-    width: fit-content;
-    max-width: 80%;
-    font-size: 15px;
-    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
-    transition: all 0.3s ease;
-}
-
-.message.user {
-    align-self: flex-end;
-    background: var(--primary-color);
-    color: var(--text-color-light);
-}
-
-.message.bot {
-    align-self: flex-start;
-    background: var(--secondary-color);
-    color: white;
-}
-
-.footer {
-    display: flex;
-    padding: 10px;
-    background: var(--neutral-color);
-    border-top: 1px solid #ddd;
-    align-items: center;
-}
-
-.footer input[type="text"] {
-    flex: 1;
-    padding: 10px;
-    border: none;
-    border-radius: 20px;
-    background: #ffffff;
-    margin-right: 10px;
-    font-size: 14px;
-    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.1);
-}
-
-.footer .icon, .footer .send-btn {
-    font-size: 20px;
-    color: var(--primary-color);
-    cursor: pointer;
-    transition: color 0.3s ease, transform 0.2s ease;
-}
-
-.footer .icon:hover, .footer .send-btn:hover {
-    color: var(--secondary-color);
-    transform: scale(1.1);
-}
-
-.admin-icon {
-    font-size: 40px;
-    color: var(--primary-color);
-    cursor: pointer;
-    text-align: center;
-    margin-top: 10px;
-    transition: color 0.3s ease;
-}
-
-.admin-icon:hover {
-    color: var(--secondary-color);
-    transform: scale(1.1);
-}
-
-h1, h2 {
-    font-size: 20px;
-    color: var(--primary-color);
-    text-align: center;
-    margin-top: 15px;
-    font-weight: bold;
-}
+    @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
+
+    :root {
+        --primary-color: rgba(74, 144, 226, 0.9);
+        --secondary-color: rgba(255, 107, 107, 0.9);
+        --bg-color: rgba(240, 242, 245, 1);
+        --glass-bg: rgba(255, 255, 255, 0.25);
+        --glass-border: rgba(255, 255, 255, 0.18);
+        --shadow-color: rgba(31, 38, 135, 0.37);
+        --text-color: #333;
+    }
+
+    .stApp {
+        background: linear-gradient(45deg, #e6e9f0 0%, #eef1f5 100%);
+        font-family: 'Vazirmatn', sans-serif;
+    }
+
+    .chat-container {
+        background: var(--glass-bg);
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+        border-radius: 20px;
+        border: 1px solid var(--glass-border);
+        box-shadow: 0 8px 32px 0 var(--shadow-color);
+        padding: 20px;
+        margin: 20px 0;
+    }
+
+    .message {
+        display: flex;
+        margin: 15px 0;
+        animation: fadeIn 0.5s ease-out;
+    }
+
+    .message-content {
+        padding: 15px 20px;
+        border-radius: 15px;
+        max-width: 80%;
+        box-shadow: 
+            8px 8px 16px rgba(174, 174, 192, 0.4),
+            -8px -8px 16px rgba(255, 255, 255, 0.65);
+    }
+
+    .user-message {
+        justify-content: flex-end;
+    }
+
+    .user-message .message-content {
+        background: var(--primary-color);
+        color: white;
+        margin-left: auto;
+        border-bottom-right-radius: 5px;
+    }
+
+    .bot-message {
+        justify-content: flex-start;
+    }
+
+    .bot-message .message-content {
+        background: var(--glass-bg);
+        border: 1px solid var(--glass-border);
+        color: var(--text-color);
+        border-bottom-left-radius: 5px;
+    }
+
+    .input-container {
+        background: var(--glass-bg);
+        backdrop-filter: blur(4px);
+        border-radius: 15px;
+        border: 1px solid var(--glass-border);
+        padding: 10px;
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+    }
+
+    .stTextInput input {
+        background: rgba(255, 255, 255, 0.1) !important;
+        border: none !important;
+        padding: 10px 15px !important;
+        border-radius: 10px !important;
+        color: var(--text-color) !important;
+        backdrop-filter: blur(4px) !important;
+        direction: rtl;
+    }
+
+    .stButton > button {
+        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 10px !important;
+        padding: 10px 25px !important;
+        font-family: 'Vazirmatn', sans-serif !important;
+        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
+        box-shadow: 
+            4px 4px 8px rgba(174, 174, 192, 0.4),
+            -4px -4px 8px rgba(255, 255, 255, 0.65) !important;
+    }
+
+    .stButton > button:hover {
+        transform: translateY(-2px);
+        box-shadow: 
+            6px 6px 12px rgba(174, 174, 192, 0.4),
+            -6px -6px 12px rgba(255, 255, 255, 0.65) !important;
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* Admin Panel Styling */
+    .admin-panel {
+        background: var(--glass-bg);
+        backdrop-filter: blur(4px);
+        border-radius: 15px;
+        border: 1px solid var(--glass-border);
+        padding: 20px;
+        margin: 20px 0;
+    }
+
+    .admin-panel h3 {
+        color: var(--primary-color);
+        font-weight: 500;
+        margin-bottom: 15px;
+    }
 </style>
 """
 
-# اعمال CSS سفارشی
-st.markdown(CUSTOM_CSS, unsafe_allow_html=True)
-
 class ModernChatbot:
     def __init__(self):
-        self.conversation_history = []
-        self.admin_logged_in = False
-
+        if 'messages' not in st.session_state:
+            st.session_state.messages = []
+        if 'admin_logged_in' not in st.session_state:
+            st.session_state.admin_logged_in = False
+            
     def chat_response(self, message):
-        """دریافت پیام کاربر و اضافه کردن پاسخ به تاریخچه گفتگو"""
-        time.sleep(0.5)
-        self.conversation_history.append(("شما", message))
-        
+        if not message.strip():
+            return
+            
         responses = [
-            "این یک پاسخ نمونه از ربات است.",
-            "چه کمکی از من بر می‌آید؟",
-            "لطفاً بیشتر توضیح دهید.",
-            "متشکرم از پیامتان!"
+            "چطور می‌تونم کمکتون کنم؟",
+            "متوجه شدم. لطفاً بیشتر توضیح بدید.",
+            "بله، کاملاً درسته. می‌تونم راهنماییتون کنم.",
+            "این موضوع جالبیه. نظر شما چیه؟"
         ]
-        bot_message = random.choice(responses)
-        self.conversation_history.append(("ربات", bot_message))
         
-        return self.conversation_history
-
-    def login_admin(self, username, password):
-        if username == ADMIN_USERNAME and password == ADMIN_PASSWORD:
-            self.admin_logged_in = True
-            return True
-        else:
-            return False
+        st.session_state.messages.append({"role": "user", "content": message})
+        
+        # شبیه‌سازی تایپ کردن ربات
+        with st.empty():
+            for i in range(3):
+                time.sleep(0.3)
+                st.write("..." + "." * i)
+                
+        bot_response = random.choice(responses)
+        st.session_state.messages.append({"role": "assistant", "content": bot_response})
 
     def clear_history(self):
-        self.conversation_history = []
-
-# ایجاد چت‌بات
-chatbot = ModernChatbot()
-
-# حالت روشن یا تیره
-dark_mode = st.sidebar.checkbox("فعال کردن حالت تیره")
-
-# تغییر تم بر اساس حالت انتخاب شده
-background_color = "--background-dark" if dark_mode else "--background-light"
-text_color = "--text-color-dark" if dark_mode else "--text-color-light"
-st.markdown(f"<style>:root {{ --background-color: var({background_color}); --text-color: var({text_color}); }}</style>", unsafe_allow_html=True)
-
-# آیکون ورود ادمین و نمایش پاپ‌آپ
-st.markdown("<div class='admin-icon'>&#128100;</div>", unsafe_allow_html=True)
-
-if "show_popup" not in st.session_state:
-    st.session_state["show_popup"] = False
-
-if "admin_logged_in" not in st.session_state:
-    st.session_state["admin_logged_in"] = False
-
-if st.session_state["show_popup"]:
-    with st.container():
-        st.markdown("<div class='popup-form'><h2 style='color: var(--primary-color); text-align:center;'>ورود ادمین</h2>", unsafe_allow_html=True)
-        username = st.text_input("نام کاربری")
-        password = st.text_input("رمز عبور", type="password")
-        if st.button("ورود"):
-            if chatbot.login_admin(username, password):
-                st.session_state["admin_logged_in"] = True
-                st.session_state["show_popup"] = False
-                st.success("ورود موفقیت‌آمیز بود!")
+        st.session_state.messages = []
+
+def main():
+    st.set_page_config(
+        page_title="چت‌بات هوشمند",
+        page_icon="🤖",
+        layout="centered",
+        initial_sidebar_state="expanded"
+    )
+    
+    # اعمال CSS سفارشی
+    st.markdown(MODERN_CSS, unsafe_allow_html=True)
+    
+    # پنل مدیریت در سایدبار
+    with st.sidebar:
+        st.markdown("<div class='admin-panel'>", unsafe_allow_html=True)
+        st.header("🔐 پنل مدیریت")
+        
+        if not st.session_state.admin_logged_in:
+            admin_username = st.text_input("نام کاربری", placeholder="نام کاربری را وارد کنید")
+            admin_password = st.text_input("رمز عبور", type="password", placeholder="رمز عبور را وارد کنید")
+            
+            if st.button("ورود", key="login_button"):
+                if admin_username == "admin" and admin_password == "password":
+                    st.session_state.admin_logged_in = True
+                    st.success("ورود موفقیت‌آمیز بود! 🎉")
+                    st.experimental_rerun()
+                else:
+                    st.error("نام کاربری یا رمز عبور اشتباه است! ❌")
+        
+        else:
+            st.success("شما وارد شده‌اید! 👋")
+            if st.button("پاک کردن تاریخچه گفتگو", key="clear_history"):
+                chatbot.clear_history()
+                st.success("تاریخچه گفتگو پاک شد! 🗑️")
+                st.experimental_rerun()
+            
+            if st.button("خروج", key="logout"):
+                st.session_state.admin_logged_in = False
                 st.experimental_rerun()
-            else:
-                st.error("نام کاربری یا رمز عبور اشتباه است")
-else:
-    if st.button("ورود به ادمین"):
-        st.session_state["show_popup"] = True
-
-if st.session_state["admin_logged_in"]:
-    st.subheader("داشبورد مدیر")
-    if st.button("🗑️ حذف تاریخچه گفتگو"):
-        chatbot.clear_history()
-        st.success("تاریخچه گفتگو حذف شد.")
-        st.experimental_rerun()
-
-    # لینک به فایل داشبورد
-    if os.path.exists("admin_dashboard.py"):
-        st.markdown("[ورود به داشبورد](./admin_dashboard.py)", unsafe_allow_html=True)
-
-# نمایش چت‌باکس
-st.markdown("<div class='chat-container'><div class='header'>Chat with us</div><div class='chat-body'>", unsafe_allow_html=True)
-
-# نمایش تاریخچه گفتگو
-for sender, message in chatbot.conversation_history:
-    align_class = "user" if sender == "شما" else "bot"
-    st.markdown(f"<div class='message {align_class}'><strong>{sender}:</strong> {message}</div>", unsafe_allow_html=True)
-
-st.markdown("</div><div class='footer'><input type='text' placeholder='Type a message...' id='user_message'/><span class='icon'>📎</span><span class='send-btn'>🚀</span></div></div>", unsafe_allow_html=True)
-
-user_message = st.text_input("پیام خود را اینجا بنویسید...", key="user_message", label_visibility="collapsed")
-
-if st.button("ارسال"):
-    if user_message:
-        chatbot.chat_response(user_message)
-        st.experimental_rerun()
-
-if st.button("پاک کردن گفتگو") and not chatbot.admin_logged_in:
-    chatbot.clear_history()
-    st.experimental_rerun()
+        
+        st.markdown("</div>", unsafe_allow_html=True)
+    
+    # بخش اصلی چت
+    st.title("💬 چت‌بات هوشمند")
+    st.markdown("<div class='chat-container'>", unsafe_allow_html=True)
+    
+    # نمایش پیام‌ها
+    for msg in st.session_state.messages:
+        message_class = "user-message" if msg["role"] == "user" else "bot-message"
+        st.markdown(f"""
+            <div class='message {message_class}'>
+                <div class='message-content'>{msg["content"]}</div>
+            </div>
+        """, unsafe_allow_html=True)
+    
+    st.markdown("</div>", unsafe_allow_html=True)
+    
+    # بخش ورود پیام
+    st.markdown("<div class='input-container'>", unsafe_allow_html=True)
+    col1, col2 = st.columns([4, 1])
+    
+    with col1:
+        user_input = st.text_input("", placeholder="پیام خود را اینجا بنویسید...", key="user_input")
+    
+    with col2:
+        if st.button("ارسال", key="send"):
+            if user_input:
+                chatbot.chat_response(user_input)
+                st.experimental_rerun()
+    
+    st.markdown("</div>", unsafe_allow_html=True)
+
+if __name__ == "__main__":
+    chatbot = ModernChatbot()
+    main()