fix: intl refresh in modal confirm

src/components/delete-modal/index.less

@@ -0,0 +1,22 @@
+:local(.delete-modal-content) {
+  display: flex;
+  font-size: var(--font-size-middle);
+
+  :global {
+    .anticon {
+      font-size: 20px;
+      margin-right: 10px;
+      color: var(--ant-color-warning);
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+:local(.content) {
+  padding-top: 15px;
+  padding-left: 30px;
+}

src/components/delete-modal/index.tsx

@@ -1,29 +1,77 @@
-import ModalFooter from '@/components/modal-footer';
+import { ExclamationCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Modal, type ModalFuncProps } from 'antd';
+import { Button, Modal, Space, message, type ModalFuncProps } from 'antd';
-import { forwardRef } from 'react';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import Styles from './index.less';
 
-const DeleteModal: React.FC<ModalFuncProps> = forwardRef((props, ref) => {
+const DeleteModal = forwardRef((props, ref) => {
   const intl = useIntl();
-  const { title, open, onOk, onCancel, content } = props;
+  const [visible, setVisible] = useState(false);
+  const [config, setConfig] = useState<ModalFuncProps & { content: string }>(
+    {}
+  );
+
+  useImperativeHandle(ref, () => ({
+    show: (data: ModalFuncProps & { content: string }) => {
+      setConfig(data);
+      setVisible(true);
+    },
+    hide: () => {
+      setVisible(false);
+    }
+  }));
+
+  const handleCancel = () => {
+    setVisible(false);
+    config.onCancel?.();
+  };
+
+  const handleOk = async () => {
+    await config.onOk?.();
+    message.success(intl.formatMessage({ id: 'common.message.success' }));
+    setVisible(false);
+  };
 
   return (
     <Modal
-      title={title}
+      style={{
-      simple={true}
+        top: '20%'
-      open={open}
+      }}
-      centered={true}
+      open={visible}
-      onOk={onOk}
+      onOk={handleOk}
-      onCancel={onCancel}
+      onCancel={handleCancel}
       destroyOnClose={true}
       closeIcon={false}
       maskClosable={false}
       keyboard={false}
-      width={600}
+      width={460}
       styles={{}}
-      footer={<ModalFooter onCancel={onCancel} onOk={onOk}></ModalFooter>}
+      footer={
+        <Space size={20}>
+          <Button onClick={handleCancel} size="middle">
+            {intl.formatMessage({ id: 'common.button.cancel' })}
+          </Button>
+          <Button type="primary" onClick={handleOk} size="middle">
+            {intl.formatMessage({ id: 'common.button.delete' })}
+          </Button>
+        </Space>
+      }
     >
-      {content}
+      <div className={Styles['delete-modal-content']}>
+        <span className="title">
+          <ExclamationCircleFilled />
+          <span>
+            {intl.formatMessage({ id: 'common.title.delete.confirm' })}
+          </span>
+        </span>
+      </div>
+      <div className={Styles['content']}>
+        {config.content &&
+          intl.formatMessage(
+            { id: 'common.delete.confirm' },
+            { type: intl.formatMessage({ id: config.content }) }
+          )}
+      </div>
     </Modal>
   );
 });

src/components/modal-footer/index.tsx

@@ -7,6 +7,8 @@ type ModalFooterProps = {
   cancelText?: string;
   okText?: string;
   htmlType?: 'button' | 'submit';
+  okBtnProps?: any;
+  cancelBtnProps?: any;
   form?: any;
   loading?: boolean;
 };
@@ -15,6 +17,8 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
   onCancel,
   cancelText,
   okText,
+  okBtnProps,
+  cancelBtnProps,
   loading,
   htmlType = 'button',
   form
@@ -22,7 +26,12 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
   const intl = useIntl();
   return (
     <Space size={20}>
-      <Button onClick={onCancel} style={{ width: '88px' }} loading={loading}>
+      <Button
+        onClick={onCancel}
+        style={{ width: '88px' }}
+        loading={loading}
+        {...cancelBtnProps}
+      >
         {cancelText || intl.formatMessage({ id: 'common.button.cancel' })}
       </Button>
       <Button
@@ -31,6 +40,7 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
         style={{ width: '88px' }}
         loading={loading}
         htmlType={htmlType}
+        {...okBtnProps}
       >
         {okText || intl.formatMessage({ id: 'common.button.save' })}
       </Button>

src/locales/en-US/common.ts

@@ -191,5 +191,6 @@ export default {
   'common.button.help': 'Help',
   'common.button.feedback': 'Feedback',
   'common.button.docs': 'Documentation',
-  'common.button.version': 'Version'
+  'common.button.version': 'Version',
+  'common.title.delete.confirm': 'Confirm delete'
 };

src/locales/zh-CN/common.ts

@@ -175,7 +175,7 @@ export default {
   'common.table.user': '用户',
   'common.settings.instructions': '操作指引',
   'common.settings.language': '语言',
-  'common.delete.confirm': '确定删除选中的{type}吗？',
+  'common.delete.confirm': '删除选中的{type}吗？',
   'common.filter.name': '名称查询',
   'common.form.password': '密码',
   'common.form.username': '用户名',
@@ -184,5 +184,6 @@ export default {
   'common.button.help': '帮助',
   'common.button.feedback': '反馈',
   'common.button.docs': '文档',
-  'common.button.version': '版本'
+  'common.button.version': '版本',
+  'common.title.delete.confirm': '确认删除'
 };

src/pages/api-keys/index.tsx

@@ -1,7 +1,7 @@
+import DeleteModal from '@/components/delete-modal';
 import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
-import useDeleteModal from '@/hooks/use-delete-modal';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import { handleBatchRequest } from '@/utils';
@@ -11,7 +11,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Input, Space, Table, Tooltip } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { deleteApisKey, queryApisKeysList } from './apis';
 import AddAPIKeyModal from './components/add-apikey';
 import { ListItem } from './config/types';
@@ -19,12 +19,12 @@ import { ListItem } from './config/types';
 const { Column } = Table;
 
 const Models: React.FC = () => {
-  const { showDeleteModal } = useDeleteModal();
   const rowSelection = useTableRowSelection();
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
   const intl = useIntl();
+  const modalRef = useRef<any>(null);
   const [dataSource, setDataSource] = useState([]);
   const [total, setTotal] = useState(0);
   const [openAddModal, setOpenAddModal] = useState(false);
@@ -98,12 +98,9 @@ const Models: React.FC = () => {
   };
 
   const handleDelete = (row: ListItem) => {
-    showDeleteModal({
+    modalRef.current.show({
       title: '',
-      content: intl.formatMessage(
+      content: 'apikeys.table.apikeys',
-        { id: 'common.delete.confirm' },
-        { type: intl.formatMessage({ id: 'apikeys.table.apikeys' }) }
-      ),
       async onOk() {
         console.log('OK');
         await deleteApisKey(row.id);
@@ -113,12 +110,9 @@ const Models: React.FC = () => {
   };
 
   const handleDeleteBatch = () => {
-    showDeleteModal({
+    modalRef.current.show({
       title: '',
-      content: intl.formatMessage(
+      content: 'apikeys.table.apikeys',
-        { id: 'common.delete.confirm' },
-        { type: intl.formatMessage({ id: 'apikeys.table.apikeys' }) }
-      ),
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteApisKey);
         rowSelection.clearSelections();
@@ -262,6 +256,7 @@ const Models: React.FC = () => {
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddAPIKeyModal>
+      <DeleteModal ref={modalRef}></DeleteModal>
     </>
   );
 };

src/pages/llmodels/components/table-list.tsx

@@ -5,7 +5,6 @@ import SealTable from '@/components/seal-table';
 import SealColumn from '@/components/seal-table/components/seal-column';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
-import useDeleteModal from '@/hooks/use-delete-modal';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
@@ -66,7 +65,6 @@ const Models: React.FC<ModelsProps> = ({
   const access = useAccess();
   const intl = useIntl();
   const [modal, contextHolder] = Modal.useModal();
-  const { showDeleteModal } = useDeleteModal();
   const navigate = useNavigate();
   const rowSelection = useTableRowSelection();
   const { handleExpandChange, updateExpandedRowKeys, expandedRowKeys } =
@@ -82,8 +80,6 @@ const Models: React.FC<ModelsProps> = ({
     undefined
   );
   const [currentInstanceUrl, setCurrentInstanceUrl] = useState<string>('');
-  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
-  const [deletConfig, setDeletConfig] = useState<any>({});
   const modalRef = useRef<any>(null);
 
   const ActionList = [
@@ -152,41 +148,19 @@ const Models: React.FC<ModelsProps> = ({
     setOpenLogModal(false);
   }, []);
   const handleDelete = async (row: any) => {
-    console.log('handleDelete=======111', row);
+    modalRef.current.show({
-    showDeleteModal({
       title: '',
-      content: intl.formatMessage(
+      content: 'models.table.models',
-        { id: 'common.delete.confirm' },
-        { type: intl.formatMessage({ id: 'models.table.models' }) }
-      ),
       async onOk() {
         await deleteModel(row.id);
         updateExpandedRowKeys([row.id]);
       }
     });
-    // setDeleteModalVisible(true);
-    // setDeletConfig({
-    //   title: '',
-    //   content: intl.formatMessage(
-    //     { id: 'common.delete.confirm' },
-    //     { type: intl.formatMessage({ id: 'models.table.models' }) }
-    //   ),
-    //   async onOk() {
-    //     await deleteModel(row.id);
-    //     updateExpandedRowKeys([row.id]);
-    //   },
-    //   onCancel: () => {
-    //     setDeleteModalVisible(false);
-    //   }
-    // });
   };
   const handleDeleteBatch = () => {
-    showDeleteModal({
+    modalRef.current.show({
       title: '',
-      content: intl.formatMessage(
+      content: 'models.table.models',
-        { id: 'common.delete.confirm' },
-        { type: intl.formatMessage({ id: 'models.table.models' }) }
-      ),
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel);
         rowSelection.clearSelections();
@@ -208,12 +182,9 @@ const Models: React.FC<ModelsProps> = ({
     }
   };
   const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => {
-    showDeleteModal({
+    modalRef.current.show({
       title: '',
-      content: intl.formatMessage(
+      content: 'models.instances',
-        { id: 'common.delete.confirm' },
-        { type: intl.formatMessage({ id: 'models.instances' }) }
-      ),
       async onOk() {
         await deleteModelInstance(row.id);
         if (list.length === 1) {
@@ -430,11 +401,7 @@ const Models: React.FC<ModelsProps> = ({
         open={openLogModal}
         onCancel={handleLogModalCancel}
       ></ViewLogsModal>
-      <DeleteModal
+      <DeleteModal ref={modalRef}></DeleteModal>
-        open={deleteModalVisible}
-        {...deletConfig}
-        ref={modalRef}
-      ></DeleteModal>
     </>
   );
 };

src/pages/playground/components/view-code-modal.tsx

@@ -56,10 +56,15 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const systemList = systemMessage
         ? [{ role: 'system', content: systemMessage }]
         : [];
-      const code = `curl ${window.location.origin}/v1-openai/chat/completions \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
+      const code = `curl ${window.location.origin}/v1-openai/chat/completions \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer {YOUR_GUPSTACK_API_KEY}" \\\n-d '${JSON.stringify(
         {
           ...parameters,
-          messages: [...systemList, ...messageList]
+          messages: [
+            ...systemList,
+            ..._.map(messageList, (item: any) => {
+              return { role: item.role, content: item.content };
+            })
+          ]
         },
         null,
         2
@@ -69,10 +74,15 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const systemList = systemMessage
         ? [{ role: 'system', content: systemMessage }]
         : [];
-      const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n"apiKey": $\{GUPSTACK_API_KEY},\n"baseURL": "${BaseURL}"\n});\n\n\nasync function main(){\nconst params = ${JSON.stringify(
+      const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n"apiKey": "YOUR_GUPSTACK_API_KEY",\n"baseURL": "${BaseURL}"\n});\n\n\nasync function main(){\nconst params = ${JSON.stringify(
         {
           ...parameters,
-          messages: [...systemList, ...messageList]
+          messages: [
+            ...systemList,
+            ..._.map(messageList, (item: any) => {
+              return { role: item.role, content: item.content };
+            })
+          ]
         },
         null,
         2
@@ -95,7 +105,16 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const systemList = systemMessage
         ? [{ role: 'system', content: systemMessage }]
         : [];
-      const code = `from openai import OpenAI\n\nbaseURL = ${BaseURL}\n\nclient = OpenAI(\nbase_url=baseURL, \napi_key="$\{GUPSTACK_API_KEY}"\n)\n\ncompletion = client.chat.completions.create(\n${formattedParams}  messages=${JSON.stringify([...systemList, ...messageList], null, 2)})\nprint(completion.choices[0].message.content)`;
+      const code = `from openai import OpenAI\n\nbaseURL = "${BaseURL}"\n\nclient = OpenAI(\nbase_url=baseURL, \napi_key="YOUR_GUPSTACK_API_KEY"\n)\n\ncompletion = client.chat.completions.create(\n${formattedParams}  messages=${JSON.stringify(
+        [
+          ...systemList,
+          ..._.map(messageList, (item: any) => {
+            return { role: item.role, content: item.content };
+          })
+        ],
+        null,
+        2
+      )})\nprint(completion.choices[0].message.content)`;
       setCodeValue(code);
     }
     formatCode();

src/pages/resources/components/workers.tsx

@@ -1,7 +1,7 @@
+import DeleteModal from '@/components/delete-modal';
 import PageTools from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
 import StatusTag from '@/components/status-tag';
-import useDeleteModal from '@/hooks/use-delete-modal';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import { convertFileSize, handleBatchRequest } from '@/utils';
@@ -13,7 +13,7 @@ import {
 import { useIntl } from '@umijs/max';
 import { Button, Input, Space, Table, Tooltip } from 'antd';
 import _ from 'lodash';
-import { memo, useEffect, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { deleteWorker, queryWorkersList } from '../apis';
 import { WorkerStatusMapValue, status } from '../config';
 import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
@@ -25,7 +25,7 @@ const Resources: React.FC = () => {
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
-  const { showDeleteModal } = useDeleteModal();
+  const modalRef = useRef<any>(null);
   const rowSelection = useTableRowSelection();
   const intl = useIntl();
   const [total, setTotal] = useState(0);
@@ -102,12 +102,9 @@ const Resources: React.FC = () => {
   };
 
   const handleDelete = (row: ListItem) => {
-    showDeleteModal({
+    modalRef.current.show({
       title: '',
-      content: intl.formatMessage(
+      content: 'worker',
-        { id: 'common.delete.confirm' },
-        { type: ' worker ' }
-      ),
       async onOk() {
         console.log('OK');
         await deleteWorker(row.id);
@@ -117,12 +114,9 @@ const Resources: React.FC = () => {
   };
 
   const handleDeleteBatch = () => {
-    showDeleteModal({
+    modalRef.current.show({
       title: '',
-      content: intl.formatMessage(
+      content: 'wokers',
-        { id: 'common.delete.confirm' },
-        { type: ` wokers ` }
-      ),
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteWorker);
         rowSelection.clearSelections();
@@ -279,7 +273,7 @@ const Resources: React.FC = () => {
                         className="m-r-5"
                         style={{ display: 'flex', width: 25 }}
                       >
-                        [{index}]
+                        [{item.index}]
                       </span>
                       <ProgressBar
                         key={index}
@@ -383,6 +377,7 @@ const Resources: React.FC = () => {
           }}
         />
       </Table>
+      <DeleteModal ref={modalRef}></DeleteModal>
     </>
   );
 };

src/pages/users/index.tsx

@@ -1,8 +1,8 @@
+import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
 import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
-import useDeleteModal from '@/hooks/use-delete-modal';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import { handleBatchRequest } from '@/utils';
@@ -19,7 +19,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Input, Space, Table, message } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
 import AddModal from './components/add-modal';
 import { FormData, ListItem } from './config/types';
@@ -31,8 +31,8 @@ const Users: React.FC = () => {
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
-  const { showDeleteModal } = useDeleteModal();
   const intl = useIntl();
+  const modalRef = useRef<any>(null);
   const [total, setTotal] = useState(0);
   const [openAddModal, setOpenAddModal] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -142,12 +142,9 @@ const Users: React.FC = () => {
   };
 
   const handleDelete = (row: ListItem) => {
-    showDeleteModal({
+    modalRef.current.show({
       title: '',
-      content: intl.formatMessage(
+      content: 'users.table.user',
-        { id: 'common.delete.confirm' },
-        { type: intl.formatMessage({ id: 'users.table.user' }) }
-      ),
       async onOk() {
         console.log('OK');
         await deleteUser(row.id);
@@ -157,12 +154,9 @@ const Users: React.FC = () => {
   };
 
   const handleDeleteBatch = () => {
-    showDeleteModal({
+    modalRef.current.show({
       title: '',
-      content: intl.formatMessage(
+      content: 'users.table.user',
-        { id: 'common.delete.confirm' },
-        { type: intl.formatMessage({ id: 'users.table.user' }) }
-      ),
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser);
         rowSelection.clearSelections();
@@ -319,6 +313,7 @@ const Users: React.FC = () => {
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddModal>
+      <DeleteModal ref={modalRef}></DeleteModal>
     </>
   );
 };