@lobehub/chat 0.162.19 → 0.162.20

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+### [Version 0.162.20](https://github.com/lobehub/lobe-chat/compare/v0.162.19...v0.162.20)
+
+<sup>Released on **2024-06-08**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.162.19](https://github.com/lobehub/lobe-chat/compare/v0.162.18...v0.162.19)
 
 <sup>Released on **2024-06-07**</sup>

package/docs/self-hosting/platform/zeabur.mdx

@@ -35,3 +35,51 @@ You can use the subdomain provided by Zeabur, or choose to bind a custom domain.
 
 [deploy-button-image]: https://zeabur.com/button.svg
 [deploy-link]: https://zeabur.com/templates/VZGGTI
+
+# Deploy LobeChat with Zeabur as serverless function
+
+>Note: There are still issues with [middlewares and rewrites of next.js on Zeabur](https://github.com/lobehub/lobe-chat/pull/2775?notification_referrer_id=NT_kwDOAdi2DrQxMDkyODQ4MDc2NTozMDk3OTU5OA#issuecomment-2146713899), use at your own risk! 
+
+Since Zeabur does NOT officially support FREE users deploy containerized service, you may wish to deploy LobeChat as a serverless function service.
+To deploy LobeChat as a serverless function service on Zeabur, you can follow the steps below:
+
+## Zeabur Deployment Process
+
+<Steps>
+
+### Fork LobeChat
+
+### Add Zeabur pack config file
+
+Add a `zbpack.json` configuration file with the following content to the root dir of your fork:
+```json
+{
+  "serverless": true,
+  "ignore_dockerfile": true
+}
+```
+
+### Prepare your OpenAI API Key
+
+Go to [OpenAI API Key](https://platform.openai.com/account/api-keys) to get your OpenAI API Key.
+
+### Login to your [Zeabur dashboard](https://dash.zeabur.com)
+
+If you do not already have an account, you will need to register one.
+
+### Create a project and service
+
+Create a project, then create a service under this project.
+
+### Link your fork of LobeChat to the just created Zeabur service.
+
+When adding service, choose github.
+This may triger a oAuth depend on varies factors like how you login to Zeabur and if you have already authorized Zeabur to access all your repos
+
+### Bind a custom domain (optional)
+
+You can create a subdomain provided by Zeabur, or choose to bind a custom domain. Currently, the domains provided by Zeabur have not been contaminated, and most regions can connect directly.
+
+### Zeabur shall start auto build and you should be able to access it by the domain of your choice after a while.
+
+</Steps>

package/docs/self-hosting/platform/zeabur.zh-CN.mdx

@@ -34,3 +34,51 @@ tags:
 
 [deploy-button-image]: https://zeabur.com/button.svg
 [deploy-link]: https://zeabur.com/templates/VZGGTI
+
+# 使用 Zeabur 将 LobeChat 部署为无服务器函数
+
+>**注意：** 仍然存在关于 [Zeabur 上 next.js 的中间件和重写问题](https://github.com/lobehub/lobe-chat/pull/2775?notification_referrer_id=NT_kwDOAdi2DrQxMDkyODQ4MDc2NTozMDk3OTU5OA#issuecomment-2146713899)，请自担风险！
+
+由于 Zeabur 并未官方支持免费用户部署容器化服务，您可能希望将 LobeChat 部署为无服务器函数服务。
+要在 Zeabur 上将 LobeChat 部署为无服务器函数服务，您可以按照以下步骤操作：
+
+## Zeabur 部署流程
+
+<Steps>
+
+### Fork LobeChat
+
+### 添加 Zeabur 打包配置文件
+
+在您的分支的根目录下添加一个 `zbpack.json` 配置文件，内容如下：
+```json
+{
+  "serverless": true,
+  "ignore_dockerfile": true
+}
+```
+
+### 准备您的 OpenAI API 密钥
+
+前往 [OpenAI API 密钥](https://platform.openai.com/account/api-keys) 获取您的 OpenAI API 密钥。
+
+### 登录到您的 [Zeabur 仪表板](https://dash.zeabur.com)
+
+如果您尚未拥有一个账号，您需要注册一个。
+
+### 创建项目与服务。
+
+创建一个项目，并再这个项目下新建一个服务。
+
+### 将您的 LobeChat 分支链接到刚创建的 Zeabur 服务。
+
+在添加服务时，选择 github。
+这可能会触发一个 oAuth，取决于诸如您如何登录到 Zeabur以及您是否已经授权 Zeabur 访问所有您的存储库等各种因素。
+
+### 绑定自定义域名（可选）
+
+您可以创建 Zeabur 提供的子域名，或选择绑定自定义域名。目前，Zeabur 提供的域名尚未受到污染，大多数地区可以直接连接。
+
+### Zeabur 将开始自动构建，您应该可以在一段时间后通过您选择的域名访问它。
+
+</Steps>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.162.19",
+  "version": "0.162.20",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/chat/@session/features/SessionListContent/Inbox/index.tsx

@@ -9,14 +9,23 @@ import { useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
 import ListItem from '../ListItem';
+import { useSwitchSession } from '../useSwitchSession';
 
 const Inbox = memo(() => {
   const { t } = useTranslation('chat');
   const mobile = useServerConfigStore((s) => s.isMobile);
   const activeId = useSessionStore((s) => s.activeId);
+  const switchSession = useSwitchSession();
 
   return (
-    <Link aria-label={t('inbox.title')} href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}>
+    <Link
+      aria-label={t('inbox.title')}
+      href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
+      onClick={(e) => {
+        e.preventDefault();
+        switchSession(INBOX_SESSION_ID);
+      }}
+    >
       <ListItem
         active={activeId === INBOX_SESSION_ID}
         avatar={DEFAULT_INBOX_AVATAR}

package/src/app/(main)/chat/@session/features/SessionListContent/List/index.tsx

@@ -13,6 +13,7 @@ import { sessionSelectors } from '@/store/session/selectors';
 import { LobeAgentSession } from '@/types/session';
 
 import SkeletonList from '../../SkeletonList';
+import { useSwitchSession } from '../useSwitchSession';
 import AddButton from './AddButton';
 import SessionItem from './Item';
 
@@ -28,19 +29,28 @@ interface SessionListProps {
 }
 const SessionList = memo<SessionListProps>(({ dataSource, groupId, showAddButton = true }) => {
   const { t } = useTranslation('chat');
-  const isInit = useSessionStore((s) => sessionSelectors.isSessionListInit(s));
-  const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
-
   const { styles } = useStyles();
 
+  const isInit = useSessionStore(sessionSelectors.isSessionListInit);
+  const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
   const mobile = useServerConfigStore((s) => s.isMobile);
+
+  const switchSession = useSwitchSession();
+
   const isEmpty = !dataSource || dataSource.length === 0;
   return !isInit ? (
     <SkeletonList />
   ) : !isEmpty ? (
     dataSource.map(({ id }) => (
       <LazyLoad className={styles} key={id}>
-        <Link aria-label={id} href={SESSION_CHAT_URL(id, mobile)}>
+        <Link
+          aria-label={id}
+          href={SESSION_CHAT_URL(id, mobile)}
+          onClick={(e) => {
+            e.preventDefault();
+            switchSession(id);
+          }}
+        >
           <SessionItem id={id} />
         </Link>
       </LazyLoad>

package/src/app/(main)/chat/@session/features/SessionListContent/useSwitchSession.ts

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { useSessionStore } from '@/store/session';
+
+export const useSwitchSession = () => {
+  const switchSession = useSessionStore((s) => s.switchSession);
+  const mobile = useServerConfigStore((s) => s.isMobile);
+  const router = useQueryRoute();
+
+  return useCallback(
+    (id: string) => {
+      switchSession(id);
+
+      if (mobile) {
+        setTimeout(() => {
+          router.push('/chat', {
+            query: { session: id, showMobileWorkspace: 'true' },
+          });
+        }, 50);
+      }
+    },
+    [mobile],
+  );
+};

package/src/store/session/slices/session/action.test.ts

@@ -141,7 +141,7 @@ describe('SessionAction', () => {
       const sessionId = 'active-session-id';
 
       act(() => {
-        result.current.activeSession(sessionId);
+        result.current.switchSession(sessionId);
       });
 
       expect(result.current.activeId).toBe(sessionId);

package/src/store/session/slices/session/action.ts

@@ -35,10 +35,9 @@ const SEARCH_SESSIONS_KEY = 'searchSessions';
 /* eslint-disable typescript-sort-keys/interface */
 export interface SessionAction {
   /**
-   * active the session
-   * @param sessionId
+   * switch the session
    */
-  activeSession: (sessionId: string) => void;
+  switchSession: (sessionId: string) => void;
   /**
    * reset sessions to default
    */
@@ -94,19 +93,13 @@ export const createSessionSlice: StateCreator<
   [],
   SessionAction
 > = (set, get) => ({
-  activeSession: (sessionId) => {
-    if (get().activeId === sessionId) return;
-
-    set({ activeId: sessionId }, false, n(`activeSession/${sessionId}`));
-  },
-
   clearSessions: async () => {
     await sessionService.removeAllSessions();
     await get().refreshSessions();
   },
 
   createSession: async (agent, isSwitchSession = true) => {
-    const { activeSession, refreshSessions } = get();
+    const { switchSession, refreshSessions } = get();
 
     // merge the defaultAgent in settings
     const defaultAgent = merge(
@@ -120,12 +113,13 @@ export const createSessionSlice: StateCreator<
     await refreshSessions();
 
     // Whether to goto  to the new session after creation, the default is to switch to
-    if (isSwitchSession) activeSession(id);
+    if (isSwitchSession) switchSession(id);
 
     return id;
   },
+
   duplicateSession: async (id) => {
-    const { activeSession, refreshSessions } = get();
+    const { switchSession, refreshSessions } = get();
     const session = sessionSelectors.getSessionById(id)(get());
 
     if (!session) return;
@@ -154,9 +148,8 @@ export const createSessionSlice: StateCreator<
     message.destroy(messageLoadingKey);
     message.success(t('duplicateSession.success', { ns: 'chat' }));
 
-    activeSession(newId);
+    switchSession(newId);
   },
-
   pinSession: async (id, pinned) => {
     await get().internal_updateSession(id, { pinned });
   },
@@ -167,10 +160,16 @@ export const createSessionSlice: StateCreator<
 
     // If the active session deleted, switch to the inbox session
     if (sessionId === get().activeId) {
-      get().activeSession(INBOX_SESSION_ID);
+      get().switchSession(INBOX_SESSION_ID);
     }
   },
 
+  switchSession: (sessionId) => {
+    if (get().activeId === sessionId) return;
+
+    set({ activeId: sessionId }, false, n(`activeSession/${sessionId}`));
+  },
+
   updateSearchKeywords: (keywords) => {
     set(
       { isSearching: !!keywords, sessionSearchKeywords: keywords },