@lobehub/chat 0.82.2 → 0.82.3

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 # Changelog
 
+### [Version 0.82.3](https://github.com/lobehub/lobe-chat/compare/v0.82.2...v0.82.3)
+
+<sup>Released on **2023-09-29**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正 access code 校验逻辑，修正 api key 无法正常显示在秘钥输入框，并增加显示关闭按钮，修正移动端输入 access code 默认打开数据键盘的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: 修正 access code 校验逻辑，closes [#184](https://github.com/lobehub/lobe-chat/issues/184) ([a7301c3](https://github.com/lobehub/lobe-chat/commit/a7301c3))
+- **misc**: 修正 api key 无法正常显示在秘钥输入框，并增加显示关闭按钮，closes [#182](https://github.com/lobehub/lobe-chat/issues/182) ([def1153](https://github.com/lobehub/lobe-chat/commit/def1153))
+- **misc**: 修正移动端输入 access code 默认打开数据键盘的问题 ([7994982](https://github.com/lobehub/lobe-chat/commit/7994982))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.82.2](https://github.com/lobehub/lobe-chat/compare/v0.82.1...v0.82.2)
 
 <sup>Released on **2023-09-28**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.82.2",
+  "version": "0.82.3",
   "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/ApiKeyForm.tsx

@@ -1,34 +1,58 @@
-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 { useGlobalStore } from '@/store/global';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
 
-import { useStyles } from './style';
+import { FormAction } from './style';
 
-const APIKeyForm = memo<{ onConfirm?: () => void }>(({ onConfirm }) => {
+const APIKeyForm = memo<{ id: string }>(({ id }) => {
   const { t } = useTranslation('error');
-  const { styles, theme } = useStyles();
-  const [apiKey, setSettings] = useGlobalStore((s) => [s.settings.OPENAI_API_KEY, s.setSettings]);
+
+  const [apiKey, setKeys] = useGlobalStore((s) => [
+    settingsSelectors.openAIAPI(s),
+    s.setOpenAIAPIKey,
+  ]);
+  const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
 
   return (
     <Center gap={16} style={{ maxWidth: 300 }}>
-      <Avatar avatar={'🔑'} background={theme.colorFillContent} gap={12} size={80} />
-      <Flexbox style={{ fontSize: 20 }}>{t('unlock.apikey.title')}</Flexbox>
-      <Flexbox className={styles.desc}>{t('unlock.apikey.description')}</Flexbox>
-      <Input.Password
-        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>
+      <FormAction
+        avatar={'🔑'}
+        description={t('unlock.apikey.description')}
+        title={t('unlock.apikey.title')}
+      >
+        <Input.Password
+          onChange={(e) => {
+            setKeys(e.target.value);
+          }}
+          placeholder={'sk-*****************************************'}
+          type={'block'}
+          value={apiKey}
+        />
+      </FormAction>
+      <Flexbox gap={12} width={'100%'}>
+        <Button
+          block
+          onClick={() => {
+            resend(id);
+            deleteMessage(id);
+          }}
+          style={{ marginTop: 8 }}
+          type={'primary'}
+        >
+          {t('unlock.confirm')}
+        </Button>
+        <Button
+          onClick={() => {
+            deleteMessage(id);
+          }}
+        >
+          {t('unlock.closeMessage')}
+        </Button>
+      </Flexbox>
     </Center>
   );
 });

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

@@ -51,29 +51,31 @@ const InvalidAccess = memo<{ id: string }>(({ id }) => {
                 onChange={(e) => {
                   setSettings({ password: e });
                 }}
-                validationPattern={/[\dA-Za-z]/}
+                validationPattern={/.*/}
                 value={password}
               />
             </FormAction>
-            <Button
-              onClick={() => {
-                resend(id);
-                deleteMessage(id);
-              }}
-              type={'primary'}
-            >
-              {t('unlock.confirm')}
-            </Button>
+            <Flexbox gap={12}>
+              <Button
+                onClick={() => {
+                  resend(id);
+                  deleteMessage(id);
+                }}
+                type={'primary'}
+              >
+                {t('unlock.confirm')}
+              </Button>
+              <Button
+                onClick={() => {
+                  deleteMessage(id);
+                }}
+              >
+                {t('unlock.closeMessage')}
+              </Button>
+            </Flexbox>
           </>
         )}
-        {mode === Tab.Api && (
-          <APIKeyForm
-            onConfirm={() => {
-              resend(id);
-              deleteMessage(id);
-            }}
-          />
-        )}
+        {mode === Tab.Api && <APIKeyForm id={id} />}
       </Flexbox>
     </ErrorActionContainer>
   );

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

@@ -2,8 +2,6 @@ import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSessionStore } from '@/store/session';
-
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer, useStyles } from './style';
 
@@ -21,20 +19,12 @@ interface OpenAIErrorResponse {
 const OpenAiBizError = memo<{ content: OpenAIErrorResponse; id: string }>(({ content, id }) => {
   const { styles } = useStyles();
 
-  const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
-
   const errorCode = content.error?.code;
 
   if (errorCode === 'invalid_api_key') {
     return (
       <ErrorActionContainer>
-        <APIKeyForm
-          onConfirm={() => {
-            console.log(id);
-            resend(id);
-            deleteMessage(id);
-          }}
-        />
+        <APIKeyForm id={id} />
       </ErrorActionContainer>
     );
   }

package/src/app/chat/features/Conversation/ChatList/OTPInput.tsx

@@ -118,13 +118,7 @@ const OtpInput = memo<OtpInputProps>((props) => {
           <input
             key={index}
             {...restProps}
-            /**
-             * Add some styling to the input using daisyUI + tailwind.
-             * Allows the user to override the classname for a different styling
-             */
-            autoComplete="one-time-code"
             className={cx(styles, className)}
-            inputMode="numeric"
             maxLength={6}
             onChange={(e) => handleInputChange(e, index)}
             onKeyUp={handleKeyUp}

package/src/locales/default/error.ts

@@ -39,6 +39,7 @@ export default {
       description: '输入你的 OpenAI API Key 即可绕过密码验证。应用不会记录你的 API Key',
       title: '使用自定义 API Key',
     },
+    closeMessage: '关闭提示',
     confirm: '确认并重试',
     password: {
       description: '管理员已开启应用加密，输入应用密码后即可解锁应用。密码只需填写一次',

package/src/store/global/selectors.ts

@@ -13,6 +13,9 @@ const defaultAgentConfig = (s: GlobalStore) => merge(DEFAULT_AGENT_CONFIG, defau
 
 const defaultAgentMeta = (s: GlobalStore) => merge(DEFAULT_AGENT_META, defaultAgent(s).meta);
 
+const openAIAPIKeySelectors = (s: GlobalStore) =>
+  s.settings.languageModel.openAI.OPENAI_API_KEY || s.settings.OPENAI_API_KEY;
+
 export const exportSettings = (s: GlobalStore) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { OPENAI_API_KEY: _, password: __, ...settings } = s.settings;
@@ -27,3 +30,7 @@ export const globalSelectors = {
   defaultAgentMeta,
   exportSettings,
 };
+
+export const settingsSelectors = {
+  openAIAPI: openAIAPIKeySelectors,
+};

package/src/store/global/slices/settings.ts

@@ -23,6 +23,7 @@ export interface SettingsAction {
    * 重置设置
    */
   resetSettings: () => void;
+  setOpenAIAPIKey: (apikey: string) => void;
   /**
    * 设置部分配置设置
    * @param settings - 部分配置设置
@@ -62,6 +63,10 @@ export const createSettingsSlice: StateCreator<
   resetSettings: () => {
     set({ settings: DEFAULT_SETTINGS }, false, t('resetSettings'));
   },
+  setOpenAIAPIKey: (apikey) => {
+    get().setSettings({ languageModel: { openAI: { OPENAI_API_KEY: apikey } } });
+  },
+
   setSettings: (settings) => {
     const oldSetting = get().settings;
     const nextSettings = merge(oldSetting, settings);
@@ -70,7 +75,6 @@ export const createSettingsSlice: StateCreator<
 
     set({ settings: merge(oldSetting, settings) }, false, t('setSettings', settings));
   },
-
   switchSettingTabs: (tab) => {
     set({ settingsTab: tab });
   },