@lobehub/chat 0.60.4 → 0.61.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,31 @@
 
 # Changelog
 
+## [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.61.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -92,6 +92,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 +115,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/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/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/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"
+}