chore: provider masked api-key

src/pages/maas-provider/apis/index.ts

@@ -42,6 +42,7 @@ export async function queryProviderModels(
   params: {
     data: {
       api_token: string;
+      proxy_url: string;
       config: {
         type: string;
       };
@@ -59,11 +60,35 @@ export async function queryProviderModels(
   );
 }
 
+export async function queryProviderModelsInEditing(
+  params: {
+    id?: number;
+    data: {
+      api_token: string;
+      proxy_url: string;
+      config: {
+        type: string;
+      };
+    };
+  },
+  options?: any
+) {
+  return request<{ data: any[] }>(
+    `${MAAS_PROVIDERS_API}/${params.id}/get-models`,
+    {
+      method: 'POST',
+      data: params.data,
+      cancelToken: options?.token
+    }
+  );
+}
+
 export async function testProviderModel(
   params: {
     data: {
       model_name: string;
       api_token: string;
+      proxy_url: string;
       config: {
         type: string;
       };
@@ -77,3 +102,27 @@ export async function testProviderModel(
     cancelToken: options?.token
   });
 }
+
+export async function testProviderModelInEditing(
+  params: {
+    id?: number;
+    data: {
+      model_name: string;
+      api_token: string;
+      proxy_url: string;
+      config: {
+        type: string;
+      };
+    };
+  },
+  options?: any
+) {
+  return request<any>(
+    `${MAAS_PROVIDERS_API}/${params.id}${TEST_PROVIDER_MODEL_API}`,
+    {
+      method: 'post',
+      data: params.data,
+      cancelToken: options?.token
+    }
+  );
+}

src/pages/maas-provider/config/form-context.ts

@@ -5,6 +5,8 @@ import { maasProviderType } from '.';
 interface FormContextProps {
   providerType?: maasProviderType;
   action?: PageActionType;
+  currentData?: any;
+  id?: number;
 }
 
 const FormContext = createContext<FormContextProps>({});

src/pages/maas-provider/config/types.ts

@@ -10,6 +10,8 @@ export interface FormData {
   api_tokens: string[];
   models: ProviderModel[];
   api_key: string;
+  proxy_url: string;
+  proxy_timeout: number;
   config: {
     type: maasProviderType;
     openaiCustomUrl?: string;
@@ -23,8 +25,6 @@ export interface MaasProviderItem extends FormData {
   deleted_at: string;
   timeout: number;
   models: ProviderModel[];
-  proxy_url: string;
-  proxy_timeout: number;
   builtin: boolean;
   provider_model_count: number;
   api_token_count: number;

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_key: apiTokensList?.[0] || '',
-        api_tokens: currentData.api_tokens?.slice(1) || [],
+        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']) || ''
             }

src/pages/maas-provider/hooks/use-query-provider-models.ts

@@ -3,7 +3,12 @@ import { useRequest } from 'ahooks';
 import { message } from 'antd';
 import { CancelTokenSource } from 'axios';
 import { useEffect, useRef, useState } from 'react';
-import { queryProviderModels, testProviderModel } from '../apis';
+import {
+  queryProviderModels,
+  queryProviderModelsInEditing,
+  testProviderModel,
+  testProviderModelInEditing
+} from '../apis';
 
 /**
  *
@@ -19,10 +24,16 @@ export const useQueryProviderModels = () => {
     cancel
   } = useRequest(
     async (params: {
-      data: { api_token: string; config: { type: string } };
+      id: number;
+      data: { api_token: string; config: { type: string }; proxy_url: string };
     }) => {
       axiosTokenRef.current?.cancel();
       axiosTokenRef.current = createAxiosToken();
+      if (params.id) {
+        return await queryProviderModelsInEditing(params, {
+          token: axiosTokenRef.current.token
+        });
+      }
       return await queryProviderModels(params, {
         token: axiosTokenRef.current.token
       });
@@ -68,14 +79,27 @@ export const useTestProviderModel = () => {
     cancel
   } = useRequest(
     async (params: {
-      data: { api_token: string; config: { type: string }; model_name: string };
+      id: number;
+      data: {
+        api_token: string;
+        config: { type: string };
+        model_name: string;
+        proxy_url: string;
+      };
     }) => {
       axiosTokenRef.current?.cancel();
       axiosTokenRef.current = createAxiosToken();
-      const response = await testProviderModel(params, {
+
+      // for edit page
+      if (params.id) {
+        return await testProviderModelInEditing(params, {
+          token: axiosTokenRef.current.token
+        });
+      }
+      // for create page
+      return await testProviderModel(params, {
         token: axiosTokenRef.current.token
       });
-      return response;
     },
     {
       manual: true,