feat: add XAIcon component and integrate it into UnknownIcon for endpoint handling

client/public/assets/xai.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" class="bg-white"><path d="m3.005 8.858 8.783 12.544h3.904L6.908 8.858zM6.905 15.825 3 21.402h3.907l1.951-2.788zM16.585 2l-6.75 9.64 1.953 2.79L20.492 2zM17.292 7.965v13.437h3.2V3.395z"></path></svg>

client/src/components/svg/AnthropicMinimalIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function AzureMinimalistIcon() {
+export default function AnthropicMinimalIcon() {
   return (
     <svg
       stroke="currentColor"

client/src/components/svg/XAIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function XAIcon({ className = '' }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      focusable="false"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="m3.005 8.858 8.783 12.544h3.904L6.908 8.858zM6.905 15.825 3 21.402h3.907l1.951-2.788zM16.585 2l-6.75 9.64 1.953 2.79L20.492 2zM17.292 7.965v13.437h3.2V3.395z"></path>
+    </svg>
+  );
+}

client/src/components/svg/index.ts

@@ -57,3 +57,4 @@ export { default as SpeechIcon } from './SpeechIcon';
 export { default as SaveIcon } from './SaveIcon';
 export { default as CircleHelpIcon } from './CircleHelpIcon';
 export { default as BedrockIcon } from './BedrockIcon';
+export { default as XAIcon } from './XAIcon';

client/src/hooks/Endpoint/UnknownIcon.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { EModelEndpoint, KnownEndpoints } from 'librechat-data-provider';
-import { CustomMinimalIcon } from '~/components/svg';
+import { CustomMinimalIcon, XAIcon } from '~/components/svg';
 import { IconContext } from '~/common';
 import { cn } from '~/utils';
 
@@ -20,7 +20,6 @@ const knownEndpointAssets = {
   [KnownEndpoints.shuttleai]: '/assets/shuttleai.png',
   [KnownEndpoints['together.ai']]: '/assets/together.png',
   [KnownEndpoints.unify]: '/assets/unify.webp',
-  [KnownEndpoints.xai]: '/assets/xai.svg',
 };
 
 const knownEndpointClasses = {
@@ -72,6 +71,18 @@ function UnknownIcon({
 
   const currentEndpoint = endpoint.toLowerCase();
 
+  if (currentEndpoint === KnownEndpoints.xai) {
+    return (
+      <XAIcon
+        className={getKnownClass({
+          currentEndpoint,
+          context: context,
+          className,
+        })}
+      />
+    );
+  }
+
   if (iconURL) {
     return <img className={className} src={iconURL} alt={`${endpoint} Icon`} />;
   }