(fix) show user models when creating a key

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

@@ -12,7 +12,7 @@ import {
   Select,
   message,
 } from "antd";
-import { keyCreateCall, slackBudgetAlertsHealthCheck } from "./networking";
+import { keyCreateCall, slackBudgetAlertsHealthCheck, modelAvailableCall } from "./networking";
 
 const { Option } = Select;
 
@@ -22,7 +22,6 @@ interface CreateKeyProps {
   userRole: string | null;
   accessToken: string;
   data: any[] | null;
-  userModels: string[];
   setData: React.Dispatch<React.SetStateAction<any[] | null>>;
 }
 
@@ -32,13 +31,13 @@ const CreateKey: React.FC<CreateKeyProps> = ({
   userRole,
   accessToken,
   data,
-  userModels,
   setData,
 }) => {
   const [form] = Form.useForm();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [apiKey, setApiKey] = useState(null);
   const [softBudget, setSoftBudget] = useState(null);
+  const [userModels, setUserModels] = useState([]);
   const handleOk = () => {
     setIsModalVisible(false);
     form.resetFields();
@@ -50,6 +49,29 @@ const CreateKey: React.FC<CreateKeyProps> = ({
     form.resetFields();
   };
 
+  useEffect(() => {
+    const fetchUserModels = async () => {
+      try {
+        if (userID === null || userRole === null) {
+          return;
+        }
+
+        if (accessToken !== null) {
+          const model_available = await modelAvailableCall(accessToken, userID, userRole);
+          let available_model_names = model_available["data"].map(
+            (element: { id: string }) => element.id
+          );
+          console.log("available_model_names:", available_model_names);
+          setUserModels(available_model_names);
+        }
+      } catch (error) {
+        console.error("Error fetching user models:", error);
+      }
+    };
+  
+    fetchUserModels();
+  }, [accessToken, userID, userRole]);
+
   const handleCreate = async (formValues: Record<string, any>) => {
     try {
       message.info("Making API Call");