Update app.py

app.py

@@ -3,156 +3,237 @@ import time
 import random
 from datetime import datetime
 
-# CSS بهبود یافته با دکمه‌های جدید
-CUSTOM_CSS = """
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
+# تنظیمات صفحه
+st.set_page_config(page_title="چت‌بات هوشمند", page_icon="🤖", layout="wide")
 
-:root {
-    --primary-color: #3b82f6;
-    --secondary-color: #6366f1;
-    --background-color: #f8fafc;
-    --button-bg: #10b981;
-    --button-hover: #0d946b;
-    --button-text: #ffffff;
-}
+# CSS سفارشی برای بهبود ظاهر و انیمیشن‌ها
+st.markdown("""
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap');
 
 body {
     font-family: 'Vazirmatn', sans-serif;
-    background-color: var(--background-color);
-    direction: rtl;
+    background-color: #f8fafc;
 }
 
 .chat-container {
-    max-width: 900px;
-    margin: 2rem auto;
-    background: var(--background-color);
-    border-radius: 1rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    max-width: 800px;
+    margin: auto;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.chat-header {
-    background: linear-gradient(to left, var(--primary-color), var(--secondary-color));
+.header {
+    background: linear-gradient(45deg, #4a90e2, #50e3c2);
     color: white;
-    padding: 1rem;
+    padding: 20px;
     text-align: center;
-    border-radius: 1rem 1rem 0 0;
-    font-size: 1.5rem;
-    font-weight: 600;
+    position: relative;
+}
+
+.header .status {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    color: #10b981;
+    font-weight: bold;
 }
 
 .chat-messages {
+    background: #ffffff;
+    padding: 20px;
     height: 500px;
     overflow-y: auto;
-    padding: 1rem;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
 }
 
 .message {
-    margin-bottom: 1rem;
-    padding: 1rem;
-    border-radius: 0.5rem;
+    margin-bottom: 15px;
+    padding: 10px 15px;
+    border-radius: 12px;
+    max-width: 75%;
+    animation: fadeIn 0.3s;
+    position: relative;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 .message.user {
-    background: #e0e7ff;
-    color: #1e293b;
+    background: #e0f7fa;
+    align-self: flex-end;
 }
 
 .message.bot {
-    background: #f1f5f9;
-    color: #475569;
+    background: #f1f1f1;
+    align-self: flex-start;
+}
+
+.timestamp {
+    font-size: 0.8em;
+    color: #888;
+    margin-top: 5px;
+    text-align: right;
 }
 
 .quick-replies {
     display: flex;
-    gap: 0.5rem;
-    margin-top: 1rem;
     flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 15px;
 }
 
 .quick-reply {
-    background: var(--button-bg);
-    color: var(--button-text);
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
+    background: #4a90e2;
+    color: white;
+    padding: 8px 16px;
+    border-radius: 15px;
     cursor: pointer;
-    transition: all 0.2s;
-    font-size: 0.9rem;
-    text-align: center;
+    font-weight: 500;
+    transition: background 0.3s ease;
 }
 
 .quick-reply:hover {
-    background: var(--button-hover);
-    transform: scale(1.05);
+    background: #357ab7;
+}
+
+.chat-input {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 20px;
+    background: #f8fafc;
+}
+
+.chat-input input[type="text"] {
+    flex-grow: 1;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    font-size: 1rem;
+}
+
+.chat-input button {
+    background: #4a90e2;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s;
 }
+
+.chat-input button:hover {
+    background: #357ab7;
+}
+
+.admin-panel {
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+
+.statistics {
+    padding: 10px 0;
+    border-bottom: 1px solid #ddd;
+}
+
 </style>
-"""
-
-st.markdown(CUSTOM_CSS, unsafe_allow_html=True)
-
-class EnhancedChatbot:
-    def __init__(self):
-        self.conversation_history = []
-        self.quick_replies = [
-            "بخشنامه‌های جدید",
-            "راهنمای استفاده",
-            "تماس با پشتیبانی",
-            "گزارش مشکل"
-        ]
-
-    def chat_response(self, message):
-        """پردازش پیام کاربر و ارائه پاسخ هوشمند"""
-        self.conversation_history.append({'type': 'user', 'message': message})
-        
-        # شبیه‌سازی پاسخ ربات
-        time.sleep(1)
-        response = random.choice([
-            "این بخشنامه جدید است.",
-            "برای استفاده از سیستم، لطفاً مراحل زیر را دنبال کنید.",
-            "با پشتیبانی تماس بگیرید.",
-            "لطفاً مشکل خود را با جزئیات بیان کنید."
-        ])
-        
-        self.conversation_history.append({'type': 'bot', 'message': response})
-
-# تنظیمات اولیه استریملیت
-st.set_page_config(
-    page_title="پاسخگوی هوشمند بخشنامه",
-    page_icon="🤖",
-    layout="wide",
-    initial_sidebar_state="expanded"
-)
-
-# ایجاد نمونه از چت‌بات
-if 'chatbot' not in st.session_state:
-    st.session_state.chatbot = EnhancedChatbot()
-
-# نمایش هدر اصلی
+""", unsafe_allow_html=True)
+
+# داده‌های اولیه
+if 'conversation_history' not in st.session_state:
+    st.session_state.conversation_history = []
+
+if 'is_typing' not in st.session_state:
+    st.session_state.is_typing = False
+
+quick_replies = ["راهنمای استفاده", "تماس با پشتیبانی", "گزارش مشکل", "بخشنامه‌های جدید"]
+
+# توابع چت‌بات
+def get_bot_response(user_message):
+    time.sleep(1)  # شبیه‌سازی تایپ کردن
+    return random.choice(["سلام! چطور می‌تونم کمک کنم؟", "لطفاً سوال خود را مطرح کنید.", "در خدمت شما هستم."])
+
+def add_message(sender, message):
+    st.session_state.conversation_history.append({
+        'sender': sender,
+        'message': message,
+        'timestamp': datetime.now().strftime("%H:%M")
+    })
+
+# هدر
 st.markdown("""
-    <div class="chat-container">
-        <div class="chat-header">پاسخگوی هوشمند بخشنامه</div>
-        <div class="chat-messages" id="chat-messages">
+<div class="header">
+    <h2>چت‌بات هوشمند</h2>
+    <div class="status">آنلاین</div>
+</div>
 """, unsafe_allow_html=True)
 
 # نمایش پیام‌ها
-for message in st.session_state.chatbot.conversation_history:
-    message_class = "user" if message['type'] == 'user' else "bot"
+st.markdown("<div class='chat-container'><div class='chat-messages'>", unsafe_allow_html=True)
+for message in st.session_state.conversation_history:
+    sender_class = "user" if message['sender'] == "user" else "bot"
     st.markdown(f"""
-        <div class="message {message_class}">
-            {message['message']}
+        <div class='message {sender_class}'>
+            <div>{message['message']}</div>
+            <div class='timestamp'>{message['timestamp']}</div>
         </div>
     """, unsafe_allow_html=True)
+st.markdown("</div></div>", unsafe_allow_html=True)
 
 # پاسخ‌های سریع
-st.markdown("""<div class="quick-replies">""", unsafe_allow_html=True)
-for reply in st.session_state.chatbot.quick_replies:
-    st.markdown(f"""<div class="quick-reply">{reply}</div>""", unsafe_allow_html=True)
+st.markdown("<div class='quick-replies'>", unsafe_allow_html=True)
+for reply in quick_replies:
+    if st.button(reply):
+        add_message("user", reply)
+        bot_response = get_bot_response(reply)
+        add_message("bot", bot_response)
+        st.experimental_rerun()
 st.markdown("</div>", unsafe_allow_html=True)
 
-# بخش ورودی پیام
-user_message = st.text_input("پیام خود را بنویسید...", key="user_message")
-if st.button("ارسال پیام") and user_message:
-    st.session_state.chatbot.chat_response(user_message)
+# ورودی کاربر
+st.markdown("<div class='chat-input'>", unsafe_allow_html=True)
+user_message = st.text_input("", placeholder="پیام خود را وارد کنید...", label_visibility="collapsed")
+send_button = st.button("ارسال")
+
+if send_button and user_message:
+    add_message("user", user_message)
+    st.session_state.is_typing = True
+    bot_response = get_bot_response(user_message)
+    add_message("bot", bot_response)
+    st.session_state.is_typing = False
     st.experimental_rerun()
 
 st.markdown("</div>", unsafe_allow_html=True)
+
+# پنل مدیریت در سایدبار
+with st.sidebar:
+    st.markdown("<div class='admin-panel'><h3>پنل مدیریت</h3>", unsafe_allow_html=True)
+
+    # نمایش آمار
+    total_messages = len(st.session_state.conversation_history)
+    user_messages = sum(1 for msg in st.session_state.conversation_history if msg['sender'] == 'user')
+    bot_messages = total_messages - user_messages
+
+    st.markdown(f"""
+    <div class="statistics">پیام‌های کل: {total_messages}</div>
+    <div class="statistics">پیام‌های کاربر: {user_messages}</div>
+    <div class="statistics">پیام‌های ربات: {bot_messages}</div>
+    """, unsafe_allow_html=True)
+
+    # دکمه پاک کردن تاریخچه
+    if st.button("پاک کردن تاریخچه"):
+        st.session_state.conversation_history = []
+        st.experimental_rerun()
+
+    # تنظیمات ظاهری
+    st.markdown("### تنظیمات ظاهری")
+    font_size = st.slider("اندازه فونت", 12, 20, 14)
+    st.markdown(f"<style>.message {{ font-size: {font_size}px; }}</style>", unsafe_allow_html=True)