From 2065126bcba4426051139ca1fda4f6ebda03209e Mon Sep 17 00:00:00 2001
From: ningyv <1793599591@qq.com>
Date: Fri, 7 Mar 2025 11:05:53 +0800
Subject: [PATCH] feat: feature/1.6-Integrate custom model

---
 .../pages/aiSetting/contexts/AddModels.tsx    | 103 ++++++++++--------
 1 file changed, 56 insertions(+), 47 deletions(-)

diff --git a/frontend/packages/core/src/pages/aiSetting/contexts/AddModels.tsx b/frontend/packages/core/src/pages/aiSetting/contexts/AddModels.tsx
index 7f9c2d05..0b285a42 100644
--- a/frontend/packages/core/src/pages/aiSetting/contexts/AddModels.tsx
+++ b/frontend/packages/core/src/pages/aiSetting/contexts/AddModels.tsx
@@ -1,9 +1,10 @@
-import { App, Form, Input, Select, Tag } from 'antd'
+import { App, Dropdown, Form, Input } from 'antd'
 import { $t } from '@common/locales'
 import { BasicResponse, PLACEHOLDER, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const'
 import { Codebox } from '@common/components/postcat/api/Codebox'
 import { useFetch } from '@common/hooks/http'
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import { Icon } from '@iconify/react/dist/iconify.js'
 type modelFieldType = {
   name: string
   type: string
@@ -25,45 +26,63 @@ type addModelContentProps = {
   modelID?: string
 }
 
+type TemplatesItems = {
+  providerName: string
+  modelName: string
+  modelParameters: string
+}
+
 const AddModels = forwardRef<addModelsContentHandle, addModelContentProps>((props, ref) => {
   const { showAccessConfig, accessConfig, modelParameters, modelName, providerID, type, modelID } = props
   const [form] = Form.useForm()
   const { message } = App.useApp()
   const { fetchData } = useFetch()
-  const [templateList, setTemplateList] = useState<{
-    id: string
-    name: string
-    config: string
-  }[]>()
+  const [templateList, setTemplateList] = useState<
+    {
+      key: string
+      label: string
+      config: string
+    }[]
+  >([])
+
   /**
    * 获取 modelTemplateList 列表
    * @param id
    */
   const getModelTemplateList = () => {
-    // 暂时先固定
-    const modelTemplateList = [
-      {
-        id: 'customize',
-        name: $t('自定义'),
-        config: '{}'
-      }
-    ]
-    setTemplateList(modelTemplateList)
-    if (!modelParameters) {
-      form.setFieldValue('model_parameters', modelTemplateList[0].config)
-    }
-    form.setFieldValue('type', 'customize')
+    fetchData<BasicResponse<{ templates: TemplatesItems[] }>>(`ai/provider/model/template`, {
+      method: 'GET',
+      eoTransformKeys: ['provider_name', 'model_name', 'model_parameters']
+    })
+      .then((response) => {
+        const { code, data, msg } = response
+        if (code === STATUS_CODE.SUCCESS) {
+          const templates = data.templates || []
+          setTemplateList(templates.map((template: any) => ({
+            key: template.id,
+            label: `${template.providerName} ${template.modelName}`,
+            config: template.modelParameters
+          })))
+        } else {
+          message.error(msg || $t(RESPONSE_TIPS.error))
+        }
+      })
   }
 
   useEffect(() => {
     getModelTemplateList()
     form.setFieldsValue({
-      access_configuration: accessConfig,
+      access_configuration: accessConfig || '{}',
       model_parameters: modelParameters || '{}',
       name: modelName || ''
     })
   }, [])
 
+  const modelParameterClick = ({ key }: { key: string }) => {
+    const config = templateList.find((item) => item.key === key)?.config
+    form.setFieldValue('model_parameters', config || '{}')
+  }
+
   /**
    * 保存
    * @returns
@@ -78,7 +97,6 @@ const AddModels = forwardRef<addModelsContentHandle, addModelContentProps>((prop
               ...value,
               id: modelID
             }
-            delete finalValue.type
             fetchData<BasicResponse<null>>('ai/provider/model', {
               method: type === 'edit' ? 'DELETE' : 'POST',
               eoParams: { provider: providerID },
@@ -133,33 +151,24 @@ const AddModels = forwardRef<addModelsContentHandle, addModelContentProps>((prop
           />
         </Form.Item>
       )}
+      <Form.Item<modelFieldType> label={$t('模型参数')}>
+        <span className="absolute top-[-28px] right-0 text-theme cursor-pointer">
+          <Icon icon="ph:download-simple-light" className="align-sub mr-[5px]" width={20} height={20} />
+          <Dropdown overlayClassName="w-[200px] [&>.ant-dropdown-menu>.ant-dropdown-menu-item>.ant-dropdown-menu-title-content]:truncate" placement="bottom" trigger={['click']} key="menu" menu={{ items: templateList, onClick: modelParameterClick }}>
+            <span>{$t('载入预置模板')}</span>
+          </Dropdown>
+        </span>
 
-      <Form.Item label={$t('模型参数模板')} name="type" className="mt-[16px]">
-        <Select
-          className="w-INPUT_NORMAL"
-          placeholder={$t(PLACEHOLDER.input)}
-          options={templateList?.map((x) => ({
-            value: x.id,
-            label: (
-              <div className="flex items-center gap-[10px]">
-                <span>{x.name}</span>
-              </div>
-            )
-          }))}
-          onChange={(value) => {
-            form.setFieldValue('team', value)
-          }}
-        ></Select>
-      </Form.Item>
-      <Form.Item<modelFieldType> label={$t('模型参数')} name="model_parameters">
-        <Codebox
-          editorTheme="vs-dark"
-          readOnly={false}
-          width="100%"
-          height="200px"
-          language="json"
-          enableToolbar={false}
-        />
+        <Form.Item<modelFieldType> name="model_parameters">
+          <Codebox
+            editorTheme="vs-dark"
+            readOnly={false}
+            width="100%"
+            height="200px"
+            language="json"
+            enableToolbar={false}
+          />
+        </Form.Item>
       </Form.Item>
     </Form>
   )