app.py

app.py

@@ -1,398 +1,648 @@
-# app.py — Clean, fixed, single-file Gradio app for Synchrony
-# Last updated: 2025-11-06
-# Author: (rewritten for Lujain)
-# -------------------------------------------------------
-
 import gradio as gr
 import requests
+import json
 from datetime import datetime
-from typing import Tuple, Any, Dict, List
 
 # ============================================
-# Configuration / Webhook URLs (update if needed)
+# 🌟 SYNCHRONY - STUDENT PORTAL (GEN Z EDITION)
 # ============================================
+
+# Your n8n webhook URLs
 BASE_URL = "https://maryyam.app.n8n.cloud/webhook-test"
 START_SESSION_URL = f"{BASE_URL}/start-session"
 GENERATE_CHALLENGES_URL = f"{BASE_URL}/generate-challenges"
 REQUEST_HINT_URL = f"{BASE_URL}/request-hint"
 
-# Keep a lightweight in-memory "current session" (not persistent)
-current_session: Dict[str, Any] = {"session_id": None, "challenges": None}
+# Google Form URL
+REGISTRATION_FORM = "https://docs.google.com/forms/d/e/1FAIpQLSfJFGx-yd0FPIuRYLUJut3BOOiQ14x_5DYheWpgrUqcHdQaCA/viewform"
+
+# Mock student session (in production, this would be from login)
+current_student = {
+    "name": None,
+    "email": None,
+    "group_id": None,
+    "session_id": None,
+    "team_members": [],
+    "challenges": []
+}
 
+# Mock chat history
+chat_history = []
 
 # ============================================
-# Helper / API functions
+# 🔧 API FUNCTIONS
 # ============================================
-def safe_post(url: str, payload: dict, timeout: int = 30) -> Tuple[bool, Any]:
+
+def lookup_student(email):
+    """Look up student by email and get their group"""
+    # In production, this would query Google Sheets
+    # For demo, we'll use mock data
+    
+    # Mock student data
+    mock_students = {
+        "layla@university.edu": {
+            "name": "Layla Mahmoud",
+            "email": "layla@university.edu",
+            "group_id": "G001",
+            "topic": "Binary Search Trees",
+            "session_id": "S20251106160510"
+        },
+        "omar@university.edu": {
+            "name": "Omar Khalil",
+            "email": "omar@university.edu",
+            "group_id": "G001",
+            "topic": "Linked Lists",
+            "session_id": "S20251106160510"
+        },
+        "khaled@university.edu": {
+            "name": "Khaled Ibrahim",
+            "email": "khaled@university.edu",
+            "group_id": "G001",
+            "topic": "Queues",
+            "session_id": "S20251106160510"
+        }
+    }
+    
+    if email.lower() in mock_students:
+        student = mock_students[email.lower()]
+        current_student.update(student)
+        
+        # Get team members
+        team = [s for s in mock_students.values() if s["group_id"] == student["group_id"]]
+        current_student["team_members"] = team
+        
+        return True, f"✅ Welcome back, {student['name']}!"
+    else:
+        return False, "❌ Email not found. Please register first!"
+
+
+def get_team_info():
+    """Display team information"""
+    if not current_student["name"]:
+        return "⚠️ Please login first!"
+    
+    output = f"## 👥 Your Study Team - {current_student['group_id']}\n\n"
+    output += f"**Session ID:** `{current_student['session_id']}`\n\n"
+    output += "---\n\n"
+    
+    for member in current_student["team_members"]:
+        is_you = " **(YOU)**" if member["email"] == current_student["email"] else ""
+        output += f"### 🎓 {member['name']}{is_you}\n"
+        output += f"**Topic:** {member['topic']}\n"
+        output += f"**Email:** {member['email']}\n\n"
+    
+    return output
+
+
+def load_challenges():
+    """Load challenges for current session"""
+    if not current_student["session_id"]:
+        return "⚠️ No active session. Please login first!"
+    
     try:
-        r = requests.post(url, json=payload, headers={"Content-Type": "application/json"}, timeout=timeout)
-        if r.status_code == 200:
-            try:
-                return True, r.json()
-            except ValueError:
-                return True, r.text
+        response = requests.post(
+            GENERATE_CHALLENGES_URL,
+            json={"session_id": current_student["session_id"]},
+            headers={"Content-Type": "application/json"},
+            timeout=60
+        )
+        
+        if response.status_code == 200:
+            data = response.json()
+            current_student["challenges"] = data.get("challenges", [])
+            
+            output = f"# 🎯 Your Collaborative Challenges\n\n"
+            output += f"💬 **Synco says:** {data.get('synco_message', '')}\n\n"
+            output += "---\n\n"
+            
+            for i, challenge in enumerate(current_student["challenges"], 1):
+                chal = challenge.get('json', challenge)
+                output += f"## 🎯 Challenge {i}\n\n"
+                output += f"{chal.get('description', 'No description')}\n\n"
+                output += f"**📚 Topics:** {chal.get('topics_involved', 'N/A')}\n\n"
+                output += f"💡 *Stuck? Request a hint below!*\n\n"
+                output += "---\n\n"
+            
+            return output
         else:
-            return False, f"Error {r.status_code}: {r.text}"
+            return f"❌ Error loading challenges: {response.status_code}"
+            
     except Exception as e:
-        return False, f"Connection Error: {str(e)}"
-
+        return f"❌ Connection Error: {str(e)}"
 
-def start_session(group_id: str) -> Tuple[str, str]:
-    if not group_id:
-        return "❌ Please enter a Group ID (e.g., G001).", ""
 
-    ok, result = safe_post(START_SESSION_URL, {"group_id": group_id}, timeout=30)
-    if not ok:
-        return f"❌ {result}", ""
-
-    if isinstance(result, dict):
-        session_id = result.get("session_id", "")
-        current_session["session_id"] = session_id
-        students = result.get("students", [])
-        students_list = ", ".join([s.get("name", "Unknown") for s in students]) if students else "No students found"
-
-        message = (
-            "✅ **Session Started!**\n\n"
-            f"**🆔 Session ID:** `{session_id}`\n\n"
-            f"**💬 Synco says:** {result.get('synco_message', 'Welcome!')}\n\n"
-            f"**👥 Students:** {students_list}\n\n"
-            "🎯 Ready to generate challenges!"
+def request_hint(challenge_num, hint_level):
+    """Request a hint for a specific challenge"""
+    if not current_student["session_id"]:
+        return "⚠️ No active session. Please login first!"
+    
+    try:
+        response = requests.post(
+            REQUEST_HINT_URL,
+            json={
+                "session_id": current_student["session_id"],
+                "challenge_number": int(challenge_num),
+                "hint_level": int(hint_level)
+            },
+            headers={"Content-Type": "application/json"},
+            timeout=10
         )
-        return message, session_id
-
-    return f"✅ Session started (response):\n```\n{result}\n```", str(result)
-
-
-def generate_challenges(session_id: str) -> str:
-    sid = session_id or current_session.get("session_id")
-    if not sid:
-        return "❌ Please provide a session ID (or start a session first)."
-
-    ok, result = safe_post(GENERATE_CHALLENGES_URL, {"session_id": sid}, timeout=60)
-    if not ok:
-        return f"❌ {result}"
-
-    if isinstance(result, dict):
-        challenges = result.get("challenges", [])
-        current_session["challenges"] = challenges
-
-        output_lines: List[str] = []
-        output_lines.append("✅ **Challenges Generated!**\n")
-        synco_msg = result.get("synco_message", "")
-        if synco_msg:
-            output_lines.append(f"**💬 Synco says:** {synco_msg}\n")
-        output_lines.append("---\n")
-
-        if not challenges:
-            output_lines.append("_No challenges returned from the API._")
+        
+        if response.status_code == 200:
+            data = response.json()
+            return f"## {data.get('synco_message', '')}\n\n{data.get('hint', '')}"
         else:
-            for i, ch in enumerate(challenges, start=1):
-                ch_json = ch.get("json") if isinstance(ch, dict) else None
-                description = ""
-                topics = ""
-                if isinstance(ch_json, dict):
-                    description = ch_json.get("description", "")
-                    topics = ch_json.get("topics_involved", "")
-                else:
-                    description = str(ch)
-
-                output_lines.append(f"### 🎯 Challenge {i}\n")
-                output_lines.append(f"**Description:**\n{description}\n")
-                if topics:
-                    output_lines.append(f"**Topics:** {topics}\n")
-                output_lines.append("💡 3 hints available - request them when stuck!\n")
-                output_lines.append("---\n")
-
-        return "\n".join(output_lines)
-
-    return f"✅ Response:\n```\n{result}\n```"
-
-
-def request_hint(session_id: str, challenge_num: str, hint_level: str) -> str:
-    sid = session_id or current_session.get("session_id")
-    if not sid:
-        return "❌ Please provide a session ID."
-
-    try:
-        cnum = int(challenge_num)
-        hlvl = int(hint_level)
-    except Exception:
-        return "❌ Challenge number and hint level must be integers."
-
-    ok, result = safe_post(REQUEST_HINT_URL, {
-        "session_id": sid,
-        "challenge_number": cnum,
-        "hint_level": hlvl
-    }, timeout=15)
-    if not ok:
-        return f"❌ {result}"
-
-    if isinstance(result, dict):
-        synco_msg = result.get("synco_message", "")
-        hint_text = result.get("hint", "") or str(result.get("hint", ""))
-        output = []
-        if synco_msg:
-            output.append(f"💡 **{synco_msg}**\n")
-        output.append(f"🎯 Challenge {cnum} | Hint Level {hlvl}\n")
-        output.append("---\n")
-        output.append(hint_text or "_No hint provided by the API._")
-        return "\n\n".join(output)
-
-    return f"💡 Response:\n```\n{result}\n```"
+            return f"❌ Error: {response.status_code}"
+            
+    except Exception as e:
+        return f"❌ Connection Error: {str(e)}"
+
+
+def send_message(message, history):
+    """Send a chat message (simulated for demo)"""
+    if not message.strip():
+        return history, ""
+    
+    # Add user message
+    history.append({
+        "role": "user",
+        "content": f"**{current_student['name'] or 'You'}:** {message}"
+    })
+    
+    # Simulate team member responses
+    responses = [
+        f"**Omar:** That's a great point! Let me add to that...",
+        f"**Layla:** I think we should also consider...",
+        f"**Khaled:** Interesting! In my topic, we do it differently...",
+        f"**Synco (AI):** Great discussion! Keep going! 💡"
+    ]
+    
+    import random
+    response = random.choice(responses)
+    
+    history.append({
+        "role": "assistant",
+        "content": response
+    })
+    
+    return history, ""
 
 
 # ============================================
-# Custom Light Theme CSS — Apple Inspired
+# 🎨 CUSTOM CSS - PURE BLACK GEN Z STYLE
 # ============================================
+
 custom_css = """
+/* Pure Black Gen Z Background */
 .gradio-container {
-    background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%) !important;
-    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif !important;
-    color: #1c1c1e !important;
+    background: #000000 !important;
+    font-family: 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif !important;
+    color: #ffffff !important;
+}
+
+/* Neon accent colors */
+:root {
+    --neon-pink: #ff00ff;
+    --neon-cyan: #00ffff;
+    --neon-purple: #9d00ff;
+    --neon-green: #00ff88;
+}
+
+/* Main container */
+.contain {
+    background: #000000 !important;
+}
+
+/* Tabs */
+.tab-nav {
+    background: #111111 !important;
+    border-bottom: 2px solid var(--neon-pink) !important;
 }
 
-/* Tabs styling */
 .tab-nav button {
-    background: rgba(0, 0, 0, 0.03) !important;
-    border: 1px solid rgba(0, 0, 0, 0.1) !important;
-    color: #007aff !important;
-    font-weight: 600 !important;
+    background: #1a1a1a !important;
+    border: 1px solid #333333 !important;
+    color: var(--neon-cyan) !important;
+    font-weight: 700 !important;
+    font-size: 16px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
     transition: all 0.3s ease !important;
 }
+
 .tab-nav button:hover {
-    background: rgba(0, 122, 255, 0.1) !important;
-    border-color: #007aff !important;
+    background: #222222 !important;
+    border-color: var(--neon-pink) !important;
+    color: var(--neon-pink) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 20px rgba(255, 0, 255, 0.4) !important;
 }
+
 .tab-nav button.selected {
-    background: #007aff !important;
-    border-color: #007aff !important;
-    color: white !important;
-    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3) !important;
+    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
+    border-color: var(--neon-pink) !important;
+    color: #000000 !important;
+    font-weight: 900 !important;
+    box-shadow: 0 0 30px rgba(255, 0, 255, 0.8) !important;
 }
 
 /* Input fields */
 input, textarea, select {
-    background: rgba(242, 242, 247, 0.8) !important;
-    border: 1px solid rgba(0,0,0,0.1) !important;
-    color: #1c1c1e !important;
+    background: #1a1a1a !important;
+    border: 2px solid #333333 !important;
+    color: #ffffff !important;
     border-radius: 12px !important;
-    padding: 10px !important;
+    font-size: 16px !important;
+    padding: 12px !important;
 }
+
 input:focus, textarea:focus, select:focus {
-    border-color: #007aff !important;
-    box-shadow: 0 0 10px rgba(0, 122, 255, 0.2) !important;
+    border-color: var(--neon-cyan) !important;
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5) !important;
+    outline: none !important;
 }
 
 /* Buttons */
-button {
-    background: #007aff !important;
+button.primary {
+    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
     border: none !important;
-    color: white !important;
-    font-weight: 600 !important;
+    color: #000000 !important;
+    font-weight: 900 !important;
+    font-size: 18px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 2px !important;
     border-radius: 12px !important;
-    padding: 12px 24px !important;
+    padding: 16px 32px !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3) !important;
+    box-shadow: 0 5px 30px rgba(255, 0, 255, 0.5) !important;
 }
-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4) !important;
+
+button.primary:hover {
+    transform: translateY(-4px) scale(1.05) !important;
+    box-shadow: 0 10px 50px rgba(255, 0, 255, 0.8) !important;
+}
+
+button.secondary {
+    background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-green) 100%) !important;
+    border: none !important;
+    color: #000000 !important;
+    font-weight: 800 !important;
+    border-radius: 12px !important;
+    padding: 12px 24px !important;
 }
 
 /* Output boxes */
-.output-markdown {
-    background: rgba(242, 242, 247, 0.8) !important;
-    border: 1px solid rgba(0,0,0,0.1) !important;
-    border-radius: 15px !important;
-    padding: 20px !important;
-    color: #1c1c1e !important;
+.output-markdown, .prose {
+    background: #0a0a0a !important;
+    border: 2px solid #222222 !important;
+    border-radius: 16px !important;
+    padding: 24px !important;
+    color: #e0e0e0 !important;
+    box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.1) !important;
 }
 
 /* Headers */
-h1, h2, h3 {
-    background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
+h1 {
+    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-cyan) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 900 !important;
+    font-size: 48px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 3px !important;
+    text-align: center !important;
+    margin: 20px 0 !important;
+    text-shadow: 0 0 30px rgba(255, 0, 255, 0.5) !important;
+}
+
+h2 {
+    color: var(--neon-cyan) !important;
     font-weight: 800 !important;
+    font-size: 32px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 2px !important;
+    margin: 16px 0 !important;
 }
 
-/* Markdown code blocks */
-code {
-    background: rgba(0, 122, 255, 0.1) !important;
-    color: #007aff !important;
-    padding: 2px 6px !important;
-    border-radius: 5px !important;
+h3 {
+    color: var(--neon-pink) !important;
+    font-weight: 700 !important;
+    font-size: 24px !important;
 }
 
 /* Links */
 a {
-    color: #007aff !important;
+    color: var(--neon-cyan) !important;
     text-decoration: none !important;
-    font-weight: 600 !important;
+    font-weight: 700 !important;
+    transition: all 0.3s ease !important;
 }
+
 a:hover {
-    color: #5ac8fa !important;
-    text-decoration: underline !important;
+    color: var(--neon-pink) !important;
+    text-shadow: 0 0 10px rgba(255, 0, 255, 0.8) !important;
+}
+
+/* Code blocks */
+code {
+    background: #1a1a1a !important;
+    color: var(--neon-green) !important;
+    padding: 4px 8px !important;
+    border-radius: 6px !important;
+    border: 1px solid var(--neon-cyan) !important;
+    font-family: 'Fira Code', monospace !important;
 }
 
 /* Scrollbar */
 ::-webkit-scrollbar {
-    width: 10px;
+    width: 12px;
 }
+
 ::-webkit-scrollbar-track {
-    background: rgba(242, 242, 247, 0.8);
+    background: #0a0a0a;
 }
+
 ::-webkit-scrollbar-thumb {
-    background: #007aff;
+    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-cyan) 100%);
     border-radius: 10px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
-    background: #5ac8fa;
+    background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-pink) 100%);
 }
-"""
 
+/* Labels */
+label {
+    color: var(--neon-cyan) !important;
+    font-weight: 700 !important;
+    font-size: 14px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
+}
+
+/* Chatbot styling */
+.message-wrap {
+    background: #1a1a1a !important;
+    border: 1px solid #333333 !important;
+    border-radius: 12px !important;
+    margin: 8px 0 !important;
+}
+
+.message.user {
+    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
+    color: #ffffff !important;
+}
+
+.message.bot {
+    background: #222222 !important;
+    border: 1px solid var(--neon-cyan) !important;
+    color: #ffffff !important;
+}
+
+/* Glow effects */
+.glow {
+    animation: glow 2s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+    from {
+        box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
+    }
+    to {
+        box-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan);
+    }
+}
+
+/* Dropdown menus */
+.dropdown-container {
+    background: #1a1a1a !important;
+    border: 2px solid #333333 !important;
+}
+
+/* Accordions */
+.accordion {
+    background: #111111 !important;
+    border: 1px solid var(--neon-pink) !important;
+}
+
+/* Info boxes */
+.info {
+    background: rgba(0, 255, 255, 0.1) !important;
+    border-left: 4px solid var(--neon-cyan) !important;
+    padding: 16px !important;
+    border-radius: 8px !important;
+}
+
+.warning {
+    background: rgba(255, 0, 255, 0.1) !important;
+    border-left: 4px solid var(--neon-pink) !important;
+    padding: 16px !important;
+    border-radius: 8px !important;
+}
+"""
 
 # ============================================
-# Gradio UI
+# 🎭 GRADIO INTERFACE
 # ============================================
-with gr.Blocks(css=custom_css, title="🌟 Synchrony - AI Study Sessions", theme=gr.themes.Soft()) as app:
-    # Header
-    gr.Markdown(
-        """
-        # 🌟 SYNCHRONY
-        ## AI-Powered Collaborative Learning Platform
-        ### Where Students Teach Each Other 🚀
-        ---
-        """
-    )
-
-    session_display = gr.Textbox(
-        label="📝 Current Session ID",
-        placeholder="No active session",
-        interactive=False,
-        lines=1,
-        value=""
-    )
-
-    # TAB 1: Start Session
-    with gr.Tab("🚀 Start Session"):
-        gr.Markdown("""## 🎯 Start a New Study Session
-Enter a Group ID to begin. Synco will welcome the students and prepare the session!
-*Example Group IDs:* G001, G002, G003""")
+
+with gr.Blocks(css=custom_css, title="🌟 SYNCHRONY - Student Portal", theme=gr.themes.Base()) as app:
+    
+    # ============================================
+    # HEADER
+    # ============================================
+    gr.Markdown("""
+    # 🌟 SYNCHRONY
+    ## *where students teach students* 💫
+    """)
+    
+    # ============================================
+    # TAB 1: HOME / LOGIN
+    # ============================================
+    with gr.Tab("🏠 HOME"):
+        gr.Markdown("""
+        ## welcome to synchrony ✨
+        
+        *the ai-powered study platform where you learn by teaching*
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Markdown("""
+                ### 📝 new here?
+                
+                register now and get matched with your perfect study squad!
+                """)
+                
+                register_btn = gr.Button("🚀 REGISTER NOW", variant="primary", size="lg")
+                
+                gr.Markdown("""
+                ### 🔐 already registered?
+                
+                enter your email to access your study session
+                """)
+                
+                email_input = gr.Textbox(
+                    label="📧 university email",
+                    placeholder="your.email@university.edu"
+                )
+                
+                login_btn = gr.Button("🔓 LOGIN", variant="secondary")
+                login_output = gr.Markdown()
+        
+        # Register button opens Google Form
+        register_btn.click(
+            fn=lambda: gr.update(visible=True),
+            outputs=None
+        ).then(
+            fn=None,
+            js=f"() => window.open('{REGISTRATION_FORM}', '_blank')"
+        )
+        
+        # Login button
+        login_btn.click(
+            fn=lookup_student,
+            inputs=[email_input],
+            outputs=[login_output, login_output]
+        )
+    
+    # ============================================
+    # TAB 2: MY TEAM
+    # ============================================
+    with gr.Tab("👥 MY TEAM"):
+        gr.Markdown("""
+        ## your study squad 🔥
+        
+        meet your teammates and see what everyone's working on
+        """)
+        
+        team_display = gr.Markdown()
+        
+        refresh_team_btn = gr.Button("🔄 REFRESH TEAM INFO", variant="secondary")
+        
+        refresh_team_btn.click(
+            fn=get_team_info,
+            outputs=[team_display]
+        )
+        
+        # Auto-load on tab open
+        app.load(
+            fn=get_team_info,
+            outputs=[team_display]
+        )
+    
+    # ============================================
+    # TAB 3: CHALLENGES
+    # ============================================
+    with gr.Tab("🎯 CHALLENGES"):
+        gr.Markdown("""
+        ## your collaborative challenges 💪
+        
+        work together, learn from each other, level up!
+        """)
+        
+        load_challenges_btn = gr.Button("📥 LOAD CHALLENGES", variant="primary")
+        challenges_display = gr.Markdown()
+        
+        load_challenges_btn.click(
+            fn=load_challenges,
+            outputs=[challenges_display]
+        )
+    
+    # ============================================
+    # TAB 4: HINTS
+    # ============================================
+    with gr.Tab("💡 HINTS"):
+        gr.Markdown("""
+        ## need help? no worries! 🤝
+        
+        synco's got your back with adaptive hints
+        """)
+        
         with gr.Row():
-            group_id_input = gr.Textbox(label="🆔 Group ID", placeholder="Enter Group ID (e.g., G001)", scale=3)
-            start_btn = gr.Button("🚀 Start Session", scale=1, variant="primary")
-        start_output = gr.Markdown(label="📢 Output")
-        start_btn.click(fn=start_session, inputs=[group_id_input], outputs=[start_output, session_display])
-
-    # TAB 2: Generate Challenges
-    with gr.Tab("🎯 Generate Challenges"):
-        gr.Markdown("""## 🧠 AI-Powered Challenge Generation
-Synco will create *3 collaborative challenges* tailored to your group's topics!
-Each challenge includes *3 progressive hints* for adaptive learning.""")
-        session_id_challenges = gr.Textbox(label="📝 Session ID", placeholder="Enter session ID from previous step")
-        generate_btn = gr.Button("🎯 Generate Challenges", variant="primary")
-        challenges_output = gr.Markdown(label="📋 Challenges")
-        generate_btn.click(fn=generate_challenges, inputs=[session_id_challenges], outputs=[challenges_output])
-
-    # TAB 3: Request Hints
-    with gr.Tab("💡 Get Hints"):
-        gr.Markdown("""## 💡 Adaptive Hint System
-Stuck on a challenge? Request progressive hints from Synco!
-*Hint 1:* Gentle nudge 🤔  
-*Hint 2:* Clearer guidance 💭  
-*Hint 3:* Almost the answer 🎯""")
+            challenge_select = gr.Dropdown(
+                label="🎯 select challenge",
+                choices=["1", "2", "3"],
+                value="1"
+            )
+            
+            hint_level_select = gr.Dropdown(
+                label="💡 hint level",
+                choices=["1 - gentle nudge 🤔", "2 - clearer guidance 💭", "3 - almost there 🎯"],
+                value="1 - gentle nudge 🤔"
+            )
+        
+        get_hint_btn = gr.Button("💡 GET HINT", variant="primary")
+        hint_display = gr.Markdown()
+        
+        def extract_hint_level(choice):
+            return choice.split(" - ")[0]
+        
+        get_hint_btn.click(
+            fn=lambda c, h: request_hint(c, extract_hint_level(h)),
+            inputs=[challenge_select, hint_level_select],
+            outputs=[hint_display]
+        )
+    
+    # ============================================
+    # TAB 5: TEAM CHAT
+    # ============================================
+    with gr.Tab("💬 CHAT"):
+        gr.Markdown("""
+        ## team chat 💬
+        
+        discuss challenges, share ideas, help each other out!
+        
+        *demo mode - simulated responses*
+        """)
+        
+        chatbot = gr.Chatbot(
+            value=[],
+            label="💬 team chat",
+            height=400,
+            type="messages"
+        )
+        
         with gr.Row():
-            session_id_hints = gr.Textbox(label="📝 Session ID", placeholder="Enter session ID", scale=2)
-            challenge_num = gr.Dropdown(label="🎯 Challenge Number", choices=["1", "2", "3"], value="1", scale=1)
-            hint_level = gr.Dropdown(label="💡 Hint Level", choices=["1", "2", "3"], value="1", scale=1)
-        hint_btn = gr.Button("💡 Get Hint", variant="primary")
-        hint_output = gr.Markdown(label="🔍 Hint")
-        hint_btn.click(fn=request_hint, inputs=[session_id_hints, challenge_num, hint_level], outputs=[hint_output])
-
-    # TAB 4: About
-    with gr.Tab("ℹ About"):
-        gr.Markdown(
-            """
-            ## 🌟 About Synchrony
-            *Synchrony* is an AI-powered collaborative learning platform that:
-            ✨ Matches students with complementary learning styles  
-            🤝 Creates study groups based on chemistry scores  
-            🎯 Generates personalized collaborative challenges  
-            💡 Provides adaptive hints for progressive learning  
-            🏆 Tracks progress and awards achievements
-            ---
-            ### 🔗 Quick Links
-            - 📝 Student Registration Form (Add your Google Form link)
-            - 📊 View Student Database (Add your Google Sheet link)
-            - 🎓 View Groups (Add your Google Sheet link)
-            ---
-            ### 🛠 Tech Stack
-            - *Frontend:* Gradio (Python)
-            - *Backend:* n8n Workflows
-            - *AI:* Groq API (Llama 3.3 70B)
-            - *Database:* Google Sheets
-            - *Matching Algorithm:* Chemistry Score System
-            ---
-            ### 👥 Created By
-            *Maryam Shanabli* | 2025-11-06
-            Powered by AI • Built for Students • Designed for Impact 🚀
-            """
+            msg_input = gr.Textbox(
+                label="",
+                placeholder="type your message...",
+                scale=4
+            )
+            send_btn = gr.Button("📤 SEND", variant="primary", scale=1)
+        
+        send_btn.click(
+            fn=send_message,
+            inputs=[msg_input, chatbot],
+            outputs=[chatbot, msg_input]
         )
-
-    # TAB 5: API Tester
-    with gr.Tab("🧪 API Tester"):
-        gr.Markdown("## 🧪 Test Your API Endpoints")
-        with gr.Accordion("🚀 Test Start Session", open=False):
-            test_group = gr.Textbox(label="Group ID", value="G001")
-            test_start_btn = gr.Button("Test Start Session")
-            test_start_out = gr.JSON(label="Response")
-            def test_start(gid):
-                ok, res = safe_post(START_SESSION_URL, {"group_id": gid}, timeout=20)
-                return res if ok else {"error": res}
-            test_start_btn.click(test_start, inputs=[test_group], outputs=[test_start_out])
-
-        with gr.Accordion("🎯 Test Generate Challenges", open=False):
-            test_session = gr.Textbox(label="Session ID", value="S20251106160510")
-            test_gen_btn = gr.Button("Test Generate Challenges")
-            test_gen_out = gr.JSON(label="Response")
-            def test_gen(sid):
-                ok, res = safe_post(GENERATE_CHALLENGES_URL, {"session_id": sid}, timeout=60)
-                return res if ok else {"error": res}
-            test_gen_btn.click(test_gen, inputs=[test_session], outputs=[test_gen_out])
-
-        with gr.Accordion("💡 Test Request Hint", open=False):
-            test_hint_session = gr.Textbox(label="Session ID", value="S20251106160510")
-            test_hint_num = gr.Number(label="Challenge Number", value=1)
-            test_hint_lvl = gr.Number(label="Hint Level", value=1)
-            test_hint_btn = gr.Button("Test Request Hint")
-            test_hint_out = gr.JSON(label="Response")
-            def test_hint(sid, cnum, hlvl):
-                try:
-                    ok, res = safe_post(REQUEST_HINT_URL, {
-                        "session_id": sid,
-                        "challenge_number": int(cnum),
-                        "hint_level": int(hlvl)
-                    }, timeout=20)
-                    return res if ok else {"error": res}
-                except Exception as e:
-                    return {"error": str(e)}
-            test_hint_btn.click(test_hint, inputs=[test_hint_session, test_hint_num, test_hint_lvl], outputs=[test_hint_out])
-
-    # Footer
-    gr.Markdown("""---
-    ### 🌟 *Synchrony* | Collaborative Learning, Powered by AI
-    Made with 💜 by Maryam Shanabli | 2025
+        
+        msg_input.submit(
+            fn=send_message,
+            inputs=[msg_input, chatbot],
+            outputs=[chatbot, msg_input]
+        )
+    
+    # ============================================
+    # FOOTER
+    # ============================================
+    gr.Markdown("""
+    ---
+    
+    ### 🌟 **synchrony** | *powered by ai, built for students* 💜
+    
+    made with 🔥 by maryam shanabli | 2025
     """)
 
-
 # ============================================
-# Launch
+# 🚀 LAUNCH APP
 # ============================================
+
 if __name__ == "__main__":
     app.launch(
         server_name="0.0.0.0",
         server_port=7860,
         share=True,
-        show_error=True
-    )
+        show_error=True,
+        favicon_path=None
+    )