apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-21 18:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: centralize provider icon logic by creating a reusable getProviderIcon function and update components to utilize it

Browse source
This commit is contained in:
Anish Sarkar 2026-02-09 20:48:42 +05:30
parent 147530e1d2
commit 302ee5ad2f
5 changed files with 133 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

37
surfsense_web/components/new-chat/model-selector.tsx
View file

@ -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 <Shuffle className={cn(iconClass, "text-violet-500")} />;
}
switch (provider?.toUpperCase()) {
case "OPENAI":
return <Sparkles className={cn(iconClass, "text-emerald-500")} />;
case "ANTHROPIC":
return <Bot className={cn(iconClass, "text-amber-600")} />;
case "GOOGLE":
return <Cloud className={cn(iconClass, "text-blue-500")} />;
case "GROQ":
return <Zap className={cn(iconClass, "text-orange-500")} />;
case "OLLAMA":
return <Settings2 className={cn(iconClass, "text-gray-500")} />;
case "XAI":
return <Bot className={cn(iconClass, "text-violet-500")} />;
default:
return <Bot className={cn(iconClass, "text-muted-foreground")} />;
}
};
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 })}
<span className="max-w-[100px] md:max-w-[150px] truncate hidden md:inline">
{currentConfig.name}
</span>
@ -283,7 +252,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
<div className="flex items-center justify-between w-full gap-2">
<div className="flex items-center gap-3 min-w-0 flex-1">
<div className="shrink-0">
{getProviderIcon(config.provider, isAutoMode)}
{getProviderIcon(config.provider, { isAutoMode })}
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">

8
surfsense_web/components/settings/image-model-manager.tsx
View file

@ -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 */}
<div className="flex items-center gap-2 flex-wrap">
<Badge
variant="secondary"
className="text-[10px] font-medium px-2 py-0.5 bg-teal-500/10 text-teal-700 dark:text-teal-300 border-teal-500/20"
>
{config.provider}
</Badge>
{getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
{config.model_name}
</code>

55
surfsense_web/components/settings/llm-role-manager.tsx
View file

@ -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)
}
>
<SelectTrigger className="h-9 md:h-10 text-xs md:text-sm">
<SelectTrigger className="w-full h-9 md:h-10 text-xs md:text-sm">
<SelectValue placeholder="Select a configuration" />
</SelectTrigger>
<SelectContent>
<SelectItem value="unassigned">
<SelectContent className="max-w-[calc(100vw-2rem)]">
<SelectItem
value="unassigned"
className="text-xs md:text-sm py-1.5 md:py-2"
>
<span className="text-muted-foreground">
Unassigned
</span>
@ -355,7 +359,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
{/* Global Configurations */}
{globalConfigs.length > 0 && (
<SelectGroup>
<SelectLabel className="text-xs font-semibold text-muted-foreground">
<SelectLabel className="text-[11px] md:text-xs font-semibold text-muted-foreground px-2 py-1 md:py-1.5">
Global Configurations
</SelectLabel>
{globalConfigs.map((config) => {
@ -366,29 +370,25 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
<SelectItem
key={config.id}
value={config.id.toString()}
className="text-xs md:text-sm py-1.5 md:py-2"
>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 md:gap-1.5 flex-wrap min-w-0">
{isAuto ? (
<Badge
variant="outline"
className="text-[10px] bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300 border-violet-200 dark:border-violet-700"
className="text-[9px] md:text-[10px] shrink-0 bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300 border-violet-200 dark:border-violet-700"
>
<Shuffle className="size-2.5 mr-0.5" />
<Shuffle className="size-2 md:size-2.5 mr-0.5" />
AUTO
</Badge>
) : (
<Badge
variant="outline"
className="text-[10px]"
>
{config.provider}
</Badge>
getProviderIcon(config.provider, { className: "size-3 md:size-3.5 shrink-0" })
)}
<span>
<span className="truncate text-xs md:text-sm">
{config.name}
</span>
{!isAuto && (
<span className="text-muted-foreground text-[11px]">
<span className="text-muted-foreground text-[10px] md:text-[11px] truncate">
(
{
config.model_name
@ -399,7 +399,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
{isAuto && (
<Badge
variant="secondary"
className="text-[9px] bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
className="text-[8px] md:text-[9px] shrink-0 bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300"
>
Recommended
</Badge>
@ -414,7 +414,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
{/* Custom Configurations */}
{newLLMConfigs.length > 0 && (
<SelectGroup>
<SelectLabel className="text-xs font-semibold text-muted-foreground">
<SelectLabel className="text-[11px] md:text-xs font-semibold text-muted-foreground px-2 py-1 md:py-1.5">
Your Configurations
</SelectLabel>
{newLLMConfigs
@ -429,18 +429,14 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
<SelectItem
key={config.id}
value={config.id.toString()}
className="text-xs md:text-sm py-1.5 md:py-2"
>
<div className="flex items-center gap-2">
<Badge
variant="outline"
className="text-[10px]"
>
{config.provider}
</Badge>
<span>
<div className="flex items-center gap-1 md:gap-1.5 flex-wrap min-w-0">
{getProviderIcon(config.provider, { className: "size-3 md:size-3.5 shrink-0" })}
<span className="truncate text-xs md:text-sm">
{config.name}
</span>
<span className="text-muted-foreground text-[11px]">
<span className="text-muted-foreground text-[10px] md:text-[11px] truncate">
(
{
config.model_name
@ -501,12 +497,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
)}
</div>
<div className="flex items-center gap-1.5 mt-1">
<Badge
variant="outline"
className="text-[9px] px-1.5 py-0 font-mono"
>
{assignedConfig.provider}
</Badge>
{getProviderIcon(assignedConfig.provider, { className: "size-3 shrink-0" })}
<code className="text-[10px] text-muted-foreground font-mono truncate">
{assignedConfig.model_name}
</code>

8
surfsense_web/components/settings/model-config-manager.tsx
View file

@ -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 */}
<div className="flex items-center gap-2 flex-wrap">
<Badge
variant="secondary"
className="text-[10px] font-medium px-2 py-0.5 bg-violet-500/10 text-violet-700 dark:text-violet-300 border-violet-500/20"
>
{config.provider}
</Badge>
{getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
{config.model_name}
</code>