Update app.py

app.py

@@ -1,51 +1,58 @@
 import streamlit as st
+from datetime import datetime
 import time
 import random
 
-# تنظیمات استایل مدرن با گلس مورفیسم و نئومورفیسم
-MODERN_CSS = """
+CUSTOM_CSS = """
 <style>
     @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;
+        --primary-bg: #f0f2f5;
+        --chat-bg: #ffffff;
+        --primary-color: #2979ff;
+        --secondary-color: #f50057;
+        --text-primary: #262626;
+        --text-secondary: #666666;
     }
 
-    .stApp {
-        background: linear-gradient(45deg, #e6e9f0 0%, #eef1f5 100%);
-        font-family: 'Vazirmatn', sans-serif;
+    body {
+        font-family: 'Vazirmatn', sans-serif !important;
+        background-color: var(--primary-bg) !important;
+        color: var(--text-primary);
+    }
+
+    .main-header {
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        color: white;
+        padding: 1rem;
+        border-radius: 15px;
+        margin-bottom: 2rem;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        text-align: center;
     }
 
-    .chat-container {
-        background: var(--glass-bg);
-        backdrop-filter: blur(4px);
-        -webkit-backdrop-filter: blur(4px);
+    .chat-window {
+        background: var(--chat-bg);
         border-radius: 20px;
-        border: 1px solid var(--glass-border);
-        box-shadow: 0 8px 32px 0 var(--shadow-color);
-        padding: 20px;
-        margin: 20px 0;
+        padding: 1.5rem;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        max-height: 600px;
+        overflow-y: auto;
+        margin-bottom: 2rem;
     }
 
     .message {
         display: flex;
-        margin: 15px 0;
-        animation: fadeIn 0.5s ease-out;
+        margin-bottom: 1.5rem;
+        animation: fadeIn 0.3s ease-in-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);
+        padding: 1rem 1.5rem;
+        border-radius: 15px;
+        position: relative;
     }
 
     .user-message {
@@ -55,8 +62,8 @@ MODERN_CSS = """
     .user-message .message-content {
         background: var(--primary-color);
         color: white;
-        margin-left: auto;
         border-bottom-right-radius: 5px;
+        margin-left: auto;
     }
 
     .bot-message {
@@ -64,51 +71,62 @@ MODERN_CSS = """
     }
 
     .bot-message .message-content {
-        background: var(--glass-bg);
-        border: 1px solid var(--glass-border);
-        color: var(--text-color);
+        background: #f1f1f1;
+        color: var(--text-primary);
         border-bottom-left-radius: 5px;
     }
 
-    .input-container {
-        background: var(--glass-bg);
-        backdrop-filter: blur(4px);
+    .timestamp {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        margin-top: 0.25rem;
+        text-align: right;
+    }
+
+    .input-area {
+        background: white;
+        padding: 1rem;
         border-radius: 15px;
-        border: 1px solid var(--glass-border);
-        padding: 10px;
-        margin-top: 20px;
-        display: flex;
-        align-items: center;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        margin-top: 1rem;
     }
 
     .stTextInput input {
-        background: rgba(255, 255, 255, 0.1) !important;
-        border: none !important;
-        padding: 10px 15px !important;
+        border: 2px solid #e0e0e0 !important;
         border-radius: 10px !important;
-        color: var(--text-color) !important;
-        backdrop-filter: blur(4px) !important;
+        padding: 0.75rem 1rem !important;
+        font-size: 1rem !important;
+        transition: all 0.3s ease;
         direction: rtl;
     }
 
+    .stTextInput input:focus {
+        border-color: var(--primary-color) !important;
+        box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.2) !important;
+    }
+
     .stButton > button {
-        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)) !important;
+        background: var(--primary-color) !important;
         color: white !important;
-        border: none !important;
         border-radius: 10px !important;
-        padding: 10px 25px !important;
+        padding: 0.75rem 2rem !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;
+        font-weight: 500 !important;
+        transition: all 0.3s ease !important;
+        border: none !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;
+        box-shadow: 0 4px 8px rgba(41, 121, 255, 0.3) !important;
+    }
+
+    .typing-indicator {
+        padding: 1rem;
+        background: #f1f1f1;
+        border-radius: 10px;
+        margin-bottom: 1rem;
+        animation: pulse 1.5s infinite;
     }
 
     @keyframes fadeIn {
@@ -116,127 +134,172 @@ MODERN_CSS = """
         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;
+    @keyframes pulse {
+        0% { opacity: 0.5; }
+        50% { opacity: 1; }
+        100% { opacity: 0.5; }
     }
 
-    .admin-panel h3 {
-        color: var(--primary-color);
-        font-weight: 500;
-        margin-bottom: 15px;
+    .status-bar {
+        background: rgba(255, 255, 255, 0.9);
+        padding: 0.5rem 1rem;
+        border-radius: 10px;
+        margin-bottom: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 0.9rem;
+        color: var(--text-secondary);
+    }
+
+    .prompt-suggestions {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        margin: 1rem 0;
+    }
+
+    .prompt-suggestion {
+        background: #f1f1f1;
+        padding: 0.5rem 1rem;
+        border-radius: 20px;
+        font-size: 0.9rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .prompt-suggestion:hover {
+        background: var(--primary-color);
+        color: white;
     }
 </style>
 """
 
-class ModernChatbot:
+class EnhancedChatbot:
     def __init__(self):
         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
-            
+        if 'last_activity' not in st.session_state:
+            st.session_state.last_activity = datetime.now()
+        
+    def format_timestamp(self):
+        return datetime.now().strftime("%H:%M")
+        
+    def get_bot_status(self):
+        return "🟢 آنلاین" if (datetime.now() - st.session_state.last_activity).seconds < 300 else "🔴 آفلاین"
+        
     def chat_response(self, message):
         if not message.strip():
             return
             
-        responses = [
-            "چطور می‌تونم کمکتون کنم؟",
-            "متوجه شدم. لطفاً بیشتر توضیح بدید.",
-            "بله، کاملاً درسته. می‌تونم راهنماییتون کنم.",
-            "این موضوع جالبیه. نظر شما چیه؟"
-        ]
-        
-        st.session_state.messages.append({"role": "user", "content": message})
+        # اضافه کردن پیام کاربر
+        timestamp = self.format_timestamp()
+        st.session_state.messages.append({
+            "role": "user",
+            "content": message,
+            "timestamp": timestamp
+        })
         
         # شبیه‌سازی تایپ کردن ربات
         with st.empty():
-            for i in range(3):
-                time.sleep(0.3)
-                st.write("..." + "." * i)
+            for _ in range(3):
+                time.sleep(0.5)
+                st.write("در حال تایپ...")
                 
+        # پاسخ ربات
+        responses = [
+            "بله، متوجه شدم. چطور می‌تونم کمکتون کنم؟",
+            "این موضوع جالبیه! می‌تونید بیشتر توضیح بدید؟",
+            "من اینجا هستم تا به شما کمک کنم. سوال دیگه‌ای دارید؟",
+            "اجازه بدید بیشتر در این مورد صحبت کنیم...",
+        ]
+        
         bot_response = random.choice(responses)
-        st.session_state.messages.append({"role": "assistant", "content": bot_response})
-
-    def clear_history(self):
-        st.session_state.messages = []
+        st.session_state.messages.append({
+            "role": "assistant",
+            "content": bot_response,
+            "timestamp": self.format_timestamp()
+        })
+        
+        st.session_state.last_activity = datetime.now()
 
 def main():
     st.set_page_config(
-        page_title="چت‌بات هوشمند",
-        page_icon="🤖",
-        layout="centered",
-        initial_sidebar_state="expanded"
+        page_title="چت‌بات هوشمند | پشتیبانی آنلاین",
+        page_icon="💬",
+        layout="wide"
     )
     
-    # اعمال CSS سفارشی
-    st.markdown(MODERN_CSS, unsafe_allow_html=True)
+    st.markdown(CUSTOM_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()
-        
-        st.markdown("</div>", unsafe_allow_html=True)
+    # هدر اصلی
+    st.markdown("""
+        <div class="main-header">
+            <h1>🤖 چت‌بات هوشمند</h1>
+            <p>پاسخگوی 24 ساعته شما هستیم</p>
+        </div>
+    """, unsafe_allow_html=True)
     
-    # بخش اصلی چت
-    st.title("💬 چت‌بات هوشمند")
-    st.markdown("<div class='chat-container'>", unsafe_allow_html=True)
+    # ستون‌بندی صفحه
+    col1, col2 = st.columns([3, 1])
     
-    # نمایش پیام‌ها
-    for msg in st.session_state.messages:
-        message_class = "user-message" if msg["role"] == "user" else "bot-message"
+    with col1:
+        # نوار وضعیت
         st.markdown(f"""
-            <div class='message {message_class}'>
-                <div class='message-content'>{msg["content"]}</div>
+            <div class="status-bar">
+                <span>{chatbot.get_bot_status()}</span>
+                <span>آخرین فعالیت: {chatbot.format_timestamp()}</span>
             </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:
+        
+        # پنجره چت
+        st.markdown('<div class="chat-window">', 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 class="timestamp">{msg["timestamp"]}</div>
+                    </div>
+                </div>
+            """, unsafe_allow_html=True)
+        
+        st.markdown('</div>', unsafe_allow_html=True)
+        
+        # بخش ورودی پیام
+        st.markdown('<div class="input-area">', unsafe_allow_html=True)
+        
+        # پیشنهادات سریع
+        suggestions = ["سلام", "درباره خدمات", "تماس با ما", "قیمت‌ها"]
+        st.markdown('<div class="prompt-suggestions">', unsafe_allow_html=True)
+        for suggestion in suggestions:
+            st.markdown(f'<span class="prompt-suggestion">{suggestion}</span>', unsafe_allow_html=True)
+        st.markdown('</div>', unsafe_allow_html=True)
+        
+        # ورودی پیام
         user_input = st.text_input("", placeholder="پیام خود را اینجا بنویسید...", key="user_input")
-    
-    with col2:
-        if st.button("ارسال", key="send"):
+        if st.button("ارسال"):
             if user_input:
                 chatbot.chat_response(user_input)
                 st.experimental_rerun()
+        
+        st.markdown('</div>', unsafe_allow_html=True)
     
-    st.markdown("</div>", unsafe_allow_html=True)
+    # ستون اطلاعات جانبی
+    with col2:
+        st.markdown("""
+            <div style="background: white; padding: 1rem; border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+                <h3>💡 راهنمای استفاده</h3>
+                <ul>
+                    <li>برای شروع گفتگو کافیست پیام خود را تایپ کنید</li>
+                    <li>از پیشنهادات سریع بالای صفحه استفاده کنید</li>
+                    <li>پشتیبانی 24 ساعته در خدمت شماست</li>
+                </ul>
+            </div>
+        """, unsafe_allow_html=True)
 
 if __name__ == "__main__":
-    chatbot = ModernChatbot()
+    chatbot = EnhancedChatbot()
     main()