fix assistant provider icon contrast

apps/nextjs/src/app/[locale]/manage/assistant/_components/assistant-configuration.tsx

@@ -64,11 +64,23 @@ type CredentialFlow = "idle" | "replace" | "remove";
 type AssistantProviderOption = AssistantProvider | "homarr";
 
 const ProviderIcon = ({ providerId, size = 20 }: { providerId: AssistantProviderOption; size?: number }) => {
-  const iconUrl = providerId === "homarr" ? "/logo/logo.png" : assistantProviderPresets[providerId].iconUrl;
-  return iconUrl ? (
-    <Image src={iconUrl} alt="" aria-hidden w={size} h={size} fit="contain" />
-  ) : (
-    <IconWorld size={size} aria-hidden />
+  if (providerId === "homarr") {
+    return <Image src="/logo/logo.png" alt="" aria-hidden w={size} h={size} fit="contain" />;
+  }
+
+  const preset = assistantProviderPresets[providerId];
+  if (!preset.iconUrl) return <IconWorld size={size} aria-hidden />;
+
+  const darkIconUrl = "darkIconUrl" in preset ? preset.darkIconUrl : null;
+  if (!darkIconUrl) {
+    return <Image src={preset.iconUrl} alt="" aria-hidden w={size} h={size} fit="contain" />;
+  }
+
+  return (
+    <>
+      <Image src={preset.iconUrl} alt="" aria-hidden w={size} h={size} fit="contain" darkHidden />
+      <Image src={darkIconUrl} alt="" aria-hidden w={size} h={size} fit="contain" lightHidden />
+    </>
   );
 };
 

packages/api/src/test/assistant-providers.spec.ts

@@ -30,7 +30,7 @@ describe("assistant provider presets", () => {
   });
 
   test.each(assistantProviderIds.filter((provider) => provider !== "custom"))(
-    "%s has a Dashboard Icons provider mark",
+    "%s has a valid provider mark",
     (provider) => {
       const iconUrl = assistantProviderPresets[provider].iconUrl;
       expect(iconUrl).not.toBeNull();
@@ -38,6 +38,12 @@ describe("assistant provider presets", () => {
     },
   );
 
+  test("uses Groq's high-contrast LobeHub mark in dark mode", () => {
+    expect(assistantProviderPresets.groq.darkIconUrl).toBe(
+      "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/dark/groq.png",
+    );
+  });
+
   test("keeps the display label separate from the provider model ID", () => {
     const model = {
       id: "deepseek/deepseek-v4-pro",

packages/definitions/src/assistant.ts

@@ -39,6 +39,7 @@ interface AssistantProviderPreset {
   category: AssistantProviderCategory;
   discoveryAuthentication: "bearer" | "anthropic";
   iconUrl: string | null;
+  darkIconUrl?: string;
 }
 
 export const assistantProviderPresets = {
@@ -89,6 +90,7 @@ export const assistantProviderPresets = {
     category: "hosted",
     discoveryAuthentication: "bearer",
     iconUrl: `${providerIconBaseUrl}/groq.svg`,
+    darkIconUrl: "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-png@latest/dark/groq.png",
   },
   mistral: {
     baseUrl: "https://api.mistral.ai/v1",