fix: ui issues

src/pages/maas-provider/forms/supported-models.tsx

@@ -1,6 +1,8 @@
 import MetadataList from '@/components/metadata-list';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
+import { useRef } from 'react';
 import { FormData, ProviderModel } from '../config/types';
 import { useQueryProviderModels } from '../hooks/use-query-provider-models';
 import ModelItem from './model-item';
@@ -11,15 +13,26 @@ const SupportedModels = () => {
     useQueryProviderModels();
   const form = Form.useFormInstance<FormData>();
   const modelList = Form.useWatch('models', form) || [];
+  const prevAPIKeyRef = useRef<string>('');
+  const { getRuleMessage } = useAppUtils();
 
   const handleOpenChange = async (open: boolean) => {
     try {
       await form.validateFields(['api_key']);
 
-      if (open && providerModelList.length === 0) {
+      const currentAPIKey = form.getFieldValue('api_key') || '';
+
+      // Avoid repeated requests with the same API key
+      if (
+        open &&
+        providerModelList.length === 0 &&
+        prevAPIKeyRef.current !== currentAPIKey &&
+        currentAPIKey
+      ) {
+        prevAPIKeyRef.current = currentAPIKey;
         fetchProviderModels({
           data: {
-            api_token: form.getFieldValue('api_key') || '',
+            api_token: currentAPIKey,
             config: {
               type: form.getFieldValue(['config', 'type']) || ''
             }
@@ -55,7 +68,33 @@ const SupportedModels = () => {
 
   return (
     <>
-      <Form.Item name="models" data-field="supportedModels">
+      <Form.Item
+        name="models"
+        data-field="supportedModels"
+        rules={[
+          {
+            required: true,
+            validator: async (_, value) => {
+              if (!value || value.length === 0) {
+                return Promise.reject(
+                  new Error(
+                    getRuleMessage('input', 'providers.form.rules.models')
+                  )
+                );
+              }
+
+              if (value.some((item: ProviderModel) => !item.name)) {
+                return Promise.reject(
+                  new Error(
+                    getRuleMessage('select', 'providers.form.rules.model')
+                  )
+                );
+              }
+              return Promise.resolve();
+            }
+          }
+        ]}
+      >
         <MetadataList
           styles={{
             wrapper: {