feat(agents-insights): use model icons from platformicons (#94176)

Author: obostjancic

package.json

@@ -144,7 +144,7 @@
     "moment-timezone": "0.5.44",
     "papaparse": "^5.3.2",
     "peggy": "^4.1.1",
-    "platformicons": "^8.0.6",
+    "platformicons": "^8.0.7",
     "po-catalog-loader": "2.1.0",
     "prettier": "3.6.0",
     "prismjs": "^1.30.0",

pnpm-lock.yaml

@@ -13,7 +13,6 @@ export {IconCheckmark} from './iconCheckmark';
 export {IconChevron} from './iconChevron';
 export {IconCircle} from './iconCircle';
 export {IconCircleFill} from './iconCircleFill';
-export {IconClaude} from './iconClaude';
 export {IconClock} from './iconClock';
 export {IconClose} from './iconClose';
 export {IconCode} from './iconCode';
@@ -42,7 +41,6 @@ export {IconFix} from './iconFix';
 export {IconFlag} from './iconFlag';
 export {IconFocus} from './iconFocus';
 export {IconGeneric} from './iconGeneric';
-export {IconGemini} from './iconGemini';
 export {IconGithub} from './iconGithub';
 export {IconGitlab} from './iconGitlab';
 export {IconGlobe} from './iconGlobe';
@@ -77,7 +75,6 @@ export {IconNext} from './iconNext';
 export {IconNot} from './iconNot';
 export {IconNumber} from './iconNumber';
 export {IconOpen} from './iconOpen';
-export {IconOpenAI} from './iconOpenAI';
 export {IconPanel} from './iconPanel';
 export {IconPause} from './iconPause';
 export {IconPin} from './iconPin';

static/app/icons/iconClaude.tsx

@@ -1,32 +1,37 @@
-import {getModelProvider} from './modelName';
+import {getModelPlatform} from './modelName';
 
-// Test suite for getModelProvider function
-describe('getModelProvider Function', () => {
-  it('returns provider for known modelId', () => {
-    expect(getModelProvider('gpt-3')).toBe('openai');
-    expect(getModelProvider('gpt-3.5')).toBe('openai');
-    expect(getModelProvider('gpt-4o')).toBe('openai');
-    expect(getModelProvider('gpt-4o-mini')).toBe('openai');
-    expect(getModelProvider('o1-mini')).toBe('openai');
-    expect(getModelProvider('o3')).toBe('openai');
-    expect(getModelProvider('o4')).toBe('openai');
+// Test suite for getModelPlatform function
+describe('getModelPlatform Function', () => {
+  it('returns platform for known modelId', () => {
+    expect(getModelPlatform('gpt-3')).toBe('openai');
+    expect(getModelPlatform('gpt-3.5')).toBe('openai');
+    expect(getModelPlatform('gpt-4o')).toBe('openai');
+    expect(getModelPlatform('gpt-4o-mini')).toBe('openai');
+    expect(getModelPlatform('o1-mini')).toBe('openai');
+    expect(getModelPlatform('o3')).toBe('openai');
+    expect(getModelPlatform('o4')).toBe('openai');
 
-    expect(getModelProvider('gemini-2.5')).toBe('google');
-    expect(getModelProvider('claude-3.5-sonnet')).toBe('anthropic');
+    expect(getModelPlatform('gemini-2.5')).toBe('google');
+    expect(getModelPlatform('gemma-7b')).toBe('google');
+    expect(getModelPlatform('claude-3.5-sonnet')).toBe('anthropic-claude');
+    expect(getModelPlatform('deepseek-coder')).toBe('deepseek');
+    expect(getModelPlatform('grok-beta')).toBe('grok');
+    expect(getModelPlatform('groq-llama')).toBe('groq');
+    expect(getModelPlatform('mistral-7b')).toBe('mistral');
+    expect(getModelPlatform('perplexity-sonar')).toBe('perplexity');
   });
 
   it('returns null for unknown modelId', () => {
-    expect(getModelProvider('DeepSeek R1')).toBeNull();
-    expect(getModelProvider('Sonar')).toBeNull();
-    expect(getModelProvider('Llama 3.1')).toBeNull();
-    expect(getModelProvider('Qwen 2.5')).toBeNull();
-    expect(getModelProvider('Mistral')).toBeNull();
+    expect(getModelPlatform('unknown-model')).toBeNull();
+    expect(getModelPlatform('Llama 3.1')).toBeNull();
+    expect(getModelPlatform('Qwen 2.5')).toBeNull();
+    expect(getModelPlatform('random-ai-model')).toBeNull();
   });
 
   it('returns provider when provider is explicitly provided', () => {
-    expect(getModelProvider('some-model', 'openai')).toBe('openai');
-    expect(getModelProvider('some-model', 'google')).toBe('google');
-    expect(getModelProvider('some-model', 'anthropic')).toBe('anthropic');
-    expect(getModelProvider('some-model', 'unknown')).toBeNull();
+    expect(getModelPlatform('some-model', 'openai')).toBe('openai');
+    expect(getModelPlatform('some-model', 'google')).toBe('google');
+    expect(getModelPlatform('some-model', 'anthropic')).toBe('anthropic');
+    expect(getModelPlatform('some-model', 'unknown-provider')).toBe('unknown-provider');
   });
 });

static/app/icons/iconGemini.tsx

@@ -1,54 +1,51 @@
+import {PlatformIcon} from 'platformicons';
+
 import {Flex} from 'sentry/components/core/layout';
-import {IconClaude} from 'sentry/icons/iconClaude';
-import {IconGemini} from 'sentry/icons/iconGemini';
-import {IconOpenAI} from 'sentry/icons/iconOpenAI';
-import type {SVGIconProps} from 'sentry/icons/svgIcon';
 import {space} from 'sentry/styles/space';
 
 interface ModelNameProps {
   modelId: string;
   provider?: string;
+  size?: number;
 }
 
-export function ModelName({modelId, provider}: ModelNameProps) {
-  const modelProvider = getModelProvider(modelId, provider);
-
-  const ModelIcon = modelProvider ? providerIconMap[modelProvider] : null;
+export function ModelName({modelId, provider, size = 16}: ModelNameProps) {
+  const platform = getModelPlatform(modelId, provider);
 
   return (
     <Flex gap={space(1)}>
-      <div>{ModelIcon && <ModelIcon size="md" color="textColor" />}</div>
+      <div>
+        <PlatformIcon platform={platform ?? 'unknown'} size={size} />
+      </div>
       <div>{modelId}</div>
     </Flex>
   );
 }
 
-const providerIconMap: Record<KnownProvider, React.ComponentType<SVGIconProps>> = {
-  openai: IconOpenAI,
-  google: IconGemini,
-  anthropic: IconClaude,
-};
-
-type KnownProvider = 'openai' | 'google' | 'anthropic';
+export function getModelPlatform(modelId: string, provider?: string) {
+  if (provider) {
+    return provider;
+  }
 
-export function getModelProvider(modelId: string, provider?: string) {
   const lowerCaseModelId = modelId.toLowerCase();
-  if (provider && provider in providerIconMap) {
-    return provider as KnownProvider;
-  }
-  if (
-    lowerCaseModelId.includes('gpt') ||
-    lowerCaseModelId.includes('o1') ||
-    lowerCaseModelId.includes('o3') ||
-    lowerCaseModelId.includes('o4')
-  ) {
-    return 'openai';
-  }
-  if (lowerCaseModelId.includes('gemma') || lowerCaseModelId.includes('gemini')) {
-    return 'google';
-  }
-  if (lowerCaseModelId.includes('claude')) {
-    return 'anthropic';
+
+  const providerMap = [
+    {keywords: ['gpt', 'o1', 'o3', 'o4'], platform: 'openai'},
+    {keywords: ['gemma', 'gemini'], platform: 'google'},
+    {keywords: ['claude'], platform: 'anthropic-claude'},
+    {keywords: ['deepseek'], platform: 'deepseek'},
+    {keywords: ['grok'], platform: 'grok'},
+    {keywords: ['groq'], platform: 'groq'},
+    {keywords: ['mistral'], platform: 'mistral'},
+    {keywords: ['perplexity'], platform: 'perplexity'},
+  ];
+
+  const matchedProvider = providerMap.find(({keywords}) =>
+    keywords.some(keyword => lowerCaseModelId.includes(keyword))
+  );
+
+  if (matchedProvider) {
+    return matchedProvider.platform;
   }
 
   return null;

static/app/icons/iconOpenAI.tsx

@@ -190,7 +190,7 @@ const BodyCell = memo(function BodyCell({
     case 'model':
       return (
         <ModelCell to={exploreUrl}>
-          <ModelName modelId={dataRow.model} />
+          <ModelName modelId={dataRow.model} size={18} />
         </ModelCell>
       );
     case 'count()':