@lobehub/chat 0.42.3 → 0.44.0

package/.github/workflows/release.yml

@@ -25,7 +25,7 @@ jobs:
         run: pnpm install
 
       - name: Lint
-        run: pnpm run type-check
+        run: pnpm run lint
 
       - name: Test
         run: pnpm run test

package/CHANGELOG.md

@@ -2,6 +2,80 @@
 
 # Changelog
 
+## [Version 0.44.0](https://github.com/lobehub/lobe-chat/compare/v0.43.0...v0.44.0)
+
+<sup>Released on **2023-08-12**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 优化 Inbox 会话的实现逻辑, 将 chat 中的功能模型拆分到 features 中, 重构 session 相关实现，移除循环依赖.
+
+#### ✨ Features
+
+- **misc**: 支持 inbox 消息导出, 支持 inbox 的会话功能, 新增 inbox 数据模型, 新增 inbox 模块入口.
+
+#### 💄 Styles
+
+- **misc**: Fix Inbox defaultMessage avatar, 优化 header 的 setting 展示, 优化门禁下默认的解锁方式, 补充 ChatList 的 Loading 态.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 优化 Inbox 会话的实现逻辑 ([22cc4cf](https://github.com/lobehub/lobe-chat/commit/22cc4cf))
+- **misc**: 将 chat 中的功能模型拆分到 features 中 ([e25a856](https://github.com/lobehub/lobe-chat/commit/e25a856))
+- **misc**: 重构 session 相关实现，移除循环依赖 ([9acf65c](https://github.com/lobehub/lobe-chat/commit/9acf65c))
+
+#### What's improved
+
+- **misc**: 支持 inbox 消息导出 ([498e075](https://github.com/lobehub/lobe-chat/commit/498e075))
+- **misc**: 支持 inbox 的会话功能 ([9b713b8](https://github.com/lobehub/lobe-chat/commit/9b713b8))
+- **misc**: 新增 inbox 数据模型 ([91a8158](https://github.com/lobehub/lobe-chat/commit/91a8158))
+- **misc**: 新增 inbox 模块入口 ([6fc8907](https://github.com/lobehub/lobe-chat/commit/6fc8907))
+
+#### Styles
+
+- **misc**: Fix Inbox defaultMessage avatar ([dbc18a4](https://github.com/lobehub/lobe-chat/commit/dbc18a4))
+- **misc**: 优化 header 的 setting 展示 ([201d380](https://github.com/lobehub/lobe-chat/commit/201d380))
+- **misc**: 优化门禁下默认的解锁方式 ([df9bb45](https://github.com/lobehub/lobe-chat/commit/df9bb45))
+- **misc**: 补充 ChatList 的 Loading 态 ([eb3eb5d](https://github.com/lobehub/lobe-chat/commit/eb3eb5d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.43.0](https://github.com/lobehub/lobe-chat/compare/v0.42.3...v0.43.0)
+
+<sup>Released on **2023-08-12**</sup>
+
+#### ✨ Features
+
+- **misc**: 支持切换语言.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 支持切换语言, closes [#67](https://github.com/lobehub/lobe-chat/issues/67) ([63ed8ec](https://github.com/lobehub/lobe-chat/commit/63ed8ec))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.42.3](https://github.com/lobehub/lobe-chat/compare/v0.42.2...v0.42.3)
 
 <sup>Released on **2023-08-12**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.42.3",
+  "version": "0.44.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -25,9 +25,11 @@
     "dev": "next dev -p 3010",
     "i18n": "npm run i18n:toc && lobe-i18n",
     "i18n:toc": "ts-node --project ./tsconfig.json scripts/toc.ts",
-    "lint": "eslint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint": "npm run lint:ts && npm run lint:style && npm run type-check && npm run lint:circular",
+    "lint:circular": "dpdm src/**/*.ts  --warning false  --tree false  --exit-code circular:1  -T true",
     "lint:md": "remark . --quiet --frail --output",
     "lint:style": "stylelint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint:ts": "eslint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
     "prepare": "husky install",
     "prettier": "prettier -c --write \"**/**\"",
     "pull": "git pull",
@@ -116,6 +118,7 @@
     "@vitest/coverage-v8": "latest",
     "commitlint": "^17",
     "consola": "^3",
+    "dpdm": "^3",
     "eslint": "^8",
     "husky": "^8",
     "i18next-browser-languagedetector": "^7",

package/src/const/meta.ts

@@ -4,3 +4,6 @@ export const DEFAULT_AVATAR = '🤖';
 export const DEFAULT_USER_AVATAR = '😀';
 export const DEFAULT_BACKGROUND_COLOR = 'rgba(0,0,0,0)';
 export const DEFAULT_AGENT_META: MetaData = {};
+
+export const DEFAULT_INBOX_AVATAR =
+  'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp';

package/src/const/session.ts

@@ -0,0 +1 @@
+export const INBOX_SESSION_ID = 'inbox';

package/src/helpers/export.ts

@@ -2,22 +2,25 @@ import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
 
-const getAgents = () => sessionSelectors.exportAgents(useSessionStore.getState());
-const getAgent = (id: string) => sessionSelectors.getExportAgent(id)(useSessionStore.getState());
-
 const getSessions = () => sessionSelectors.exportSessions(useSessionStore.getState());
 const getSession = (id: string) => sessionSelectors.getSessionById(id)(useSessionStore.getState());
 
 const getSettings = () => settingsSelectors.exportSettings(useGlobalStore.getState());
 
+// =============   导出所有角色   ============= //
+
 export const exportAgents = () => {
-  const sessions = getAgents();
+  const agents = sessionSelectors.exportAgents(useSessionStore.getState());
 
-  const config = createConfigFile('agents', { sessions });
+  const config = createConfigFile('agents', agents);
 
   exportConfigFile(config, 'agents');
 };
 
+// =============   导出单个角色   ============= //
+
+const getAgent = (id: string) => sessionSelectors.getExportAgent(id)(useSessionStore.getState());
+
 export const exportSingleAgent = (id: string) => {
   const agent = getAgent(id);
   if (!agent) return;
@@ -27,23 +30,26 @@ export const exportSingleAgent = (id: string) => {
   exportConfigFile(config, agent.meta?.title || 'agent');
 };
 
+// =============   导出所有会话   ============= //
+
 export const exportSessions = () => {
-  const sessions = getSessions();
-  const config = createConfigFile('sessions', { sessions });
+  const config = createConfigFile('sessions', getSessions());
 
   exportConfigFile(config, 'sessions');
 };
 
+// =============   导出单个会话   ============= //
 export const exportSingleSession = (id: string) => {
   const session = getSession(id);
   if (!session) return;
   const sessions = { [id]: session };
 
-  const config = createConfigFile('sessions', { sessions });
+  const config = createConfigFile('singleSession', { sessions });
 
   exportConfigFile(config, `${session.meta?.title}-session`);
 };
 
+// =============   导出设置会话   ============= //
 export const exportSettings = () => {
   const settings = getSettings();
 
@@ -56,7 +62,7 @@ export const exportAll = () => {
   const sessions = getSessions();
   const settings = getSettings();
 
-  const config = createConfigFile('all', { sessions, settings });
+  const config = createConfigFile('all', { ...sessions, settings });
 
   exportConfigFile(config, 'config');
 };

package/src/locales/default/common.ts

@@ -17,7 +17,7 @@ export default {
   copy: '复制',
   copySuccess: '复制成功',
   defaultAgent: '默认助手',
-  defaultSession: '默认对话',
+  defaultSession: '默认助手',
   delete: '删除',
   edit: '编辑',
   export: '导出配置',
@@ -31,6 +31,12 @@ export default {
   },
   feedback: '反馈与建议',
   import: '导入配置',
+  inbox: {
+    defaultMessage:
+      '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击「+」创建自定义助手',
+    desc: '开启大脑集群，激发思维火花。你的智能助理，就在这里与你交流一切',
+    title: '随便聊聊',
+  },
   message: {
     function_loading: '插件请求中...',
   },
@@ -47,6 +53,7 @@ export default {
   searchAgentPlaceholder: '搜索助手和对话...',
   send: '发送',
   sendPlaceholder: '输入聊天内容...',
+  sessionList: '助手列表',
   setting: '设置',
   share: '分享',
   tab: {

package/src/pages/chat/SessionList/Inbox.tsx

@@ -0,0 +1,23 @@
+import { Avatar, List } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
+import { INBOX_SESSION_ID } from '@/const/session';
+import { useSessionStore } from '@/store/session';
+
+const Inbox = memo(() => {
+  const { t } = useTranslation('common');
+  const [activeId, switchInbox] = useSessionStore((s) => [s.activeId, s.switchInbox]);
+
+  return (
+    <List.Item
+      active={activeId === INBOX_SESSION_ID}
+      avatar={<Avatar avatar={DEFAULT_INBOX_AVATAR} size={46} style={{ padding: 3 }} />}
+      onClick={switchInbox}
+      title={t('inbox.title')}
+    />
+  );
+});
+
+export default Inbox;

package/src/pages/chat/SessionList/List/SessionItem.tsx

@@ -1,8 +1,9 @@
 import { ActionIcon, Avatar, Icon, List } from '@lobehub/ui';
 import { useHover } from 'ahooks';
 import { App, Dropdown, type MenuProps, Tag } from 'antd';
+import { createStyles } from 'antd-style';
 import { FolderOutput, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
-import { FC, memo, useMemo, useRef, useState } from 'react';
+import { memo, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
@@ -11,17 +12,27 @@ import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { useGlobalStore } from '@/store/global';
 import { agentSelectors, chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
 
-import { useStyles } from './style';
-
 const { Item } = List;
 
+const useStyles = createStyles(({ css }) => {
+  return {
+    container: css`
+      position: relative;
+    `,
+
+    modalRoot: css`
+      z-index: 2000;
+    `,
+  };
+});
+
 interface SessionItemProps {
   active?: boolean;
   id: string;
   loading?: boolean;
 }
 
-const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading }) => {
+const SessionItem = memo<SessionItemProps>(({ id, active = true, loading }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
   const isHovering = useHover(ref);

package/src/pages/chat/SessionList/List/index.tsx

@@ -1,6 +1,7 @@
 import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import { sessionSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
@@ -16,13 +17,13 @@ const SessionList = memo(() => {
   return !isInit ? (
     <SkeletonItem />
   ) : (
-    <>
+    <Flexbox>
       {list.map(({ id }) => (
         <Link href={`/chat/${id}`} key={id}>
           <SessionItem active={activeId === id} id={id} loading={loading && id === activeId} />
         </Link>
       ))}
-    </>
+    </Flexbox>
   );
 });
 

package/src/pages/chat/SessionList/index.tsx

@@ -1,17 +1,29 @@
 import { DraggablePanelBody } from '@lobehub/ui';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import FolderPanel from '@/features/FolderPanel';
 
 import Header from './Header';
+import Inbox from './Inbox';
 import SessionList from './List';
 
 export const Sessions = memo(() => {
+  const { t } = useTranslation('common');
+
   return (
     <FolderPanel>
       <Header />
       <DraggablePanelBody style={{ padding: 0 }}>
-        <SessionList />
+        <Flexbox gap={8}>
+          <Inbox />
+
+          <Flexbox paddingInline={20} style={{ fontSize: 12, marginTop: 8 }}>
+            {t('sessionList')}
+          </Flexbox>
+          <SessionList />
+        </Flexbox>
       </DraggablePanelBody>
     </FolderPanel>
   );

package/src/pages/chat/[id]/index.page.tsx

@@ -5,9 +5,9 @@ import { Flexbox } from 'react-layout-kit';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import Conversation from './Conversation';
-import Header from './Header';
-import Config from './Sidebar';
+import Conversation from '../features/Conversation';
+import Header from '../features/Header';
+import SideBar from '../features/Sidebar';
 import Layout from './layout';
 
 const Chat = memo(() => {
@@ -24,12 +24,10 @@ const Chat = memo(() => {
         <title>{pageTitle}</title>
       </Head>
       <Layout>
-        <Flexbox id={'lobe-conversion-container'} style={{ height: '100vh' }}>
-          <Header />
-          <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-            <Conversation />
-            <Config />
-          </Flexbox>
+        <Header />
+        <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+          <Conversation />
+          <SideBar />
         </Flexbox>
       </Layout>
     </>

package/src/pages/chat/[id]/layout.tsx

@@ -1,15 +1,12 @@
 import { useRouter } from 'next/router';
-import { PropsWithChildren, memo, useEffect } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { PropsWithChildren, memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
-import AppLayout from '@/layout/AppLayout';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { useSessionStore } from '@/store/session';
+import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 
-import { Sessions } from '../SessionList';
+import ChatLayout from '../layout';
 
-const ChatLayout = memo<PropsWithChildren>(({ children }) => {
+const Layout = memo<PropsWithChildren>(({ children }) => {
   const [activeSession, toggleTopic] = useSessionStore((s) => {
     return [s.activeSession, s.toggleTopic];
   }, shallow);
@@ -17,11 +14,7 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
   const router = useRouter();
   const { id } = router.query;
 
-  useEffect(() => {
-    const hasRehydrated = useSessionStore.persist.hasHydrated();
-    // 只有当水合完毕后再开始做操作
-    if (!hasRehydrated) return;
-
+  useOnFinishHydrationSession(() => {
     // 1. 正常激活会话
     if (typeof id === 'string') {
       activeSession(id);
@@ -31,16 +24,7 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
     toggleTopic();
   }, [id]);
 
-  useSwitchSideBarOnInit('chat');
-
-  return (
-    <AppLayout>
-      <Sessions />
-      <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
-        {children}
-      </Flexbox>
-    </AppLayout>
-  );
+  return <ChatLayout>{children}</ChatLayout>;
 });
 
-export default ChatLayout;
+export default Layout;

package/src/pages/chat/[id]/setting/index.page.tsx

@@ -7,10 +7,10 @@ import { Flexbox } from 'react-layout-kit';
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
 import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
-import AppLayout from '@/layout/AppLayout';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
+import ChatLayout from '../layout';
 import Header from './Header';
 
 const EditPage = memo(() => {
@@ -32,7 +32,7 @@ const EditPage = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <AppLayout>
+      <ChatLayout>
         <Header />
         <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
           <HeaderSpacing height={HEADER_HEIGHT - 16} />
@@ -46,7 +46,7 @@ const EditPage = memo(() => {
           <AgentConfig config={config} updateConfig={updateAgentConfig} />
           <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
         </Flexbox>
-      </AppLayout>
+      </ChatLayout>
     </>
   );
 });

package/src/pages/chat/features/Conversation/ChatList/SkeletonList.tsx

@@ -0,0 +1,43 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  user: css`
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 16px;
+
+    .${prefixCls}-skeleton-paragraph {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+  `,
+}));
+const SkeletonList = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox gap={24} padding={12} style={{ marginTop: 24 }}>
+      <Skeleton
+        active
+        avatar={{ size: 40 }}
+        paragraph={{ width: ['50%', '30%'] }}
+        round
+        title={false}
+      />
+      <Skeleton
+        active
+        avatar={{ size: 40 }}
+        className={styles.user}
+        paragraph={{ width: ['50%', '30%'] }}
+        round
+        // style={{ display: 'flex', flexDirection: 'row-reverse' }}
+        title={false}
+      />
+    </Flexbox>
+  );
+});
+export default SkeletonList;

package/src/pages/chat/{[id] → features}/Conversation/ChatList/index.tsx

@@ -1,10 +1,17 @@
 import { ChatList, RenderErrorMessage, RenderMessage } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
+import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
+import { INBOX_SESSION_ID } from '@/const/session';
+import {
+  agentSelectors,
+  chatSelectors,
+  useSessionHydrated,
+  useSessionStore,
+} from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
 import { ErrorType } from '@/types/fetch';
 import { isFunctionMessage } from '@/utils/message';
@@ -14,6 +21,7 @@ import OpenAiBizError from './Error/OpenAiBizError';
 import MessageExtra from './MessageExtra';
 import FunctionCall from './Plugins/FunctionCall';
 import PluginMessage from './Plugins/PluginMessage';
+import SkeletonList from './SkeletonList';
 
 const renderErrorMessage: RenderErrorMessage = (error, message) => {
   switch (error.type as ErrorType) {
@@ -27,11 +35,14 @@ const renderErrorMessage: RenderErrorMessage = (error, message) => {
 };
 
 const List = () => {
+  const init = useSessionHydrated();
   const { t } = useTranslation('common');
 
   const data = useSessionStore(chatSelectors.currentChats, isEqual);
-  const [displayMode, chatLoadingId, deleteMessage, resendMessage, dispatchMessage] =
+
+  const [isInbox, displayMode, chatLoadingId, deleteMessage, resendMessage, dispatchMessage] =
     useSessionStore((s) => [
+      s.activeId === INBOX_SESSION_ID,
       agentSelectors.currentAgentConfig(s).displayMode,
       s.chatLoadingId,
       s.deleteMessage,
@@ -70,9 +81,28 @@ const List = () => {
     [chatLoadingId],
   );
 
-  return (
+  // 针对 inbox 添加初始化时的自定义消息
+  const displayDataSource = useMemo(() => {
+    const emptyGuideMessage = {
+      content: t('inbox.defaultMessage'),
+      createAt: Date.now(),
+      extra: {},
+      id: 'default',
+      meta: {
+        avatar: DEFAULT_INBOX_AVATAR,
+      },
+      role: 'assistant',
+      updateAt: Date.now(),
+    } as ChatMessage;
+
+    return isInbox && data.length === 0 ? [emptyGuideMessage] : data;
+  }, [data]);
+
+  return !init ? (
+    <SkeletonList />
+  ) : (
     <ChatList
-      data={data}
+      data={displayDataSource}
       loadingId={chatLoadingId}
       onActionClick={(key, id) => {
         switch (key) {

package/src/pages/chat/{[id] → features}/Conversation/Input/index.tsx

@@ -22,7 +22,7 @@ const ChatInput = () => {
     s.updatePreference,
   ]);
   const [sendMessage, hasTopic, saveToTopic] = useSessionStore((s) => [
-    s.createOrSendMsg,
+    s.sendMessage,
     !!s.activeTopicId,
     s.saveToTopic,
   ]);