@lobehub/chat 0.44.0 → 0.44.1

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # 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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.44.0",
+  "version": "0.44.1",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

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/pages/chat/SessionList/Inbox.tsx

@@ -1,4 +1,5 @@
 import { Avatar, List } from '@lobehub/ui';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -8,15 +9,16 @@ import { useSessionStore } from '@/store/session';
 
 const Inbox = memo(() => {
   const { t } = useTranslation('common');
-  const [activeId, switchInbox] = useSessionStore((s) => [s.activeId, s.switchInbox]);
+  const [activeId] = useSessionStore((s) => [s.activeId]);
 
   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')}
-    />
+    <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>
   );
 });
 

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

@@ -5,22 +5,21 @@ 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/store/session/slices/session/action.ts

@@ -29,6 +29,7 @@ export interface SessionAction {
    * @param payload - 聊天记录
    */
   dispatchSession: (payload: SessionDispatch) => void;
+  importInbox: (inbox: LobeAgentSession) => void;
   /**
    * 导入会话
    * @param sessions
@@ -52,7 +53,6 @@ export interface SessionAction {
    * @returns void
    */
   removeSession: (sessionId: string) => void;
-  switchInbox: () => void;
 
   /**
    * @title 切换会话
@@ -114,7 +114,8 @@ export const createSessionSlice: StateCreator<
       );
     }
   },
-
+  // TODO：暂时先不实现导入 inbox 的功能
+  importInbox: () => {},
   importSessions: (importSessions) => {
     const { sessions } = get();
     set(
@@ -147,13 +148,6 @@ export const createSessionSlice: StateCreator<
     }
   },
 
-  switchInbox: () => {
-    if (get().activeId === INBOX_SESSION_ID) return;
-    get().activeSession(INBOX_SESSION_ID);
-
-    Router.push('/chat');
-  },
-
   switchSession: async (sessionId) => {
     if (get().activeId === sessionId) return;
 

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

@@ -1,189 +0,0 @@
-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 { memo, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
-
-import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
-import { useGlobalStore } from '@/store/global';
-import { agentSelectors, chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
-
-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 = memo<SessionItemProps>(({ id, active = true, loading }) => {
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  const isHovering = useHover(ref);
-
-  const { t } = useTranslation('common');
-
-  const { styles } = useStyles();
-  const [defaultModel] = useGlobalStore((s) => [s.settings.defaultAgent.config?.model]);
-
-  const [
-    pin,
-    title,
-    description,
-    systemRole,
-    avatar,
-    avatarBackground,
-    updateAt,
-    model,
-    chatLength,
-    removeSession,
-    pinSession,
-  ] = useSessionStore((s) => {
-    const session = sessionSelectors.getSessionById(id)(s);
-    const meta = session.meta;
-    const systemRole = session.config.systemRole;
-    return [
-      session.pinned,
-      agentSelectors.getTitle(meta),
-      agentSelectors.getDescription(meta),
-      systemRole,
-      agentSelectors.getAvatar(meta),
-      meta.backgroundColor,
-      session?.updateAt,
-      session.config.model,
-      chatSelectors.getChatsById(id)(s).length,
-      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],
-  );
-
-  const showModel = model !== defaultModel;
-  const showChatLength = chatLength > 0;
-
-  return (
-    <Item
-      actions={
-        <Dropdown
-          arrow={false}
-          menu={{
-            items,
-            onClick: ({ domEvent }) => {
-              domEvent.stopPropagation();
-            },
-          }}
-          onOpenChange={setOpen}
-          open={open}
-          trigger={['click']}
-        >
-          <ActionIcon
-            icon={MoreVertical}
-            size={{
-              blockSize: 28,
-              fontSize: 16,
-            }}
-          />
-        </Dropdown>
-      }
-      active={active}
-      addon={
-        !(showModel || showChatLength) ? undefined : (
-          <Flexbox gap={4} horizontal style={{ flexWrap: 'wrap' }}>
-            {showModel && <Tag bordered={false}>{model}</Tag>}
-          </Flexbox>
-        )
-      }
-      avatar={
-        <Avatar
-          animation={isHovering}
-          avatar={avatar}
-          background={avatarBackground}
-          shape="circle"
-          size={46}
-          title={title}
-        />
-      }
-      className={styles.container}
-      date={updateAt}
-      description={description || systemRole}
-      loading={loading}
-      pin={pin}
-      ref={ref}
-      showAction={open || isHovering}
-      title={title}
-    />
-  );
-}, shallow);
-
-export default SessionItem;