Add xAI Provider Support for Grok Models (#2976)

Co-authored-by: jack <jack@deck.local>

ui/desktop/src/components/settings/providers/ProviderRegistry.tsx

@@ -97,6 +97,25 @@ export const PROVIDER_REGISTRY: ProviderRegistry[] = [
       ],
     },
   },
+  {
+    name: 'xAI',
+    details: {
+      id: 'xai',
+      name: 'xAI',
+      description: 'Access Grok models from xAI, including reasoning and multimodal capabilities',
+      parameters: [
+        {
+          name: 'XAI_API_KEY',
+          is_secret: true,
+        },
+        {
+          name: 'XAI_HOST',
+          is_secret: false,
+          default: 'https://api.x.ai/v1',
+        },
+      ],
+    },
+  },
   {
     name: 'Google',
     details: {

ui/desktop/src/components/settings/providers/modal/subcomponents/ProviderLogo.tsx

@@ -6,6 +6,7 @@ import OllamaLogo from './icons/ollama@3x.png';
 import DatabricksLogo from './icons/databricks@3x.png';
 import OpenRouterLogo from './icons/openrouter@3x.png';
 import SnowflakeLogo from './icons/snowflake@3x.png';
+import XaiLogo from './icons/xai@3x.png';
 import DefaultLogo from './icons/default@3x.png';
 
 // Map provider names to their logos
@@ -18,6 +19,7 @@ const providerLogos: Record<string, string> = {
   databricks: DatabricksLogo,
   openrouter: OpenRouterLogo,
   snowflake: SnowflakeLogo,
+  xai: XaiLogo,
   default: DefaultLogo,
 };
 
@@ -30,10 +32,24 @@ export default function ProviderLogo({ providerName }: ProviderLogoProps) {
   const logoKey = providerName.toLowerCase();
   const logo = providerLogos[logoKey] || DefaultLogo;
 
+  // Special handling for xAI logo
+  const isXai = logoKey === 'xai';
+  const imageStyle = isXai ? { filter: 'invert(1)', opacity: 0.9 } : {};
+
+  // Use smaller size for xAI logo to fit better in circle
+  const imageClassName = isXai
+    ? 'w-8 h-8 object-contain' // Smaller size for xAI
+    : 'w-16 h-16 object-contain'; // Default size for others
+
   return (
     <div className="flex justify-center mb-2">
       <div className="w-12 h-12 bg-black rounded-full overflow-hidden flex items-center justify-center">
-        <img src={logo} alt={`${providerName} logo`} className="w-16 h-16 object-contain" />
+        <img
+          src={logo}
+          alt={`${providerName} logo`}
+          className={imageClassName}
+          style={imageStyle}
+        />
       </div>
     </div>
   );