chaos/chaos-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(model-pricing): align pricing mode editor spacing

Browse Source 
- add consistent tab and field spacing so each pricing mode keeps the same visual rhythm.
- wrap per-request and tiered sections in shared field groups to match the per-token form structure.
- keep fixed-price descriptions and validation messages aligned with the updated field layout.
This commit is contained in:
QuentinHsu
2026-06-03 18:27:07 +08:00
parent abad0d3cc0
commit 9e59ffc3d8
1 changed files with 56 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/system-settings/models/model-pricing-sheet.tsx
Vendored
+19 -15
View File
@@ -839,7 +839,11 @@ export const ModelPricingEditorPanel = forwardRef<
)} )}
/> />
<Tabs value={pricingMode} onValueChange={handleModeChange}> <Tabs
value={pricingMode}
onValueChange={handleModeChange}
className='gap-4'
>
<TabsList className='grid w-full grid-cols-3'> <TabsList className='grid w-full grid-cols-3'>
<TabsTrigger value='per-token'>{t('Per-token')}</TabsTrigger> <TabsTrigger value='per-token'>{t('Per-token')}</TabsTrigger>
<TabsTrigger value='per-request'> <TabsTrigger value='per-request'>
@@ -850,8 +854,8 @@ export const ModelPricingEditorPanel = forwardRef<
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<TabsContent value='per-token' className='flex flex-col gap-5'> <TabsContent value='per-token' className='pt-0'>
<FieldGroup> <FieldGroup className='gap-5'>
<Field> <Field>
<FieldLabel>{t('Input price')}</FieldLabel> <FieldLabel>{t('Input price')}</FieldLabel>
<PriceInput <PriceInput
@@ -892,16 +896,15 @@ export const ModelPricingEditorPanel = forwardRef<
</FieldGroup> </FieldGroup>
</TabsContent> </TabsContent>
<TabsContent <TabsContent value='per-request' className='pt-0'>
value='per-request' <FieldGroup className='gap-5'>
className='flex flex-col gap-5'
>
<FormField <FormField
control={form.control} control={form.control}
name='price' name='price'
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className='contents'>
<FormLabel>{t('Fixed price')}</FormLabel> <Field>
<FieldLabel>{t('Fixed price')}</FieldLabel>
<FormControl> <FormControl>
<InputGroup> <InputGroup>
<InputGroupAddon>$</InputGroupAddon> <InputGroupAddon>$</InputGroupAddon>
@@ -921,21 +924,21 @@ export const ModelPricingEditorPanel = forwardRef<
</InputGroupAddon> </InputGroupAddon>
</InputGroup> </InputGroup>
</FormControl> </FormControl>
<FormDescription> <FieldDescription>
{t( {t(
'Cost in USD per request, regardless of tokens used.' 'Cost in USD per request, regardless of tokens used.'
)} )}
</FormDescription> </FieldDescription>
<FormMessage /> <FormMessage />
</Field>
</FormItem> </FormItem>
)} )}
/> />
</FieldGroup>
</TabsContent> </TabsContent>
<TabsContent <TabsContent value='tiered_expr' className='pt-0'>
value='tiered_expr' <FieldGroup className='gap-5'>
className='flex flex-col gap-5'
>
<TieredPricingEditor <TieredPricingEditor
modelName={watchedValues.name} modelName={watchedValues.name}
billingExpr={billingExpr} billingExpr={billingExpr}
@@ -943,6 +946,7 @@ export const ModelPricingEditorPanel = forwardRef<
onBillingExprChange={setBillingExpr} onBillingExprChange={setBillingExpr}
onRequestRuleExprChange={setRequestRuleExpr} onRequestRuleExprChange={setRequestRuleExpr}
/> />
</FieldGroup>
</TabsContent> </TabsContent>
</Tabs> </Tabs>