preset azure provider

ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Form, Table } from "antd";
 import { TextInput } from "@tremor/react";
 import { Tooltip } from "../atoms/index";
+import { Providers } from "../provider_info_helpers";
 
 const ConditionalPublicModelName: React.FC = () => {
   const form = Form.useFormInstance();
@@ -12,13 +13,19 @@ const ConditionalPublicModelName: React.FC = () => {
   const selectedModels = Array.isArray(modelValue) ? modelValue : [modelValue];
   const customModelName = Form.useWatch('custom_model_name', form);
   const showPublicModelName = !selectedModels.includes('all-wildcard');
-
+  const selectedProvider = Form.useWatch('custom_llm_provider', form);
   // Force table to re-render when custom model name changes
   useEffect(() => {
     if (customModelName && selectedModels.includes('custom')) {
       const currentMappings = form.getFieldValue('model_mappings') || [];
       const updatedMappings = currentMappings.map((mapping: any) => {
         if (mapping.public_name === 'custom' || mapping.litellm_model === 'custom') {
+          if (selectedProvider === Providers.Azure) {
+            return {
+              public_name: customModelName,
+              litellm_model: `azure/${customModelName}`
+            };
+          }
           return {
             public_name: customModelName,
             litellm_model: customModelName
@@ -29,7 +36,7 @@ const ConditionalPublicModelName: React.FC = () => {
       form.setFieldValue('model_mappings', updatedMappings);
       setTableKey(prev => prev + 1); // Force table re-render
     }
-  }, [customModelName, selectedModels, form]);
+  }, [customModelName, selectedModels, selectedProvider, form]);
 
   // Initial setup of model mappings when models are selected
   useEffect(() => {
@@ -44,17 +51,32 @@ const ConditionalPublicModelName: React.FC = () => {
             if (model === 'custom') {
               return mapping.litellm_model === 'custom' || mapping.litellm_model === customModelName;
             }
+            if (selectedProvider === Providers.Azure) {
+              return mapping.litellm_model === `azure/${model}`;
+            }
             return mapping.litellm_model === model;
           }));
       
       if (shouldUpdateMappings) {
         const mappings = selectedModels.map((model: string) => {
           if (model === 'custom' && customModelName) {
+            if (selectedProvider === Providers.Azure) {
+              return {
+                public_name: customModelName,
+                litellm_model: `azure/${customModelName}`
+              };
+            }
             return {
               public_name: customModelName,
               litellm_model: customModelName
             };
           }
+          if (selectedProvider === Providers.Azure) {
+            return {
+              public_name: model,
+              litellm_model: `azure/${model}`
+            };
+          }
           return {
             public_name: model,
             litellm_model: model
@@ -65,7 +87,7 @@ const ConditionalPublicModelName: React.FC = () => {
         setTableKey(prev => prev + 1); // Force table re-render
       }
     }
-  }, [selectedModels, customModelName, form]);
+  }, [selectedModels, customModelName, selectedProvider,form]);
 
   if (!showPublicModelName) return null;
 

ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx

@@ -32,10 +32,18 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
       if (JSON.stringify(currentModel) !== JSON.stringify(values)) {
 
         // Create mappings first
-        const mappings = values.map(model => ({
-          public_name: model,
-          litellm_model: model
-        }));
+        const mappings = values.map(model => {
+          if (selectedProvider === Providers.Azure) {
+            return {
+              public_name: model,
+              litellm_model: `azure/${model}`
+            };
+          }
+          return {
+            public_name: model,
+            litellm_model: model
+          };
+        });
         
         // Update both fields in one call to reduce re-renders
         form.setFieldsValue({ 
@@ -47,6 +55,22 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
     }
   };
 
+  const handleAzureDeploymentNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const deploymentName = e.target.value;
+
+    // Create mapping with Azure-specific format
+    const mappings = deploymentName ? [{
+      public_name: deploymentName,
+      litellm_model: `azure/${deploymentName}`
+    }] : [];
+    
+    // Update both fields
+    form.setFieldsValue({ 
+      model: deploymentName,
+      model_mappings: mappings
+    });
+  };
+
   // Handle custom model name changes
   const handleCustomModelNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const customName = e.target.value;
@@ -55,6 +79,12 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
     const currentMappings = form.getFieldValue('model_mappings') || [];
     const updatedMappings = currentMappings.map((mapping: any) => {
       if (mapping.public_name === 'custom' || mapping.litellm_model === 'custom') {
+        if (selectedProvider === Providers.Azure) {
+          return {
+            public_name: customName,
+            litellm_model: `azure/${customName}`
+          };
+        }
         return {
           public_name: customName,
           litellm_model: customName
@@ -75,7 +105,7 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
       >
         <Form.Item
           name="model"
-          rules={[{ required: true, message: "Please select at least one model." }]}
+          rules={[{ required: true, message: `Please enter ${selectedProvider === Providers.Azure ? 'a deployment name' : 'at least one model'}.` }]}
           noStyle
         >
           {(selectedProvider === Providers.Azure) || 
@@ -84,6 +114,7 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
             <>
               <TextInput 
                 placeholder={getPlaceholder(selectedProvider)} 
+                onChange={selectedProvider === Providers.Azure ? handleAzureDeploymentNameChange : undefined}
               />
             </>
           ) : providerModels.length > 0 ? (
@@ -135,7 +166,7 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
                 className="mt-2"
               >
                 <TextInput 
-                  placeholder="Enter custom model name" 
+                  placeholder={selectedProvider === Providers.Azure ? "Enter Azure deployment name" : "Enter custom model name"}
                   onChange={handleCustomModelNameChange}
                 />
               </Form.Item>
@@ -147,7 +178,10 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
         <Col span={10}></Col>
         <Col span={14}>
           <Text className="mb-3 mt-1">
-          The model name LiteLLM will send to the LLM API
+            {selectedProvider === Providers.Azure 
+              ? "Your deployment name will be saved as the public model name, and LiteLLM will use 'azure/deployment-name' internally"
+              : "The model name LiteLLM will send to the LLM API"
+            }
           </Text>
         </Col>
       </Row>