+ {(() => {
+ const provider = vectorStoreDetails.custom_llm_provider || "bedrock";
+ const { displayName, logo } = (() => {
+ // Find the enum key by matching provider_map values
+ const enumKey = Object.keys(provider_map).find(
+ key => provider_map[key].toLowerCase() === provider.toLowerCase()
+ );
+
+ if (!enumKey) {
+ return { displayName: provider, logo: "" };
+ }
+
+ // Get the display name from Providers enum and logo from map
+ const displayName = Providers[enumKey as keyof typeof Providers];
+ const logo = providerLogoMap[displayName];
+
+ return { displayName, logo };
+ })();
+
+ return (
+ <>
+ {logo && (
+

{
+ const target = e.target as HTMLImageElement;
+ const parent = target.parentElement;
+ if (parent) {
+ const fallbackDiv = document.createElement('div');
+ fallbackDiv.className = 'w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs';
+ fallbackDiv.textContent = displayName.charAt(0);
+ parent.replaceChild(fallbackDiv, target);
+ }
+ }}
+ />
+ )}
+
{displayName}
+ >
+ );
+ })()}
+