@@ -17,6 +17,26 @@ type ModelInfoViewProps = {
1717 hidePricing ?: boolean
1818}
1919
20+ type TierPricingRowProps = {
21+ tier : OpenAiServiceTier
22+ label : string
23+ modelInfo ?: ModelInfo
24+ }
25+
26+ const TierPricingRow = ( { tier, label, modelInfo } : TierPricingRowProps ) => {
27+ const tierInfo = modelInfo ?. tiers ?. find ( ( { name } ) => name === tier )
28+ const fmt = ( price ?: number ) => ( typeof price === "number" ? formatPrice ( price ) : "—" )
29+
30+ return (
31+ < tr className = "border-t border-vscode-dropdown-border/60" >
32+ < td className = "px-3 py-1.5" > { label } </ td >
33+ < td className = "px-3 py-1.5 text-right" > { fmt ( tierInfo ?. inputPrice ?? modelInfo ?. inputPrice ) } </ td >
34+ < td className = "px-3 py-1.5 text-right" > { fmt ( tierInfo ?. outputPrice ?? modelInfo ?. outputPrice ) } </ td >
35+ < td className = "px-3 py-1.5 text-right" > { fmt ( tierInfo ?. cacheReadsPrice ?? modelInfo ?. cacheReadsPrice ) } </ td >
36+ </ tr >
37+ )
38+ }
39+
2040export const ModelInfoView = ( {
2141 apiProvider,
2242 selectedModelId,
@@ -33,7 +53,7 @@ export const ModelInfoView = ({
3353 ?. filter ( ( t ) => t . name === OpenAiServiceTier . Flex || t . name === OpenAiServiceTier . Priority )
3454 ?. map ( ( t ) => t . name ) ?? [ ]
3555 const shouldShowTierPricingTable = apiProvider === providerIdentifiers . openaiNative && allowedTierNames . length > 0
36- const fmt = ( n ?: number ) => ( typeof n === "number" ? ` ${ formatPrice ( n ) } ` : "—" )
56+ const fmt = ( n ?: number ) => ( typeof n === "number" ? formatPrice ( n ) : "—" )
3757
3858 const baseInfoItems = [
3959 typeof modelInfo ?. contextWindow === "number" && modelInfo . contextWindow > 0 && (
@@ -147,50 +167,18 @@ export const ModelInfoView = ({
147167 < td className = "px-3 py-1.5 text-right" > { fmt ( modelInfo ?. cacheReadsPrice ) } </ td >
148168 </ tr >
149169 { allowedTierNames . includes ( OpenAiServiceTier . Flex ) && (
150- < tr className = "border-t border-vscode-dropdown-border/60" >
151- < td className = "px-3 py-1.5" > { t ( "settings:serviceTier.flex" ) } </ td >
152- < td className = "px-3 py-1.5 text-right" >
153- { fmt (
154- modelInfo ?. tiers ?. find ( ( t ) => t . name === OpenAiServiceTier . Flex )
155- ?. inputPrice ?? modelInfo ?. inputPrice ,
156- ) }
157- </ td >
158- < td className = "px-3 py-1.5 text-right" >
159- { fmt (
160- modelInfo ?. tiers ?. find ( ( t ) => t . name === OpenAiServiceTier . Flex )
161- ?. outputPrice ?? modelInfo ?. outputPrice ,
162- ) }
163- </ td >
164- < td className = "px-3 py-1.5 text-right" >
165- { fmt (
166- modelInfo ?. tiers ?. find ( ( t ) => t . name === OpenAiServiceTier . Flex )
167- ?. cacheReadsPrice ?? modelInfo ?. cacheReadsPrice ,
168- ) }
169- </ td >
170- </ tr >
170+ < TierPricingRow
171+ tier = { OpenAiServiceTier . Flex }
172+ label = { t ( "settings:serviceTier.flex" ) }
173+ modelInfo = { modelInfo }
174+ />
171175 ) }
172176 { allowedTierNames . includes ( OpenAiServiceTier . Priority ) && (
173- < tr className = "border-t border-vscode-dropdown-border/60" >
174- < td className = "px-3 py-1.5" > { t ( "settings:serviceTier.priority" ) } </ td >
175- < td className = "px-3 py-1.5 text-right" >
176- { fmt (
177- modelInfo ?. tiers ?. find ( ( t ) => t . name === OpenAiServiceTier . Priority )
178- ?. inputPrice ?? modelInfo ?. inputPrice ,
179- ) }
180- </ td >
181- < td className = "px-3 py-1.5 text-right" >
182- { fmt (
183- modelInfo ?. tiers ?. find ( ( t ) => t . name === OpenAiServiceTier . Priority )
184- ?. outputPrice ?? modelInfo ?. outputPrice ,
185- ) }
186- </ td >
187- < td className = "px-3 py-1.5 text-right" >
188- { fmt (
189- modelInfo ?. tiers ?. find ( ( t ) => t . name === OpenAiServiceTier . Priority )
190- ?. cacheReadsPrice ?? modelInfo ?. cacheReadsPrice ,
191- ) }
192- </ td >
193- </ tr >
177+ < TierPricingRow
178+ tier = { OpenAiServiceTier . Priority }
179+ label = { t ( "settings:serviceTier.priority" ) }
180+ modelInfo = { modelInfo }
181+ />
194182 ) }
195183 </ tbody >
196184 </ table >
0 commit comments