Ensure consistent UX (#4222)

* ux consistent

* nit

* Update web/src/app/admin/configuration/llm/interfaces.ts

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

web/src/app/admin/configuration/llm/interfaces.ts

@@ -1,17 +1,14 @@
 import {
   AnthropicIcon,
   AmazonIcon,
-  AWSIcon,
-  AzureIcon,
   CPUIcon,
   MicrosoftIconSVG,
   MistralIcon,
   MetaIcon,
   GeminiIcon,
-  AnthropicSVG,
   IconProps,
-  OpenAIISVG,
   DeepseekIcon,
+  OpenAISVG,
 } from "@/components/icons/icons";
 
 export interface CustomConfigKey {
@@ -74,7 +71,7 @@ export interface LLMProviderDescriptor {
 }
 
 export const getProviderIcon = (providerName: string, modelName?: string) => {
-  const modelIconMap: Record<
+  const iconMap: Record<
     string,
     ({ size, className }: IconProps) => JSX.Element
   > = {
@@ -86,34 +83,30 @@ export const getProviderIcon = (providerName: string, modelName?: string) => {
     gemini: GeminiIcon,
     deepseek: DeepseekIcon,
     claude: AnthropicIcon,
+    anthropic: AnthropicIcon,
+    openai: OpenAISVG,
+    microsoft: MicrosoftIconSVG,
+    meta: MetaIcon,
+    google: GeminiIcon,
   };
 
-  const modelNameToIcon = (
+  // First check if provider name directly matches an icon
-    modelName: string,
+  if (providerName.toLowerCase() in iconMap) {
-    fallbackIcon: ({ size, className }: IconProps) => JSX.Element
+    return iconMap[providerName.toLowerCase()];
-  ): (({ size, className }: IconProps) => JSX.Element) => {
+  }
-    const lowerModelName = modelName?.toLowerCase();
+
-    for (const [key, icon] of Object.entries(modelIconMap)) {
+  // Then check if model name contains any of the keys
-      if (lowerModelName?.includes(key)) {
+  if (modelName) {
+    const lowerModelName = modelName.toLowerCase();
+    for (const [key, icon] of Object.entries(iconMap)) {
+      if (lowerModelName.includes(key)) {
         return icon;
       }
     }
-    return fallbackIcon;
-  };
-
-  switch (providerName) {
-    case "openai":
-      // Special cases for openai based on modelName
-      return modelNameToIcon(modelName || "", OpenAIISVG);
-    case "anthropic":
-      return AnthropicSVG;
-    case "bedrock":
-      return AWSIcon;
-    case "azure":
-      return AzureIcon;
-    default:
-      return modelNameToIcon(modelName || "", CPUIcon);
   }
+
+  // Fallback to CPU icon if no matches
+  return CPUIcon;
 };
 
 export const isAnthropic = (provider: string, modelName: string) =>

web/src/app/admin/indexing/status/FilterComponent.tsx

@@ -185,7 +185,10 @@ export const FilterComponent = forwardRef<
               hasActiveFilters ? "border-primary bg-primary/5" : ""
             }`}
           >
-            <SortIcon size={20} className="text-neutral-800" />
+            <SortIcon
+              size={20}
+              className="text-neutral-800 dark:text-neutral-200"
+            />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
@@ -365,7 +368,7 @@ export const FilterComponent = forwardRef<
 
       {hasActiveFilters && (
         <div className="absolute -top-1 -right-1">
-          <Badge className="h-2 bg-red-400 border-red-400 w-2 p-0 border-2 flex items-center justify-center" />
+          <Badge className="h-2 !bg-red-400 !border-red-400 w-2 p-0 border-2 flex items-center justify-center" />
         </div>
       )}
     </div>

web/src/components/icons/icons.tsx

@@ -3102,27 +3102,6 @@ export const OpenAISVG = ({
   );
 };
 
-export const AnthropicSVG = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <svg
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 92.2 65"
-      xmlSpace="preserve"
-      fill="currentColor"
-    >
-      <path
-        fill="currentColor"
-        d="M66.5,0H52.4l25.7,65h14.1L66.5,0z M25.7,0L0,65h14.4l5.3-13.6h26.9L51.8,65h14.4L40.5,0C40.5,0,25.7,0,25.7,0z M24.3,39.3l8.8-22.8l8.8,22.8H24.3z"
-      />
-    </svg>
-  );
-};
-
 export const SourcesIcon = ({
   size = 16,
   className = defaultTailwindCSS,