chore: provider masked api-key

src/pages/maas-provider/forms/index.tsx

@@ -71,7 +71,9 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
     );
     const data = {
       ..._.omit(values, ['api_key']),
-      api_tokens: _.concat([], values.api_key, apiTokens || []),
+      api_tokens: _.concat([], values.api_key, apiTokens || []).map(
+        (item: string) => ({ input: item })
+      ),
       config: {
         type: values.config.type,
         ...yaml2Json(advanceRef.current?.getYamlValue() || '')
@@ -102,10 +104,13 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
       (action === PageAction.EDIT || action === PageAction.COPY) &&
       currentData
     ) {
+      const apiTokensList = _.get(currentData, 'api_tokens', []).map(
+        (item: any) => item.hash || ''
+      );
       form.setFieldsValue({
         ...currentData,
-        api_key: currentData.api_tokens?.[0] || '',
-        api_tokens: currentData.api_tokens?.slice(1) || [],
+        api_key: apiTokensList?.[0] || '',
+        api_tokens: apiTokensList?.slice(1) || [],
         proxy_enabled: !!currentData.proxy_url,
         custom_config: json2Yaml(
           _.omit(currentData.config, ['type', 'openaiCustomUrl']) || {}
@@ -127,7 +132,9 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
       }}
       getScrollElementScrollableHeight={getScrollElementScrollableHeight}
     >
-      <FormContext.Provider value={{ action }}>
+      <FormContext.Provider
+        value={{ action, id: currentData?.id, currentData }}
+      >
         <Form
           form={form}
           onFinish={handleOnFinish}

src/pages/maas-provider/forms/model-item.tsx

@@ -1,5 +1,6 @@
 import AutoComplete from '@/components/seal-form/auto-complete';
 import SealSelect from '@/components/seal-form/seal-select';
+import { PageAction } from '@/config';
 import { categoryOptions } from '@/pages/llmodels/config';
 import {
   CheckCircleFilled,
@@ -10,6 +11,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Form, Tooltip } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
+import { useFormContext } from '../config/form-context';
 import { FormData, ProviderModel } from '../config/types';
 import { useTestProviderModel } from '../hooks/use-query-provider-models';
 
@@ -52,12 +54,27 @@ const ModelItem: React.FC<ModelItemProps> = ({
   const intl = useIntl();
   const form = Form.useFormInstance<FormData>();
   const { runTestModel, loading: testLoading } = useTestProviderModel();
+  const { id, action, currentData } = useFormContext();
+
+  const generateCurrentAPIKey = (currentAPIKey: string) => {
+    if (
+      action === PageAction.EDIT &&
+      currentAPIKey === currentData?.api_tokens?.[0]?.hash
+    ) {
+      return undefined;
+    }
+    return currentAPIKey;
+  };
 
   const handleTestModel = async () => {
     const res = await runTestModel({
+      id: action === PageAction.EDIT ? id! : 0,
       data: {
         model_name: item.name,
-        api_token: form.getFieldValue('api_key') || '',
+        api_token: generateCurrentAPIKey(
+          form.getFieldValue('api_key')
+        ) as string,
+        proxy_url: form.getFieldValue('proxy_url') || undefined,
         config: {
           type: form.getFieldValue(['config', 'type']) || ''
         }
@@ -103,7 +120,7 @@ const ModelItem: React.FC<ModelItemProps> = ({
     if (item.accessible === false) {
       return (
         <WarningFilled
-          style={{ color: 'var(--ant-color-error)', fontSize: 14 }}
+          style={{ color: 'var(--ant-color-warning)', fontSize: 14 }}
         />
       );
     }

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

@@ -1,8 +1,10 @@
 import MetadataList from '@/components/metadata-list';
+import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import { useRef } from 'react';
+import { useFormContext } from '../config/form-context';
 import { FormData, ProviderModel } from '../config/types';
 import { useQueryProviderModels } from '../hooks/use-query-provider-models';
 import ModelItem from './model-item';
@@ -15,6 +17,17 @@ const SupportedModels = () => {
   const modelList = Form.useWatch('models', form) || [];
   const prevAPIKeyRef = useRef<string>('');
   const { getRuleMessage } = useAppUtils();
+  const { id, action, currentData } = useFormContext();
+
+  const generateCurrentAPIKey = (currentAPIKey: string) => {
+    if (
+      action === PageAction.EDIT &&
+      currentAPIKey === currentData?.api_tokens?.[0]?.hash
+    ) {
+      return undefined;
+    }
+    return currentAPIKey;
+  };
 
   const handleOpenChange = async (open: boolean) => {
     try {
@@ -31,8 +44,10 @@ const SupportedModels = () => {
       ) {
         prevAPIKeyRef.current = currentAPIKey;
         fetchProviderModels({
+          id: action === PageAction.EDIT ? id! : 0,
           data: {
-            api_token: currentAPIKey,
+            api_token: generateCurrentAPIKey(currentAPIKey) as string,
+            proxy_url: form.getFieldValue('proxy_url') || undefined,
             config: {
               type: form.getFieldValue(['config', 'type']) || ''
             }