@lobehub/chat 0.60.4 → 0.62.0

package/.github/workflows/release.yml

@@ -2,7 +2,7 @@ name: Release CI
 on:
   push:
     branches:
-      - master
+      - main
 
 jobs:
   release:

package/CHANGELOG.md

@@ -2,6 +2,73 @@
 
 # Changelog
 
+## [Version 0.62.0](https://github.com/lobehub/lobe-chat/compare/v0.61.0...v0.62.0)
+
+<sup>Released on **2023-08-26**</sup>
+
+#### ✨ Features
+
+- **misc**: 支持超过 4k 的会话使用 16k 总结标题.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix plugin settings error.
+
+#### 💄 Styles
+
+- **misc**: 优化清理会话的操作路径, 优化默认角色的配置.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 支持超过 4k 的会话使用 16k 总结标题 ([5764cfb](https://github.com/lobehub/lobe-chat/commit/5764cfb))
+
+#### What's fixed
+
+- **misc**: Fix plugin settings error ([008c2e3](https://github.com/lobehub/lobe-chat/commit/008c2e3))
+
+#### Styles
+
+- **misc**: 优化清理会话的操作路径 ([6b7218e](https://github.com/lobehub/lobe-chat/commit/6b7218e))
+- **misc**: 优化默认角色的配置 ([a07d7a8](https://github.com/lobehub/lobe-chat/commit/a07d7a8))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.61.0](https://github.com/lobehub/lobe-chat/compare/v0.60.4...v0.61.0)
+
+<sup>Released on **2023-08-26**</sup>
+
+#### ✨ Features
+
+- **misc**: 新增自动滚动.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 新增自动滚动, closes [#113](https://github.com/lobehub/lobe-chat/issues/113) ([03fd161](https://github.com/lobehub/lobe-chat/commit/03fd161))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.60.4](https://github.com/lobehub/lobe-chat/compare/v0.60.3...v0.60.4)
 
 <sup>Released on **2023-08-26**</sup>

package/README.md

@@ -23,6 +23,7 @@ Lobe Chat is an open-source chatbot client using OpenAI and Next.js
 [![stargazers][stargazers-shield]][stargazers-url]
 [![issues][issues-shield]][issues-url]
 
+[![Deploy with Vercel][deploy-button-image]][deploy-url]
 ![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
 
 </div>
@@ -32,13 +33,35 @@ Lobe Chat is an open-source chatbot client using OpenAI and Next.js
 
 #### TOC
 
+- [🛳 Self Hosting](#-self-hosting)
+
+  - [Deploy to Vercel](#deploy-to-vercel)
+
 - [⌨️ Local Development](#️-local-development)
+
 - [🤝 Contributing](#-contributing)
 
 ####
 
 </details>
 
+## 🛳 Self Hosting
+
+If you want to deploy this service by yourself, you can follow the steps below.
+
+### Deploy to Vercel
+
+Click button below to deploy your private plugins' gateway.
+
+[![Deploy with Vercel][deploy-button-image]][deploy-url]
+
+If you want to make some customization, you can add environment variable:
+
+| Environment variable | Description                                                                       | Example                       |
+| -------------------- | --------------------------------------------------------------------------------- | ----------------------------- |
+| `OPENAI_PROXY_URL`   | OpenAI API 代理 URL，例如：`https://api.chatanywhere.cn`                          | `https://api.chatanywhere.cn` |
+| `ACCESS_CODE`        | Add Password to access this service, the password should be 6 digits or alphabets | `awCT74` \| `e3@09!`          |
+
 ## ⌨️ Local Development
 
 You can use Gitpod for online development:
@@ -51,7 +74,7 @@ Or clone it for local development:
 $ git clone https://github.com/lobehub/lobe-chat.git
 $ cd lobe-chat
 $ pnpm install
-$ pnpm start
+$ pnpm dev
 ```
 
 <div align="right">
@@ -143,3 +166,8 @@ This project is [MIT](./LICENSE) licensed.
 
 [issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-chat.svg?style=flat
 [issues-url]: https://img.shields.io/github/issues/lobehub/lobe-chat.svg?style=flat
+
+<!-- deploy -->
+
+[deploy-button-image]: https://vercel.com/button
+[deploy-url]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.%20%20&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.60.4",
+  "version": "0.62.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -63,7 +63,6 @@
   "dependencies": {
     "@ant-design/colors": "^7",
     "@ant-design/icons": "^5",
-    "@cfworker/json-schema": "^1.12.7",
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^8",
@@ -92,6 +91,7 @@
     "react-dom": "^18",
     "react-hotkeys-hook": "^4",
     "react-i18next": "^13",
+    "react-intersection-observer": "^9",
     "react-layout-kit": "^1.7.1",
     "serpapi": "^2",
     "swr": "^2",
@@ -114,7 +114,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@types/systemjs": "^6.13.1",
+    "@types/systemjs": "^6.13.2",
     "@types/testing-library__jest-dom": "^6",
     "@types/uuid": "^9",
     "@umijs/lint": "^4",

package/src/const/settings.ts

@@ -22,6 +22,7 @@ export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
 
 export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
   displayMode: 'chat',
+  historyCount: 1,
   model: LanguageModel.GPT3_5,
   params: {
     frequency_penalty: 0,

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

@@ -41,7 +41,7 @@ const PluginSettings = memo<PluginSettingsProps>(({ id, pluginIdentifier }) => {
         </Flexbox>
         <Flexbox className={styles.desc}>{t('pluginSettings.desc')}</Flexbox>
         <Divider style={{ margin: '0 16px' }} />
-        {manifest.settings && (
+        {manifest?.settings && (
           <PluginSettingsConfig id={manifest.identifier} settings={manifest.settings} />
         )}
         <Button

package/src/pages/chat/features/Conversation/Input/ActionRight.tsx

@@ -16,6 +16,7 @@ const ActionsRight = memo(() => {
       okButtonProps={{ danger: true }}
       okText={t('ok', { ns: 'common' })}
       onConfirm={() => clearMessage()}
+      placement={'topRight'}
       title={t('confirmClearCurrentMessages', { ns: 'common' })}
     >
       <ActionIcon

package/src/pages/chat/features/Conversation/ScrollAnchor/index.tsx

@@ -0,0 +1,29 @@
+import { memo, useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import { useSessionStore } from '@/store/session';
+
+import { useAtBottom } from './useAtBottom';
+
+const ChatScrollAnchor = memo(() => {
+  const trackVisibility = useSessionStore((s) => !!s.chatLoadingId);
+
+  const isAtBottom = useAtBottom();
+  const { ref, entry, inView } = useInView({
+    delay: 100,
+    rootMargin: '0px 0px -150px 0px',
+    trackVisibility,
+  });
+
+  useEffect(() => {
+    if (isAtBottom && trackVisibility && !inView) {
+      entry?.target.scrollIntoView({
+        block: 'start',
+      });
+    }
+  }, [inView, entry, isAtBottom, trackVisibility]);
+
+  return <div ref={ref} style={{ height: 1, width: '100%' }} />;
+});
+
+export default ChatScrollAnchor;

package/src/pages/chat/features/Conversation/ScrollAnchor/useAtBottom.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+export const useAtBottom = (offset = 0) => {
+  const [isAtBottom, setIsAtBottom] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsAtBottom(window.innerHeight + window.scrollY >= document.body.offsetHeight - offset);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    handleScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [offset]);
+
+  return isAtBottom;
+};

package/src/pages/chat/features/Conversation/index.tsx

@@ -7,6 +7,7 @@ import SafeSpacing from '@/components/SafeSpacing';
 
 import ChatList from './ChatList';
 import ChatInput from './Input';
+import ChatScrollAnchor from './ScrollAnchor';
 
 const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
   const ref = useRef(null);
@@ -17,6 +18,7 @@ const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
         <div ref={ref} style={{ height: '100%', overflowY: 'scroll' }}>
           {!mobile && <SafeSpacing />}
           <ChatList />
+          <ChatScrollAnchor />
         </div>
         <BackBottom target={ref} text={t('backToBottom')} />
       </div>

package/src/prompts/chat.ts

@@ -1,9 +1,9 @@
+import { chatHelpers } from '@/store/session/helpers';
+import { LanguageModel } from '@/types/llm';
 import { OpenAIChatMessage, OpenAIStreamPayload } from '@/types/openai';
 
-export const promptSummaryTitle = (
-  messages: OpenAIChatMessage[],
-): Partial<OpenAIStreamPayload> => ({
-  messages: [
+export const promptSummaryTitle = (messages: OpenAIChatMessage[]): Partial<OpenAIStreamPayload> => {
+  const finalMessages: OpenAIChatMessage[] = [
     {
       content:
         '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题，不需要包含标点符号',
@@ -15,5 +15,16 @@ export const promptSummaryTitle = (
 请总结上述对话为10个字以内的标题，不需要包含标点符号`,
       role: 'user',
     },
-  ],
-});
+  ];
+  // 如果超过 4k，则使用 GPT3.5 16K 模型
+  const tokens = chatHelpers.getMessagesTokenCount(finalMessages);
+  let model: LanguageModel | undefined = undefined;
+  if (tokens > 4000) {
+    model = LanguageModel.GPT3_5_16K;
+  }
+
+  return {
+    messages: finalMessages,
+    model,
+  };
+};

package/src/store/session/helpers.ts

@@ -0,0 +1 @@
+export * from './slices/chat/helpers';

package/src/store/session/slices/chat/actions/message.ts

@@ -178,12 +178,6 @@ export const chatMessage: StateCreator<
         if (isFunctionMessage(output)) {
           isFunctionCall = true;
         }
-
-        // 滚动到最后一条消息
-        const item = document.querySelector('#for-loading');
-        if (!item) return;
-
-        item.scrollIntoView({ behavior: 'smooth' });
       },
     });
 

package/src/store/session/slices/chat/helpers.ts

@@ -0,0 +1,10 @@
+import { encode } from 'gpt-tokenizer';
+
+import { OpenAIChatMessage } from '@/types/openai';
+
+export const getMessagesTokenCount = (messages: OpenAIChatMessage[]) =>
+  encode(messages.map((m) => m.content).join('')).length;
+
+export const chatHelpers = {
+  getMessagesTokenCount,
+};

package/src/utils/compass.ts

@@ -83,11 +83,7 @@ export class StrCompressor {
       after += '=';
     }
 
-    return new Uint8Array(
-      atob(after)
-        .split('')
-        .map((c) => c.charCodeAt(0)),
-    );
+    return new Uint8Array([...atob(after)].map((c) => c.charCodeAt(0)));
   };
 }
 

package/vercel.json

@@ -0,0 +1,3 @@
+{
+  "installCommand": "pnpm i"
+}