fix(pricing): sync custom model icons #5224

Merge pull request #5224 from QuantumNous/fix/pricing-model-icons

web/default/src/features/pricing/components/model-card.tsx

@@ -56,8 +56,9 @@ export const ModelCard = memo(function ModelCard(props: ModelCardProps) {
   const tags = parseTags(props.model.tags)
   const groups = props.model.enable_groups || []
   const endpoints = props.model.supported_endpoint_types || []
-  const vendorIcon = props.model.vendor_icon
-    ? getLobeIcon(props.model.vendor_icon, 28)
+  const modelIconKey = props.model.icon || props.model.vendor_icon
+  const modelIcon = modelIconKey
+    ? getLobeIcon(modelIconKey, 28)
     : null
   const initial = props.model.model_name?.charAt(0).toUpperCase() || '?'
   const isDynamicPricing =
@@ -97,7 +98,7 @@ export const ModelCard = memo(function ModelCard(props: ModelCardProps) {
       <div className='flex items-start justify-between gap-2.5 sm:gap-3'>
         <div className='flex min-w-0 items-start gap-2.5 sm:gap-3'>
           <div className='bg-muted/40 flex size-9 shrink-0 items-center justify-center rounded-lg sm:size-10 sm:rounded-xl'>
-            {vendorIcon || (
+            {modelIcon || (
               <span className='text-muted-foreground text-sm font-bold'>
                 {initial}
               </span>

web/default/src/features/pricing/components/model-details.tsx

@@ -268,8 +268,9 @@ function OverviewSummaryGrid(props: { model: PricingModel }) {
 function ModelHeader(props: { model: PricingModel }) {
   const { t } = useTranslation()
   const model = props.model
-  const vendorIcon = model.vendor_icon
-    ? getLobeIcon(model.vendor_icon, 20)
+  const modelIconKey = model.icon || model.vendor_icon
+  const modelIcon = modelIconKey
+    ? getLobeIcon(modelIconKey, 20)
     : null
   const description = model.description || model.vendor_description || null
   const tags = parseTags(model.tags)
@@ -281,7 +282,7 @@ function ModelHeader(props: { model: PricingModel }) {
   return (
     <header className='pb-4'>
       <div className='flex items-center gap-2.5'>
-        {vendorIcon}
+        {modelIcon}
         <h1 className='font-mono text-xl font-bold tracking-tight sm:text-2xl'>
           {model.model_name}
         </h1>

web/default/src/features/pricing/components/pricing-columns.tsx

@@ -106,13 +106,14 @@ export function usePricingColumns(
       ),
       cell: ({ row }) => {
         const model = row.original
-        const vendorIcon = model.vendor_icon
-          ? getLobeIcon(model.vendor_icon, 14)
+        const modelIconKey = model.icon || model.vendor_icon
+        const modelIcon = modelIconKey
+          ? getLobeIcon(modelIconKey, 14)
           : null
 
         return (
           <div className='flex min-w-[200px] items-center gap-2'>
-            {vendorIcon}
+            {modelIcon}
             <span className='truncate font-mono text-sm font-medium'>
               {model.model_name}
             </span>

web/default/src/features/pricing/types.ts

@@ -31,6 +31,7 @@ export type PricingModel = {
   id: number
   model_name: string
   description?: string
+  icon?: string
   vendor_id?: number
   vendor_name?: string
   vendor_icon?: string