feat: incorporate model provider icons in UI

Signed-off-by: Donnie Adams <[email protected]>
obot-platform · Dec 5, 2024 · 64593b8 · 64593b8
1 parent 66b6f44
commit 64593b8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/ui/admin/app/components/model-providers/ModelProviderLists.tsx b/ui/admin/app/components/model-providers/ModelProviderLists.tsx
@@ -2,6 +2,7 @@ import { BoxesIcon, CircleCheckIcon, CircleSlashIcon } from "lucide-react";
 import useSWR from "swr";
 
 import { ModelProviderApiService } from "~/lib/service/api/modelProviderApiService";
+import { cn } from "~/lib/utils";
 
 import { ModelProviderConfigure } from "~/components/model-providers/ModelProviderConfigure";
 import { Card, CardContent, CardHeader } from "~/components/ui/card";
@@ -25,7 +26,19 @@ export function ModelProviderList() {
                         </CardHeader>
                         <CardContent className="flex flex-col items-center gap-4">
                             <div className="w-16 h-16">
-                                <BoxesIcon className="w-16 h-16 color-primary" />
+                                {modelProvider.icon ? (
+                                    <img
+                                        src={modelProvider.icon}
+                                        alt={modelProvider.name}
+                                        className={cn("w-16 h-16", {
+                                            "dark:invert":
+                                                modelProvider.name !==
+                                                "Azure OpenAI",
+                                        })}
+                                    />
+                                ) : (
+                                    <BoxesIcon className="w-16 h-16 color-primary" />
+                                )}
                             </div>
                             <div className="text-lg font-semibold">
                                 {modelProvider.name}

diff --git a/ui/admin/app/lib/model/modelProviders.ts b/ui/admin/app/lib/model/modelProviders.ts
@@ -2,6 +2,7 @@ import { EntityMeta } from "~/lib/model/primitives";
 
 export type ModelProviderStatus = {
     configured: boolean;
+    icon?: string;
     requiredConfigurationParameters?: string[];
     missingConfigurationParameters?: string[];
 };