fix(conditional_public_model_name.tsx): edit azure public model name

Fixes https://github.com/BerriAI/litellm/issues/10093
This commit is contained in:
Krrish Dholakia 2025-04-23 14:31:52 -07:00
parent 9965e4a7de
commit 7d93fe6538
2 changed files with 49 additions and 19 deletions

View file

@ -14,6 +14,7 @@ const ConditionalPublicModelName: React.FC = () => {
const customModelName = Form.useWatch('custom_model_name', form);
const showPublicModelName = !selectedModels.includes('all-wildcard');
// Force table to re-render when custom model name changes
useEffect(() => {
if (customModelName && selectedModels.includes('custom')) {
@ -35,20 +36,33 @@ const ConditionalPublicModelName: React.FC = () => {
// Initial setup of model mappings when models are selected
useEffect(() => {
if (selectedModels.length > 0 && !selectedModels.includes('all-wildcard')) {
const mappings = selectedModels.map((model: string) => {
if (model === 'custom' && customModelName) {
// Check if we already have mappings that match the selected models
const currentMappings = form.getFieldValue('model_mappings') || [];
// Only update if the mappings don't exist or don't match the selected models
const shouldUpdateMappings = currentMappings.length !== selectedModels.length ||
!selectedModels.every(model =>
currentMappings.some((mapping: { public_name: string; litellm_model: string }) =>
mapping.public_name === model ||
(model === 'custom' && mapping.public_name === customModelName)));
if (shouldUpdateMappings) {
const mappings = selectedModels.map((model: string) => {
if (model === 'custom' && customModelName) {
return {
public_name: customModelName,
litellm_model: customModelName
};
}
return {
public_name: customModelName,
litellm_model: customModelName
public_name: model,
litellm_model: model
};
}
return {
public_name: model,
litellm_model: model
};
});
form.setFieldValue('model_mappings', mappings);
setTableKey(prev => prev + 1); // Force table re-render
});
form.setFieldValue('model_mappings', mappings);
setTableKey(prev => prev + 1); // Force table re-render
}
}
}, [selectedModels, customModelName, form]);

View file

@ -23,22 +23,34 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
// If "all-wildcard" is selected, clear the model_name field
if (values.includes("all-wildcard")) {
form.setFieldsValue({ model_name: undefined, model_mappings: [] });
form.setFieldsValue({ model: undefined, model_mappings: [] });
} else {
// Update model mappings immediately for each selected model
const mappings = values
.map(model => ({
// Get current model value to check if we need to update
const currentModel = form.getFieldValue('model');
// Only update if the value has actually changed
if (JSON.stringify(currentModel) !== JSON.stringify(values)) {
// Create mappings first
const mappings = values.map(model => ({
public_name: model,
litellm_model: model
}));
form.setFieldsValue({ model_mappings: mappings });
// Update both fields in one call to reduce re-renders
form.setFieldsValue({
model: values,
model_mappings: mappings
});
}
}
};
// Handle custom model name changes
const handleCustomModelNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const customName = e.target.value;
// Immediately update the model mappings
const currentMappings = form.getFieldValue('model_mappings') || [];
const updatedMappings = currentMappings.map((mapping: any) => {
@ -69,7 +81,11 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
{(selectedProvider === Providers.Azure) ||
(selectedProvider === Providers.OpenAI_Compatible) ||
(selectedProvider === Providers.Ollama) ? (
<TextInput placeholder={getPlaceholder(selectedProvider)} />
<>
<TextInput
placeholder={getPlaceholder(selectedProvider)}
/>
</>
) : providerModels.length > 0 ? (
<AntSelect
mode="multiple"