diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx index ec1143e04..3f5786a3a 100644 --- a/surfsense_web/components/new-chat/model-selector.tsx +++ b/surfsense_web/components/new-chat/model-selector.tsx @@ -5,15 +5,10 @@ import { Bot, Check, ChevronDown, - Cloud, Edit3, Globe, Plus, - Settings2, - Shuffle, - Sparkles, User, - Zap, } from "lucide-react"; import { useCallback, useMemo, useState } from "react"; import { toast } from "sonner"; @@ -42,33 +37,7 @@ import type { NewLLMConfigPublic, } from "@/contracts/types/new-llm-config.types"; import { cn } from "@/lib/utils"; - -// Provider icons mapping -const getProviderIcon = (provider: string, isAutoMode?: boolean) => { - const iconClass = "size-4"; - - // Special icon for Auto mode - if (isAutoMode || provider?.toUpperCase() === "AUTO") { - return ; - } - - switch (provider?.toUpperCase()) { - case "OPENAI": - return ; - case "ANTHROPIC": - return ; - case "GOOGLE": - return ; - case "GROQ": - return ; - case "OLLAMA": - return ; - case "XAI": - return ; - default: - return ; - } -}; +import { getProviderIcon } from "@/lib/provider-icons"; interface ModelSelectorProps { onEdit: (config: NewLLMConfigPublic | GlobalNewLLMConfig, isGlobal: boolean) => void; @@ -196,7 +165,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp ) : currentConfig ? ( <> - {getProviderIcon(currentConfig.provider, isCurrentAutoMode ?? false)} + {getProviderIcon(currentConfig.provider, { isAutoMode: isCurrentAutoMode ?? false })} {currentConfig.name} @@ -283,7 +252,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
- {getProviderIcon(config.provider, isAutoMode)} + {getProviderIcon(config.provider, { isAutoMode })}
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx index 123cc1a8f..0170fcf8c 100644 --- a/surfsense_web/components/settings/image-model-manager.tsx +++ b/surfsense_web/components/settings/image-model-manager.tsx @@ -78,6 +78,7 @@ import { } from "@/contracts/enums/image-gen-providers"; import type { ImageGenerationConfig } from "@/contracts/types/new-llm-config.types"; import { cn } from "@/lib/utils"; +import { getProviderIcon } from "@/lib/provider-icons"; interface ImageModelManagerProps { searchSpaceId: number; @@ -505,12 +506,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) { {/* Provider + Model */}
- - {config.provider} - + {getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })} {config.model_name} diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx index a0c13d116..c634ffd49 100644 --- a/surfsense_web/components/settings/llm-role-manager.tsx +++ b/surfsense_web/components/settings/llm-role-manager.tsx @@ -37,6 +37,7 @@ import { } from "@/components/ui/select"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; +import { getProviderIcon } from "@/lib/provider-icons"; const ROLE_DESCRIPTIONS = { agent: { @@ -342,11 +343,14 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) { handleRoleAssignment(`${key}_llm_id`, value) } > - + - - + + Unassigned @@ -355,7 +359,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) { {/* Global Configurations */} {globalConfigs.length > 0 && ( - + Global Configurations {globalConfigs.map((config) => { @@ -366,29 +370,25 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) { -
+
{isAuto ? ( - + AUTO ) : ( - - {config.provider} - + getProviderIcon(config.provider, { className: "size-3 md:size-3.5 shrink-0" }) )} - + {config.name} {!isAuto && ( - + ( { config.model_name @@ -399,7 +399,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) { {isAuto && ( Recommended @@ -414,7 +414,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) { {/* Custom Configurations */} {newLLMConfigs.length > 0 && ( - + Your Configurations {newLLMConfigs @@ -429,18 +429,14 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) { -
- - {config.provider} - - +
+ {getProviderIcon(config.provider, { className: "size-3 md:size-3.5 shrink-0" })} + {config.name} - + ( { config.model_name @@ -501,12 +497,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) { )}
- - {assignedConfig.provider} - + {getProviderIcon(assignedConfig.provider, { className: "size-3 shrink-0" })} {assignedConfig.model_name} diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx index 1666fae20..6500c1c6e 100644 --- a/surfsense_web/components/settings/model-config-manager.tsx +++ b/surfsense_web/components/settings/model-config-manager.tsx @@ -52,6 +52,7 @@ import { Spinner } from "@/components/ui/spinner"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import type { NewLLMConfig } from "@/contracts/types/new-llm-config.types"; import { cn } from "@/lib/utils"; +import { getProviderIcon } from "@/lib/provider-icons"; interface ModelConfigManagerProps { searchSpaceId: number; @@ -420,12 +421,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) { {/* Provider + Model */}
- - {config.provider} - + {getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })} {config.model_name} diff --git a/surfsense_web/lib/provider-icons.tsx b/surfsense_web/lib/provider-icons.tsx new file mode 100644 index 000000000..62ed19f61 --- /dev/null +++ b/surfsense_web/lib/provider-icons.tsx @@ -0,0 +1,103 @@ +import { + Bot, + Cloud, + Cpu, + Database, + Globe, + Layers, + Server, + Settings2, + Shuffle, + Sparkles, + Wand2, + Zap, +} from "lucide-react"; +import { cn } from "@/lib/utils"; + +/** + * Returns a Lucide icon element for the given LLM / image-gen provider. + * Accepts an optional `className` override for the icon size. + */ +export function getProviderIcon( + provider: string, + { + isAutoMode, + className = "size-4", + }: { isAutoMode?: boolean; className?: string } = {} +) { + if (isAutoMode || provider?.toUpperCase() === "AUTO") { + return ; + } + + switch (provider?.toUpperCase()) { + case "OPENAI": + return ; + case "ANTHROPIC": + return ; + case "GOOGLE": + return ; + case "AZURE_OPENAI": + return ; + case "GROQ": + return ; + case "OLLAMA": + return ; + case "XAI": + return ; + case "MISTRAL": + return ; + case "DEEPSEEK": + return ; + case "COHERE": + return ; + case "BEDROCK": + return ; + case "VERTEX_AI": + return ; + case "OPENROUTER": + return ; + case "TOGETHER_AI": + return ; + case "FIREWORKS_AI": + return ; + case "PERPLEXITY": + return ; + case "CEREBRAS": + return ; + case "RECRAFT": + return ; + case "REPLICATE": + return ; + case "ALIBABA_QWEN": + return ; + case "MOONSHOT": + return ; + case "ZHIPU": + return ; + case "ANYSCALE": + return ; + case "DEEPINFRA": + return ; + case "SAMBANOVA": + return ; + case "AI21": + return ; + case "CLOUDFLARE": + return ; + case "DATABRICKS": + return ; + case "COMETAPI": + return ; + case "HUGGINGFACE": + return ; + case "CUSTOM": + return ; + case "XINFERENCE": + return ; + case "NSCALE": + return ; + default: + return ; + } +} +