First version

app.py

@@ -0,0 +1,238 @@
+# /models
+# /chat
+# /get-tools
+
+import asyncio
+import json
+import traceback
+from typing import List, Optional, Literal, Any, Dict
+from contextlib import AsyncExitStack
+import uuid
+
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from fastapi.responses import FileResponse
+from openai import APIConnectionError, OpenAI
+
+from mcp import ClientSession, StdioServerParameters
+from mcp.client.stdio import stdio_client
+
+sessions = {}
+unique_apikeys = []
+
+class MCPClient:
+    def __init__(self):
+        self.session: Optional[ClientSession] = None
+        self.exit_stack = AsyncExitStack()
+        self.current_model = None
+        self.messages = []
+        self.openai: Optional[OpenAI] = None
+        self.api_key = None
+        self.tool_use: bool = True
+        self.models = None
+        self.tools = []
+    
+    async def connect(self, api_key: str):
+        try:
+            self.openai = OpenAI(
+                base_url="https://generativelanguage.googleapis.com/v1beta/openai/",
+                api_key=api_key
+            )
+            self.api_key = api_key
+        except APIConnectionError as e:
+            traceback.print_exception(e)
+            return False
+        except Exception as e:
+            traceback.print_exception(e)
+            return False
+
+        server_params = StdioServerParameters(command="uv", args=["run", "server.py"])
+        stdio_transport = await self.exit_stack.enter_async_context(stdio_client(server_params))
+        self.stdio, self.write = stdio_transport
+        self.session = await self.exit_stack.enter_async_context(ClientSession(self.stdio, self.write))
+
+        await self.session.initialize()
+
+        response = await self.session.list_tools()
+        tools = response.tools
+        self.tools = [{
+            "type": "function",
+            "function": {
+                "name": tool.name,
+                "description": tool.description,
+                "parameters": tool.inputSchema
+            }
+        } for tool in tools]
+
+    def populate_model(self):
+        self.models = sorted([m.id for m in self.openai.models.list().data])
+
+    async def process_query(self, query: str) -> str:
+        """Process a query using Groq and available tools"""
+        self.messages.extend([
+            {
+                "role": "user",
+                "content": query
+            }
+        ])
+
+        response = self.openai.chat.completions.create(
+            model=self.current_model,
+            messages=self.messages,
+            tools=self.tools,
+            temperature=0
+        ) if self.tool_use else self.openai.chat.completions.create(
+            model=self.current_model,
+            messages=self.messages,
+            temperature=0.65
+        )
+
+        # Process response and handle tool calls
+        final_text = []
+
+        for choice in response.choices:
+            content = choice.message.content
+            tool_calls = choice.message.tool_calls
+            if content:
+                final_text.append(content)
+                break
+            if tool_calls:
+                assistant_message = {
+                    "role": "assistant",
+                    "tool_calls": tool_calls
+                }
+
+                if content:  # Ajouter content seulement s'il existe
+                    assistant_message["content"] = content
+
+                self.messages.append(assistant_message)
+
+                for tool in tool_calls:
+                    tool_name = tool.function.name
+                    tool_args = tool.function.arguments
+
+                    result = await self.session.call_tool(tool_name, json.loads(tool_args))
+                    print(f"[Calling tool {tool_name} with args {tool_args}]")
+
+                    self.messages.append({
+                        "role": "tool",
+                        "tool_call_id": tool.id,
+                        "content": str(result)
+                    })
+
+                    response2 = self.openai.chat.completions.create(
+                        model=self.current_model,
+                        messages=self.messages,
+                        temperature=0.7
+                    )
+
+                    final_text.append(response2.choices[0].message.content)
+
+                    self.messages.append({
+                        "role": "assistant",
+                        "content": response2.choices[0].message.content
+                    })
+        return "\n".join(final_text)
+
+app = FastAPI()
+app.add_middleware(CORSMiddleware, allow_credentials=True, allow_headers=["*"], allow_methods=["*"], allow_origins=["*"])
+mcp = MCPClient()
+
+class InitRequest(BaseModel):
+    api_key: str
+
+class InitResponse(BaseModel):
+    success: bool
+    session_id: str
+    models: Optional[list] = None
+    error: Optional[str] = None
+
+class LogoutRequest(BaseModel):
+    session_id: str
+
+def get_mcp_client(session_id: str) -> MCPClient|None:
+    """Get the MCPClient for a given session_id, or raise 404."""
+    client = sessions.get(session_id)
+    if client is None:
+        raise HTTPException(status_code=404, detail="Invalid session_id. Please re-initialize.")
+    return client
+
+@app.get("/")
+def root():
+    return FileResponse("index.html")
+
+@app.post("/init", response_model=InitResponse)
+async def init_server(req: InitRequest):
+    """
+    Initializes a new MCP client session. Returns a session_id.
+    """
+    api_key = req.api_key
+    session_id = str(uuid.uuid4())
+    mcp = MCPClient()
+
+    try:
+        ok = await mcp.connect(api_key)
+        if ok is False:
+            raise RuntimeError("Failed to connect to MCP or OpenAI with API key.")
+        mcp.populate_model()
+        
+        sessions[session_id] = mcp
+        if api_key not in unique_apikeys:
+            unique_apikeys.append(api_key)
+        else:
+            raise Exception("Session with this API key already exists. We won't re-return you the session ID. Bye-bye Hacker !!")
+        return InitResponse(
+            session_id=session_id,
+            models=mcp.models,
+            error=None,
+            success=True
+        )
+    except Exception as e:
+        traceback.print_exception(e)
+        return InitResponse(
+            session_id="",
+            models=None,
+            error=str(e),
+            success=False
+        )
+
+class ChatRequest(BaseModel):
+    session_id: str
+    query: str
+    tool_use: Optional[bool] = True
+    model: Optional[str] = "models/gemini-2.0-flash"
+
+class ChatResponse(BaseModel):
+    output: str
+    error: Optional[str] = None
+
+@app.post("/chat", response_model=ChatResponse)
+async def chat(req: ChatRequest):
+    """
+    Handles chat requests for a given session.
+    """
+    try:
+        mcp = get_mcp_client(req.session_id)
+        mcp.tool_use = req.tool_use
+        if req.model in mcp.models:
+            mcp.current_model = req.model
+        else:
+            raise ValueError(f"Model not recognized: Not in the model list: {mcp.models}")
+        result = await mcp.process_query(req.query)
+        return ChatResponse(output=result)
+    except Exception as e:
+        traceback.print_exception(e)
+        return ChatResponse(output="", error=str(e))
+    
+@app.post("/logout")
+async def logout(logout_req: LogoutRequest):
+    """Clean up session resources."""
+    mcp = sessions.pop(logout_req.session_id, None)
+    unique_apikeys.remove(mcp.api_key)
+    if mcp and hasattr(mcp.exit_stack, "aclose"):
+        try:
+            await mcp.exit_stack.aclose()
+        except RuntimeError:
+            pass
+    return {"success": True}

index.html

@@ -0,0 +1,809 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChatBot OpenAI</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            height: 100vh;
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Login Page Styles */
+        .login-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background: white;
+        }
+
+        .login-form {
+            background: white;
+            padding: 48px;
+            border-radius: 16px;
+            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 400px;
+            text-align: center;
+        }
+
+        .login-form h1 {
+            color: #1a73e8;
+            font-size: 32px;
+            font-weight: 400;
+            margin-bottom: 8px;
+        }
+
+        .login-form p {
+            color: #5f6368;
+            font-size: 16px;
+            margin-bottom: 32px;
+        }
+
+        .input-group {
+            margin-bottom: 24px;
+            text-align: left;
+        }
+
+        .input-group label {
+            display: block;
+            color: #202124;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 8px;
+        }
+
+        .input-group input {
+            width: 100%;
+            padding: 16px;
+            border: 2px solid #dadce0;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: all 0.2s ease;
+            background: #fafafa;
+        }
+
+        .input-group input:focus {
+            outline: none;
+            border-color: #1a73e8;
+            background: white;
+            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
+        }
+
+        .btn-primary {
+            background: #1a73e8;
+            color: white;
+            border: none;
+            padding: 16px 32px;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            width: 100%;
+        }
+
+        .btn-primary:hover {
+            background: #1557b0;
+            box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3);
+        }
+
+        /* Chat Interface Styles */
+        .chat-container {
+            display: none;
+            height: 100vh;
+            flex-direction: column;
+        }
+
+        .chat-header {
+            background: #1a73e8;
+            color: white;
+            padding: 16px 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .header-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .header-title {
+            font-size: 20px;
+            font-weight: 500;
+        }
+
+        .header-controls {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .model-select {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 8px;
+            font-size: 14px;
+        }
+
+        .model-select option {
+            background: #1a73e8;
+            color: white;
+        }
+
+        .toggle-container {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .toggle {
+            position: relative;
+            width: 48px;
+            height: 24px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .toggle.active {
+            background: #34a853;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 20px;
+            height: 20px;
+            background: white;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+        }
+
+        .toggle.active .toggle-slider {
+            transform: translateX(24px);
+        }
+
+        .logout-btn {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .logout-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .chat-messages {
+            flex: 1;
+            padding: 24px;
+            overflow-y: auto;
+            background: #f8f9fa;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .message {
+            display: flex;
+            gap: 12px;
+            max-width: 80%;
+            animation: slideIn 0.3s ease;
+        }
+
+        .message.user {
+            align-self: flex-end;
+            flex-direction: row-reverse;
+        }
+
+        .message-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 500;
+            font-size: 14px;
+            flex-shrink: 0;
+        }
+
+        .message.user .message-avatar {
+            background: #1a73e8;
+            color: white;
+        }
+
+        .message.assistant .message-avatar {
+            background: #34a853;
+            color: white;
+        }
+
+        .message-content {
+            background: white;
+            padding: 16px;
+            border-radius: 16px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            line-height: 1.5;
+            word-wrap: break-word;
+        }
+
+        .message.user .message-content {
+            background: #1a73e8;
+            color: white;
+        }
+
+        .chat-input-container {
+            padding: 24px;
+            background: white;
+            border-top: 1px solid #e0e0e0;
+        }
+
+        .chat-input-wrapper {
+            display: flex;
+            gap: 12px;
+            align-items: flex-end;
+        }
+
+        .chat-input {
+            flex: 1;
+            padding: 16px;
+            border: 2px solid #dadce0;
+            border-radius: 24px;
+            font-size: 16px;
+            resize: none;
+            min-height: 24px;
+            max-height: 120px;
+            transition: all 0.2s ease;
+        }
+
+        .chat-input:focus {
+            outline: none;
+            border-color: #1a73e8;
+            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
+        }
+
+        .send-btn {
+            background: #1a73e8;
+            color: white;
+            border: none;
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+            flex-shrink: 0;
+        }
+
+        .send-btn:hover {
+            background: #1557b0;
+            transform: scale(1.05);
+        }
+
+        .send-btn:disabled {
+            background: #dadce0;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .typing-indicator {
+            display: none;
+            align-items: center;
+            gap: 12px;
+            max-width: 80%;
+            animation: slideIn 0.3s ease;
+        }
+
+        .typing-dots {
+            background: white;
+            padding: 16px;
+            border-radius: 16px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            display: flex;
+            gap: 4px;
+        }
+
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #dadce0;
+            animation: typing 1.4s infinite ease-in-out;
+        }
+
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes typing {
+            0%, 60%, 100% {
+                transform: scale(1);
+                background: #dadce0;
+            }
+            30% {
+                transform: scale(1.2);
+                background: #1a73e8;
+            }
+        }
+
+        .error-message {
+            background: #fce8e6;
+            color: #d93025;
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+            border-left: 4px solid #d93025;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                border-radius: 0;
+                height: 100vh;
+            }
+
+            .login-form {
+                padding: 32px 24px;
+                margin: 16px;
+            }
+
+            .header-controls {
+                flex-direction: column;
+                gap: 8px;
+                align-items: flex-end;
+            }
+
+            .message {
+                max-width: 90%;
+            }
+
+            .chat-input-container {
+                padding: 16px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Login Page -->
+        <div id="loginPage" class="login-container">
+            <div class="login-form">
+                <h1>ChatBot OpenAI</h1>
+                <p>Connectez-vous avec votre clé API</p>
+                <div id="loginError"></div>
+                <form id="loginForm">
+                    <div class="input-group">
+                        <label for="apiKey">Clé API</label>
+                        <input type="password" id="apiKey" placeholder="Votre clé API..." required>
+                    </div>
+                    <button type="submit" class="btn-primary">Se connecter</button>
+                </form>
+            </div>
+        </div>
+
+        <!-- Chat Interface -->
+        <div id="chatPage" class="chat-container">
+            <div class="chat-header">
+                <div class="header-left">
+                    <div class="header-title">ChatBot OpenAI</div>
+                </div>
+                <div class="header-controls">
+                    <select id="modelSelect" class="model-select">
+                        <!-- Models will be populated dynamically -->
+                    </select>
+                    <div class="toggle-container">
+                        <span style="font-size: 14px;">Tools</span>
+                        <div id="toolToggle" class="toggle active">
+                            <div class="toggle-slider"></div>
+                        </div>
+                    </div>
+                    <button id="logoutBtn" class="logout-btn">Déconnexion</button>
+                </div>
+            </div>
+
+            <div id="chatMessages" class="chat-messages">
+                <div class="message assistant">
+                    <div class="message-avatar">AI</div>
+                    <div class="message-content">
+                        Bonjour ! Je suis votre assistant IA. Comment puis-je vous aider aujourd'hui ?
+                    </div>
+                </div>
+            </div>
+
+            <div class="typing-indicator" id="typingIndicator">
+                <div class="message-avatar" style="background: #34a853; color: white;">AI</div>
+                <div class="typing-dots">
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                </div>
+            </div>
+
+            <div class="chat-input-container">
+                <div class="chat-input-wrapper">
+                    <textarea id="chatInput" class="chat-input" placeholder="Tapez votre message..." rows="1"></textarea>
+                    <button id="sendBtn" class="send-btn">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class ChatBot {
+            constructor() {
+                this.sessionId = '';
+                this.currentModel = 'llama-3.3-70b-versatile';
+                this.toolsEnabled = true;
+                this.isTyping = false;
+                this.availableModels = [];
+                this.baseUrl = window.location.origin; // Utilise l'URL de votre serveur FastAPI
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.loadFromStorage();
+            }
+
+            initializeElements() {
+                // Login elements
+                this.loginPage = document.getElementById('loginPage');
+                this.loginForm = document.getElementById('loginForm');
+                this.apiKeyInput = document.getElementById('apiKey');
+                this.loginError = document.getElementById('loginError');
+
+                // Chat elements
+                this.chatPage = document.getElementById('chatPage');
+                this.chatMessages = document.getElementById('chatMessages');
+                this.chatInput = document.getElementById('chatInput');
+                this.sendBtn = document.getElementById('sendBtn');
+                this.modelSelect = document.getElementById('modelSelect');
+                this.toolToggle = document.getElementById('toolToggle');
+                this.logoutBtn = document.getElementById('logoutBtn');
+                this.typingIndicator = document.getElementById('typingIndicator');
+            }
+
+            bindEvents() {
+                // Login events
+                this.loginForm.addEventListener('submit', (e) => this.handleLogin(e));
+
+                // Chat events
+                this.sendBtn.addEventListener('click', () => this.sendMessage());
+                this.chatInput.addEventListener('keypress', (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        this.sendMessage();
+                    }
+                });
+
+                // Auto-resize textarea
+                this.chatInput.addEventListener('input', () => {
+                    this.chatInput.style.height = 'auto';
+                    this.chatInput.style.height = Math.min(this.chatInput.scrollHeight, 120) + 'px';
+                });
+
+                // Header controls
+                this.modelSelect.addEventListener('change', (e) => {
+                    this.currentModel = e.target.value;
+                    this.saveToStorage();
+                });
+
+                this.toolToggle.addEventListener('click', () => {
+                    this.toolsEnabled = !this.toolsEnabled;
+                    this.toolToggle.classList.toggle('active', this.toolsEnabled);
+                    this.saveToStorage();
+                });
+
+                this.logoutBtn.addEventListener('click', () => this.logout());
+            }
+
+            async handleLogin(e) {
+                e.preventDefault();
+                const apiKey = this.apiKeyInput.value.trim();
+                
+                if (!apiKey) {
+                    this.showLoginError('Veuillez entrer une clé API valide');
+                    return;
+                }
+
+                try {
+                    const response = await fetch(`${this.baseUrl}/init`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            api_key: apiKey
+                        })
+                    });
+
+                    const data = await response.json();
+
+                    if (data.success) {
+                        this.sessionId = data.session_id;
+                        this.availableModels = data.models || [];
+                        this.populateModelSelect();
+                        this.saveToStorage();
+                        this.showChatInterface();
+                        this.loginError.innerHTML = '';
+                    } else {
+                        this.showLoginError(data.error || 'Erreur de connexion');
+                    }
+                } catch (error) {
+                    this.showLoginError('Erreur de connexion au serveur. Veuillez réessayer.');
+                    console.error('Login error:', error);
+                }
+            }
+
+            populateModelSelect() {
+                this.modelSelect.innerHTML = '';
+                this.availableModels.forEach(model => {
+                    const option = document.createElement('option');
+                    option.value = model;
+                    option.textContent = model;
+                    this.modelSelect.appendChild(option);
+                });
+                
+                // Set default model if available
+                if (this.availableModels.includes(this.currentModel)) {
+                    this.modelSelect.value = this.currentModel;
+                } else if (this.availableModels.length > 0) {
+                    this.currentModel = this.availableModels[0];
+                    this.modelSelect.value = this.currentModel;
+                }
+            }
+
+            showLoginError(message) {
+                this.loginError.innerHTML = `<div class="error-message">${message}</div>`;
+            }
+
+            showChatInterface() {
+                this.loginPage.style.display = 'none';
+                this.chatPage.style.display = 'flex';
+                this.chatInput.focus();
+            }
+
+            async logout() {
+                try {
+                    if (this.sessionId) {
+                        await fetch(`${this.baseUrl}/logout`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                session_id: this.sessionId
+                            })
+                        });
+                    }
+                } catch (error) {
+                    console.error('Logout error:', error);
+                }
+
+                this.sessionId = '';
+                this.availableModels = [];
+                localStorage.removeItem('chatbot_data');
+                this.chatPage.style.display = 'none';
+                this.loginPage.style.display = 'flex';
+                this.apiKeyInput.value = '';
+                this.clearMessages();
+            }
+
+            async sendMessage() {
+                const message = this.chatInput.value.trim();
+                if (!message || this.isTyping || !this.sessionId) return;
+
+                // Add user message
+                this.addMessage('user', message);
+                this.chatInput.value = '';
+                this.chatInput.style.height = 'auto';
+                
+                // Show typing indicator
+                this.showTyping(true);
+                
+                try {
+                    const response = await fetch(`${this.baseUrl}/chat`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            session_id: this.sessionId,
+                            query: message,
+                            tool_use: this.toolsEnabled,
+                            model: this.currentModel
+                        })
+                    });
+
+                    const data = await response.json();
+                    this.showTyping(false);
+
+                    if (data.error) {
+                        this.addMessage('assistant', `Erreur: ${data.error}`);
+                    } else {
+                        this.addMessage('assistant', data.output);
+                    }
+                } catch (error) {
+                    this.showTyping(false);
+                    this.addMessage('assistant', `Erreur de connexion: ${error.message}`);
+                    console.error('Chat error:', error);
+                }
+                
+                this.saveToStorage();
+            }
+
+            addMessage(role, content) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${role}`;
+    
+    const avatar = document.createElement('div');
+    avatar.className = 'message-avatar';
+    avatar.textContent = role === 'user' ? 'U' : 'AI';
+    
+    const messageContent = document.createElement('div');
+    messageContent.className = 'message-content';
+    messageContent.textContent = content;
+    
+    messageDiv.appendChild(avatar);
+    messageDiv.appendChild(messageContent);
+    
+    // Vérifier si typingIndicator est bien un enfant de chatMessages
+    if (this.typingIndicator && this.typingIndicator.parentNode === this.chatMessages) {
+        this.chatMessages.insertBefore(messageDiv, this.typingIndicator);
+    } else {
+        // Si typingIndicator n'est pas présent ou pas un enfant, ajouter à la fin
+        this.chatMessages.appendChild(messageDiv);
+    }
+    
+    this.scrollToBottom();
+}
+
+            showTyping(show) {
+                this.isTyping = show;
+                this.typingIndicator.style.display = show ? 'flex' : 'none';
+                this.sendBtn.disabled = show;
+                this.scrollToBottom();
+            }
+
+            scrollToBottom() {
+                setTimeout(() => {
+                    this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+                }, 100);
+            }
+
+            clearMessages() {
+                const messages = this.chatMessages.querySelectorAll('.message');
+                messages.forEach((msg, index) => {
+                    if (index > 0) { // Keep welcome message
+                        msg.remove();
+                    }
+                });
+            }
+
+            saveToStorage() {
+                const data = {
+                    sessionId: this.sessionId,
+                    currentModel: this.currentModel,
+                    toolsEnabled: this.toolsEnabled,
+                    availableModels: this.availableModels
+                };
+                localStorage.setItem('chatbot_data', JSON.stringify(data));
+            }
+
+            loadFromStorage() {
+                const saved = localStorage.getItem('chatbot_data');
+                if (saved) {
+                    try {
+                        const data = JSON.parse(saved);
+                        if (data.sessionId) {
+                            this.sessionId = data.sessionId;
+                            this.currentModel = data.currentModel || 'llama-3.3-70b-versatile';
+                            this.toolsEnabled = data.toolsEnabled !== undefined ? data.toolsEnabled : true;
+                            this.availableModels = data.availableModels || [];
+                            
+                            // Update UI
+                            this.populateModelSelect();
+                            this.toolToggle.classList.toggle('active', this.toolsEnabled);
+                            
+                            // Verify session is still valid
+                            this.verifySession();
+                        }
+                    } catch (error) {
+                        console.error('Error loading from storage:', error);
+                        localStorage.removeItem('chatbot_data');
+                    }
+                }
+            }
+
+            async verifySession() {
+                try {
+                    // Test if session is still valid by making a simple request
+                    const response = await fetch(`${this.baseUrl}/chat`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            session_id: this.sessionId,
+                            query: 'test',
+                            tool_use: false,
+                            model: this.currentModel
+                        })
+                    });
+
+                    if (response.ok) {
+                        this.showChatInterface();
+                    } else {
+                        // Session invalid, clear storage and show login
+                        localStorage.removeItem('chatbot_data');
+                        this.sessionId = '';
+                    }
+                } catch (error) {
+                    // Connection error, clear session
+                    localStorage.removeItem('chatbot_data');
+                    this.sessionId = '';
+                }
+            }
+        }
+
+        // Initialize the chatbot when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new ChatBot();
+        });
+    </script>
+</body>
+</html>

server.py

@@ -0,0 +1,130 @@
+from typing import List, Optional
+import requests
+import json
+from mcp.server.fastmcp import FastMCP
+
+mcp = FastMCP("organizedprogrammers-mcp-server")
+
+@mcp.tool()
+def search_arxiv_papers(keyword: str, limit: int = 5) -> str:
+    """
+    Search papers from arXiv database with specified keywords [optional: a limit of papers the user wants]
+    Args: keyword: string, [optional: limit: integer, set limit to 5 if not specified]
+    """
+    response = requests.post("https://om4r932-arxiv.hf.space/search", headers={
+        "Content-Type": "application/json"
+    }, data=json.dumps({
+        "keyword": keyword,
+        "limit": limit
+    }), verify=False)
+
+    if response.status_code != 200:
+        return "Unable to find papers: error on post()"
+    
+    responseJson = response.json()
+
+    if responseJson.get("error") or not isinstance(responseJson['message'], dict):
+        return f"Unable to find papers: error on API -> {responseJson['message']}"
+
+    if len(responseJson["message"].keys()) == 0:
+        return "No papers has been found"
+    
+    return "\n".join([f"arXiv n°{paper_id} - {paper_meta['title']} by {paper_meta['authors']} : {paper_meta['abstract']}" for paper_id, paper_meta in responseJson['message'].items()])
+
+@mcp.tool()
+def locate_3gpp_document(doc_id: str) -> str:
+    """
+    Find 3GPP document location with the document's ID
+    Args: doc_id: string
+    """
+    response = requests.post("https://organizedprogrammers-3gppdocfinder.hf.space/find", headers={
+        "Content-Type": "application/json"
+    }, data=json.dumps({
+        "doc_id": doc_id
+    }), verify=False)
+
+    if response.status_code != 200:
+        return f"Unable to find document: {response.status_code} - {response.content}"
+    
+    responseJson = response.json()
+
+    if responseJson.get("detail"):
+        return responseJson['detail']
+    
+    return f"Document ID {responseJson['doc_id']} version {responseJson['version']} is downloadable via this link: {responseJson['url']}.\n{responseJson['scope']}"
+
+@mcp.tool()
+def locate_multiple_3gpp_documents(doc_ids: List[str]) -> str:
+    """
+    Find 3GPP document location with the document's ID
+    Args: doc_id: string
+    """
+    response = requests.post("https://organizedprogrammers-3gppdocfinder.hf.space/batch", headers={
+        "Content-Type": "application/json"
+    }, data=json.dumps({
+        "doc_ids": doc_ids
+    }), verify=False)
+
+    if response.status_code != 200:
+        return f"Unable to find document: {response.status_code} - {response.content}"
+    
+    responseJson = response.json()
+
+    if responseJson.get("detail"):
+        return responseJson['detail']
+    
+    return "\n".join([f"The document {doc_id} is downloadable via this link: {url}" for doc_id, url in responseJson['results']] + [f"We can't find document {doc_id}" for doc_id in responseJson['missing']])
+
+@mcp.tool()
+def locate_etsi_specifications(doc_id: str) -> str:
+    """
+    Find ETSI document location with the document's ID (starts with SET and SCP)
+    Args: doc_id: string
+    """
+    response = requests.post("https://organizedprogrammers-etsidocfinder.hf.space/find", headers={
+        "Content-Type": "application/json"
+    }, data=json.dumps({
+        "doc_id": doc_id
+    }), verify=False)
+
+    if response.status_code != 200:
+        return f"Unable to find document: {response.status_code} - {response.content}"
+    
+    responseJson = response.json()
+
+    if responseJson.get("detail"):
+        return responseJson['detail']
+    
+    return f"Document ID {responseJson['doc_id']} is downloadable via this link: {responseJson['url']}"
+
+@mcp.tool()
+def search_3gpp_specification(keywords: str, threshold: int, release: Optional[str] = "", working_group: Optional[str] = "", spec_type: Optional[str] = "") -> str:
+    """
+    Search 3GPP specifications with specified keywords and filters using BM25
+    Args: keywords: string, threshold: integer 0-100 [default 60], release: optional filter, string [only the number Rel-19 -> '19'], working_group: optional filter, string [options: C1,C2,...,C6,CP or S1,S2,...,S6,SP], spec_type: optional filter, string [either TS (Technical Specification) or TR (Technical Report)]
+    For each non-used optional filters, leave a empty string
+    """
+    body = {"keywords": keywords, "threshold": threshold}
+    if release:
+        body['release'] = release
+    if working_group:
+        body['working_group'] = working_group
+    if spec_type:
+        body['spec_type'] = spec_type
+
+    response = requests.post("https://organizedprogrammers-3gppdocfinder.hf.space/search-spec/experimental", headers={
+        "Content-Type": "application/json"
+    }, data=json.dumps(body), verify=False)
+
+    if response.status_code != 200:
+        return f"Unable to find document: {response.status_code} - {response.content}"
+    
+    responseJson = response.json()
+
+    if responseJson.get("detail"):
+        return responseJson['detail']
+    
+    return "\n--\n".join([f"3GPP {spec['type']} {spec['id']} version {spec['version']} - {spec['title']} is downloadable via this link: {spec['url']}\n{spec['scope']}" for spec in responseJson['results']])
+
+if __name__ == "__main__":
+    mcp.run(transport="stdio")