Update src/streamlit_app.py

src/streamlit_app.py

@@ -3,163 +3,122 @@ from openai import OpenAI
 import time
 import json
 
-# إعداد الصفحة - تبسيط التصميم
+# إعداد الصفحة
 st.set_page_config(page_title="Genisi - Chatbot", page_icon="🤖", layout="wide")
 
-# تطبيق الأنماط CSS الموحدة
-st.markdown("""
+# اختيار الوضع (فاتح/داكن) من الشريط الجانبي
+with st.sidebar:
+    theme = st.radio("🎨 الوضع", ["فاتح", "داكن"], index=0)
+
+# تطبيق الأنماط حسب الوضع المختار
+if theme == "فاتح":
+    bg_color = "#FFFFFF"  # أبيض كامل للخلفية
+    text_color = "#000000"  # أسود كامل للنصوص
+    border_color = "#E0E0E0"  # رمادي فاتح جداً للحدود فقط
+    secondary_bg = "#FFFFFF"  # نفس الأبيض
+else:  # داكن
+    bg_color = "#000000"  # أسود كامل للخلفية
+    text_color = "#FFFFFF"  # أبيض كامل للنصوص
+    border_color = "#333333"  # رمادي غامق جداً للحدود فقط
+    secondary_bg = "#000000"  # نفس الأسود
+
+# CSS بسيط جداً - لون واحد فقط
+st.markdown(f"""
 <style>
-    /* تنسيق عام - لون موحد */
-    .stApp {
-        background-color: #1E1E1E;  /* لون خلفية موحد */
-    }
+    /* تنسيق عام - لون واحد فقط */
+    .stApp, section[data-testid="stSidebar"], .stMarkdown, 
+    div[data-testid="stVerticalBlock"], div[data-testid="stChatMessage"] {{
+        background-color: {bg_color} !important;
+    }}
     
-    /* تنسيق الشريط الجانبي - نفس لون الخلفية */
-    section[data-testid="stSidebar"] {
-        background-color: #1E1E1E;  /* نفس لون الخلفية الرئيسية */
-        border-left: 1px solid #333333;  /* حدود خفيفة فقط */
-    }
+    /* جميع النصوص بلون واحد */
+    p, h1, h2, h3, h4, h5, h6, label, span, div, .stChatMessage {{
+        color: {text_color} !important;
+    }}
     
-    /* إخفاء الحدود بين العناصر */
-    .stMarkdown, .stChatMessage, div[data-testid="stVerticalBlock"] {
-        background-color: #1E1E1E;
-    }
+    /* حدود بسيطة جداً للعناصر */
+    section[data-testid="stSidebar"] {{
+        border-left: 1px solid {border_color};
+    }}
     
-    /* تنسيق جميع الأزرار - لون موحد مع تغيير خفيف عند التحويم */
-    .stButton button {
-        background-color: #2D2D2D;
-        color: #E0E0E0;
-        border: 1px solid #404040;
+    /* الأزرار - بدون خلفية مميزة */
+    .stButton button {{
+        background-color: {bg_color};
+        color: {text_color};
+        border: 1px solid {border_color};
         border-radius: 5px;
         width: 100%;
         text-align: right;
-        transition: background-color 0.2s;
-    }
+    }}
     
-    .stButton button:hover {
-        background-color: #3D3D3D;  /* تغيير خفيف فقط عند التحويم */
-        border-color: #505050;
-    }
+    .stButton button:hover {{
+        background-color: {bg_color};
+        border-color: {text_color};
+    }}
     
-    /* تنسيق عنوان الشات بوت - بدون ألوان مميزة */
-    .chat-title {
+    /* عنوان الشات */
+    .chat-title {{
         font-size: 24px;
         font-weight: 600;
-        color: #E0E0E0;
+        color: {text_color};
         margin-bottom: 20px;
         padding: 10px 20px;
-        border-bottom: 1px solid #333333;
+        border-bottom: 1px solid {border_color};
         text-align: center;
-    }
+    }}
     
-    /* إزالة اللون المميز من الاسم */
-    .chat-title span {
-        color: #E0E0E0;  /* نفس لون النص العادي */
-    }
-    
-    /* تنسيق معلومات الم developer - نفس اللون */
-    .developer-info {
+    /* معلومات المطور */
+    .developer-info {{
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
         text-align: center;
         padding: 10px;
-        background-color: #1E1E1E;
-        color: #808080;
+        background-color: {bg_color};
+        color: {text_color};
         font-size: 12px;
-        border-top: 1px solid #333333;
+        border-top: 1px solid {border_color};
         z-index: 999;
-    }
-    
-    /* تنسيق رسائل الشات - لون موحد */
-    .stChatMessage {
-        background-color: #1E1E1E;
-        border: none;
-    }
+    }}
     
-    /* تنسيق رسالة المستخدم */
-    div[data-testid="stChatMessage"]:has(div[data-testid="chatAvatarIcon-user"]) {
-        background-color: #2A2A2A;  /* لون مختلف قليلاً للتمييز البسيط */
-    }
-    
-    /* تنسيق رسالة المساعد */
-    div[data-testid="stChatMessage"]:has(div[data-testid="chatAvatarIcon-assistant"]) {
-        background-color: #1E1E1E;
-    }
-    
-    /* تنسيق مربع الإدخال */
-    .stChatInputContainer {
-        background-color: #2D2D2D;
-        border: 1px solid #404040;
+    /* مربع الإدخال */
+    .stChatInputContainer {{
+        background-color: {bg_color};
+        border: 1px solid {border_color};
         border-radius: 5px;
-    }
-    
-    .stChatInputContainer input {
-        background-color: #2D2D2D;
-        color: #E0E0E0;
-    }
-    
-    /* تنسيق جميع النصوص - لون موحد */
-    p, h1, h2, h3, h4, h5, h6, label, span {
-        color: #E0E0E0 !important;
-    }
-    
-    /* تنسيق الروابط - بدون لون مميز */
-    a {
-        color: #B0B0B0 !important;
-        text-decoration: underline;
-    }
-    
-    a:hover {
-        color: #D0D0D0 !important;
-    }
-    
-    /* تنسيق الأفاتار - ألوان رمادية */
-    div[data-testid="chatAvatarIcon-user"] {
-        background-color: #404040 !important;
-        color: #E0E0E0 !important;
-    }
+    }}
     
-    div[data-testid="chatAvatarIcon-assistant"] {
-        background-color: #505050 !important;
-        color: #E0E0E0 !important;
-    }
+    .stChatInputContainer input {{
+        background-color: {bg_color};
+        color: {text_color};
+    }}
     
-    /* إزالة الألوان المميزة من العناصر التفاعلية */
-    .stRadio div[role="radiogroup"] {
-        color: #E0E0E0;
-    }
+    /* إزالة أي ألوان مميزة من الأفاتار */
+    div[data-testid="chatAvatarIcon-user"],
+    div[data-testid="chatAvatarIcon-assistant"] {{
+        background-color: {border_color} !important;
+        color: {text_color} !important;
+        border: 1px solid {border_color};
+    }}
     
-    .stRadio div[data-testid="stMarkdownContainer"] p {
-        color: #E0E0E0 !important;
-    }
+    /* خط فاصل بسيط */
+    hr {{
+        border-color: {border_color} !important;
+    }}
     
-    /* تبسيط أزرار الحذف والنسخ */
-    button[kind="secondary"] {
-        background-color: #2D2D2D !important;
-        border: 1px solid #404040 !important;
-        color: #B0B0B0 !important;
-    }
+    /* رسائل الشات - بدون تمييز */
+    div[data-testid="stChatMessage"] {{
+        border: none;
+        border-bottom: 1px solid {border_color};
+    }}
     
-    button[kind="secondary"]:hover {
-        background-color: #3D3D3D !important;
-        color: #E0E0E0 !important;
-    }
+    /* إزالة أي ألوان من الروابط */
+    a {{
+        color: {text_color} !important;
+        text-decoration: underline;
+    }}
 </style>
-
-<script>
-// دالة لحفظ المحادثات في localStorage
-function saveConversations(conversations) {
-    localStorage.setItem('genisi_conversations', JSON.stringify(conversations));
-}
-
-// دالة لتحميل المحادثات من localStorage
-function loadConversations() {
-    const saved = localStorage.getItem('genisi_conversations');
-    return saved ? JSON.parse(saved) : [];
-}
-</script>
 """, unsafe_allow_html=True)
 
 # مفتاح API
@@ -196,10 +155,10 @@ if (conversations) {
 
 # الشريط الجانبي - قائمة المحادثات
 with st.sidebar:
-    st.markdown('<p style="color: #E0E0E0; font-size: 20px; font-weight: bold; text-align: center; padding: 20px 20px 5px;">🤖 Genisi</p>', unsafe_allow_html=True)
-    st.markdown('<p style="color: #808080; text-align: center; margin-top: -5px;">by AnesNT</p>', unsafe_allow_html=True)
+    st.markdown(f'<p style="color: {text_color}; font-size: 20px; font-weight: bold; text-align: center; padding: 20px 20px 5px;">🤖 Genisi</p>', unsafe_allow_html=True)
+    st.markdown(f'<p style="color: {text_color}; text-align: center; margin-top: -5px;">by AnesNT</p>', unsafe_allow_html=True)
     
-    # زر محادثة جديدة - بنفس التصميم الموحد
+    # زر محادثة جديدة
     if st.button("➕ محادثة جديدة", use_container_width=True):
         new_chat = {
             "id": str(time.time()),
@@ -235,7 +194,7 @@ with st.sidebar:
             # تاريخ المحادثة
             created_at = conv.get("created_at", "")
             
-            # تنسيق المحادثة - بدون تمييز لوني
+            # تنسيق المحادثة
             col1, col2, col3 = st.columns([5, 1, 1])
             
             with col1:
@@ -272,14 +231,14 @@ with st.sidebar:
                     
                     st.rerun()
             
-            # عرض تاريخ المحادثة بنفس اللون
+            # عرض تاريخ المحادثة
             if created_at:
-                st.markdown(f'<p style="color: #666666; font-size: 11px; margin: -5px 0 10px 25px;">{created_at}</p>', unsafe_allow_html=True)
+                st.markdown(f'<p style="color: {text_color}; font-size: 11px; margin: -5px 0 10px 25px;">{created_at}</p>', unsafe_allow_html=True)
     else:
-        st.markdown('<p style="color: #666666; text-align: center; padding: 20px;">لا توجد محادثات سابقة</p>', unsafe_allow_html=True)
+        st.markdown(f'<p style="color: {text_color}; text-align: center; padding: 20px;">لا توجد محادثات سابقة</p>', unsafe_allow_html=True)
 
 # المحتوى الرئيسي
-st.markdown('<div class="chat-title">🤖 <span>Genisi</span> - AI Assistant</div>', unsafe_allow_html=True)
+st.markdown(f'<div class="chat-title">🤖 Genisi - AI Assistant by AnesNT</div>', unsafe_allow_html=True)
 
 # عرض المحادثة الحالية
 for msg in st.session_state.messages:
@@ -362,4 +321,4 @@ if prompt := st.chat_input("اكتب سؤالك هنا..."):
             st.error(f"حدث خطأ: {str(e)}")
 
 # معلومات المطور
-st.markdown('<div class="developer-info">تم التطوير بواسطة AnesNT - الإصدار 1.55</div>', unsafe_allow_html=True)
+st.markdown(f'<div class="developer-info">تم التطوير بواسطة AnesNT</div>', unsafe_allow_html=True)