)}
+ {isDoubaoVideoChannel && (
+
+
}
+ />
+
+
(
+
+
+
+ {t('Completion delta settlement')}
+
+
+ {t(
+ 'Recalculate successful DoubaoVideo tasks from upstream usage tokens when polling completes; turn this off only for emergency containment because successful tasks will keep the pre-consumed quota.'
+ )}
+
+
+
+
+
+ )}
+ />
+
+
+ )}
{isVideoTaskChannel && videoTaskProtocolEnabled && (
{
- form.setValue('models', formatModelsArray(models))
+ form.setValue('models', formatModelsArray(models), {
+ shouldDirty: true,
+ shouldValidate: true,
+ })
}}
redirectModels={redirectModelList}
redirectSourceModels={redirectModelKeyList}
diff --git a/web/default/src/features/channels/components/drawers/sections/channel-auth-section.tsx b/web/default/src/features/channels/components/drawers/sections/channel-auth-section.tsx
index ab056593..6af709d3 100644
--- a/web/default/src/features/channels/components/drawers/sections/channel-auth-section.tsx
+++ b/web/default/src/features/channels/components/drawers/sections/channel-auth-section.tsx
@@ -34,7 +34,7 @@ export function ChannelAuthSection(props: ChannelAuthSectionProps) {
className='text-muted-foreground h-3.5 w-3.5'
aria-hidden='true'
/>
-
+
{t('Authentication')}
diff --git a/web/default/src/features/channels/components/drawers/sections/channel-basic-section.tsx b/web/default/src/features/channels/components/drawers/sections/channel-basic-section.tsx
index 63af16de..eb126712 100644
--- a/web/default/src/features/channels/components/drawers/sections/channel-basic-section.tsx
+++ b/web/default/src/features/channels/components/drawers/sections/channel-basic-section.tsx
@@ -16,20 +16,41 @@ along with this program. If not, see
.
For commercial licensing, please contact https://github.com/MAX-API-Next/MAX-API/issues
*/
-import type { ReactNode } from 'react'
+import { useFormContext, useWatch } from 'react-hook-form'
import { Server } from 'lucide-react'
import { useTranslation } from 'react-i18next'
+import { Combobox } from '@/components/ui/combobox'
+import type { ComboboxInputOption } from '@/components/ui/combobox-input'
+import {
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Switch } from '@/components/ui/switch'
import {
SideDrawerSection,
SideDrawerSectionHeader,
+ sideDrawerSwitchItemClassName,
} from '@/components/drawer-layout'
+import { FIELD_DESCRIPTIONS, FIELD_PLACEHOLDERS } from '../../../constants'
+import {
+ getChannelTypeScopedFieldDefaults,
+ type ChannelFormValues,
+} from '../../../lib'
type ChannelBasicSectionProps = {
- children: ReactNode
+ channelTypeOptions: ComboboxInputOption[]
+ isEditing: boolean
}
export function ChannelBasicSection(props: ChannelBasicSectionProps) {
const { t } = useTranslation()
+ const form = useFormContext
()
+ const currentType = useWatch({ control: form.control, name: 'type' })
return (
@@ -38,7 +59,103 @@ export function ChannelBasicSection(props: ChannelBasicSectionProps) {
description={t('Name, provider type, and availability.')}
icon={
+ (
+
+ {t('Name *')}
+
+
+
+ )}
+ />
+
+ (
+
+ {t('Type *')}
+
+ {
+ const nextType = Number(value)
+ if (Number.isInteger(nextType) && nextType > 0) {
+ field.onChange(nextType)
+ if (!props.isEditing && nextType !== field.value) {
+ const scopedDefaults =
+ getChannelTypeScopedFieldDefaults(nextType)
+ form.setValue('base_url', scopedDefaults.base_url, {
+ shouldDirty: true,
+ shouldTouch: true,
+ shouldValidate: true,
+ })
+ form.setValue('other', scopedDefaults.other, {
+ shouldDirty: true,
+ shouldTouch: true,
+ shouldValidate: true,
+ })
+ }
+ }
+ }}
+ placeholder={t('Select channel type')}
+ searchPlaceholder={t('Search channel type...')}
+ emptyText={t('No channel type found.')}
+ allowCustomValue
+ />
+
+
+ )}
+ />
+
+
+ (
+
+
+ {t('Enabled')}
+
+ {t('Enable or disable this channel')}
+
+
+
+ field.onChange(checked ? 1 : 2)}
+ />
+
+
+ )}
+ />
+
+ {currentType === 1 && (
+ (
+
+ {t('OpenAI Organization')}
+
+
+
+ {t(FIELD_DESCRIPTIONS.OPENAI_ORG)}
+
+
+ )}
+ />
+ )}
)
}
diff --git a/web/default/src/features/channels/components/drawers/sections/channel-models-section.test.tsx b/web/default/src/features/channels/components/drawers/sections/channel-models-section.test.tsx
new file mode 100644
index 00000000..05abd5b4
--- /dev/null
+++ b/web/default/src/features/channels/components/drawers/sections/channel-models-section.test.tsx
@@ -0,0 +1,94 @@
+/*
+Copyright (C) 2023-2026 MAX-API-Next
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see ({
+ defaultValues: {
+ ...CHANNEL_FORM_DEFAULT_VALUES,
+ models: selectedModels.join(','),
+ model_mapping: JSON.stringify({
+ 'public-model': selectedModels[0],
+ }),
+ },
+ })
+
+ return (
+
+ )
+}
+
+describe('ChannelModelsSection', () => {
+ test('caps selected chips while preserving the complete model count', () => {
+ const markup = renderToStaticMarkup(
+
+
+ )
+
+ assert.match(markup, /Selected 8/)
+ assert.match(markup, /\+2 more/)
+ assert.doesNotMatch(markup, />long-vendor-model-7long-vendor-model-8 {
+ const markup = renderToStaticMarkup(
+
+
+ )
+
+ assert.match(markup, /\[overflow-wrap:anywhere\]/)
+ assert.match(markup, /aria-describedby="[^"]+-form-item-description"/)
+ })
+})
diff --git a/web/default/src/features/channels/components/drawers/sections/channel-models-section.tsx b/web/default/src/features/channels/components/drawers/sections/channel-models-section.tsx
index f68388e7..88a0085f 100644
--- a/web/default/src/features/channels/components/drawers/sections/channel-models-section.tsx
+++ b/web/default/src/features/channels/components/drawers/sections/channel-models-section.tsx
@@ -16,20 +16,141 @@ along with this program. If not, see ()
+ const { copyToClipboard } = useCopyToClipboard()
+ const currentType = useWatch({ control: form.control, name: 'type' })
+ const currentModels = useWatch({ control: form.control, name: 'models' })
+ const currentModelMapping = useWatch({
+ control: form.control,
+ name: 'model_mapping',
+ })
+
+ const currentModelsArray = useMemo(
+ () => parseModelsString(currentModels),
+ [currentModels]
+ )
+ const modelOptions = useMemo(() => {
+ const models = new Set([...props.allModels, ...currentModelsArray])
+ return Array.from(models).map((model) => ({ value: model, label: model }))
+ }, [props.allModels, currentModelsArray])
+ const modelMappingGuardrail = useMemo(
+ () => getModelMappingGuardrail(currentModelMapping, currentModelsArray),
+ [currentModelMapping, currentModelsArray]
+ )
+ const mappingPreviewPairs =
+ modelMappingGuardrail.entries.length > 0
+ ? modelMappingGuardrail.entries.slice(0, 3)
+ : MODEL_MAPPING_PREVIEW_FALLBACK
+ const remainingMappingCount = Math.max(
+ modelMappingGuardrail.entries.length - mappingPreviewPairs.length,
+ 0
+ )
+
+ const updateModels = useCallback(
+ (newModels: string[], merge = false) => {
+ const finalModels = merge
+ ? formatModelsArray([...currentModelsArray, ...newModels])
+ : formatModelsArray(newModels)
+ form.setValue('models', finalModels, {
+ shouldDirty: true,
+ shouldValidate: true,
+ })
+ return newModels.length
+ },
+ [currentModelsArray, form]
+ )
+
+ const handleAddPrefillGroup = (group: ChannelModelPrefillGroup) => {
+ try {
+ const items = Array.isArray(group.items)
+ ? group.items
+ : JSON.parse(group.items)
+ if (!Array.isArray(items)) throw new Error('Invalid items format')
+
+ const count = updateModels(items, true)
+ toast.success(
+ t('Added {{count}} models from "{{name}}"', {
+ count,
+ name: group.name,
+ })
+ )
+ } catch {
+ toast.error(t('Failed to parse group items'))
+ }
+ }
return (
@@ -38,7 +159,338 @@ export function ChannelModelsSection(props: ChannelModelsSectionProps) {
description={t('Published models, groups, and model remapping rules.')}
icon={
+
+
(
+
+
+
+ {t('Models *')}
+
+ {t(FIELD_DESCRIPTIONS.MODELS)}
+
+
+
+ {t('Selected {{count}}', {
+ count: currentModelsArray.length,
+ })}
+
+
+
+ {modelMappingGuardrail.exposedTargetModels.length > 0 && (
+
+
+
+ {t('The mapped upstream model(s)')}{' '}
+ {formatModelNames(
+ modelMappingGuardrail.exposedTargetModels
+ )}{' '}
+ {t(
+ 'are also listed here. Remove them from Models to keep the `/v1/models` response user-friendly and hide vendor-specific names.'
+ )}
+
+ {
+ const hiddenTargets = new Set(
+ modelMappingGuardrail.exposedTargetModels
+ )
+ updateModels(
+ currentModelsArray.filter(
+ (model) => !hiddenTargets.has(model)
+ )
+ )
+ }}
+ >
+ {t('Remove mapped targets')}
+
+
+
+ )}
+
+ )}
+ />
+
+
+
+
{t('Quick actions')}
+
+ {t(
+ 'Use presets or upstream discovery to populate the model list faster.'
+ )}
+
+
+
+
{
+ updateModels(props.basicModels)
+ toast.success(
+ t('Filled {{count}} related model(s)', {
+ count: props.basicModels.length,
+ })
+ )
+ }}
+ disabled={!props.basicModels.length}
+ >
+
+
{
+ updateModels(props.allModels)
+ toast.success(
+ t('Filled {{count}} model(s)', {
+ count: props.allModels.length,
+ })
+ )
+ }}
+ disabled={!props.allModels.length}
+ >
+
+ {MODEL_FETCHABLE_TYPES.has(currentType) && (
+
+
+ )}
+
copyToClipboard(currentModels || '')}
+ disabled={currentModelsArray.length === 0}
+ >
+
+
{
+ updateModels([])
+ toast.success(t('Cleared all models'))
+ }}
+ disabled={currentModelsArray.length === 0}
+ >
+
+
+ {props.prefillGroups.length > 0 && (
+
+
+ {t('Preset groups')}:
+
+ {props.prefillGroups.map((group) => (
+ handleAddPrefillGroup(group)}
+ >
+ {group.name}
+
+ ))}
+
+ )}
+
+
+
+
(
+
+
+
+
+
+ {t('Model Mapping')}
+
+
+
+
+ {t('Request flow')}
+
+
+ {mappingPreviewPairs.map((pair) => (
+
+
+ {pair.source}
+
+
+
+ {pair.target}
+
+
+ ))}
+ {remainingMappingCount > 0 && (
+
+ {t('+{{count}} more mapping(s)', {
+ count: remainingMappingCount,
+ })}
+
+ )}
+
+ {t(
+ 'Users call the model on the left. The platform forwards the request to the upstream model on the right.'
+ )}
+
+
+
+
+
+ {t(FIELD_DESCRIPTIONS.MODEL_MAPPING)}
+
+
+
+ option.value
+ )}
+ />
+
+ {modelMappingGuardrail.invalidJson && (
+
+
+ {t('Model Mapping must be a JSON object like')}{' '}
+
+ {'{"gpt-4":"Azure-GPT4"}'}
+
+ {t('. Please fix the JSON before saving.')}
+
+
+ )}
+ {modelMappingGuardrail.missingSourceModels.length > 0 && (
+
+
+
+ {t('Add')}{' '}
+ {formatModelNames(
+ modelMappingGuardrail.missingSourceModels
+ )}{' '}
+ {t(
+ 'to the Models list so users can use them before the mapping sends traffic upstream.'
+ )}
+
+
+ updateModels(
+ modelMappingGuardrail.missingSourceModels,
+ true
+ )
+ }
+ >
+ {t('Add missing models')}
+
+
+
+ )}
+
+ )}
+ />
+
+
+
+
(
+
+
+ {t('Groups *')}
+
+ {t(FIELD_DESCRIPTIONS.GROUP)}
+
+
+
+ {props.isLoadingGroups ? (
+
+
+ )}
+ />
+
+
)
}
diff --git a/web/default/src/features/channels/components/model-mapping-editor.tsx b/web/default/src/features/channels/components/model-mapping-editor.tsx
index b785d5ae..0f80d823 100644
--- a/web/default/src/features/channels/components/model-mapping-editor.tsx
+++ b/web/default/src/features/channels/components/model-mapping-editor.tsx
@@ -16,7 +16,7 @@ along with this program. If not, see
-
+
@@ -264,7 +267,7 @@ export function ModelMappingEditor(props: ModelMappingEditorProps) {
{rows.length > 0 ? (
-
+
{t('Original Model')}
{t('Replacement Model')}
@@ -272,9 +275,10 @@ export function ModelMappingEditor(props: ModelMappingEditorProps) {
{rows.map((row) => (
handleRowChange(row.id, 'from', e.target.value)
@@ -282,6 +286,7 @@ export function ModelMappingEditor(props: ModelMappingEditorProps) {
placeholder='gpt-3.5-turbo'
disabled={props.disabled}
list={sourceListId}
+ aria-label={t('Original Model')}
/>
= {
- native: '原生支持',
- compatible: '兼容支持',
- configurable: '可配置',
- limited: '有限支持',
- unsupported: '不支持',
+ native: 'Native support',
+ compatible: 'Compatible support',
+ configurable: 'Configurable',
+ limited: 'Limited support',
+ unsupported: 'Not supported',
}
export const CHANNEL_CAPABILITY_STATUS_VARIANTS: Record<
diff --git a/web/default/src/features/channels/lib/channel-config-validation.ts b/web/default/src/features/channels/lib/channel-config-validation.ts
index 8a552e7b..e83ab8d0 100644
--- a/web/default/src/features/channels/lib/channel-config-validation.ts
+++ b/web/default/src/features/channels/lib/channel-config-validation.ts
@@ -17,14 +17,14 @@ along with this program. If not, see
@@ -437,6 +438,7 @@ export const CHANNEL_FORM_DEFAULT_VALUES: ChannelFormValues = {
upstream_model_update_ignored_models: '',
video_task_path_override_enabled: false,
video_task_protocol_enabled: false,
+ video_task_delta_settlement_enabled: true,
video_task_submit_path: DEFAULT_VIDEO_TASK_SUBMIT_PATH,
video_task_query_path: DEFAULT_VIDEO_TASK_QUERY_PATH,
video_task_task_id_path: DEFAULT_VIDEO_TASK_TASK_ID_PATH,
@@ -587,6 +589,7 @@ export function transformChannelToFormDefaults(
let upstreamModelUpdateIgnoredModels = ''
let videoTaskPathOverrideEnabled = false
let videoTaskProtocolEnabled = false
+ let videoTaskDeltaSettlementEnabled = true
let videoTaskSubmitPath = DEFAULT_VIDEO_TASK_SUBMIT_PATH
let videoTaskQueryPath = DEFAULT_VIDEO_TASK_QUERY_PATH
let videoTaskIDPath = DEFAULT_VIDEO_TASK_TASK_ID_PATH
@@ -624,6 +627,8 @@ export function transformChannelToFormDefaults(
)
? parsed.upstream_model_update_ignored_models.join(',')
: ''
+ videoTaskDeltaSettlementEnabled =
+ parsed.disable_task_delta_settlement !== true
if (parsed.advanced_custom) {
advancedCustom = stringifyAdvancedCustomConfig(parsed.advanced_custom)
}
@@ -743,6 +748,7 @@ export function transformChannelToFormDefaults(
upstream_model_update_ignored_models: upstreamModelUpdateIgnoredModels,
video_task_path_override_enabled: videoTaskPathOverrideEnabled,
video_task_protocol_enabled: videoTaskProtocolEnabled,
+ video_task_delta_settlement_enabled: videoTaskDeltaSettlementEnabled,
video_task_submit_path: videoTaskSubmitPath,
video_task_query_path: videoTaskQueryPath,
video_task_task_id_path: videoTaskIDPath,
@@ -880,6 +886,16 @@ function buildSettingsJSON(formData: ChannelFormValues): string {
}
const isVideoTaskChannel = VIDEO_TASK_CHANNEL_TYPES.has(formData.type)
+ const isDoubaoVideoChannel = formData.type === CHANNEL_TYPE_DOUBAO_VIDEO
+ if (
+ isDoubaoVideoChannel &&
+ formData.video_task_delta_settlement_enabled === false
+ ) {
+ settingsObj.disable_task_delta_settlement = true
+ } else if ('disable_task_delta_settlement' in settingsObj) {
+ delete settingsObj.disable_task_delta_settlement
+ }
+
const enableVideoTaskProtocol =
isVideoTaskChannel && formData.video_task_protocol_enabled === true
const enableVideoTaskPathOverride =
diff --git a/web/default/src/features/channels/types.ts b/web/default/src/features/channels/types.ts
index 1c724a81..62ece3ee 100644
--- a/web/default/src/features/channels/types.ts
+++ b/web/default/src/features/channels/types.ts
@@ -108,6 +108,7 @@ export interface ChannelOtherSettings {
upstream_model_update_last_removed_models?: string[]
task_protocol?: string
task_protocol_config?: TaskProtocolConfig
+ disable_task_delta_settlement?: boolean
advanced_custom?: AdvancedCustomConfig
}
diff --git a/web/default/src/features/models/components/models-columns.tsx b/web/default/src/features/models/components/models-columns.tsx
index 399c519d..712fe970 100644
--- a/web/default/src/features/models/components/models-columns.tsx
+++ b/web/default/src/features/models/components/models-columns.tsx
@@ -137,7 +137,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef[] {
meta: {
label: t('Model Name'),
mobileTitle: true,
- className: 'max-w-[28rem] whitespace-normal',
+ cellClassName: 'max-w-[28rem] whitespace-normal',
+ mobileClassName: '[overflow-wrap:anywhere]',
},
header: ({ column }) => (
[] {
variant='neutral'
copyText={name}
size='sm'
+ wrap
className='max-w-[min(100%,24rem)] font-mono'
/>
)
diff --git a/web/default/src/features/playground/components/playground-input.tsx b/web/default/src/features/playground/components/playground-input.tsx
index a7f69d2a..21914f6b 100644
--- a/web/default/src/features/playground/components/playground-input.tsx
+++ b/web/default/src/features/playground/components/playground-input.tsx
@@ -57,7 +57,13 @@ import {
} from '@/components/ai-elements/prompt-input'
import { Suggestion, Suggestions } from '@/components/ai-elements/suggestion'
import { ModelGroupSelector } from '@/components/model-group-selector'
-import type { ModelOption, GroupOption } from '../types'
+import type {
+ GroupOption,
+ ModelOption,
+ ParameterEnabled,
+ PlaygroundConfig,
+} from '../types'
+import { PlaygroundParameterPanel } from './playground-parameter-panel'
interface PlaygroundInputProps {
onSubmit: (text: string) => void
@@ -74,6 +80,16 @@ interface PlaygroundInputProps {
onGroupChange: (value: string) => void
hasMessages?: boolean
onClearHistory?: () => void
+ config: PlaygroundConfig
+ parameterEnabled: ParameterEnabled
+ onConfigChange: (
+ key: K,
+ value: PlaygroundConfig[K]
+ ) => void
+ onParameterEnabledChange: (
+ key: keyof ParameterEnabled,
+ value: boolean
+ ) => void
}
const suggestions = [
@@ -100,6 +116,7 @@ export function PlaygroundInput({
onGroupChange,
hasMessages = false,
onClearHistory,
+ ...parameterProps
}: PlaygroundInputProps) {
const { t } = useTranslation()
const [text, setText] = useState('')
@@ -194,6 +211,8 @@ export function PlaygroundInput({
{t('Search')}
+
(
+ key: K,
+ value: PlaygroundConfig[K]
+ ) => void
+ onParameterEnabledChange: (
+ key: PlaygroundParameterKey,
+ value: boolean
+ ) => void
+ parameterEnabled: ParameterEnabled
+}
+
+type PlaygroundParameterContentProps = PlaygroundParameterPanelProps & {
+ compact?: boolean
+}
+
+function PlaygroundParameterContent(props: PlaygroundParameterContentProps) {
+ const updateParameterConfig = (
+ key: PlaygroundParameterKey,
+ value: number | null
+ ) => {
+ if (key === 'seed') {
+ props.onConfigChange('seed', value)
+ return
+ }
+
+ const fallback = PLAYGROUND_PARAMETER_CONTROLS.find(
+ (control) => control.key === key
+ )?.min
+ props.onConfigChange(key, value ?? fallback ?? 0)
+ }
+
+ return (
+
+ {PLAYGROUND_PARAMETER_CONTROLS.map((control) => (
+
+ props.onParameterEnabledChange(control.key, enabled)
+ }
+ onValueChange={(value) => updateParameterConfig(control.key, value)}
+ value={props.config[control.key]}
+ />
+ ))}
+
+
+ {activeCount}
+
+
+ )
+
+ if (isMobile) {
+ return (
+
+
+
+ {t('Parameters')}
+
+
+
+
+ {t('Parameter settings')}
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ {t('Parameters')}
+
+
+
+
+
{t('Parameter settings')}
+
+ {t('Only enabled parameters are sent with the request.')}
+
+
+
+ )
+}
diff --git a/web/default/src/features/playground/components/playground-parameter-row.tsx b/web/default/src/features/playground/components/playground-parameter-row.tsx
new file mode 100644
index 00000000..92ef7b75
--- /dev/null
+++ b/web/default/src/features/playground/components/playground-parameter-row.tsx
@@ -0,0 +1,132 @@
+/*
+Copyright (C) 2023-2026 MAX-API-Next
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see ()
+ const controlId = `playground-${props.control.key}`
+
+ const updateValue = (value: string | number) => {
+ props.onValueChange(normalizeParameterNumberValue(props.control.key, value))
+ }
+
+ const commitDraft = (rawValue: string) => {
+ updateValue(rawValue)
+ setDraft(undefined)
+ }
+
+ return (
+
+
+
+
+
+ {t(props.control.labelKey)}
+
+
+ {t(getParameterControlValueText(props.control.key, props.value))}
+
+
+
+ {t(props.control.descriptionKey)}
+
+
+
+
+
+
+ {props.control.valueType === 'slider' ? (
+
{
+ const firstValue = Array.isArray(nextValue)
+ ? nextValue[0]
+ : nextValue
+ updateValue(firstValue)
+ }}
+ step={props.control.step}
+ value={[Number(props.value)]}
+ />
+ ) : (
+ ('per-token')
- const [promptPrice, setPromptPrice] = useState('')
- const [lanePrices, setLanePrices] = useState>({
- ...EMPTY_LANE_PRICES,
- })
- const [laneEnabled, setLaneEnabled] = useState>({
- ...EMPTY_LANE_ENABLED,
- })
- const [billingExpr, setBillingExpr] = useState('')
- const [requestRuleExpr, setRequestRuleExpr] = useState('')
+ const [initialState] = useState(() => ({
+ laneState: createInitialLaneState(editData),
+ pricingMode: getInitialPricingMode(editData),
+ billingExpr: editData?.billingExpr || '',
+ requestRuleExpr: editData?.requestRuleExpr || '',
+ }))
+ const [pricingMode, setPricingMode] = useState(
+ initialState.pricingMode
+ )
+ const [promptPrice, setPromptPrice] = useState(
+ initialState.laneState.promptPrice
+ )
+ const [lanePrices, setLanePrices] = useState>(
+ initialState.laneState.prices
+ )
+ const [laneEnabled, setLaneEnabled] = useState>(
+ initialState.laneState.enabled
+ )
+ const [billingExpr, setBillingExpr] = useState(initialState.billingExpr)
+ const [requestRuleExpr, setRequestRuleExpr] = useState(
+ initialState.requestRuleExpr
+ )
const [previewOpen, setPreviewOpen] = useState(true)
const isEditMode = !!editData
const form = useForm({
resolver: zodResolver(createModelPricingSchema(t)),
- defaultValues: {
- name: '',
- price: '',
- ratio: '',
- cacheRatio: '',
- createCacheRatio: '',
- completionRatio: '',
- imageRatio: '',
- audioRatio: '',
- audioCompletionRatio: '',
- },
+ defaultValues: createInitialFormValues(editData),
})
useEffect(() => {
@@ -465,13 +500,7 @@ export function ModelPricingEditorPanel({
audioRatio: editData.audioRatio || '',
audioCompletionRatio: editData.audioCompletionRatio || '',
})
- setPricingMode(
- editData.billingMode === 'tiered_expr'
- ? 'tiered_expr'
- : editData.price
- ? 'per-request'
- : 'per-token'
- )
+ setPricingMode(getInitialPricingMode(editData))
setBillingExpr(editData.billingExpr || '')
setRequestRuleExpr(editData.requestRuleExpr || '')
} else {
@@ -908,6 +937,7 @@ export function ModelPricingEditorPanel({
>
+ undefined}
+ onRequestRuleExprChange={() => undefined}
+ />
+
+ )
+ })
+
+ assert.match(container.textContent || '', /Tier 1 \/ 1/)
+ } finally {
+ await unmount(root, container)
+ }
+ })
+
+ test('never emits model A billing through model B callbacks', async () => {
+ const container = createContainer()
+ const root = createRoot(container)
+ const changes: Array<{ modelName: string; next: string }> = []
+ const renderEditor = (model: ModelRatioData) => (
+
+
+ changes.push({ modelName: model.name, next })
+ }
+ onRequestRuleExprChange={() => undefined}
+ />
+
+ )
+
+ try {
+ await act(async () => root.render(renderEditor(modelA)))
+ await act(async () => root.render(renderEditor(modelB)))
+
+ assert.equal(
+ changes.some(
+ ({ modelName, next }) =>
+ modelName === modelB.name && next === modelA.billingExpr
+ ),
+ false
+ )
+ } finally {
+ await unmount(root, container)
+ }
+ })
+
+ test('does not carry model A billing state into model B', async () => {
+ const container = createContainer()
+ const root = createRoot(container)
+ const renderPanel = (editData: ModelRatioData) => (
+
+ undefined}
+ onCancel={() => undefined}
+ />
+
+ )
+
+ try {
+ await act(async () => root.render(renderPanel(modelA)))
+ assert.match(container.textContent || '', /tier\("a", p \* 1 \+ c \* 2\)/)
+
+ await act(async () => root.render(renderPanel(modelB)))
+
+ const text = container.textContent || ''
+ assert.match(text, /tier\("b", p \* 3 \+ c \* 4\)/)
+ assert.doesNotMatch(text, /tier\("a", p \* 1 \+ c \* 2\)/)
+ assert.doesNotMatch(text, /tier\("base", p \* 0 \+ c \* 0\)/)
+ } finally {
+ await unmount(root, container)
+ }
+ })
+})
diff --git a/web/default/src/features/system-settings/models/tiered-pricing-editor.tsx b/web/default/src/features/system-settings/models/tiered-pricing-editor.tsx
index e227b627..f55adc89 100644
--- a/web/default/src/features/system-settings/models/tiered-pricing-editor.tsx
+++ b/web/default/src/features/system-settings/models/tiered-pricing-editor.tsx
@@ -16,14 +16,8 @@ along with this program. If not, see
- ({
- value: option.value,
- label: t(option.labelKey),
- })),
- ]}
- value={condition.var}
- onValueChange={(value) =>
- onChange({ ...condition, var: value as TierConditionInput['var'] })
- }
- >
-
-
- {currentInputOption
- ? t(currentInputOption.labelKey)
- : condition.var}
-
-
-
-
- {CONDITION_INPUT_OPTIONS.map((option) => (
-
- {t(option.labelKey)}
-
- ))}
-
-
-
- ({ value: op, label: op }))]}
- value={condition.op}
- onValueChange={(value) =>
- onChange({ ...condition, op: value as TierConditionInput['op'] })
- }
- >
-
-
-
-
- {OPS.map((op) => (
-
- {op}
-
- ))}
-
-
-
- onChange({ ...condition, value })}
- placeholder='tokens'
- className='w-32'
- />
-
- {formatTokenHint(condition.value, t)}
-
-
-
-
- )
-}
-
-// ---------------------------------------------------------------------------
-// Price input field
-// ---------------------------------------------------------------------------
-
-type PriceFieldProps = {
- label: string
- hint?: string
- value: number
- onChange: (next: number) => void
-}
-
-function PriceField({ label, hint, value, onChange }: PriceFieldProps) {
- return (
-
-
{label}
-
- {hint &&
{hint}
}
-
handlePriceChange(fieldKey, priceToUnitCost(next))}
- />
- )
- }
-
- return (
-
-
-
-
- {t('Tier')} {index + 1} / {total}
-
- {tier.conditions.length === 0 && (
- {t('Fallback tier')}
- )}
-
-
-
-
-
- {/* Conditions */}
-
-
-
{t('Tier conditions')}
-
= 2}
- className='h-7 px-2 text-xs'
- >
-
-
- {tier.conditions.length === 0 ? (
-
- {t('Always matches (default tier).')}
-
- ) : (
- tier.conditions.map((condition, conditionIndex) => (
-
handleConditionChange(conditionIndex, next)}
- onRemove={() => handleConditionRemove(conditionIndex)}
- />
- ))
- )}
-
-
-
-
- {t('Token prices')}
-
- {PRICE_SUFFIX}
-
-
-
-
-
-
- handlePriceChange('input_unit_cost', priceToUnitCost(value))
- }
- />
-
- handlePriceChange('output_unit_cost', priceToUnitCost(value))
- }
- />
-
-
-
-
-
- value !== null && handleCacheModeChange(value as CacheMode)
- }
- >
-
-
- {t('Generic cache')}
-
-
- {t('Time-sliced cache (Claude)')}
-
-
-
-
-
- {CACHE_PRICE_VARS.map((variable) => {
- if (variable.key === 'cc1h' && cacheMode !== CACHE_MODE_TIMED) {
- return null
- }
- return renderPriceVariable(variable)
- })}
-
-
-
-
+type EditorMode = 'visual' | 'raw'
- {/* Media prices */}
-
-
setMediaOpen((prev) => !prev)}
- >
-
- {mediaOpen && (
-
- {MEDIA_PRICE_VARS.map(renderPriceVariable)}
-
- )}
-
-
-
- {t(
- 'Each tier supports up to 2 conditions. The last tier without conditions is the fallback.'
- )}
-
- {config.tiers.map((tier, index) => (
-
handleTierChange(index, next)}
- onRemove={() => handleRemoveTier(index)}
- onAddCondition={() => handleAddCondition(index)}
- />
- ))}
-
-
-
-
-
-
- {t('Variables')}: len, p, c,{' '}
- cr, cc, cc1h,{' '}
- img, img_o, ai,{' '}
- ao
-
-
- {t('Functions')}: tier(name, value), max,{' '}
- min, ceil, floor,{' '}
- abs, header(name),{' '}
- param(path), has(source, text)
-
-
-
-