scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-11 22:51:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 123

ProviderLogo component, test pending

Browse source
This commit is contained in:
yuneng-jiang 2025-11-25 18:05:30 -08:00
parent 6e5c7c0008
commit 577f40bc60
2 changed files with 26 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ui/litellm-dashboard/src/components/molecules/models/ProviderLogo.tsx Normal file
View file

@ -0,0 +1,24 @@
import React, { useState } from "react";
import { getProviderLogoAndName } from "../../provider_info_helpers";
interface ProviderLogoProps {
provider: string;
className?: string;
}
export const ProviderLogo: React.FC<ProviderLogoProps> = ({ provider, className = "w-4 h-4" }) => {
const [hasError, setHasError] = useState(false);
const { logo } = getProviderLogoAndName(provider);
const showFallback = hasError || !logo;
if (showFallback) {
return (
<div className={`${className} rounded-full bg-gray-200 flex items-center justify-center text-xs`}>
{provider?.charAt(0) || "-"}
</div>
);
}
return <img src={logo} alt={`${provider} logo`} className={className} onError={() => setHasError(true)} />;
};

24
ui/litellm-dashboard/src/components/molecules/models/columns.tsx
View file

@ -4,6 +4,7 @@ import { Tooltip } from "antd";
import { getProviderLogoAndName } from "../../provider_info_helpers";
import { ModelData } from "../../model_dashboard/types";
import { TrashIcon, KeyIcon } from "@heroicons/react/outline";
import { ProviderLogo } from "./ProviderLogo";
export const columns = (
userRole: string,
@ -62,28 +63,7 @@ export const columns = (
{/* Provider Icon */}
<div className="flex-shrink-0 mt-0.5">
{model.provider ? (
<img
src={getProviderLogoAndName(model.provider).logo}
alt={`${model.provider} logo`}
className="w-4 h-4"
onError={(e) => {
const target = e.currentTarget as HTMLImageElement;
const parent = target.parentElement;
if (!parent || !parent.contains(target)) {
return;
}
try {
const fallbackDiv = document.createElement("div");
fallbackDiv.className =
"w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center text-xs";
fallbackDiv.textContent = model.provider?.charAt(0) || "-";
parent.replaceChild(fallbackDiv, target);
} catch (error) {
console.error("Failed to replace provider logo fallback:", error);
}
}}
/>
<ProviderLogo provider={model.provider} />
) : (
<div className="w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center text-xs">-</div>
)}