import { InfoCircleOutlined, WarningOutlined } from "@ant-design/icons"; import { Button, Divider, Typography } from "antd"; import React, { useEffect, useState } from "react"; import NotificationsManager from "../molecules/notifications_manager"; import { testSearchToolConnection } from "../networking"; const { Text } = Typography; interface SearchConnectionTestProps { litellmParams: Record; accessToken: string; onTestComplete?: () => void; } const SearchConnectionTest: React.FC = ({ litellmParams, accessToken, onTestComplete, }) => { const [isLoading, setIsLoading] = useState(true); const [testResult, setTestResult] = useState<{ status: "success" | "error"; message: string; test_query?: string; results_count?: number; error_type?: string; } | null>(null); const [showDetails, setShowDetails] = useState(false); useEffect(() => { const runTest = async () => { setIsLoading(true); try { const result = await testSearchToolConnection(accessToken, litellmParams); setTestResult(result); if (result.status === "success") { NotificationsManager.success("Connection test successful!"); } } catch (error) { setTestResult({ status: "error", message: error instanceof Error ? error.message : "Unknown error occurred", error_type: "NetworkError", }); } finally { setIsLoading(false); if (onTestComplete) { onTestComplete(); } } }; runTest(); }, [accessToken, litellmParams, onTestComplete]); const getCleanErrorMessage = (errorMsg: string) => { if (!errorMsg) return "Unknown error"; // Remove stack traces const mainError = errorMsg.split("stack trace:")[0].trim(); // Remove litellm error prefixes const cleanedError = mainError.replace(/^litellm\.(.*?)Error:\s*/, ""); // Remove AuthenticationError prefix if it exists const finalError = cleanedError.replace(/^AuthenticationError:\s*/, ""); // If the error contains HTML (like a 401 page), extract just the key info if (finalError.includes("") || finalError.includes("(.*?)<\/title>/); if (titleMatch) { return titleMatch[1]; } // If it's a 401 error if (finalError.includes("401") || finalError.includes("Authorization Required")) { return "Authentication failed: Invalid API key or credentials"; } return "Authentication error - please check your API key"; } // Limit very long error messages if (finalError.length > 200) { return finalError.substring(0, 200) + "..."; } return finalError; }; const errorMessage = testResult?.message ? getCleanErrorMessage(testResult.message) : "Unknown error"; if (isLoading) { return (
Testing connection to {litellmParams.search_provider || "search provider"}...
); } if (!testResult) { return null; } return (
{testResult.status === "success" ? (
Connection to {litellmParams.search_provider} successful! {testResult.test_query && ( Test query: {testResult.test_query} )} {testResult.results_count !== undefined && ( Results retrieved: {testResult.results_count} )}
) : ( <>
Connection to {litellmParams.search_provider || "search provider"} failed
Error:{" "} {errorMessage} {testResult.error_type && (
Error type:{" "} {testResult.error_type}
)} {testResult.message && (
)}
{showDetails && (
Full Error Details 
                  {testResult.message}
)}
Troubleshooting tips:
  • Verify your API key is correct and active
  • Check if the search provider service is operational
  • Ensure you have sufficient credits/quota with the provider
  • Review the provider's documentation for any additional requirements
)}
); }; export default SearchConnectionTest;