@lobehub/chat 0.43.0 → 0.44.1

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,72 @@
 
 # Changelog
 
+### [Version 0.44.1](https://github.com/lobehub/lobe-chat/compare/v0.44.0...v0.44.1)
+
+<sup>Released on **2023-08-12**</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.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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.43.0",
+  "version": "0.44.1",
   "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/layout/index.tsx

@@ -3,7 +3,7 @@ import { App, ConfigProvider } from 'antd';
 import { useThemeMode } from 'antd-style';
 import 'antd/dist/reset.css';
 import Zh_CN from 'antd/locale/zh_CN';
-import { PropsWithChildren, useCallback, useEffect } from 'react';
+import { PropsWithChildren, memo, useCallback, useEffect } from 'react';
 
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
@@ -12,7 +12,7 @@ import { GlobalStyle } from '@/styles';
 import i18n from '../locales';
 import { useStyles } from './style';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
 
   useEffect(() => {
@@ -25,9 +25,9 @@ const Layout = ({ children }: PropsWithChildren) => {
       <App className={styles.bg}>{children}</App>
     </ConfigProvider>
   );
-};
+});
 
-export default ({ children }: PropsWithChildren) => {
+export default memo(({ children }: PropsWithChildren) => {
   const themeMode = useGlobalStore((s) => s.settings.themeMode);
   const [primaryColor, neutralColor] = useGlobalStore((s) => [
     s.settings.primaryColor,
@@ -54,4 +54,4 @@ export default ({ children }: PropsWithChildren) => {
       <Layout>{children}</Layout>
     </ThemeProvider>
   );
-};
+});

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,25 @@
+import { Avatar, List } from '@lobehub/ui';
+import Link from 'next/link';
+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] = useSessionStore((s) => [s.activeId]);
+
+  return (
+    <Link href={'/chat'}>
+      <List.Item
+        active={activeId === INBOX_SESSION_ID}
+        avatar={<Avatar avatar={DEFAULT_INBOX_AVATAR} size={46} style={{ padding: 3 }} />}
+        title={t('inbox.title')}
+      />
+    </Link>
+  );
+});
+
+export default Inbox;

package/src/pages/chat/SessionList/List/Item/Actions.tsx

@@ -0,0 +1,112 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { App, Dropdown, type MenuProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { FolderOutput, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
+import { sessionSelectors, useSessionStore } from '@/store/session';
+
+const useStyles = createStyles(({ css }) => ({
+  modalRoot: css`
+    z-index: 2000;
+  `,
+}));
+
+interface ActionProps {
+  id: string;
+  setOpen: (open: boolean) => void;
+}
+
+const Actions = memo<ActionProps>(({ id, setOpen }) => {
+  const { t } = useTranslation('common');
+
+  const { styles } = useStyles();
+
+  const [pin, removeSession, pinSession] = useSessionStore((s) => {
+    const session = sessionSelectors.getSessionById(id)(s);
+    return [session.pinned, s.removeSession, s.pinSession];
+  });
+
+  const { modal } = App.useApp();
+
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={pin ? PinOff : Pin} />,
+        key: 'pin',
+        label: t(pin ? 'pinOff' : 'pin'),
+        onClick: () => {
+          pinSession(id, !pin);
+        },
+      },
+      {
+        children: [
+          {
+            key: 'agent',
+            label: <div>{t('exportType.agent')}</div>,
+            onClick: () => {
+              exportSingleAgent(id);
+            },
+          },
+          {
+            key: 'agentWithMessage',
+            label: <div>{t('exportType.agentWithMessage')}</div>,
+            onClick: () => {
+              exportSingleSession(id);
+            },
+          },
+        ],
+        icon: <Icon icon={FolderOutput} />,
+        key: 'export',
+        label: t('export'),
+      },
+      {
+        danger: true,
+        icon: <Icon icon={Trash} />,
+        key: 'delete',
+        label: t('delete'),
+        onClick: ({ domEvent }) => {
+          domEvent.stopPropagation();
+
+          modal.confirm({
+            centered: true,
+            okButtonProps: { danger: true },
+            okText: t('ok'),
+            onOk: () => {
+              removeSession(id);
+            },
+            rootClassName: styles.modalRoot,
+            title: t('confirmRemoveSessionItemAlert'),
+          });
+        },
+      },
+    ],
+    [id, pin],
+  );
+
+  return (
+    <Dropdown
+      arrow={false}
+      menu={{
+        items,
+        onClick: ({ domEvent }) => {
+          domEvent.stopPropagation();
+        },
+      }}
+      onOpenChange={setOpen}
+      trigger={['click']}
+    >
+      <ActionIcon
+        icon={MoreVertical}
+        size={{
+          blockSize: 28,
+          fontSize: 16,
+        }}
+      />
+    </Dropdown>
+  );
+});
+
+export default Actions;

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

@@ -0,0 +1,115 @@
+import { Avatar, List } from '@lobehub/ui';
+import { useHover } from 'ahooks';
+import { Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo, useMemo, useRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { useGlobalStore } from '@/store/global';
+import { agentSelectors, sessionSelectors, useSessionStore } from '@/store/session';
+
+import Actions from './Actions';
+
+const { Item } = List;
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    container: css`
+      position: relative;
+    `,
+
+    modalRoot: css`
+      z-index: 2000;
+    `,
+  };
+});
+
+interface SessionItemProps {
+  id: string;
+}
+
+const SessionItem = memo<SessionItemProps>(({ id }) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const isHovering = useHover(ref);
+
+  const { styles } = useStyles();
+  const [defaultModel] = useGlobalStore((s) => [s.settings.defaultAgent.config?.model]);
+
+  const [
+    active,
+    loading,
+    pin,
+    title,
+    description,
+    systemRole,
+    avatar,
+    avatarBackground,
+    updateAt,
+    model,
+  ] = useSessionStore((s) => {
+    const session = sessionSelectors.getSessionById(id)(s);
+    const meta = session.meta;
+    const systemRole = session.config.systemRole;
+
+    return [
+      s.activeId === id,
+      s.autocompleteLoading.title && id === s.activeId,
+      session.pinned,
+      agentSelectors.getTitle(meta),
+      agentSelectors.getDescription(meta),
+      systemRole,
+      agentSelectors.getAvatar(meta),
+      meta.backgroundColor,
+      session?.updateAt,
+      session.config.model,
+    ];
+  });
+
+  const showModel = model !== defaultModel;
+
+  const actions = useMemo(() => <Actions id={id} setOpen={setOpen} />, [id]);
+
+  const avatarRender = useMemo(
+    () => (
+      <Avatar
+        animation={isHovering}
+        avatar={avatar}
+        background={avatarBackground}
+        shape="circle"
+        size={46}
+      />
+    ),
+    [isHovering, avatar, avatarBackground],
+  );
+
+  const addon = useMemo(
+    () =>
+      !showModel ? undefined : (
+        <Flexbox gap={4} horizontal style={{ flexWrap: 'wrap' }}>
+          {showModel && <Tag bordered={false}>{model}</Tag>}
+        </Flexbox>
+      ),
+    [showModel, model],
+  );
+
+  return (
+    <Item
+      actions={actions}
+      active={active}
+      addon={addon}
+      avatar={avatarRender}
+      className={styles.container}
+      date={updateAt}
+      description={description || systemRole}
+      loading={loading}
+      pin={pin}
+      ref={ref}
+      showAction={open || isHovering}
+      title={title}
+    />
+  );
+}, shallow);
+
+export default SessionItem;

package/src/pages/chat/SessionList/List/{SkeletonItem.tsx → SkeletonList.tsx}

@@ -25,7 +25,7 @@ const useStyles = createStyles(({ css }) => ({
 
 //  从 3~10 随机取一个整数
 
-const SkeletonItem = () => {
+const SkeletonList = () => {
   const { styles } = useStyles();
 
   const list = Array.from({ length: 4 }).fill('');
@@ -44,4 +44,4 @@ const SkeletonItem = () => {
     </Flexbox>
   );
 };
-export default SkeletonItem;
+export default SkeletonList;

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

@@ -1,28 +1,28 @@
 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';
 
-import SessionItem from './SessionItem';
-import SkeletonItem from './SkeletonItem';
+import SessionItem from './Item';
+import SkeletonList from './SkeletonList';
 
 const SessionList = memo(() => {
   const list = useSessionStore(sessionSelectors.sessionList, isEqual);
-  const [activeId, loading] = useSessionStore((s) => [s.activeId, s.autocompleteLoading.title]);
 
   const isInit = useSessionHydrated();
 
   return !isInit ? (
-    <SkeletonItem />
+    <SkeletonList />
   ) : (
-    <>
+    <Flexbox>
       {list.map(({ id }) => (
         <Link href={`/chat/${id}`} key={id}>
-          <SessionItem active={activeId === id} id={id} loading={loading && id === activeId} />
+          <SessionItem id={id} />
         </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;