💄 style: Use new Alert ui

src/app/chat/features/Conversation/ChatList/Error/OpenAiBizError.tsx

@@ -3,7 +3,6 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import OpenAPIKey from './OpenAPIKey';
-import { useStyles } from './style';
 
 interface OpenAIError {
   code: 'invalid_api_key' | string;
@@ -17,8 +16,6 @@ interface OpenAIErrorResponse {
 }
 
 const OpenAiBizError: RenderErrorMessage = memo(({ error, id, ...props }) => {
-  const { styles } = useStyles();
-
   const errorBody: OpenAIErrorResponse = (error as any)?.body;
 
   const errorCode = errorBody.error?.code;
@@ -26,8 +23,10 @@ const OpenAiBizError: RenderErrorMessage = memo(({ error, id, ...props }) => {
   if (errorCode === 'invalid_api_key') return <OpenAPIKey error={error} id={id} {...props} />;
 
   return (
-    <Flexbox className={styles.container} style={{ maxWidth: 600 }}>
-      <Highlighter language={'json'}>{JSON.stringify(errorBody, null, 2)}</Highlighter>
+    <Flexbox style={{ maxWidth: 600 }}>
+      <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+        {JSON.stringify(errorBody, null, 2)}
+      </Highlighter>
     </Flexbox>
   );
 });

src/app/chat/features/Conversation/ChatList/Error/Plugin/PluginError.tsx

@@ -2,8 +2,6 @@ import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useStyles } from '../style';
-
 interface OpenAIError {
   code: 'invalid_api_key' | string;
   message: string;
@@ -16,12 +14,13 @@ interface OpenAIErrorResponse {
 }
 
 const PluginError: RenderErrorMessage = memo(({ error, id }) => {
-  const { styles } = useStyles();
   const errorBody: OpenAIErrorResponse = (error as any)?.body;
 
   return (
-    <Flexbox className={styles.container} id={id} style={{ maxWidth: 600 }}>
-      <Highlighter language={'json'}>{JSON.stringify(errorBody, null, 2)}</Highlighter>
+    <Flexbox id={id} style={{ maxWidth: 600 }}>
+      <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+        {JSON.stringify(errorBody, null, 2)}
+      </Highlighter>
     </Flexbox>
   );
 });

src/app/chat/features/Conversation/ChatList/Error/style.tsx

@@ -5,6 +5,11 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 export const useStyles = createStyles(({ css, token }) => ({
   container: css`
+    margin-top: -4px;
+    margin-bottom: 4px;
+
+    color: ${token.colorText};
+
     background: ${token.colorBgContainer};
     border: 1px solid ${token.colorSplit};
     border-radius: 8px;

src/app/chat/settings/features/SubmitAgentButton/Inner.tsx

@@ -1,4 +1,5 @@
-import { Alert, Button, Divider, Input } from 'antd';
+import { Alert } from '@lobehub/ui';
+import { Button, Divider, Input } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { kebabCase } from 'lodash-es';

src/app/settings/features/UpgradeAlert.tsx

@@ -1,4 +1,5 @@
-import { Alert, Button } from 'antd';
+import { Alert } from '@lobehub/ui';
+import { Button } from 'antd';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

src/app/settings/llm/LLM/Checker.tsx

@@ -1,6 +1,6 @@
 import { CheckCircleFilled } from '@ant-design/icons';
-import { Highlighter } from '@lobehub/ui';
-import { Alert, Button } from 'antd';
+import { Alert, Highlighter } from '@lobehub/ui';
+import { Button } from 'antd';
 import { useTheme } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -72,10 +72,19 @@ const Checker = memo<CheckerProps>(({ checkModel }) => {
 
       {error && (
         <Flexbox gap={8}>
-          <Alert banner message={error.message} showIcon type={'error'}></Alert>
-          <Flexbox style={{ maxWidth: 600 }}>
-            <Highlighter language={'json'}>{JSON.stringify(error.body, null, 2)}</Highlighter>
-          </Flexbox>
+          <Alert
+            banner
+            extra={
+              <Flexbox style={{ maxWidth: 600 }}>
+                <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+                  {JSON.stringify(error.body, null, 2)}
+                </Highlighter>
+              </Flexbox>
+            }
+            message={error.message}
+            showIcon
+            type={'error'}
+          />
         </Flexbox>
       )}
     </Flexbox>

src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx

@@ -1,5 +1,4 @@
-import { Form, Input, Modal } from '@lobehub/ui';
-import { Alert } from 'antd';
+import { Alert, Form, Input, Modal } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';

src/features/PluginDevModal/index.tsx

@@ -1,5 +1,5 @@
-import { Modal } from '@lobehub/ui';
-import { Alert, App, Button, Form, Popconfirm } from 'antd';
+import { Alert, Modal } from '@lobehub/ui';
+import { App, Button, Form, Popconfirm } from 'antd';
 import { useResponsive } from 'antd-style';
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';