chore: Colorize new OpenAI LLM versions (#20463)

Co-authored-by: Davide Delbianco <davide.delbianco@zucchetti.it>

web/app/components/base/icons/src/public/llm/OpenaiTale.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './OpenaiTale.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'OpenaiTale'
+
+export default Icon

web/app/components/base/icons/src/public/llm/OpenaiYellow.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './OpenaiYellow.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'OpenaiYellow'
+
+export default Icon

web/app/components/base/icons/src/public/llm/index.ts

@@ -30,7 +30,9 @@ export { default as OpenaiBlue } from './OpenaiBlue'
 export { default as OpenaiGreen } from './OpenaiGreen'
 export { default as OpenaiText } from './OpenaiText'
 export { default as OpenaiTransparent } from './OpenaiTransparent'
+export { default as OpenaiTale } from './OpenaiTale'
 export { default as OpenaiViolet } from './OpenaiViolet'
+export { default as OpenaiYellow } from './OpenaiYellow'
 export { default as OpenllmText } from './OpenllmText'
 export { default as Openllm } from './Openllm'
 export { default as ReplicateText } from './ReplicateText'

web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx

@@ -5,7 +5,7 @@ import type {
 } from '../declarations'
 import { useLanguage } from '../hooks'
 import { Group } from '@/app/components/base/icons/src/vender/other'
-import { OpenaiBlue, OpenaiViolet } from '@/app/components/base/icons/src/public/llm'
+import { OpenaiBlue, OpenaiTale, OpenaiViolet, OpenaiYellow } from '@/app/components/base/icons/src/public/llm'
 import cn from '@/utils/classnames'
 import { renderI18nObject } from '@/i18n'
 
@@ -22,6 +22,10 @@ const ModelIcon: FC<ModelIconProps> = ({
   isDeprecated = false,
 }) => {
   const language = useLanguage()
+  if (provider?.provider && ['openai', 'langgenius/openai/openai'].includes(provider.provider) && modelName?.startsWith('o'))
+    return <div className='flex items-center justify-center'><OpenaiYellow className={cn('h-5 w-5', className)} /></div>
+  if (provider?.provider && ['openai', 'langgenius/openai/openai'].includes(provider.provider) && modelName?.includes('gpt-4.1'))
+    return <div className='flex items-center justify-center'><OpenaiTale className={cn('h-5 w-5', className)} /></div>
   if (provider?.provider && ['openai', 'langgenius/openai/openai'].includes(provider.provider) && modelName?.includes('gpt-4o'))
     return <div className='flex items-center justify-center'><OpenaiBlue className={cn('h-5 w-5', className)} /></div>
   if (provider?.provider && ['openai', 'langgenius/openai/openai'].includes(provider.provider) && modelName?.startsWith('gpt-4'))