feat: add allowed models

src/config/global.d.ts

@@ -1,4 +1,3 @@
-import { PageActionType } from './types';
 declare namespace Global {
   type WithFalse<T> = T | false;
   interface Pagination {
@@ -57,12 +56,21 @@ declare namespace Global {
 
   interface ScrollerModalProps<T = unknown, U = unknown> {
     title?: string;
-    action?: PageActionType;
+    action?: 'create' | 'update' | 'view' | 'edit';
     open: boolean;
     currentData?: T | null;
     onOk?: (values: U) => void;
     onCancel: () => void;
   }
+
+  interface ActionItem {
+    label: string;
+    key: string;
+    icon: React.ReactNode;
+    props?: {
+      danger?: boolean;
+    };
+  }
 }
 
 interface Window {

src/pages/_components/transfer.tsx

@@ -0,0 +1,41 @@
+import { Transfer, TransferProps } from 'antd';
+import styled from 'styled-components';
+
+type TransferKey = string | number | bigint;
+
+const TransferWrap = styled.div`
+  .ant-transfer-list {
+    width: 100%;
+    height: 300px;
+  }
+  .ant-transfer-list-content {
+    .ant-transfer-list-content-item {
+      &:hover {
+        background-color: var(--ant-control-item-bg-hover);
+      }
+      &.ant-transfer-list-content-item-checked {
+        background-color: unset;
+        &:hover {
+          background-color: var(--ant-control-item-bg-hover);
+        }
+      }
+    }
+  }
+  .ant-pagination {
+    justify-content: center;
+  }
+`;
+
+interface TransferInnerProps extends TransferProps {
+  dataSource?: Array<{ key: TransferKey; title: string }>;
+  targetKeys?: TransferKey[];
+}
+const TransferInner: React.FC<TransferInnerProps> = (props) => {
+  return (
+    <TransferWrap>
+      <Transfer {...props}></Transfer>
+    </TransferWrap>
+  );
+};
+
+export default TransferInner;

src/pages/api-keys/components/add-apikey-modal/allow-models.tsx

@@ -0,0 +1,51 @@
+import TransferInner from '@/pages/_components/transfer';
+import { queryModelsList } from '@/pages/llmodels/apis';
+import { Form } from 'antd';
+import { useEffect, useState } from 'react';
+
+const AllowModelsForm: React.FC = () => {
+  const form = Form.useFormInstance();
+  const targetKeys = Form.useWatch('allowed_model_names', form);
+  const [modelList, setModelList] = useState<{ key: string; title: string }[]>(
+    []
+  );
+  const [queryParams, setQueryParams] = useState<Global.SearchParams>({
+    page: 1,
+    perPage: 100
+  });
+
+  const getModelList = async () => {
+    try {
+      const res = await queryModelsList(queryParams);
+      const options = res.items.map((item) => ({
+        title: item.name,
+        key: item.name
+      }));
+      setModelList(options);
+    } catch (error) {}
+  };
+
+  useEffect(() => {
+    getModelList();
+  }, []);
+
+  return (
+    <Form.Item name="allowed_model_names">
+      <TransferInner
+        dataSource={modelList}
+        targetKeys={targetKeys}
+        onChange={(nextTargetKeys) => {
+          form.setFieldsValue({ allowed_model_names: nextTargetKeys });
+        }}
+        render={(item) => item.title}
+        titles={['Available Models', 'Allowed Models']}
+        showSearch
+        filterOption={(inputValue, item) =>
+          item.title.toLowerCase().includes(inputValue.toLowerCase())
+        }
+      ></TransferInner>
+    </Form.Item>
+  );
+};
+
+export default AllowModelsForm;

src/pages/api-keys/components/add-apikey-modal/index.tsx

@@ -9,14 +9,16 @@ import { useIntl } from '@umijs/max';
 import { Button, Form, Tag } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
-import { createApisKey } from '../apis';
-import { expirationOptions } from '../config';
-import { FormData } from '../config/types';
+import { createApisKey } from '../../apis';
+import { expirationOptions } from '../../config';
+import { FormData, ListItem } from '../../config/types';
+import AllowModelsForm from './allow-models';
 
 type AddModalProps = {
   title: string;
   action: PageActionType;
   open: boolean;
+  currentData?: Partial<ListItem> | null;
   onOk: () => void;
   onCancel: () => void;
 };
@@ -25,6 +27,7 @@ const AddModal: React.FC<AddModalProps> = ({
   title,
   action,
   open,
+  currentData,
   onOk,
   onCancel
 }) => {
@@ -166,6 +169,7 @@ const AddModal: React.FC<AddModalProps> = ({
                 required
               ></SealSelect>
             </Form.Item>
+            <AllowModelsForm></AllowModelsForm>
             <Form.Item<FormData>
               name="description"
               rules={[{ required: false }]}

src/pages/api-keys/config/types.ts

@@ -11,5 +11,6 @@ export interface ListItem {
 export interface FormData {
   name: string;
   description: string;
+  allowed_model_names: string[];
   expires_in: number | null;
 }

src/pages/api-keys/hooks/use-keys-columns.tsx

@@ -0,0 +1,106 @@
+// columns.ts
+import AutoTooltip from '@/components/auto-tooltip';
+import DropdownButtons from '@/components/drop-down-buttons';
+import icons from '@/components/icon-font/icons';
+import { useIntl } from '@umijs/max';
+import type { SortOrder } from 'antd/es/table/interface';
+import { ColumnsType } from 'antd/lib/table';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import { ListItem } from '../config/types';
+
+interface ColumnsHookProps {
+  handleSelect: (val: string, record: ListItem) => void;
+  sortOrder: SortOrder;
+}
+
+const actionList: Global.ActionItem[] = [
+  {
+    label: 'common.button.edit',
+    key: 'edit',
+    icon: icons.EditOutlined
+  },
+  {
+    label: 'common.button.delete',
+    key: 'delete',
+    icon: icons.DeleteOutlined,
+    props: { danger: true }
+  }
+];
+
+const useModelsColumns = ({
+  handleSelect,
+  sortOrder
+}: ColumnsHookProps): ColumnsType<ListItem> => {
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'common.table.name' }),
+        dataIndex: 'name',
+        key: 'name',
+        render: (text: string, record: ListItem) => (
+          <AutoTooltip ghost style={{ maxWidth: 400 }}>
+            {text}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'apikeys.form.expiretime' }),
+        dataIndex: 'expires_at',
+        key: 'expires_at',
+        render: (text: string, record: ListItem) => (
+          <AutoTooltip ghost>
+            {text
+              ? dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+              : intl.formatMessage({
+                  id: 'apikeys.form.expiration.never'
+                })}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.description' }),
+        dataIndex: 'description',
+        key: 'description',
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: string, record: ListItem) => (
+          <AutoTooltip ghost>{text}</AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.createTime' }),
+        dataIndex: 'created_at',
+        key: 'created_at',
+        defaultSortOrder: 'descend',
+        sortOrder,
+        sorter: false,
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: number) => (
+          <AutoTooltip ghost>
+            {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        key: 'operation',
+        dataIndex: 'operation',
+        span: 3,
+        render: (text, record) => (
+          <DropdownButtons
+            items={actionList}
+            onSelect={(val) => handleSelect(val, record)}
+          />
+        )
+      }
+    ];
+  }, [sortOrder, intl, handleSelect]);
+};
+
+export default useModelsColumns;

src/pages/api-keys/index.tsx

@@ -1,35 +1,17 @@
-import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
-import PageTools from '@/components/page-tools';
+import { FilterBar } from '@/components/page-tools';
 import { PageAction } from '@/config';
-import HotKeys from '@/config/hotkeys';
 import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
-import {
-  DeleteOutlined,
-  PlusOutlined,
-  SearchOutlined,
-  SyncOutlined
-} from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import {
-  Button,
-  ConfigProvider,
-  Empty,
-  Input,
-  Space,
-  Table,
-  Tooltip
-} from 'antd';
-import dayjs from 'dayjs';
+import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
+import { ConfigProvider, Empty, Table } from 'antd';
 import { useState } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { deleteApisKey, queryApisKeysList } from './apis';
-import AddAPIKeyModal from './components/add-apikey';
+import AddAPIKeyModal from './components/add-apikey-modal';
 import { ListItem } from './config/types';
-
-const { Column } = Table;
+import useKeysColumns from './hooks/use-keys-columns';
 
 const APIKeys: React.FC = () => {
   const {
@@ -52,19 +34,45 @@ const APIKeys: React.FC = () => {
   });
 
   const intl = useIntl();
+  const [openAddModal, setOpenAddModal] = useState<{
+    open: boolean;
+    action: PageActionType;
+    title: string;
+    currentData?: Partial<ListItem> | null;
+  }>({
+    open: false,
+    action: PageAction.CREATE,
+    title: '',
+    currentData: null
+  });
 
-  const [openAddModal, setOpenAddModal] = useState(false);
-  const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
+  const handleAddKey = () => {
+    setOpenAddModal({
+      open: true,
+      title: intl.formatMessage({ id: 'apikeys.button.create' }),
+      action: PageAction.CREATE,
+      currentData: null
+    });
+  };
 
-  const handleAddUser = () => {
-    setOpenAddModal(true);
-    setAction(PageAction.CREATE);
+  const handleEditKey = (record: ListItem) => {
+    setOpenAddModal({
+      open: true,
+      title: 'Edit API Key',
+      action: PageAction.EDIT,
+      currentData: record
+    });
   };
 
   const handleModalOk = async () => {
     try {
       await fetchData();
-      setOpenAddModal(false);
+      setOpenAddModal({
+        open: false,
+        title: '',
+        action: PageAction.CREATE,
+        currentData: null
+      });
     } catch (error) {
       // do nothing
     }
@@ -72,9 +80,22 @@ const APIKeys: React.FC = () => {
 
   const handleModalCancel = () => {
     console.log('handleModalCancel');
-    setOpenAddModal(false);
+    setOpenAddModal({
+      open: false,
+      title: '',
+      action: PageAction.CREATE,
+      currentData: null
+    });
   };
 
+  const onSelect = useMemoizedFn(async (val: string, record: ListItem) => {
+    if (val === 'delete') {
+      handleDelete(record);
+    } else if (val === 'edit') {
+      handleEditKey(record);
+    }
+  });
+
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
     if (
@@ -87,15 +108,7 @@ const APIKeys: React.FC = () => {
     return <div></div>;
   };
 
-  useHotkeys(
-    HotKeys.CREATE,
-    () => {
-      handleAddUser();
-    },
-    {
-      enabled: !openAddModal
-    }
-  );
+  const columns = useKeysColumns({ handleSelect: onSelect, sortOrder });
 
   return (
     <>
@@ -110,56 +123,20 @@ const APIKeys: React.FC = () => {
         }}
         extra={[]}
       >
-        <PageTools
+        <FilterBar
           marginBottom={22}
-          left={
-            <Space>
-              <Input
-                prefix={
-                  <SearchOutlined
-                    style={{ color: 'var(--ant-color-text-placeholder)' }}
-                  ></SearchOutlined>
-                }
-                placeholder={intl.formatMessage({ id: 'common.filter.name' })}
-                style={{ width: 300 }}
-                allowClear
-                onChange={handleNameChange}
-              ></Input>
-              <Button
-                type="text"
-                style={{ color: 'var(--ant-color-text-tertiary)' }}
-                onClick={handleSearch}
-                icon={<SyncOutlined></SyncOutlined>}
-              ></Button>
-            </Space>
-          }
-          right={
-            <Space size={20}>
-              <Button
-                icon={<PlusOutlined></PlusOutlined>}
-                type="primary"
-                onClick={handleAddUser}
-              >
-                {intl.formatMessage({ id: 'apikeys.button.create' })}
-              </Button>
-              <Button
-                icon={<DeleteOutlined />}
-                danger
-                onClick={handleDeleteBatch}
-                disabled={!rowSelection.selectedRowKeys.length}
-              >
-                <span>
-                  {intl?.formatMessage?.({ id: 'common.button.delete' })}
-                  {rowSelection.selectedRowKeys.length > 0 && (
-                    <span>({rowSelection.selectedRowKeys?.length})</span>
-                  )}
-                </span>
-              </Button>
-            </Space>
-          }
-        ></PageTools>
+          marginTop={30}
+          buttonText={intl.formatMessage({ id: 'apikeys.button.create' })}
+          handleSearch={handleSearch}
+          handleDeleteByBatch={handleDeleteBatch}
+          handleClickPrimary={handleAddKey}
+          handleInputChange={handleNameChange}
+          rowSelection={rowSelection}
+          width={{ input: 300 }}
+        ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            columns={columns}
             dataSource={dataSource.dataList}
             rowSelection={rowSelection}
             loading={dataSource.loading}
@@ -173,102 +150,14 @@ const APIKeys: React.FC = () => {
               hideOnSinglePage: queryParams.perPage === 10,
               onChange: handlePageChange
             }}
-          >
-            <Column
-              title={intl.formatMessage({ id: 'common.table.name' })}
-              dataIndex="name"
-              key="name"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost style={{ maxWidth: 400 }}>
-                    {text}
-                  </AutoTooltip>
-                );
-              }}
-            />
-
-            <Column
-              title={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
-              dataIndex="expires_at"
-              key="expiration"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost>
-                    {text
-                      ? dayjs(text).format('YYYY-MM-DD HH:mm:ss')
-                      : intl.formatMessage({
-                          id: 'apikeys.form.expiration.never'
-                        })}
-                  </AutoTooltip>
-                );
-              }}
-            />
-            <Column
-              title={intl.formatMessage({ id: 'common.table.description' })}
-              dataIndex="description"
-              key="description"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return <AutoTooltip ghost>{text}</AutoTooltip>;
-              }}
-            />
-            <Column
-              title={intl.formatMessage({ id: 'common.table.createTime' })}
-              dataIndex="created_at"
-              key="createTime"
-              defaultSortOrder="descend"
-              sortOrder={sortOrder}
-              showSorterTooltip={false}
-              sorter={false}
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost>
-                    {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
-                  </AutoTooltip>
-                );
-              }}
-            />
-            <Column
-              title={intl.formatMessage({ id: 'common.table.operation' })}
-              key="operation"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record: ListItem) => {
-                return (
-                  <Space size={20}>
-                    <Tooltip
-                      title={intl.formatMessage({ id: 'common.button.delete' })}
-                    >
-                      <Button
-                        onClick={() => handleDelete(record)}
-                        size="small"
-                        danger
-                        icon={<DeleteOutlined></DeleteOutlined>}
-                      ></Button>
-                    </Tooltip>
-                  </Space>
-                );
-              }}
-            />
-          </Table>
+          ></Table>
         </ConfigProvider>
       </PageContainer>
       <AddAPIKeyModal
-        open={openAddModal}
-        action={action}
-        title={intl.formatMessage({ id: 'apikeys.button.create' })}
+        open={openAddModal.open}
+        action={openAddModal.action}
+        title={openAddModal.title}
+        currentData={openAddModal.currentData}
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddAPIKeyModal>

src/pages/llmodels/components/access-control-modal/form.tsx

@@ -1,7 +1,8 @@
 import IconFont from '@/components/icon-font';
 import CheckboxField from '@/components/seal-form/checkbox-field';
+import TransferInner from '@/pages/_components/transfer';
 import { queryUsersList } from '@/pages/users/apis';
-import { Form, Transfer } from 'antd';
+import { Form } from 'antd';
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import styled from 'styled-components';
 import { queryModelAccessUserList } from '../../apis';
@@ -9,29 +10,6 @@ import { AccessControlFormData, ListItem } from '../../config/types';
 
 type TransferKey = string | number | bigint;
 
-const TransferWrap = styled.div`
-  .ant-transfer-list {
-    width: 100%;
-    height: 400px;
-  }
-  .ant-transfer-list-content {
-    .ant-transfer-list-content-item {
-      &:hover {
-        background-color: var(--ant-control-item-bg-hover);
-      }
-      &.ant-transfer-list-content-item-checked {
-        background-color: unset;
-        &:hover {
-          background-color: var(--ant-control-item-bg-hover);
-        }
-      }
-    }
-  }
-  .ant-pagination {
-    justify-content: center;
-  }
-`;
-
 const Label = styled.div`
   font-weight: 500;
   margin-bottom: 16px;
@@ -138,21 +116,27 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
         ></CheckboxField>
       </Form.Item>
       {setPublic && (
-        <Form.Item<AccessControlFormData> name="users">
-          <TransferWrap>
-            <Transfer
-              dataSource={userList}
-              targetKeys={targetKeys}
-              showSelectAll
-              showSearch
-              pagination={totalPages > 1}
-              titles={['Available Users', 'Users with Access']}
-              render={(item) => item.title}
-              selectAllLabels={[]}
-              selectionsIcon={<IconFont type="icon-down"></IconFont>}
-              onChange={handleOnChange}
-            />
-          </TransferWrap>
+        <Form.Item<AccessControlFormData>
+          name="users"
+          rules={[
+            {
+              required: true,
+              message: 'Please select at least one user'
+            }
+          ]}
+        >
+          <TransferInner
+            dataSource={userList}
+            targetKeys={targetKeys}
+            showSelectAll
+            showSearch
+            pagination={totalPages > 1}
+            titles={['Available Users', 'Users with Access']}
+            render={(item) => item.title}
+            selectAllLabels={[]}
+            selectionsIcon={<IconFont type="icon-down"></IconFont>}
+            onChange={handleOnChange}
+          />
         </Form.Item>
       )}
     </Form>

src/pages/llmodels/components/access-control-modal/index.tsx

@@ -45,7 +45,7 @@ const AccessControlModal: React.FC<
       closeIcon={true}
       maskClosable={false}
       keyboard={false}
-      width={800}
+      width={600}
       footer={
         <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
       }

src/pages/llmodels/user-models.tsx

@@ -9,7 +9,7 @@ import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { Button, Input, Space } from 'antd';
 import React from 'react';
-import { MODELS_API, queryModelsList } from './apis';
+import { MY_MODELS_API, queryMyModels } from './apis';
 import ModelItem from './components/model-item';
 import { categoryOptions, modelCategoriesMap } from './config';
 import { categoryToPathMap } from './config/button-actions';
@@ -24,8 +24,8 @@ const UserModels: React.FC = () => {
     handleQueryChange,
     handleNameChange
   } = useTableFetch<any>({
-    fetchAPI: queryModelsList,
-    API: MODELS_API,
+    fetchAPI: queryMyModels,
+    API: MY_MODELS_API,
     watch: false
   });
   const intl = useIntl();