Full Update

api/auth.py

@@ -1,4 +1,3 @@
-# api/auth.py
 from fastapi_users import FastAPIUsers
 from fastapi_users.authentication import CookieTransport, JWTStrategy, AuthenticationBackend
 from fastapi_users.db import SQLAlchemyUserDatabase
@@ -8,11 +7,9 @@ from api.database import SessionLocal
 from api.models import User, OAuthAccount
 import os
 
-# إعداد Cookie Transport
 cookie_transport = CookieTransport(cookie_max_age=3600)
 
-# إعداد JWT Strategy
-SECRET = os.getenv("JWT_SECRET", "your_jwt_secret_here")  # ضعه في Space Secrets
+SECRET = os.getenv("JWT_SECRET")
 
 def get_jwt_strategy() -> JWTStrategy:
     return JWTStrategy(secret=SECRET, lifetime_seconds=3600)
@@ -23,7 +20,6 @@ auth_backend = AuthenticationBackend(
     get_strategy=get_jwt_strategy,
 )
 
-# إعداد عملاء OAuth
 GOOGLE_CLIENT_ID = os.getenv("GOOGLE_CLIENT_ID")
 GOOGLE_CLIENT_SECRET = os.getenv("GOOGLE_CLIENT_SECRET")
 GITHUB_CLIENT_ID = os.getenv("GITHUB_CLIENT_ID")
@@ -32,11 +28,9 @@ GITHUB_CLIENT_SECRET = os.getenv("GITHUB_CLIENT_SECRET")
 google_oauth_client = GoogleOAuth2(GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET)
 github_oauth_client = GitHubOAuth2(GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET)
 
-# إعداد FastAPIUsers
 fastapi_users = FastAPIUsers[User, int](
     lambda: SQLAlchemyUserDatabase(User, SessionLocal(), oauth_account_table=OAuthAccount),
     [auth_backend],
 )
 
-# Dependency للحصول على المستخدم الحالي (اختياري)
-current_active_user = fastapi_users.current_user(active=True, optional=True)  # ← تغيير هنا
+current_active_user = fastapi_users.current_user(active=True, optional=True)

api/endpoints.py

@@ -1,49 +1,121 @@
-# api/endpoints.py
 import os
 import uuid
 from fastapi import APIRouter, Depends, HTTPException, Request, status, UploadFile, File
 from fastapi.responses import StreamingResponse
-from api.models import QueryRequest, User
+from api.models import QueryRequest, User, Conversation, Message, ConversationOut, ConversationCreate, UserUpdate
 from api.auth import current_active_user
 from api.database import get_db
 from sqlalchemy.orm import Session
 from utils.generation import request_generation, select_model
+from utils.web_search import web_search
 import io
 from openai import OpenAI
 from motor.motor_asyncio import AsyncIOMotorClient
+from datetime import datetime
+import logging
+from typing import List
 
 router = APIRouter()
+logger = logging.getLogger(__name__)
 
+# Check HF_TOKEN and BACKUP_HF_TOKEN
 HF_TOKEN = os.getenv("HF_TOKEN")
+if not HF_TOKEN:
+    logger.error("HF_TOKEN is not set in environment variables.")
+    raise ValueError("HF_TOKEN is required for Inference API.")
+
 BACKUP_HF_TOKEN = os.getenv("BACKUP_HF_TOKEN")
+if not BACKUP_HF_TOKEN:
+    logger.warning("BACKUP_HF_TOKEN is not set. Fallback to secondary model will not work if primary token fails.")
+
 API_ENDPOINT = os.getenv("API_ENDPOINT", "https://router.huggingface.co/v1")
 FALLBACK_API_ENDPOINT = os.getenv("FALLBACK_API_ENDPOINT", "https://api-inference.huggingface.co")
-MODEL_NAME = os.getenv("MODEL_NAME", "openai/gpt-oss-120b:together")
-SECONDARY_MODEL_NAME = os.getenv("SECONDARY_MODEL_NAME", "mistralai/Mistral-7B-Instruct-v0.2:featherless-ai")
-TERTIARY_MODEL_NAME = os.getenv("TERTIARY_MODEL_NAME", "openai/gpt-oss-20b:together")
+MODEL_NAME = os.getenv("MODEL_NAME", "openai/gpt-oss-120b")
+SECONDARY_MODEL_NAME = os.getenv("SECONDARY_MODEL_NAME", "mistralai/Mistral-7B-Instruct-v0.2")
+TERTIARY_MODEL_NAME = os.getenv("TERTIARY_MODEL_NAME", "openai/gpt-oss-20b")
 CLIP_BASE_MODEL = os.getenv("CLIP_BASE_MODEL", "Salesforce/blip-image-captioning-large")
 CLIP_LARGE_MODEL = os.getenv("CLIP_LARGE_MODEL", "openai/clip-vit-large-patch14")
 ASR_MODEL = os.getenv("ASR_MODEL", "openai/whisper-large-v3")
 TTS_MODEL = os.getenv("TTS_MODEL", "facebook/mms-tts-ara")
 
-# إعداد MongoDB
+# Model alias mapping for user-friendly names
+MODEL_ALIASES = {
+    "advanced": MODEL_NAME,
+    "standard": SECONDARY_MODEL_NAME,
+    "light": TERTIARY_MODEL_NAME,
+    "image_base": CLIP_BASE_MODEL,
+    "image_advanced": CLIP_LARGE_MODEL,
+    "audio": ASR_MODEL,
+    "tts": TTS_MODEL
+}
+
+# MongoDB setup
 MONGO_URI = os.getenv("MONGODB_URI")
-if not MONGO_URI:
-    raise ValueError("MONGODB_URI is not set in environment variables.")
 client = AsyncIOMotorClient(MONGO_URI)
 db = client["hager"]
 session_message_counts = db["session_message_counts"]
 
+# Helper function to handle sessions for non-logged-in users
+async def handle_session(request: Request):
+    if not hasattr(request, "session"):
+        raise HTTPException(status_code=500, detail="Session middleware not configured")
+    session_id = request.session.get("session_id")
+    if not session_id:
+        session_id = str(uuid.uuid4())
+        request.session["session_id"] = session_id
+        await session_message_counts.insert_one({"session_id": session_id, "message_count": 0})
+    
+    session_doc = await session_message_counts.find_one({"session_id": session_id})
+    if not session_doc:
+        session_doc = {"session_id": session_id, "message_count": 0}
+        await session_message_counts.insert_one(session_doc)
+    
+    message_count = session_doc["message_count"] + 1
+    await session_message_counts.update_one(
+        {"session_id": session_id},
+        {"$set": {"message_count": message_count}}
+    )
+    if message_count > 4:
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail="Message limit reached. Please log in to continue."
+        )
+    return session_id
+
+@router.get("/api/settings")
+async def get_settings(user: User = Depends(current_active_user)):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    return {
+        "available_models": [
+            {"alias": "advanced", "description": "High-performance model for complex queries"},
+            {"alias": "standard", "description": "Balanced model for general use"},
+            {"alias": "light", "description": "Lightweight model for quick responses"}
+        ],
+        "conversation_styles": ["default", "concise", "analytical", "creative"],
+        "user_settings": {
+            "display_name": user.display_name,
+            "preferred_model": user.preferred_model,
+            "job_title": user.job_title,
+            "education": user.education,
+            "interests": user.interests,
+            "additional_info": user.additional_info,
+            "conversation_style": user.conversation_style
+        }
+    }
+
 @router.get("/api/model-info")
 async def model_info():
     return {
-        "model_name": MODEL_NAME,
-        "secondary_model": SECONDARY_MODEL_NAME,
-        "tertiary_model": TERTIARY_MODEL_NAME,
-        "clip_base_model": CLIP_BASE_MODEL,
-        "clip_large_model": CLIP_LARGE_MODEL,
-        "asr_model": ASR_MODEL,
-        "tts_model": TTS_MODEL,
+        "available_models": [
+            {"alias": "advanced", "description": "High-performance model for complex queries"},
+            {"alias": "standard", "description": "Balanced model for general use"},
+            {"alias": "light", "description": "Lightweight model for quick responses"},
+            {"alias": "image_base", "description": "Basic image analysis model"},
+            {"alias": "image_advanced", "description": "Advanced image analysis model"},
+            {"alias": "audio", "description": "Audio transcription model (default)"},
+            {"alias": "tts", "description": "Text-to-speech model (default)"}
+        ],
         "api_base": API_ENDPOINT,
         "fallback_api_base": FALLBACK_API_ENDPOINT,
         "status": "online"
@@ -64,46 +136,77 @@ async def chat_endpoint(
     user: User = Depends(current_active_user),
     db: Session = Depends(get_db)
 ):
-    session_id = request.session.get("session_id")
-    if not user and not session_id:
-        session_id = str(uuid.uuid4())
-        request.session["session_id"] = session_id
-        await session_message_counts.insert_one({"session_id": session_id, "message_count": 0})
-
+    logger.info(f"Received chat request: {req}")
+    
     if not user:
-        session_doc = await session_message_counts.find_one({"session_id": session_id})
-        if not session_doc:
-            session_doc = {"session_id": session_id, "message_count": 0}
-            await session_message_counts.insert_one(session_doc)
-        message_count = session_doc["message_count"] + 1
-        await session_message_counts.update_one(
-            {"session_id": session_id},
-            {"$set": {"message_count": message_count}}
-        )
-        if message_count > 4:
-            raise HTTPException(
-                status_code=status.HTTP_403_FORBIDDEN,
-                detail="Message limit reached. Please log in to continue."
+        await handle_session(request)
+    
+    conversation = None
+    if user:
+        title = req.title or (req.message[:50] + "..." if len(req.message) > 50 else req.message or "Untitled Conversation")
+        conversation = db.query(Conversation).filter(Conversation.user_id == user.id).order_by(Conversation.updated_at.desc()).first()
+        if not conversation:
+            conversation_id = str(uuid.uuid4())
+            conversation = Conversation(
+                conversation_id=conversation_id,
+                user_id=user.id,
+                title=title
             )
-
-    model_name, api_endpoint = select_model(req.message, input_type="text")
+            db.add(conversation)
+            db.commit()
+            db.refresh(conversation)
+        
+        user_msg = Message(role="user", content=req.message, conversation_id=conversation.id)
+        db.add(user_msg)
+        db.commit()
+    
+    # Use user's preferred model if set
+    preferred_model = user.preferred_model if user else None
+    model_name, api_endpoint = select_model(req.message, input_type="text", preferred_model=preferred_model)
+    system_prompt = req.system_prompt
+    if user and user.additional_info:
+        system_prompt = f"{system_prompt}\nUser Profile: {user.additional_info}\nConversation Style: {user.conversation_style or 'default'}"
+    
     stream = request_generation(
         api_key=HF_TOKEN,
         api_base=api_endpoint,
         message=req.message,
-        system_prompt=req.system_prompt,
+        system_prompt=system_prompt,
         model_name=model_name,
         chat_history=req.history,
         temperature=req.temperature,
-        max_new_tokens=req.max_new_tokens,
+        max_new_tokens=req.max_new_tokens or 2048,
         deep_search=req.enable_browsing,
         input_type="text",
         output_format=req.output_format
     )
     if req.output_format == "audio":
-        audio_data = b"".join([chunk for chunk in stream if isinstance(chunk, bytes)])
+        audio_chunks = []
+        async for chunk in stream:
+            if isinstance(chunk, bytes):
+                audio_chunks.append(chunk)
+        audio_data = b"".join(audio_chunks)
         return StreamingResponse(io.BytesIO(audio_data), media_type="audio/wav")
-    response = "".join([chunk for chunk in stream if isinstance(chunk, str)])
+    response_chunks = []
+    async for chunk in stream:
+        if isinstance(chunk, str):
+            response_chunks.append(chunk)
+    response = "".join(response_chunks)
+    logger.info(f"Chat response: {response}")
+    
+    if user and conversation:
+        assistant_msg = Message(role="assistant", content=response, conversation_id=conversation.id)
+        db.add(assistant_msg)
+        db.commit()
+        conversation.updated_at = datetime.utcnow()
+        db.commit()
+        return {
+            "response": response,
+            "conversation_id": conversation.conversation_id,
+            "conversation_url": f"https://mgzon-mgzon-app.hf.space/chat/{conversation.conversation_id}",
+            "conversation_title": conversation.title
+        }
+    
     return {"response": response}
 
 @router.post("/api/audio-transcription")
@@ -113,28 +216,30 @@ async def audio_transcription_endpoint(
     user: User = Depends(current_active_user),
     db: Session = Depends(get_db)
 ):
-    session_id = request.session.get("session_id")
-    if not user and not session_id:
-        session_id = str(uuid.uuid4())
-        request.session["session_id"] = session_id
-        await session_message_counts.insert_one({"session_id": session_id, "message_count": 0})
-
+    logger.info(f"Received audio transcription request for file: {file.filename}")
+    
     if not user:
-        session_doc = await session_message_counts.find_one({"session_id": session_id})
-        if not session_doc:
-            session_doc = {"session_id": session_id, "message_count": 0}
-            await session_message_counts.insert_one(session_doc)
-        message_count = session_doc["message_count"] + 1
-        await session_message_counts.update_one(
-            {"session_id": session_id},
-            {"$set": {"message_count": message_count}}
-        )
-        if message_count > 4:
-            raise HTTPException(
-                status_code=status.HTTP_403_FORBIDDEN,
-                detail="Message limit reached. Please log in to continue."
+        await handle_session(request)
+    
+    conversation = None
+    if user:
+        title = "Audio Transcription"
+        conversation = db.query(Conversation).filter(Conversation.user_id == user.id).order_by(Conversation.updated_at.desc()).first()
+        if not conversation:
+            conversation_id = str(uuid.uuid4())
+            conversation = Conversation(
+                conversation_id=conversation_id,
+                user_id=user.id,
+                title=title
             )
-
+            db.add(conversation)
+            db.commit()
+            db.refresh(conversation)
+        
+        user_msg = Message(role="user", content="Audio message", conversation_id=conversation.id)
+        db.add(user_msg)
+        db.commit()
+    
     model_name, api_endpoint = select_model("transcribe audio", input_type="audio")
     audio_data = await file.read()
     stream = request_generation(
@@ -144,12 +249,31 @@ async def audio_transcription_endpoint(
         system_prompt="Transcribe the provided audio using Whisper.",
         model_name=model_name,
         temperature=0.7,
-        max_new_tokens=128000,
+        max_new_tokens=2048,
         input_type="audio",
         audio_data=audio_data,
         output_format="text"
     )
-    response = "".join([chunk for chunk in stream if isinstance(chunk, str)])
+    response_chunks = []
+    async for chunk in stream:
+        if isinstance(chunk, str):
+            response_chunks.append(chunk)
+    response = "".join(response_chunks)
+    logger.info(f"Audio transcription response: {response}")
+    
+    if user and conversation:
+        assistant_msg = Message(role="assistant", content=response, conversation_id=conversation.id)
+        db.add(assistant_msg)
+        db.commit()
+        conversation.updated_at = datetime.utcnow()
+        db.commit()
+        return {
+            "transcription": response,
+            "conversation_id": conversation.conversation_id,
+            "conversation_url": f"https://mgzon-mgzon-app.hf.space/chat/{conversation.conversation_id}",
+            "conversation_title": conversation.title
+        }
+    
     return {"transcription": response}
 
 @router.post("/api/text-to-speech")
@@ -159,28 +283,9 @@ async def text_to_speech_endpoint(
     user: User = Depends(current_active_user),
     db: Session = Depends(get_db)
 ):
-    session_id = request.session.get("session_id")
-    if not user and not session_id:
-        session_id = str(uuid.uuid4())
-        request.session["session_id"] = session_id
-        await session_message_counts.insert_one({"session_id": session_id, "message_count": 0})
-
     if not user:
-        session_doc = await session_message_counts.find_one({"session_id": session_id})
-        if not session_doc:
-            session_doc = {"session_id": session_id, "message_count": 0}
-            await session_message_counts.insert_one(session_doc)
-        message_count = session_doc["message_count"] + 1
-        await session_message_counts.update_one(
-            {"session_id": session_id},
-            {"$set": {"message_count": message_count}}
-        )
-        if message_count > 4:
-            raise HTTPException(
-                status_code=status.HTTP_403_FORBIDDEN,
-                detail="Message limit reached. Please log in to continue."
-            )
-
+        await handle_session(request)
+    
     text = req.get("text", "")
     model_name, api_endpoint = select_model("text to speech", input_type="tts")
     stream = request_generation(
@@ -190,11 +295,15 @@ async def text_to_speech_endpoint(
         system_prompt="Convert the provided text to speech using a text-to-speech model.",
         model_name=model_name,
         temperature=0.7,
-        max_new_tokens=128000,
+        max_new_tokens=2048,
         input_type="tts",
         output_format="audio"
     )
-    audio_data = b"".join([chunk for chunk in stream if isinstance(chunk, bytes)])
+    audio_chunks = []
+    async for chunk in stream:
+        if isinstance(chunk, bytes):
+            audio_chunks.append(chunk)
+    audio_data = b"".join(audio_chunks)
     return StreamingResponse(io.BytesIO(audio_data), media_type="audio/wav")
 
 @router.post("/api/code")
@@ -204,49 +313,43 @@ async def code_endpoint(
     user: User = Depends(current_active_user),
     db: Session = Depends(get_db)
 ):
-    session_id = request.session.get("session_id")
-    if not user and not session_id:
-        session_id = str(uuid.uuid4())
-        request.session["session_id"] = session_id
-        await session_message_counts.insert_one({"session_id": session_id, "message_count": 0})
-
     if not user:
-        session_doc = await session_message_counts.find_one({"session_id": session_id})
-        if not session_doc:
-            session_doc = {"session_id": session_id, "message_count": 0}
-            await session_message_counts.insert_one(session_doc)
-        message_count = session_doc["message_count"] + 1
-        await session_message_counts.update_one(
-            {"session_id": session_id},
-            {"$set": {"message_count": message_count}}
-        )
-        if message_count > 4:
-            raise HTTPException(
-                status_code=status.HTTP_403_FORBIDDEN,
-                detail="Message limit reached. Please log in to continue."
-            )
-
+        await handle_session(request)
+    
     framework = req.get("framework")
     task = req.get("task")
     code = req.get("code", "")
     output_format = req.get("output_format", "text")
     prompt = f"Generate code for task: {task} using {framework}. Existing code: {code}"
-    model_name, api_endpoint = select_model(prompt, input_type="text")
+    preferred_model = user.preferred_model if user else None
+    model_name, api_endpoint = select_model(prompt, input_type="text", preferred_model=preferred_model)
+    system_prompt = "You are a coding expert. Provide detailed, well-commented code with examples and explanations."
+    if user and user.additional_info:
+        system_prompt = f"{system_prompt}\nUser Profile: {user.additional_info}\nConversation Style: {user.conversation_style or 'default'}"
+    
     stream = request_generation(
         api_key=HF_TOKEN,
         api_base=api_endpoint,
         message=prompt,
-        system_prompt="You are a coding expert. Provide detailed, well-commented code with examples and explanations.",
+        system_prompt=system_prompt,
         model_name=model_name,
         temperature=0.7,
-        max_new_tokens=128000,
+        max_new_tokens=2048,
         input_type="text",
         output_format=output_format
     )
     if output_format == "audio":
-        audio_data = b"".join([chunk for chunk in stream if isinstance(chunk, bytes)])
+        audio_chunks = []
+        async for chunk in stream:
+            if isinstance(chunk, bytes):
+                audio_chunks.append(chunk)
+        audio_data = b"".join(audio_chunks)
         return StreamingResponse(io.BytesIO(audio_data), media_type="audio/wav")
-    response = "".join([chunk for chunk in stream if isinstance(chunk, str)])
+    response_chunks = []
+    async for chunk in stream:
+        if isinstance(chunk, str):
+            response_chunks.append(chunk)
+    response = "".join(response_chunks)
     return {"generated_code": response}
 
 @router.post("/api/analysis")
@@ -256,46 +359,40 @@ async def analysis_endpoint(
     user: User = Depends(current_active_user),
     db: Session = Depends(get_db)
 ):
-    session_id = request.session.get("session_id")
-    if not user and not session_id:
-        session_id = str(uuid.uuid4())
-        request.session["session_id"] = session_id
-        await session_message_counts.insert_one({"session_id": session_id, "message_count": 0})
-
     if not user:
-        session_doc = await session_message_counts.find_one({"session_id": session_id})
-        if not session_doc:
-            session_doc = {"session_id": session_id, "message_count": 0}
-            await session_message_counts.insert_one(session_doc)
-        message_count = session_doc["message_count"] + 1
-        await session_message_counts.update_one(
-            {"session_id": session_id},
-            {"$set": {"message_count": message_count}}
-        )
-        if message_count > 4:
-            raise HTTPException(
-                status_code=status.HTTP_403_FORBIDDEN,
-                detail="Message limit reached. Please log in to continue."
-            )
-
+        await handle_session(request)
+    
     message = req.get("text", "")
     output_format = req.get("output_format", "text")
-    model_name, api_endpoint = select_model(message, input_type="text")
+    preferred_model = user.preferred_model if user else None
+    model_name, api_endpoint = select_model(message, input_type="text", preferred_model=preferred_model)
+    system_prompt = "You are an expert analyst. Provide detailed analysis with step-by-step reasoning and examples."
+    if user and user.additional_info:
+        system_prompt = f"{system_prompt}\nUser Profile: {user.additional_info}\nConversation Style: {user.conversation_style or 'default'}"
+    
     stream = request_generation(
         api_key=HF_TOKEN,
         api_base=api_endpoint,
         message=message,
-        system_prompt="You are an expert analyst. Provide detailed analysis with step-by-step reasoning and examples.",
+        system_prompt=system_prompt,
         model_name=model_name,
         temperature=0.7,
-        max_new_tokens=128000,
+        max_new_tokens=2048,
         input_type="text",
         output_format=output_format
     )
     if output_format == "audio":
-        audio_data = b"".join([chunk for chunk in stream if isinstance(chunk, bytes)])
+        audio_chunks = []
+        async for chunk in stream:
+            if isinstance(chunk, bytes):
+                audio_chunks.append(chunk)
+        audio_data = b"".join(audio_chunks)
         return StreamingResponse(io.BytesIO(audio_data), media_type="audio/wav")
-    response = "".join([chunk for chunk in stream if isinstance(chunk, str)])
+    response_chunks = []
+    async for chunk in stream:
+        if isinstance(chunk, str):
+            response_chunks.append(chunk)
+    response = "".join(response_chunks)
     return {"analysis": response}
 
 @router.post("/api/image-analysis")
@@ -306,46 +403,73 @@ async def image_analysis_endpoint(
     user: User = Depends(current_active_user),
     db: Session = Depends(get_db)
 ):
-    session_id = request.session.get("session_id")
-    if not user and not session_id:
-        session_id = str(uuid.uuid4())
-        request.session["session_id"] = session_id
-        await session_message_counts.insert_one({"session_id": session_id, "message_count": 0})
-
     if not user:
-        session_doc = await session_message_counts.find_one({"session_id": session_id})
-        if not session_doc:
-            session_doc = {"session_id": session_id, "message_count": 0}
-            await session_message_counts.insert_one(session_doc)
-        message_count = session_doc["message_count"] + 1
-        await session_message_counts.update_one(
-            {"session_id": session_id},
-            {"$set": {"message_count": message_count}}
-        )
-        if message_count > 4:
-            raise HTTPException(
-                status_code=status.HTTP_403_FORBIDDEN,
-                detail="Message limit reached. Please log in to continue."
+        await handle_session(request)
+    
+    conversation = None
+    if user:
+        title = "Image Analysis"
+        conversation = db.query(Conversation).filter(Conversation.user_id == user.id).order_by(Conversation.updated_at.desc()).first()
+        if not conversation:
+            conversation_id = str(uuid.uuid4())
+            conversation = Conversation(
+                conversation_id=conversation_id,
+                user_id=user.id,
+                title=title
             )
-
-    model_name, api_endpoint = select_model("analyze image", input_type="image")
+            db.add(conversation)
+            db.commit()
+            db.refresh(conversation)
+        
+        user_msg = Message(role="user", content="Image analysis request", conversation_id=conversation.id)
+        db.add(user_msg)
+        db.commit()
+    
+    preferred_model = user.preferred_model if user else None
+    model_name, api_endpoint = select_model("analyze image", input_type="image", preferred_model=preferred_model)
     image_data = await file.read()
+    system_prompt = "You are an expert in image analysis. Provide detailed descriptions or classifications based on the query."
+    if user and user.additional_info:
+        system_prompt = f"{system_prompt}\nUser Profile: {user.additional_info}\nConversation Style: {user.conversation_style or 'default'}"
+    
     stream = request_generation(
         api_key=HF_TOKEN,
         api_base=api_endpoint,
         message="Analyze this image",
-        system_prompt="You are an expert in image analysis. Provide detailed descriptions or classifications based on the query.",
+        system_prompt=system_prompt,
         model_name=model_name,
         temperature=0.7,
-        max_new_tokens=128000,
+        max_new_tokens=2048,
         input_type="image",
         image_data=image_data,
         output_format=output_format
     )
     if output_format == "audio":
-        audio_data = b"".join([chunk for chunk in stream if isinstance(chunk, bytes)])
+        audio_chunks = []
+        async for chunk in stream:
+            if isinstance(chunk, bytes):
+                audio_chunks.append(chunk)
+        audio_data = b"".join(audio_chunks)
         return StreamingResponse(io.BytesIO(audio_data), media_type="audio/wav")
-    response = "".join([chunk for chunk in stream if isinstance(chunk, str)])
+    response_chunks = []
+    async for chunk in stream:
+        if isinstance(chunk, str):
+            response_chunks.append(chunk)
+    response = "".join(response_chunks)
+    
+    if user and conversation:
+        assistant_msg = Message(role="assistant", content=response, conversation_id=conversation.id)
+        db.add(assistant_msg)
+        db.commit()
+        conversation.updated_at = datetime.utcnow()
+        db.commit()
+        return {
+            "image_analysis": response,
+            "conversation_id": conversation.conversation_id,
+            "conversation_url": f"https://mgzon-mgzon-app.hf.space/chat/{conversation.conversation_id}",
+            "conversation_title": conversation.title
+        }
+    
     return {"image_analysis": response}
 
 @router.get("/api/test-model")
@@ -360,3 +484,154 @@ async def test_model(model: str = MODEL_NAME, endpoint: str = API_ENDPOINT):
         return {"status": "success", "response": response.choices[0].message.content}
     except Exception as e:
         return {"status": "error", "message": str(e)}
+
+@router.post("/api/conversations", response_model=ConversationOut)
+async def create_conversation(
+    req: ConversationCreate,
+    user: User = Depends(current_active_user),
+    db: Session = Depends(get_db)
+):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    conversation_id = str(uuid.uuid4())
+    conversation = Conversation(
+        conversation_id=conversation_id,
+        title=req.title or "Untitled Conversation",
+        user_id=user.id
+    )
+    db.add(conversation)
+    db.commit()
+    db.refresh(conversation)
+    return ConversationOut.from_orm(conversation)
+
+@router.get("/api/conversations/{conversation_id}", response_model=ConversationOut)
+async def get_conversation(
+    conversation_id: str,
+    user: User = Depends(current_active_user),
+    db: Session = Depends(get_db)
+):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    conversation = db.query(Conversation).filter(
+        Conversation.conversation_id == conversation_id,
+        Conversation.user_id == user.id
+    ).first()
+    if not conversation:
+        raise HTTPException(status_code=404, detail="Conversation not found")
+    db.add(conversation)
+    db.commit()
+    return ConversationOut.from_orm(conversation)
+
+@router.get("/api/conversations", response_model=List[ConversationOut])
+async def list_conversations(
+    user: User = Depends(current_active_user),
+    db: Session = Depends(get_db)
+):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    conversations = db.query(Conversation).filter(Conversation.user_id == user.id).order_by(Conversation.created_at.desc()).all()
+    return conversations
+
+@router.put("/api/conversations/{conversation_id}/title")
+async def update_conversation_title(
+    conversation_id: str,
+    title: str,
+    user: User = Depends(current_active_user),
+    db: Session = Depends(get_db)
+):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    conversation = db.query(Conversation).filter(
+        Conversation.conversation_id == conversation_id,
+        Conversation.user_id == user.id
+    ).first()
+    if not conversation:
+        raise HTTPException(status_code=404, detail="Conversation not found")
+    
+    conversation.title = title
+    conversation.updated_at = datetime.utcnow()
+    db.commit()
+    return {"message": "Conversation title updated", "title": conversation.title}
+
+@router.delete("/api/conversations/{conversation_id}")
+async def delete_conversation(
+    conversation_id: str,
+    user: User = Depends(current_active_user),
+    db: Session = Depends(get_db)
+):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    conversation = db.query(Conversation).filter(
+        Conversation.conversation_id == conversation_id,
+        Conversation.user_id == user.id
+    ).first()
+    if not conversation:
+        raise HTTPException(status_code=404, detail="Conversation not found")
+    
+    db.query(Message).filter(Message.conversation_id == conversation.id).delete()
+    db.delete(conversation)
+    db.commit()
+    return {"message": "Conversation deleted successfully"}
+
+@router.get("/users/me")
+async def get_user_settings(user: User = Depends(current_active_user)):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    return {
+        "id": user.id,
+        "email": user.email,
+        "display_name": user.display_name,
+        "preferred_model": user.preferred_model,
+        "job_title": user.job_title,
+        "education": user.education,
+        "interests": user.interests,
+        "additional_info": user.additional_info,
+        "conversation_style": user.conversation_style,
+        "is_active": user.is_active,
+        "is_superuser": user.is_superuser
+    }
+
+@router.put("/users/me")
+async def update_user_settings(
+    settings: UserUpdate,
+    user: User = Depends(current_active_user),
+    db: Session = Depends(get_db)
+):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    
+    # Validate preferred_model
+    if settings.preferred_model and settings.preferred_model not in MODEL_ALIASES:
+        raise HTTPException(status_code=400, detail="Invalid model alias")
+    
+    # Update user settings
+    if settings.display_name is not None:
+        user.display_name = settings.display_name
+    if settings.preferred_model is not None:
+        user.preferred_model = settings.preferred_model
+    if settings.job_title is not None:
+        user.job_title = settings.job_title
+    if settings.education is not None:
+        user.education = settings.education
+    if settings.interests is not None:
+        user.interests = settings.interests
+    if settings.additional_info is not None:
+        user.additional_info = settings.additional_info
+    if settings.conversation_style is not None:
+        user.conversation_style = settings.conversation_style
+    
+    db.commit()
+    db.refresh(user)
+    return {"message": "Settings updated successfully", "user": {
+        "id": user.id,
+        "email": user.email,
+        "display_name": user.display_name,
+        "preferred_model": user.preferred_model,
+        "job_title": user.job_title,
+        "education": user.education,
+        "interests": user.interests,
+        "additional_info": user.additional_info,
+        "conversation_style": user.conversation_style,
+        "is_active": user.is_active,
+        "is_superuser": user.is_superuser
+    }}

api/models.py

@@ -1,10 +1,12 @@
 from fastapi_users.db import SQLAlchemyBaseUserTable, SQLAlchemyBaseOAuthAccountTable
-from sqlalchemy import Column, Integer, String, Boolean
+from sqlalchemy import Column, Integer, String, Boolean, Text, ForeignKey, DateTime
 from sqlalchemy.orm import relationship
 from sqlalchemy.ext.declarative import declarative_base
 from pydantic import BaseModel, Field
 from typing import List, Optional
 from fastapi_users import schemas
+from datetime import datetime
+import uuid
 
 Base = declarative_base()
 
@@ -19,10 +21,42 @@ class User(SQLAlchemyBaseUserTable, Base):
     __tablename__ = "users"
     id = Column(Integer, primary_key=True, index=True)
     email = Column(String, unique=True, index=True, nullable=False)
-    hashed_password = Column(String, nullable=True)  # nullable لأن OAuth ممكن ما يحتاج باسورد
+    hashed_password = Column(String, nullable=True)
     is_active = Column(Boolean, default=True)
     is_superuser = Column(Boolean, default=False)
-    oauth_accounts = relationship("OAuthAccount", back_populates="user")
+    display_name = Column(String, nullable=True)  # الاسم المستعار للمستخدم
+    preferred_model = Column(String, nullable=True)  # النموذج المفضل (اسم وهمي)
+    job_title = Column(String, nullable=True)  # الوظيفة
+    education = Column(String, nullable=True)  # التعليم
+    interests = Column(Text, nullable=True)  # الاهتمامات
+    additional_info = Column(Text, nullable=True)  # معلومات إضافية
+    conversation_style = Column(String, nullable=True)  # نمط المحادثة (مثل: موجز، تحليلي)
+    oauth_accounts = relationship("OAuthAccount", back_populates="user", cascade="all, delete-orphan")
+    conversations = relationship("Conversation", back_populates="user", cascade="all, delete-orphan")
+
+# نموذج المحادثة
+class Conversation(Base):
+    __tablename__ = "conversations"
+    id = Column(Integer, primary_key=True, index=True)
+    conversation_id = Column(String, unique=True, index=True, default=lambda: str(uuid.uuid4()))
+    title = Column(String, nullable=True)
+    user_id = Column(Integer, ForeignKey("users.id"))
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    
+    user = relationship("User", back_populates="conversations")
+    messages = relationship("Message", back_populates="conversation", cascade="all, delete-orphan")
+
+# نموذج الرسالة
+class Message(Base):
+    __tablename__ = "messages"
+    id = Column(Integer, primary_key=True, index=True)
+    role = Column(String)
+    content = Column(Text)
+    conversation_id = Column(Integer, ForeignKey("conversations.id"))
+    created_at = Column(DateTime, default=datetime.utcnow)
+    
+    conversation = relationship("Conversation", back_populates="messages")
 
 # Pydantic schemas for fastapi-users
 class UserRead(schemas.BaseUser[int]):
@@ -30,12 +64,54 @@ class UserRead(schemas.BaseUser[int]):
     email: str
     is_active: bool = True
     is_superuser: bool = False
+    display_name: Optional[str] = None
+    preferred_model: Optional[str] = None
+    job_title: Optional[str] = None
+    education: Optional[str] = None
+    interests: Optional[str] = None
+    additional_info: Optional[str] = None
+    conversation_style: Optional[str] = None
 
 class UserCreate(schemas.BaseUserCreate):
     email: str
     password: str
     is_active: Optional[bool] = True
     is_superuser: Optional[bool] = False
+    display_name: Optional[str] = None
+    preferred_model: Optional[str] = None
+    job_title: Optional[str] = None
+    education: Optional[str] = None
+    interests: Optional[str] = None
+    additional_info: Optional[str] = None
+    conversation_style: Optional[str] = None
+
+# Pydantic schema for updating user settings
+class UserUpdate(BaseModel):
+    display_name: Optional[str] = None
+    preferred_model: Optional[str] = None
+    job_title: Optional[str] = None
+    education: Optional[str] = None
+    interests: Optional[str] = None
+    additional_info: Optional[str] = None
+    conversation_style: Optional[str] = None
+
+# Pydantic schemas للمحادثات
+class MessageOut(BaseModel):
+    id: int
+    role: str
+    content: str
+    created_at: datetime
+
+class ConversationCreate(BaseModel):
+    title: Optional[str] = None
+
+class ConversationOut(BaseModel):
+    id: int
+    conversation_id: str
+    title: Optional[str]
+    created_at: datetime
+    updated_at: datetime
+    messages: List[MessageOut] = []
 
 # نموذج طلب الاستعلام
 class QueryRequest(BaseModel):
@@ -43,6 +119,10 @@ class QueryRequest(BaseModel):
     system_prompt: Optional[str] = "You are an expert assistant providing detailed, comprehensive, and well-structured responses."
     history: Optional[List[dict]] = []
     temperature: Optional[float] = 0.7
-    max_new_tokens: Optional[int] = 128000
+    max_new_tokens: Optional[int] = 2048
     enable_browsing: Optional[bool] = True
     output_format: Optional[str] = "text"
+    title: Optional[str] = None  
+
+ConversationOut.model_revalidate = True
+MessageOut.model_revalidate = True

main.py

@@ -1,7 +1,10 @@
+# SPDX-FileCopyrightText: Hadad <[email protected]>
+# SPDX-License-Identifier: Apache-2.0
+
 import os
 import logging
 from fastapi import FastAPI, Request, Depends, HTTPException, status, Query
-from fastapi.responses import HTMLResponse, RedirectResponse, PlainTextResponse
+from fastapi.responses import HTMLResponse, RedirectResponse, PlainTextResponse, FileResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from starlette.middleware.base import BaseHTTPMiddleware
@@ -11,40 +14,53 @@ from fastapi.middleware.cors import CORSMiddleware
 from api.endpoints import router as api_router
 from api.auth import fastapi_users, auth_backend, current_active_user, google_oauth_client, github_oauth_client
 from api.database import get_db, engine, Base
-from api.models import User, UserRead, UserCreate
+from api.models import User, UserRead, UserCreate, Conversation
 from motor.motor_asyncio import AsyncIOMotorClient
 from pydantic import BaseModel
 from typing import List
 import uvicorn
 import markdown2
+from sqlalchemy.orm import Session
+from pathlib import Path
+from hashlib import md5
+from datetime import datetime
+import re
 
-# إعداد التسجيل
+# Setup logging for debugging and monitoring
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
+logger.info("Files in current dir: %s", os.listdir(os.getcwd()))
 
-# تحقق من الملفات في /app/
-logger.info("Files in /app/: %s", os.listdir("/app"))
-
-# إعداد العميل لـ Hugging Face Inference API
+# Check environment variables for required configurations
 HF_TOKEN = os.getenv("HF_TOKEN")
 if not HF_TOKEN:
     logger.error("HF_TOKEN is not set in environment variables.")
     raise ValueError("HF_TOKEN is required for Inference API.")
 
-# إعداد MongoDB
 MONGO_URI = os.getenv("MONGODB_URI")
 if not MONGO_URI:
     logger.error("MONGODB_URI is not set in environment variables.")
     raise ValueError("MONGODB_URI is required for MongoDB.")
 
+JWT_SECRET = os.getenv("JWT_SECRET")
+if not JWT_SECRET or len(JWT_SECRET) < 32:
+    logger.error("JWT_SECRET is not set or too short.")
+    raise ValueError("JWT_SECRET is required (at least 32 characters).")
+
+# MongoDB setup for blog posts and session message counts
 client = AsyncIOMotorClient(MONGO_URI)
-db = client["hager"]
+mongo_db = client["hager"]
+session_message_counts = mongo_db["session_message_counts"]
 
-# إعداد Jinja2 مع دعم Markdown
+# Create MongoDB index for session_id to ensure uniqueness
+async def setup_mongo_index():
+    await session_message_counts.create_index("session_id", unique=True)
+
+# Jinja2 setup with Markdown filter for rendering Markdown content
 templates = Jinja2Templates(directory="templates")
 templates.env.filters['markdown'] = lambda text: markdown2.markdown(text)
 
-# موديل للمقالات
+# Pydantic model for blog posts
 class BlogPost(BaseModel):
     id: str
     title: str
@@ -53,32 +69,40 @@ class BlogPost(BaseModel):
     date: str
     created_at: str
 
-# إعدادات الـ queue
+# Application settings from environment variables
 QUEUE_SIZE = int(os.getenv("QUEUE_SIZE", 80))
 CONCURRENCY_LIMIT = int(os.getenv("CONCURRENCY_LIMIT", 20))
 
-# إعداد FastAPI
+# Initialize FastAPI app
 app = FastAPI(title="MGZon Chatbot API")
 
-# إضافة SessionMiddleware
-app.add_middleware(SessionMiddleware, secret_key=os.getenv("JWT_SECRET"))
+# Add SessionMiddleware for handling non-logged-in user sessions
+app.add_middleware(SessionMiddleware, secret_key=JWT_SECRET)
 
-# إنشاء الجداول تلقائيًا
+# Create SQLAlchemy database tables
 Base.metadata.create_all(bind=engine)
 
-# ربط الملفات الثابتة
+# Mount static files directory
+os.makedirs("static", exist_ok=True)
 app.mount("/static", StaticFiles(directory="static"), name="static")
 
-# إضافة CORS middleware
+# CORS setup to allow requests from specific origins
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["https://mgzon-mgzon-app.hf.space"],
+    allow_origins=[
+        "https://mgzon-mgzon-app.hf.space",  # Production domain
+        "http://localhost:7860",  # Local development
+        "https://mgzon-mgzon-app.hf.space/users/me",  # For user settings endpoint
+        # Add staging domain here if needed, e.g., "https://staging.mgzon-mgzon-app.hf.space"
+    ],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
+    # Optional: Uncomment to support subdomains dynamically
+    # allow_origin_regex=r"https?://.*\.mgzon-mgzon-app\.hf\.space|http://localhost:7860",
 )
 
-# إضافة auth routers
+# Include routers for authentication, user management, and API endpoints
 app.include_router(
     fastapi_users.get_auth_router(auth_backend),
     prefix="/auth/jwt",
@@ -95,17 +119,18 @@ app.include_router(
     tags=["users"],
 )
 app.include_router(
-    fastapi_users.get_oauth_router(google_oauth_client, auth_backend, os.getenv("JWT_SECRET"), redirect_url="https://mgzon-mgzon-app.hf.space/auth/google/callback"),
+    fastapi_users.get_oauth_router(google_oauth_client, auth_backend, JWT_SECRET, redirect_url="https://mgzon-mgzon-app.hf.space/auth/google/callback"),
     prefix="/auth/google",
     tags=["auth"],
 )
 app.include_router(
-    fastapi_users.get_oauth_router(github_oauth_client, auth_backend, os.getenv("JWT_SECRET"), redirect_url="https://mgzon-mgzon-app.hf.space/auth/github/callback"),
+    fastapi_users.get_oauth_router(github_oauth_client, auth_backend, JWT_SECRET, redirect_url="https://mgzon-mgzon-app.hf.space/auth/github/callback"),
     prefix="/auth/github",
     tags=["auth"],
 )
+app.include_router(api_router)
 
-# Middleware لمعالجة 404
+# Custom middleware for handling 404 and 500 errors
 class NotFoundMiddleware(BaseHTTPMiddleware):
     async def dispatch(self, request: Request, call_next):
         try:
@@ -120,107 +145,163 @@ class NotFoundMiddleware(BaseHTTPMiddleware):
 
 app.add_middleware(NotFoundMiddleware)
 
-# Root endpoint
+# Root endpoint for homepage
 @app.get("/", response_class=HTMLResponse)
-async def root(request: Request, user: User = Depends(fastapi_users.current_user(optional=True))):
+async def root(request: Request, user: User = Depends(current_active_user)):
     return templates.TemplateResponse("index.html", {"request": request, "user": user})
 
+# Google verification endpoint
+@app.get("/google97468ef1f6b6e804.html", response_class=PlainTextResponse)
+async def google_verification():
+    return "google-site-verification: google97468ef1f6b6e804.html"
+
 # Login page
 @app.get("/login", response_class=HTMLResponse)
-async def login_page(request: Request, user: User = Depends(fastapi_users.current_user(optional=True))):
+async def login_page(request: Request, user: User = Depends(current_active_user)):
     if user:
         return RedirectResponse(url="/chat", status_code=302)
     return templates.TemplateResponse("login.html", {"request": request})
 
 # Register page
 @app.get("/register", response_class=HTMLResponse)
-async def register_page(request: Request, user: User = Depends(fastapi_users.current_user(optional=True))):
+async def register_page(request: Request, user: User = Depends(current_active_user)):
     if user:
         return RedirectResponse(url="/chat", status_code=302)
     return templates.TemplateResponse("register.html", {"request": request})
 
-# Chat endpoint
+# Chat page
 @app.get("/chat", response_class=HTMLResponse)
-async def chat(request: Request, user: User = Depends(fastapi_users.current_user(optional=True))):
+async def chat(request: Request, user: User = Depends(current_active_user)):
     return templates.TemplateResponse("chat.html", {"request": request, "user": user})
 
-# About endpoint
+# Specific conversation page
+@app.get("/chat/{conversation_id}", response_class=HTMLResponse)
+async def chat_conversation(
+    request: Request,
+    conversation_id: str,
+    user: User = Depends(current_active_user),
+    db: Session = Depends(get_db)
+):
+    if not user:
+        return RedirectResponse(url="/login", status_code=302)
+    conversation = db.query(Conversation).filter(
+        Conversation.conversation_id == conversation_id,
+        Conversation.user_id == user.id
+    ).first()
+    if not conversation:
+        raise HTTPException(status_code=404, detail="Conversation not found")
+    return templates.TemplateResponse(
+        "chat.html",
+        {
+            "request": request,
+            "user": user,
+            "conversation_id": conversation.conversation_id,
+            "conversation_title": conversation.title or "Untitled Conversation"
+        }
+    )
+
+# About page
 @app.get("/about", response_class=HTMLResponse)
-async def about(request: Request, user: User = Depends(fastapi_users.current_user(optional=True))):
+async def about(request: Request, user: User = Depends(current_active_user)):
     return templates.TemplateResponse("about.html", {"request": request, "user": user})
 
-# Blog endpoint (قائمة المقالات)
+# Serve static files with caching and ETag support
+@app.get("/static/{path:path}")
+async def serve_static(path: str):
+    # Remove query parameters (e.g., ?v=1.0) for versioning
+    clean_path = re.sub(r'\?.*', '', path)
+    file_path = Path("static") / clean_path
+    if not file_path.exists():
+        raise HTTPException(status_code=404, detail="File not found")
+    # Set cache duration: 1 year for images, 1 hour for JS/CSS
+    cache_duration = 31536000  # 1 year
+    if clean_path.endswith(('.js', '.css')):
+        cache_duration = 3600  # 1 hour
+    # Generate ETag and Last-Modified headers
+    with open(file_path, "rb") as f:
+        file_hash = md5(f.read()).hexdigest()
+    headers = {
+        "Cache-Control": f"public, max-age={cache_duration}",
+        "ETag": file_hash,
+        "Last-Modified": datetime.utcfromtimestamp(file_path.stat().st_mtime).strftime('%a, %d %b %Y %H:%M:%S GMT')
+    }
+    return FileResponse(file_path, headers=headers)
+
+# Blog page with pagination
 @app.get("/blog", response_class=HTMLResponse)
 async def blog(request: Request, skip: int = Query(0, ge=0), limit: int = Query(10, ge=1, le=100)):
-    posts = await db.blog_posts.find().skip(skip).limit(limit).to_list(limit)
+    posts = await mongo_db.blog_posts.find().skip(skip).limit(limit).to_list(limit)
     return templates.TemplateResponse("blog.html", {"request": request, "posts": posts})
 
-# Blog post endpoint (عرض مقالة كاملة)
+# Individual blog post
 @app.get("/blog/{post_id}", response_class=HTMLResponse)
 async def blog_post(request: Request, post_id: str):
-    post = await db.blog_posts.find_one({"id": post_id})
+    post = await mongo_db.blog_posts.find_one({"id": post_id})
     if not post:
         raise HTTPException(status_code=404, detail="Post not found")
     return templates.TemplateResponse("blog_post.html", {"request": request, "post": post})
 
-# Docs endpoint
+# Docs page
 @app.get("/docs", response_class=HTMLResponse)
 async def docs(request: Request):
     return templates.TemplateResponse("docs.html", {"request": request})
 
-# Swagger UI endpoint
+# Swagger UI for API documentation
 @app.get("/swagger", response_class=HTMLResponse)
 async def swagger_ui():
     return get_swagger_ui_html(openapi_url="/openapi.json", title="MGZon API Documentation")
 
-# Sitemap endpoint (ديناميكي)
+# Sitemap with dynamic dates
 @app.get("/sitemap.xml", response_class=PlainTextResponse)
 async def sitemap():
-    posts = await db.blog_posts.find().to_list(100)
+    posts = await mongo_db.blog_posts.find().to_list(100)
+    current_date = datetime.utcnow().strftime('%Y-%m-%d')
     xml = '<?xml version="1.0" encoding="UTF-8"?>\n'
     xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n'
+    # Main pages with dynamic lastmod
     xml += '  <url>\n'
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/</loc>\n'
-    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>daily</changefreq>\n'
     xml += '    <priority>1.0</priority>\n'
     xml += '  </url>\n'
     xml += '  <url>\n'
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/chat</loc>\n'
-    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>daily</changefreq>\n'
     xml += '    <priority>0.8</priority>\n'
     xml += '  </url>\n'
     xml += '  <url>\n'
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/about</loc>\n'
-    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>weekly</changefreq>\n'
     xml += '    <priority>0.7</priority>\n'
     xml += '  </url>\n'
     xml += '  <url>\n'
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/login</loc>\n'
-    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>weekly</changefreq>\n'
     xml += '    <priority>0.8</priority>\n'
     xml += '  </url>\n'
     xml += '  <url>\n'
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/register</loc>\n'
-    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>weekly</changefreq>\n'
     xml += '    <priority>0.8</priority>\n'
     xml += '  </url>\n'
     xml += '  <url>\n'
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/docs</loc>\n'
-    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>weekly</changefreq>\n'
     xml += '    <priority>0.9</priority>\n'
     xml += '  </url>\n'
     xml += '  <url>\n'
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/blog</loc>\n'
-    xml += '    <lastmod>2025-09-01</lastmod>\n'
+    xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>daily</changefreq>\n'
     xml += '    <priority>0.9</priority>\n'
     xml += '  </url>\n'
+    # Blog posts from MongoDB
     for post in posts:
         xml += '  <url>\n'
         xml += f'    <loc>https://mgzon-mgzon-app.hf.space/blog/{post["id"]}</loc>\n'
@@ -231,14 +312,16 @@ async def sitemap():
     xml += '</urlset>'
     return xml
 
-# Redirect لـ /gradio
+# Redirect /gradio to /chat
 @app.get("/gradio", response_class=RedirectResponse)
 async def launch_chatbot():
     return RedirectResponse(url="/chat", status_code=302)
 
-# ربط API endpoints
-app.include_router(api_router)
+# Startup event to initialize MongoDB index
+@app.on_event("startup")
+async def startup_event():
+    await setup_mongo_index()
 
-# تشغيل الخادم
+# Run the app
 if __name__ == "__main__":
     uvicorn.run(app, host="0.0.0.0", port=int(os.getenv("PORT", 7860)))

static/css/sidebar.css

@@ -0,0 +1,151 @@
+/* sidebar.css */
+
+/* تنسيق السايدبار الأساسي */
+#sidebar {
+  width: 256px; /* عرض ثابت للسايدبار */
+  background: linear-gradient(to bottom, rgba(31, 41, 55, 0.9), rgba(20, 78, 85, 0.9)); /* تدرج لوني */
+  backdrop-filter: blur(10px); /* تأثير البلور */
+  -webkit-backdrop-filter: blur(10px); /* دعم WebKit */
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3); /* ظل خفيف */
+  transition: transform 0.3s ease-in-out; /* حركة سلسة */
+  z-index: 50; /* التأكد إن السايدبار فوق العناصر الأخرى */
+}
+
+/* تنسيق روابط التنقل */
+#sidebar nav ul li a {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  color: white;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+#sidebar nav ul li a:hover {
+  background-color: rgba(55, 65, 81, 0.8);
+  transform: translateX(4px);
+}
+
+/* تنسيق قائمة المحادثات */
+#conversationList {
+  max-height: calc(100vh - 300px); /* تحديد الارتفاع */
+  overflow-y: auto; /* شريط تمرير إذا لزم الأمر */
+}
+
+#conversationList li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  color: white;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+#conversationList li:hover {
+  background-color: rgba(55, 65, 81, 0.8);
+  transform: translateX(4px);
+}
+
+#conversationList li span.truncate {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* تنسيق زر الحذف */
+.delete-conversation-btn {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+#conversationList li:hover .delete-conversation-btn {
+  opacity: 1;
+}
+
+/* تنسيق زر التبديل */
+#sidebarToggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: white;
+}
+
+/* تنسيق زر History Toggle */
+#historyToggle {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  color: white;
+  background: none;
+  border: none;
+  border-radius: 0.375rem;
+  text-align: left;
+  transition: background-color 0.2s ease;
+}
+
+#historyToggle:hover {
+  background-color: rgba(55, 65, 81, 0.8);
+}
+
+/* تنسيق تلميح السحب */
+#swipeHint {
+  position: fixed;
+  top: 50%;
+  left: 1rem;
+  z-index: 50;
+  animation: swipe 2s infinite; /* استخدام swipe بدل pulse */
+}
+
+#swipeHint img {
+  width: 32px;
+  height: 32px;
+}
+
+/* الرسوم المتحركة */
+@keyframes swipe {
+  0% { transform: translateX(0); opacity: 0.7; }
+  50% { transform: translateX(10px); opacity: 1; }
+  100% { transform: translateX(0); opacity: 0.7; }
+}
+
+/* التصميم المتجاوب */
+@media (min-width: 768px) {
+  #sidebar {
+    transform: translateX(0); /* السايدبار مرئي دايمًا */
+  }
+  #sidebarToggle {
+    display: none; /* إخفاء زر التبديل على الشاشات الكبيرة */
+  }
+  #swipeHint {
+    display: none; /* إخفاء تلميح السحب على الشاشات الكبيرة */
+  }
+  #conversationList {
+    display: block; /* قائمة المحادثات مرئية دايمًا */
+  }
+  #historyToggle {
+    display: none; /* إخفاء زر History Toggle على الشاشات الكبيرة */
+  }
+}
+
+@media (max-width: 767px) {
+  #sidebar {
+    width: 80%;
+    max-width: 280px;
+    transform: translateX(-100%); /* السايدبار مخفي افتراضيًا */
+  }
+  #sidebar.open {
+    transform: translateX(0); /* إظهار السايدبار عند الفتح */
+  }
+  .md\:ml-64 {
+    margin-left: 0 !important; /* إزالة الهامش على الموبايل */
+  }
+  #conversationList {
+    display: none; /* إخفاء قائمة المحادثات افتراضيًا */
+  }
+  #conversationList:not(.hidden) {
+    display: block; /* إظهار القائمة عند الضغط على History Toggle */
+  }
+}

static/images/generate_icons.py

@@ -0,0 +1,14 @@
+import os
+import cairosvg
+
+input_svg = "mg.svg"
+
+sizes = [48, 72, 96, 128, 192, 256, 384, 512]
+
+output_dir = "icons"
+os.makedirs(output_dir, exist_ok=True)
+
+for size in sizes:
+    output_path = os.path.join(output_dir, f"mg-{size}.png")
+    cairosvg.svg2png(url=input_svg, write_to=output_path, output_width=size, output_height=size)
+    print(f"[✔] Generated: {output_path}")

static/images/ic/404.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 - Page Not Found</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col">
+    <div class="container max-w-6xl mx-auto text-center py-12 flex-1">
+        <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+        <h1 class="text-5xl font-bold mb-4">404 - Page Not Found 😕</h1>
+        <p class="text-lg mb-8">Oops! Looks like you wandered into the wrong corner of the internet.</p>
+        <a href="/" class="inline-block bg-gradient-to-r from-orange-500 to-red-500 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition transform">Back to Home</a>
+    </div>
+    <footer class="bg-gradient-to-r from-blue-900 to-gray-900 py-12">
+        <div class="container max-w-6xl mx-auto text-center">
+            <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
+            <p class="mb-4">Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-orange-500 hover:underline">Mark Al-Asfar</a> | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-orange-500 hover:underline">MGZon AI</a></p>
+            <div class="flex justify-center gap-6">
+                <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-facebook"></i></a>
+            </div>
+            <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+        </div>
+    </footer>
+    <script src="/static/js/scripts.js"></script>
+</body>
+</html>

static/images/ic/500.html

@@ -0,0 +1,32 @@
+<!-- templates/500.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>500 - Server Error</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col">
+    <div class="container max-w-6xl mx-auto text-center py-12 flex-1">
+        <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+        <h1 class="text-5xl font-bold mb-4">500 - Server Error 😓</h1>
+        <p class="text-lg mb-8">Something went wrong on our end. Please try again later or contact support.</p>
+        <a href="/" class="inline-block bg-gradient-to-r from-orange-500 to-red-500 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition transform">Back to Home</a>
+    </div>
+    <footer class="bg-gradient-to-r from-blue-900 to-gray-900 py-12">
+        <div class="container max-w-6xl mx-auto text-center">
+            <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
+            <p class="mb-4">Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-orange-500 hover:underline">Mark Al-Asfar</a> | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-orange-500 hover:underline">MGZon AI</a></p>
+            <div class="flex justify-center gap-6">
+                <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-facebook"></i></a>
+            </div>
+            <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+        </div>
+    </footer>
+    <script src="/static/js/scripts.js"></script>
+</body>
+</html>

static/images/ic/about.html

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Learn about MGZon AI, founded by Mark Al-Asfar in Alexandria, Egypt. Discover our mission, team, and achievements in AI and e-commerce.">
+  <meta name="keywords" content="MGZon AI, Mark Al-Asfar, AI chatbot, e-commerce, code generation, Alexandria, technology, team, achievements">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>About MGZon AI – Our Story</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link rel="apple-touch-icon" href="/static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="About MGZon AI – Our Story">
+  <meta property="og:description" content="Learn about MGZon AI, its founder Mark Al-Asfar, and our mission to innovate in AI and e-commerce.">
+  <meta property="og:image" content="/static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/about">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="About MGZon AI – Our Story">
+  <meta name="twitter:description" content="Learn about MGZon AI, its founder Mark Al-Asfar, and our mission to innovate in AI and e-commerce.">
+  <meta name="twitter:image" content="/static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "MGZon AI",
+  "url": "https://mgzon-mgzon-app.hf.space",
+  "logo": "/static/images/mg.svg",
+  "founder": {
+    "@type": "Person",
+    "name": "Mark Al-Asfar",
+    "sameAs": "https://mark-elasfar.web.app/"
+  },
+  "description": "MGZon AI develops AI-powered solutions for e-commerce and coding, founded by Mark Al-Asfar from Alexandria, Egypt.",
+  "keywords": ["MGZon AI", "Mark Al-Asfar", "AI chatbot", "e-commerce", "code generation", "Alexandria", "technology", "team", "MGZon", "MGZon chatbot", "E-commerce chatbot", "5G", "6G", "2025 AI trends"],
+  "address": {
+    "@type": "PostalAddress",
+    "addressLocality": "Alexandria",
+    "addressCountry": "Egypt"
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .sidebar.collapsed .logo {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .main-content {
+      min-height: calc(100vh - 4rem);
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    @media (max-width: 768px) {
+      .sidebar {
+        transform: translateX(-100%);
+      }
+      .sidebar.active {
+        transform: translateX(0);
+      }
+    }
+  </style>
+</head>
+<body class="text-white flex flex-col min-h-screen">
+  <!-- Mobile toggle button -->
+  <button id="sidebarToggle" class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition" aria-label="Toggle navigation">
+    <i class="bx bx-menu"></i>
+  </button>
+  <!-- Sidebar -->
+  <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40">
+    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
+    <img src="/static/images/mg.svg" alt="MGZon Logo" class="logo w-20 h-20 mx-auto mb-8 animate-pulse">
+    <nav class="flex flex-col gap-3">
+      <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Home</a>
+      <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
+      <a href="/about" class="px-4 py-2 rounded-lg bg-emerald-600">About MGZon</a>
+      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
+      <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
+    </nav>
+  </aside>
+  <!-- Main content -->
+  <main class="flex-1 md:ml-64 p-6 main-content">
+    <section class="container max-w-6xl mx-auto">
+      <div class="text-center py-12">
+        <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+        <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">About MGZon AI</h1>
+        <p class="text-lg max-w-2xl mx-auto mb-8">Founded by Mark Al-Asfar in Alexandria, Egypt, MGZon AI is revolutionizing e-commerce and coding with AI-driven solutions.</p>
+      </div>
+      <!-- Story Section -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Our Story</h2>
+        <div class="glass p-6">
+<p class="mb-4">MGZon AI was founded in 2023 in Alexandria, Egypt, by Mark Al-Asfar with a vision to empower developers and businesses through AI-driven solutions like MGZon Chatbot. We leverage technologies like DeepSeek, FastAPI, and 5G/6G innovations to deliver cutting-edge e-commerce and code generation tools.</p>
+          <p>From a small startup to a global player, we now operate warehouses in the USA, Canada, and China, serving thousands of users worldwide.</p>
+        </div>
+      </section>
+      <!-- Founder Section -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Meet Our Founder</h2>
+        <div class="glass p-6 text-center">
+          <img src="/static/images/mg.svg" alt="Mark Al-Asfar" class="w-24 h-24 mx-auto mb-4 rounded-full">
+          <h3 class="text-xl font-semibold mb-2">Mark Al-Asfar</h3>
+          <p class="mb-4">A visionary developer from Alexandria, Mark Al-Asfar founded MGZon AI to bridge the gap between AI innovation and practical applications in coding and e-commerce.</p>
+          <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Learn More About Mark</a>
+        </div>
+      </section>
+      <!-- Team Section -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Our Team</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="glass p-6 text-center">
+            <img src="https://via.placeholder.com/96" alt="Team Member" class="w-24 h-24 mx-auto mb-4 rounded-full">
+            <h3 class="text-xl font-semibold mb-2">Hager Mohamed</h3>
+            <p class="mb-4">Lead AI Engineer, specializing in machine learning and chatbot development.</p>
+          </div>
+          <div class="glass p-6 text-center">
+            <img src="https://via.placeholder.com/96" alt="Team Member" class="w-24 h-24 mx-auto mb-4 rounded-full">
+            <h3 class="text-xl font-semibold mb-2">Ahmed Khaled</h3>
+            <p class="mb-4">E-commerce Specialist, driving innovative solutions for online businesses.</p>
+          </div>
+        </div>
+      </section>
+      <!-- Achievements Section -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Our Achievements</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="glass p-6">
+            <h3 class="text-xl font-semibold mb-2">Global Reach</h3>
+            <p>Serving over 10,000 users across 50 countries with our AI tools.</p>
+          </div>
+          <div class="glass p-6">
+            <h3 class="text-xl font-semibold mb-2">Award-Winning Innovation</h3>
+            <p>Recognized as a top AI startup in MENA by TechCrunch in 2024.</p>
+          </div>
+        </div>
+      </section>
+      <!-- Mission Section -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Our Mission</h2>
+        <div class="glass p-6">
+          <p>At MGZon AI, we aim to make AI accessible to developers and businesses, simplifying coding and enhancing e-commerce with cutting-edge technology.</p>
+        </div>
+      </section>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
+    <div class="container max-w-6xl mx-auto text-center">
+      <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
+      <p class="mb-4">
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:[email protected]" class="text-emerald-300 hover:underline">[email protected]</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-center gap-6 mt-6">
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
+        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
+      </div>
+      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+    </div>
+  </footer>
+  <script>
+    const sidebar = document.getElementById('sidebar');
+    const toggleBtn = document.getElementById('sidebarToggle');
+    const closeSidebarBtn = document.getElementById('closeSidebar');
+    toggleBtn.addEventListener('click', () => {
+      sidebar.classList.toggle('active');
+      sidebar.classList.toggle('-translate-x-full');
+      sidebar.classList.toggle('translate-x-0');
+    });
+    closeSidebarBtn.addEventListener('click', () => {
+      sidebar.classList.remove('active');
+      sidebar.classList.add('-translate-x-full');
+      sidebar.classList.remove('translate-x-0');
+    });
+    document.addEventListener('click', (e) => {
+      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
+        sidebar.classList.remove('active');
+        sidebar.classList.add('-translate-x-full');
+        sidebar.classList.remove('translate-x-0');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

static/images/ic/blog.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Read the latest blog posts from MGZon AI about AI, coding, and e-commerce trends.">
+  <meta name="keywords" content="MGZon AI, blog, AI trends, code generation, e-commerce, Mark Al-Asfar">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>Blog - MGZon AI</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+<link rel="apple-touch-icon" href="/static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="Blog - MGZon AI">
+  <meta property="og:description" content="Read the latest blog posts from MGZon AI about AI, coding, and e-commerce trends.">
+<meta property="og:image" content="/static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/blog">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Blog - MGZon AI">
+  <meta name="twitter:description" content="Read the latest blog posts from MGZon AI about AI, coding, and e-commerce trends.">
+<meta name="twitter:image" content="/static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Blog",
+  "name": "MGZon AI Blog",
+  "url": "https://mgzon-mgzon-app.hf.space/blog",
+  "description": "Read the latest blog posts from MGZon AI about AI, coding, and e-commerce trends.",
+  "keywords": ["MGZon Chatbot", "blog", "AI trends", "code generation", "e-commerce", "Mark Al-Asfar", "MGZon", "MGZon AI", "AI chatbot", "Code generation bot", "E-commerce chatbot", "Python AI chatbot", "AI for coding", "E-commerce automation", "2025 AI trends", "chatgpt", "grok", "deepseek", "text generation"],
+  "isPartOf": {
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/"
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .sidebar.collapsed .logo {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .main-content {
+      min-height: calc(100vh - 4rem);
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    @media (max-width: 768px) {
+      .sidebar {
+        transform: translateX(-100%);
+      }
+      .sidebar.active {
+        transform: translateX(0);
+      }
+    }
+  </style>
+</head>
+<body class="text-white flex flex-col min-h-screen">
+  <!-- Mobile toggle button -->
+  <button id="sidebarToggle" class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition" aria-label="Toggle navigation">
+    <i class="bx bx-menu"></i>
+  </button>
+  <!-- Sidebar -->
+  <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40">
+    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
+<img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+    <nav class="flex flex-col gap-3">
+      <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Home</a>
+      <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
+      <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
+      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      <a href="/blog" class="px-4 py-2 rounded-lg bg-emerald-600">Blog</a>
+      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
+      <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
+    </nav>
+  </aside>
+  <!-- Main content -->
+  <main class="flex-1 md:ml-64 p-6 main-content">
+    <section class="container max-w-6xl mx-auto">
+      <div class="text-center py-12">
+<img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+        <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
+          MGZon AI Blog
+        </h1>
+        <p class="text-lg max-w-2xl mx-auto mb-8">
+  Stay updated with the latest trends in AI, coding, and e-commerce from MGZon AI. Explore topics like text generation, Python AI chatbots, and 2025 AI trends with insights from Mark Al-Asfar.
+        </p>
+      </div>
+      <!-- Blog Posts -->
+<section class="my-12">
+  <h2 class="text-3xl font-bold text-center mb-8">Latest Posts</h2>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+    {% for post in posts %}
+    <div class="glass p-6">
+      <h3 class="text-xl font-semibold mb-2">{{ post.title }}</h3>
+      <p class="mb-4">{{ post.content | truncate(100) }}</p>
+      <p class="text-sm text-gray-300">By {{ post.author }} | {{ post.date }}</p>
+      <a href="/blog/{{ post.id }}" class="text-emerald-300 hover:underline">Read More →</a>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
+    <div class="container max-w-6xl mx-auto text-center">
+<img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+      <p class="mb-4">
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:[email protected]" class="text-emerald-300 hover:underline">[email protected]</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-center gap-6 mt-6">
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
+        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
+      </div>
+      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+    </div>
+  </footer>
+  <script>
+    const sidebar = document.getElementById('sidebar');
+    const toggleBtn = document.getElementById('sidebarToggle');
+    const closeSidebarBtn = document.getElementById('closeSidebar');
+    toggleBtn.addEventListener('click', () => {
+      sidebar.classList.toggle('active');
+      sidebar.classList.toggle('-translate-x-full');
+      sidebar.classList.toggle('translate-x-0');
+    });
+    closeSidebarBtn.addEventListener('click', () => {
+      sidebar.classList.remove('active');
+      sidebar.classList.add('-translate-x-full');
+      sidebar.classList.remove('translate-x-0');
+    });
+    document.addEventListener('click', (e) => {
+      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
+        sidebar.classList.remove('active');
+        sidebar.classList.add('-translate-x-full');
+        sidebar.classList.remove('translate-x-0');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

static/images/ic/blog_post.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="{{ post.title }} - Read about AI, coding, and e-commerce trends from MGZon AI by Mark Al-Asfar.">
+  <meta name="keywords" content="MGZon Chatbot, MGZon AI, blog, AI trends, code generation, e-commerce, Mark Al-Asfar, AI chatbot, code generation bot, e-commerce chatbot, Python AI chatbot, AI for coding, e-commerce automation, 2025 AI trends, chatgpt, grok, deepseek, text generation">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>{{ post.title }} - MGZon AI</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+<link rel="apple-touch-icon" href="/static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="{{ post.title }} - MGZon AI">
+  <meta property="og:description" content="{{ post.content | truncate(150) }}">
+<meta property="og:image" content="/static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/blog/{{ post.id }}">
+  <meta property="og:type" content="article">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="{{ post.title }} - MGZon AI">
+  <meta name="twitter:description" content="{{ post.content | truncate(150) }}">
+<meta name="twitter:image" content="/static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "BlogPosting",
+  "headline": "{{ post.title }}",
+  "url": "https://mgzon-mgzon-app.hf.space/blog/{{ post.id }}",
+  "description": "{{ post.content | truncate(150) }}",
+  "keywords": ["MGZon Chatbot", "MGZon AI", "blog", "AI trends", "code generation", "e-commerce", "Mark Al-Asfar", "AI chatbot", "code generation bot", "e-commerce chatbot", "Python AI chatbot", "AI for coding", "e-commerce automation", "2025 AI trends", "chatgpt", "grok", "deepseek", "text generation"],
+  "author": {
+    "@type": "Person",
+    "name": "Mark Al-Asfar",
+    "url": "https://mark-elasfar.web.app/"
+  },
+  "datePublished": "{{ post.date }}",
+  "publisher": {
+    "@type": "Organization",
+    "name": "MGZon AI",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "/static/images/mg.svg"
+    }
+  },
+  "isPartOf": {
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/"
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .sidebar.collapsed .logo {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .main-content {
+      min-height: calc(100vh - 4rem);
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    @media (max-width: 768px) {
+      .sidebar {
+        transform: translateX(-100%);
+      }
+      .sidebar.active {
+        transform: translateX(0);
+      }
+    }
+    .markdown-content img {
+      max-width: 100%;
+      height: auto;
+      margin: 1rem 0;
+    }
+    .markdown-content h2 {
+      font-size: 1.875rem;
+      font-weight: bold;
+      margin-top: 2rem;
+      margin-bottom: 1rem;
+    }
+    .markdown-content p {
+      margin-bottom: 1rem;
+    }
+    .markdown-content a {
+      color: #34d399;
+      text-decoration: underline;
+    }
+    .markdown-content blockquote {
+      border-left: 4px solid #34d399;
+      padding-left: 1rem;
+      margin: 1rem 0;
+      color: #d1d5db;
+    }
+  </style>
+</head>
+<body class="text-white flex flex-col min-h-screen">
+  <!-- Mobile toggle button -->
+  <button id="sidebarToggle" class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition" aria-label="Toggle navigation">
+    <i class="bx bx-menu"></i>
+  </button>
+  <!-- Sidebar -->
+  <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40">
+    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
+<img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+    <nav class="flex flex-col gap-3">
+      <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Home</a>
+      <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
+      <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
+      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      <a href="/blog" class="px-4 py-2 rounded-lg bg-emerald-600">Blog</a>
+      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
+      <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
+    </nav>
+  </aside>
+  <!-- Main content -->
+  <main class="flex-1 md:ml-64 p-6 main-content">
+    <section class="container max-w-6xl mx-auto">
+      <div class="text-center py-12">
+<img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+        <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
+          {{ post.title }}
+        </h1>
+        <p class="text-sm text-gray-300">By {{ post.author }} | {{ post.date }}</p>
+      </div>
+      <!-- Blog Post Content -->
+      <section class="my-12 glass p-8 markdown-content">
+{{ post.content | markdown | safe }}
+      </section>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
+    <div class="container max-w-6xl mx-auto text-center">
+<img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+      <p class="mb-4">
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:[email protected]" class="text-emerald-300 hover:underline">[email protected]</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-center gap-6 mt-6">
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
+        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
+      </div>
+      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+    </div>
+  </footer>
+  <script>
+    const sidebar = document.getElementById('sidebar');
+    const toggleBtn = document.getElementById('sidebarToggle');
+    const closeSidebarBtn = document.getElementById('closeSidebar');
+    toggleBtn.addEventListener('click', () => {
+      sidebar.classList.toggle('active');
+      sidebar.classList.toggle('-translate-x-full');
+      sidebar.classList.toggle('translate-x-0');
+    });
+    closeSidebarBtn.addEventListener('click', () => {
+      sidebar.classList.remove('active');
+      sidebar.classList.add('-translate-x-full');
+      sidebar.classList.remove('translate-x-0');
+    });
+    document.addEventListener('click', (e) => {
+      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
+        sidebar.classList.remove('active');
+        sidebar.classList.add('-translate-x-full');
+        sidebar.classList.remove('translate-x-0');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

static/images/ic/chat.html

@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en" class="dark-theme">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <meta name="description" content="Chat with MGZon Chatbot, an AI-powered tool for coding, analysis, and e-commerce queries. Supports text, image, and audio inputs." />
+  <meta name="keywords" content="MGZon Chatbot, AI chatbot, code generation, DeepSeek, Gradio, FastAPI, e-commerce, programming, Mark Al-Asfar" />
+  <meta name="author" content="Mark Al-Asfar" />
+  <meta name="robots" content="index, follow" />
+  <title>MGZon Chatbot – AI Assistant</title>
+  <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
+  <link rel="apple-touch-icon" href="/static/images/mg.svg" />
+  <!-- Open Graph -->
+  <meta property="og:title" content="MGZon Chatbot – AI Assistant" />
+  <meta property="og:description" content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
+  <meta property="og:image" content="/static/images/mg.svg" />
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/chat" />
+  <meta property="og:type" content="website" />
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="MGZon Chatbot – AI Assistant" />
+  <meta name="twitter:description" content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
+  <meta name="twitter:image" content="/static/images/mg.svg" />
+  <!-- JSON-LD -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/chat",
+    "description": "An AI-powered chatbot for coding, analysis, and e-commerce queries."
+  }
+  </script>
+  <!-- Fonts & Styles -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Markdown & Syntax Highlight -->
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+  <!-- Animations -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" />
+  <!-- Carousel -->
+  <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css" />
+  <!-- Smooth Scroll -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css" />
+  <!-- Hammer.js for touch gestures -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/hammer.min.js"></script>
+  <!-- Project-Specific Styles -->
+  <link rel="stylesheet" href="/static/css/animation/style.css" />
+  <link rel="stylesheet" href="/static/css/button.css" />
+  <link rel="stylesheet" href="/static/css/chat/bubble.css" />
+  <link rel="stylesheet" href="/static/css/chat/markdown.css" />
+  <link rel="stylesheet" href="/static/css/chat/style.css" />
+  <link rel="stylesheet" href="/static/css/header.css" />
+  <link rel="stylesheet" href="/static/css/icon.css" />
+  <link rel="stylesheet" href="/static/css/input.css" />
+  <link rel="stylesheet" href="/static/css/logo.css" />
+  <link rel="stylesheet" href="/static/css/prompts.css" />
+  <link rel="stylesheet" href="/static/css/screen/1200.css" />
+  <link rel="stylesheet" href="/static/css/screen/2000.css" />
+  <link rel="stylesheet" href="/static/css/screen/320.css" />
+  <link rel="stylesheet" href="/static/css/screen/360.css" />
+  <link rel="stylesheet" href="/static/css/screen/3840.css" />
+  <link rel="stylesheet" href="/static/css/screen/480.css" />
+  <link rel="stylesheet" href="/static/css/screen/720.css" />
+  <link rel="stylesheet" href="/static/css/screen/7680.css" />
+  <link rel="stylesheet" href="/static/css/screen/common.css" />
+  <link rel="stylesheet" href="/static/css/style.css" />
+  <link rel="stylesheet" href="/static/css/webkit.css" />
+  <link rel="stylesheet" href="/static/css/sidebar.css" />
+</head>
+<body class="min-h-screen flex flex-col bg-gradient-to-br from-gray-900 via-teal-900 to-emerald-900">
+  <!-- Sidebar -->
+  <aside id="sidebar" class="fixed inset-y-0 left-0 w-64 bg-gray-800/90 backdrop-blur-md transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-50">
+    <div class="flex items-center justify-between p-4 border-b border-gray-700">
+      <div class="flex items-center">
+        <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-10 h-10 mr-2 animate-pulse" />
+        <h2 class="text-lg font-bold text-white">MGZon</h2>
+      </div>
+      <button id="sidebarToggle" class="md:hidden text-white" aria-label="Close Sidebar">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+    <nav class="p-4">
+      <ul class="space-y-2">
+        <li>
+          <a href="/" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3 11.5L12 4l9 7.5M5 21V11.5h14V21"></path>
+            </svg>
+            Home
+          </a>
+        </li>
+        <li>
+          <a href="/about" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            About
+          </a>
+        </li>
+        <li>
+          <a href="/blog" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 006 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"></path>
+            </svg>
+            Blog
+          </a>
+        </li>
+        <li>
+          <a href="/docs" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+            </svg>
+            Docs
+          </a>
+        </li>
+        {% if user %}
+        <li>
+          <a href="/auth/jwt/logout" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+            </svg>
+            Logout
+          </a>
+        </li>
+        {% else %}
+        <li>
+          <a href="/login" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
+            </svg>
+            Login
+          </a>
+        </li>
+        {% endif %}
+      </ul>
+      {% if user %}
+      <div class="mt-4">
+        <div class="flex justify-between items-center px-2 mb-2">
+          <h3 class="text-sm font-semibold text-white">Conversations</h3>
+          <button id="newConversationBtn" class="text-white hover:bg-gray-700 p-1 rounded" title="New Conversation">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            </svg>
+          </button>
+        </div>
+        <ul id="conversationList" class="space-y-2 max-h-[calc(100vh-300px)] overflow-y-auto">
+          <!-- Conversations will be populated by JavaScript -->
+        </ul>
+      </div>
+      {% endif %}
+    </nav>
+  </aside>
+
+  <!-- Swipe Hint for Mobile -->
+  <div id="swipeHint" class="md:hidden fixed top-1/2 left-4 z-50 animate-pulse">
+    <img src="/static/images/swipe-hint.svg" alt="Swipe to open sidebar" class="w-8 h-8" />
+  </div>
+
+  <!-- Main Content -->
+  <div class="flex-1 flex flex-col max-w-screen-xl w-full mx-auto md:ml-64">
+    <!-- Chat Header -->
+    <header class="chat-header p-3 flex justify-between items-center">
+      <div class="chat-title text-xl font-semibold text-white">
+        <span id="conversationTitle">{{ conversation_title | default('MGZon AI Assistant') }}</span>
+      </div>
+      <div class="chat-controls flex gap-2">
+        <button id="clearBtn" class="icon-btn" aria-label="Clear All Messages" title="Clear All Messages">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 6h18" />
+            <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6" />
+            <path d="M14 11v6" />
+          </svg>
+        </button>
+      </div>
+    </header>
+
+    <!-- Chat Area -->
+    <main class="flex-1 flex flex-col">
+      <div id="initialContent" class="flex flex-col items-center justify-center text-center h-full">
+        <div class="title mb-4 gradient-text text-3xl font-bold">
+          How can I help you today?
+        </div>
+        <p class="system text-gray-300 mb-4">
+          A versatile chatbot powered by DeepSeek, GPT-OSS, CLIP, Whisper, and TTS.<br>
+          Type your query, upload images/files, or hold the send button to record audio!
+        </p>
+        <!-- Prompts -->
+        <div class="prompts w-full max-w-md mx-auto grid gap-2">
+          <div class="prompt-item" data-prompt="What's the capital of France?">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M18.66 5.34l1.41-1.41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              <circle cx="12" cy="12" r="4" stroke-width="2" />
+            </svg>
+            <span>What's the capital of France?</span>
+          </div>
+          <div class="prompt-item" data-prompt="Generate a Python script for a simple web server">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M4 7h16M4 12h16M4 17h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            <span>Generate a Python script for a simple web server</span>
+          </div>
+          <div class="prompt-item" data-prompt="Analyze this image for me">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M3 12h18M12 3v18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            <span>Analyze this image for me</span>
+          </div>
+          <div class="prompt-item" data-prompt="Convert this text to audio">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M12 3v18M7 12h10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            <span>Convert this text to audio</span>
+          </div>
+        </div>
+        <div id="messageLimitWarning" class="text-red-500 text-center hidden mt-4">
+          You have reached the message limit. Please <a href="/login" class="text-blue-300 underline">login</a> to continue.
+        </div>
+      </div>
+      <div id="chatArea" class="flex-1 hidden" aria-live="polite">
+        <div id="chatBox" class="flex-col" aria-live="polite"></div>
+      </div>
+      <!-- Footer Form -->
+      <form id="footerForm" class="flex p-4">
+        <div id="inputContainer" class="w-full">
+          <textarea id="userInput" placeholder="Ask anything..." required></textarea>
+          <div id="rightIconGroup" class="flex gap-2">
+            <button type="button" id="fileBtn" class="icon-btn" aria-label="Upload File" title="Upload File">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                <path d="M14 2v6h6" />
+              </svg>
+            </button>
+            <input type="file" id="fileInput" accept="image/*,.mp3,.wav" style="display: none;" />
+            <button type="button" id="audioBtn" class="icon-btn" aria-label="Upload Audio File" title="Upload Audio File">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                <path d="M12 19v4" />
+              </svg>
+            </button>
+            <input type="file" id="audioInput" accept="audio/*" style="display: none;" />
+            <button type="submit" id="sendBtn" class="icon-btn" disabled aria-label="Send or Hold to Record" title="Click to Send or Hold to Record Voice">
+              <svg id="sendIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M3 12h11" />
+              </svg>
+            </button>
+            <button id="stopBtn" class="icon-btn" aria-label="Stop" title="Stop" style="display: none;">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
+                <rect x="6" y="6" width="12" height="12" rx="2" fill="white" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div id="filePreview" class="upload-preview" style="display: none;"></div>
+        <div id="audioPreview" class="audio-preview" style="display: none;"></div>
+      </form>
+    </main>
+
+    <!-- Copyright -->
+    <div class="text-center text-xs text-gray-400 py-2">
+      © 2025 Mark Al-Asfar & MGZon AI. All rights reserved.
+    </div>
+  </div>
+
+  <!-- Scripts -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="/static/js/chat.js"></script>
+  <script>
+    AOS.init();
+    // تمرير conversation_id و conversation_title إذا كانا موجودين
+    {% if conversation_id %}
+      window.conversationId = "{{ conversation_id }}";
+      window.conversationTitle = "{{ conversation_title }}";
+      if (window.loadConversation) {
+        window.loadConversation("{{ conversation_id }}");
+      }
+    {% endif %}
+  </script>
+</body>
+</html>

static/images/ic/docs.html

@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.">
+  <meta name="keywords" content="MGZon Chatbot, API documentation, code generation, e-commerce, FastAPI, Mark Al-Asfar">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>API Documentation - MGZon Chatbot</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link rel="apple-touch-icon" href="/static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="API Documentation - MGZon Chatbot">
+  <meta property="og:description" content="Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.">
+  <meta property="og:image" content="/static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/docs">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="API Documentation - MGZon Chatbot">
+  <meta name="twitter:description" content="Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.">
+  <meta name="twitter:image" content="/static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "API Documentation - MGZon Chatbot",
+  "url": "https://mgzon-mgzon-app.hf.space/docs",
+  "description": "Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.",
+  "keywords": ["MGZon Chatbot", "API documentation", "code generation", "e-commerce", "FastAPI", "Mark Al-Asfar", "MGZon", "MGZon AI", "AI chatbot", "Code generation bot", "Python AI chatbot", "FastAPI integration", "AI for coding", "AI developer tools", "text generation"],
+  "isPartOf": {
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/"
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+  <!-- Prism (for code highlighting) -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .sidebar.collapsed .logo {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .main-content {
+      min-height: calc(100vh - 4rem);
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    @media (max-width: 768px) {
+      .sidebar {
+        transform: translateX(-100%);
+      }
+      .sidebar.active {
+        transform: translateX(0);
+      }
+    }
+  </style>
+</head>
+<body class="text-white flex flex-col min-h-screen">
+  <!-- Mobile toggle button -->
+  <button id="sidebarToggle" class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition" aria-label="Toggle navigation">
+    <i class="bx bx-menu"></i>
+  </button>
+  <!-- Sidebar -->
+  <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40">
+    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
+    <img src="/static/images/mg.svg" alt="MGZon Logo" class="logo w-20 h-20 mx-auto mb-8 animate-pulse">
+    <nav class="flex flex-col gap-3">
+      <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Home</a>
+      <a href="/docs" class="px-4 py-2 rounded-lg bg-emerald-600">API Documentation</a>
+      <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
+      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
+      <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
+    </nav>
+  </aside>
+  <!-- Main content -->
+  <main class="flex-1 md:ml-64 p-6 main-content">
+    <section class="container max-w-6xl mx-auto">
+      <div class="text-center py-12">
+        <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+<h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">About MGZon AI by Mark Al-Asfar</h1>
+          MGZon Chatbot API Documentation
+        </h1>
+        <p class="text-lg max-w-2xl mx-auto mb-8">
+          Integrate MGZon Chatbot's AI-powered features into your applications. Learn how to use our APIs for code generation, web search, and e-commerce solutions.
+        </p>
+        <p>Explore the MGZon Chatbot API for seamless integration of AI-powered code generation, text generation, and e-commerce automation. Built by Mark Al-Asfar using FastAPI and Hugging Face AI.</p>
+        <a href="https://x.ai/api" target="_blank" class="inline-flex items-center bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+          Get API Key <i class="bx bx-key ml-2"></i>
+        </a>
+      </div>
+      <!-- API Overview -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">API Overview</h2>
+        <div class="glass p-6">
+          <p class="mb-4">The MGZon Chatbot API provides endpoints for code generation, real-time web search, and e-commerce functionalities. Built with FastAPI, it offers secure and scalable integration.</p>
+          <p>Base URL: <code class="bg-gray-800/60 p-1 rounded">https://mgzon-mgzon-app.hf.space/api</code></p>
+        </div>
+      </section>
+      <!-- Authentication -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Authentication</h2>
+        <div class="glass p-6">
+          <p class="mb-4">Use JWT tokens for authentication. Register or login to obtain a token.</p>
+          <pre><code class="language-bash">
+curl -X POST "https://mgzon-mgzon-app.hf.space/auth/jwt/login" \
+  -H "Content-Type: application/x-www-form-urlencoded" \
+  -d "username=your_email&password=your_password"
+          </code></pre>
+        </div>
+      </section>
+      <!-- Endpoints -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Endpoints</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="glass p-6">
+            <h3 class="text-xl font-semibold mb-2">/chat (POST)</h3>
+            <p class="mb-4">Interact with the AI chatbot for code generation or queries.</p>
+            <pre><code class="language-bash">
+curl -X POST "https://mgzon-mgzon-app.hf.space/chat" \
+  -H "Authorization: Bearer your_token" \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Generate a Python function"}'
+            </code></pre>
+          </div>
+          <div class="glass p-6">
+            <h3 class="text-xl font-semibold mb-2">/web_search (POST)</h3>
+            <p class="mb-4">Perform real-time web searches.</p>
+            <pre><code class="language-bash">
+curl -X POST "https://mgzon-mgzon-app.hf.space/web_search" \
+  -H "Authorization: Bearer your_token" \
+  -H "Content-Type: application/json" \
+  -d '{"query": "AI trends 2025"}'
+            </code></pre>
+          </div>
+        </div>
+      </section>
+      <!-- Getting Started -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Getting Started</h2>
+        <div class="glass p-6">
+          <p class="mb-4">1. Register at <a href="/register" class="text-emerald-300 hover:underline">/register</a>.</p>
+          <p class="mb-4">2. Obtain your API key from <a href="https://x.ai/api" target="_blank" class="text-emerald-300 hover:underline">xAI API</a>.</p>
+          <p>3. Use the endpoints above to integrate MGZon Chatbot into your application.</p>
+        </div>
+      </section>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
+    <div class="container max-w-6xl mx-auto text-center">
+<img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+      <p class="mb-4">
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:[email protected]" class="text-emerald-300 hover:underline">[email protected]</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-center gap-6 mt-6">
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
+        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
+      </div>
+      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+    </div>
+  </footer>
+  <script>
+    const sidebar = document.getElementById('sidebar');
+    const toggleBtn = document.getElementById('sidebarToggle');
+    const closeSidebarBtn = document.getElementById('closeSidebar');
+    toggleBtn.addEventListener('click', () => {
+      sidebar.classList.toggle('active');
+      sidebar.classList.toggle('-translate-x-full');
+      sidebar.classList.toggle('translate-x-0');
+    });
+    closeSidebarBtn.addEventListener('click', () => {
+      sidebar.classList.remove('active');
+      sidebar.classList.add('-translate-x-full');
+      sidebar.classList.remove('translate-x-0');
+    });
+    document.addEventListener('click', (e) => {
+      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
+        sidebar.classList.remove('active');
+        sidebar.classList.add('-translate-x-full');
+        sidebar.classList.remove('translate-x-0');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

static/images/ic/index.html

@@ -0,0 +1,342 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="MGZon Chatbot – AI-powered assistant for code generation, web search, and e-commerce solutions by Mark Al-Asfar from Alexandria, Egypt.">
+  <meta name="keywords" content="MGZon Chatbot, AI assistant, code generation, e-commerce, Mark Al-Asfar, 
+United States, FastAPI, Gradio">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>MGZon Chatbot – Powered by AI</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link rel="apple-touch-icon" href="/static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="MGZon Chatbot – AI-Powered Solutions">
+  <meta property="og:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
+  <meta property="og:image" content="/static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="MGZon Chatbot – AI-Powered Solutions">
+  <meta name="twitter:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
+  <meta name="twitter:image" content="/static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": "MGZon Chatbot",
+  "url": "https://mgzon-mgzon-app.hf.space/",
+  "description": "MGZon Chatbot by Mark Al-Asfar: Your AI assistant for code generation, real-time web search, and e-commerce solutions.",
+  "keywords": ["MGZon Chatbot", "AI chatbot", "Code generation AI", "E-commerce AI solutions", "Mark Al-Asfar", "AI assistant for developers", "FastAPI chatbot", "Real-time web search AI", "MGZon AI", "Python AI chatbot", "AI for coding", "E-commerce automation", "Hugging Face AI", "2025 AI trends", "chatgpt", "grok", "deepseek", "text generation"],
+  "potentialAction": {
+    "@type": "SearchAction",
+    "target": "https://mgzon-mgzon-app.hf.space/?q={search_term_string}",
+    "query-input": "required name=search_term_string"
+  },
+  "publisher": {
+    "@type": "Organization",
+    "name": "MGZon AI",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "/static/images/mg.svg"
+    }
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+  <!-- Prism (for code highlighting) -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .sidebar.collapsed .logo {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .main-content {
+      min-height: calc(100vh - 4rem);
+    }
+    .loading {
+      display: inline-block;
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin-left: 0.5rem;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+    @media (max-width: 768px) {
+      .sidebar {
+        transform: translateX(-100%);
+      }
+      .sidebar.active {
+        transform: translateX(0);
+      }
+    }
+  </style>
+</head>
+<body class="text-white flex flex-col min-h-screen">
+  <!-- Mobile toggle button -->
+  <button id="sidebarToggle" class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition" aria-label="Toggle navigation">
+    <i class="bx bx-menu"></i>
+  </button>
+  <!-- Sidebar -->
+  <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40">
+    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
+    <img src="/static/images/mg.svg" alt="MGZon Logo" class="logo w-20 h-20 mx-auto mb-8 animate-pulse">
+    <nav class="flex flex-col gap-3">
+      <a href="/" class="px-4 py-2 rounded-lg bg-emerald-600">Home</a>
+      <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
+      <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
+      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
+      <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
+    </nav>
+  </aside>
+  <!-- Main content -->
+  <main class="flex-1 md:ml-64 p-6 main-content">
+    <section class="container max-w-6xl mx-auto">
+      <!-- Hero -->
+      <div class="text-center py-12">
+        <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+        <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
+          Welcome to MGZon Chatbot 🚀
+        </h1>
+        <p class="text-lg max-w-2xl mx-auto mb-8">
+          MGZon Chatbot is an AI-powered assistant for code generation, web search, and e-commerce solutions. Built with Gradio and FastAPI by Mark Al-Asfar from 
+United States. Ready to code smarter and shop better?
+  Discover MGZon Chatbot, an AI-powered assistant by Mark Al-Asfar for code generation, real-time web search, and e-commerce automation. Built with FastAPI and Hugging Face AI, MGZon rivals tools like ChatGPT, Grok, and DeepSeek.
+        </p>
+        {% if user %}
+          <div class="flex justify-center gap-4">
+            <a href="/chat" id="launchBtn" class="inline-flex items-center bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+              Launch Chatbot <i class="bx bx-rocket ml-2"></i>
+              <span id="spinner" class="loading hidden"></span>
+            </a>
+            <a href="/auth/jwt/logout" class="inline-flex items-center bg-gradient-to-r from-red-500 to-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+              Logout <i class="bx bx-log-out ml-2"></i>
+            </a>
+          </div>
+        {% else %}
+          <div class="flex justify-center gap-4">
+            <a href="/login" class="inline-flex items-center bg-gradient-to-r from-blue-500 to-cyan-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+              Login <i class="bx bx-log-in ml-2"></i>
+            </a>
+            <a href="/register" class="inline-flex items-center bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+              Sign Up <i class="bx bx-user-plus ml-2"></i>
+            </a>
+          </div>
+        {% endif %}
+      </div>
+      <!-- Features -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Why Choose MGZon?</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('code-generation')">
+            <button class="absolute top-2 right-2 text-gray-300 hover:text-white transition" onclick="event.stopPropagation(); closeCardDetails('code-generation')" aria-label="Close card">&times;</button>
+            <i class="bx bx-code-alt text-4xl text-emerald-300 mb-4"></i>
+            <h3 class="text-xl font-semibold mb-2">Code Generation</h3>
+            <p>Generate clean, well-commented code for React, Django, Flask, Node.js, and more.</p>
+            <div id="code-generation-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+              <p>Supports multiple frameworks with examples and best practices for seamless integration.</p>
+              <button onclick="closeCardDetails('code-generation')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+            </div>
+          </div>
+          <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('web-search')">
+            <button class="absolute top-2 right-2 text-gray-300 hover:text-white transition" onclick="event.stopPropagation(); closeCardDetails('web-search')" aria-label="Close card">&times;</button>
+            <i class="bx bx-search text-4xl text-emerald-300 mb-4"></i>
+            <h3 class="text-xl font-semibold mb-2">Web Search</h3>
+            <p>Real-time web search for MGZon queries and industry insights.</p>
+            <div id="web-search-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+              <p>Get up-to-date answers and insights tailored to your needs.</p>
+              <button onclick="closeCardDetails('web-search')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+            </div>
+          </div>
+          <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('ecommerce')">
+            <button class="absolute top-2 right-2 text-gray-300 hover:text-white transition" onclick="event.stopPropagation(); closeCardDetails('ecommerce')" aria-label="Close card">&times;</button>
+            <i class="bx bx-cart text-4xl text-emerald-300 mb-4"></i>
+            <h3 class="text-xl font-semibold mb-2">E-commerce Solutions</h3>
+            <p>AI-driven tools to optimize your online store and boost sales.</p>
+            <div id="ecommerce-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+              <p>From product recommendations to inventory management, MGZon enhances your e-commerce experience.</p>
+              <button onclick="closeCardDetails('ecommerce')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- News -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">Latest MGZon Updates</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="glass p-6">
+            <h3 class="text-xl font-semibold mb-2">New AI Features</h3>
+            <p>Explore our latest AI updates for smarter code and e-commerce tools.</p>
+            <a href="https://hager-zon.vercel.app/blog" target="_blank" class="text-emerald-300 hover:underline">Read More →</a>
+          </div>
+          <div class="glass p-6">
+            <h3 class="text-xl font-semibold mb-2">Global Expansion</h3>
+            <p>New warehouses in the USA, Canada, and China to serve you better.</p>
+            <a href="https://hager-zon.vercel.app/community" target="_blank" class="text-emerald-300 hover:underline">Learn More →</a>
+          </div>
+        </div>
+      </section>
+      <!-- Testimonials -->
+      <section class="my-12">
+        <h2 class="text-3xl font-bold text-center mb-8">What Our Users Say</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="glass p-6">
+            <p class="mb-4">"MGZon Chatbot transformed how I code. The AI-generated snippets are accurate and save hours!"</p>
+            <p class="font-semibold">– Ahmed, Developer</p>
+          </div>
+          <div class="glass p-6">
+            <p class="mb-4">"The e-commerce tools helped me optimize my store and boost sales by 30%."</p>
+            <p class="font-semibold">– Sarah, Store Owner</p>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
+    <div class="container max-w-6xl mx-auto text-center">
+     <img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+      <p class="mb-4">
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:[email protected]" class="text-emerald-300 hover:underline">[email protected]</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-center gap-6 mt-6">
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
+        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
+      </div>
+      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+    </div>
+  </footer>
+  <script>
+    const sidebar = document.getElementById('sidebar');
+    const toggleBtn = document.getElementById('sidebarToggle');
+    const closeSidebarBtn = document.getElementById('closeSidebar');
+    toggleBtn.addEventListener('click', () => {
+      sidebar.classList.toggle('active');
+      sidebar.classList.toggle('-translate-x-full');
+      sidebar.classList.toggle('translate-x-0');
+    });
+    closeSidebarBtn.addEventListener('click', () => {
+      sidebar.classList.remove('active');
+      sidebar.classList.add('-translate-x-full');
+      sidebar.classList.remove('translate-x-0');
+    });
+    document.addEventListener('click', (e) => {
+      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
+        sidebar.classList.remove('active');
+        sidebar.classList.add('-translate-x-full');
+        sidebar.classList.remove('translate-x-0');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+    const launchBtn = document.getElementById('launchBtn');
+    const spinner = document.getElementById('spinner');
+    launchBtn.addEventListener('click', (e) => {
+      spinner.classList.remove('hidden');
+      setTimeout(() => spinner.classList.add('hidden'), 2000);
+    });
+  </script>
+</body>
+</html>

static/images/ic/login.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign in with email, Google, or GitHub.">
+  <meta name="keywords" content="MGZon Chatbot, login, AI assistant, code generation, e-commerce, Mark Al-Asfar">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>Login - MGZon Chatbot</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link rel="apple-touch-icon" href="/static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="Login - MGZon Chatbot">
+  <meta property="og:description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+  <meta property="og:image" content="/static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/login">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Login - MGZon Chatbot">
+  <meta name="twitter:description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+  <meta name="twitter:image" content="/static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Login - MGZon Chatbot",
+  "url": "https://mgzon-mgzon-app.hf.space/login",
+  "description": "Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign in with email, Google, or GitHub.",
+  "keywords": ["MGZon Chatbot", "login", "AI chatbot", "code generation", "e-commerce", "Mark Al-Asfar", "MGZon", "MGZon AI", "E-commerce chatbot", "Python AI chatbot", "FastAPI integration"],
+  "isPartOf": {
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/"
+  }
+}
+</script>
+  <!-- Tailwind (v3) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Boxicons -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+  <style>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .loading {
+      display: inline-block;
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin-left: 0.5rem;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+  </style>
+</head>
+<body class="text-white min-h-screen flex flex-col justify-center items-center">
+  <div class="container max-w-md mx-auto text-center py-12">
+    <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+    <h1 class="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
+      Login to MGZon Chatbot
+    </h1>
+    <div class="glass p-8">
+      <form id="loginForm" action="/auth/jwt/login" method="POST" class="flex flex-col gap-4">
+        <input type="email" name="username" id="email" placeholder="Email" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
+        <input type="password" name="password" id="password" placeholder="Password" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
+        <button type="submit" id="loginBtn" class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Login <i class="bx bx-log-in ml-2"></i>
+          <span id="spinner" class="loading hidden"></span>
+        </button>
+      </form>
+      <div class="flex justify-center gap-4 mt-4 flex-wrap">
+        <a href="/auth/google/authorize" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Login with Google <i class="bx bxl-google ml-2"></i>
+        </a>
+        <a href="/auth/github/authorize" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Login with GitHub <i class="bx bxl-github ml-2"></i>
+        </a>
+      </div>
+      <p class="mt-4">Don't have an account? <a href="/register" class="text-emerald-300 hover:underline">Register</a></p>
+      <p id="errorMsg" class="text-red-500 mt-4 hidden"></p>
+    </div>
+  </div>
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8 w-full">
+    <div class="container max-w-6xl mx-auto text-center">
+      <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
+      <p class="mb-4">
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:[email protected]" class="text-emerald-300 hover:underline">[email protected]</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-center gap-6 mt-6">
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
+        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
+      </div>
+      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+    </div>
+  </footer>
+  <script>
+    const loginForm = document.getElementById('loginForm');
+    const loginBtn = document.getElementById('loginBtn');
+    const spinner = document.getElementById('spinner');
+    const errorMsg = document.getElementById('errorMsg');
+    loginForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      spinner.classList.remove('hidden');
+      errorMsg.classList.add('hidden');
+      const formData = new FormData(loginForm);
+      try {
+        const response = await fetch('/auth/jwt/login', {
+          method: 'POST',
+          body: formData
+        });
+        spinner.classList.add('hidden');
+        if (response.ok) {
+          window.location.href = '/chat';
+        } else {
+          const error = await response.json();
+          errorMsg.textContent = error.detail || 'Login failed. Please try again.';
+          errorMsg.classList.remove('hidden');
+        }
+      } catch (error) {
+        spinner.classList.add('hidden');
+        errorMsg.textContent = 'An error occurred. Please try again.';
+        errorMsg.classList.remove('hidden');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

static/images/ic/register.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign up with email, Google, or GitHub.">
+  <meta name="keywords" content="MGZon Chatbot, register, sign up, AI assistant, code generation, e-commerce, Mark Al-Asfar">
+  <meta name="author" content="Mark Al-Asfar">
+  <meta name="robots" content="index, follow">
+  <title>Register - MGZon Chatbot</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link rel="apple-touch-icon" href="/static/images/mg.svg">
+  <!-- Open Graph -->
+  <meta property="og:title" content="Register - MGZon Chatbot">
+  <meta property="og:description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+  <meta property="og:image" content="/static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/register">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Register - MGZon Chatbot">
+  <meta name="twitter:description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+  <meta name="twitter:image" content="/static/images/mg.svg">
+  <!-- JSON-LD -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Register - MGZon Chatbot",
+  "url": "https://mgzon-mgzon-app.hf.space/register",
+  "description": "Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign up with email, Google, or GitHub.",
+  "keywords": ["MGZon Chatbot", "register", "sign up", "AI chatbot", "code generation", "e-commerce", "Mark Al-Asfar", "MGZon", "MGZon AI", "E-commerce chatbot", "Python AI chatbot", "FastAPI integration"],
+  "isPartOf": {
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/"
+  }
+}
+</script>
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    body {
+      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
+      font-family: system-ui, sans-serif;
+    }
+    .glass {
+      background: rgba(255, 255, 255, 0.07);
+      border-radius: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .loading {
+      display: inline-block;
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin-left: 0.5rem;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .glass:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+    }
+  </style>
+</head>
+<body class="text-white min-h-screen flex flex-col justify-center items-center">
+  <div class="container max-w-md mx-auto text-center py-12">
+    <img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+    <h1 class="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
+      Register for MGZon Chatbot
+    </h1>
+    <div class="glass p-8">
+      <form id="registerForm" action="/auth/register" method="POST" class="flex flex-col gap-4">
+        <input type="text" name="username" id="username" placeholder="Username" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
+        <input type="email" name="email" id="email" placeholder="Email" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
+        <input type="password" name="password" id="password" placeholder="Password" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
+        <button type="submit" id="registerBtn" class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Register <i class="bx bx-user-plus ml-2"></i>
+          <span id="spinner" class="loading hidden"></span>
+        </button>
+      </form>
+      <div class="flex justify-center gap-4 mt-4 flex-wrap">
+        <a href="/auth/google/authorize" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Sign Up with Google <i class="bx bxl-google ml-2"></i>
+        </a>
+        <a href="/auth/github/authorize" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+          Sign Up with GitHub <i class="bx bxl-github ml-2"></i>
+        </a>
+      </div>
+      <p class="mt-4">Already have an account? <a href="/login" class="text-emerald-300 hover:underline">Login</a></p>
+      <p id="errorMsg" class="text-red-500 mt-4 hidden"></p>
+    </div>
+  </div>
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8 w-full">
+    <div class="container max-w-6xl mx-auto text-center">
+      <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
+      <p class="mb-4">
+        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
+        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Email Us</h4>
+          <p><a href="mailto:[email protected]" class="text-emerald-300 hover:underline">[email protected]</a></p>
+          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Phone Support</h4>
+          <p>+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Community</h4>
+          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
+          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">API Docs</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
+          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Explore our API documentation for seamless integration.</p>
+            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">FAQ</h4>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Find answers to common questions in our FAQ section.</p>
+            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
+          <h4 class="font-semibold mb-1">Documentation</h4>
+          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
+          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
+            <p>Access comprehensive documentation for MGZon Chatbot.</p>
+            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-center gap-6 mt-6">
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
+        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
+      </div>
+      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+    </div>
+  </footer>
+  <script>
+    const registerForm = document.getElementById('registerForm');
+    const registerBtn = document.getElementById('registerBtn');
+    const spinner = document.getElementById('spinner');
+    const errorMsg = document.getElementById('errorMsg');
+    registerForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      spinner.classList.remove('hidden');
+      errorMsg.classList.add('hidden');
+      const formData = new FormData(registerForm);
+      try {
+        const response = await fetch('/auth/register', {
+          method: 'POST',
+          body: formData
+        });
+        spinner.classList.add('hidden');
+        if (response.ok) {
+          window.location.href = '/chat';
+        } else {
+          const error = await response.json();
+          errorMsg.textContent = error.detail || 'Registration failed. Please try again.';
+          errorMsg.classList.remove('hidden');
+        }
+      } catch (error) {
+        spinner.classList.add('hidden');
+        errorMsg.textContent = 'An error occurred. Please try again.';
+        errorMsg.classList.remove('hidden');
+      }
+    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+  </script>
+</body>
+</html>

static/js/chat.js

@@ -1,33 +1,42 @@
-// static/js/chat.js
 // SPDX-FileCopyrightText: Hadad <[email protected]>
 // SPDX-License-Identifier: Apache-2.0
 
-// Prism.
+// Prism for code highlighting
 Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/';
 
-// UI elements.
-const chatArea = document.getElementById('chatArea');
-const chatBox = document.getElementById('chatBox');
-const initialContent = document.getElementById('initialContent');
-const form = document.getElementById('footerForm');
-const input = document.getElementById('userInput');
-const btn = document.getElementById('sendBtn');
-const stopBtn = document.getElementById('stopBtn');
-const fileBtn = document.getElementById('fileBtn');
-const audioBtn = document.getElementById('audioBtn');
-const fileInput = document.getElementById('fileInput');
-const audioInput = document.getElementById('audioInput');
-const filePreview = document.getElementById('filePreview');
-const audioPreview = document.getElementById('audioPreview');
-const promptItems = document.querySelectorAll('.prompt-item');
-const mainHeader = document.getElementById('mainHeader');
-const chatHeader = document.getElementById('chatHeader');
-const homeBtn = document.getElementById('homeBtn');
-const clearBtn = document.getElementById('clearBtn');
-const loginBtn = document.getElementById('loginBtn');
-const messageLimitWarning = document.getElementById('messageLimitWarning');
-
-// Track state.
+// UI elements
+const uiElements = {
+  chatArea: document.getElementById('chatArea'),
+  chatBox: document.getElementById('chatBox'),
+  initialContent: document.getElementById('initialContent'),
+  form: document.getElementById('footerForm'),
+  input: document.getElementById('userInput'),
+  sendBtn: document.getElementById('sendBtn'),
+  stopBtn: document.getElementById('stopBtn'),
+  fileBtn: document.getElementById('fileBtn'),
+  audioBtn: document.getElementById('audioBtn'),
+  fileInput: document.getElementById('fileInput'),
+  audioInput: document.getElementById('audioInput'),
+  filePreview: document.getElementById('filePreview'),
+  audioPreview: document.getElementById('audioPreview'),
+  promptItems: document.querySelectorAll('.prompt-item'),
+  chatHeader: document.getElementById('chatHeader'),
+  clearBtn: document.getElementById('clearBtn'),
+  messageLimitWarning: document.getElementById('messageLimitWarning'),
+  conversationTitle: document.getElementById('conversationTitle'),
+  sidebar: document.getElementById('sidebar'),
+  sidebarToggle: document.getElementById('sidebarToggle'),
+  conversationList: document.getElementById('conversationList'),
+  newConversationBtn: document.getElementById('newConversationBtn'),
+  swipeHint: document.getElementById('swipeHint'),
+  settingsBtn: document.getElementById('settingsBtn'),
+  settingsModal: document.getElementById('settingsModal'),
+  closeSettingsBtn: document.getElementById('closeSettingsBtn'),
+  settingsForm: document.getElementById('settingsForm'),
+  historyToggle: document.getElementById('historyToggle')
+};
+
+// Track state
 let streamMsg = null;
 let conversationHistory = JSON.parse(sessionStorage.getItem('conversationHistory') || '[]');
 let currentAssistantText = '';
@@ -36,43 +45,60 @@ let abortController = null;
 let mediaRecorder = null;
 let audioChunks = [];
 let isRecording = false;
+let currentConversationId = window.conversationId || null;
+let currentConversationTitle = window.conversationTitle || null;
+let isSidebarOpen = false;
 
 // Auto-resize textarea
 function autoResizeTextarea() {
-  if (input) {
-    input.style.height = 'auto';
-    input.style.height = `${Math.min(input.scrollHeight, 200)}px`; // Max height is 200px as per CSS
+  if (uiElements.input) {
+    uiElements.input.style.height = 'auto';
+    uiElements.input.style.height = `${Math.min(uiElements.input.scrollHeight, 200)}px`;
   }
 }
 
-// تحميل المحادثة عند تحميل الصفحة
-document.addEventListener('DOMContentLoaded', () => {
+// Initialize page
+document.addEventListener('DOMContentLoaded', async () => {
   AOS.init({
     duration: 800,
     easing: 'ease-out-cubic',
     once: true,
     offset: 50,
   });
-  if (conversationHistory.length > 0) {
+  if (currentConversationId && checkAuth()) {
+    await loadConversation(currentConversationId);
+  } else if (conversationHistory.length > 0) {
     enterChatView();
-    conversationHistory.forEach(msg => {
-      addMsg(msg.role, msg.content);
-    });
+    conversationHistory.forEach(msg => addMsg(msg.role, msg.content));
+  }
+  if (checkAuth()) {
+    await loadConversations();
   }
-  // Initialize textarea height
   autoResizeTextarea();
-  // Enable send button based on input
-  if (btn && input && fileInput && audioInput) {
-    btn.disabled = input.value.trim() === '' && fileInput.files.length === 0 && audioInput.files.length === 0;
+  updateSendButtonState();
+  if (uiElements.swipeHint) {
+    setTimeout(() => {
+      uiElements.swipeHint.style.display = 'none';
+    }, 3000);
   }
+  setupTouchGestures();
 });
 
-// تحقق من الـ token
+// Check authentication token
 function checkAuth() {
   return localStorage.getItem('token');
 }
 
-// Render markdown content.
+// Update send button state
+function updateSendButtonState() {
+  if (uiElements.sendBtn && uiElements.input && uiElements.fileInput && uiElements.audioInput) {
+    uiElements.sendBtn.disabled = uiElements.input.value.trim() === '' &&
+      uiElements.fileInput.files.length === 0 &&
+      uiElements.audioInput.files.length === 0;
+  }
+}
+
+// Render markdown content
 function renderMarkdown(el) {
   const raw = el.dataset.text || '';
   const html = marked.parse(raw, {
@@ -82,201 +108,149 @@ function renderMarkdown(el) {
     smartypants: false,
     headerIds: false,
   });
-  el.innerHTML = '<div class="md-content">' + html + '</div>';
+  el.innerHTML = `<div class="md-content">${html}</div>`;
   const wrapper = el.querySelector('.md-content');
-
-  // Wrap tables.
-  const tables = wrapper.querySelectorAll('table');
-  tables.forEach(t => {
-    if (t.parentNode && t.parentNode.classList && t.parentNode.classList.contains('table-wrapper')) return;
-    const div = document.createElement('div');
-    div.className = 'table-wrapper';
-    t.parentNode.insertBefore(div, t);
-    div.appendChild(t);
-  });
-
-  // Style horizontal rules.
-  const hrs = wrapper.querySelectorAll('hr');
-  hrs.forEach(h => {
-    if (!h.classList.contains('styled-hr')) {
-      h.classList.add('styled-hr');
+  wrapper.querySelectorAll('table').forEach(t => {
+    if (!t.parentNode.classList?.contains('table-wrapper')) {
+      const div = document.createElement('div');
+      div.className = 'table-wrapper';
+      t.parentNode.insertBefore(div, t);
+      div.appendChild(t);
     }
   });
-
-  // Highlight code.
+  wrapper.querySelectorAll('hr').forEach(h => h.classList.add('styled-hr'));
   Prism.highlightAllUnder(wrapper);
 }
 
-// Chat view.
+// Toggle chat view
 function enterChatView() {
-  if (mainHeader) {
-    mainHeader.style.display = 'none';
-  }
-  if (chatHeader) {
-    chatHeader.style.display = 'flex';
-    chatHeader.setAttribute('aria-hidden', 'false');
-  }
-  if (chatBox) {
-    chatBox.style.display = 'flex';
-  }
-  if (initialContent) {
-    initialContent.style.display = 'none';
+  if (uiElements.chatHeader) {
+    uiElements.chatHeader.classList.remove('hidden');
+    uiElements.chatHeader.setAttribute('aria-hidden', 'false');
+    if (currentConversationTitle && uiElements.conversationTitle) {
+      uiElements.conversationTitle.textContent = currentConversationTitle;
+    }
   }
+  if (uiElements.chatBox) uiElements.chatBox.classList.remove('hidden');
+  if (uiElements.initialContent) uiElements.initialContent.classList.add('hidden');
 }
 
-// Home view.
+// Toggle home view
 function leaveChatView() {
-  if (mainHeader) {
-    mainHeader.style.display = 'flex';
-  }
-  if (chatHeader) {
-    chatHeader.style.display = 'none';
-    chatHeader.setAttribute('aria-hidden', 'true');
-  }
-  if (chatBox) {
-    chatBox.style.display = 'none';
-  }
-  if (initialContent) {
-    initialContent.style.display = 'flex';
+  if (uiElements.chatHeader) {
+    uiElements.chatHeader.classList.add('hidden');
+    uiElements.chatHeader.setAttribute('aria-hidden', 'true');
   }
+  if (uiElements.chatBox) uiElements.chatBox.classList.add('hidden');
+  if (uiElements.initialContent) uiElements.initialContent.classList.remove('hidden');
 }
 
-// Chat bubble.
+// Add chat bubble
 function addMsg(who, text) {
   const div = document.createElement('div');
-  div.className = 'bubble ' + (who === 'user' ? 'bubble-user' : 'bubble-assist');
+  div.className = `bubble ${who === 'user' ? 'bubble-user' : 'bubble-assist'}`;
   div.dataset.text = text;
   renderMarkdown(div);
-  if (chatBox) {
-    chatBox.appendChild(div);
-    chatBox.style.display = 'flex';
-    chatBox.scrollTop = chatBox.scrollHeight;
+  if (uiElements.chatBox) {
+    uiElements.chatBox.appendChild(div);
+    uiElements.chatBox.classList.remove('hidden');
+    uiElements.chatBox.scrollTop = uiElements.chatBox.scrollHeight;
   }
   return div;
 }
 
-// Clear all chat.
+// Clear all messages
 function clearAllMessages() {
   stopStream(true);
   conversationHistory = [];
   sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
   currentAssistantText = '';
   if (streamMsg) {
-    const loadingEl = streamMsg.querySelector('.loading');
-    if (loadingEl) loadingEl.remove();
+    streamMsg.querySelector('.loading')?.remove();
     streamMsg = null;
   }
-  if (chatBox) {
-    chatBox.innerHTML = '';
-  }
-  if (input) {
-    input.value = '';
-  }
-  if (btn) {
-    btn.disabled = true;
-  }
-  if (stopBtn) {
-    stopBtn.style.display = 'none';
-  }
-  if (btn) {
-    btn.style.display = 'inline-flex';
-  }
-  if (filePreview) {
-    filePreview.style.display = 'none';
-  }
-  if (audioPreview) {
-    audioPreview.style.display = 'none';
-  }
-  if (messageLimitWarning) {
-    messageLimitWarning.classList.add('hidden');
-  }
+  if (uiElements.chatBox) uiElements.chatBox.innerHTML = '';
+  if (uiElements.input) uiElements.input.value = '';
+  if (uiElements.sendBtn) uiElements.sendBtn.disabled = true;
+  if (uiElements.stopBtn) uiElements.stopBtn.style.display = 'none';
+  if (uiElements.sendBtn) uiElements.sendBtn.style.display = 'inline-flex';
+  if (uiElements.filePreview) uiElements.filePreview.style.display = 'none';
+  if (uiElements.audioPreview) uiElements.audioPreview.style.display = 'none';
+  if (uiElements.messageLimitWarning) uiElements.messageLimitWarning.classList.add('hidden');
+  currentConversationId = null;
+  currentConversationTitle = null;
+  if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = 'MGZon AI Assistant';
   enterChatView();
   autoResizeTextarea();
 }
 
-// File preview.
+// File preview
 function previewFile() {
-  if (fileInput && fileInput.files.length > 0) {
-    const file = fileInput.files[0];
+  if (uiElements.fileInput?.files.length > 0) {
+    const file = uiElements.fileInput.files[0];
     if (file.type.startsWith('image/')) {
       const reader = new FileReader();
       reader.onload = e => {
-        if (filePreview) {
-          filePreview.innerHTML = `<img src="${e.target.result}" class="upload-preview">`;
-          filePreview.style.display = 'block';
-        }
-        if (audioPreview) {
-          audioPreview.style.display = 'none';
-        }
-        if (btn) {
-          btn.disabled = false; // Enable send button when file is selected
+        if (uiElements.filePreview) {
+          uiElements.filePreview.innerHTML = `<img src="${e.target.result}" class="upload-preview">`;
+          uiElements.filePreview.style.display = 'block';
         }
+        if (uiElements.audioPreview) uiElements.audioPreview.style.display = 'none';
+        updateSendButtonState();
       };
       reader.readAsDataURL(file);
     }
   }
-  if (audioInput && audioInput.files.length > 0) {
-    const file = audioInput.files[0];
+  if (uiElements.audioInput?.files.length > 0) {
+    const file = uiElements.audioInput.files[0];
     if (file.type.startsWith('audio/')) {
       const reader = new FileReader();
       reader.onload = e => {
-        if (audioPreview) {
-          audioPreview.innerHTML = `<audio controls src="${e.target.result}"></audio>`;
-          audioPreview.style.display = 'block';
-        }
-        if (filePreview) {
-          filePreview.style.display = 'none';
-        }
-        if (btn) {
-          btn.disabled = false; // Enable send button when audio is selected
+        if (uiElements.audioPreview) {
+          uiElements.audioPreview.innerHTML = `<audio controls src="${e.target.result}"></audio>`;
+          uiElements.audioPreview.style.display = 'block';
         }
+        if (uiElements.filePreview) uiElements.filePreview.style.display = 'none';
+        updateSendButtonState();
       };
       reader.readAsDataURL(file);
     }
   }
 }
 
-// Voice recording.
+// Voice recording
 function startVoiceRecording() {
   if (isRequestActive || isRecording) return;
   isRecording = true;
-  if (btn) {
-    btn.classList.add('recording');
-  }
+  if (uiElements.sendBtn) uiElements.sendBtn.classList.add('recording');
   navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
     mediaRecorder = new MediaRecorder(stream);
     audioChunks = [];
     mediaRecorder.start();
-    mediaRecorder.addEventListener('dataavailable', event => {
-      audioChunks.push(event.data);
-    });
+    mediaRecorder.addEventListener('dataavailable', event => audioChunks.push(event.data));
   }).catch(err => {
     console.error('Error accessing microphone:', err);
     alert('Failed to access microphone. Please check permissions.');
     isRecording = false;
-    if (btn) {
-      btn.classList.remove('recording');
-    }
+    if (uiElements.sendBtn) uiElements.sendBtn.classList.remove('recording');
   });
 }
 
 function stopVoiceRecording() {
-  if (mediaRecorder && mediaRecorder.state === 'recording') {
+  if (mediaRecorder?.state === 'recording') {
     mediaRecorder.stop();
-    if (btn) {
-      btn.classList.remove('recording');
-    }
+    if (uiElements.sendBtn) uiElements.sendBtn.classList.remove('recording');
     isRecording = false;
     mediaRecorder.addEventListener('stop', async () => {
       const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
       const formData = new FormData();
       formData.append('file', audioBlob, 'voice-message.webm');
-      submitAudioMessage(formData);
+      await submitAudioMessage(formData);
     });
   }
 }
 
-// Send audio message.
+// Send audio message
 async function submitAudioMessage(formData) {
   enterChatView();
   addMsg('user', 'Voice message');
@@ -286,144 +260,370 @@ async function submitAudioMessage(formData) {
   const loadingEl = document.createElement('span');
   loadingEl.className = 'loading';
   streamMsg.appendChild(loadingEl);
-  if (stopBtn) {
-    stopBtn.style.display = 'inline-flex';
-  }
-  if (btn) {
-    btn.style.display = 'none';
-  }
-  if (input) {
-    input.value = '';
+  updateUIForRequest();
+
+  isRequestActive = true;
+  abortController = new AbortController();
+
+  try {
+    const response = await sendRequest('/api/audio-transcription', formData);
+    const data = await response.json();
+    if (!data.transcription) throw new Error('No transcription received from server');
+    const transcription = data.transcription || 'Error: No transcription generated.';
+    if (streamMsg) {
+      streamMsg.dataset.text = transcription;
+      renderMarkdown(streamMsg);
+      streamMsg.dataset.done = '1';
+    }
+    conversationHistory.push({ role: 'assistant', content: transcription });
+    sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+    if (checkAuth() && currentConversationId) {
+      await saveMessageToConversation(currentConversationId, 'assistant', transcription);
+    }
+    if (checkAuth() && data.conversation_id) {
+      currentConversationId = data.conversation_id;
+      currentConversationTitle = data.conversation_title || 'Untitled Conversation';
+      if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = currentConversationTitle;
+      history.pushState(null, '', `/chat/${currentConversationId}`);
+      await loadConversations();
+    }
+    finalizeRequest();
+  } catch (error) {
+    handleRequestError(error);
   }
-  if (btn) {
-    btn.disabled = true;
+}
+
+// Helper to send API requests
+async function sendRequest(endpoint, body, headers = {}) {
+  const token = checkAuth();
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+  return await fetch(endpoint, {
+    method: 'POST',
+    body,
+    headers,
+    signal: abortController.signal,
+  });
+}
+
+// Helper to update UI during request
+function updateUIForRequest() {
+  if (uiElements.stopBtn) uiElements.stopBtn.style.display = 'inline-flex';
+  if (uiElements.sendBtn) uiElements.sendBtn.style.display = 'none';
+  if (uiElements.input) uiElements.input.value = '';
+  if (uiElements.sendBtn) uiElements.sendBtn.disabled = true;
+  if (uiElements.filePreview) uiElements.filePreview.style.display = 'none';
+  if (uiElements.audioPreview) uiElements.audioPreview.style.display = 'none';
+  autoResizeTextarea();
+}
+
+// Helper to finalize request
+function finalizeRequest() {
+  streamMsg = null;
+  isRequestActive = false;
+  abortController = null;
+  if (uiElements.sendBtn) uiElements.sendBtn.style.display = 'inline-flex';
+  if (uiElements.stopBtn) uiElements.stopBtn.style.display = 'none';
+}
+
+// Helper to handle request errors
+function handleRequestError(error) {
+  if (streamMsg) {
+    streamMsg.querySelector('.loading')?.remove();
+    streamMsg.dataset.text = `Error: ${error.message || 'An error occurred during the request.'}`;
+    renderMarkdown(streamMsg);
+    streamMsg.dataset.done = '1';
+    streamMsg = null;
   }
-  if (filePreview) {
-    filePreview.style.display = 'none';
+  console.error('Request error:', error);
+  isRequestActive = false;
+  abortController = null;
+  if (uiElements.sendBtn) uiElements.sendBtn.style.display = 'inline-flex';
+  if (uiElements.stopBtn) uiElements.stopBtn.style.display = 'none';
+}
+
+// Load conversations for sidebar
+async function loadConversations() {
+  if (!checkAuth()) return;
+  try {
+    const response = await fetch('/api/conversations', {
+      headers: { 'Authorization': `Bearer ${checkAuth()}` }
+    });
+    if (!response.ok) throw new Error('Failed to load conversations');
+    const conversations = await response.json();
+    if (uiElements.conversationList) {
+      uiElements.conversationList.innerHTML = '';
+      conversations.forEach(conv => {
+        const li = document.createElement('li');
+        li.className = `flex items-center justify-between text-white hover:bg-gray-700 p-2 rounded cursor-pointer transition-colors ${conv.conversation_id === currentConversationId ? 'bg-gray-700' : ''}`;
+        li.dataset.conversationId = conv.conversation_id;
+        li.innerHTML = `
+          <div class="flex items-center flex-1" data-conversation-id="${conv.conversation_id}">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
+            </svg>
+            <span class="truncate flex-1">${conv.title || 'Untitled Conversation'}</span>
+          </div>
+          <button class="delete-conversation-btn text-red-400 hover:text-red-600 p-1" title="Delete Conversation" data-conversation-id="${conv.conversation_id}">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5-4h4M3 7h18"></path>
+            </svg>
+          </button>
+        `;
+        li.querySelector('[data-conversation-id]').addEventListener('click', () => loadConversation(conv.conversation_id));
+        li.querySelector('.delete-conversation-btn').addEventListener('click', () => deleteConversation(conv.conversation_id));
+        uiElements.conversationList.appendChild(li);
+      });
+    }
+  } catch (error) {
+    console.error('Error loading conversations:', error);
   }
-  if (audioPreview) {
-    audioPreview.style.display = 'none';
+}
+
+// Load conversation from API
+async function loadConversation(conversationId) {
+  try {
+    const response = await fetch(`/api/conversations/${conversationId}`, {
+      headers: { 'Authorization': `Bearer ${checkAuth()}` }
+    });
+    if (!response.ok) {
+      if (response.status === 401) window.location.href = '/login';
+      throw new Error('Failed to load conversation');
+    }
+    const data = await response.json();
+    currentConversationId = data.conversation_id;
+    currentConversationTitle = data.title || 'Untitled Conversation';
+    conversationHistory = data.messages.map(msg => ({ role: msg.role, content: msg.content }));
+    if (uiElements.chatBox) uiElements.chatBox.innerHTML = '';
+    conversationHistory.forEach(msg => addMsg(msg.role, msg.content));
+    enterChatView();
+    if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = currentConversationTitle;
+    history.pushState(null, '', `/chat/${currentConversationId}`);
+    toggleSidebar(false);
+  } catch (error) {
+    console.error('Error loading conversation:', error);
+    alert('Failed to load conversation. Please try again or log in.');
   }
+}
 
-  isRequestActive = true;
-  abortController = new AbortController();
+// Delete conversation
+async function deleteConversation(conversationId) {
+  if (!confirm('Are you sure you want to delete this conversation?')) return;
+  try {
+    const response = await fetch(`/api/conversations/${conversationId}`, {
+      method: 'DELETE',
+      headers: { 'Authorization': `Bearer ${checkAuth()}` }
+    });
+    if (!response.ok) {
+      if (response.status === 401) window.location.href = '/login';
+      throw new Error('Failed to delete conversation');
+    }
+    if (conversationId === currentConversationId) {
+      clearAllMessages();
+      currentConversationId = null;
+      currentConversationTitle = null;
+      history.pushState(null, '', '/chat');
+    }
+    await loadConversations();
+  } catch (error) {
+    console.error('Error deleting conversation:', error);
+    alert('Failed to delete conversation. Please try again.');
+  }
+}
 
+// Save message to conversation
+async function saveMessageToConversation(conversationId, role, content) {
   try {
-    const token = checkAuth();
-    const headers = token ? { Authorization: `Bearer ${token}` } : {};
-    const response = await fetch('/api/audio-transcription', {
+    const response = await fetch(`/api/conversations/${conversationId}`, {
       method: 'POST',
-      body: formData,
-      headers: headers,
-      signal: abortController.signal,
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${checkAuth()}`
+      },
+      body: JSON.stringify({ role, content })
     });
+    if (!response.ok) throw new Error('Failed to save message');
+  } catch (error) {
+    console.error('Error saving message:', error);
+  }
+}
 
+// Create new conversation
+async function createNewConversation() {
+  if (!checkAuth()) {
+    alert('Please log in to create a new conversation.');
+    window.location.href = '/login';
+    return;
+  }
+  try {
+    const response = await fetch('/api/conversations', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${checkAuth()}`
+      },
+      body: JSON.stringify({ title: 'New Conversation' })
+    });
     if (!response.ok) {
-      if (response.status === 403) {
-        if (messageLimitWarning) {
-          messageLimitWarning.classList.remove('hidden');
-        }
-        if (input) {
-          input.disabled = true;
-        }
-        if (streamMsg) {
-          const loadingEl = streamMsg.querySelector('.loading');
-          if (loadingEl) loadingEl.remove();
-          streamMsg = null;
-        }
-        isRequestActive = false;
-        abortController = null;
-        if (btn) {
-          btn.style.display = 'inline-flex';
-        }
-        if (stopBtn) {
-          stopBtn.style.display = 'none';
-        }
-        setTimeout(() => {
-          window.location.href = '/login';
-        }, 3000); // تأخير 3 ثواني قبل التحويل
-        return;
-      }
       if (response.status === 401) {
         localStorage.removeItem('token');
         window.location.href = '/login';
-        return;
       }
-      throw new Error('Request failed');
+      throw new Error('Failed to create conversation');
     }
-
     const data = await response.json();
-    const transcription = data.transcription || 'Error: No transcription generated.';
-    if (streamMsg) {
-      streamMsg.dataset.text = transcription;
-      renderMarkdown(streamMsg);
-      streamMsg.dataset.done = '1';
-    }
-    conversationHistory.push({ role: 'assistant', content: transcription });
+    currentConversationId = data.conversation_id;
+    currentConversationTitle = data.title;
+    conversationHistory = [];
     sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+    if (uiElements.chatBox) uiElements.chatBox.innerHTML = '';
+    if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = currentConversationTitle;
+    history.pushState(null, '', `/chat/${currentConversationId}`);
+    enterChatView();
+    await loadConversations();
+    toggleSidebar(false);
+  } catch (error) {
+    console.error('Error creating conversation:', error);
+    alert('Failed to create new conversation. Please try again.');
+  }
+}
 
-    streamMsg = null;
-    isRequestActive = false;
-    abortController = null;
-    if (btn) {
-      btn.style.display = 'inline-flex';
+// Update conversation title
+async function updateConversationTitle(conversationId, newTitle) {
+  try {
+    const response = await fetch(`/api/conversations/${conversationId}/title`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${checkAuth()}`
+      },
+      body: JSON.stringify({ title: newTitle })
+    });
+    if (!response.ok) throw new Error('Failed to update title');
+    const data = await response.json();
+    currentConversationTitle = data.title;
+    if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = currentConversationTitle;
+    await loadConversations();
+  } catch (error) {
+    console.error('Error updating title:', error);
+    alert('Failed to update conversation title.');
+  }
+}
+
+// Toggle sidebar
+function toggleSidebar(show) {
+  if (uiElements.sidebar) {
+    if (window.innerWidth >= 768) {
+      isSidebarOpen = true;
+      uiElements.sidebar.style.transform = 'translateX(0)';
+      if (uiElements.swipeHint) uiElements.swipeHint.style.display = 'none';
+    } else {
+      isSidebarOpen = show !== undefined ? show : !isSidebarOpen;
+      uiElements.sidebar.style.transform = isSidebarOpen ? 'translateX(0)' : 'translateX(-100%)';
+      if (uiElements.swipeHint && !isSidebarOpen) {
+        uiElements.swipeHint.style.display = 'block';
+        setTimeout(() => {
+          uiElements.swipeHint.style.display = 'none';
+        }, 3000);
+      } else if (uiElements.swipeHint) {
+        uiElements.swipeHint.style.display = 'none';
+      }
     }
-    if (stopBtn) {
-      stopBtn.style.display = 'none';
+  }
+}
+
+// Setup touch gestures with Hammer.js
+function setupTouchGestures() {
+  if (!uiElements.sidebar) return;
+  const hammer = new Hammer(uiElements.sidebar);
+  const mainContent = document.querySelector('.flex-1');
+  const hammerMain = new Hammer(mainContent);
+
+  hammer.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL });
+  hammer.on('pan', e => {
+    if (!isSidebarOpen) return;
+    let translateX = Math.max(-uiElements.sidebar.offsetWidth, Math.min(0, e.deltaX));
+    uiElements.sidebar.style.transform = `translateX(${translateX}px)`;
+  });
+  hammer.on('panend', e => {
+    if (!isSidebarOpen) return;
+    if (e.deltaX < -50) {
+      toggleSidebar(false);
+    } else {
+      toggleSidebar(true);
     }
-  } catch (error) {
-    if (streamMsg) {
-      const loadingEl = streamMsg.querySelector('.loading');
-      if (loadingEl) loadingEl.remove();
-      streamMsg.dataset.text = error.message || 'An error occurred during the request.';
-      renderMarkdown(streamMsg);
-      streamMsg.dataset.done = '1';
-      streamMsg = null;
-      isRequestActive = false;
-      abortController = null;
+  });
+
+  hammerMain.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL });
+  hammerMain.on('panstart', e => {
+    if (isSidebarOpen) return;
+    if (e.center.x < 50 || e.center.x > window.innerWidth - 50) {
+      uiElements.sidebar.style.transition = 'none';
     }
-    if (btn) {
-      btn.style.display = 'inline-flex';
+  });
+  hammerMain.on('pan', e => {
+    if (isSidebarOpen) return;
+    if (e.center.x < 50 || e.center.x > window.innerWidth - 50) {
+      let translateX = e.center.x < 50
+        ? Math.min(uiElements.sidebar.offsetWidth, Math.max(0, e.deltaX))
+        : Math.max(-uiElements.sidebar.offsetWidth, Math.min(0, e.deltaX));
+      uiElements.sidebar.style.transform = `translateX(${translateX - uiElements.sidebar.offsetWidth}px)`;
     }
-    if (stopBtn) {
-      stopBtn.style.display = 'none';
+  });
+  hammerMain.on('panend', e => {
+    uiElements.sidebar.style.transition = 'transform 0.3s ease-in-out';
+    if (e.center.x < 50 && e.deltaX > 50) {
+      toggleSidebar(true);
+    } else if (e.center.x > window.innerWidth - 50 && e.deltaX < -50) {
+      toggleSidebar(true);
+    } else {
+      toggleSidebar(false);
     }
-  }
+  });
 }
-// Send user message.
+
+// Send user message
 async function submitMessage() {
   if (isRequestActive || isRecording) return;
-  let message = input.value.trim();
-  let formData = new FormData();
+  let message = uiElements.input?.value.trim() || '';
+  let payload = null;
+  let formData = null;
   let endpoint = '/api/chat';
+  let headers = {};
   let inputType = 'text';
   let outputFormat = 'text';
+  let title = null;
 
-  if (fileInput && fileInput.files.length > 0) {
-    const file = fileInput.files[0];
+  if (uiElements.fileInput?.files.length > 0) {
+    const file = uiElements.fileInput.files[0];
     if (file.type.startsWith('image/')) {
       endpoint = '/api/image-analysis';
       inputType = 'image';
       message = 'Analyze this image';
+      formData = new FormData();
       formData.append('file', file);
       formData.append('output_format', 'text');
     }
-  } else if (audioInput && audioInput.files.length > 0) {
-    const file = audioInput.files[0];
+  } else if (uiElements.audioInput?.files.length > 0) {
+    const file = uiElements.audioInput.files[0];
     if (file.type.startsWith('audio/')) {
       endpoint = '/api/audio-transcription';
       inputType = 'audio';
       message = 'Transcribe this audio';
+      formData = new FormData();
       formData.append('file', file);
     }
   } else if (message) {
-    formData.append('message', message);
-    formData.append('system_prompt', 'You are an expert assistant providing detailed, comprehensive, and well-structured responses.');
-    formData.append('history', JSON.stringify(conversationHistory));
-    formData.append('temperature', '0.7');
-    formData.append('max_new_tokens', '128000');
-    formData.append('enable_browsing', 'true');
-    formData.append('output_format', 'text');
+    payload = {
+      message,
+      system_prompt: 'You are an expert assistant providing detailed, comprehensive, and well-structured responses.',
+      history: conversationHistory,
+      temperature: 0.7,
+      max_new_tokens: 128000,
+      enable_browsing: true,
+      output_format: 'text',
+      title: title
+    };
+    headers['Content-Type'] = 'application/json';
   } else {
     return;
   }
@@ -436,63 +636,24 @@ async function submitMessage() {
   const loadingEl = document.createElement('span');
   loadingEl.className = 'loading';
   streamMsg.appendChild(loadingEl);
-  if (stopBtn) {
-    stopBtn.style.display = 'inline-flex';
-  }
-  if (btn) {
-    btn.style.display = 'none';
-  }
-  if (input) {
-    input.value = '';
-  }
-  if (btn) {
-    btn.disabled = true;
-  }
-  if (filePreview) {
-    filePreview.style.display = 'none';
-  }
-  if (audioPreview) {
-    audioPreview.style.display = 'none';
-  }
-  autoResizeTextarea();
+  updateUIForRequest();
 
   isRequestActive = true;
   abortController = new AbortController();
 
   try {
-    const token = checkAuth();
-    const headers = token ? { Authorization: `Bearer ${token}` } : {};
-    const response = await fetch(endpoint, {
-      method: 'POST',
-      body: formData,
-      headers: headers,
-      signal: abortController.signal,
-    });
-
+    const response = await sendRequest(endpoint, payload ? JSON.stringify(payload) : formData, headers);
     if (!response.ok) {
       if (response.status === 403) {
-        if (messageLimitWarning) {
-          messageLimitWarning.classList.remove('hidden');
-        }
-        if (input) {
-          input.disabled = true;
-        }
-        if (streamMsg) {
-          const loadingEl = streamMsg.querySelector('.loading');
-          if (loadingEl) loadingEl.remove();
-          streamMsg = null;
-        }
+        if (uiElements.messageLimitWarning) uiElements.messageLimitWarning.classList.remove('hidden');
+        if (uiElements.input) uiElements.input.disabled = true;
+        if (streamMsg) streamMsg.querySelector('.loading')?.remove();
+        streamMsg = null;
         isRequestActive = false;
         abortController = null;
-        if (btn) {
-          btn.style.display = 'inline-flex';
-        }
-        if (stopBtn) {
-          stopBtn.style.display = 'none';
-        }
-        setTimeout(() => {
-          window.location.href = '/login';
-        }, 3000); // تأخير 3 ثواني قبل التحويل
+        if (uiElements.sendBtn) uiElements.sendBtn.style.display = 'inline-flex';
+        if (uiElements.stopBtn) uiElements.stopBtn.style.display = 'none';
+        setTimeout(() => window.location.href = '/login', 3000);
         return;
       }
       if (response.status === 401) {
@@ -500,11 +661,12 @@ async function submitMessage() {
         window.location.href = '/login';
         return;
       }
-      throw new Error('Request failed');
+      throw new Error(`Request failed with status ${response.status}`);
     }
 
     if (endpoint === '/api/audio-transcription') {
       const data = await response.json();
+      if (!data.transcription) throw new Error('No transcription received from server');
       const transcription = data.transcription || 'Error: No transcription generated.';
       if (streamMsg) {
         streamMsg.dataset.text = transcription;
@@ -513,6 +675,16 @@ async function submitMessage() {
       }
       conversationHistory.push({ role: 'assistant', content: transcription });
       sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+      if (checkAuth() && currentConversationId) {
+        await saveMessageToConversation(currentConversationId, 'assistant', transcription);
+      }
+      if (checkAuth() && data.conversation_id) {
+        currentConversationId = data.conversation_id;
+        currentConversationTitle = data.conversation_title || 'Untitled Conversation';
+        if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = currentConversationTitle;
+        history.pushState(null, '', `/chat/${currentConversationId}`);
+        await loadConversations();
+      }
     } else if (endpoint === '/api/image-analysis') {
       const data = await response.json();
       const analysis = data.image_analysis || 'Error: No analysis generated.';
@@ -523,218 +695,293 @@ async function submitMessage() {
       }
       conversationHistory.push({ role: 'assistant', content: analysis });
       sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+      if (checkAuth() && currentConversationId) {
+        await saveMessageToConversation(currentConversationId, 'assistant', analysis);
+      }
+      if (checkAuth() && data.conversation_id) {
+        currentConversationId = data.conversation_id;
+        currentConversationTitle = data.conversation_title || 'Untitled Conversation';
+        if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = currentConversationTitle;
+        history.pushState(null, '', `/chat/${currentConversationId}`);
+        await loadConversations();
+      }
     } else {
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
+      const contentType = response.headers.get('Content-Type');
+      if (contentType?.includes('application/json')) {
+        const data = await response.json();
+        const responseText = data.response || 'Error: No response generated.';
         if (streamMsg) {
-          streamMsg.dataset.text = buffer;
-          currentAssistantText = buffer;
-          const loadingEl = streamMsg.querySelector('.loading');
-          if (loadingEl) loadingEl.remove();
+          streamMsg.dataset.text = responseText;
           renderMarkdown(streamMsg);
-          if (chatBox) {
-            chatBox.scrollTop = chatBox.scrollHeight;
+          streamMsg.dataset.done = '1';
+        }
+        conversationHistory.push({ role: 'assistant', content: responseText });
+        sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+        if (checkAuth() && currentConversationId) {
+          await saveMessageToConversation(currentConversationId, 'assistant', responseText);
+        }
+        if (checkAuth() && data.conversation_id) {
+          currentConversationId = data.conversation_id;
+          currentConversationTitle = data.conversation_title || 'Untitled Conversation';
+          if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = currentConversationTitle;
+          history.pushState(null, '', `/chat/${currentConversationId}`);
+          await loadConversations();
+        }
+      } else {
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          if (streamMsg) {
+            streamMsg.dataset.text = buffer;
+            currentAssistantText = buffer;
+            streamMsg.querySelector('.loading')?.remove();
+            renderMarkdown(streamMsg);
+            if (uiElements.chatBox) uiElements.chatBox.scrollTop = uiElements.chatBox.scrollHeight;
           }
         }
+        if (streamMsg) streamMsg.dataset.done = '1';
+        conversationHistory.push({ role: 'assistant', content: buffer });
+        sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+        if (checkAuth() && currentConversationId) {
+          await saveMessageToConversation(currentConversationId, 'assistant', buffer);
+        }
       }
-      if (streamMsg) {
-        streamMsg.dataset.done = '1';
-      }
-      conversationHistory.push({ role: 'assistant', content: buffer });
-      sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
-    }
-
-    streamMsg = null;
-    isRequestActive = false;
-    abortController = null;
-    if (btn) {
-      btn.style.display = 'inline-flex';
-    }
-    if (stopBtn) {
-      stopBtn.style.display = 'none';
     }
+    finalizeRequest();
   } catch (error) {
-    if (streamMsg) {
-      const loadingEl = streamMsg.querySelector('.loading');
-      if (loadingEl) loadingEl.remove();
-      streamMsg.dataset.text = error.message || 'An error occurred during the request.';
-      renderMarkdown(streamMsg);
-      streamMsg.dataset.done = '1';
-      streamMsg = null;
-      isRequestActive = false;
-      abortController = null;
-    }
-    if (btn) {
-      btn.style.display = 'inline-flex';
-    }
-    if (stopBtn) {
-      stopBtn.style.display = 'none';
-    }
+    handleRequestError(error);
   }
 }
-// Stop streaming and cancel the ongoing request.
+
+// Stop streaming
 function stopStream(forceCancel = false) {
   if (!isRequestActive && !isRecording) return;
-  if (isRecording) {
-    stopVoiceRecording();
-  }
+  if (isRecording) stopVoiceRecording();
   isRequestActive = false;
   if (abortController) {
     abortController.abort();
     abortController = null;
   }
   if (streamMsg && !forceCancel) {
-    const loadingEl = streamMsg.querySelector('.loading');
-    if (loadingEl) loadingEl.remove();
+    streamMsg.querySelector('.loading')?.remove();
     streamMsg.dataset.text += '';
     renderMarkdown(streamMsg);
     streamMsg.dataset.done = '1';
     streamMsg = null;
   }
-  if (stopBtn) {
-    stopBtn.style.display = 'none';
-  }
-  if (btn) {
-    btn.style.display = 'inline-flex';
-  }
-  if (stopBtn) {
-    stopBtn.style.pointerEvents = 'auto';
-  }
+  if (uiElements.stopBtn) uiElements.stopBtn.style.display = 'none';
+  if (uiElements.sendBtn) uiElements.sendBtn.style.display = 'inline-flex';
+  if (uiElements.stopBtn) uiElements.stopBtn.style.pointerEvents = 'auto';
 }
 
-// Prompts.
-promptItems.forEach(p => {
-  p.addEventListener('click', e => {
-    e.preventDefault();
-    if (input) {
-      input.value = p.dataset.prompt;
-      autoResizeTextarea();
-    }
-    if (btn) {
-      btn.disabled = false;
-    }
-    submitMessage();
+// Settings Modal
+if (uiElements.settingsBtn) {
+  uiElements.settingsBtn.addEventListener('click', () => {
+    if (!checkAuth()) {
+      alert('Please log in to access settings.');
+      window.location.href = '/login';
+      return;
+    }
+    uiElements.settingsModal.classList.remove('hidden');
+    fetch('/api/settings', {  // تعديل: استخدام /api/settings بدل /users/me
+      headers: { 'Authorization': `Bearer ${checkAuth()}` }
+    })
+      .then(res => {
+        if (!res.ok) {
+          if (res.status === 401) {
+            localStorage.removeItem('token');
+            window.location.href = '/login';
+          }
+          throw new Error('Failed to fetch settings');
+        }
+        return res.json();
+      })
+      .then(data => {
+        // تعبئة حقول الـ form
+        document.getElementById('display_name').value = data.user_settings.display_name || '';
+        document.getElementById('preferred_model').value = data.user_settings.preferred_model || 'standard';
+        document.getElementById('job_title').value = data.user_settings.job_title || '';
+        document.getElementById('education').value = data.user_settings.education || '';
+        document.getElementById('interests').value = data.user_settings.interests || '';
+        document.getElementById('additional_info').value = data.user_settings.additional_info || '';
+        document.getElementById('conversation_style').value = data.user_settings.conversation_style || 'default';
+
+        // تعبئة خيارات preferred_model ديناميكيًا
+        const modelSelect = document.getElementById('preferred_model');
+        modelSelect.innerHTML = ''; // تفريغ الخيارات القديمة
+        data.available_models.forEach(model => {
+          const option = document.createElement('option');
+          option.value = model.alias;
+          option.textContent = `${model.alias} - ${model.description}`;
+          modelSelect.appendChild(option);
+        });
+
+        // تعبئة خيارات conversation_style ديناميكيًا
+        const styleSelect = document.getElementById('conversation_style');
+        styleSelect.innerHTML = ''; // تفريغ الخيارات القديمة
+        data.conversation_styles.forEach(style => {
+          const option = document.createElement('option');
+          option.value = style;
+          option.textContent = style.charAt(0).toUpperCase() + style.slice(1); // تحويل الحرف الأول لكابيتال
+          styleSelect.appendChild(option);
+        });
+      })
+      .catch(err => {
+        console.error('Error fetching settings:', err);
+        alert('Failed to load settings. Please try again.');
+      });
   });
-});
+}
 
-// File and audio inputs.
-if (fileBtn) {
-  fileBtn.addEventListener('click', () => {
-    if (fileInput) {
-      fileInput.click();
-    }
+if (uiElements.closeSettingsBtn) {
+  uiElements.closeSettingsBtn.addEventListener('click', () => {
+    uiElements.settingsModal.classList.add('hidden');
   });
 }
-if (audioBtn) {
-  audioBtn.addEventListener('click', () => {
-    if (audioInput) {
-      audioInput.click();
-    }
+
+if (uiElements.settingsForm) {
+  uiElements.settingsForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    if (!checkAuth()) {
+      alert('Please log in to save settings.');
+      window.location.href = '/login';
+      return;
+    }
+    const formData = new FormData(uiElements.settingsForm);
+    const data = Object.fromEntries(formData);
+    fetch('/users/me', {
+      method: 'PUT',
+      headers: { 
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${checkAuth()}`
+      },
+      body: JSON.stringify(data)
+    })
+      .then(res => {
+        if (!res.ok) {
+          if (res.status === 401) {
+            localStorage.removeItem('token');
+            window.location.href = '/login';
+          }
+          throw new Error('Failed to update settings');
+        }
+        return res.json();
+      })
+      .then(() => {
+        alert('Settings updated successfully!');
+        uiElements.settingsModal.classList.add('hidden');
+        toggleSidebar(false);
+      })
+      .catch(err => {
+        console.error('Error updating settings:', err);
+        alert('Error updating settings: ' + err.message);
+      });
   });
 }
-if (fileInput) {
-  fileInput.addEventListener('change', previewFile);
-}
-if (audioInput) {
-  audioInput.addEventListener('change', previewFile);
-}
 
-// Send button events for send and voice recording.
-if (btn) {
-  btn.addEventListener('mousedown', e => {
-    if (btn.disabled || isRequestActive || isRecording) return;
-    startVoiceRecording();
-  });
-  btn.addEventListener('mouseup', e => {
-    if (isRecording) {
-      stopVoiceRecording();
+// History Toggle
+if (uiElements.historyToggle) {
+  uiElements.historyToggle.addEventListener('click', () => {
+    if (uiElements.conversationList) {
+      uiElements.conversationList.classList.toggle('hidden');
+      uiElements.historyToggle.innerHTML = uiElements.conversationList.classList.contains('hidden')
+        ? `<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+           </svg>Show History`
+        : `<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+           </svg>Hide History`;
     }
   });
-  btn.addEventListener('mouseleave', e => {
-    if (isRecording) {
-      stopVoiceRecording();
+}
+
+// Event listeners
+uiElements.promptItems.forEach(p => {
+  p.addEventListener('click', e => {
+    e.preventDefault();
+    if (uiElements.input) {
+      uiElements.input.value = p.dataset.prompt;
+      autoResizeTextarea();
     }
+    if (uiElements.sendBtn) uiElements.sendBtn.disabled = false;
+    submitMessage();
+  });
+});
+
+if (uiElements.fileBtn) uiElements.fileBtn.addEventListener('click', () => uiElements.fileInput?.click());
+if (uiElements.audioBtn) uiElements.audioBtn.addEventListener('click', () => uiElements.audioInput?.click());
+if (uiElements.fileInput) uiElements.fileInput.addEventListener('change', previewFile);
+if (uiElements.audioInput) uiElements.audioInput.addEventListener('change', previewFile);
+
+if (uiElements.sendBtn) {
+  uiElements.sendBtn.addEventListener('mousedown', e => {
+    if (uiElements.sendBtn.disabled || isRequestActive || isRecording) return;
+    startVoiceRecording();
   });
-  btn.addEventListener('touchstart', e => {
+  uiElements.sendBtn.addEventListener('mouseup', () => isRecording && stopVoiceRecording());
+  uiElements.sendBtn.addEventListener('mouseleave', () => isRecording && stopVoiceRecording());
+  uiElements.sendBtn.addEventListener('touchstart', e => {
     e.preventDefault();
-    if (btn.disabled || isRequestActive || isRecording) return;
+    if (uiElements.sendBtn.disabled || isRequestActive || isRecording) return;
     startVoiceRecording();
   });
-  btn.addEventListener('touchend', e => {
+  uiElements.sendBtn.addEventListener('touchend', e => {
     e.preventDefault();
-    if (isRecording) {
-      stopVoiceRecording();
-    }
+    if (isRecording) stopVoiceRecording();
   });
-  btn.addEventListener('touchcancel', e => {
+  uiElements.sendBtn.addEventListener('touchcancel', e => {
     e.preventDefault();
-    if (isRecording) {
-      stopVoiceRecording();
-    }
+    if (isRecording) stopVoiceRecording();
   });
 }
 
-// Submit.
-if (form) {
-  form.addEventListener('submit', e => {
+if (uiElements.form) {
+  uiElements.form.addEventListener('submit', e => {
     e.preventDefault();
-    if (!isRecording) {
-      submitMessage();
-    }
+    if (!isRecording) submitMessage();
   });
 }
 
-// Handle Enter key to submit without adding new line.
-if (input) {
-  input.addEventListener('keydown', e => {
+if (uiElements.input) {
+  uiElements.input.addEventListener('keydown', e => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
-      if (!isRecording && !btn.disabled) {
-        submitMessage();
-      }
+      if (!isRecording && !uiElements.sendBtn.disabled) submitMessage();
     }
   });
-
-  // Auto-resize textarea on input.
-  input.addEventListener('input', () => {
+  uiElements.input.addEventListener('input', () => {
     autoResizeTextarea();
-    if (btn && input && fileInput && audioInput) {
-      btn.disabled = input.value.trim() === '' && fileInput.files.length === 0 && audioInput.files.length === 0;
-    }
+    updateSendButtonState();
   });
 }
 
-// Stop.
-if (stopBtn) {
-  stopBtn.addEventListener('click', () => {
-    stopBtn.style.pointerEvents = 'none';
+if (uiElements.stopBtn) {
+  uiElements.stopBtn.addEventListener('click', () => {
+    uiElements.stopBtn.style.pointerEvents = 'none';
     stopStream();
   });
 }
 
-// Home.
-if (homeBtn) {
-  homeBtn.addEventListener('click', () => {
-    window.location.href = '/';
+if (uiElements.clearBtn) uiElements.clearBtn.addEventListener('click', clearAllMessages);
+
+if (uiElements.conversationTitle) {
+  uiElements.conversationTitle.addEventListener('click', () => {
+    if (!checkAuth()) return alert('Please log in to edit the conversation title.');
+    const newTitle = prompt('Enter new conversation title:', currentConversationTitle || '');
+    if (newTitle && currentConversationId) {
+      updateConversationTitle(currentConversationId, newTitle);
+    }
   });
 }
 
-// Clear messages.
-if (clearBtn) {
-  clearBtn.addEventListener('click', () => {
-    clearAllMessages();
-  });
+if (uiElements.sidebarToggle) {
+  uiElements.sidebarToggle.addEventListener('click', () => toggleSidebar());
 }
 
-// Login button.
-if (loginBtn) {
-  loginBtn.addEventListener('click', () => {
-    window.location.href = '/login';
-  });
+if (uiElements.newConversationBtn) {
+  uiElements.newConversationBtn.addEventListener('click', createNewConversation);
 }

static/js/sw.js

@@ -0,0 +1,44 @@
+// static/js/sw.js
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open('ChatMG-v1').then((cache) => {
+      return cache.addAll([
+        '/',
+        '/chat',
+        '/static/css/style.css',
+        '/static/css/chat/style.css',
+        '/static/css/sidebar.css',
+        '/static/js/chat.js',
+        '/static/images/mg.svg',
+        '/static/images/icons/mg-48.png',
+        '/static/images/icons/mg-72.png',
+        '/static/images/icons/mg-96.png',
+        '/static/images/icons/mg-128.png',
+        '/static/images/icons/mg-192.png',
+        '/static/images/icons/mg-256.png',
+        '/static/images/icons/mg-384.png',
+        '/static/images/icons/mg-512.png'
+      ]);
+    })
+  );
+});
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.filter((name) => name !== 'ChatMG-v1').map((name) => caches.delete(name))
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    })
+  );
+});

static/manifest.json

@@ -0,0 +1,57 @@
+{
+  "name": "MGZon Chatbot",
+  "short_name": "ChatMG",
+  "description": "AI-powered chatbot for coding, analysis, and e-commerce queries.",
+  "start_url": "/chat",
+  "display": "standalone",
+  "background_color": "#1a202c",
+  "theme_color": "#2d3748",
+  "scope": "/",
+  "icons": [
+    {
+      "src": "/static/images/mg.svg",
+      "sizes": "192x192",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "/static/images/icons/mg-48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/images/icons/mg-72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/images/icons/mg-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/images/icons/mg-128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/images/icons/mg-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/images/icons/mg-256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/images/icons/mg-384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/images/icons/mg-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

templates/500.html

@@ -7,6 +7,9 @@
     <title>500 - Server Error</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+    <link rel="icon" href="/static/images/icons/mg-192.png" sizes="192x192">
+<link rel="manifest" href="/static/manifest.json">
+
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col">
     <div class="container max-w-6xl mx-auto text-center py-12 flex-1">
@@ -28,5 +31,15 @@
         </div>
     </footer>
     <script src="/static/js/scripts.js"></script>
+      <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/static/js/sw.js')
+        .then(function(reg) {
+          console.log('✅ Service Worker Registered', reg);
+        }).catch(function(err) {
+          console.error('❌ Service Worker registration failed', err);
+        });
+    }
+  </script>
 </body>
 </html>

templates/blog_post.html

@@ -6,6 +6,8 @@
   <meta name="description" content="{{ post.title }} - Read about AI, coding, and e-commerce trends from MGZon AI by Mark Al-Asfar.">
   <meta name="keywords" content="MGZon Chatbot, MGZon AI, blog, AI trends, code generation, e-commerce, Mark Al-Asfar, AI chatbot, code generation bot, e-commerce chatbot, Python AI chatbot, AI for coding, e-commerce automation, 2025 AI trends, chatgpt, grok, deepseek, text generation">
   <meta name="author" content="Mark Al-Asfar">
+  <link rel="manifest" href="/static/manifest.json">
+
   <meta name="robots" content="index, follow">
   <title>{{ post.title }} - MGZon AI</title>
   <link rel="icon" type="image/x-icon" href="/static/favicon.ico">

templates/chat.html

@@ -13,6 +13,18 @@
   <link rel="apple-touch-icon" href="/static/images/mg.svg" />
   <!-- Open Graph -->
   <meta property="og:title" content="MGZon Chatbot – AI Assistant" />
+<!-- manifest for Android/Chrome -->
+<link rel="manifest" href="/static/manifest.json">
+
+<!-- iOS Web App Support -->
+<link rel="apple-touch-icon" sizes="180x180" href="/static/images/icons/mg-180.png">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="MGZon">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+<!-- General Theme -->
+<meta name="theme-color" content="#2d3748">
+
   <meta property="og:description" content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
   <meta property="og:image" content="/static/images/mg.svg" />
   <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/chat" />
@@ -51,13 +63,14 @@
   <!-- Smooth Scroll -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css" />
+  <!-- Hammer.js for touch gestures -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/hammer.min.js"></script>
   <!-- Project-Specific Styles -->
   <link rel="stylesheet" href="/static/css/animation/style.css" />
   <link rel="stylesheet" href="/static/css/button.css" />
   <link rel="stylesheet" href="/static/css/chat/bubble.css" />
   <link rel="stylesheet" href="/static/css/chat/markdown.css" />
   <link rel="stylesheet" href="/static/css/chat/style.css" />
-  <link rel="stylesheet" href="/static/css/footer.css" />
   <link rel="stylesheet" href="/static/css/header.css" />
   <link rel="stylesheet" href="/static/css/icon.css" />
   <link rel="stylesheet" href="/static/css/input.css" />
@@ -74,182 +87,332 @@
   <link rel="stylesheet" href="/static/css/screen/common.css" />
   <link rel="stylesheet" href="/static/css/style.css" />
   <link rel="stylesheet" href="/static/css/webkit.css" />
+  <link rel="stylesheet" href="/static/css/sidebar.css" />
 </head>
 <body class="min-h-screen flex flex-col bg-gradient-to-br from-gray-900 via-teal-900 to-emerald-900">
-  <!-- Main Header -->
-<header id="mainHeader" class="main-header p-4 flex justify-between items-center">
-    <div class="logo flex items-center">
-      <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-16 h-16 mr-2 animate-pulse" />
-      <h1 class="text-2xl font-bold text-white">MGZon Chatbot</h1>
-    </div>
-    <div class="flex items-center gap-4">
-      <a href="/" class="icon-btn" aria-label="Home" title="Back to Home">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
-          <path d="M3 11.5L12 4l9 7.5" />
-          <path d="M5 21V11.5h14V21" />
-        </svg>
-      </a>
-      {% if not user %}
-        <a href="/login" class="bg-gradient-to-r from-blue-500 to-cyan-600 text-white px-4 py-2 rounded font-semibold hover:scale-105 transition-transform">Login</a>
-      {% endif %}
-    </div>
-  </header>
-
-  <!-- Chat Header -->
-  <header class="chat-header p-3" id="chatHeader" aria-hidden="true">
-    <div class="chat-title text-xl font-semibold text-white">MGZon AI Assistant</div>
-    <div class="chat-controls flex gap-2">
-      <button id="clearBtn" class="icon-btn" aria-label="Clear All Messages" title="Clear All Messages">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
-          <path d="M3 6h18" />
-          <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-          <path d="M10 11v6" />
-          <path d="M14 11v6" />
+  <!-- Sidebar -->
+  <aside id="sidebar" class="fixed inset-y-0 left-0 w-64 bg-gray-800/90 backdrop-blur-md transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-50">
+    <div class="flex items-center justify-between p-4 border-b border-gray-700">
+      <div class="flex items-center">
+        <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-10 h-10 mr-2 animate-pulse" />
+        <h2 class="text-lg font-bold text-white">MGZon</h2>
+      </div>
+      <button id="sidebarToggle" class="md:hidden text-white" aria-label="Close Sidebar">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
         </svg>
       </button>
     </div>
-  </header>
+    <nav class="p-4">
+      <ul class="space-y-2">
+        <li>
+          <a href="/" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3 11.5L12 4l9 7.5M5 21V11.5h14V21"></path>
+            </svg>
+            Home
+          </a>
+        </li>
+        <li>
+          <a href="/about" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            About
+          </a>
+        </li>
+        <li>
+          <a href="/blog" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 006 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"></path>
+            </svg>
+            Blog
+          </a>
+        </li>
+        <li>
+          <a href="/docs" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+            </svg>
+            Docs
+          </a>
+        </li>
+        {% if user %}
+        <li>
+          <button id="settingsBtn" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors w-full text-left">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
+            </svg>
+            Settings
+          </button>
+        </li>
+        <li>
+          <a href="/auth/jwt/logout" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+            </svg>
+            Logout
+          </a>
+        </li>
+        {% else %}
+        <li>
+          <a href="/login" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
+            </svg>
+            Login
+          </a>
+        </li>
+        {% endif %}
+      </ul>
+      {% if user %}
+      <div class="mt-4">
+        <div class="flex justify-between items-center px-2 mb-2">
+          <h3 class="text-sm font-semibold text-white">Conversations</h3>
+          <button id="newConversationBtn" class="text-white hover:bg-gray-700 p-1 rounded" title="New Conversation">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            </svg>
+          </button>
+        </div>
+        <button id="historyToggle" class="md:hidden flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors w-full text-left">
+          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          Show History
+        </button>
+        <ul id="conversationList" class="space-y-2 max-h-[calc(100vh-300px)] overflow-y-auto hidden md:block">
+          <!-- Conversations will be populated by JavaScript -->
+        </ul>
+      </div>
+      {% endif %}
+    </nav>
+  </aside>
+
+  <!-- Swipe Hint for Mobile -->
+  <div id="swipeHint" class="md:hidden fixed top-1/2 left-4 z-50 animate-pulse">
+    <img src="/static/images/swipe-hint.svg" alt="Swipe to open sidebar" class="w-8 h-8" />
+  </div>
 
   <!-- Main Content -->
-  <main class="flex-1 flex flex-col max-w-screen-xl w-full mx-auto">
-    <div id="initialContent" class="flex flex-col items-center justify-center text-center h-full">
-      <div class="title mb-4 gradient-text text-3xl font-bold">
-        How can I help you today?
+  <div class="flex-1 flex flex-col max-w-screen-xl w-full mx-auto md:ml-64">
+    <!-- Chat Header -->
+    <header class="chat-header p-3 flex justify-between items-center">
+      <div class="chat-title text-xl font-semibold text-white">
+        <span id="conversationTitle">{{ conversation_title | default('MGZon AI Assistant') }}</span>
       </div>
-      <p class="system text-gray-300 mb-4">
-        A versatile chatbot powered by DeepSeek, GPT-OSS, CLIP, Whisper, and TTS.<br>
-        Type your query, upload images/files, or hold the send button to record audio!
-      </p>
-      <!-- Prompts -->
-      <div class="prompts w-full max-w-md mx-auto grid gap-2">
-        <div class="prompt-item" data-prompt="What's the capital of France?">
-          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M18.66 5.34l1.41-1.41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-            <circle cx="12" cy="12" r="4" stroke-width="2" />
-          </svg>
-          <span>What's the capital of France?</span>
-        </div>
-        <div class="prompt-item" data-prompt="Generate a Python script for a simple web server">
-          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <path d="M4 7h16M4 12h16M4 17h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <div class="chat-controls flex gap-2">
+        <button id="clearBtn" class="icon-btn" aria-label="Clear All Messages" title="Clear All Messages">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 6h18" />
+            <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6" />
+            <path d="M14 11v6" />
           </svg>
-          <span>Generate a Python script for a simple web server</span>
-        </div>
-        <div class="prompt-item" data-prompt="Analyze this image for me">
-          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <path d="M3 12h18M12 3v18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-          <span>Analyze this image for me</span>
-        </div>
-        <div class="prompt-item" data-prompt="Convert this text to audio">
-          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <path d="M12 3v18M7 12h10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-          <span>Convert this text to audio</span>
-        </div>
+        </button>
       </div>
-      <div id="messageLimitWarning" class="text-red-500 text-center hidden mt-4">
-        You have reached the message limit. Please <a href="/login" class="text-blue-300 underline">login</a> to continue.
-      </div>
-    </div>
-    <div id="chatArea" class="flex-1 hidden" aria-live="polite">
-      <div id="chatBox" class="flex-col" aria-live="polite"></div>
-    </div>
-    <!-- Footer Form -->
-    <form id="footerForm" class="flex" autocomplete="off">
-      <div id="inputContainer" class="w-full">
-        <textarea id="userInput" placeholder="Ask anything..." required></textarea>
-        <div id="rightIconGroup" class="flex gap-2">
-          <button type="button" id="fileBtn" class="icon-btn" aria-label="Upload File" title="Upload File">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
-              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-              <path d="M14 2v6h6" />
+    </header>
+
+    <!-- Chat Area -->
+    <main class="flex-1 flex flex-col">
+      <div id="initialContent" class="flex flex-col items-center justify-center text-center h-full">
+        <div class="title mb-4 gradient-text text-3xl font-bold">
+          How can I help you today?
+        </div>
+        <p class="system text-gray-300 mb-4">
+          A versatile chatbot powered by DeepSeek, GPT-OSS, CLIP, Whisper, and TTS.<br>
+          Type your query, upload images/files, or hold the send button to record audio!
+        </p>
+        <!-- Prompts -->
+        <div class="prompts w-full max-w-md mx-auto grid gap-2">
+          <div class="prompt-item" data-prompt="What's the capital of France?">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M18.66 5.34l1.41-1.41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              <circle cx="12" cy="12" r="4" stroke-width="2" />
             </svg>
-          </button>
-          <input type="file" id="fileInput" accept="image/*,.mp3,.wav" style="display: none;" />
-          <button type="button" id="audioBtn" class="icon-btn" aria-label="Upload Audio File" title="Upload Audio File">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
-              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
-              <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-              <path d="M12 19v4" />
+            <span>What's the capital of France?</span>
+          </div>
+          <div class="prompt-item" data-prompt="Generate a Python script for a simple web server">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M4 7h16M4 12h16M4 17h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
-          </button>
-          <input type="file" id="audioInput" accept="audio/*" style="display: none;" />
-          <button type="submit" id="sendBtn" class="icon-btn" disabled aria-label="Send or Hold to Record" title="Click to Send or Hold to Record Voice">
-            <svg id="sendIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M3 12h11" />
+            <span>Generate a Python script for a simple web server</span>
+          </div>
+          <div class="prompt-item" data-prompt="Analyze this image for me">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M3 12h18M12 3v18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
-          </button>
-          <button id="stopBtn" class="icon-btn" aria-label="Stop" title="Stop" style="display: none;">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
-              <rect x="6" y="6" width="12" height="12" rx="2" fill="white" />
+            <span>Analyze this image for me</span>
+          </div>
+          <div class="prompt-item" data-prompt="Convert this text to audio">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M12 3v18M7 12h10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
-          </button>
+            <span>Convert this text to audio</span>
+          </div>
+        </div>
+        <div id="messageLimitWarning" class="text-red-500 text-center hidden mt-4">
+          You have reached the message limit. Please <a href="/login" class="text-blue-300 underline">login</a> to continue.
         </div>
       </div>
-      <div id="filePreview" class="upload-preview" style="display: none;"></div>
-      <div id="audioPreview" class="audio-preview" style="display: none;"></div>
-    </form>
-  </main>
-
-  <!-- Footer -->
-  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 w-full">
-    <div class="container max-w-6xl mx-auto text-center">
-      <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-16 h-16 mx-auto mb-4 animate-pulse">
-      <p class="mb-2 text-sm">
-        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
-        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
-      </p>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-        <div class="glass p-3 cursor-pointer" onclick="showCardDetails('email')">
-          <i class="bx bx-mail-send text-2xl text-emerald-300 mb-1"></i>
-          <h4 class="font-semibold mb-1 text-sm">Email Us</h4>
-          <p class="text-xs"><a href="mailto:[email protected]" class="text-emerald-300 hover:underline">[email protected]</a></p>
-          <div id="email-details" class="hidden mt-2 p-3 bg-gray-700/80 rounded-lg">
-            <p class="text-xs">Reach out to our support team for any inquiries or assistance.</p>
-            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-3 py-1 rounded-lg mt-2 text-xs">Close</button>
+      <div id="chatArea" class="flex-1 hidden" aria-live="polite">
+        <div id="chatBox" class="flex-col" aria-live="polite"></div>
+      </div>
+      <!-- Footer Form -->
+      <form id="footerForm" class="flex p-4">
+        <div id="inputContainer" class="w-full">
+          <textarea id="userInput" placeholder="Ask anything..." required></textarea>
+          <div id="rightIconGroup" class="flex gap-2">
+            <button type="button" id="fileBtn" class="icon-btn" aria-label="Upload File" title="Upload File">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                <path d="M14 2v6h6" />
+              </svg>
+            </button>
+            <input type="file" id="fileInput" accept="image/*,.mp3,.wav" style="display: none;" />
+            <button type="button" id="audioBtn" class="icon-btn" aria-label="Upload Audio File" title="Upload Audio File">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                <path d="M12 19v4" />
+              </svg>
+            </button>
+            <input type="file" id="audioInput" accept="audio/*" style="display: none;" />
+            <button type="submit" id="sendBtn" class="icon-btn" disabled aria-label="Send or Hold to Record" title="Click to Send or Hold to Record Voice">
+              <svg id="sendIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M3 12h11" />
+              </svg>
+            </button>
+            <button id="stopBtn" class="icon-btn" aria-label="Stop" title="Stop" style="display: none;">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
+                <rect x="6" y="6" width="12" height="12" rx="2" fill="white" />
+              </svg>
+            </button>
           </div>
         </div>
-        <div class="glass p-3 cursor-pointer" onclick="showCardDetails('phone')">
-          <i class="bx bx-phone text-2xl text-emerald-300 mb-1"></i>
-          <h4 class="font-semibold mb-1 text-sm">Phone Support</h4>
-          <p class="text-xs">+1-800-123-4567</p>
-          <div id="phone-details" class="hidden mt-2 p-3 bg-gray-700/80 rounded-lg">
-            <p class="text-xs">Contact our support team via phone for immediate assistance.</p>
-            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-3 py-1 rounded-lg mt-2 text-xs">Close</button>
-          </div>
+        <div id="filePreview" class="upload-preview" style="display: none;"></div>
+        <div id="audioPreview" class="audio-preview" style="display: none;"></div>
+      </form>
+    </main>
+
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+      <div class="bg-gray-800 p-6 rounded-lg w-full max-w-md">
+        <div class="flex justify-between items-center mb-4">
+          <h2 class="text-xl font-bold text-white">User Settings</h2>
+          <button id="closeSettingsBtn" class="text-gray-400 hover:text-white">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
         </div>
-        <div class="glass p-3 cursor-pointer" onclick="showCardDetails('community')">
-          <i class="bx bx-group text-2xl text-emerald-300 mb-1"></i>
-          <h4 class="font-semibold mb-1 text-sm">Community</h4>
-          <p class="text-xs"><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
-          <div id="community-details" class="hidden mt-2 p-3 bg-gray-700/80 rounded-lg">
-            <p class="text-xs">Join our vibrant community to share ideas and collaborate.</p>
-            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-3 py-1 rounded-lg mt-2 text-xs">Close</button>
+        <form id="settingsForm" class="space-y-4">
+          <div>
+            <label for="display_name" class="block text-sm text-gray-300">Display Name</label>
+            <input type="text" id="display_name" name="display_name" class="w-full p-2 bg-gray-700 text-white rounded">
           </div>
-        </div>
-      </div>
-      <div class="flex justify-center gap-4 mt-4">
-        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
-        <a href="https://x.com/MGZon" class="text-xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
-        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
+          <div>
+            <label for="preferred_model" class="block text-sm text-gray-300">Preferred Model</label>
+            <select id="preferred_model" name="preferred_model" class="w-full p-2 bg-gray-700 text-white rounded">
+              <option value="">Default</option>
+              <option value="advanced">Advanced (High-performance)</option>
+              <option value="standard">Standard (Balanced)</option>
+              <option value="light">Light (Quick)</option>
+            </select>
+          </div>
+          <div>
+            <label for="job_title" class="block text-sm text-gray-300">Job Title</label>
+            <input type="text" id="job_title" name="job_title" class="w-full p-2 bg-gray-700 text-white rounded">
+          </div>
+          <div>
+            <label for="education" class="block text-sm text-gray-300">Education</label>
+            <input type="text" id="education" name="education" class="w-full p-2 bg-gray-700 text-white rounded">
+          </div>
+          <div>
+            <label for="interests" class="block text-sm text-gray-300">Interests</label>
+            <textarea id="interests" name="interests" class="w-full p-2 bg-gray-700 text-white rounded"></textarea>
+          </div>
+          <div>
+            <label for="additional_info" class="block text-sm text-gray-300">Additional Info</label>
+            <textarea id="additional_info" name="additional_info" class="w-full p-2 bg-gray-700 text-white rounded"></textarea>
+          </div>
+          <div>
+            <label for="conversation_style" class="block text-sm text-gray-300">Conversation Style</label>
+            <select id="conversation_style" name="conversation_style" class="w-full p-2 bg-gray-700 text-white rounded">
+              <option value="default">Default</option>
+              <option value="concise">Concise</option>
+              <option value="analytical">Analytical</option>
+              <option value="creative">Creative</option>
+            </select>
+          </div>
+          <div class="flex justify-end gap-2">
+            <button type="button" id="closeSettingsBtn" class="px-4 py-2 bg-gray-600 text-white rounded">Cancel</button>
+            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">Save</button>
+          </div>
+        </form>
       </div>
-      <p class="mt-4 text-xs">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
     </div>
-  </footer>
+
+    <!-- Copyright -->
+    <div class="text-center text-xs text-gray-400 py-2">
+      © 2025 Mark Al-Asfar & MGZon AI. All rights reserved.
+    </div>
+    <button id="installAppBtn" style="display: none;" class="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded shadow-lg z-50">
+      📲 Install MG Chat
+    </button>
+  </div>
 
   <!-- Scripts -->
+  <script src="/static/js/chat.js?v=1.0"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-  <script src="/static/js/chat.js"></script>
-  <script>
-    AOS.init();
-    function showCardDetails(cardId) {
-      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+
+<script>
+  // تهيئة مكتبة AOS
+  AOS.init();
+
+  // تمرير conversation_id و conversation_title إذا كانا موجودين
+  {% if conversation_id %}
+    window.conversationId = "{{ conversation_id }}";
+    window.conversationTitle = "{{ conversation_title }}";
+    if (window.loadConversation) {
+      window.loadConversation("{{ conversation_id }}");
     }
-    function closeCardDetails(cardId) {
-      document.getElementById(`${cardId}-details`).classList.add('hidden');
+  {% endif %}
+
+  // تسجيل Service Worker لتفعيل الـ PWA
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/static/js/sw.js')
+      .then(function(reg) {
+        console.log('✅ Service Worker Registered', reg);
+      }).catch(function(err) {
+        console.error('❌ Service Worker registration failed', err);
+      });
+  }
+
+  // التعامل مع حدث beforeinstallprompt لتثبيت التطبيق
+  let deferredPrompt;
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredPrompt = e;
+    const installBtn = document.getElementById('installAppBtn');
+    if (installBtn) {
+      installBtn.style.display = 'block';
+
+      installBtn.addEventListener('click', () => {
+        deferredPrompt.prompt();
+        deferredPrompt.userChoice.then(choice => {
+          if (choice.outcome === 'accepted') {
+            console.log('✅ User accepted the install prompt');
+          } else {
+            console.log('❌ User dismissed the install prompt');
+          }
+          deferredPrompt = null;
+        });
+      });
     }
-  </script>
+  });
+</script>
+
 </body>
 </html>

templates/index.html

@@ -10,7 +10,18 @@ United States, FastAPI, Gradio">
   <meta name="robots" content="index, follow">
   <title>MGZon Chatbot – Powered by AI</title>
   <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-  <link rel="apple-touch-icon" href="/static/images/mg.svg">
+<!-- manifest for Android/Chrome -->
+<link rel="manifest" href="/static/manifest.json">
+
+<!-- iOS Web App Support -->
+<link rel="apple-touch-icon" sizes="180x180" href="/static/images/icons/mg-180.png">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="MGZon">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+<!-- General Theme -->
+<meta name="theme-color" content="#2d3748">
+
   <!-- Open Graph -->
   <meta property="og:title" content="MGZon Chatbot – AI-Powered Solutions">
   <meta property="og:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
@@ -303,6 +314,9 @@ United States. Ready to code smarter and shop better?
       </div>
       <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
     </div>
+        <button id="installAppBtn" style="display: none;" class="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded shadow-lg z-50">
+      📲 Install MG Chat
+    </button>
   </footer>
   <script>
     const sidebar = document.getElementById('sidebar');
@@ -337,6 +351,38 @@ United States. Ready to code smarter and shop better?
       spinner.classList.remove('hidden');
       setTimeout(() => spinner.classList.add('hidden'), 2000);
     });
+    
+    if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/static/js/sw.js')
+      .then(function(reg) {
+        console.log('✅ Service Worker Registered', reg);
+      }).catch(function(err) {
+        console.error('❌ Service Worker registration failed', err);
+      });
+  }
+
+  // التعامل مع حدث beforeinstallprompt لتثبيت التطبيق
+  let deferredPrompt;
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredPrompt = e;
+    const installBtn = document.getElementById('installAppBtn');
+    if (installBtn) {
+      installBtn.style.display = 'block';
+
+      installBtn.addEventListener('click', () => {
+        deferredPrompt.prompt();
+        deferredPrompt.userChoice.then(choice => {
+          if (choice.outcome === 'accepted') {
+            console.log('✅ User accepted the install prompt');
+          } else {
+            console.log('❌ User dismissed the install prompt');
+          }
+          deferredPrompt = null;
+        });
+      });
+    }
+  });
   </script>
 </body>
 </html>

templates/login.html

@@ -8,8 +8,19 @@
   <meta name="author" content="Mark Al-Asfar">
   <meta name="robots" content="index, follow">
   <title>Login - MGZon Chatbot</title>
+  <!-- manifest for Android/Chrome -->
+<link rel="manifest" href="/static/manifest.json">
+
+<!-- iOS Web App Support -->
+<link rel="apple-touch-icon" sizes="180x180" href="/static/images/icons/mg-180.png">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="MGZon">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+<!-- General Theme -->
+<meta name="theme-color" content="#2d3748">
+
   <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-  <link rel="apple-touch-icon" href="/static/images/mg.svg">
   <!-- Open Graph -->
   <meta property="og:title" content="Login - MGZon Chatbot">
   <meta property="og:description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
@@ -96,10 +107,10 @@
         </button>
       </form>
       <div class="flex justify-center gap-4 mt-4 flex-wrap">
-        <a href="/auth/google/login" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+        <a href="/auth/google/authorize" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
           Login with Google <i class="bx bxl-google ml-2"></i>
         </a>
-        <a href="/auth/github/login" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+        <a href="/auth/github/authorize" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
           Login with GitHub <i class="bx bxl-github ml-2"></i>
         </a>
       </div>
@@ -177,6 +188,9 @@
       </div>
       <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
     </div>
+    <button id="installAppBtn" style="display: none;" class="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded shadow-lg z-50">
+      📲 Install MG Chat
+    </button>
   </footer>
   <script>
     const loginForm = document.getElementById('loginForm');
@@ -213,6 +227,39 @@
     function closeCardDetails(cardId) {
       document.getElementById(`${cardId}-details`).classList.add('hidden');
     }
+
+  // تسجيل Service Worker لتفعيل الـ PWA
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/static/js/sw.js')
+      .then(function(reg) {
+        console.log('✅ Service Worker Registered', reg);
+      }).catch(function(err) {
+        console.error('❌ Service Worker registration failed', err);
+      });
+  }
+
+  // التعامل مع حدث beforeinstallprompt لتثبيت التطبيق
+  let deferredPrompt;
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredPrompt = e;
+    const installBtn = document.getElementById('installAppBtn');
+    if (installBtn) {
+      installBtn.style.display = 'block';
+
+      installBtn.addEventListener('click', () => {
+        deferredPrompt.prompt();
+        deferredPrompt.userChoice.then(choice => {
+          if (choice.outcome === 'accepted') {
+            console.log('✅ User accepted the install prompt');
+          } else {
+            console.log('❌ User dismissed the install prompt');
+          }
+          deferredPrompt = null;
+        });
+      });
+    }
+  });
   </script>
 </body>
 </html>

templates/register.html

@@ -92,10 +92,10 @@
         </button>
       </form>
       <div class="flex justify-center gap-4 mt-4 flex-wrap">
-        <a href="/auth/google/login" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+        <a href="/auth/google/authorize" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
           Sign Up with Google <i class="bx bxl-google ml-2"></i>
         </a>
-        <a href="/auth/github/login" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+        <a href="/auth/github/authorize" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
           Sign Up with GitHub <i class="bx bxl-github ml-2"></i>
         </a>
       </div>
@@ -208,6 +208,14 @@
     }
     function closeCardDetails(cardId) {
       document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
+        if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/static/js/sw.js')
+        .then(function(reg) {
+          console.log('✅ Service Worker Registered', reg);
+        }).catch(function(err) {
+          console.error('❌ Service Worker registration failed', err);
+        });
     }
   </script>
 </body>

utils/generation.py

@@ -35,14 +35,25 @@ HF_TOKEN = os.getenv("HF_TOKEN")
 BACKUP_HF_TOKEN = os.getenv("BACKUP_HF_TOKEN")
 API_ENDPOINT = os.getenv("API_ENDPOINT", "https://router.huggingface.co/v1")
 FALLBACK_API_ENDPOINT = os.getenv("FALLBACK_API_ENDPOINT", "https://api-inference.huggingface.co")
-MODEL_NAME = os.getenv("MODEL_NAME", "openai/gpt-oss-120b:together")
-SECONDARY_MODEL_NAME = os.getenv("SECONDARY_MODEL_NAME", "mistralai/Mistral-7B-Instruct-v0.2:featherless-ai")
-TERTIARY_MODEL_NAME = os.getenv("TERTIARY_MODEL_NAME", "openai/gpt-oss-20b:together")
+MODEL_NAME = os.getenv("MODEL_NAME", "openai/gpt-oss-120b")
+SECONDARY_MODEL_NAME = os.getenv("SECONDARY_MODEL_NAME", "mistralai/Mistral-7B-Instruct-v0.2")
+TERTIARY_MODEL_NAME = os.getenv("TERTIARY_MODEL_NAME", "openai/gpt-oss-20b")
 CLIP_BASE_MODEL = os.getenv("CLIP_BASE_MODEL", "Salesforce/blip-image-captioning-large")
 CLIP_LARGE_MODEL = os.getenv("CLIP_LARGE_MODEL", "openai/clip-vit-large-patch14")
 ASR_MODEL = os.getenv("ASR_MODEL", "openai/whisper-large-v3")
 TTS_MODEL = os.getenv("TTS_MODEL", "facebook/mms-tts-ara")
 
+# Model alias mapping
+MODEL_ALIASES = {
+    "advanced": MODEL_NAME,
+    "standard": SECONDARY_MODEL_NAME,
+    "light": TERTIARY_MODEL_NAME,
+    "image_base": CLIP_BASE_MODEL,
+    "image_advanced": CLIP_LARGE_MODEL,
+    "audio": ASR_MODEL,
+    "tts": TTS_MODEL
+}
+
 def check_model_availability(model_name: str, api_base: str, api_key: str) -> tuple[bool, str]:
     try:
         response = requests.get(
@@ -64,7 +75,16 @@ def check_model_availability(model_name: str, api_base: str, api_key: str) -> tu
             return check_model_availability(model_name, api_base, BACKUP_HF_TOKEN)
         return False, api_key
 
-def select_model(query: str, input_type: str = "text") -> tuple[str, str]:
+def select_model(query: str, input_type: str = "text", preferred_model: Optional[str] = None) -> tuple[str, str]:
+    # If user has a preferred model, use it unless the input type requires a specific model
+    if preferred_model and preferred_model in MODEL_ALIASES:
+        model_name = MODEL_ALIASES[preferred_model]
+        api_endpoint = API_ENDPOINT if model_name in [MODEL_NAME, TERTIARY_MODEL_NAME] else FALLBACK_API_ENDPOINT
+        is_available, _ = check_model_availability(model_name, api_endpoint, HF_TOKEN)
+        if is_available:
+            logger.info(f"Selected preferred model {model_name} with endpoint {api_endpoint} for query: {query}")
+            return model_name, api_endpoint
+
     query_lower = query.lower()
     # دعم الصوت
     if input_type == "audio" or any(keyword in query_lower for keyword in ["voice", "audio", "speech", "صوت", "تحويل صوت"]):
@@ -106,7 +126,7 @@ def request_generation(
     model_name: str,
     chat_history: Optional[List[dict]] = None,
     temperature: float = 0.7,
-    max_new_tokens: int = 128000,
+    max_new_tokens: int = 2048,
     reasoning_effort: str = "off",
     tools: Optional[List[dict]] = None,
     tool_choice: Optional[str] = None,
@@ -176,7 +196,7 @@ def request_generation(
             torchaudio.save(audio_file, audio[0], sample_rate=22050, format="wav")
             audio_file.seek(0)
             audio_data = audio_file.read()
-            yield audio_data  # ← تصحيح: استخدام yield مع البيانات مباشرة
+            yield audio_data
             cache[cache_key] = [audio_data]
             return
         except Exception as e: