(Admin UI) - Test Key Tab - Allow typing in model name + Add wrapping for text response (#7347)

* ui fix - allow searching model list + fix bug on filtering

* qa fix - use correct provider name for azure_text

* ui wrap content onto next line

litellm/model_prices_and_context_window_backup.json

@@ -1267,7 +1267,7 @@
         "max_input_tokens": 4097,
         "input_cost_per_token": 0.0000015,
         "output_cost_per_token": 0.000002,
-        "litellm_provider": "text-completion-openai",
+        "litellm_provider": "azure_text",
         "mode": "completion"
     },
     "azure/gpt-35-turbo-instruct": {
@@ -1275,7 +1275,7 @@
         "max_input_tokens": 4097,
         "input_cost_per_token": 0.0000015,
         "output_cost_per_token": 0.000002,
-        "litellm_provider": "text-completion-openai",
+        "litellm_provider": "azure_text",
         "mode": "completion"
     },
     "azure/gpt-35-turbo-instruct-0914": {
@@ -1283,7 +1283,7 @@
         "max_input_tokens": 4097,
         "input_cost_per_token": 0.0000015,
         "output_cost_per_token": 0.000002,
-        "litellm_provider": "text-completion-openai",
+        "litellm_provider": "azure_text",
         "mode": "completion"
     },
     "azure/mistral-large-latest": {

litellm/proxy/proxy_config.yaml

@@ -1,7 +1,7 @@
 model_list:
-  - model_name: openai/o1-preview
+  - model_name: openai/*
     litellm_params:
-      model: openai/o1-preview
+      model: openai/*
       api_key: os.environ/OPENAI_API_KEY
 
 

model_prices_and_context_window.json

@@ -1267,7 +1267,7 @@
         "max_input_tokens": 4097,
         "input_cost_per_token": 0.0000015,
         "output_cost_per_token": 0.000002,
-        "litellm_provider": "text-completion-openai",
+        "litellm_provider": "azure_text",
         "mode": "completion"
     },
     "azure/gpt-35-turbo-instruct": {
@@ -1275,7 +1275,7 @@
         "max_input_tokens": 4097,
         "input_cost_per_token": 0.0000015,
         "output_cost_per_token": 0.000002,
-        "litellm_provider": "text-completion-openai",
+        "litellm_provider": "azure_text",
         "mode": "completion"
     },
     "azure/gpt-35-turbo-instruct-0914": {
@@ -1283,7 +1283,7 @@
         "max_input_tokens": 4097,
         "input_cost_per_token": 0.0000015,
         "output_cost_per_token": 0.000002,
-        "litellm_provider": "text-completion-openai",
+        "litellm_provider": "azure_text",
         "mode": "completion"
     },
     "azure/mistral-large-latest": {

ui/litellm-dashboard/src/components/chat_ui.tsx

@@ -115,36 +115,27 @@ const ChatUI: React.FC<ChatUIProps> = ({
         console.log("model_info:", fetchedAvailableModels);
   
         if (fetchedAvailableModels?.data.length > 0) {
-          const options = fetchedAvailableModels["data"].map((item: { id: string }) => ({
+          // Create a Map to store unique models using the model ID as key
-            value: item.id,
+          const uniqueModelsMap = new Map();
-            label: item.id
+          
-          }));
+          fetchedAvailableModels["data"].forEach((item: { id: string }) => {
-  
+            uniqueModelsMap.set(item.id, {
-          // Now, 'options' contains the list you wanted
+              value: item.id,
-          console.log(options); // You can log it to verify the list
+              label: item.id
+            });
+          });
 
-          // if options.length > 0, only store unique values
+          // Convert Map values back to array
-          if (options.length > 0) {
+          const uniqueModels = Array.from(uniqueModelsMap.values());
-            const uniqueModels = Array.from(new Set(options));
 
-            console.log("Unique models:", uniqueModels);
+          // Sort models alphabetically
+          uniqueModels.sort((a, b) => a.label.localeCompare(b.label));
 
-            // sort uniqueModels alphabetically
+          setModelInfo(uniqueModels);
-            uniqueModels.sort((a: any, b: any) => a.label.localeCompare(b.label));
+          setSelectedModel(uniqueModels[0].value);
-
-
-            console.log("Model info:", modelInfo);
-            
-            // setModelInfo(options) should be inside the if block to avoid setting it when no data is available
-            setModelInfo(uniqueModels);
-          }
-
-
-          setSelectedModel(fetchedAvailableModels.data[0].id);
         }
       } catch (error) {
         console.error("Error fetching model info:", error);
-        // Handle error as needed
       }
     };
   
@@ -242,10 +233,8 @@ const ChatUI: React.FC<ChatUIProps> = ({
                 placeholder="Select a Model"
                 onChange={onChange}
                 options={modelInfo}
-                style={{ width: "200px" }}
+                style={{ width: "350px" }}
-                
+                showSearch={true}
-                
-               
               />
             </Col>
           </Grid>
@@ -270,7 +259,15 @@ const ChatUI: React.FC<ChatUIProps> = ({
                   <TableBody>
                     {chatHistory.map((message, index) => (
                       <TableRow key={index}>
-                        <TableCell>{`${message.role}: ${message.content}`}</TableCell>
+                        <TableCell>
+                          <div style={{ 
+                            whiteSpace: "pre-wrap", 
+                            wordBreak: "break-word",
+                            maxWidth: "100%" 
+                          }}>
+                            <strong>{message.role}:</strong> {message.content}
+                          </div>
+                        </TableCell>
                       </TableRow>
                     ))}
                   </TableBody>