@lobehub/chat 0.101.5 → 0.101.6

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 # Changelog
 
+### [Version 0.101.6](https://github.com/lobehub/lobe-chat/compare/v0.101.5...v0.101.6)
+
+<sup>Released on **2023-11-17**</sup>
+
+#### 💄 Styles
+
+- **misc**: Add config to renderErrorMessages, Use new Alert ui.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Add config to renderErrorMessages ([75b6b40](https://github.com/lobehub/lobe-chat/commit/75b6b40))
+- **misc**: Use new Alert ui ([cf845a7](https://github.com/lobehub/lobe-chat/commit/cf845a7))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.101.5](https://github.com/lobehub/lobe-chat/compare/v0.101.4...v0.101.5)
 
 <sup>Released on **2023-11-17**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.101.5",
+  "version": "0.101.6",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",

package/src/app/chat/features/Conversation/ChatList/Error/InvalidAccess.tsx

@@ -16,7 +16,7 @@ enum Tab {
   Password = 'password',
 }
 
-const InvalidAccess: RenderErrorMessage = memo(({ id }) => {
+const InvalidAccess: RenderErrorMessage['Render'] = memo(({ id }) => {
   const { t } = useTranslation('error');
   const [mode, setMode] = useState<Tab>(Tab.Password);
   const [password, setSettings] = useGlobalStore((s) => [s.settings.password, s.setSettings]);

package/src/app/chat/features/Conversation/ChatList/Error/OpenAPIKey.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer } from './style';
 
-const OpenAPIKey: RenderErrorMessage = memo(({ id }) => (
+const OpenAPIKey: RenderErrorMessage['Render'] = memo(({ id }) => (
   <ErrorActionContainer>
     <APIKeyForm id={id} />
   </ErrorActionContainer>

package/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;
@@ -16,18 +15,20 @@ interface OpenAIErrorResponse {
   error: OpenAIError;
 }
 
-const OpenAiBizError: RenderErrorMessage = memo(({ error, id, ...props }) => {
-  const { styles } = useStyles();
-
+const OpenAiBizError: RenderErrorMessage['Render'] = memo(({ error, id, ...props }) => {
   const errorBody: OpenAIErrorResponse = (error as any)?.body;
 
   const errorCode = errorBody.error?.code;
 
-  if (errorCode === 'invalid_api_key') return <OpenAPIKey error={error} id={id} {...props} />;
+  if (errorCode === 'invalid_api_key')
+    // @ts-ignore
+    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'}>
+        {JSON.stringify(errorBody, null, 2)}
+      </Highlighter>
     </Flexbox>
   );
 });

package/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;
@@ -15,13 +13,14 @@ interface OpenAIErrorResponse {
   error: OpenAIError;
 }
 
-const PluginError: RenderErrorMessage = memo(({ error, id }) => {
-  const { styles } = useStyles();
+const PluginError: RenderErrorMessage['Render'] = memo(({ error, id }) => {
   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>
   );
 });

package/src/app/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx

@@ -12,7 +12,7 @@ import { useSessionStore } from '@/store/session';
 
 import { ErrorActionContainer, useStyles } from '../style';
 
-const PluginSettings: RenderErrorMessage = memo(({ id, plugin }) => {
+const PluginSettings: RenderErrorMessage['Render'] = memo(({ id, plugin }) => {
   const { styles } = useStyles();
   const { t } = useTranslation('error');
   const theme = useTheme();

package/src/app/chat/features/Conversation/ChatList/Error/index.tsx

@@ -10,17 +10,63 @@ import PluginError from './Plugin/PluginError';
 import PluginSettings from './Plugin/PluginSettings';
 
 export const renderErrorMessages: ChatListProps['renderErrorMessages'] = {
-  [PluginErrorType.PluginMarketIndexNotFound]: PluginError,
-  [PluginErrorType.PluginMarketIndexInvalid]: PluginError,
-  [PluginErrorType.PluginMetaInvalid]: PluginError,
-  [PluginErrorType.PluginMetaNotFound]: PluginError,
-  [PluginErrorType.PluginManifestInvalid]: PluginError,
-  [PluginErrorType.PluginManifestNotFound]: PluginError,
-  [PluginErrorType.PluginApiNotFound]: PluginError,
-  [PluginErrorType.PluginApiParamsError]: PluginError,
-  [PluginErrorType.PluginServerError]: PluginError,
-  [PluginErrorType.PluginSettingsInvalid]: PluginSettings,
-  [ChatErrorType.InvalidAccessCode]: InvalidAccess,
-  [ChatErrorType.NoAPIKey]: OpenAPIKey,
-  [ChatErrorType.OpenAIBizError]: OpenAiBizError,
+  [PluginErrorType.PluginMarketIndexNotFound]: {
+    Render: PluginError,
+  },
+  [PluginErrorType.PluginMarketIndexInvalid]: {
+    Render: PluginError,
+  },
+  [PluginErrorType.PluginMetaInvalid]: {
+    Render: PluginError,
+  },
+  [PluginErrorType.PluginMetaNotFound]: {
+    Render: PluginError,
+  },
+  [PluginErrorType.PluginManifestInvalid]: {
+    Render: PluginError,
+  },
+  [PluginErrorType.PluginManifestNotFound]: {
+    Render: PluginError,
+  },
+  [PluginErrorType.PluginApiNotFound]: {
+    Render: PluginError,
+  },
+  [PluginErrorType.PluginApiParamsError]: {
+    Render: PluginError,
+  },
+  [PluginErrorType.PluginServerError]: {
+    Render: PluginError,
+  },
+  [PluginErrorType.PluginSettingsInvalid]: {
+    Render: PluginSettings,
+    config: {
+      extraDefaultExpand: true,
+      extraIsolate: true,
+      type: 'warning',
+    },
+  },
+  [ChatErrorType.InvalidAccessCode]: {
+    Render: InvalidAccess,
+    config: {
+      extraDefaultExpand: true,
+      extraIsolate: true,
+      type: 'warning',
+    },
+  },
+  [ChatErrorType.NoAPIKey]: {
+    Render: OpenAPIKey,
+    config: {
+      extraDefaultExpand: true,
+      extraIsolate: true,
+      type: 'warning',
+    },
+  },
+  [ChatErrorType.OpenAIBizError]: {
+    Render: OpenAiBizError,
+    config: {
+      extraDefaultExpand: true,
+      extraIsolate: true,
+      type: 'warning',
+    },
+  },
 };

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

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

package/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';

package/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';

package/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>

package/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';

package/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';