@lobehub/chat 0.25.0 → 0.26.1

package/.eslintrc.js

@@ -1,7 +1,8 @@
 const config = require('@lobehub/lint').eslint;
 
 config.extends.push('plugin:@next/next/recommended');
-//config.extends.push('plugin:@next/next/core-web-vitals');
 
 config.rules['unicorn/no-negated-condition'] = 0;
+config.rules['unicorn/prefer-type-error'] = 0;
+
 module.exports = config;

package/CHANGELOG.md

@@ -2,24 +2,131 @@
 
 # Changelog
 
-# [0.25.0](https://github.com/lobehub/lobe-chat/compare/v0.24.0...v0.25.0) (2023-07-26)
+### [Version 0.26.1](https://github.com/lobehub/lobe-chat/compare/v0.26.0...v0.26.1)
 
-### ✨ Features
+<sup>Released on **2023-07-29**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 优化 setting Layout 实现.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 优化 setting Layout 实现 ([f789935](https://github.com/lobehub/lobe-chat/commit/f789935))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.26.0](https://github.com/lobehub/lobe-chat/compare/v0.25.0...v0.26.0)
+
+<sup>Released on **2023-07-28**</sup>
+
+#### ✨ Features
+
+- **misc**: support password auth and error.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: support password auth and error, closes [#22](https://github.com/lobehub/lobe-chat/issues/22) ([67f1f4d](https://github.com/lobehub/lobe-chat/commit/67f1f4d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.25.0](https://github.com/lobehub/lobe-chat/compare/v0.24.0...v0.25.0)
+
+<sup>Released on **2023-07-26**</sup>
+
+#### ✨ Features
+
+- **sidebar**: Add import functionality and set labels and onClick functions
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### ✨ Features
 
 - **sidebar**: Add import functionality and set labels and onClick functions ([03ea9bd](https://github.com/lobehub/lobe-chat/commit/03ea9bd))
 
-# [0.24.0](https://github.com/lobehub/lobe-chat/compare/v0.23.0...v0.24.0) (2023-07-26)
+</details>
 
-### ✨ Features
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.24.0](https://github.com/lobehub/lobe-chat/compare/v0.23.0...v0.24.0)
+
+<sup>Released on **2023-07-26**</sup>
+
+#### ✨ Features
+
+- **misc**: Add new translations, update existing translations, add functionality to components, modify styling, and adjust placeholder text
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### ✨ Features
 
 - Add new translations, update existing translations, add functionality to components, modify styling, and adjust placeholder text ([da4ae72](https://github.com/lobehub/lobe-chat/commit/da4ae72))
 
-# [0.23.0](https://github.com/lobehub/lobe-chat/compare/v0.22.2...v0.23.0) (2023-07-26)
+</details>
 
-### ✨ Features
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.23.0](https://github.com/lobehub/lobe-chat/compare/v0.22.2...v0.23.0)
+
+<sup>Released on **2023-07-26**</sup>
+
+#### ✨ Features
+
+- **misc**: Add new features, update URLs, customize appearance, and implement components
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### ✨ Features
 
 - Add new features, update URLs, customize appearance, and implement components ([4b61bf4](https://github.com/lobehub/lobe-chat/commit/4b61bf4))
 
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.22.2](https://github.com/lobehub/lobe-chat/compare/v0.22.1...v0.22.2)
 
 <sup>Released on **2023-07-26**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.25.0",
+  "version": "0.26.1",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -122,12 +122,10 @@
     "lint-staged": "^13",
     "next-pwa": "^5",
     "node-fetch": "^3",
-    "postcss-styled-syntax": "^0.4",
     "prettier": "^2",
     "remark": "^14",
     "remark-cli": "^11",
     "semantic-release": "^21",
-    "semantic-release-config-gitmoji": "^1",
     "stylelint": "^15",
     "ts-node": "^10",
     "typescript": "^5",
@@ -142,6 +140,5 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
-  },
-  "changelog": "https://github.com/lobehub/lobe-chat"
+  }
 }

package/src/config/server.ts

@@ -0,0 +1,22 @@
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface ProcessEnv {
+      ACCESS_CODE?: string;
+      OPENAI_API_KEY?: string;
+      OPENAI_PROXY_URL?: string;
+    }
+  }
+}
+
+export const getServerConfig = () => {
+  if (typeof process === 'undefined') {
+    throw new Error('[Server Config] you are importing a nodejs-only module outside of nodejs');
+  }
+
+  return {
+    ACCESS_CODE: process.env.ACCESS_CODE,
+    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+    OPENAI_PROXY_URL: process.env.OPENAI_PROXY_URL,
+  };
+};

package/src/const/fetch.ts

@@ -1,3 +1,3 @@
-export const OPENAI_SERVICE_ERROR_CODE = 555;
-
 export const OPENAI_API_KEY_HEADER_KEY = 'X-OPENAI-API-KEY';
+
+export const LOBE_CHAT_ACCESS_CODE = 'X-LOBE_CHAT_ACCESS_CODE';

package/src/const/message.ts

@@ -1,2 +1,4 @@
 // 只要 start with 这个，就可以判断为 function message
 export const FUNCTION_MESSAGE_FLAG = '{"function';
+
+export const FUNCTION_LOADING = 'FUNCTION_LOADING';

package/src/locales/create.ts

@@ -7,23 +7,12 @@ import type { Namespaces } from '@/types/locale';
 
 import resources from './resources';
 
-// const getRes = (res: Resources, namespace: Namespaces[]) => {
-//   const newRes: any = {};
-//   for (const [locale, value] of Object.entries(res)) {
-//     newRes[locale] = {};
-//     for (const ns of namespace) {
-//       newRes[locale][ns] = value[ns];
-//     }
-//   }
-//   return newRes;
-// };
-
 export const createI18nNext = (namespace?: Namespaces[] | Namespaces) => {
   const ns: Namespaces[] = namespace
     ? isArray(namespace)
-      ? ['common', ...namespace]
-      : ['common', namespace]
-    : ['common'];
+      ? ['error', 'common', ...namespace]
+      : ['error', 'common', namespace]
+    : ['error', 'common'];
   return (
     i18n
       // detect user language

package/src/locales/default/common.ts

@@ -30,6 +30,10 @@ export default {
   },
   feedback: '反馈与建议',
   import: '导入配置',
+  message: {
+    function_loading: '插件请求中...',
+  },
+  moreSetting: '更多设置...',
   newAgent: '新建助手',
   noDescription: '暂无描述',
   ok: '确定',

package/src/locales/default/error.ts

@@ -0,0 +1,27 @@
+export default {
+  response: {
+    400: '很抱歉，服务器不明白您的请求，请确认您的请求参数是否正确',
+    401: '很抱歉，服务器拒绝了您的请求，可能是因为您的权限不足或未提供有效的身份验证',
+    403: '很抱歉，服务器拒绝了您的请求，您没有访问此内容的权限 ',
+    404: '很抱歉，服务器找不到您请求的页面或资源，请确认您的 URL 是否正确',
+    429: '很抱歉，您的请求太多，服务器有点累了，请稍后再试',
+    500: '很抱歉，服务器似乎遇到了一些困难，暂时无法完成您的请求，请稍后再试',
+    502: '很抱歉，服务器似乎迷失了方向，暂时无法提供服务，请稍后再试',
+    503: '很抱歉，服务器当前无法处理您的请求，可能是由于过载或正在进行维护，请稍后再试',
+    504: '很抱歉，服务器没有等到上游服务器的回应，请稍后再试',
+
+    InvalidAccessCode: '密码不正确或为空，请输入正确的访问密码，或者添加自定义 OpenAI API Key',
+    OpenAIBizError: '请求 OpenAI 服务出错，请根据以下信息排查或重试',
+  },
+  unlock: {
+    apikey: {
+      description: '输入你的 OpenAI API Key 即可绕过密码验证。应用不会记录你的 API Key',
+      title: '使用自定义 API Key',
+    },
+    confirm: '确认并重试',
+    password: {
+      description: '管理员已开启应用加密，输入应用密码后即可解锁应用。密码只需填写一次',
+      title: '输入密码解锁应用',
+    },
+  },
+};

package/src/locales/default/plugin.ts

@@ -1,10 +1,28 @@
 export default {
+  loading: {
+    content: '数据获取中...',
+    plugin: '插件运行中...',
+  },
   pluginList: '插件列表',
-  pluginLoading: '插件运行中...',
   plugins: {
     realtimeWeather: '实时天气预报',
     searchEngine: '搜索引擎',
     undefined: '插件检测中...',
     websiteCrawler: '网页内容提取',
   },
+  realtimeWeather: {
+    data: {
+      date: '日期',
+      daytemp_float: '日间温度',
+      dayweather: '日间天气',
+      daywind: '日间风速',
+      nighttemp_float: '夜间温度',
+      nightweather: '夜间天气',
+      nightwind: '夜间风速',
+      week: '星期',
+    },
+    title: '近7日天气数据（{{city}}）',
+    updateAt: '更新时间',
+  },
+  responseData: '返回数据',
 };

package/src/locales/resources/zh_CN.ts

@@ -1,9 +1,11 @@
 import common from '../default/common';
+import error from '../default/error';
 import plugin from '../default/plugin';
 import setting from '../default/setting';
 
 const resources = {
   common,
+  error,
   plugin,
   setting,
 } as const;

package/src/pages/api/auth.ts

@@ -0,0 +1,25 @@
+import { getServerConfig } from '@/config/server';
+import { ErrorType } from '@/types/fetch';
+
+interface AuthConfig {
+  accessCode?: string | null;
+  apiKey?: string | null;
+}
+
+export const checkAuth = ({ apiKey, accessCode }: AuthConfig) => {
+  const { ACCESS_CODE } = getServerConfig();
+
+  // 如果存在 apiKey
+  if (apiKey) {
+    return { auth: true };
+  }
+
+  // 如果不存在，则检查 accessCode
+  if (!ACCESS_CODE) return { auth: true };
+
+  if (accessCode !== ACCESS_CODE) {
+    return { auth: false, error: ErrorType.InvalidAccessCode };
+  }
+
+  return { auth: true };
+};

package/src/pages/api/error.ts

@@ -0,0 +1,21 @@
+import { ErrorResponse, ErrorType } from '@/types/fetch';
+
+const getStatus = (errorType: ErrorType) => {
+  switch (errorType) {
+    case ErrorType.InvalidAccessCode: {
+      return 401;
+    }
+
+    case ErrorType.OpenAIBizError: {
+      return 577;
+    }
+  }
+};
+
+export const createErrorResponse = (errorType: ErrorType, body?: any) => {
+  const statusCode = getStatus(errorType);
+
+  const data: ErrorResponse = { body, errorType };
+
+  return new Response(JSON.stringify(data), { status: statusCode });
+};

package/src/pages/api/openai.api.ts

@@ -1,8 +1,9 @@
-import { StreamingTextResponse } from 'ai';
-
-import { OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
+import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
+import { ErrorType } from '@/types/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
+import { checkAuth } from './auth';
+import { createErrorResponse } from './error';
 import { createChatCompletion } from './openai';
 
 export const runtime = 'edge';
@@ -10,8 +11,13 @@ export const runtime = 'edge';
 export default async function handler(req: Request) {
   const payload = (await req.json()) as OpenAIStreamPayload;
   const apiKey = req.headers.get(OPENAI_API_KEY_HEADER_KEY);
+  const accessCode = req.headers.get(LOBE_CHAT_ACCESS_CODE);
+
+  const result = checkAuth({ accessCode, apiKey });
 
-  const stream = await createChatCompletion({ OPENAI_API_KEY: apiKey, payload });
+  if (!result.auth) {
+    return createErrorResponse(result.error as ErrorType);
+  }
 
-  return new StreamingTextResponse(stream);
+  return createChatCompletion({ OPENAI_API_KEY: apiKey, payload });
 }

package/src/pages/api/openai.ts

@@ -1,18 +1,21 @@
-import { OpenAIStream, OpenAIStreamCallbacks } from 'ai';
+import { OpenAIStream, OpenAIStreamCallbacks, StreamingTextResponse } from 'ai';
 import { Configuration, OpenAIApi } from 'openai-edge';
 import { ChatCompletionFunctions } from 'openai-edge/types/api';
 
+import { getServerConfig } from '@/config/server';
+import { createErrorResponse } from '@/pages/api/error';
+import { PluginsMap } from '@/plugins';
+import { ErrorType } from '@/types/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
-import pluginList from '../../plugins';
-
 const isDev = process.env.NODE_ENV === 'development';
-const OPENAI_PROXY_URL = process.env.OPENAI_PROXY_URL;
 
 // 创建 OpenAI 实例
-export const createOpenAI = (OPENAI_API_KEY: string | null) => {
+export const createOpenAI = (userApiKey: string | null) => {
+  const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getServerConfig();
+
   const config = new Configuration({
-    apiKey: !OPENAI_API_KEY ? process.env.OPENAI_API_KEY : OPENAI_API_KEY,
+    apiKey: !userApiKey ? OPENAI_API_KEY : userApiKey,
   });
 
   return new OpenAIApi(config, isDev && OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined);
@@ -37,7 +40,7 @@ export const createChatCompletion = async ({
 
   // ============  1. 前置处理 functions   ============ //
 
-  const filterFunctions: ChatCompletionFunctions[] = pluginList
+  const filterFunctions: ChatCompletionFunctions[] = Object.values(PluginsMap)
     .filter((p) => {
       // 如果不存在 enabledPlugins，那么全部不启用
       if (!enabledPlugins) return false;
@@ -50,7 +53,11 @@ export const createChatCompletion = async ({
   const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
 
   // ============  2. 前置处理 messages   ============ //
-  const formatMessages = messages.map((m) => ({ content: m.content, role: m.role }));
+  const formatMessages = messages.map((m) => ({
+    content: m.content,
+    name: m.name,
+    role: m.role,
+  }));
 
   // ============  3. 发送请求   ============ //
 
@@ -58,5 +65,13 @@ export const createChatCompletion = async ({
 
   const response = await openai.createChatCompletion(requestParams);
 
-  return OpenAIStream(response, callbacks?.(requestParams));
+  if (!response.ok) {
+    const error = await response.json();
+
+    return createErrorResponse(ErrorType.OpenAIBizError, error);
+  }
+
+  const stream = OpenAIStream(response, callbacks?.(requestParams));
+
+  return new StreamingTextResponse(stream);
 };

package/src/pages/api/plugins.api.ts

@@ -1,47 +1,22 @@
-import { StreamingTextResponse } from 'ai';
-import { ChatCompletionRequestMessage } from 'openai-edge';
+import { OpenAIPluginPayload } from '@/types/plugin';
 
-import { OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
-import { OpenAIStreamPayload } from '@/types/openai';
-
-import pluginList from '../../plugins';
-import { createChatCompletion, createOpenAI } from './openai';
+import { PluginsMap } from '../../plugins';
 
 export const runtime = 'edge';
 
 export default async function handler(req: Request) {
-  const payload = (await req.json()) as OpenAIStreamPayload;
-  const apiKey = req.headers.get(OPENAI_API_KEY_HEADER_KEY);
-
-  const openai = createOpenAI(apiKey);
-
-  const stream = await createChatCompletion({
-    OPENAI_API_KEY: apiKey,
-    callbacks: (payload) => ({
-      experimental_onFunctionCall: async (
-        { name, arguments: args },
-        createFunctionCallMessages,
-      ) => {
-        console.log(`检测到 functionCall: ${name}`);
-
-        const func = pluginList.find((f) => f.name === name);
+  const { name, arguments: args } = (await req.json()) as OpenAIPluginPayload;
 
-        if (func) {
-          const result = await func.runner(args as any);
+  console.log(`检测到 functionCall: ${name}`);
 
-          console.log(`[${name}]`, args, `result:`, JSON.stringify(result, null, 2));
+  const func = PluginsMap[name];
 
-          const newMessages = createFunctionCallMessages(result) as ChatCompletionRequestMessage[];
+  if (func) {
+    const data = JSON.parse(args);
+    const result = await func.runner(data);
 
-          return openai.createChatCompletion({
-            ...payload,
-            messages: [...payload.messages, ...newMessages],
-          });
-        }
-      },
-    }),
-    payload,
-  });
+    console.log(`[${name}]`, args, `result:`, JSON.stringify(result, null, 2));
 
-  return new StreamingTextResponse(stream);
+    return new Response(JSON.stringify(result));
+  }
 }

package/src/pages/chat/[id]/Conversation/ChatList/Error/ApiKeyForm.tsx

@@ -0,0 +1,40 @@
+import { Avatar } from '@lobehub/ui';
+import { Button, Input } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { useSettings } from '@/store/settings';
+
+import { useStyles } from './style';
+
+const APIKeyForm = memo<{ onConfirm?: () => void }>(({ onConfirm }) => {
+  const { t } = useTranslation('error');
+  const { styles, theme } = useStyles();
+  const [apiKey, setSettings] = useSettings(
+    (s) => [s.settings.OPENAI_API_KEY, s.setSettings],
+    shallow,
+  );
+
+  return (
+    <Center gap={16} style={{ maxWidth: 300 }}>
+      <Avatar avatar={'🔑'} background={theme.colorText} gap={12} size={80} />
+      <Flexbox style={{ fontSize: 20 }}>{t('unlock.apikey.title')}</Flexbox>
+      <Flexbox className={styles.desc}>{t('unlock.apikey.description')}</Flexbox>
+      <Input
+        onChange={(e) => {
+          setSettings({ OPENAI_API_KEY: e.target.value });
+        }}
+        placeholder={'sk-*****************************************'}
+        type={'block'}
+        value={apiKey}
+      />
+      <Button block onClick={onConfirm} style={{ marginTop: 8 }} type={'primary'}>
+        {t('unlock.confirm')}
+      </Button>
+    </Center>
+  );
+});
+
+export default APIKeyForm;

package/src/pages/chat/[id]/Conversation/ChatList/Error/ErrorActionContainer.tsx

@@ -0,0 +1,23 @@
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorSplit};
+    border-radius: 8px;
+  `,
+}));
+
+const ErrorActionContainer = memo<{ children: ReactNode }>(({ children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Center className={styles.container} gap={24} padding={24}>
+      {children}
+    </Center>
+  );
+});
+
+export default ErrorActionContainer;

package/src/pages/chat/[id]/Conversation/ChatList/Error/InvalidAccess.tsx

@@ -0,0 +1,76 @@
+import { Icon } from '@lobehub/ui';
+import { Button, Segmented } from 'antd';
+import { KeySquare, SquareAsterisk } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
+
+import OtpInput from '../OTPInput';
+import APIKeyForm from './ApiKeyForm';
+import { ErrorActionContainer, FormAction } from './style';
+
+const InvalidAccess = memo<{ id: string }>(({ id }) => {
+  const { t } = useTranslation('error');
+  const [mode, setMode] = useState('password');
+  const [password, setSettings] = useSettings((s) => [s.settings.password, s.setSettings], shallow);
+  const [resend, deleteMessage] = useSessionStore(
+    (s) => [s.resendMessage, s.deleteMessage],
+    shallow,
+  );
+
+  return (
+    <ErrorActionContainer>
+      <Segmented
+        block
+        onChange={(value) => setMode(value as string)}
+        options={[
+          { icon: <Icon icon={SquareAsterisk} />, label: '密码', value: 'password' },
+          { icon: <Icon icon={KeySquare} />, label: 'OpenAI API Key', value: 'api' },
+        ]}
+        style={{ width: '100%' }}
+        value={mode}
+      />
+      <Flexbox gap={24}>
+        {mode === 'password' ? (
+          <>
+            <FormAction
+              avatar={'🗳'}
+              description={t('unlock.password.description')}
+              title={t('unlock.password.title')}
+            >
+              <OtpInput
+                onChange={(e) => {
+                  setSettings({ password: e });
+                }}
+                validationPattern={/[\dA-Za-z]/}
+                value={password}
+              />
+            </FormAction>
+            <Button
+              onClick={() => {
+                resend(id);
+                deleteMessage(id);
+              }}
+              type={'primary'}
+            >
+              {t('unlock.confirm')}
+            </Button>
+          </>
+        ) : (
+          <APIKeyForm
+            onConfirm={() => {
+              resend(id);
+              deleteMessage(id);
+            }}
+          />
+        )}
+      </Flexbox>
+    </ErrorActionContainer>
+  );
+});
+
+export default InvalidAccess;