Update src/streamlit_app.py

src/streamlit_app.py

@@ -2,99 +2,273 @@ import streamlit as st
 import os
 import requests
 import hmac
-import re
 
 # ──────────────────────────────────────────────
-# 1. إعدادات الصفحة والستايل
+# PAGE CONFIG
 # ──────────────────────────────────────────────
-st.set_page_config(page_title="شركة يوسف علاء 🤖", page_icon="🏢", layout="wide")
+st.set_page_config(
+    page_title="AI Agent System 🤖",
+    page_icon="🤖",
+    layout="wide",
+    initial_sidebar_state="expanded",
+)
 
+# ──────────────────────────────────────────────
+# CUSTOM CSS – Chat Bubbles (WhatsApp / Telegram style)
+# ──────────────────────────────────────────────
 st.markdown("""
 <style>
-[data-testid="stChatMessageContent"] { font-size: 16px; direction: rtl; text-align: right; }
-section[data-testid="stSidebar"] { background: #1a1a2e; color: white; }
+/* General */
+body { font-family: 'Segoe UI', sans-serif; }
+
+/* User bubble */
+[data-testid="stChatMessageContent"]:has(+ div [data-testid="stChatMessageAvatar"] svg) {
+    background: #DCF8C6;
+    border-radius: 18px 18px 4px 18px;
+    padding: 10px 14px;
+    max-width: 75%;
+    margin-left: auto;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+}
+
+/* Assistant bubble */
+div[data-testid="stChatMessage"]:not([class*="user"]) [data-testid="stChatMessageContent"] {
+    background: #FFFFFF;
+    border-radius: 18px 18px 18px 4px;
+    padding: 10px 14px;
+    max-width: 75%;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+    border: 1px solid #e0e0e0;
+}
+
+/* Sidebar styling */
+section[data-testid="stSidebar"] {
+    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    color: white;
+}
+section[data-testid="stSidebar"] * { color: white !important; }
+section[data-testid="stSidebar"] .stRadio label { 
+    font-size: 15px; 
+    padding: 4px 0;
+}
+
+/* Input box */
+.stChatInputContainer textarea {
+    border-radius: 25px !important;
+    border: 2px solid #0f3460 !important;
+    padding: 10px 18px !important;
+    font-size: 15px !important;
+}
+
+/* Main header */
+h1 { color: #0f3460 !important; }
 </style>
 """, unsafe_allow_html=True)
 
 # ──────────────────────────────────────────────
-# 2. سحب المفاتيح والروابط (التعديل المهم)
+# SECRETS / ENV VARS
 # ──────────────────────────────────────────────
-HF_TOKEN = os.getenv("HF_TOKEN", "")
-JINA_KEY = os.getenv("JINA_KEY", "")
-PASSWORD = "132733yy"
-
-# ده الرابط اللي هيحل مشكلة الـ 404 والـ 410 اللي في الصور
-HF_API_URL = "https://api-inference.huggingface.co/models/meta-llama/Meta-Llama-3-8B-Instruct"
+HF_TOKEN  = os.getenv("HF_TOKEN", "")
+JINA_KEY  = os.getenv("JINA_KEY", "")
+PASSWORD  = "132733yy"
+MODEL_ID  = "meta-llama/Llama-3.1-8B-Instruct:cerebras"
+HF_API    = "https://router.huggingface.co/v1/chat/completions"
 
 # ──────────────────────────────────────────────
-# 3. نظام الدخول
+# LOGIN GATE
 # ──────────────────────────────────────────────
-if "authenticated" not in st.session_state:
-    st.session_state["authenticated"] = False
+def check_password() -> bool:
+    """Returns True only after correct password."""
+    if st.session_state.get("authenticated"):
+        return True
 
-if not st.session_state["authenticated"]:
-    st.title("🔐 مقر الشركة - يوسف علاء")
-    pwd = st.text_input("ادخل الباسورد السري:", type="password")
+    st.markdown("## 🔐 ادخل الباسورد عشان تكمل")
+    pwd = st.text_input("الباسورد:", type="password", key="login_input")
     if st.button("دخول"):
-        if pwd == PASSWORD:
+        if hmac.compare_digest(pwd, PASSWORD):
             st.session_state["authenticated"] = True
             st.rerun()
         else:
-            st.error("الباسورد غلط!")
+            st.error("❌ الباسورد غلط! حاول تاني.")
+    return False
+
+if not check_password():
     st.stop()
 
 # ──────────────────────────────────────────────
-# 4. تعريف الموظفين (الـ Agents)
+# AGENT DEFINITIONS
 # ──────────────────────────────────────────────
 AGENTS = {
-    "🏆 CEO - المدير": "أنت مدير شركة AI، ترد بالعامية المصرية بذكاء.",
-    "🔍 Researcher - الباحث": "أنت باحث، تلخص الروابط باستخدام Jina وترد بالعامية.",
-    "💻 Coder - المبرمج": "أنت مبرمج خبير، تكتب كود وتشرحه بالعامية المصرية.",
-    "📚 Tutor - الدحيح القناوي": "أنت مدرس يوسف، بتشرح منهج أولى ثانوي بلهجة قناوية ممتعة."
+    "🏆 CEO – المدير التنفيذي": {
+        "icon": "🏆",
+        "prompt": (
+            "أنت المدير التنفيذي (CEO) لشركة AI ناجحة. بتتكلم بالعامية المصرية الذكية. "
+            "وظيفتك: تحليل المواقف بعيون استراتيجية، تعطي قرارات واضحة وجريئة، "
+            "وتوجّه الفريق بحسم وثقة. بتحب تضرب أمثلة من واقع الأعمال. "
+            "مبتألفش معلومات أبدًا – لو مش عارف حاجة تقول 'محتاج أتحقق الأول'. "
+            "ردودك منطقية، مختصرة، وفيها قيمة حقيقية."
+        )
+    },
+    "🔍 Researcher – الباحث": {
+        "icon": "🔍",
+        "prompt": (
+            "أنت باحث محترف بتتكلم بالعامية المصرية. "
+            "وظيفتك تحليل المعلومات والروابط اللي بتتدخل ليك بدقة شديدة. "
+            "لو المستخدم كتب رابط (URL) في رسالته، هتقرأه وتحلله وتلخصه. "
+            "بتقدم معلومات موثوقة مع مصادرها. لو مش عندك مصدر، صرّح بده بوضوح. "
+            "أسلوبك علمي لكن مبسّط ومفهوم للعامة."
+        )
+    },
+    "💻 Coder – المبرمج": {
+        "icon": "💻",
+        "prompt": (
+            "أنت مبرمج خبير بتتكلم بالعامية المصرية مع مصطلحات تقنية إنجليزية. "
+            "بتكتب كود نظيف، موثق، وشغّال من أول مرة. "
+            "بتشرح كل سطر مهم بتعليق مفيد. لو الكود فيه bug محتمل، تنبّه عليه فورًا. "
+            "مبتختارش أسهل طريقة – بتختار الأصح والأقوى. "
+            "لو السؤال غامض، اسأل عن البيئة والمطلوب بالتفصيل الأول."
+        )
+    },
+    "📚 Tutor – المعلم": {
+        "icon": "📚",
+        "prompt": (
+            "أنت معلم متميز بتشرح بالعامية المصرية بطريقة ممتعة وسهلة. "
+            "بتبدأ من الصفر مع المبتدئين وبتعمّق مع المتقدمين. "
+            "بتستخدم أمثلة من الحياة اليومية عشان المفاهيم الصعبة تبقى واضحة. "
+            "ما بتكدبش أبدًا ولا بتختلق أمثلة – لو مش متأكد تقول كده صراحة. "
+            "في الآخر دايمًا بتسأل سؤال تتأكد إن الطالب فهم."
+        )
+    },
 }
 
+# ──────────────────────────────────────────────
+# SIDEBAR – Agent Selector
+# ──────────────────────────────────────────────
 with st.sidebar:
-    st.title("👥 فريق العمل")
-    agent_name = st.sidebar.radio("اختار الموظف:", list(AGENTS.keys()))
-    if st.sidebar.button("🗑️ مسح الشات"):
-        st.session_state.messages = []
+    st.markdown("## 🤖 اختار موظفك")
+    st.markdown("---")
+    agent_name = st.radio(
+        "الموظفين المتاحين:",
+        list(AGENTS.keys()),
+        key="agent_selector"
+    )
+    st.markdown("---")
+    st.markdown(f"**الموظف الحالي:**\n\n{agent_name}")
+    st.markdown("---")
+    st.markdown("**🔑 حالة الـ Keys:**")
+    st.markdown(f"HF_TOKEN: {'✅' if HF_TOKEN else '❌ مش موجود'}")
+    st.markdown(f"JINA_KEY: {'✅' if JINA_KEY else '⚠️ اختياري'}")
+    st.markdown("---")
+    if st.button("🗑️ امسح المحادثة"):
+        st.session_state["messages"] = []
         st.rerun()
 
+agent = AGENTS[agent_name]
+
 # ──────────────────────────────────────────────
-# 5. منطق الشات والـ API
+# MAIN UI
 # ──────────────────────────────────────────────
+st.markdown(f"# {agent_name}")
+st.markdown(f"*{agent['prompt'][:80]}...*")
+st.divider()
+
+# Init chat history
 if "messages" not in st.session_state:
-    st.session_state.messages = []
+    st.session_state["messages"] = []
 
-for msg in st.session_state.messages:
-    with st.chat_message(msg["role"]):
+# Render existing messages
+for msg in st.session_state["messages"]:
+    with st.chat_message(msg["role"], avatar="🧑" if msg["role"] == "user" else agent["icon"]):
         st.markdown(msg["content"])
 
-if prompt := st.chat_input("تأمرني بإيه يا مدير؟"):
-    st.session_state.messages.append({"role": "user", "content": prompt})
-    with st.chat_message("user"):
-        st.markdown(prompt)
-
-    with st.chat_message("assistant"):
-        headers = {"Authorization": f"Bearer {HF_TOKEN}"}
-        # استخدمنا هنا الـ Payload التقليدي لضمان التوافق
-        payload = {
-            "inputs": f"System: {AGENTS[agent_name]}\nUser: {prompt}\nAssistant:",
-            "parameters": {"max_new_tokens": 500, "temperature": 0.7}
-        }
-        
-        try:
-            with st.spinner("✍️ جاري التنفيذ..."):
-                response = requests.post(HF_API_URL, headers=headers, json=payload, timeout=20)
-                
-                if response.status_code == 200:
-                    res_data = response.json()
-                    # استخراج النص بذكاء من الرد
-                    full_text = res_data[0].get('generated_text', "")
-                    answer = full_text.split("Assistant:")[-1].strip() if "Assistant:" in full_text else full_text
-                    st.markdown(answer)
-                    st.session_state.messages.append({"role": "assistant", "content": answer})
-                else:
-                    st.error(f"❌ السيرفر مش مستجيب (كود: {response.status_code})")
-        except Exception as e:
-            st.error(f"🤯 حصلت مشكلة: {e}")
+# ──────────────────────────────────────────────
+# JINA READER – fetch URL content
+# ──────────────────────────────────────────────
+def fetch_url_with_jina(url: str) -> str:
+    """Use Jina AI Reader to extract clean text from a URL."""
+    try:
+        headers = {}
+        if JINA_KEY:
+            headers["Authorization"] = f"Bearer {JINA_KEY}"
+        resp = requests.get(f"https://r.jina.ai/{url}", headers=headers, timeout=15)
+        if resp.status_code == 200:
+            # Limit to first 3000 chars to avoid token overflow
+            return resp.text[:3000]
+        return f"[تعذّر قراءة الرابط: HTTP {resp.status_code}]"
+    except Exception as e:
+        return f"[خطأ في قراءة الرابط: {e}]"
+
+def extract_urls(text: str) -> list[str]:
+    """Extract URLs from user message."""
+    import re
+    return re.findall(r'https?://[^\s]+', text)
+
+# ──────────────────────────────────────────────
+# LLM CALL – HF Inference API
+# ──────────────────────────────────────────────
+def call_llm(messages: list[dict]) -> str:
+    """Call HuggingFace Inference API with chat messages."""
+    if not HF_TOKEN:
+        return "❌ مفيش HF_TOKEN! حط الـ Token في الـ Secrets عشان أشتغل."
+
+    headers = {
+        "Authorization": f"Bearer {HF_TOKEN}",
+        "Content-Type": "application/json",
+    }
+    payload = {
+        "model": MODEL_ID,
+        "messages": messages,
+        "max_tokens": 1024,
+        "temperature": 0.7,
+        "stream": False,
+    }
+    try:
+        resp = requests.post(HF_API, headers=headers, json=payload, timeout=60)
+        resp.raise_for_status()
+        data = resp.json()
+        return data["choices"][0]["message"]["content"]
+    except requests.exceptions.HTTPError as e:
+        if resp.status_code == 503:
+            return "⏳ النموذج بيتحمّل دلوقتي، استنّى شوية وجرب تاني!"
+        return f"❌ HTTP Error {resp.status_code}: {resp.text[:300]}"
+    except Exception as e:
+        return f"❌ خطأ غير متوقع: {e}"
+
+# ──────────────────────────────────────────────
+# CHAT INPUT & RESPONSE
+# ──────────────────────────────────────────────
+if user_input := st.chat_input(f"اكتب رسالتك لـ {agent_name.split('–')[1].strip()}..."):
+
+    # ── Enrich message if Researcher + URLs
+    enriched_input = user_input
+    if "Researcher" in agent_name:
+        urls = extract_urls(user_input)
+        if urls:
+            fetched_parts = []
+            for url in urls[:2]:  # max 2 URLs per message
+                with st.spinner(f"📡 بقرأ الرابط: {url}"):
+                    content = fetch_url_with_jina(url)
+                fetched_parts.append(f"\n\n[محتوى الرابط {url}]:\n{content}")
+            enriched_input = user_input + "".join(fetched_parts)
+
+    # Show user message
+    st.session_state["messages"].append({"role": "user", "content": user_input})
+    with st.chat_message("user", avatar="🧑"):
+        st.markdown(user_input)
+
+    # Build messages for API
+    api_messages = [{"role": "system", "content": agent["prompt"]}]
+    # Add history (last 10 turns to avoid token overflow)
+    history = st.session_state["messages"][:-1]  # exclude last user msg
+    for m in history[-10:]:
+        api_messages.append({"role": m["role"], "content": m["content"]})
+    # Add current (possibly enriched) user message
+    api_messages.append({"role": "user", "content": enriched_input})
+
+    # Call LLM with spinner
+    with st.chat_message("assistant", avatar=agent["icon"]):
+        with st.spinner("✍️ بفكر..."):
+            response = call_llm(api_messages)
+        st.markdown(response)
+
+    st.session_state["messages"].append({"role": "assistant", "content": response})