Final version

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.10.6
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --trusted-host pypi.org --trusted-host pypi.python.org --trusted-host files.pythonhosted.org --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,12 +1,12 @@
 ---
 title: MCPSynapseChat
-emoji: 👀
-colorFrom: red
-colorTo: gray
+emoji: 🗿
+colorFrom: gray
+colorTo: red
 sdk: docker
 pinned: false
 license: gpl-3.0
-short_description: A MCP chatbot with Synapse LLM (intranet provider)
+short_description: A MCP chabot that communicates with Synapse LLM
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,195 @@
+import traceback
+from fastapi import FastAPI, WebSocket
+from fastapi.responses import FileResponse
+import asyncio
+from fastapi.staticfiles import StaticFiles
+from contextlib import asynccontextmanager
+import json
+from fastapi import HTTPException
+from pydantic import BaseModel
+from fastapi.middleware.cors import CORSMiddleware
+from typing import List, Optional, Any, Dict
+from mcp_client import MCPClient
+
+mcp = MCPClient()
+
+class ChatMessage(BaseModel):
+    role: str
+    content: str
+
+class ChatCompletionRequest(BaseModel):
+    model: str = "gemini-2.5-pro-exp-03-25"
+    messages: List[ChatMessage]
+    tools: Optional[list] = []
+    max_tokens: Optional[int] = None
+
+class ChatCompletionResponseChoice(BaseModel):
+    index: int = 0
+    message: ChatMessage
+    finish_reason: str = "stop"
+
+class ChatCompletionResponse(BaseModel):
+    id: str
+    object: str = "chat.completion"
+    created: int
+    model: str
+    choices: List[ChatCompletionResponseChoice]
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    try:
+        await mcp.connect()
+        print("Connexion au MCP réussi !")
+    except Exception as e:
+        print("Warning ! : Connexion au MCP impossible\n", str(e))
+    
+    yield
+
+    if mcp.session:
+        try:
+            await mcp.exit_stack.aclose()
+            print("MCP déconnecté !")
+        except Exception as e:
+            print("Erreur à la fermeture du MCP\n", str(e))
+
+app = FastAPI(lifespan=lifespan)
+app.mount("/static", StaticFiles(directory="static"), name="static")
+app.add_middleware(
+    CORSMiddleware,
+    allow_credentials=True,
+    allow_headers=["*"],
+    allow_methods=["*"],
+    allow_origins=["*"]
+)
+
+class ConnectionManager:
+    def __init__(self):
+        self.active_connections = {}
+        self.response_queues = {}
+
+    async def connect(self, websocket: WebSocket):
+        await websocket.accept()
+        self.active_connections[websocket] = None
+    
+    def set_source(self, websocket: WebSocket, source: str):
+        if websocket in self.active_connections:
+            self.active_connections[websocket] = source
+    
+    async def send_to_dest(self, destination: str, message: str):
+        for ws, src in self.active_connections.items():
+            if src == destination:
+                await ws.send_text(message)
+    
+    def remove(self, websocket: WebSocket):
+        if websocket in self.active_connections:
+            del self.active_connections[websocket]
+    
+    async def wait_for_response(self, request_id: str, timeout: int = 30):
+        queue = asyncio.Queue(maxsize=1)
+        self.response_queues[request_id] = queue
+        try:
+            return await asyncio.wait_for(queue.get(), timeout=timeout)
+        finally:
+            self.response_queues.pop(request_id, None)
+
+manager = ConnectionManager()
+
+@app.get("/")
+async def index_page():
+    return FileResponse("index.html")
+
+# @app.post("/v1/chat/completions", response_model=ChatCompletionResponse)
+# async def chat_completions(request: ChatCompletionRequest):
+#     request_id = str(uuid.uuid4())
+#     proxy_ws = next((ws for ws, src in manager.active_connections.items() if src == "proxy"), None)
+#     if not proxy_ws:
+#         raise HTTPException(503, "Proxy client not connected !")
+#     user_msg = next((m for m in request.messages if m.role == "user"), None)
+#     if not user_msg:
+#         raise HTTPException(400, "No user message found !")
+
+#     proxy_msg = {
+#         "request_id": request_id,
+#         "content": user_msg.content,
+#         "source": "api",
+#         "destination": "proxy",
+#         "model": request.model,
+#         "tools": request.tools,
+#         "max_tokens": request.max_tokens
+#     }
+
+#     await proxy_ws.send_text(json.dumps(proxy_msg))
+
+#     try:
+#         response_content = await manager.wait_for_response(request_id)
+#     except asyncio.TimeoutError:
+#         raise HTTPException(504, "Proxy response timeout")
+#     return ChatCompletionResponse(
+#         id=request_id,
+#         created=int(time.time()),
+#         model=request.model,
+#         choices=[ChatCompletionResponseChoice(
+#             message=ChatMessage(role="assistant", content=response_content)
+#         )]
+#     )
+
+class ToolCallRequest(BaseModel):
+    tool_calls: List[Dict[str, Any]]
+
+@app.get("/list-tools", response_model=List[Dict[str, Any]])
+async def list_tools():
+    if not mcp.session:
+        try:
+            await mcp.connect()
+        except Exception as e:
+            raise HTTPException(status_code=503, detail=f"Connexion au MCP impossible !\n{str(e)}")
+    try:
+        tools = await mcp.list_tools()
+        return tools
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Erreur lors de la récupération des outils: {str(e)}")
+
+@app.post("/call-tools")
+async def call_tools(request: ToolCallRequest):
+    if not mcp.session:
+        try:
+            await mcp.connect()
+        except Exception as e:
+            raise HTTPException(status_code=503, detail=f"Erreur lors de la récupération des outils: {str(e)}")
+    try:
+        result_tools = []
+        for tool_call in request.tool_calls:
+            print(tool_call)
+            tool = tool_call["function"]
+            tool_name = tool["name"]
+            tool_args = tool["arguments"]
+            result = await mcp.session.call_tool(tool_name, json.loads(tool_args))
+            result_tools.append({
+                "role": "user",
+                "content": result.content[0].text
+            })
+        print("Finished !")
+        return result_tools
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Erreur lors de l'appel des outils: {str(e)}")
+
+
+
+
+@app.websocket("/ws")
+async def websocket_endpoint(websocket: WebSocket):
+    await manager.connect(websocket)
+    try:
+        data = await websocket.receive_text()
+        init_msg = json.loads(data)
+        if 'source' in init_msg:
+            manager.set_source(websocket, init_msg['source'])
+            print(init_msg['source'])
+        
+        while True:
+            message = await websocket.receive_text()
+            msg_data = json.loads(message)
+            await manager.send_to_dest(msg_data["destination"], message)
+    except Exception as e:
+        manager.remove(websocket)
+        await websocket.close()

index.html

@@ -0,0 +1,361 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Chat System with LLM Proxy</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+        }
+
+        .container {
+            display: flex;
+            gap: 20px;
+            height: 90vh;
+        }
+
+        .panel {
+            flex: 1;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        h2 {
+            margin-top: 0;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 10px;
+        }
+
+        .chat-container {
+            height: 300px;
+            overflow-y: scroll;
+            border: 1px solid #eee;
+            padding: 10px;
+            margin-bottom: 10px;
+            flex: 1;
+        }
+
+        .input-container {
+            display: flex;
+            gap: 10px;
+        }
+
+        input[type="text"],
+        input[type="password"] {
+            flex: 1;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        button {
+            padding: 8px 15px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: #45a049;
+        }
+
+        .message {
+            margin-bottom: 10px;
+            padding: 8px;
+            border-radius: 8px;
+        }
+
+        .user-message {
+            background-color: #e1f5fe;
+            align-self: flex-end;
+        }
+
+        .assistant-message {
+            background-color: #f1f1f1;
+        }
+
+        .connection-status {
+            color: #666;
+            font-size: 0.9em;
+            margin-top: 10px;
+        }
+
+        .message-entry {
+            margin: 5px 0;
+            padding: 8px;
+            border-radius: 8px;
+            background: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            font-family: monospace;
+        }
+
+        .incoming {
+            border-left: 4px solid #4CAF50;
+        }
+
+        .outgoing {
+            border-left: 4px solid #2196F3;
+        }
+
+        .system {
+            border-left: 4px solid #9C27B0;
+        }
+
+        .error {
+            border-left: 4px solid #F44336;
+        }
+
+        .message-header {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.8em;
+            color: #666;
+            margin-bottom: 4px;
+        }
+
+        .tabs {
+            display: flex;
+            margin-bottom: 15px;
+        }
+
+        .tab {
+            padding: 10px 20px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px 4px 0 0;
+            margin-right: 5px;
+        }
+
+        .tab.active {
+            background-color: #f1f1f1;
+            border-bottom: none;
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="tabs">
+        <div class="tab active" onclick="switchTab('chat')">Chat Client</div>
+        <div class="tab" onclick="switchTab('proxy')">Proxy Configuration</div>
+    </div>
+
+    <div class="container">
+        <!-- Chat Client Panel -->
+        <div id="chat-tab" class="tab-content active panel">
+            <h2>Chat Client</h2>
+            <div id="chat" class="chat-container"></div>
+            <div class="input-container">
+                <input id="msg" type="text" placeholder="Type your message here...">
+                <button onclick="sendMessage()">Send</button>
+            </div>
+            <div id="client-status" class="connection-status">Connecting...</div>
+        </div>
+
+        <!-- Proxy Configuration Panel -->
+        <div id="proxy-tab" class="tab-content panel">
+            <h2>LLM Proxy Configuration</h2>
+            <div style="margin-bottom: 20px;">
+                <input type="password" id="apiKey" placeholder="Enter API Key" style="width: 100%;">
+                <button onclick="initializeClient()" style="margin-top: 10px;">Fetch Models</button>
+            </div>
+            <select id="modelSelect" style="width: 100%; margin-bottom: 20px;"></select>
+            <div id="systemStatus" class="connection-status"></div>
+
+            <h3>Message Flow</h3>
+            <div id="messageFlow"
+                style="flex: 1; border: 1px solid #eee; padding: 10px; overflow-y: auto; background: #f9f9f9;">
+                <div style="text-align: center; color: #999; margin-bottom: 10px;">Message Flow</div>
+            </div>
+            <div id="detailedStatus" class="connection-status"></div>
+        </div>
+    </div>
+
+    <script>
+        function showStatus(message, type = 'info') {
+            const statusDiv = document.getElementById('systemStatus');
+            statusDiv.innerHTML = `<div style="color: ${type === 'error' ? '#F44336' : '#4CAF50'}">${message}</div>`;
+            addMessageEntry('system', 'system', 'proxy', message);
+        }
+        // Tab switching functionality
+        function switchTab(tabName) {
+            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
+            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+
+            document.querySelector(`.tab[onclick="switchTab('${tabName}')"]`).classList.add('active');
+            document.getElementById(`${tabName}-tab`).classList.add('active');
+        }
+
+        // Client WebSocket
+        const clientWs = new WebSocket('wss://' + window.location.host + '/ws');
+        clientWs.onopen = () => {
+            clientWs.send(JSON.stringify({
+                source: 'user'
+            }));
+            document.getElementById('client-status').textContent = 'Connected';
+        };
+        clientWs.onclose = () => {
+            document.getElementById('client-status').textContent = 'Disconnected';
+        };
+        clientWs.onmessage = e => {
+            const msg = JSON.parse(e.data);
+            const chatDiv = document.getElementById('chat');
+            chatDiv.innerHTML += `<div class="message assistant-message">${msg.content}</div>`;
+            chatDiv.scrollTop = chatDiv.scrollHeight;
+        };
+
+        function sendMessage() {
+            const input = document.getElementById('msg');
+            const content = input.value.trim();
+            if (content) {
+                const message = {
+                    content: content,
+                    source: 'user',
+                    destination: 'proxy',
+                    request_id: generateUUID()
+                };
+                clientWs.send(JSON.stringify(message));
+
+                const chatDiv = document.getElementById('chat');
+                chatDiv.innerHTML += `<div class="message user-message">${content}</div>`;
+                chatDiv.scrollTop = chatDiv.scrollHeight;
+
+                input.value = '';
+            }
+        }
+        document.getElementById('msg').addEventListener('keypress', function (e) {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+
+        // Proxy WebSocket
+        let proxyWs = new WebSocket('wss://' + window.location.host + '/ws');
+        proxyWs.onopen = () => {
+            proxyWs.send(JSON.stringify({
+                source: 'proxy'
+            }));
+            showStatus('Connected to server');
+        };
+        proxyWs.onclose = () => {
+            showStatus('Disconnected from server', 'error');
+        };
+        proxyWs.onmessage = async e => {
+            const msg = JSON.parse(e.data);
+
+            // Display incoming messages
+            if (msg.destination === 'proxy') {
+                let tools = null
+                addMessageEntry('incoming', msg.source, 'proxy', msg.content);
+                document.getElementById('detailedStatus').textContent = `Processing ${msg.source} request...`;
+                
+                try {
+                    const response = await fetch("/list-tools");
+                    tools = await response.json();
+                } catch (error) {
+                    console.log(`Failed to fetch tools : ${error}`);
+                    tools = null;
+                }
+
+                try {
+                    if (!agentClient) {
+                        throw new Error(
+                            "LLM client not initialized. Please enter API key and fetch models first.");
+                    }
+
+                    if (!currentModel) {
+                        throw new Error("No model selected. Please select a model first.");
+                    }
+
+                    let llmResponse = await agentClient.call(
+                        currentModel,
+                        msg.content,
+                        conversationHistory,
+                        tools
+                    );
+
+                    conversationHistory = llmResponse.history
+
+                    // Display outgoing response
+                    addMessageEntry('outgoing', 'proxy', msg.source, llmResponse.response);
+
+                    if(llmResponse.response.tool_calls != null){
+                        try {
+                            console.log("Calling ....")
+                            const toolCalls = await fetch("/call-tools", {
+                                method: "POST",
+                                headers: {
+                                    "Content-Type": "application/json"
+                                },
+                                body: JSON.stringify({tool_calls: llmResponse.response.tool_calls})
+                            })
+                            const toolCallsJson = await toolCalls.json()
+                            console.log("Succeed !")
+                            for(const toolCall of toolCallsJson){
+                                conversationHistory.push(toolCall)
+                            }
+
+                            llmResponse = await agentClient.call(
+                                currentModel,
+                                null,
+                                conversationHistory,
+                                null
+                            )
+
+                            conversationHistory = llmResponse.history
+                        } catch (error) {
+                            throw new Error("Error on calling tools " + error)
+                        }
+                    }
+
+                    const responseMsg = {
+                        request_id: msg.request_id,
+                        content: llmResponse.response.content,
+                        source: 'proxy',
+                        destination: msg.source
+                    };
+                    proxyWs.send(JSON.stringify(responseMsg));
+
+                    document.getElementById('detailedStatus').textContent = `Response sent to ${msg.source}`;
+                } catch (error) {
+                    addMessageEntry('error', 'system', 'proxy', `Error: ${error.message}`);
+                    const errorResponse = {
+                        request_id: msg.request_id,
+                        content: `Error: ${error.message}`,
+                        source: 'proxy',
+                        destination: msg.source
+                    };
+                    proxyWs.send(JSON.stringify(errorResponse));
+                }
+            }
+        };
+
+        function generateUUID() {
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = Math.random() * 16 | 0,
+                    v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            });
+        }
+    </script>
+    <script src="/static/proxy_llm.js"></script>
+</body>
+
+</html>

mcp_client.py

@@ -0,0 +1,37 @@
+from typing import Optional
+from contextlib import AsyncExitStack
+
+from mcp import ClientSession, StdioServerParameters
+from mcp.client.stdio import stdio_client
+from websockets import ClientConnection
+
+
+class MCPClient:
+    def __init__(self):
+        self.session: Optional[ClientSession] = None
+        self.exit_stack = AsyncExitStack()
+        self.stdio = None
+        self.write = None
+        self.ws: Optional[ClientConnection] = None
+
+    async def connect(self):
+        server_params = StdioServerParameters(
+            command="uv",
+            args=["--directory", "/app", "run", "server.py"],
+            env=None
+        )
+
+        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()
+
+    async def list_tools(self):
+        tools = await self.session.list_tools()
+        tools_openai = [{
+                    "name": tool.name,
+                    "description": tool.description,
+                    "parameters": tool.inputSchema
+                } for tool in tools.tools]
+        return tools_openai

requirements.txt

@@ -0,0 +1,6 @@
+uvicorn[standard]
+fastapi
+mcp[cli]
+httpx
+websockets
+uv

server.py

@@ -0,0 +1,143 @@
+from typing import Any, Literal
+import httpx
+import traceback
+from mcp.server.fastmcp import FastMCP
+
+# Initialize FastMCP server
+mcp = FastMCP("arxiv-omar")
+
+# Constants
+CUSTOM_ARXIV_API_BASE = "https://om4r932-arxiv.hf.space"
+DDG_API_BASE = "https://ychkhan-ptt-endpoints.hf.space"
+API_3GPP_BASE = "https://organizedprogrammers-3gppdocfinder.hf.space"
+
+# Helpers
+async def make_request(url: str, data: dict = None) -> dict[str, Any] | None:
+    if data is None:
+        return None
+    headers = {
+        "Accept": "application/json"
+    }
+    async with httpx.AsyncClient(verify=False) as client:
+        try:
+            response = await client.post(url, headers=headers, json=data)
+            print(response)
+            response.raise_for_status()
+            return response.json()
+        except Exception as e:
+            traceback.print_exception(e)
+            return None
+        
+def format_search(pub_id: str, content: dict) -> str:
+    return f"""
+        arXiv publication ID : {pub_id}
+        Title : {content["title"]}
+        Authors : {content["authors"]}
+        Release Date : {content["date"]}
+        Abstract : {content["abstract"]}
+        PDF link : {content["pdf"]}
+    """
+
+def format_extract(message: dict) -> str:
+    return f"""
+        Title of PDF : {message.get("title", "No title has been found")}
+        Text : {message.get("text", "No text !")}
+    """
+
+def format_result_search(page: dict) -> str:
+    return f"""
+        Title : {page.get("title", "No titles found !")}
+        Little description : {page.get("body", "No description")}
+        PDF url : {page.get("url", None)}
+    """
+
+def format_3gpp_doc_result(result: dict, release: int = None) -> str:
+    return f"""
+        Document ID : {result.get("doc_id")}
+        Release version : {release if release is not None else "Not specified"}
+        URL : {result.get("url", "No URL found !")}
+    """
+
+# Tools
+@mcp.tool()
+async def get_publications(keyword: str, limit: int = 15) -> str:
+    """
+    Get arXiv publications based on keywords and limit of documents
+
+    Args:
+        keyword: Keywords separated by spaces
+        limit: Numbers of maximum publications returned (by default, 15)
+    """
+    url = f"{CUSTOM_ARXIV_API_BASE}/search"
+    data = await make_request(url, data={'keyword': keyword, 'limit': limit})
+    if data["error"]:
+        return data["message"]
+    if not data:
+        return "Unable to fetch publications"
+    if len(data["message"].keys()) == 0:
+        return "No publications found"
+    
+    publications = [format_search(pub_id, content) for (pub_id, content) in data["message"].items()]
+    return "\n--\n".join(publications)
+
+@mcp.tool()
+async def web_pdf_search(query: str) -> str:
+    """
+    Search on the Web (with DuckDuckGo search engine) to get PDF documents based on the keywords
+
+    Args:
+        query: Keywords to search documents on the Web
+    """
+    
+    url = f"{DDG_API_BASE}/search"
+    data = await make_request(url, data={"query": query})
+    if not data:
+        return "Unable to fetch results"
+    if len(data["results"]) == 0:
+        return "No results found"
+    
+    results = [format_result_search(result) for result in data["results"]]
+    return "\n--\n".join(results)
+
+@mcp.tool()
+async def get_3gpp_doc_url_byID(doc_id: str, release: int = None):
+    """
+    Get 3GPP Technical Document URL by their document ID.
+
+    Args:
+        doc_id: Document ID (i.e. C4-125411, SP-551242, 31.101)
+        release : The release version of the document (by default, None)
+    """
+    url = f"{API_3GPP_BASE}/find"
+    data = await make_request(url, data={"doc_id": doc_id, "release": release})
+    if not data:
+        return "Unable to search document in 3GPP"
+
+    return format_3gpp_doc_result(data, release)
+
+@mcp.tool()
+async def get_pdf_text(pdf_url: str, limit_page: int = -1) -> str:
+    """
+    Extract the text from the URL pointing to a PDF file
+
+    Args:
+        pdf_url: URL to a PDF document
+        limit_page: How many pages the user wants to extract the content (default: -1 for all pages)
+    """
+
+    url = f"{CUSTOM_ARXIV_API_BASE}/extract_pdf/url"
+    data = {"url": pdf_url}
+    if limit_page != -1:
+        data["page_num"] = limit_page
+    data = await make_request(url, data=data)
+    if data["error"]:
+        return data["message"]
+    if not data:
+        return "Unable to extract PDF text"
+    if len(data["message"].keys()) == 0:
+        return "No text can be extracted from this PDF"
+    
+    return format_extract(data["message"])
+
+if __name__ == "__main__":
+    mcp.run(transport="stdio")

static/proxy_llm.js

@@ -0,0 +1,262 @@
+// LLM Client Implementation
+let agentClient = null;
+let currentModel = null;
+let conversationHistory = [];
+
+function initializeClient() {
+    const apiKey = document.getElementById('apiKey').value;
+    if (!apiKey) {
+        showStatus("Please enter an API key", 'error');
+        return;
+    }
+    
+    agentClient = new ConversationalAgentClient(apiKey);
+    agentClient.populateLLMModels()
+        .then(models => {
+            agentClient.updateModelSelect('modelSelect', models.find(m => m.includes("gemini-2.5")));
+            currentModel = document.getElementById('modelSelect').value;
+            showStatus(`Loaded ${models.length} models. Default: ${currentModel}`);
+        })
+        .catch(error => {
+            showStatus(`Error fetching models: ${error.message}`, 'error');
+        });
+}
+
+function addMessageEntry(direction, source, destination, content) {
+    const flowDiv = document.getElementById('messageFlow');
+    const timestamp = new Date().toLocaleTimeString();
+    
+    const entry = document.createElement('div');
+    entry.className = `message-entry ${direction}`;
+    entry.innerHTML = `
+        <div class="message-header">
+            <span>${source} → ${destination}</span>
+            <span>${timestamp}</span>
+        </div>
+        <div style="white-space: pre-wrap;">${content}</div>
+    `;
+    
+    flowDiv.appendChild(entry);
+    flowDiv.scrollTop = flowDiv.scrollHeight;
+}
+
+// LLM Client Classes
+class BaseAgentClient {
+    constructor(apiKey, apiUrl = 'https://llm.synapse.thalescloud.io/v1/') {
+        this.apiKey = apiKey;
+        this.apiUrl = apiUrl;
+        this.models = [];
+        this.tools = [];
+        this.maxCallsPerMinute = 4;
+        this.callTimestamps = [];
+    }
+
+    setTools(tools) {
+        this.tools = tools;
+    }
+
+    async fetchLLMModels() {
+        if (!this.apiKey) throw new Error("API Key is not set.");
+        console.log("Fetching models from:", this.apiUrl + 'models');
+        
+        try {
+            const response = await fetch(this.apiUrl + 'models', {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${this.apiKey}`
+                }
+            });
+            
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error("Fetch models error response:", errorText);
+                throw new Error(`HTTP error! Status: ${response.status} - ${errorText}`);
+            }
+            
+            const data = await response.json();
+            console.log("Models fetched:", data.data);
+            
+            const filteredModels = data.data
+                .map(model => model.id)
+                .filter(id => !id.toLowerCase().includes('embed') && !id.toLowerCase().includes('image'));
+            
+            return filteredModels;
+        } catch (error) {
+            console.error('Error fetching LLM models:', error);
+            throw new Error(`Failed to fetch models: ${error.message}`);
+        }
+    }
+    
+    async populateLLMModels(defaultModel = "gemini-2.5-pro-exp-03-25") {
+        try {
+            const modelList = await this.fetchLLMModels();
+            
+            const sortedModels = modelList.sort((a, b) => {
+                if (a === defaultModel) return -1;
+                if (b === defaultModel) return 1;
+                return a.localeCompare(b);
+            });
+            
+            const finalModels = [];
+            
+            if (sortedModels.includes(defaultModel)) {
+                finalModels.push(defaultModel);
+                sortedModels.forEach(model => {
+                    if (model !== defaultModel) finalModels.push(model);
+                });
+            } else {
+                finalModels.push(defaultModel);
+                finalModels.push(...sortedModels);
+            }
+            
+            this.models = finalModels;
+            console.log("Populated models:", this.models);
+            return this.models;
+        } catch (error) {
+            console.error("Error populating models:", error);
+            this.models = [defaultModel];
+            throw error;
+        }
+    }
+    
+    updateModelSelect(elementId = 'modelSelect', selectedModel = null) {
+        const select = document.getElementById(elementId);
+        if (!select) {
+            console.warn(`Element ID ${elementId} not found.`);
+            return;
+        }
+        
+        const currentSelection = selectedModel || select.value || this.models[0];
+        select.innerHTML = '';
+        
+        if (this.models.length === 0 || (this.models.length === 1 && this.models[0] === "gemini-2.5-pro-exp-03-25" && !this.apiKey)) {
+            const option = document.createElement('option');
+            option.value = "";
+            option.textContent = "-- Fetch models first --";
+            option.disabled = true;
+            select.appendChild(option);
+            return;
+        }
+        
+        this.models.forEach(model => {
+            const option = document.createElement('option');
+            option.value = model;
+            option.textContent = model;
+            if (model === currentSelection) option.selected = true;
+            select.appendChild(option);
+        });
+        
+        if (!select.value && this.models.length > 0) select.value = this.models[0];
+    }
+    
+    async rateLimitWait() {
+        const currentTime = Date.now();
+        this.callTimestamps = this.callTimestamps.filter(ts => currentTime - ts <= 60000);
+        
+        if (this.callTimestamps.length >= this.maxCallsPerMinute) {
+            const waitTime = 60000 - (currentTime - this.callTimestamps[0]);
+            const waitSeconds = Math.ceil(waitTime / 1000);
+            const waitMessage = `Rate limit (${this.maxCallsPerMinute}/min) reached. Waiting ${waitSeconds}s...`;
+            
+            console.log(waitMessage);
+            showStatus(waitMessage, 'warn');
+            
+            await new Promise(resolve => setTimeout(resolve, waitTime + 100));
+            
+            showStatus('Resuming after rate limit wait...', 'info');
+            this.callTimestamps = this.callTimestamps.filter(ts => Date.now() - ts <= 60000);
+        }
+    }
+    
+    async callAgent(model, messages, tools = null) {
+        await this.rateLimitWait();
+        const startTime = Date.now();
+        console.log("Calling Agent:", model);
+        
+        let body = {
+            model: model,
+            messages: messages
+        }
+
+        body.tools = tools;
+
+        try {
+            const response = await fetch(this.apiUrl + 'chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.apiKey}`
+                },
+                body: JSON.stringify(body)
+            });
+            
+            const endTime = Date.now();
+            this.callTimestamps.push(endTime);
+            console.log(`API call took ${endTime - startTime} ms`);
+            
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({ error: { message: response.statusText } }));
+                console.error("API Error:", errorData);
+                throw new Error(errorData.error?.message || `API failed: ${response.status}`);
+            }
+            
+            const data = await response.json();
+            if (!data.choices || !data.choices[0]?.message) throw new Error("Invalid API response structure");
+            
+            console.log("API Response received.");
+            return data.choices[0].message;
+        } catch (error) {
+            this.callTimestamps.push(Date.now());
+            console.error('Error calling agent:', error);
+            throw error;
+        }
+    }
+    
+    setMaxCallsPerMinute(value) {
+        const parsedValue = parseInt(value, 10);
+        if (!isNaN(parsedValue) && parsedValue > 0) {
+            console.log(`Max calls/min set to: ${parsedValue}`);
+            this.maxCallsPerMinute = parsedValue;
+            return true;
+        }
+        console.warn(`Invalid max calls/min: ${value}`);
+        return false;
+    }
+}
+
+class ConversationalAgentClient extends BaseAgentClient {
+    constructor(apiKey, apiUrl = 'https://llm.synapse.thalescloud.io/v1/') {
+        super(apiKey, apiUrl);
+    }
+    
+    async call(model, userPrompt, conversationHistory = [], tools) {
+        const messages = userPrompt ? [
+            ...conversationHistory,
+            { role: 'user', content: userPrompt }
+        ] : [
+            ...conversationHistory
+        ];
+        
+        const assistantResponse = await super.callAgent(model, messages, tools);
+        
+        const updatedHistory = userPrompt ? [
+            ...conversationHistory,
+            { role: 'user', content: userPrompt },
+            { role: assistantResponse.role, content: assistantResponse.content }
+        ] : [
+            ...conversationHistory,
+            { role: assistantResponse.role, content: assistantResponse.content }
+        ];
+        
+        return { 
+            response: assistantResponse, 
+            history: updatedHistory 
+        };
+    }
+}
+
+// Model selection change handler
+document.getElementById('modelSelect').addEventListener('change', function() {
+    currentModel = this.value;
+    showStatus(`Model changed to: ${currentModel}`);
+});