From c8dffd3f0730721b9306ed4892a98cb17c217578 Mon Sep 17 00:00:00 2001
From: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>
Date: Mon, 5 Jan 2026 22:42:57 -0800
Subject: [PATCH] refactor: dry out renderIcon to renderMCPIcon reusable
 component

---
 .../src/components/MCP/MCPServerMenuItem.tsx  | 33 +++-------
 client/src/components/MCP/StackedMCPIcons.tsx | 32 +++-------
 client/src/components/MCP/mcpServerUtils.ts   |  2 +-
 client/src/components/MCP/renderMCPIcon.tsx   | 60 +++++++++++++++++++
 .../SidePanel/MCPBuilder/MCPServerCard.tsx    | 35 +++--------
 client/src/components/Tools/MCPToolItem.tsx   | 37 ++++--------
 6 files changed, 98 insertions(+), 101 deletions(-)
 create mode 100644 client/src/components/MCP/renderMCPIcon.tsx

diff --git a/client/src/components/MCP/MCPServerMenuItem.tsx b/client/src/components/MCP/MCPServerMenuItem.tsx
index f3a02d7e34..c37381ed3c 100644
--- a/client/src/components/MCP/MCPServerMenuItem.tsx
+++ b/client/src/components/MCP/MCPServerMenuItem.tsx
@@ -1,16 +1,15 @@
 import * as Ariakit from '@ariakit/react';
 import { Check } from 'lucide-react';
-import { MCPIcon } from '@librechat/client';
 import type { MCPServerDefinition } from '~/hooks/MCP/useMCPServerManager';
 import type { MCPServerStatusIconProps } from './MCPServerStatusIcon';
 import MCPServerStatusIcon from './MCPServerStatusIcon';
-import ClickHouseIcon from './ClickHouseIcon';
 import {
   getStatusColor,
   getStatusTextKey,
   shouldShowActionButton,
   type ConnectionStatusMap,
 } from './mcpServerUtils';
+import { renderMCPIcon } from './renderMCPIcon';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
@@ -41,28 +40,6 @@ export default function MCPServerMenuItem({
   // Include status in aria-label so screen readers announce it
   const accessibleLabel = `${displayName}, ${statusText}`;
 
-  const renderIcon = () => {
-    if (server.config?.iconPath) {
-      return (
-        <img
-          src={server.config.iconPath}
-          className="h-8 w-8 rounded-lg object-cover"
-          alt={displayName}
-        />
-      );
-    }
-
-    if (server.serverName.toLowerCase().includes('clickhouse')) {
-      return <ClickHouseIcon className="h-8 w-8 rounded-lg object-cover" alt={displayName} />;
-    }
-
-    return (
-      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-surface-tertiary">
-        <MCPIcon className="h-5 w-5 text-text-secondary" />
-      </div>
-    );
-  };
-
   return (
     <Ariakit.MenuItemCheckbox
       hideOnClick={false}
@@ -81,7 +58,13 @@ export default function MCPServerMenuItem({
     >
       {/* Server Icon with Status Dot */}
       <div className="relative flex-shrink-0">
-        {renderIcon()}
+        {renderMCPIcon({
+          iconPath: server.config?.iconPath,
+          serverName: server.serverName,
+          displayName,
+          className: 'h-8 w-8 rounded-lg object-cover',
+          wrapDefault: true,
+        })}
         {/* Status dot - decorative, status is announced via aria-label on MenuItem */}
         <div
           aria-hidden="true"
diff --git a/client/src/components/MCP/StackedMCPIcons.tsx b/client/src/components/MCP/StackedMCPIcons.tsx
index bf9e8566f0..cc79100f31 100644
--- a/client/src/components/MCP/StackedMCPIcons.tsx
+++ b/client/src/components/MCP/StackedMCPIcons.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { MCPIcon } from '@librechat/client';
 import type { MCPServerDefinition } from '~/hooks/MCP/useMCPServerManager';
 import { getSelectedServerIcons } from './mcpServerUtils';
-import ClickHouseIcon from './ClickHouseIcon';
+import { renderMCPIcon } from './renderMCPIcon';
 import { cn } from '~/utils';
 
 interface StackedMCPIconsProps {
@@ -59,29 +59,6 @@ export default function StackedMCPIcons({
   const sizes = sizeConfig[iconSize];
   const colors = variantConfig[variant];
 
-  const renderIcon = (icon: { iconPath: string | null; displayName: string }) => {
-    if (icon.iconPath === 'clickhouse') {
-      return (
-        <ClickHouseIcon
-          className={cn('rounded-full object-cover', sizes.icon)}
-          alt={icon.displayName}
-        />
-      );
-    }
-
-    if (icon.iconPath) {
-      return (
-        <img
-          src={icon.iconPath}
-          alt={icon.displayName}
-          className={cn('rounded-full object-cover', sizes.icon)}
-        />
-      );
-    }
-
-    return <MCPIcon className={cn('text-text-primary', sizes.icon)} />;
-  };
-
   return (
     <div className="flex items-center">
       {icons.map((icon, index) => (
@@ -97,7 +74,12 @@ export default function StackedMCPIcons({
           )}
           style={{ zIndex: icons.length - index }}
         >
-          {renderIcon(icon)}
+          {renderMCPIcon({
+            iconPath: icon.iconPath,
+            serverName: icon.serverName,
+            displayName: icon.displayName,
+            className: cn('rounded-full object-cover', sizes.icon),
+          })}
         </div>
       ))}
       {overflowCount > 0 && (
diff --git a/client/src/components/MCP/mcpServerUtils.ts b/client/src/components/MCP/mcpServerUtils.ts
index bce5ba5e08..baca7f745a 100644
--- a/client/src/components/MCP/mcpServerUtils.ts
+++ b/client/src/components/MCP/mcpServerUtils.ts
@@ -40,7 +40,7 @@ export function getSelectedServerIcons(
       clickhouseServers.push({
         key: server.serverName,
         serverName: server.serverName,
-        iconPath: 'clickhouse',
+        iconPath: null,
         displayName,
       });
     } else {
diff --git a/client/src/components/MCP/renderMCPIcon.tsx b/client/src/components/MCP/renderMCPIcon.tsx
new file mode 100644
index 0000000000..18e73edb38
--- /dev/null
+++ b/client/src/components/MCP/renderMCPIcon.tsx
@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import { MCPIcon } from '@librechat/client';
+import ClickHouseIcon from './ClickHouseIcon';
+import { cn } from '~/utils';
+
+export interface RenderMCPIconOptions {
+  iconPath?: string | null;
+  serverName?: string;
+  name?: string;
+  displayName?: string;
+  className?: string;
+  alt?: string;
+  fallbackIcon?: ReactNode;
+  wrapDefault?: boolean;
+}
+
+export function renderMCPIcon({
+  iconPath,
+  serverName,
+  name,
+  displayName,
+  className = 'h-8 w-8 rounded-lg object-cover',
+  alt,
+  fallbackIcon,
+  wrapDefault = false,
+}: RenderMCPIconOptions): ReactNode {
+  const altText = alt || displayName || name || serverName || '';
+  const isClickHouse = serverName?.toLowerCase().includes('clickhouse') ?? false;
+
+  if (iconPath) {
+    return <img src={iconPath} className={className} alt={altText} />;
+  }
+
+  if (isClickHouse) {
+    return <ClickHouseIcon className={className} alt={altText} />;
+  }
+
+  if (fallbackIcon) {
+    return fallbackIcon;
+  }
+
+  const defaultIcon = <MCPIcon className={cn('text-text-secondary', className)} />;
+
+  if (wrapDefault) {
+    return (
+      <div
+        className={cn('flex items-center justify-center rounded-lg bg-surface-tertiary', className)}
+      >
+        <MCPIcon
+          className={cn(
+            'h-5 w-5 text-text-secondary',
+            className.includes('size-8') ? 'size-5' : '',
+          )}
+        />
+      </div>
+    );
+  }
+
+  return defaultIcon;
+}
diff --git a/client/src/components/SidePanel/MCPBuilder/MCPServerCard.tsx b/client/src/components/SidePanel/MCPBuilder/MCPServerCard.tsx
index 99f9eee567..5b846633e0 100644
--- a/client/src/components/SidePanel/MCPBuilder/MCPServerCard.tsx
+++ b/client/src/components/SidePanel/MCPBuilder/MCPServerCard.tsx
@@ -1,8 +1,7 @@
 import { useState, useRef } from 'react';
-import { MCPIcon } from '@librechat/client';
 import { PermissionBits, hasPermissions } from 'librechat-data-provider';
 import type { MCPServerStatusIconProps } from '~/components/MCP/MCPServerStatusIcon';
-import ClickHouseIcon from '~/components/MCP/ClickHouseIcon';
+import { renderMCPIcon } from '~/components/MCP/renderMCPIcon';
 import type { MCPServerDefinition } from '~/hooks';
 import { getStatusDotColor } from './MCPStatusBadge';
 import MCPServerDialog from './MCPServerDialog';
@@ -71,29 +70,6 @@ export default function MCPServerCard({
     setDialogOpen(true);
   };
 
-  const renderIcon = () => {
-    if (server.config?.iconPath) {
-      return (
-        <img
-          src={server.config.iconPath}
-          className="size-8 rounded-lg object-cover"
-          alt=""
-          aria-hidden="true"
-        />
-      );
-    }
-
-    if (server.serverName.toLowerCase().includes('clickhouse')) {
-      return <ClickHouseIcon className="size-8 rounded-lg object-cover" alt="" />;
-    }
-
-    return (
-      <div className="flex size-8 items-center justify-center rounded-lg bg-surface-tertiary">
-        <MCPIcon className="size-5 text-text-secondary" aria-hidden="true" />
-      </div>
-    );
-  };
-
   // Determine status text for accessibility
   const getStatusText = () => {
     if (isInitializing) return localize('com_nav_mcp_status_initializing');
@@ -121,7 +97,14 @@ export default function MCPServerCard({
       >
         {/* Server Icon with Status Dot */}
         <div className="relative flex-shrink-0">
-          {renderIcon()}
+          {renderMCPIcon({
+            iconPath: server.config?.iconPath,
+            serverName: server.serverName,
+            displayName,
+            className: 'size-8 rounded-lg object-cover',
+            alt: '',
+            wrapDefault: true,
+          })}
           {/* Status dot - color indicates connection state */}
           <div
             className={cn(
diff --git a/client/src/components/Tools/MCPToolItem.tsx b/client/src/components/Tools/MCPToolItem.tsx
index 07434ebbb8..ba1a34bba3 100644
--- a/client/src/components/Tools/MCPToolItem.tsx
+++ b/client/src/components/Tools/MCPToolItem.tsx
@@ -1,6 +1,6 @@
 import { XCircle, PlusCircleIcon, Wrench } from 'lucide-react';
 import type { AgentToolType } from 'librechat-data-provider';
-import ClickHouseIcon from '~/components/MCP/ClickHouseIcon';
+import { renderMCPIcon } from '~/components/MCP/renderMCPIcon';
 import { useLocalize } from '~/hooks';
 
 type MCPToolItemProps = {
@@ -72,34 +72,23 @@ function MCPToolItem({
 
   const buttonState = getButtonState();
 
-  const renderIcon = () => {
-    if (icon) {
-      return (
-        <img
-          src={icon}
-          alt={localize('com_ui_logo', { 0: name })}
-          className="h-full w-full rounded-[5px] bg-white"
-        />
-      );
-    }
-
-    if (name.toLowerCase().includes('clickhouse')) {
-      return <ClickHouseIcon className="h-full w-full rounded-[5px] object-cover" alt={name} />;
-    }
-
-    return (
-      <div className="flex h-full w-full items-center justify-center rounded-[5px] border border-border-medium bg-transparent">
-        <Wrench className="h-8 w-8 text-text-secondary" />
-      </div>
-    );
-  };
-
   return (
     <div className="flex flex-col gap-4 rounded border border-border-medium bg-transparent p-6">
       <div className="flex gap-4">
         <div className="h-[70px] w-[70px] shrink-0">
           <div className="relative h-full w-full">
-            {renderIcon()}
+            {renderMCPIcon({
+              iconPath: icon,
+              serverName: name,
+              displayName: name,
+              className: 'h-full w-full rounded-[5px] object-cover',
+              alt: localize('com_ui_logo', { 0: name }),
+              fallbackIcon: (
+                <div className="flex h-full w-full items-center justify-center rounded-[5px] border border-border-medium bg-transparent">
+                  <Wrench className="h-8 w-8 text-text-secondary" />
+                </div>
+              ),
+            })}
             <div className="absolute inset-0 rounded-[5px] ring-1 ring-inset ring-black/10"></div>
           </div>
         </div>