feat(web): move create custom model to model list

web/src/views/ModelManagement/components/CustomModelModal.tsx

@@ -11,10 +11,10 @@
  */
 
 import { forwardRef, useImperativeHandle, useState } from 'react';
-import { Form, Input, App, Select } from 'antd';
+import { Form, Input, App } from 'antd';
 import { useTranslation } from 'react-i18next';
 
-import type { CustomModelForm, ModelPlazaItem, CustomModelModalRef, CustomModelModalProps } from '../types';
+import type { CustomModelForm, ModelListItem, CustomModelModalRef, CustomModelModalProps } from '../types';
 import RbModal from '@/components/RbModal'
 import CustomSelect from '@/components/CustomSelect'
 import UploadImages from '@/components/Upload/UploadImages'
@@ -30,22 +30,21 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
   const { t } = useTranslation();
   const { message } = App.useApp();
   const [visible, setVisible] = useState(false);
-  const [model, setModel] = useState<ModelPlazaItem>({} as ModelPlazaItem);
+  const [model, setModel] = useState<ModelListItem>({} as ModelListItem);
   const [isEdit, setIsEdit] = useState(false);
   const [form] = Form.useForm<CustomModelForm>();
   const [loading, setLoading] = useState(false)
-  const formValues = Form.useWatch([], form)
 
   /** Close modal and reset state */
   const handleClose = () => {
-    setModel({} as ModelPlazaItem);
+    setModel({} as ModelListItem);
     form.resetFields();
     setLoading(false)
     setVisible(false);
   };
 
   /** Open modal with optional model data for editing */
-  const handleOpen = (model?: ModelPlazaItem) => {
+  const handleOpen = (model?: ModelListItem) => {
     if (model) {
       setIsEdit(true);
       setModel(model);
@@ -66,7 +65,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
     const res = isEdit ? updateCustomModel(model.id, rest) : addCustomModel(data)
 
     res.then(() => {
-      refresh && refresh()
+      refresh && refresh(isEdit)
       handleClose()
       message.success(isEdit ? t('common.updateSuccess') : t('common.createSuccess'))
     })
@@ -79,12 +78,10 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
     form
       .validateFields()
       .then((values) => {
-        setLoading(true)
         const { logo, ...rest } = values;
         let formData: CustomModelForm = {
           ...rest
         }
-        formData.is_official = false;
 
         if (typeof logo === 'object' && logo?.response?.data.file_id) {
           getFileLink(logo?.response?.data.file_id)
@@ -111,8 +108,6 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
     handleOpen,
   }));
 
-  console.log('formValues', formValues)
-
   return (
     <RbModal
       title={isEdit ? `${model.name} - ${t('modelNew.modelConfiguration')}` : t('modelNew.createCustomModel')}
@@ -174,11 +169,22 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
         >
           <Input.TextArea placeholder={t('common.pleaseEnter')} />
         </Form.Item>
+
+
         <Form.Item
-          name="tags"
-          label={t('modelNew.tags')}
+          name={["api_keys", 0, "api_key"]}
+          label={t('modelNew.api_key')}
+          rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('modelNew.api_key') }) }]}
         >
-          <Select mode="tags" placeholder={t('common.pleaseEnter')} />
+          <Input.Password placeholder={t('common.pleaseEnter')} />
+        </Form.Item>
+
+        <Form.Item
+          name={["api_keys", 0, "api_base"]}
+          label={t('modelNew.api_base')}
+          rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('modelNew.api_base') }) }]}
+        >
+          <Input placeholder="https://api.example.com/v1" />
         </Form.Item>
       </Form>
     </RbModal>

web/src/views/ModelManagement/components/ModelListDetail.tsx

@@ -30,12 +30,13 @@ import CustomSelect from '@/components/CustomSelect'
 interface ModelListDetailProps {
   /** Callback to refresh parent list */
   refresh?: () => void;
+  handleEdit: (vo?: ModelListItem) => void;
 }
 
 /**
  * Model list detail drawer component
  */
-const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({ refresh }, ref) => {
+const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({ refresh, handleEdit }, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [data, setData] = useState<ProviderModelItem>({} as ProviderModelItem)
@@ -95,7 +96,8 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
 
   /** Expose methods to parent component */
   useImperativeHandle(ref, () => ({
-      handleOpen,
+    handleOpen,
+    handleRefresh,
   }));
 
   /** Filter models by selected type */
@@ -149,7 +151,10 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
               </Tooltip>
               <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
                 <Row gutter={12}>
-                  <Col span={24}>
+                  <Col span={12}>
+                    <Button block onClick={() => handleEdit(item)}>{t('modelNew.modelConfiguration')}</Button>
+                  </Col>
+                  <Col span={12}>
                     <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
                   </Col>
                 </Row>

web/src/views/ModelManagement/components/ModelSquareDetail.tsx

@@ -29,14 +29,12 @@ import { getLogoUrl } from '../utils'
 interface ModelSquareDetailProps {
   /** Callback to refresh parent list */
   refresh: () => void;
-  /** Callback to edit model */
-  handleEdit: (vo: ModelPlazaItem) => void;
 }
 
 /**
  * Model square detail drawer component
  */
-const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProps>(({ refresh, handleEdit }, ref) => {
+const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProps>(({ refresh }, ref) => {
   const { t } = useTranslation();
   const { message } = App.useApp()
   const [model, setModel] = useState<ModelPlaza>({} as ModelPlaza)
@@ -112,7 +110,6 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
                   <Flex justify="space-between">
                     <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
                     <Space>
-                      {!item.is_official && <Button type="primary" disabled={item.is_deprecated} onClick={() => handleEdit(item)}>{t('modelNew.edit')}</Button>}
                       {item.is_added
                         ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
                         : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>{item.is_deprecated ? t('modelNew.deprecated') : `+ ${t('common.add')}`}</Button>