"use client"; import { ApiOutlined, ArrowUpOutlined, ClearOutlined, CodeOutlined, DatabaseOutlined, DeleteOutlined, FilePdfOutlined, InfoCircleOutlined, KeyOutlined, LinkOutlined, LoadingOutlined, PictureOutlined, RobotOutlined, SafetyOutlined, SettingOutlined, SoundOutlined, TagsOutlined, ToolOutlined, UserOutlined, } from "@ant-design/icons"; import { Card, Text, TextInput, Title, Button as TremorButton } from "@tremor/react"; import { Button, Input, Modal, Popover, Select, Spin, Tooltip, Typography, Upload } from "antd"; import React, { useEffect, useRef, useState } from "react"; import ReactMarkdown from "react-markdown"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { coy } from "react-syntax-highlighter/dist/esm/styles/prism"; import { v4 as uuidv4 } from "uuid"; import { truncateString } from "../../../utils/textUtils"; import GuardrailSelector from "../../guardrails/GuardrailSelector"; import PolicySelector from "../../policies/PolicySelector"; import MCPToolArgumentsForm, { MCPToolArgumentsFormRef } from "../../mcp_tools/MCPToolArgumentsForm"; import { MCPServer } from "../../mcp_tools/types"; import { ByokCredentialModal } from "../../mcp_tools/ByokCredentialModal"; import NotificationsManager from "../../molecules/notifications_manager"; import { callMCPTool, fetchMCPServers, listMCPTools } from "../../networking"; import TagSelector from "../../tag_management/TagSelector"; import VectorStoreSelector from "../../vector_store_management/VectorStoreSelector"; import { makeA2ASendMessageRequest } from "../llm_calls/a2a_send_message"; import { makeAnthropicMessagesRequest } from "../llm_calls/anthropic_messages"; import { makeOpenAIAudioSpeechRequest } from "../llm_calls/audio_speech"; import { makeOpenAIAudioTranscriptionRequest } from "../llm_calls/audio_transcriptions"; import { makeOpenAIChatCompletionRequest } from "../llm_calls/chat_completion"; import { makeOpenAIEmbeddingsRequest } from "../llm_calls/embeddings_api"; import { Agent, fetchAvailableAgents } from "../llm_calls/fetch_agents"; import { fetchAvailableModels, ModelGroup } from "../llm_calls/fetch_models"; import { makeOpenAIImageEditsRequest } from "../llm_calls/image_edits"; import { makeOpenAIImageGenerationRequest } from "../llm_calls/image_generation"; import { makeOpenAIResponsesRequest } from "../llm_calls/responses_api"; import A2AMetrics from "./A2AMetrics"; import AdditionalModelSettings from "./AdditionalModelSettings"; import AudioRenderer from "./AudioRenderer"; import { OPEN_AI_VOICE_SELECT_OPTIONS, OpenAIVoice } from "./chatConstants"; import ChatImageRenderer from "./ChatImageRenderer"; import ChatImageUpload from "./ChatImageUpload"; import { createChatDisplayMessage, createChatMultimodalMessage } from "./ChatImageUtils"; import CodeInterpreterOutput from "./CodeInterpreterOutput"; import CodeInterpreterTool from "./CodeInterpreterTool"; import { generateCodeSnippet } from "./CodeSnippets"; import EndpointSelector from "./EndpointSelector"; import MCPEventsDisplay, { MCPEvent } from "./MCPEventsDisplay"; import { EndpointType, getEndpointType } from "./mode_endpoint_mapping"; import ReasoningContent from "./ReasoningContent"; import ResponseMetrics, { TokenUsage } from "./ResponseMetrics"; import ResponsesImageRenderer from "./ResponsesImageRenderer"; import ResponsesImageUpload from "./ResponsesImageUpload"; import { createDisplayMessage, createMultimodalMessage } from "./ResponsesImageUtils"; import { SearchResultsDisplay } from "./SearchResultsDisplay"; import SessionManagement from "./SessionManagement"; import RealtimePlayground from "./RealtimePlayground"; import { A2ATaskMetadata, MessageType } from "./types"; import { useCodeInterpreter } from "./useCodeInterpreter"; const { TextArea } = Input; const { Dragger } = Upload; interface ChatUIProps { accessToken: string | null; token: string | null; userRole: string | null; userID: string | null; disabledPersonalKeyCreation: boolean; proxySettings?: { PROXY_BASE_URL?: string; LITELLM_UI_API_DOC_BASE_URL?: string | null; }; /** When true, hide configuration sidebar and use fixedModel only (e.g. embedded in Agent Builder). */ simplified?: boolean; /** When simplified is true, use this as the model and do not show model selector. */ fixedModel?: string; } const MCP_SUPPORTED_ENDPOINTS = new Set([ EndpointType.CHAT, EndpointType.RESPONSES, EndpointType.MCP, ]); const ChatUI: React.FC = ({ accessToken, token, userRole, userID, disabledPersonalKeyCreation, proxySettings, simplified = false, fixedModel, }) => { const [mcpServers, setMCPServers] = useState([]); const [byokModalServer, setByokModalServer] = useState(null); const [selectedMCPServers, setSelectedMCPServers] = useState(() => { const saved = sessionStorage.getItem("selectedMCPServers"); try { return saved ? JSON.parse(saved) : []; } catch (error) { console.error("Error parsing selectedMCPServers from sessionStorage", error); return []; } }); const [isLoadingMCPServers, setIsLoadingMCPServers] = useState(false); const [serverToolsMap, setServerToolsMap] = useState>({}); const [selectedMCPDirectTool, setSelectedMCPDirectTool] = useState(undefined); const mcpToolArgsFormRef = useRef(null); const [mcpServerToolRestrictions, setMCPServerToolRestrictions] = useState>(() => { const saved = sessionStorage.getItem("mcpServerToolRestrictions"); try { return saved ? JSON.parse(saved) : {}; } catch (error) { console.error("Error parsing mcpServerToolRestrictions from sessionStorage", error); return {}; } }); const [apiKeySource, setApiKeySource] = useState<"session" | "custom">(() => { const saved = sessionStorage.getItem("apiKeySource"); if (saved) { try { return JSON.parse(saved) as "session" | "custom"; } catch (error) { console.error("Error parsing apiKeySource from sessionStorage", error); } } return disabledPersonalKeyCreation ? "custom" : "session"; }); const [apiKey, setApiKey] = useState(() => sessionStorage.getItem("apiKey") || ""); const [customProxyBaseUrl, setCustomProxyBaseUrl] = useState( () => sessionStorage.getItem("customProxyBaseUrl") || "", ); const [inputMessage, setInputMessage] = useState(""); const [chatHistory, setChatHistory] = useState(() => { if (simplified) return []; try { const saved = sessionStorage.getItem("chatHistory"); return saved ? JSON.parse(saved) : []; } catch (error) { console.error("Error parsing chatHistory from sessionStorage", error); return []; } }); const [selectedModel, setSelectedModel] = useState(simplified ? fixedModel : undefined); const [showCustomModelInput, setShowCustomModelInput] = useState(false); const [modelInfo, setModelInfo] = useState([]); const [agentInfo, setAgentInfo] = useState([]); const [selectedAgent, setSelectedAgent] = useState(undefined); const customModelTimeout = useRef(null); const [endpointType, setEndpointType] = useState( () => sessionStorage.getItem("endpointType") || EndpointType.CHAT, ); const [isLoading, setIsLoading] = useState(false); const abortControllerRef = useRef(null); const [selectedTags, setSelectedTags] = useState(() => { const saved = sessionStorage.getItem("selectedTags"); try { return saved ? JSON.parse(saved) : []; } catch (error) { console.error("Error parsing selectedTags from sessionStorage", error); return []; } }); const [selectedVoice, setSelectedVoice] = useState(() => { const saved = sessionStorage.getItem("selectedVoice"); if (!saved) return "alloy"; try { return JSON.parse(saved) as OpenAIVoice; } catch { // If stored value is not valid JSON, treat it as a plain string return saved as OpenAIVoice; } }); const [selectedVectorStores, setSelectedVectorStores] = useState(() => { const saved = sessionStorage.getItem("selectedVectorStores"); try { return saved ? JSON.parse(saved) : []; } catch (error) { console.error("Error parsing selectedVectorStores from sessionStorage", error); return []; } }); const [selectedGuardrails, setSelectedGuardrails] = useState(() => { const saved = sessionStorage.getItem("selectedGuardrails"); try { return saved ? JSON.parse(saved) : []; } catch (error) { console.error("Error parsing selectedGuardrails from sessionStorage", error); return []; } }); const [selectedPolicies, setSelectedPolicies] = useState(() => { const saved = sessionStorage.getItem("selectedPolicies"); try { return saved ? JSON.parse(saved) : []; } catch (error) { console.error("Error parsing selectedPolicies from sessionStorage", error); return []; } }); const [messageTraceId, setMessageTraceId] = useState( () => sessionStorage.getItem("messageTraceId") || null, ); const [responsesSessionId, setResponsesSessionId] = useState( () => sessionStorage.getItem("responsesSessionId") || null, ); const [useApiSessionManagement, setUseApiSessionManagement] = useState(() => { const saved = sessionStorage.getItem("useApiSessionManagement"); return saved ? JSON.parse(saved) : true; // Default to API session management }); const [uploadedImages, setUploadedImages] = useState([]); const [imagePreviewUrls, setImagePreviewUrls] = useState([]); const [responsesUploadedImage, setResponsesUploadedImage] = useState(null); const [responsesImagePreviewUrl, setResponsesImagePreviewUrl] = useState(null); const [chatUploadedImage, setChatUploadedImage] = useState(null); const [chatImagePreviewUrl, setChatImagePreviewUrl] = useState(null); const [uploadedAudio, setUploadedAudio] = useState(null); const [isGetCodeModalVisible, setIsGetCodeModalVisible] = useState(false); const [generatedCode, setGeneratedCode] = useState(""); const [selectedSdk, setSelectedSdk] = useState<"openai" | "azure">("openai"); const [mcpEvents, setMCPEvents] = useState([]); const [temperature, setTemperature] = useState(1.0); const [maxTokens, setMaxTokens] = useState(2048); const [useAdvancedParams, setUseAdvancedParams] = useState(false); const [mockTestFallbacks, setMockTestFallbacks] = useState(false); // Code Interpreter state (using custom hook) const codeInterpreter = useCodeInterpreter(); const chatEndRef = useRef(null); // Fetch MCP servers const loadMCPServers = async () => { const userApiKey = apiKeySource === "session" ? accessToken : apiKey; if (!userApiKey) return; setIsLoadingMCPServers(true); try { const servers = await fetchMCPServers(userApiKey); setMCPServers(Array.isArray(servers) ? servers : servers.data || []); } catch (error) { console.error("Error fetching MCP servers:", error); } finally { setIsLoadingMCPServers(false); } }; // When simplified, keep selectedModel and endpointType in sync with fixedModel / chat-only useEffect(() => { if (simplified && fixedModel) { setSelectedModel(fixedModel); setEndpointType(EndpointType.CHAT); } }, [simplified, fixedModel]); // Fetch tools for a specific server const loadServerTools = async (serverId: string) => { const userApiKey = apiKeySource === "session" ? accessToken : apiKey; if (!userApiKey || serverToolsMap[serverId]) return; try { const response = await listMCPTools(userApiKey, serverId); setServerToolsMap((prev) => ({ ...prev, [serverId]: response.tools || [], })); } catch (error) { console.error(`Error fetching tools for server ${serverId}:`, error); } }; useEffect(() => { if (isGetCodeModalVisible) { const code = generateCodeSnippet({ apiKeySource, accessToken, apiKey, inputMessage, chatHistory, selectedTags, selectedVectorStores, selectedGuardrails, selectedPolicies, selectedMCPServers, mcpServers, mcpServerToolRestrictions, endpointType, selectedModel, selectedSdk, selectedVoice, proxySettings, }); setGeneratedCode(code); } }, [ isGetCodeModalVisible, selectedSdk, apiKeySource, accessToken, apiKey, inputMessage, chatHistory, selectedTags, selectedVectorStores, selectedGuardrails, selectedPolicies, selectedMCPServers, mcpServers, mcpServerToolRestrictions, endpointType, selectedModel, proxySettings, ]); useEffect(() => { if (simplified) return; // Do not persist chat history in simplified (embedded) mode const handler = setTimeout(() => { sessionStorage.setItem("chatHistory", JSON.stringify(chatHistory)); }, 500); // Debounce by 500ms return () => { clearTimeout(handler); }; }, [chatHistory, simplified]); useEffect(() => { sessionStorage.setItem("apiKeySource", JSON.stringify(apiKeySource)); sessionStorage.setItem("apiKey", apiKey); sessionStorage.setItem("endpointType", endpointType); sessionStorage.setItem("selectedTags", JSON.stringify(selectedTags)); sessionStorage.setItem("selectedVectorStores", JSON.stringify(selectedVectorStores)); sessionStorage.setItem("selectedGuardrails", JSON.stringify(selectedGuardrails)); sessionStorage.setItem("selectedPolicies", JSON.stringify(selectedPolicies)); sessionStorage.setItem("selectedMCPServers", JSON.stringify(selectedMCPServers)); sessionStorage.setItem("mcpServerToolRestrictions", JSON.stringify(mcpServerToolRestrictions)); sessionStorage.setItem("selectedVoice", selectedVoice); sessionStorage.removeItem("selectedMCPTools"); // Clean up old key if (!simplified) { if (selectedModel) { sessionStorage.setItem("selectedModel", selectedModel); } else { sessionStorage.removeItem("selectedModel"); } } if (messageTraceId) { sessionStorage.setItem("messageTraceId", messageTraceId); } else { sessionStorage.removeItem("messageTraceId"); } if (responsesSessionId) { sessionStorage.setItem("responsesSessionId", responsesSessionId); } else { sessionStorage.removeItem("responsesSessionId"); } sessionStorage.setItem("useApiSessionManagement", JSON.stringify(useApiSessionManagement)); // Note: codeInterpreterEnabled and selectedContainerId are persisted by useCodeInterpreter hook }, [ simplified, apiKeySource, apiKey, selectedModel, endpointType, selectedTags, selectedVectorStores, selectedGuardrails, selectedPolicies, messageTraceId, responsesSessionId, useApiSessionManagement, selectedMCPServers, mcpServerToolRestrictions, selectedVoice, ]); useEffect(() => { let userApiKey = apiKeySource === "session" ? accessToken : apiKey; if (!userApiKey || !token || !userRole || !userID) { console.log("userApiKey or token or userRole or userID is missing = ", userApiKey, token, userRole, userID); return; } // Fetch model info and set the default selected model (skip in simplified mode; we use fixedModel) const loadModels = async () => { try { if (!userApiKey) { console.log("userApiKey is missing"); return; } const uniqueModels = await fetchAvailableModels(userApiKey); console.log("Fetched models:", uniqueModels); setModelInfo(uniqueModels); // check for selection overlap or empty model list const hasSelection = uniqueModels.some((m) => m.model_group === selectedModel); if (!uniqueModels.length) { setSelectedModel(undefined); } else if (!hasSelection) { setSelectedModel(undefined); } } catch (error) { console.error("Error fetching model info:", error); } }; if (!simplified) { loadModels(); } loadMCPServers(); }, [accessToken, userID, userRole, apiKeySource, apiKey, token, simplified]); // Load tools when MCP direct mode has a server selected useEffect(() => { if ( endpointType === EndpointType.MCP && selectedMCPServers.length === 1 && selectedMCPServers[0] !== "__all__" && !serverToolsMap[selectedMCPServers[0]] ) { loadServerTools(selectedMCPServers[0]); } }, [endpointType, selectedMCPServers, serverToolsMap]); // Fetch agents when A2A endpoint is selected useEffect(() => { const userApiKey = apiKeySource === "session" ? accessToken : apiKey; if (!userApiKey || endpointType !== EndpointType.A2A_AGENTS) { return; } const loadAgents = async () => { try { const agents = await fetchAvailableAgents(userApiKey, customProxyBaseUrl || undefined); setAgentInfo(agents); // Clear selection if current agent not in list if (selectedAgent && !agents.some((a) => a.agent_name === selectedAgent)) { setSelectedAgent(undefined); } } catch (error) { console.error("Error fetching agents:", error); } }; loadAgents(); }, [accessToken, apiKeySource, apiKey, endpointType, customProxyBaseUrl, selectedAgent]); useEffect(() => { // Scroll to the bottom of the chat whenever chatHistory updates if (chatEndRef.current) { // Add a small delay to ensure content is rendered setTimeout(() => { chatEndRef.current?.scrollIntoView({ behavior: "smooth", block: "end", // Keep the scroll position at the end }); }, 100); } }, [chatHistory]); const updateTextUI = (role: string, chunk: string, model?: string) => { console.log("updateTextUI called with:", role, chunk, model); setChatHistory((prev) => { const last = prev[prev.length - 1]; // if the last message is already from this same role, append if (last && last.role === role && !last.isImage && !last.isAudio) { // build a new object, but only set `model` if it wasn't there already const updated: MessageType = { ...last, content: last.content + chunk, model: last.model ?? model, // ← only use the passed‐in model on the first chunk }; return [...prev.slice(0, -1), updated]; } else { // otherwise start a brand new assistant bubble return [ ...prev, { role, content: chunk, model, // model set exactly once here }, ]; } }); }; const updateReasoningContent = (chunk: string) => { setChatHistory((prevHistory) => { const lastMessage = prevHistory[prevHistory.length - 1]; if (lastMessage && lastMessage.role === "assistant" && !lastMessage.isImage && !lastMessage.isAudio) { return [ ...prevHistory.slice(0, prevHistory.length - 1), { ...lastMessage, reasoningContent: (lastMessage.reasoningContent || "") + chunk, }, ]; } else { // If there's no assistant message yet, we'll create one with empty content // but with reasoning content if (prevHistory.length > 0 && prevHistory[prevHistory.length - 1].role === "user") { return [ ...prevHistory, { role: "assistant", content: "", reasoningContent: chunk, }, ]; } return prevHistory; } }); }; const updateTimingData = (timeToFirstToken: number) => { console.log("updateTimingData called with:", timeToFirstToken); setChatHistory((prevHistory) => { const lastMessage = prevHistory[prevHistory.length - 1]; console.log("Current last message:", lastMessage); if (lastMessage && lastMessage.role === "assistant") { console.log("Updating assistant message with timeToFirstToken:", timeToFirstToken); const updatedHistory = [ ...prevHistory.slice(0, prevHistory.length - 1), { ...lastMessage, timeToFirstToken, }, ]; console.log("Updated chat history:", updatedHistory); return updatedHistory; } // If the last message is a user message and no assistant message exists yet, // create a new assistant message with empty content else if (lastMessage && lastMessage.role === "user") { console.log("Creating new assistant message with timeToFirstToken:", timeToFirstToken); return [ ...prevHistory, { role: "assistant", content: "", timeToFirstToken, }, ]; } console.log("No appropriate message found to update timing"); return prevHistory; }); }; const updateUsageData = (usage: TokenUsage, toolName?: string) => { console.log("Received usage data:", usage); setChatHistory((prevHistory) => { const lastMessage = prevHistory[prevHistory.length - 1]; if (lastMessage && lastMessage.role === "assistant") { console.log("Updating message with usage data:", usage); const updatedMessage = { ...lastMessage, usage, toolName, }; console.log("Updated message:", updatedMessage); return [...prevHistory.slice(0, prevHistory.length - 1), updatedMessage]; } return prevHistory; }); }; const updateA2AMetadata = (a2aMetadata: A2ATaskMetadata) => { console.log("Received A2A metadata:", a2aMetadata); setChatHistory((prevHistory) => { const lastMessage = prevHistory[prevHistory.length - 1]; if (lastMessage && lastMessage.role === "assistant") { const updatedMessage = { ...lastMessage, a2aMetadata, }; return [...prevHistory.slice(0, prevHistory.length - 1), updatedMessage]; } return prevHistory; }); }; const updateTotalLatency = (totalLatency: number) => { setChatHistory((prevHistory) => { const lastMessage = prevHistory[prevHistory.length - 1]; if (lastMessage && lastMessage.role === "assistant") { return [ ...prevHistory.slice(0, prevHistory.length - 1), { ...lastMessage, totalLatency, }, ]; } return prevHistory; }); }; const updateSearchResults = (searchResults: any[]) => { console.log("Received search results:", searchResults); setChatHistory((prevHistory) => { const lastMessage = prevHistory[prevHistory.length - 1]; if (lastMessage && lastMessage.role === "assistant") { console.log("Updating message with search results"); const updatedMessage = { ...lastMessage, searchResults, }; return [...prevHistory.slice(0, prevHistory.length - 1), updatedMessage]; } return prevHistory; }); }; const handleResponseId = (responseId: string) => { console.log("Received response ID for session management:", responseId); if (useApiSessionManagement) { setResponsesSessionId(responseId); } }; const handleToggleSessionManagement = (useApi: boolean) => { setUseApiSessionManagement(useApi); if (!useApi) { // Clear API session when switching to UI mode setResponsesSessionId(null); } }; const handleMCPEvent = (event: MCPEvent) => { console.log("ChatUI: Received MCP event:", event); setMCPEvents((prev) => { // Check if this is a duplicate event (same item_id and type) // Only check for duplicates if item_id is defined (for mcp_list_tools, item_id is "mcp_list_tools") const isDuplicate = event.item_id ? prev.some( (existingEvent) => existingEvent.item_id === event.item_id && existingEvent.type === event.type && (existingEvent.sequence_number === event.sequence_number || (existingEvent.sequence_number === undefined && event.sequence_number === undefined)), ) : false; if (isDuplicate) { console.log("ChatUI: Duplicate MCP event, skipping"); return prev; } const newEvents = [...prev, event]; console.log("ChatUI: Updated MCP events:", newEvents); return newEvents; }); }; const updateImageUI = (imageUrl: string, model: string) => { setChatHistory((prevHistory) => [...prevHistory, { role: "assistant", content: imageUrl, model, isImage: true }]); }; const updateEmbeddingsUI = (embeddings: string, model?: string) => { setChatHistory((prevHistory) => [ ...prevHistory, { role: "assistant", content: truncateString(embeddings, 100), model, isEmbeddings: true }, ]); }; const updateAudioUI = (audioUrl: string, model: string) => { setChatHistory((prevHistory) => [...prevHistory, { role: "assistant", content: audioUrl, model, isAudio: true }]); }; const updateChatImageUI = (imageUrl: string, model?: string) => { setChatHistory((prev) => { const last = prev[prev.length - 1]; // If the last message is from assistant and has content, add image to it if (last && last.role === "assistant" && !last.isImage && !last.isAudio) { const updated = { ...last, image: { url: imageUrl, detail: "auto", }, model: last.model ?? model, }; return [...prev.slice(0, -1), updated]; } else { // Otherwise create a new assistant message with just the image return [ ...prev, { role: "assistant", content: "", model, image: { url: imageUrl, detail: "auto", }, }, ]; } }); }; const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); // Prevent default to avoid newline handleSendMessage(); } // If Shift+Enter is pressed, the default behavior (inserting a newline) will occur }; const handleCancelRequest = () => { if (abortControllerRef.current) { abortControllerRef.current.abort(); abortControllerRef.current = null; setIsLoading(false); NotificationsManager.info("Request cancelled"); } }; const handleImageUpload = (file: File) => { setUploadedImages((prev) => [...prev, file]); const previewUrl = URL.createObjectURL(file); setImagePreviewUrls((prev) => [...prev, previewUrl]); return false; // Prevent default upload behavior }; const handleRemoveImage = (index: number) => { if (imagePreviewUrls[index]) { URL.revokeObjectURL(imagePreviewUrls[index]); } setUploadedImages((prev) => prev.filter((_, i) => i !== index)); setImagePreviewUrls((prev) => prev.filter((_, i) => i !== index)); }; const handleRemoveAllImages = () => { imagePreviewUrls.forEach((url) => { URL.revokeObjectURL(url); }); setUploadedImages([]); setImagePreviewUrls([]); }; const handleResponsesImageUpload = (file: File): false => { setResponsesUploadedImage(file); const previewUrl = URL.createObjectURL(file); setResponsesImagePreviewUrl(previewUrl); return false; // Prevent default upload behavior }; const handleRemoveResponsesImage = () => { if (responsesImagePreviewUrl) { URL.revokeObjectURL(responsesImagePreviewUrl); } setResponsesUploadedImage(null); setResponsesImagePreviewUrl(null); }; const handleChatImageUpload = (file: File): false => { setChatUploadedImage(file); const previewUrl = URL.createObjectURL(file); setChatImagePreviewUrl(previewUrl); return false; // Prevent default upload behavior }; const handleRemoveChatImage = () => { if (chatImagePreviewUrl) { URL.revokeObjectURL(chatImagePreviewUrl); } setChatUploadedImage(null); setChatImagePreviewUrl(null); }; const handleAudioUpload = (file: File): false => { setUploadedAudio(file); return false; // Prevent default upload behavior }; const handleRemoveAudio = () => { setUploadedAudio(null); }; const handleSendMessage = async () => { if ( inputMessage.trim() === "" && endpointType !== EndpointType.TRANSCRIPTION && endpointType !== EndpointType.MCP ) return; // For image edits, require both image and prompt if (endpointType === EndpointType.IMAGE_EDITS && uploadedImages.length === 0) { NotificationsManager.fromBackend("Please upload at least one image for editing"); return; } // For audio transcriptions, require audio file if (endpointType === EndpointType.TRANSCRIPTION && !uploadedAudio) { NotificationsManager.fromBackend("Please upload an audio file for transcription"); return; } // For A2A agents, require agent selection if (endpointType === EndpointType.A2A_AGENTS && !selectedAgent) { NotificationsManager.fromBackend("Please select an agent to send a message"); return; } // For MCP direct mode, require server and tool selection, and get form values early let mcpToolArguments: Record = {}; if (endpointType === EndpointType.MCP) { const mcpServerId = selectedMCPServers.length === 1 && selectedMCPServers[0] !== "__all__" ? selectedMCPServers[0] : null; if (!mcpServerId) { NotificationsManager.fromBackend("Please select an MCP server to test"); return; } if (!selectedMCPDirectTool) { NotificationsManager.fromBackend("Please select an MCP tool to call"); return; } const mcpTool = (serverToolsMap[selectedMCPServers[0]] || []).find( (t: any) => t.name === selectedMCPDirectTool, ); if (!mcpTool) { NotificationsManager.fromBackend("Please wait for tool schema to load"); return; } try { mcpToolArguments = (await mcpToolArgsFormRef.current?.getSubmitValues()) ?? {}; } catch (err) { NotificationsManager.fromBackend( err instanceof Error ? err.message : "Please fill in all required parameters", ); return; } } // Require model selection for all model-based endpoints (MCP direct mode does not need a model) const modelRequiredEndpoints = [ EndpointType.CHAT, EndpointType.IMAGE, EndpointType.SPEECH, EndpointType.IMAGE_EDITS, EndpointType.RESPONSES, EndpointType.ANTHROPIC_MESSAGES, EndpointType.EMBEDDINGS, EndpointType.TRANSCRIPTION, ]; if (modelRequiredEndpoints.includes(endpointType as EndpointType) && !selectedModel) { NotificationsManager.fromBackend("Please select a model before sending a request"); return; } if (!token || !userRole || !userID) { return; } const effectiveApiKey = simplified ? accessToken : apiKeySource === "session" ? accessToken : apiKey; if (!effectiveApiKey) { NotificationsManager.fromBackend("Please provide a Virtual Key or select Current UI Session"); return; } // Create new abort controller for this request abortControllerRef.current = new AbortController(); const signal = abortControllerRef.current.signal; // Create message object without model field for API call let newUserMessage: { role: string; content: string | any[] }; // Handle image for responses API if (endpointType === EndpointType.RESPONSES && responsesUploadedImage) { try { newUserMessage = await createMultimodalMessage(inputMessage, responsesUploadedImage); } catch (error) { NotificationsManager.fromBackend("Failed to process image. Please try again."); return; } } // Handle image for chat completions API else if (endpointType === EndpointType.CHAT && chatUploadedImage) { try { newUserMessage = await createChatMultimodalMessage(inputMessage, chatUploadedImage); } catch (error) { NotificationsManager.fromBackend("Failed to process image. Please try again."); return; } } else { newUserMessage = { role: "user", content: inputMessage }; } // Generate new trace ID for a new conversation or use existing one const traceId = messageTraceId || uuidv4(); if (!messageTraceId) { setMessageTraceId(traceId); } // Update UI with full message object (always display as text for UI) let displayMessage: MessageType; if (endpointType === EndpointType.RESPONSES && responsesUploadedImage) { displayMessage = createDisplayMessage( inputMessage, true, responsesImagePreviewUrl || undefined, responsesUploadedImage.name, ); } else if (endpointType === EndpointType.CHAT && chatUploadedImage) { displayMessage = createChatDisplayMessage( inputMessage, true, chatImagePreviewUrl || undefined, chatUploadedImage.name, ); } else if (endpointType === EndpointType.TRANSCRIPTION && uploadedAudio) { // For audio transcription, show the audio file name and optional prompt const audioMessage = inputMessage ? `🎵 Audio file: ${uploadedAudio.name}\nPrompt: ${inputMessage}` : `🎵 Audio file: ${uploadedAudio.name}`; displayMessage = createDisplayMessage(audioMessage, false); } else if (endpointType === EndpointType.MCP && selectedMCPDirectTool) { // For MCP direct mode, show tool name and arguments from form const mcpMessage = `🔧 MCP Tool: ${selectedMCPDirectTool}\nArguments: ${JSON.stringify(mcpToolArguments, null, 2)}`; displayMessage = createDisplayMessage(mcpMessage, false); } else { displayMessage = createDisplayMessage(inputMessage, false); } setChatHistory([...chatHistory, displayMessage]); setMCPEvents([]); // Clear previous MCP events for new conversation turn codeInterpreter.clearResult(); // Clear previous code interpreter results setIsLoading(true); try { if (selectedModel) { if (endpointType === EndpointType.CHAT) { // Create chat history for API call - strip out model field and isImage field // For chat completions, we preserve the multimodal content structure const apiChatHistory = [ ...chatHistory .filter((msg) => !msg.isImage && !msg.isAudio) .map(({ role, content }) => ({ role, content: typeof content === "string" ? content : "", })), newUserMessage, ]; const requestProxyBaseUrl = simplified && proxySettings ? (proxySettings.LITELLM_UI_API_DOC_BASE_URL ?? proxySettings.PROXY_BASE_URL ?? undefined) : (customProxyBaseUrl || undefined); await makeOpenAIChatCompletionRequest( apiChatHistory, (chunk, model) => updateTextUI("assistant", chunk, model), selectedModel, effectiveApiKey, selectedTags, signal, updateReasoningContent, updateTimingData, updateUsageData, traceId, selectedVectorStores.length > 0 ? selectedVectorStores : undefined, selectedGuardrails.length > 0 ? selectedGuardrails : undefined, selectedPolicies.length > 0 ? selectedPolicies : undefined, selectedMCPServers, updateChatImageUI, updateSearchResults, useAdvancedParams ? temperature : undefined, useAdvancedParams ? maxTokens : undefined, updateTotalLatency, requestProxyBaseUrl, mcpServers, mcpServerToolRestrictions, handleMCPEvent, mockTestFallbacks, ); } else if (endpointType === EndpointType.IMAGE) { // For image generation await makeOpenAIImageGenerationRequest( inputMessage, (imageUrl, model) => updateImageUI(imageUrl, model), selectedModel, effectiveApiKey, selectedTags, signal, customProxyBaseUrl || undefined, ); } else if (endpointType === EndpointType.SPEECH) { // For audio speech await makeOpenAIAudioSpeechRequest( inputMessage, selectedVoice, (audioUrl, model) => updateAudioUI(audioUrl, model), selectedModel || "", effectiveApiKey, selectedTags, signal, undefined, // responseFormat undefined, // speed customProxyBaseUrl || undefined, ); } else if (endpointType === EndpointType.IMAGE_EDITS) { // For image edits if (uploadedImages.length > 0) { await makeOpenAIImageEditsRequest( uploadedImages.length === 1 ? uploadedImages[0] : uploadedImages, inputMessage, (imageUrl, model) => updateImageUI(imageUrl, model), selectedModel, effectiveApiKey, selectedTags, signal, customProxyBaseUrl || undefined, ); } } else if (endpointType === EndpointType.RESPONSES) { // Create chat history for API call - strip out model field and isImage field let apiChatHistory; if (useApiSessionManagement && responsesSessionId) { // When using API session management with existing session, only send the new message apiChatHistory = [newUserMessage]; } else { // When using UI session management or starting new API session, send full history apiChatHistory = [ ...chatHistory .filter((msg) => !msg.isImage && !msg.isAudio) .map(({ role, content }) => ({ role, content })), newUserMessage, ]; } await makeOpenAIResponsesRequest( apiChatHistory, (role, delta, model) => updateTextUI(role, delta, model), selectedModel, effectiveApiKey, selectedTags, signal, updateReasoningContent, updateTimingData, updateUsageData, traceId, selectedVectorStores.length > 0 ? selectedVectorStores : undefined, selectedGuardrails.length > 0 ? selectedGuardrails : undefined, selectedPolicies.length > 0 ? selectedPolicies : undefined, selectedMCPServers, // Pass the selected servers array useApiSessionManagement ? responsesSessionId : null, // Only pass session ID if API mode is enabled handleResponseId, // Pass callback to capture new response ID handleMCPEvent, // Pass MCP event handler codeInterpreter.enabled, // Enable Code Interpreter tool codeInterpreter.setResult, // Handle code interpreter output customProxyBaseUrl || undefined, mcpServers, mcpServerToolRestrictions, ); } else if (endpointType === EndpointType.ANTHROPIC_MESSAGES) { const apiChatHistory = [ ...chatHistory .filter((msg) => !msg.isImage && !msg.isAudio) .map(({ role, content }) => ({ role, content })), newUserMessage, ]; await makeAnthropicMessagesRequest( apiChatHistory, (role, delta, model) => updateTextUI(role, delta, model), selectedModel, effectiveApiKey, selectedTags, signal, updateReasoningContent, updateTimingData, updateUsageData, traceId, selectedVectorStores.length > 0 ? selectedVectorStores : undefined, selectedGuardrails.length > 0 ? selectedGuardrails : undefined, selectedPolicies.length > 0 ? selectedPolicies : undefined, selectedMCPServers, // Pass the selected tools array customProxyBaseUrl || undefined, ); } else if (endpointType === EndpointType.EMBEDDINGS) { await makeOpenAIEmbeddingsRequest( inputMessage, (embeddings, model) => updateEmbeddingsUI(embeddings, model), selectedModel, effectiveApiKey, selectedTags, customProxyBaseUrl || undefined, ); } else if (endpointType === EndpointType.TRANSCRIPTION) { // For audio transcriptions if (uploadedAudio) { await makeOpenAIAudioTranscriptionRequest( uploadedAudio, (transcription, model) => updateTextUI("assistant", transcription, model), selectedModel, effectiveApiKey, selectedTags, signal, undefined, // language undefined, // prompt undefined, // responseFormat undefined, // temperature customProxyBaseUrl || undefined, ); } } } // Handle MCP direct tool calls (no chat completions) if (endpointType === EndpointType.MCP) { const mcpServerId = selectedMCPServers.length === 1 && selectedMCPServers[0] !== "__all__" ? selectedMCPServers[0] : null; if (mcpServerId && selectedMCPDirectTool) { const result = await callMCPTool( effectiveApiKey, mcpServerId, selectedMCPDirectTool, mcpToolArguments, selectedGuardrails.length > 0 ? { guardrails: selectedGuardrails } : undefined, ); const resultText = result?.content?.length > 0 ? JSON.stringify( result.content.map((c: any) => (c.type === "text" ? c.text : c)).filter(Boolean), null, 2, ) : JSON.stringify(result, null, 2); updateTextUI("assistant", resultText || "Tool executed successfully."); } } // Handle A2A agent calls (separate from model-based calls) - use streaming if (endpointType === EndpointType.A2A_AGENTS && selectedAgent) { await makeA2ASendMessageRequest( selectedAgent, inputMessage, (chunk, model) => updateTextUI("assistant", chunk, model), effectiveApiKey, signal, updateTimingData, updateTotalLatency, updateA2AMetadata, customProxyBaseUrl || undefined, selectedGuardrails.length > 0 ? selectedGuardrails : undefined, ); } } catch (error) { if (signal.aborted) { console.log("Request was cancelled"); } else { console.error("Error fetching response", error); updateTextUI("assistant", "Error fetching response:" + error); } } finally { setIsLoading(false); abortControllerRef.current = null; // Clear image after successful request for image edits if (endpointType === EndpointType.IMAGE_EDITS) { handleRemoveAllImages(); } // Clear image after successful request for responses API if (endpointType === EndpointType.RESPONSES && responsesUploadedImage) { handleRemoveResponsesImage(); } // Clear image after successful request for chat completions API if (endpointType === EndpointType.CHAT && chatUploadedImage) { handleRemoveChatImage(); } // Clear audio after successful request for transcription if (endpointType === EndpointType.TRANSCRIPTION && uploadedAudio) { handleRemoveAudio(); } } setInputMessage(""); }; const clearChatHistory = () => { // Clean up audio object URLs before clearing history chatHistory.forEach((message) => { if (message.isAudio && typeof message.content === "string") { URL.revokeObjectURL(message.content); } }); setChatHistory([]); setMessageTraceId(null); setResponsesSessionId(null); // Clear responses session ID setMCPEvents([]); // Clear MCP events handleRemoveAllImages(); // Clear any uploaded images for image edits handleRemoveResponsesImage(); // Clear any uploaded images for responses handleRemoveChatImage(); // Clear any uploaded images for chat completions handleRemoveAudio(); // Clear any uploaded audio for transcription if (!simplified) { sessionStorage.removeItem("chatHistory"); sessionStorage.removeItem("messageTraceId"); sessionStorage.removeItem("responsesSessionId"); } NotificationsManager.success("Chat history cleared."); }; if (userRole && userRole === "Admin Viewer") { const { Title, Paragraph } = Typography; return (
Access Denied Ask your proxy admin for access to test models
); } const onModelChange = (value: string) => { console.log(`selected ${value}`); setSelectedModel(value); setShowCustomModelInput(value === "custom"); }; // Check if the selected model is a chat model const isChatModel = () => { if (!selectedModel || selectedModel === "custom") { return false; } const model = modelInfo.find((m) => m.model_group === selectedModel); if (!model) { return false; } // Check if mode is explicitly "chat" or undefined (which defaults to chat per backend) return !model.mode || model.mode === "chat"; }; const antIcon = ; return (
{/* Left Sidebar with Controls - hidden in simplified mode */} {!simplified && (
Configurations
Virtual Key Source { setSelectedVoice(value); sessionStorage.setItem("selectedVoice", value); }} style={{ width: "100%" }} className="rounded-md" options={OPEN_AI_VOICE_SELECT_OPTIONS} />
)} {/* Session Management Component */}
{/* Model Selector - shown when NOT using A2A Agents or MCP direct mode */} {endpointType !== EndpointType.A2A_AGENTS && endpointType !== EndpointType.MCP && (
Select Model {isChatModel() ? ( } title="Model Settings" trigger="click" placement="right" >
)}
Tags
{/* MCP Server Selection */}
{endpointType === EndpointType.MCP ? "MCP Server" : "MCP Servers"} {/* MCP Tool selector - only for MCP direct mode */} {endpointType === EndpointType.MCP && selectedMCPServers.length === 1 && selectedMCPServers[0] !== "__all__" && (
Select Tool { setMCPServerToolRestrictions((prev) => ({ ...prev, [serverId]: selectedTools, })); }} options={tools.map((tool) => ({ value: tool.name, label: tool.name, }))} maxTagCount={2} />
); })}
)} {/* BYOK credential status for selected servers */} {selectedMCPServers.length > 0 && !selectedMCPServers.includes("__all__") && selectedMCPServers.some((serverId) => { const server = mcpServers.find((s) => s.server_id === serverId); return server?.is_byok; }) && (
{selectedMCPServers.map((serverId) => { const server = mcpServers.find((s) => s.server_id === serverId); if (!server?.is_byok) return null; const serverName = server.alias || server.server_name || serverId; return (
{serverName} requires your API key {server.has_user_credential ? (
Connected
) : ( )}
); })}
)}
Vector Store Select vector store(s) to use for this LLM API call. You can set up your vector store{" "} here . } >
Guardrails Select guardrail(s) to use for this LLM API call. You can set up your guardrails{" "} here . } >
Policies Select policy/policies to apply to this LLM API call. Policies define which guardrails are applied based on conditions. You can set up your policies{" "} here . } >
{/* Code Interpreter Toggle - Only for Responses endpoint */} {endpointType === EndpointType.RESPONSES && (
{ }} selectedModel={selectedModel || ""} />
)}
)} {/* Main Chat Area */}
{endpointType === EndpointType.REALTIME ? ( 0 ? selectedGuardrails : undefined} /> ) : ( <>
{simplified ? "Chat" : "Test Key"}
Clear Chat {!simplified && ( setIsGetCodeModalVisible(true)} className="bg-gray-100 hover:bg-gray-200 text-gray-700 border-gray-300" icon={CodeOutlined} > Get Code )}
{chatHistory.length === 0 && (
Start a conversation, generate an image, or handle audio
)} {chatHistory.map((message, index) => (
{message.role === "user" ? ( ) : ( )}
{message.role} {message.role === "assistant" && message.model && ( {message.model} )}
{message.reasoningContent && } {/* Show MCP events at the start of assistant messages */} {message.role === "assistant" && index === chatHistory.length - 1 && mcpEvents.length > 0 && (endpointType === EndpointType.RESPONSES || endpointType === EndpointType.CHAT) && (
)} {/* Show search results at the start of assistant messages */} {message.role === "assistant" && message.searchResults && ( )} {/* Show Code Interpreter output for the last assistant message */} {message.role === "assistant" && index === chatHistory.length - 1 && codeInterpreter.result && endpointType === EndpointType.RESPONSES && ( )}
{message.isImage ? ( Generated image ) : message.isAudio ? ( ) : ( <> {/* Show attached image for user messages based on current endpoint */} {endpointType === EndpointType.RESPONSES && } {endpointType === EndpointType.CHAT && } & { inline?: boolean; node?: any; }) { const match = /language-(\w+)/.exec(className || ""); return !inline && match ? ( {String(children).replace(/\n$/, "")} ) : ( {children} ); }, pre: ({ node, ...props }) => ( 
                                ),
                              }}
                            >
                              {typeof message.content === "string" ? message.content : ""}
                            

                            {/* Show generated image from chat completions */}
                            {message.image && (
                              

                                Generated image
                              

                            )}
                          
                        )}

                        {message.role === "assistant" &&
                          (message.timeToFirstToken || message.totalLatency || message.usage) &&
                          !message.a2aMetadata && (
                            
                          )}

                        {/* A2A Metrics - show for A2A agent responses */}
                        {message.role === "assistant" && message.a2aMetadata && (
                          
                        )}
))} {/* Show MCP events during loading if no assistant message exists yet */} {isLoading && mcpEvents.length > 0 && (endpointType === EndpointType.RESPONSES || endpointType === EndpointType.CHAT) && chatHistory.length > 0 && chatHistory[chatHistory.length - 1].role === "user" && (
Assistant
)} {isLoading && (
)}
{/* Image Upload Section for Image Edits */} {endpointType === EndpointType.IMAGE_EDITS && (
{uploadedImages.length === 0 ? (

Click or drag images to upload

Support for PNG, JPG, JPEG formats. Multiple images supported.

) : (
{uploadedImages.map((file, index) => (
{`Upload
))} {/* Add more images button */}
document.getElementById("additional-image-upload")?.click()} >

Add more

{ const files = Array.from(e.target.files || []); files.forEach((file) => handleImageUpload(file)); }} />
)}
)} {/* Audio Upload Section for Transcriptions */} {endpointType === EndpointType.TRANSCRIPTION && (
{!uploadedAudio ? (

Click or drag audio file to upload

Support for MP3, MP4, MPEG, MPGA, M4A, WAV, WEBM formats. Max file size: 25 MB.

) : (
{uploadedAudio.name} ({(uploadedAudio.size / 1024 / 1024).toFixed(2)} MB)
)}
)} {/* Show file previews above input when files are uploaded */} {endpointType === EndpointType.RESPONSES && responsesUploadedImage && (
{responsesUploadedImage.name.toLowerCase().endsWith(".pdf") ? (
) : ( Upload preview )}
{responsesUploadedImage.name}
{responsesUploadedImage.name.toLowerCase().endsWith(".pdf") ? "PDF" : "Image"}
)} {endpointType === EndpointType.CHAT && chatUploadedImage && (
{chatUploadedImage.name.toLowerCase().endsWith(".pdf") ? (
) : ( Upload preview )}
{chatUploadedImage.name}
{chatUploadedImage.name.toLowerCase().endsWith(".pdf") ? "PDF" : "Image"}
)} {/* Code Interpreter indicator and sample prompts when enabled */} {endpointType === EndpointType.RESPONSES && codeInterpreter.enabled && (
{isLoading ? ( <> Running Python code... ) : ( <> Code Interpreter Active )}
{/* Sample prompts - only show when not loading */} {!isLoading && (
{[ "Generate sample sales data CSV and create a chart", "Create a PNG bar chart comparing AI gateway providers including LiteLLM", "Generate a CSV of LLM pricing data and visualize it as a line chart", ].map((prompt, idx) => ( ))}
)}
)} {/* Suggested prompts - show when chat is empty and not loading (skip for MCP - uses structured form) */} {chatHistory.length === 0 && !isLoading && endpointType !== EndpointType.MCP && (
{(endpointType === EndpointType.A2A_AGENTS ? ["What can you help me with?", "Tell me about yourself", "What tasks can you perform?"] : ["Write me a poem", "Explain quantum computing", "Draft a polite email requesting a meeting"] ).map((prompt) => ( ))}
)}
{/* Left: attachment and code interpreter icons */}
{endpointType === EndpointType.RESPONSES && !responsesUploadedImage && ( )} {endpointType === EndpointType.CHAT && !chatUploadedImage && ( )} {/* Quick Code Interpreter toggle for Responses */} {endpointType === EndpointType.RESPONSES && ( )}
{/* Middle: input field or MCP structured form */} {endpointType === EndpointType.MCP && selectedMCPServers.length === 1 && selectedMCPServers[0] !== "__all__" && selectedMCPDirectTool ? (
{(() => { const mcpTool = (serverToolsMap[selectedMCPServers[0]] || []).find( (t: any) => t.name === selectedMCPDirectTool, ); return mcpTool ? ( ) : (
Loading tool schema...
); })()}
) : (