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
+56 -52
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,57 +896,57 @@ 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
> control={form.control}
<FormField name='price'
control={form.control} render={({ field }) => (
name='price' <FormItem className='contents'>
render={({ field }) => ( <Field>
<FormItem> <FieldLabel>{t('Fixed price')}</FieldLabel>
<FormLabel>{t('Fixed price')}</FormLabel> <FormControl>
<FormControl> <InputGroup>
<InputGroup> <InputGroupAddon>$</InputGroupAddon>
<InputGroupAddon>$</InputGroupAddon> <InputGroupInput
<InputGroupInput inputMode='decimal'
inputMode='decimal' placeholder='0.01'
placeholder='0.01' {...field}
{...field} onChange={(event) => {
onChange={(event) => { const value = event.target.value
const value = event.target.value if (numericDraftRegex.test(value)) {
if (numericDraftRegex.test(value)) { field.onChange(value)
field.onChange(value) }
} }}
}} />
/> <InputGroupAddon align='inline-end'>
<InputGroupAddon align='inline-end'> {t('per request')}
{t('per request')} </InputGroupAddon>
</InputGroupAddon> </InputGroup>
</InputGroup> </FormControl>
</FormControl> <FieldDescription>
<FormDescription> {t(
{t( 'Cost in USD per request, regardless of tokens used.'
'Cost in USD per request, regardless of tokens used.' )}
)} </FieldDescription>
</FormDescription> <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
> modelName={watchedValues.name}
<TieredPricingEditor billingExpr={billingExpr}
modelName={watchedValues.name} requestRuleExpr={requestRuleExpr}
billingExpr={billingExpr} onBillingExprChange={setBillingExpr}
requestRuleExpr={requestRuleExpr} onRequestRuleExprChange={setRequestRuleExpr}
onBillingExprChange={setBillingExpr} />
onRequestRuleExprChange={setRequestRuleExpr} </FieldGroup>
/>
</TabsContent> </TabsContent>
</Tabs> </Tabs>