style: error message toast

src/pages/_components/error-message-content.tsx

@@ -0,0 +1,44 @@
+import { CheckCircleFilled, CopyOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
+import styled from 'styled-components';
+
+const Content = styled.div`
+  position: relative;
+  .cp-btn {
+    position: absolute;
+    top: 0px;
+    right: -4px;
+    display: none;
+  }
+  &:hover .cp-btn {
+    display: inline-block;
+  }
+  .msg {
+    display: none;
+  }
+`;
+
+const ErrorMessageContent: React.FC<{ errMsg: string }> = ({ errMsg }) => {
+  return (
+    <Content>
+      <Typography.Text
+        className="cp-btn"
+        copyable={{
+          text: errMsg,
+          icon: [
+            <CopyOutlined style={{ fontSize: 14 }} key="copy" />,
+            <CheckCircleFilled
+              style={{ color: 'var(--ant-color-success)', fontSize: 14 }}
+              key="copied"
+            />
+          ]
+        }}
+      >
+        <span className="msg">{errMsg}</span>
+      </Typography.Text>
+      {errMsg}
+    </Content>
+  );
+};
+
+export default ErrorMessageContent;

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

@@ -1,4 +1,5 @@
 import { createAxiosToken } from '@/hooks/use-chunk-request';
+import ErrorMessageContent from '@/pages/_components/error-message-content';
 import { useRequest } from 'ahooks';
 import { message } from 'antd';
 import { CancelTokenSource } from 'axios';
@@ -105,11 +106,23 @@ export const useTestProviderModel = () => {
       manual: true,
       onSuccess: (response) => {
         if (!response?.accessible) {
-          message.error(response?.error_message || 'Test model failed');
+          message.error({
+            content: (
+              <ErrorMessageContent
+                errMsg={response?.error_message || 'Test model failed'}
+              ></ErrorMessageContent>
+            )
+          });
         }
       },
       onError: (error) => {
-        message.error(error?.message || 'Test model failed');
+        message.error({
+          content: (
+            <ErrorMessageContent
+              errMsg={error?.message || 'Test model failed'}
+            ></ErrorMessageContent>
+          )
+        });
       }
     }
   );

src/request-config.tsx

@@ -1,25 +1,9 @@
 import { userAtom } from '@/atoms/user';
 import { clearAtomStorage } from '@/atoms/utils';
 import { history, RequestConfig } from '@umijs/max';
-import { message, Typography } from 'antd';
-import styled from 'styled-components';
+import { message } from 'antd';
 import { DEFAULT_ENTER_PAGE } from './config/settings';
-
-const Content = styled.div`
-  position: relative;
-  .cp-btn {
-    position: absolute;
-    top: 0px;
-    right: -4px;
-    display: none;
-  }
-  &:hover .cp-btn {
-    display: inline-block;
-  }
-  .msg {
-    display: none;
-  }
-`;
+import ErrorMessageContent from './pages/_components/error-message-content';
 
 //  these APIs do not via the GPUSTACK_API_BASE_URL
 const NoBaseURLAPIs = ['/auth', '/v1', '/version', '/proxy', '/update'];
@@ -42,19 +26,7 @@ export const requestConfig: RequestConfig = {
 
       if (!opts?.skipErrorHandler && response?.status) {
         message.error({
-          content: (
-            <Content>
-              <Typography.Text
-                className="cp-btn"
-                copyable={{
-                  text: errMsg
-                }}
-              >
-                <span className="msg">{errMsg}</span>
-              </Typography.Text>
-              {errMsg}
-            </Content>
-          )
+          content: <ErrorMessageContent errMsg={errMsg}></ErrorMessageContent>
         });
       }
       if (response?.status === 401) {