From 1ce1fc53d3b703bac78c0b8231c1172ee51c3d02 Mon Sep 17 00:00:00 2001
From: Justin3go <just@justin3go.com>
Date: Mon, 15 Jan 2024 11:16:35 +0800
Subject: [PATCH 01/20] =?UTF-8?q?=E2=9C=A8=20feat:=20implement=20custom=20?=
 =?UTF-8?q?session=20grouping=20(#1045)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SessionListContent/DefaultMode.tsx        | 11 ++-
 .../SessionListContent/List/Item/Actions.tsx  | 75 ++++++++++++++---
 .../List/Item/CreateGroupModal.tsx            | 45 ++++++++++
 .../SessionListContent/List/Item/index.tsx    | 84 ++++++++++++-------
 src/locales/default/chat.ts                   |  1 +
 src/locales/default/common.ts                 |  7 ++
 src/store/session/slices/session/action.ts    |  7 ++
 .../session/slices/session/selectors/list.ts  | 17 ++++
 8 files changed, 204 insertions(+), 43 deletions(-)
 create mode 100644 src/app/chat/features/SessionListContent/List/Item/CreateGroupModal.tsx

diff --git a/src/app/chat/features/SessionListContent/DefaultMode.tsx b/src/app/chat/features/SessionListContent/DefaultMode.tsx
index 1d3302dd6337..a1323102e616 100644
--- a/src/app/chat/features/SessionListContent/DefaultMode.tsx
+++ b/src/app/chat/features/SessionListContent/DefaultMode.tsx
@@ -16,6 +16,8 @@ const SessionListContent = memo(() => {
   const { t } = useTranslation('chat');
   const unpinnedSessionList = useSessionStore(sessionSelectors.unpinnedSessionList, isEqual);
   const pinnedList = useSessionStore(sessionSelectors.pinnedSessionList, isEqual);
+  const customSessionGroup = useSessionStore(sessionSelectors.customSessionGroup, isEqual);
+
   const [hasPinnedSessionList, useFetchSessions] = useSessionStore((s) => [
     sessionSelectors.hasPinnedSessionList(s),
     s.useFetchSessions,
@@ -34,10 +36,15 @@ const SessionListContent = memo(() => {
       key: 'pinned',
       label: t('pin'),
     },
+    ...Object.keys(customSessionGroup).map((key) => ({
+      children: <SessionList dataSource={customSessionGroup[key]} />,
+      key,
+      label: key,
+    })),
     {
       children: <SessionList dataSource={unpinnedSessionList} />,
-      key: 'sessionList',
-      label: t('sessionList'),
+      key: 'defaultList',
+      label: t('defaultList'),
     },
   ].filter(Boolean) as CollapseProps['items'];
 
diff --git a/src/app/chat/features/SessionListContent/List/Item/Actions.tsx b/src/app/chat/features/SessionListContent/List/Item/Actions.tsx
index 0ef743ecd505..005e570c88e1 100644
--- a/src/app/chat/features/SessionListContent/List/Item/Actions.tsx
+++ b/src/app/chat/features/SessionListContent/List/Item/Actions.tsx
@@ -1,7 +1,16 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { App, Dropdown, type MenuProps } from 'antd';
 import { createStyles } from 'antd-style';
-import { HardDriveDownload, LucideCopy, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
+import isEqual from 'fast-deep-equal';
+import {
+  ArrowLeftRight,
+  HardDriveDownload,
+  LucideCopy,
+  MoreVertical,
+  Pin,
+  PinOff,
+  Trash,
+} from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,6 +18,7 @@ import { configService } from '@/services/config';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
 import { sessionSelectors } from '@/store/session/selectors';
+import { SessionGroupDefaultKeys } from '@/types/session';
 
 const useStyles = createStyles(({ css }) => ({
   modalRoot: css`
@@ -17,27 +27,36 @@ const useStyles = createStyles(({ css }) => ({
 }));
 
 interface ActionProps {
+  group: string | undefined;
   id: string;
+  setIsModalOpen: (open: boolean) => void;
   setOpen: (open: boolean) => void;
 }
 
-const Actions = memo<ActionProps>(({ id, setOpen }) => {
+const Actions = memo<ActionProps>(({ group, id, setIsModalOpen, setOpen }) => {
   const { t } = useTranslation('common');
 
   const { styles } = useStyles();
 
-  const [pin, removeSession, pinSession, duplicateSession] = useSessionStore((s) => {
-    const session = sessionSelectors.getSessionById(id)(s);
-    return [
-      sessionHelpers.getSessionPinned(session),
-      s.removeSession,
-      s.pinSession,
-      s.duplicateSession,
-    ];
-  });
+  const customSessionGroup = useSessionStore(sessionSelectors.customSessionGroup, isEqual);
+  const [pin, removeSession, pinSession, duplicateSession, updateSessionGroup] = useSessionStore(
+    (s) => {
+      const session = sessionSelectors.getSessionById(id)(s);
+      return [
+        sessionHelpers.getSessionPinned(session),
+        s.removeSession,
+        s.pinSession,
+        s.duplicateSession,
+        s.updateSessionGroup,
+      ];
+    },
+  );
 
   const { modal } = App.useApp();
 
+  const isDefault = group === SessionGroupDefaultKeys.Default;
+  const hasDivider = !isDefault || Object.keys(customSessionGroup).length > 0;
+
   const items: MenuProps['items'] = useMemo(
     () => [
       {
@@ -48,6 +67,40 @@ const Actions = memo<ActionProps>(({ id, setOpen }) => {
           pinSession(id, !pin);
         },
       },
+      {
+        children: [
+          {
+            key: 'newGroup',
+            label: <div>{t('group.newGroup')}</div>,
+            onClick: ({ domEvent }) => {
+              domEvent.stopPropagation();
+              setIsModalOpen(true);
+            },
+          },
+          hasDivider && {
+            type: 'divider',
+          },
+          !isDefault && {
+            key: 'defaultList',
+            label: <div>{t('defaultList')}</div>,
+            onClick: () => {
+              updateSessionGroup(id, SessionGroupDefaultKeys.Default);
+            },
+          },
+          ...Object.keys(customSessionGroup)
+            .filter((key) => key !== group)
+            .map((key) => ({
+              key,
+              label: <div>{key}</div>,
+              onClick: () => {
+                updateSessionGroup(id, key);
+              },
+            })),
+        ],
+        icon: <Icon icon={ArrowLeftRight} />,
+        key: 'moveGroup',
+        label: t('group.moveGroup'),
+      },
       {
         children: [
           {
diff --git a/src/app/chat/features/SessionListContent/List/Item/CreateGroupModal.tsx b/src/app/chat/features/SessionListContent/List/Item/CreateGroupModal.tsx
new file mode 100644
index 000000000000..0bb1eadd1ec6
--- /dev/null
+++ b/src/app/chat/features/SessionListContent/List/Item/CreateGroupModal.tsx
@@ -0,0 +1,45 @@
+import { Input, Modal, type ModalProps } from '@lobehub/ui';
+import { message } from 'antd';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type CreateGroupModalProps = ModalProps & {
+  onInputOk: (input: string) => void;
+};
+
+const CreateGroupModal = ({ open, onCancel, onInputOk }: CreateGroupModalProps) => {
+  const { t } = useTranslation('common');
+
+  const [input, setInput] = useState('');
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const handleClickOk = (input: string) => {
+    if (input.length === 0 || input.length > 10) {
+      messageApi.warning(t('group.inputMsg'));
+      return;
+    }
+    onInputOk(input);
+  };
+
+  return (
+    <div onClick={(e) => e.stopPropagation()}>
+      <Modal
+        allowFullscreen
+        onCancel={onCancel}
+        onOk={() => handleClickOk(input)}
+        open={open}
+        title={t('group.newGroup')}
+        width={400}
+      >
+        <Input
+          onChange={(e) => setInput(e.target.value)}
+          placeholder={t('group.inputPlaceholder')}
+          value={input}
+        />
+      </Modal>
+      {contextHolder}
+    </div>
+  );
+};
+
+export default CreateGroupModal;
diff --git a/src/app/chat/features/SessionListContent/List/Item/index.tsx b/src/app/chat/features/SessionListContent/List/Item/index.tsx
index 6b42b94e63d1..1dac61d92aee 100644
--- a/src/app/chat/features/SessionListContent/List/Item/index.tsx
+++ b/src/app/chat/features/SessionListContent/List/Item/index.tsx
@@ -13,6 +13,7 @@ import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
 import ListItem from '../../ListItem';
 import Actions from './Actions';
+import CreateGroupModal from './CreateGroupModal';
 
 interface SessionItemProps {
   id: string;
@@ -20,32 +21,48 @@ interface SessionItemProps {
 
 const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [open, setOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const [defaultModel] = useGlobalStore((s) => [settingsSelectors.defaultAgentConfig(s).model]);
   const [active] = useSessionStore((s) => [s.activeId === id]);
   const [loading] = useChatStore((s) => [!!s.chatLoadingId && id === s.activeId]);
 
-  const [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;
+  const [
+    pin,
+    title,
+    description,
+    systemRole,
+    avatar,
+    avatarBackground,
+    updateAt,
+    model,
+    group,
+    updateSessionGroup,
+  ] = useSessionStore((s) => {
+    const session = sessionSelectors.getSessionById(id)(s);
+    const meta = session.meta;
+    const systemRole = session.config.systemRole;
 
-      return [
-        sessionHelpers.getSessionPinned(session),
-        agentSelectors.getTitle(meta),
-        agentSelectors.getDescription(meta),
-        systemRole,
-        agentSelectors.getAvatar(meta),
-        meta.backgroundColor,
-        session?.updatedAt,
-        session.config.model,
-      ];
-    });
+    return [
+      sessionHelpers.getSessionPinned(session),
+      agentSelectors.getTitle(meta),
+      agentSelectors.getDescription(meta),
+      systemRole,
+      agentSelectors.getAvatar(meta),
+      meta.backgroundColor,
+      session?.updatedAt,
+      session.config.model,
+      session?.group,
+      s.updateSessionGroup,
+    ];
+  });
 
   const showModel = model !== defaultModel;
 
-  const actions = useMemo(() => <Actions id={id} setOpen={setOpen} />, [id]);
+  const actions = useMemo(
+    () => <Actions group={group} id={id} setIsModalOpen={setIsModalOpen} setOpen={setOpen} />,
+    [id],
+  );
 
   const addon = useMemo(
     () =>
@@ -58,19 +75,26 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   );
 
   return (
-    <ListItem
-      actions={actions}
-      active={active}
-      addon={addon}
-      avatar={avatar}
-      avatarBackground={avatarBackground}
-      date={updateAt}
-      description={description || systemRole}
-      loading={loading}
-      pin={pin}
-      showAction={open}
-      title={title}
-    />
+    <>
+      <ListItem
+        actions={actions}
+        active={active}
+        addon={addon}
+        avatar={avatar}
+        avatarBackground={avatarBackground}
+        date={updateAt}
+        description={description || systemRole}
+        loading={loading}
+        pin={pin}
+        showAction={open}
+        title={title}
+      />
+      <CreateGroupModal
+        onCancel={() => setIsModalOpen(false)}
+        onInputOk={(input) => updateSessionGroup(id, input)}
+        open={isModalOpen}
+      ></CreateGroupModal>
+    </>
   );
 }, shallow);
 
diff --git a/src/locales/default/chat.ts b/src/locales/default/chat.ts
index 7443ceb8cb6f..1388ad8d2c3c 100644
--- a/src/locales/default/chat.ts
+++ b/src/locales/default/chat.ts
@@ -7,6 +7,7 @@ export default {
   confirmClearCurrentMessages: '即将清空当前会话消息，清空后将无法找回，请确认你的操作',
   confirmRemoveSessionItemAlert: '即将删除该助手，删除后该将无法找回，请确认你的操作',
   defaultAgent: '自定义助手',
+  defaultList: '默认列表',
   defaultSession: '自定义助手',
   duplicateTitle: '{{title}} 副本',
   historyRange: '历史范围',
diff --git a/src/locales/default/common.ts b/src/locales/default/common.ts
index cadde0f0ff4a..858a474df13d 100644
--- a/src/locales/default/common.ts
+++ b/src/locales/default/common.ts
@@ -16,6 +16,7 @@ export default {
   copyFail: '复制失败',
   copySuccess: '复制成功',
   defaultAgent: '自定义助手',
+  defaultList: '默认列表',
   defaultSession: '自定义助手',
   delete: '删除',
   duplicate: '创建副本',
@@ -30,6 +31,12 @@ export default {
     globalSetting: '导出全局设置',
   },
   feedback: '反馈与建议',
+  group: {
+    inputMsg: '组名长度需在1-10之内',
+    inputPlaceholder: '新建分组/移入指定分组',
+    moveGroup: '移入分组',
+    newGroup: '新建分组',
+  },
   historyRange: '历史范围',
   import: '导入配置',
   importModal: {
diff --git a/src/store/session/slices/session/action.ts b/src/store/session/slices/session/action.ts
index 9b28c6753759..bd7af495adf6 100644
--- a/src/store/session/slices/session/action.ts
+++ b/src/store/session/slices/session/action.ts
@@ -61,6 +61,7 @@ export interface SessionAction {
    * switch session url
    */
   switchSession: (sessionId?: string) => void;
+  updateSessionGroup: (sessionId: string, group: string) => Promise<void>;
   /**
    * A custom hook that uses SWR to fetch sessions data.
    */
@@ -153,6 +154,12 @@ export const createSessionSlice: StateCreator<
     router?.push(SESSION_CHAT_URL(sessionId, isMobile));
   },
 
+  updateSessionGroup: async (sessionId, group) => {
+    await sessionService.updateSessionGroup(sessionId, group);
+
+    await get().refreshSessions();
+  },
+
   useFetchSessions: () =>
     useSWR<LobeSessions>(FETCH_SESSIONS_KEY, sessionService.getSessions, {
       onSuccess: (data) => {
diff --git a/src/store/session/slices/session/selectors/list.ts b/src/store/session/slices/session/selectors/list.ts
index 56bc6d2dcff4..34ab1e8a9af3 100644
--- a/src/store/session/slices/session/selectors/list.ts
+++ b/src/store/session/slices/session/selectors/list.ts
@@ -16,6 +16,22 @@ const pinnedSessionList = (s: SessionStore) =>
 const unpinnedSessionList = (s: SessionStore) =>
   defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Default);
 
+const customSessionGroup = (s: SessionStore) => {
+  const group2SessionList: Record<string, LobeAgentSession[]> = {};
+  // 1. 筛选用户自定义的session
+  const customList = defaultSessions(s).filter(
+    (s) =>
+      s.group !== SessionGroupDefaultKeys.Pinned && s.group !== SessionGroupDefaultKeys.Default,
+  );
+  // 2. 进行分组
+  for (const s of customList) {
+    if (!s.group) continue;
+    group2SessionList[s.group] = group2SessionList[s.group] || [];
+    group2SessionList[s.group].push(s);
+  }
+  return group2SessionList;
+};
+
 const getSessionById =
   (id: string) =>
   (s: SessionStore): LobeAgentSession =>
@@ -57,6 +73,7 @@ const isSomeSessionActive = (s: SessionStore) => !!s.activeId && isSessionListIn
 export const sessionSelectors = {
   currentSession,
   currentSessionSafe,
+  customSessionGroup,
   getSessionById,
   getSessionMetaById,
   hasCustomAgents,

From 462295374148707451acd2fdc6c3de79058f6a71 Mon Sep 17 00:00:00 2001
From: canisminor1990 <i@canisminor.cc>
Date: Mon, 15 Jan 2024 18:42:30 +0800
Subject: [PATCH 02/20] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20session=20group?=
 =?UTF-8?q?=20manager?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/ChatInput/Footer/index.tsx       |  23 +-
 .../(desktop)/features/ChatInput/index.tsx    |   2 +-
 .../features/ChatHeader/ShareButton/index.tsx |   1 -
 src/app/chat/features/Migration/Failed.tsx    |   2 +
 .../CollapseGroup/Actions.tsx                 |  99 +++++
 .../CollapseGroup/index.tsx                   |   6 +
 .../SessionListContent/DefaultMode.tsx        |  89 +++--
 .../SessionListContent/List/Item/Actions.tsx  | 106 +++---
 .../List/Item/CreateGroupModal.tsx            |  45 ---
 .../SessionListContent/List/Item/index.tsx    |  68 ++--
 .../Modals/ConfigGroupModal/GroupItem.tsx     |  88 +++++
 .../Modals/ConfigGroupModal/index.tsx         |  77 ++++
 .../Modals/CreateGroupModal.tsx               |  59 +++
 .../Modals/RenameGroupModal.tsx               |  54 +++
 src/const/settings.ts                         |   1 +
 src/database/models/__tests__/session.test.ts |   4 +-
 src/database/models/session.ts                |   4 +-
 src/features/ChatInput/ActionBar/Clear.tsx    |   3 +-
 .../Conversation/Actions/Assistant.tsx        |   2 +-
 .../Conversation/Actions/Function.tsx         |   4 +-
 src/features/Conversation/Actions/User.tsx    |   2 +-
 .../hooks/useChatListActionsBar.tsx           |   6 +-
 src/features/PluginDevModal/index.tsx         |   3 +
 .../PluginStore/PluginItem/Action.tsx         |   2 +
 src/locales/default/chat.ts                   |  13 +-
 src/locales/default/common.ts                 |   7 -
 src/services/session.ts                       |   4 +-
 src/store/global/helpers.ts                   |   2 +
 src/store/global/slices/common/action.ts      |  17 +
 .../global/slices/common/initialState.ts      |   9 +-
 .../__snapshots__/selectors.test.ts.snap      |  98 +++++
 src/store/global/slices/settings/action.ts    |  27 +-
 src/store/global/slices/settings/helpers.ts   |  42 +++
 .../global/slices/settings/selectors.test.ts  | 339 ++++++++----------
 src/store/global/slices/settings/selectors.ts |   3 +
 .../session/slices/session/action.test.ts     |  54 +++
 src/store/session/slices/session/action.ts    |   8 +-
 src/store/session/slices/session/helpers.ts   |   4 +-
 .../session/slices/session/initialState.ts    |  34 +-
 .../session/slices/session/selectors/list.ts  |  63 ++--
 src/styles/antdOverride.ts                    |   7 -
 src/types/session.ts                          |  11 +-
 src/types/settings.ts                         |   2 +
 43 files changed, 1037 insertions(+), 457 deletions(-)
 create mode 100644 src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx
 delete mode 100644 src/app/chat/features/SessionListContent/List/Item/CreateGroupModal.tsx
 create mode 100644 src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx
 create mode 100644 src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/index.tsx
 create mode 100644 src/app/chat/features/SessionListContent/Modals/CreateGroupModal.tsx
 create mode 100644 src/app/chat/features/SessionListContent/Modals/RenameGroupModal.tsx
 create mode 100644 src/store/global/slices/settings/helpers.ts

diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx
index ae5b09505418..75417a8c39c3 100644
--- a/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx
+++ b/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx
@@ -4,12 +4,13 @@ import { createStyles } from 'antd-style';
 import {
   ChevronUp,
   CornerDownLeft,
-  Loader2,
   LucideCheck,
   LucideChevronDown,
   LucideCommand,
   LucidePlus,
+  StopCircle,
 } from 'lucide-react';
+import { rgba } from 'polished';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -25,7 +26,7 @@ import { isMacOS } from '@/utils/platform';
 
 import { LocalFiles } from './LocalFiles';
 
-const useStyles = createStyles(({ css, prefixCls }) => {
+const useStyles = createStyles(({ css, prefixCls, token }) => {
   return {
     arrow: css`
       &.${prefixCls}-btn.${prefixCls}-btn-icon-only {
@@ -38,13 +39,19 @@ const useStyles = createStyles(({ css, prefixCls }) => {
         align-items: center;
         justify-content: center;
       }
+
+      .${prefixCls}-btn.${prefixCls}-dropdown-trigger {
+        &::before {
+          background-color: ${rgba(token.colorBgLayout, 0.1)} !important;
+        }
+      }
     `,
   };
 });
 
 const isMac = isMacOS();
 
-const Footer = memo(() => {
+const Footer = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) => {
   const { t } = useTranslation('chat');
 
   const { theme, styles } = useStyles();
@@ -104,12 +111,18 @@ const Footer = memo(() => {
         <SaveTopic />
         <Flexbox style={{ minWidth: 92 }}>
           {loading ? (
-            <Button icon={loading && <Icon icon={Loader2} spin />} onClick={stopGenerateMessage}>
+            <Button icon={loading && <Icon icon={StopCircle} />} onClick={stopGenerateMessage}>
               {t('input.stop')}
             </Button>
           ) : (
             <Space.Compact>
-              <Button onClick={() => sendMessage()} type={'primary'}>
+              <Button
+                onClick={() => {
+                  sendMessage();
+                  setExpand?.(false);
+                }}
+                type={'primary'}
+              >
                 {t('input.send')}
               </Button>
               <Dropdown
diff --git a/src/app/chat/(desktop)/features/ChatInput/index.tsx b/src/app/chat/(desktop)/features/ChatInput/index.tsx
index 238cf1598342..fad04d9d8e2b 100644
--- a/src/app/chat/(desktop)/features/ChatInput/index.tsx
+++ b/src/app/chat/(desktop)/features/ChatInput/index.tsx
@@ -46,7 +46,7 @@ const ChatInput = memo(() => {
       >
         <Head expand={expand} setExpand={setExpand} />
         <TextArea setExpand={setExpand} />
-        <Footer />
+        <Footer setExpand={setExpand} />
       </Flexbox>
     </DraggablePanel>
   );
diff --git a/src/app/chat/features/ChatHeader/ShareButton/index.tsx b/src/app/chat/features/ChatHeader/ShareButton/index.tsx
index ead4a827f2b7..7bd94820c36d 100644
--- a/src/app/chat/features/ChatHeader/ShareButton/index.tsx
+++ b/src/app/chat/features/ChatHeader/ShareButton/index.tsx
@@ -33,7 +33,6 @@ const ShareButton = memo<ShareButtonProps>(({ mobile, setOpen, open }) => {
         size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
         title={t('share')}
       />
-
       <ShareModal onCancel={() => setIsModalOpen(false)} open={isModalOpen} />
     </>
   );
diff --git a/src/app/chat/features/Migration/Failed.tsx b/src/app/chat/features/Migration/Failed.tsx
index e29557595834..c929999fb40a 100644
--- a/src/app/chat/features/Migration/Failed.tsx
+++ b/src/app/chat/features/Migration/Failed.tsx
@@ -63,8 +63,10 @@ const Failed = memo<FailedProps>(({ error, state, setUpgradeStatus, setError, up
           >
             <ExportConfigButton primary state={state} />
             <Popconfirm
+              arrow={false}
               okButtonProps={{
                 danger: true,
+                type: 'primary',
               }}
               onConfirm={clearLocal}
               overlayInnerStyle={{ background: lighten(0.03, theme.colorBgElevated) }}
diff --git a/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx b/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx
new file mode 100644
index 000000000000..40e696732ec1
--- /dev/null
+++ b/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx
@@ -0,0 +1,99 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { App, Dropdown, DropdownProps, MenuProps } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { MoreVertical, PencilLine, Settings2, Trash } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { groupHelpers } from '@/store/global/helpers';
+import { settingsSelectors } from '@/store/global/selectors';
+
+const useStyles = createStyles(({ css }) => ({
+  modalRoot: css`
+    z-index: 2000;
+  `,
+}));
+interface ActionsProps extends Pick<DropdownProps, 'onOpenChange'> {
+  id: string;
+  openConfigModal: () => void;
+  openRenameModal: () => void;
+}
+
+const Actions = memo<ActionsProps>(({ id, openRenameModal, openConfigModal, onOpenChange }) => {
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+  const { modal } = App.useApp();
+  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
+  const updateCustomGroup = useGlobalStore((s) => s.updateCustomGroup);
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={PencilLine} />,
+        key: 'rename',
+        label: t('sessionGroup.rename'),
+        onClick: ({ domEvent }) => {
+          domEvent.stopPropagation();
+          openRenameModal();
+        },
+      },
+      {
+        icon: <Icon icon={Settings2} />,
+        key: 'config',
+        label: t('sessionGroup.config'),
+        onClick: ({ domEvent }) => {
+          domEvent.stopPropagation();
+          openConfigModal();
+        },
+      },
+      {
+        type: 'divider',
+      },
+      {
+        danger: true,
+        icon: <Icon icon={Trash} />,
+        key: 'delete',
+        label: t('delete', { ns: 'common' }),
+        onClick: ({ domEvent }) => {
+          domEvent.stopPropagation();
+          modal.confirm({
+            centered: true,
+            okButtonProps: { danger: true },
+            onOk: () => {
+              updateCustomGroup(groupHelpers.removeGroup(id, sessionCustomGroups));
+            },
+            rootClassName: styles.modalRoot,
+            title: t('sessionGroup.confirmRemoveGroupAlert'),
+          });
+        },
+      },
+    ],
+    [],
+  );
+
+  return (
+    <Dropdown
+      arrow={false}
+      menu={{
+        items,
+        onClick: ({ domEvent }) => {
+          domEvent.stopPropagation();
+        },
+      }}
+      onOpenChange={onOpenChange}
+      trigger={['click']}
+    >
+      <ActionIcon
+        icon={MoreVertical}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        size={{ blockSize: 22, fontSize: 16 }}
+        style={{ marginRight: -8 }}
+      />
+    </Dropdown>
+  );
+});
+
+export default Actions;
diff --git a/src/app/chat/features/SessionListContent/CollapseGroup/index.tsx b/src/app/chat/features/SessionListContent/CollapseGroup/index.tsx
index 00df3f4fa3b1..80a79ee25c22 100644
--- a/src/app/chat/features/SessionListContent/CollapseGroup/index.tsx
+++ b/src/app/chat/features/SessionListContent/CollapseGroup/index.tsx
@@ -18,8 +18,14 @@ const useStyles = createStyles(({ css, prefixCls, token, responsive }) => ({
       &:hover {
         color: ${token.colorText} !important;
         background: ${token.colorFillTertiary};
+        .${prefixCls}-collapse-extra {
+          display: block;
+        }
       }
     }
+    .${prefixCls}-collapse-extra {
+      display: none;
+    }
     .${prefixCls}-collapse-content {
       border-radius: 0 !important;
     }
diff --git a/src/app/chat/features/SessionListContent/DefaultMode.tsx b/src/app/chat/features/SessionListContent/DefaultMode.tsx
index a1323102e616..c06f6f6d3b86 100644
--- a/src/app/chat/features/SessionListContent/DefaultMode.tsx
+++ b/src/app/chat/features/SessionListContent/DefaultMode.tsx
@@ -1,52 +1,71 @@
 import { CollapseProps } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
-import { preferenceSelectors } from '@/store/global/selectors';
+import { preferenceSelectors, settingsSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
+import Actions from '../SessionListContent/CollapseGroup/Actions';
 import CollapseGroup from './CollapseGroup';
 import Inbox from './Inbox';
 import SessionList from './List';
+import ConfigGroupModal from './Modals/ConfigGroupModal';
+import RenameGroupModal from './Modals/RenameGroupModal';
 
 const SessionListContent = memo(() => {
+  const [activeGroupId, setActiveGroupId] = useState<string>();
+  const [renameGroupModalOpen, setRenameGroupModalOpen] = useState(false);
+  const [configGroupModalOpen, setConfigGroupModalOpen] = useState(false);
   const { t } = useTranslation('chat');
-  const unpinnedSessionList = useSessionStore(sessionSelectors.unpinnedSessionList, isEqual);
-  const pinnedList = useSessionStore(sessionSelectors.pinnedSessionList, isEqual);
-  const customSessionGroup = useSessionStore(sessionSelectors.customSessionGroup, isEqual);
-
-  const [hasPinnedSessionList, useFetchSessions] = useSessionStore((s) => [
-    sessionSelectors.hasPinnedSessionList(s),
-    s.useFetchSessions,
-  ]);
-
+  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
+  const sessionList =
+    useSessionStore(sessionSelectors.sessionList(sessionCustomGroups), isEqual) || {};
   const [sessionGroupKeys, updatePreference] = useGlobalStore((s) => [
     preferenceSelectors.sessionGroupKeys(s),
     s.updatePreference,
   ]);
-
+  const [ useFetchSessions] = useSessionStore((s) => [
+    s.useFetchSessions,
+  ]);
   useFetchSessions();
 
-  const items = [
-    hasPinnedSessionList && {
-      children: <SessionList dataSource={pinnedList} />,
-      key: 'pinned',
-      label: t('pin'),
-    },
-    ...Object.keys(customSessionGroup).map((key) => ({
-      children: <SessionList dataSource={customSessionGroup[key]} />,
-      key,
-      label: key,
-    })),
-    {
-      children: <SessionList dataSource={unpinnedSessionList} />,
-      key: 'defaultList',
-      label: t('defaultList'),
-    },
-  ].filter(Boolean) as CollapseProps['items'];
+
+  const items = useMemo(
+    () =>
+      [
+        sessionList.pinnedList?.length > 0 && {
+          children: <SessionList dataSource={sessionList.pinnedList} />,
+          key: 'pinned',
+          label: t('pin'),
+        },
+        ...sessionCustomGroups.map(({ id, name }) => ({
+          children: sessionList.customList[id] && (
+            <SessionList dataSource={sessionList.customList[id]} />
+          ),
+          extra: (
+            <Actions
+              id={id}
+              onOpenChange={(isOpen) => {
+                if (isOpen) setActiveGroupId(id);
+              }}
+              openConfigModal={() => setConfigGroupModalOpen(true)}
+              openRenameModal={() => setRenameGroupModalOpen(true)}
+            />
+          ),
+          key: id,
+          label: name,
+        })),
+        {
+          children: <SessionList dataSource={sessionList.defaultList} />,
+          key: 'defaultList',
+          label: t('defaultList'),
+        },
+      ].filter(Boolean) as CollapseProps['items'],
+    [sessionCustomGroups, sessionList],
+  );
 
   return (
     <>
@@ -56,10 +75,20 @@ const SessionListContent = memo(() => {
         items={items}
         onChange={(keys) => {
           const sessionGroupKeys = typeof keys === 'string' ? [keys] : keys;
-
           updatePreference({ sessionGroupKeys });
         }}
       />
+      {activeGroupId && (
+        <RenameGroupModal
+          id={activeGroupId}
+          onCancel={() => setRenameGroupModalOpen(false)}
+          open={renameGroupModalOpen}
+        />
+      )}
+      <ConfigGroupModal
+        onCancel={() => setConfigGroupModalOpen(false)}
+        open={configGroupModalOpen}
+      />
     </>
   );
 });
diff --git a/src/app/chat/features/SessionListContent/List/Item/Actions.tsx b/src/app/chat/features/SessionListContent/List/Item/Actions.tsx
index 005e570c88e1..945807c73a55 100644
--- a/src/app/chat/features/SessionListContent/List/Item/Actions.tsx
+++ b/src/app/chat/features/SessionListContent/List/Item/Actions.tsx
@@ -3,9 +3,11 @@ import { App, Dropdown, type MenuProps } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import {
-  ArrowLeftRight,
+  Check,
   HardDriveDownload,
+  ListTree,
   LucideCopy,
+  LucidePlus,
   MoreVertical,
   Pin,
   PinOff,
@@ -15,10 +17,12 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { configService } from '@/services/config';
+import { useGlobalStore } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
 import { sessionSelectors } from '@/store/session/selectors';
-import { SessionGroupDefaultKeys } from '@/types/session';
+import { SessionDefaultGroup } from '@/types/session';
 
 const useStyles = createStyles(({ css }) => ({
   modalRoot: css`
@@ -29,16 +33,16 @@ const useStyles = createStyles(({ css }) => ({
 interface ActionProps {
   group: string | undefined;
   id: string;
-  setIsModalOpen: (open: boolean) => void;
+  openCreateGroupModal: () => void;
   setOpen: (open: boolean) => void;
 }
 
-const Actions = memo<ActionProps>(({ group, id, setIsModalOpen, setOpen }) => {
-  const { t } = useTranslation('common');
+const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, setOpen }) => {
+  const { t } = useTranslation('chat');
 
   const { styles } = useStyles();
 
-  const customSessionGroup = useSessionStore(sessionSelectors.customSessionGroup, isEqual);
+  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
   const [pin, removeSession, pinSession, duplicateSession, updateSessionGroup] = useSessionStore(
     (s) => {
       const session = sessionSelectors.getSessionById(id)(s);
@@ -54,8 +58,8 @@ const Actions = memo<ActionProps>(({ group, id, setIsModalOpen, setOpen }) => {
 
   const { modal } = App.useApp();
 
-  const isDefault = group === SessionGroupDefaultKeys.Default;
-  const hasDivider = !isDefault || Object.keys(customSessionGroup).length > 0;
+  const isDefault = group === SessionDefaultGroup.Default;
+  // const hasDivider = !isDefault || Object.keys(sessionByGroup).length > 0;
 
   const items: MenuProps['items'] = useMemo(
     () => [
@@ -67,52 +71,69 @@ const Actions = memo<ActionProps>(({ group, id, setIsModalOpen, setOpen }) => {
           pinSession(id, !pin);
         },
       },
+      {
+        icon: <Icon icon={LucideCopy} />,
+        key: 'duplicate',
+        label: t('duplicate', { ns: 'common' }),
+        onClick: ({ domEvent }) => {
+          domEvent.stopPropagation();
+
+          duplicateSession(id);
+        },
+      },
+      {
+        type: 'divider',
+      },
       {
         children: [
+          ...sessionCustomGroups.map(({ id: groupId, name }) => ({
+            icon: group === groupId ? <Icon icon={Check} /> : <div />,
+            key: groupId,
+            label: name,
+            onClick: () => {
+              updateSessionGroup(id, groupId);
+            },
+          })),
           {
-            key: 'newGroup',
-            label: <div>{t('group.newGroup')}</div>,
-            onClick: ({ domEvent }) => {
-              domEvent.stopPropagation();
-              setIsModalOpen(true);
+            icon: isDefault ? <Icon icon={Check} /> : <div />,
+            key: 'defaultList',
+            label: t('defaultList'),
+            onClick: () => {
+              updateSessionGroup(id, SessionDefaultGroup.Default);
             },
           },
-          hasDivider && {
+          {
             type: 'divider',
           },
-          !isDefault && {
-            key: 'defaultList',
-            label: <div>{t('defaultList')}</div>,
-            onClick: () => {
-              updateSessionGroup(id, SessionGroupDefaultKeys.Default);
+          {
+            icon: <Icon icon={LucidePlus} />,
+            key: 'createGroup',
+            label: <div>{t('sessionGroup.createGroup')}</div>,
+            onClick: ({ domEvent }) => {
+              domEvent.stopPropagation();
+              openCreateGroupModal();
             },
           },
-          ...Object.keys(customSessionGroup)
-            .filter((key) => key !== group)
-            .map((key) => ({
-              key,
-              label: <div>{key}</div>,
-              onClick: () => {
-                updateSessionGroup(id, key);
-              },
-            })),
         ],
-        icon: <Icon icon={ArrowLeftRight} />,
+        icon: <Icon icon={ListTree} />,
         key: 'moveGroup',
-        label: t('group.moveGroup'),
+        label: t('sessionGroup.moveGroup'),
+      },
+      {
+        type: 'divider',
       },
       {
         children: [
           {
             key: 'agent',
-            label: <div>{t('exportType.agent')}</div>,
+            label: t('exportType.agent', { ns: 'common' }),
             onClick: () => {
               configService.exportSingleAgent(id);
             },
           },
           {
             key: 'agentWithMessage',
-            label: <div>{t('exportType.agentWithMessage')}</div>,
+            label: t('exportType.agentWithMessage', { ns: 'common' }),
             onClick: () => {
               configService.exportSingleSession(id);
             },
@@ -120,32 +141,15 @@ const Actions = memo<ActionProps>(({ group, id, setIsModalOpen, setOpen }) => {
         ],
         icon: <Icon icon={HardDriveDownload} />,
         key: 'export',
-        label: t('export'),
-      },
-      {
-        type: 'divider',
-      },
-      {
-        icon: <Icon icon={LucideCopy} />,
-        key: 'duplicate',
-        label: t('duplicate'),
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-
-          duplicateSession(id);
-        },
-      },
-      {
-        type: 'divider',
+        label: t('export', { ns: 'common' }),
       },
       {
         danger: true,
         icon: <Icon icon={Trash} />,
         key: 'delete',
-        label: t('delete'),
+        label: t('delete', { ns: 'common' }),
         onClick: ({ domEvent }) => {
           domEvent.stopPropagation();
-
           modal.confirm({
             centered: true,
             okButtonProps: { danger: true },
diff --git a/src/app/chat/features/SessionListContent/List/Item/CreateGroupModal.tsx b/src/app/chat/features/SessionListContent/List/Item/CreateGroupModal.tsx
deleted file mode 100644
index 0bb1eadd1ec6..000000000000
--- a/src/app/chat/features/SessionListContent/List/Item/CreateGroupModal.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Input, Modal, type ModalProps } from '@lobehub/ui';
-import { message } from 'antd';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-type CreateGroupModalProps = ModalProps & {
-  onInputOk: (input: string) => void;
-};
-
-const CreateGroupModal = ({ open, onCancel, onInputOk }: CreateGroupModalProps) => {
-  const { t } = useTranslation('common');
-
-  const [input, setInput] = useState('');
-  const [messageApi, contextHolder] = message.useMessage();
-
-  const handleClickOk = (input: string) => {
-    if (input.length === 0 || input.length > 10) {
-      messageApi.warning(t('group.inputMsg'));
-      return;
-    }
-    onInputOk(input);
-  };
-
-  return (
-    <div onClick={(e) => e.stopPropagation()}>
-      <Modal
-        allowFullscreen
-        onCancel={onCancel}
-        onOk={() => handleClickOk(input)}
-        open={open}
-        title={t('group.newGroup')}
-        width={400}
-      >
-        <Input
-          onChange={(e) => setInput(e.target.value)}
-          placeholder={t('group.inputPlaceholder')}
-          value={input}
-        />
-      </Modal>
-      {contextHolder}
-    </div>
-  );
-};
-
-export default CreateGroupModal;
diff --git a/src/app/chat/features/SessionListContent/List/Item/index.tsx b/src/app/chat/features/SessionListContent/List/Item/index.tsx
index 1dac61d92aee..f44103a28a03 100644
--- a/src/app/chat/features/SessionListContent/List/Item/index.tsx
+++ b/src/app/chat/features/SessionListContent/List/Item/index.tsx
@@ -12,8 +12,8 @@ import { sessionHelpers } from '@/store/session/helpers';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
 import ListItem from '../../ListItem';
+import CreateGroupModal from '../../Modals/CreateGroupModal';
 import Actions from './Actions';
-import CreateGroupModal from './CreateGroupModal';
 
 interface SessionItemProps {
   id: string;
@@ -21,47 +21,43 @@ interface SessionItemProps {
 
 const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [open, setOpen] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [createGroupModalOpen, setCreateGroupModalOpen] = useState(false);
 
   const [defaultModel] = useGlobalStore((s) => [settingsSelectors.defaultAgentConfig(s).model]);
   const [active] = useSessionStore((s) => [s.activeId === id]);
   const [loading] = useChatStore((s) => [!!s.chatLoadingId && id === s.activeId]);
 
-  const [
-    pin,
-    title,
-    description,
-    systemRole,
-    avatar,
-    avatarBackground,
-    updateAt,
-    model,
-    group,
-    updateSessionGroup,
-  ] = useSessionStore((s) => {
-    const session = sessionSelectors.getSessionById(id)(s);
-    const meta = session.meta;
-    const systemRole = session.config.systemRole;
+  const [pin, title, description, systemRole, avatar, avatarBackground, updateAt, model, group] =
+    useSessionStore((s) => {
+      const session = sessionSelectors.getSessionById(id)(s);
+      const meta = session.meta;
+      const systemRole = session.config.systemRole;
 
-    return [
-      sessionHelpers.getSessionPinned(session),
-      agentSelectors.getTitle(meta),
-      agentSelectors.getDescription(meta),
-      systemRole,
-      agentSelectors.getAvatar(meta),
-      meta.backgroundColor,
-      session?.updatedAt,
-      session.config.model,
-      session?.group,
-      s.updateSessionGroup,
-    ];
-  });
+      return [
+        sessionHelpers.getSessionPinned(session),
+        agentSelectors.getTitle(meta),
+        agentSelectors.getDescription(meta),
+        systemRole,
+        agentSelectors.getAvatar(meta),
+        meta.backgroundColor,
+        session?.updatedAt,
+        session.config.model,
+        session?.group,
+      ];
+    });
 
   const showModel = model !== defaultModel;
 
   const actions = useMemo(
-    () => <Actions group={group} id={id} setIsModalOpen={setIsModalOpen} setOpen={setOpen} />,
-    [id],
+    () => (
+      <Actions
+        group={group}
+        id={id}
+        openCreateGroupModal={() => setCreateGroupModalOpen(true)}
+        setOpen={setOpen}
+      />
+    ),
+    [group, id],
   );
 
   const addon = useMemo(
@@ -90,10 +86,10 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
         title={title}
       />
       <CreateGroupModal
-        onCancel={() => setIsModalOpen(false)}
-        onInputOk={(input) => updateSessionGroup(id, input)}
-        open={isModalOpen}
-      ></CreateGroupModal>
+        id={id}
+        onCancel={() => setCreateGroupModalOpen(false)}
+        open={createGroupModalOpen}
+      />
     </>
   );
 }, shallow);
diff --git a/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx b/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx
new file mode 100644
index 000000000000..570a53061325
--- /dev/null
+++ b/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx
@@ -0,0 +1,88 @@
+import { ActionIcon, EditableText, SortableList } from '@lobehub/ui';
+import { Popconfirm, message } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { PencilLine, Trash } from 'lucide-react';
+import { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { groupHelpers } from '@/store/global/helpers';
+import { settingsSelectors } from '@/store/global/selectors';
+import { SessionGroupItem } from '@/types/session';
+
+const useStyles = createStyles(({ css }) => ({
+  content: css`
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+  `,
+  title: css`
+    flex: 1;
+    height: 28px;
+    line-height: 28px;
+    text-align: start;
+  `,
+}));
+
+const GroupItem = memo<SessionGroupItem>(({ id, name }) => {
+  const [editing, setEditing] = useState(false);
+  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
+  const updateCustomGroup = useGlobalStore((s) => s.updateCustomGroup);
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+
+  const handleRename = useCallback(
+    (input: string) => {
+      if (!input) return;
+      if (input.length === 0 || input.length > 20)
+        return message.warning(t('sessionGroup.tooLong'));
+      updateCustomGroup(groupHelpers.renameGroup(id, input, sessionCustomGroups));
+      message.success(t('sessionGroup.renameSuccess'));
+    },
+    [id, sessionCustomGroups],
+  );
+
+  return (
+    <>
+      <SortableList.DragHandle />
+      {!editing ? (
+        <>
+          <span className={styles.title}>{name}</span>
+          <ActionIcon icon={PencilLine} onClick={() => setEditing(true)} size={'small'} />
+          <Popconfirm
+            arrow={false}
+            okButtonProps={{
+              danger: true,
+              type: 'primary',
+            }}
+            onConfirm={() => {
+              updateCustomGroup(groupHelpers.removeGroup(id, sessionCustomGroups));
+            }}
+            title={t('sessionGroup.confirmRemoveGroupAlert')}
+          >
+            <ActionIcon icon={Trash} size={'small'} />
+          </Popconfirm>
+        </>
+      ) : (
+        <EditableText
+          editing={editing}
+          onChangeEnd={(v) => {
+            if (name !== v) handleRename(v);
+            setEditing(false);
+          }}
+          onEditingChange={(e) => setEditing(e)}
+          showEditIcon={false}
+          size={'small'}
+          style={{
+            height: 28,
+          }}
+          type={'pure'}
+          value={name}
+        />
+      )}
+    </>
+  );
+});
+
+export default GroupItem;
diff --git a/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/index.tsx b/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/index.tsx
new file mode 100644
index 000000000000..156f6681302d
--- /dev/null
+++ b/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/index.tsx
@@ -0,0 +1,77 @@
+import { Icon, Modal, type ModalProps, SortableList } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { Plus } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useGlobalStore } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
+import { SessionGroupItem } from '@/types/session';
+
+import GroupItem from './GroupItem';
+
+const useStyles = createStyles(({ css, token, stylish }) => ({
+  container: css`
+    height: 36px;
+    padding-inline: 8px;
+    border-radius: ${token.borderRadius}px;
+    transition: background 0.2s ease-in-out;
+
+    &:hover {
+      ${stylish.blur};
+      background: ${token.colorFillTertiary};
+    }
+  `,
+}));
+
+const ConfigGroupModal = memo<ModalProps>(({ open, onCancel }) => {
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
+  const [addCustomGroup, updateCustomGroup] = useGlobalStore((s) => [
+    s.addCustomGroup,
+    s.updateCustomGroup,
+  ]);
+
+  return (
+    <Modal
+      allowFullscreen
+      footer={null}
+      onCancel={onCancel}
+      open={open}
+      title={t('sessionGroup.config')}
+      width={400}
+    >
+      <Flexbox>
+        <SortableList
+          items={sessionCustomGroups}
+          onChange={(item: SessionGroupItem[]) => updateCustomGroup(item)}
+          renderItem={(item: SessionGroupItem) => (
+            <SortableList.Item
+              align={'center'}
+              className={styles.container}
+              gap={4}
+              horizontal
+              id={item.id}
+              justify={'space-between'}
+            >
+              <GroupItem {...item} />
+            </SortableList.Item>
+          )}
+        />
+        <Button
+          block
+          icon={<Icon icon={Plus} />}
+          onClick={() => addCustomGroup(t('sessionGroup.newGroup'))}
+        >
+          {t('sessionGroup.createGroup')}
+        </Button>
+      </Flexbox>
+    </Modal>
+  );
+});
+
+export default ConfigGroupModal;
diff --git a/src/app/chat/features/SessionListContent/Modals/CreateGroupModal.tsx b/src/app/chat/features/SessionListContent/Modals/CreateGroupModal.tsx
new file mode 100644
index 000000000000..36965df9a3bc
--- /dev/null
+++ b/src/app/chat/features/SessionListContent/Modals/CreateGroupModal.tsx
@@ -0,0 +1,59 @@
+import { Input, Modal, type ModalProps } from '@lobehub/ui';
+import { message } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
+import { useSessionStore } from '@/store/session';
+
+interface CreateGroupModalProps extends ModalProps {
+  id: string;
+}
+
+const CreateGroupModal = memo<CreateGroupModalProps>(
+  ({ id, open, onCancel }: CreateGroupModalProps) => {
+    const { t } = useTranslation('chat');
+    const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
+    const addCustomGroup = useGlobalStore((s) => s.addCustomGroup);
+    const updateSessionGroup = useSessionStore((s) => s.updateSessionGroup);
+    const [input, setInput] = useState('');
+
+    const handleSubmit = useCallback(
+      (e: any) => {
+        if (!input) return;
+        if (input.length === 0 || input.length > 20)
+          return message.warning(t('sessionGroup.tooLong'));
+
+        const groupId = addCustomGroup(input);
+        updateSessionGroup(id, groupId);
+        message.success(t('sessionGroup.createSuccess'));
+        onCancel?.(e);
+      },
+      [id, input, sessionCustomGroups],
+    );
+
+    return (
+      <div onClick={(e) => e.stopPropagation()}>
+        <Modal
+          allowFullscreen
+          onCancel={onCancel}
+          onOk={handleSubmit}
+          open={open}
+          title={t('sessionGroup.createGroup')}
+          width={400}
+        >
+          <Input
+            autoFocus
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={t('sessionGroup.inputPlaceholder')}
+            value={input}
+          />
+        </Modal>
+      </div>
+    );
+  },
+);
+
+export default CreateGroupModal;
diff --git a/src/app/chat/features/SessionListContent/Modals/RenameGroupModal.tsx b/src/app/chat/features/SessionListContent/Modals/RenameGroupModal.tsx
new file mode 100644
index 000000000000..aa4d316629b9
--- /dev/null
+++ b/src/app/chat/features/SessionListContent/Modals/RenameGroupModal.tsx
@@ -0,0 +1,54 @@
+import { Input, Modal, type ModalProps } from '@lobehub/ui';
+import { message } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { groupHelpers } from '@/store/global/helpers';
+import { settingsSelectors } from '@/store/global/selectors';
+
+interface RenameGroupModalProps extends ModalProps {
+  id: string;
+}
+
+const RenameGroupModal = memo<RenameGroupModalProps>(({ id, open, onCancel }) => {
+  const { t } = useTranslation('chat');
+  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
+  const updateCustomGroup = useGlobalStore((s) => s.updateCustomGroup);
+  const group = groupHelpers.getGroupById(id, sessionCustomGroups);
+  const [input, setInput] = useState<string>();
+
+  const handleSubmit = useCallback(
+    (e: any) => {
+      if (!input) return;
+      if (input.length === 0 || input.length > 20)
+        return message.warning(t('sessionGroup.tooLong'));
+      updateCustomGroup(groupHelpers.renameGroup(id, input, sessionCustomGroups));
+      message.success(t('sessionGroup.renameSuccess'));
+      onCancel?.(e);
+    },
+    [id, input, sessionCustomGroups],
+  );
+
+  return (
+    <Modal
+      allowFullscreen
+      onCancel={onCancel}
+      onOk={handleSubmit}
+      open={open}
+      title={t('sessionGroup.rename')}
+      width={400}
+    >
+      <Input
+        autoFocus
+        defaultValue={group?.name}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder={t('sessionGroup.inputPlaceholder')}
+        value={input}
+      />
+    </Modal>
+  );
+});
+
+export default RenameGroupModal;
diff --git a/src/const/settings.ts b/src/const/settings.ts
index 82fdde3b62ff..d8e691eb2cd1 100644
--- a/src/const/settings.ts
+++ b/src/const/settings.ts
@@ -15,6 +15,7 @@ export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
   fontSize: 14,
   language: 'auto',
   password: '',
+  sessionCustomGroups: [],
   themeMode: 'auto',
 };
 
diff --git a/src/database/models/__tests__/session.test.ts b/src/database/models/__tests__/session.test.ts
index 5772c31257d6..65dabdecc451 100644
--- a/src/database/models/__tests__/session.test.ts
+++ b/src/database/models/__tests__/session.test.ts
@@ -3,7 +3,7 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { CreateMessageParams, MessageModel } from '@/database/models/message';
 import { TopicModel } from '@/database/models/topic';
-import { LobeAgentSession, LobeSessionType, SessionGroupKey } from '@/types/session';
+import { LobeAgentSession, LobeSessionType, SessionGroupId } from '@/types/session';
 
 import { SessionModel } from '../session';
 
@@ -60,7 +60,7 @@ describe('SessionModel', () => {
 
   it('should query sessions by group', async () => {
     // Create multiple sessions to test the queryByGroup method
-    const group: SessionGroupKey = 'testGroup';
+    const group: SessionGroupId = 'testGroup';
     await SessionModel.batchCreate([sessionData, sessionData] as LobeAgentSession[]);
 
     const sessionsByGroup = await SessionModel.queryByGroup(group);
diff --git a/src/database/models/session.ts b/src/database/models/session.ts
index ac0314a54536..f90f08baf9f6 100644
--- a/src/database/models/session.ts
+++ b/src/database/models/session.ts
@@ -5,7 +5,7 @@ import { BaseModel } from '@/database/core';
 import { DBModel } from '@/database/core/types/db';
 import { DB_Session, DB_SessionSchema } from '@/database/schemas/session';
 import { LobeAgentConfig } from '@/types/agent';
-import { LobeAgentSession, LobeSessions, SessionGroupKey } from '@/types/session';
+import { LobeAgentSession, LobeSessions, SessionGroupId } from '@/types/session';
 import { merge } from '@/utils/merge';
 import { uuid } from '@/utils/uuid';
 
@@ -36,7 +36,7 @@ class _SessionModel extends BaseModel {
    * get sessions by group
    * @param group
    */
-  async queryByGroup(group: SessionGroupKey) {
+  async queryByGroup(group: SessionGroupId) {
     return this.table.where('group').equals(group).toArray();
   }
 
diff --git a/src/features/ChatInput/ActionBar/Clear.tsx b/src/features/ChatInput/ActionBar/Clear.tsx
index 28f61d11e742..e0a9817d415d 100644
--- a/src/features/ChatInput/ActionBar/Clear.tsx
+++ b/src/features/ChatInput/ActionBar/Clear.tsx
@@ -22,7 +22,8 @@ const Clear = memo(() => {
 
   return (
     <Popconfirm
-      okButtonProps={{ danger: true }}
+      arrow={false}
+      okButtonProps={{ danger: true, type: 'primary' }}
       onConfirm={() => {
         resetConversation();
       }}
diff --git a/src/features/Conversation/Actions/Assistant.tsx b/src/features/Conversation/Actions/Assistant.tsx
index f14f57d3b267..8fe7f75bbfab 100644
--- a/src/features/Conversation/Actions/Assistant.tsx
+++ b/src/features/Conversation/Actions/Assistant.tsx
@@ -19,11 +19,11 @@ export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, erro
       dropdownMenu={[
         edit,
         copy,
-        regenerate,
         divider,
         tts,
         translate,
         divider,
+        regenerate,
         delAndRegenerate,
         del,
       ]}
diff --git a/src/features/Conversation/Actions/Function.tsx b/src/features/Conversation/Actions/Function.tsx
index fac4d0c24583..c33e5446f6e3 100644
--- a/src/features/Conversation/Actions/Function.tsx
+++ b/src/features/Conversation/Actions/Function.tsx
@@ -5,10 +5,10 @@ import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { RenderAction } from '../types';
 
 export const FunctionActionsBar: RenderAction = memo(({ onActionClick }) => {
-  const { regenerate, divider, delAndRegenerate, del } = useChatListActionsBar();
+  const { regenerate, delAndRegenerate, del } = useChatListActionsBar();
   return (
     <ActionIconGroup
-      dropdownMenu={[regenerate, divider, delAndRegenerate, del]}
+      dropdownMenu={[regenerate, delAndRegenerate, del]}
       items={[regenerate]}
       onActionClick={onActionClick}
       type="ghost"
diff --git a/src/features/Conversation/Actions/User.tsx b/src/features/Conversation/Actions/User.tsx
index fb1e31b1b154..f33213e274aa 100644
--- a/src/features/Conversation/Actions/User.tsx
+++ b/src/features/Conversation/Actions/User.tsx
@@ -11,7 +11,7 @@ export const UserActionsBar: RenderAction = memo(({ onActionClick }) => {
 
   return (
     <ActionIconGroup
-      dropdownMenu={[edit, copy, regenerate, divider, tts, translate, divider, del]}
+      dropdownMenu={[edit, copy, divider, tts, translate, divider, regenerate, del]}
       items={[regenerate, edit]}
       onActionClick={onActionClick}
       type="ghost"
diff --git a/src/features/Conversation/hooks/useChatListActionsBar.tsx b/src/features/Conversation/hooks/useChatListActionsBar.tsx
index e26fbf1d952f..9036389faa58 100644
--- a/src/features/Conversation/hooks/useChatListActionsBar.tsx
+++ b/src/features/Conversation/hooks/useChatListActionsBar.tsx
@@ -1,5 +1,5 @@
 import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
-import { Copy, Edit, RotateCw, Trash } from 'lucide-react';
+import { Copy, Edit, ListRestart, RotateCcw, Trash } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -29,7 +29,7 @@ export const useChatListActionsBar = (): ChatListActionsBar => {
         label: t('delete', { defaultValue: 'Delete' }),
       },
       delAndRegenerate: {
-        icon: RotateCw,
+        icon: ListRestart,
         key: 'delAndRegenerate',
         label: t('messageAction.delAndRegenerate', {
           defaultValue: 'Delete and regenerate',
@@ -45,7 +45,7 @@ export const useChatListActionsBar = (): ChatListActionsBar => {
         label: t('edit', { defaultValue: 'Edit' }),
       },
       regenerate: {
-        icon: RotateCw,
+        icon: RotateCcw,
         key: 'regenerate',
         label: t('regenerate', { defaultValue: 'Regenerate' }),
       },
diff --git a/src/features/PluginDevModal/index.tsx b/src/features/PluginDevModal/index.tsx
index a2ef396f360d..329b44a9b5e9 100644
--- a/src/features/PluginDevModal/index.tsx
+++ b/src/features/PluginDevModal/index.tsx
@@ -41,10 +41,13 @@ const DevModal = memo<DevModalProps>(
       <Flexbox flex={1} gap={12} horizontal justify={'flex-end'}>
         {isEditMode ? (
           <Popconfirm
+            arrow={false}
+            cancelText={t('cancel', { ns: 'common' })}
             okButtonProps={{
               danger: true,
               type: 'primary',
             }}
+            okText={t('ok', { ns: 'common' })}
             onConfirm={() => {
               onDelete?.();
               message.success(t('dev.deleteSuccess'));
diff --git a/src/features/PluginStore/PluginItem/Action.tsx b/src/features/PluginStore/PluginItem/Action.tsx
index 5e8793ca9c18..8cf8f71ffccd 100644
--- a/src/features/PluginStore/PluginItem/Action.tsx
+++ b/src/features/PluginStore/PluginItem/Action.tsx
@@ -69,7 +69,9 @@ const Actions = memo<ActionsProps>(({ identifier, type }) => {
                     label: (
                       <Popconfirm
                         arrow={false}
+                        cancelText={t('cancel', { ns: 'common' })}
                         okButtonProps={{ danger: true }}
+                        okText={t('ok', { ns: 'common' })}
                         onConfirm={() => {
                           unInstallPlugin(identifier);
                         }}
diff --git a/src/locales/default/chat.ts b/src/locales/default/chat.ts
index 1388ad8d2c3c..cb3379cae56f 100644
--- a/src/locales/default/chat.ts
+++ b/src/locales/default/chat.ts
@@ -37,7 +37,18 @@ export default {
   roleAndArchive: '角色与记录',
   searchAgentPlaceholder: '搜索助手和对话...',
   sendPlaceholder: '输入聊天内容...',
-  sessionList: '助手列表',
+  sessionGroup: {
+    config: '分组管理',
+    confirmRemoveGroupAlert: '即将删除该分组，删除后该分组的助手将移动到默认列表，请确认你的操作',
+    createGroup: '添加新分组',
+    createSuccess: '创建成功',
+    inputPlaceholder: '请输入分组名称...',
+    moveGroup: '移动到分组',
+    newGroup: '新分组',
+    rename: '重命名分组',
+    renameSuccess: '重命名成功',
+    tooLong: '分组名称长度需在 1-20 之内',
+  },
   shareModal: {
     download: '下载截图',
     imageType: '图片格式',
diff --git a/src/locales/default/common.ts b/src/locales/default/common.ts
index 858a474df13d..cadde0f0ff4a 100644
--- a/src/locales/default/common.ts
+++ b/src/locales/default/common.ts
@@ -16,7 +16,6 @@ export default {
   copyFail: '复制失败',
   copySuccess: '复制成功',
   defaultAgent: '自定义助手',
-  defaultList: '默认列表',
   defaultSession: '自定义助手',
   delete: '删除',
   duplicate: '创建副本',
@@ -31,12 +30,6 @@ export default {
     globalSetting: '导出全局设置',
   },
   feedback: '反馈与建议',
-  group: {
-    inputMsg: '组名长度需在1-10之内',
-    inputPlaceholder: '新建分组/移入指定分组',
-    moveGroup: '移入分组',
-    newGroup: '新建分组',
-  },
   historyRange: '历史范围',
   import: '导入配置',
   importModal: {
diff --git a/src/services/session.ts b/src/services/session.ts
index 334febcae956..ae0f4a9c2b92 100644
--- a/src/services/session.ts
+++ b/src/services/session.ts
@@ -3,7 +3,7 @@ import { DeepPartial } from 'utility-types';
 import { SessionModel } from '@/database/models/session';
 import { LobeAgentConfig } from '@/types/agent';
 import { MetaData } from '@/types/meta';
-import { LobeAgentSession, LobeSessionType, LobeSessions, SessionGroupKey } from '@/types/session';
+import { LobeAgentSession, LobeSessionType, LobeSessions, SessionGroupId } from '@/types/session';
 
 class SessionService {
   async createNewSession(
@@ -38,7 +38,7 @@ class SessionService {
     return SessionModel.clearTable();
   }
 
-  async updateSessionGroup(id: string, group: SessionGroupKey) {
+  async updateSessionGroup(id: string, group: SessionGroupId) {
     return SessionModel.update(id, { group });
   }
 
diff --git a/src/store/global/helpers.ts b/src/store/global/helpers.ts
index f2b8ced737c6..cc88a6575d0d 100644
--- a/src/store/global/helpers.ts
+++ b/src/store/global/helpers.ts
@@ -6,3 +6,5 @@ const getCurrentLanguage = () => settingsSelectors.currentLanguage(useGlobalStor
 export const globalHelpers = {
   getCurrentLanguage,
 };
+
+export * from './slices/settings/helpers';
diff --git a/src/store/global/slices/common/action.ts b/src/store/global/slices/common/action.ts
index 729a51db432b..7341eb8c1ee5 100644
--- a/src/store/global/slices/common/action.ts
+++ b/src/store/global/slices/common/action.ts
@@ -11,6 +11,7 @@ import type { GlobalStore } from '@/store/global';
 import type { GlobalServerConfig } from '@/types/settings';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
+import { nanoid } from '@/utils/uuid';
 
 import type { GlobalCommonState, GlobalPreference, Guide, SidebarTabKey } from './initialState';
 
@@ -20,6 +21,7 @@ const n = setNamespace('settings');
  * 设置操作
  */
 export interface CommonAction {
+  addCustomGroup: (name: string) => string;
   switchBackToChat: (sessionId?: string) => void;
   /**
    * 切换侧边栏选项
@@ -41,6 +43,21 @@ export const createCommonSlice: StateCreator<
   [],
   CommonAction
 > = (set, get) => ({
+  addCustomGroup: (name) => {
+    const sessionCustomGroups = get().preference.sessionCustomGroups || [];
+
+    const groupId = nanoid();
+    const sessionGroupKeys = get().preference.sessionGroupKeys || [];
+    get().updatePreference(
+      {
+        sessionCustomGroups: [...sessionCustomGroups, { id: groupId, name }],
+        sessionGroupKeys: [...sessionGroupKeys, groupId],
+      },
+      'addCustomGroup',
+    );
+
+    return groupId;
+  },
   switchBackToChat: (sessionId) => {
     get().router?.push(SESSION_CHAT_URL(sessionId || INBOX_SESSION_ID, get().isMobile));
   },
diff --git a/src/store/global/slices/common/initialState.ts b/src/store/global/slices/common/initialState.ts
index 304cff84bfd6..786b481dffb9 100644
--- a/src/store/global/slices/common/initialState.ts
+++ b/src/store/global/slices/common/initialState.ts
@@ -1,5 +1,7 @@
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 
+import { SessionDefaultGroup, SessionGroupId, SessionGroupItem } from '@/types/session';
+
 export enum SidebarTabKey {
   Chat = 'chat',
   Market = 'market',
@@ -22,8 +24,10 @@ export interface GlobalPreference {
   guide?: Guide;
   inputHeight: number;
   mobileShowTopic?: boolean;
-  sessionGroupKeys: string[];
+  sessionCustomGroups: SessionGroupItem[];
+  sessionGroupKeys: SessionGroupId[];
   sessionsWidth: number;
+
   showChatSideBar?: boolean;
   showSessionPanel?: boolean;
   showSystemRole?: boolean;
@@ -53,7 +57,8 @@ export const initialCommonState: GlobalCommonState = {
     guide: {},
     inputHeight: 200,
     mobileShowTopic: false,
-    sessionGroupKeys: ['pinned', 'sessionList'],
+    sessionCustomGroups: [],
+    sessionGroupKeys: [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default],
     sessionsWidth: 320,
     showChatSideBar: true,
     showSessionPanel: true,
diff --git a/src/store/global/slices/settings/__snapshots__/selectors.test.ts.snap b/src/store/global/slices/settings/__snapshots__/selectors.test.ts.snap
index 5c50b28de2f0..0b2af124d5ad 100644
--- a/src/store/global/slices/settings/__snapshots__/selectors.test.ts.snap
+++ b/src/store/global/slices/settings/__snapshots__/selectors.test.ts.snap
@@ -145,6 +145,12 @@ exports[`settingsSelectors > currentSettings > should merge DEFAULT_SETTINGS and
   "neutralColor": "sand",
   "password": "password123",
   "primaryColor": "blue",
+  "sessionCustomGroups": [
+    {
+      "id": "group-1",
+      "name": "Group 1",
+    },
+  ],
   "themeMode": "light",
   "tool": {
     "dalle": {
@@ -161,3 +167,95 @@ exports[`settingsSelectors > currentSettings > should merge DEFAULT_SETTINGS and
   },
 }
 `;
+
+exports[`settingsSelectors > currentTTS > should merge DEFAULT_TTS_CONFIG and s.settings.tts correctly 1`] = `
+{
+  "openAI": {
+    "sttModel": "whisper-2",
+    "ttsModel": "tts-1",
+  },
+  "sttAutoStop": false,
+  "sttServer": "openai",
+}
+`;
+
+exports[`settingsSelectors > dalleConfig > should return the dalle configuration 1`] = `
+{
+  "apiKey": "dalle-api-key",
+  "autoGenerate": true,
+}
+`;
+
+exports[`settingsSelectors > defaultAgent > should merge DEFAULT_AGENT and s.settings.defaultAgent correctly 1`] = `
+{
+  "config": {
+    "autoCreateTopicThreshold": 2,
+    "displayMode": "chat",
+    "enableAutoCreateTopic": true,
+    "historyCount": 1,
+    "model": "gpt-3.5-turbo",
+    "params": {
+      "frequency_penalty": 0,
+      "presence_penalty": 0,
+      "temperature": 0.6,
+      "top_p": 1,
+    },
+    "plugins": [],
+    "systemRole": "user",
+    "tts": {
+      "showAllLocaleVoice": false,
+      "sttLocale": "auto",
+      "ttsService": "openai",
+      "voice": {
+        "openai": "alloy",
+      },
+    },
+  },
+  "meta": {
+    "avatar": "agent-avatar.jpg",
+    "description": "Test agent",
+  },
+}
+`;
+
+exports[`settingsSelectors > defaultAgentConfig > should merge DEFAULT_AGENT_CONFIG and defaultAgent(s).config correctly 1`] = `
+{
+  "autoCreateTopicThreshold": 2,
+  "displayMode": "chat",
+  "enableAutoCreateTopic": true,
+  "historyCount": 1,
+  "model": "gpt-3.5-turbo",
+  "params": {
+    "frequency_penalty": 0,
+    "presence_penalty": 0,
+    "temperature": 0.7,
+    "top_p": 1,
+  },
+  "plugins": [],
+  "systemRole": "user",
+  "tts": {
+    "showAllLocaleVoice": false,
+    "sttLocale": "auto",
+    "ttsService": "openai",
+    "voice": {
+      "openai": "alloy",
+    },
+  },
+}
+`;
+
+exports[`settingsSelectors > defaultAgentMeta > should merge DEFAULT_AGENT_META and defaultAgent(s).meta correctly 1`] = `
+{
+  "avatar": "agent-avatar.jpg",
+  "description": "Test agent",
+}
+`;
+
+exports[`settingsSelectors > sessionCustomGroups > should return session custom groups 1`] = `
+[
+  {
+    "id": "group-1",
+    "name": "Group 1",
+  },
+]
+`;
diff --git a/src/store/global/slices/settings/action.ts b/src/store/global/slices/settings/action.ts
index bf2d5ed011f1..94eb15296867 100644
--- a/src/store/global/slices/settings/action.ts
+++ b/src/store/global/slices/settings/action.ts
@@ -7,10 +7,11 @@ import type { StateCreator } from 'zustand/vanilla';
 import { DEFAULT_AGENT, DEFAULT_SETTINGS } from '@/const/settings';
 import type { GlobalStore } from '@/store/global';
 import { SettingsTabs } from '@/store/global/initialState';
-import { LobeAgentSettings } from '@/types/session';
+import { LobeAgentSettings, SessionGroupItem } from '@/types/session';
 import type { GlobalSettings, OpenAIConfig } from '@/types/settings';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
+import { nanoid } from '@/utils/uuid';
 
 const n = setNamespace('settings');
 
@@ -18,24 +19,26 @@ const n = setNamespace('settings');
  * 设置操作
  */
 export interface SettingsAction {
+  addCustomGroup: (name: string) => string;
   importAppSettings: (settings: GlobalSettings) => void;
   /**
    * 重置设置
    */
   resetSettings: () => void;
   setOpenAIConfig: (config: Partial<OpenAIConfig>) => void;
-
   /**
    * 设置部分配置设置
    * @param settings - 部分配置设置
    */
   setSettings: (settings: DeepPartial<GlobalSettings>) => void;
+
   switchSettingTabs: (tab: SettingsTabs) => void;
   /**
    * 设置主题模式
    * @param themeMode - 主题模式
    */
   switchThemeMode: (themeMode: ThemeMode) => void;
+  updateCustomGroup: (groups: SessionGroupItem[]) => void;
   updateDefaultAgent: (agent: DeepPartial<LobeAgentSettings>) => void;
 }
 
@@ -45,6 +48,21 @@ export const createSettingsSlice: StateCreator<
   [],
   SettingsAction
 > = (set, get) => ({
+  addCustomGroup: (name) => {
+    const sessionCustomGroups = get().settings.sessionCustomGroups || [];
+
+    const groupId = nanoid();
+    const sessionGroupKeys = get().preference.sessionGroupKeys || [];
+    get().updateCustomGroup([...sessionCustomGroups, { id: groupId, name }]);
+    get().updatePreference(
+      {
+        sessionGroupKeys: [...sessionGroupKeys, groupId],
+      },
+      'addCustomGroup',
+    );
+
+    return groupId;
+  },
   importAppSettings: (importAppSettings) => {
     const { setSettings } = get();
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -68,7 +86,6 @@ export const createSettingsSlice: StateCreator<
   setOpenAIConfig: (config) => {
     get().setSettings({ languageModel: { openAI: config } });
   },
-
   setSettings: (settings) => {
     const prevSetting = get().settings;
     const nextSettings = merge(prevSetting, settings);
@@ -77,12 +94,16 @@ export const createSettingsSlice: StateCreator<
 
     set({ settings: merge(prevSetting, settings) }, false, n('setSettings', settings));
   },
+
   switchSettingTabs: (tab) => {
     set({ settingsTab: tab });
   },
   switchThemeMode: (themeMode) => {
     get().setSettings({ themeMode });
   },
+  updateCustomGroup: (groups) => {
+    get().setSettings({ sessionCustomGroups: groups });
+  },
   updateDefaultAgent: (agent) => {
     const settings = produce(get().settings, (draft: GlobalSettings) => {
       draft.defaultAgent = merge(draft.defaultAgent, agent);
diff --git a/src/store/global/slices/settings/helpers.ts b/src/store/global/slices/settings/helpers.ts
new file mode 100644
index 000000000000..4ee9d39b60a5
--- /dev/null
+++ b/src/store/global/slices/settings/helpers.ts
@@ -0,0 +1,42 @@
+import { SessionGroupItem } from '@/types/session';
+
+const getGroupByName = (
+  name: string,
+  customGroups: SessionGroupItem[] = [],
+): SessionGroupItem | undefined => {
+  return customGroups.find((group) => group.name === name);
+};
+
+const getGroupById = (
+  id: string,
+  customGroups: SessionGroupItem[] = [],
+): SessionGroupItem | undefined => {
+  return customGroups.find((group) => group.id === id);
+};
+
+const removeGroup = (id: string, customGroups: SessionGroupItem[] = []): SessionGroupItem[] => {
+  return customGroups.filter((group) => group.id !== id);
+};
+
+const renameGroup = (
+  id: string,
+  name: string,
+  customGroups: SessionGroupItem[] = [],
+): SessionGroupItem[] => {
+  return customGroups.map((group) => {
+    if (group.id === id) {
+      return {
+        ...group,
+        name,
+      };
+    }
+    return group;
+  });
+};
+
+export const groupHelpers = {
+  getGroupById,
+  getGroupByName,
+  removeGroup,
+  renameGroup,
+};
diff --git a/src/store/global/slices/settings/selectors.test.ts b/src/store/global/slices/settings/selectors.test.ts
index 149e0b59b4db..cfa861acdf63 100644
--- a/src/store/global/slices/settings/selectors.test.ts
+++ b/src/store/global/slices/settings/selectors.test.ts
@@ -15,6 +15,12 @@ describe('settingsSelectors', () => {
           password: 'password123',
           primaryColor: 'blue',
           themeMode: 'light',
+          sessionCustomGroups: [
+            {
+              name: 'Group 1',
+              id: 'group-1',
+            },
+          ],
           defaultAgent: {
             config: {
               systemRole: '',
@@ -153,187 +159,156 @@ describe('settingsSelectors', () => {
       expect(result).toMatchSnapshot();
     });
   });
+  describe('defaultAgent', () => {
+    it('should merge DEFAULT_AGENT and s.settings.defaultAgent correctly', () => {
+      const s = {
+        settings: {
+          defaultAgent: {
+            config: {
+              systemRole: 'user',
+              model: LanguageModel.GPT3_5,
+            },
+            meta: {
+              avatar: 'agent-avatar.jpg',
+              description: 'Test agent',
+            },
+          },
+        },
+      } as unknown as GlobalStore;
+
+      const result = settingsSelectors.defaultAgent(s);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('defaultAgentConfig', () => {
+    it('should merge DEFAULT_AGENT_CONFIG and defaultAgent(s).config correctly', () => {
+      const s = {
+        settings: {
+          defaultAgent: {
+            config: {
+              systemRole: 'user',
+              model: LanguageModel.GPT3_5,
+              params: {
+                temperature: 0.7,
+              },
+            },
+          },
+        },
+      } as unknown as GlobalStore;
+
+      const result = settingsSelectors.defaultAgentConfig(s);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('defaultAgentMeta', () => {
+    it('should merge DEFAULT_AGENT_META and defaultAgent(s).meta correctly', () => {
+      const s = {
+        settings: {
+          defaultAgent: {
+            meta: {
+              avatar: 'agent-avatar.jpg',
+              description: 'Test agent',
+            },
+          },
+        },
+      } as unknown as GlobalStore;
+
+      const result = settingsSelectors.defaultAgentMeta(s);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
 
-  // describe('defaultAgent', () => {
-  //   it('should merge DEFAULT_AGENT and s.settings.defaultAgent correctly', () => {
-  //     const s: GlobalStore = {
-  //       settings: {
-  //         defaultAgent: {
-  //           config: {
-  //             model: 'gpt-3.5-turbo',
-  //             maxTokens: 100,
-  //           },
-  //           meta: {
-  //             name: 'Default Agent',
-  //             description: 'Default agent for testing',
-  //           },
-  //         },
-  //       },
-  //     };
-  //
-  //     const result = settingsSelectors.defaultAgent(s);
-  //
-  //     expect(result).toEqual(expected);
-  //   });
-  // });
-  //
-  // describe('defaultAgentConfig', () => {
-  //   it('should merge DEFAULT_AGENT_CONFIG and defaultAgent(s).config correctly', () => {
-  //     const s: GlobalStore = {
-  //       settings: {
-  //         defaultAgent: {
-  //           config: {
-  //             model: 'gpt-3.5-turbo',
-  //             maxTokens: 100,
-  //           },
-  //         },
-  //       },
-  //     };
-  //
-  //     const result = settingsSelectors.defaultAgentConfig(s);
-  //
-  //     const defaultAgent = settingsSelectors.defaultAgent(s);
-  //     const expected = merge({}, DEFAULT_AGENT_CONFIG, defaultAgent.config);
-  //
-  //     expect(result).toEqual(expected);
-  //   });
-  // });
-  //
-  // describe('defaultAgentMeta', () => {
-  //   it('should merge DEFAULT_AGENT_META and defaultAgent(s).meta correctly', () => {
-  //     const s: GlobalStore = {
-  //       settings: {
-  //         defaultAgent: {
-  //           meta: {
-  //             name: 'Default Agent',
-  //             description: 'Default agent for testing',
-  //           },
-  //         },
-  //       },
-  //     };
-  //
-  //     const result = settingsSelectors.defaultAgentMeta(s);
-  //
-  //     const defaultAgent = settingsSelectors.defaultAgent(s);
-  //     const expected = merge({}, DEFAULT_AGENT_META, defaultAgent.meta);
-  //
-  //     expect(result).toEqual(expected);
-  //   });
-  // });
-  //
-  // describe('exportSettings', () => {
-  //   it('should remove OPENAI_API_KEY and password fields from s.settings', () => {
-  //     const s: GlobalStore = {
-  //       settings: {
-  //         OPENAI_API_KEY: 'openai-api-key',
-  //         password: 'password123',
-  //         avatar: 'avatar.jpg',
-  //         fontSize: 14,
-  //         language: 'en',
-  //         neutralColor: 'white',
-  //         primaryColor: 'blue',
-  //         themeMode: 'light',
-  //         defaultAgent: {
-  //           config: {
-  //             model: 'gpt-3.5-turbo',
-  //             maxTokens: 100,
-  //           },
-  //           meta: {
-  //             name: 'Default Agent',
-  //             description: 'Default agent for testing',
-  //           },
-  //         },
-  //         languageModel: {
-  //           azureOpenAI: {
-  //             AZURE_API_KEY: 'azure-api-key',
-  //             apiVersion: 'v1',
-  //             endpoint: 'https://azure-openai-endpoint.com',
-  //             models: ['gpt-3.5-turbo'],
-  //           },
-  //           openAI: {
-  //             OPENAI_API_KEY: 'openai-api-key',
-  //             endpoint: 'https://openai-endpoint.com',
-  //             models: ['gpt-3.5-turbo'],
-  //           },
-  //         },
-  //       },
-  //     };
-  //
-  //     const result = settingsSelectors.exportSettings(s);
-  //
-  //     const expected = {
-  //       avatar: 'avatar.jpg',
-  //       fontSize: 14,
-  //       language: 'en',
-  //       neutralColor: 'white',
-  //       primaryColor: 'blue',
-  //       themeMode: 'light',
-  //       defaultAgent: {
-  //         config: {
-  //           model: 'gpt-3.5-turbo',
-  //           maxTokens: 100,
-  //         },
-  //         meta: {
-  //           name: 'Default Agent',
-  //           description: 'Default agent for testing',
-  //         },
-  //       },
-  //       languageModel: {
-  //         azureOpenAI: {
-  //           AZURE_API_KEY: 'azure-api-key',
-  //           apiVersion: 'v1',
-  //           endpoint: 'https://azure-openai-endpoint.com',
-  //           models: ['gpt-3.5-turbo'],
-  //         },
-  //         openAI: {
-  //           endpoint: 'https://openai-endpoint.com',
-  //           models: ['gpt-3.5-turbo'],
-  //         },
-  //       },
-  //     };
-  //
-  //     expect(result).toEqual(expected);
-  //   });
-  //
-  //   it('should return the result as GlobalSettings type', () => {
-  //     const s: GlobalStore = {
-  //       settings: {
-  //         avatar: 'avatar.jpg',
-  //         fontSize: 14,
-  //         language: 'en',
-  //         neutralColor: 'white',
-  //         password: 'password123',
-  //         primaryColor: 'blue',
-  //         themeMode: 'light',
-  //         defaultAgent: {
-  //           config: {
-  //             model: 'gpt-3.5-turbo',
-  //             maxTokens: 100,
-  //           },
-  //           meta: {
-  //             name: 'Default Agent',
-  //             description: 'Default agent for testing',
-  //           },
-  //         },
-  //         languageModel: {
-  //           azureOpenAI: {
-  //             AZURE_API_KEY: 'azure-api-key',
-  //             apiVersion: 'v1',
-  //             endpoint: 'https://azure-openai-endpoint.com',
-  //             models: ['gpt-3.5-turbo'],
-  //           },
-  //           openAI: {
-  //             OPENAI_API_KEY: 'openai-api-key',
-  //             endpoint: 'https://openai-endpoint.com',
-  //             models: ['gpt-3.5-turbo'],
-  //           },
-  //         },
-  //       },
-  //     };
-  //
-  //     const result = settingsSelectors.exportSettings(s);
-  //
-  //     expect(result).toBeInstanceOf(GlobalSettings);
-  //   });
-  // });
+  describe('currentTTS', () => {
+    it('should merge DEFAULT_TTS_CONFIG and s.settings.tts correctly', () => {
+      const s = {
+        settings: {
+          tts: {
+            sttAutoStop: false,
+            openAI: {
+              sttModel: 'whisper-2',
+            },
+          },
+        },
+      } as unknown as GlobalStore;
+
+      const result = settingsSelectors.currentTTS(s);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('currentLanguage', () => {
+    it('should return the correct language setting', () => {
+      const s = {
+        settings: {
+          language: 'fr',
+        },
+      } as unknown as GlobalStore;
+
+      const result = settingsSelectors.currentLanguage(s);
+
+      expect(result).toBe('fr');
+    });
+  });
+
+  describe('dalleConfig', () => {
+    it('should return the dalle configuration', () => {
+      const s = {
+        settings: {
+          tool: {
+            dalle: {
+              apiKey: 'dalle-api-key',
+              autoGenerate: true,
+            },
+          },
+        },
+      } as unknown as GlobalStore;
+
+      const result = settingsSelectors.dalleConfig(s);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
+
+  describe('isDalleAutoGenerating', () => {
+    it('should return the autoGenerate flag from dalle configuration', () => {
+      const s = {
+        settings: {
+          tool: {
+            dalle: {
+              autoGenerate: true,
+            },
+          },
+        },
+      } as unknown as GlobalStore;
+
+      const result = settingsSelectors.isDalleAutoGenerating(s);
+
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('sessionCustomGroups', () => {
+    it('should return session custom groups', () => {
+      const s = {
+        settings: {
+          sessionCustomGroups: [
+            {
+              name: 'Group 1',
+              id: 'group-1',
+            },
+          ],
+        },
+      } as unknown as GlobalStore;
+
+      const result = settingsSelectors.sessionCustomGroups(s);
+
+      expect(result).toMatchSnapshot();
+    });
+  });
 });
diff --git a/src/store/global/slices/settings/selectors.ts b/src/store/global/slices/settings/selectors.ts
index 81112f8c1bae..514e973cbd37 100644
--- a/src/store/global/slices/settings/selectors.ts
+++ b/src/store/global/slices/settings/selectors.ts
@@ -89,6 +89,8 @@ const currentLanguage = (s: GlobalStore) => {
 const dalleConfig = (s: GlobalStore) => s.settings.tool?.dalle || {};
 const isDalleAutoGenerating = (s: GlobalStore) => s.settings.tool?.dalle?.autoGenerate;
 
+const sessionCustomGroups = (s: GlobalStore) => s.settings.sessionCustomGroups || [];
+
 export const settingsSelectors = {
   currentLanguage,
   currentSettings,
@@ -102,4 +104,5 @@ export const settingsSelectors = {
   modelList: modelListSelectors,
   openAIAPI: openAIAPIKeySelectors,
   openAIProxyUrl: openAIProxyUrlSelectors,
+  sessionCustomGroups,
 };
diff --git a/src/store/session/slices/session/action.test.ts b/src/store/session/slices/session/action.test.ts
index b5dc272a864e..766444916736 100644
--- a/src/store/session/slices/session/action.test.ts
+++ b/src/store/session/slices/session/action.test.ts
@@ -133,4 +133,58 @@ describe('SessionAction', () => {
       );
     });
   });
+
+  describe('activeSession', () => {
+    it('should set the provided session id as active', async () => {
+      const { result } = renderHook(() => useSessionStore());
+      const sessionId = 'active-session-id';
+
+      act(() => {
+        result.current.activeSession(sessionId);
+      });
+
+      expect(result.current.activeId).toBe(sessionId);
+    });
+  });
+
+  describe('pinSession', () => {
+    it('should pin a session when pinned is true', async () => {
+      const { result } = renderHook(() => useSessionStore());
+      const sessionId = 'session-id-to-pin';
+
+      await act(async () => {
+        await result.current.pinSession(sessionId, true);
+      });
+
+      expect(sessionService.updateSessionGroup).toHaveBeenCalledWith(sessionId, 'pinned');
+      expect(mockRefresh).toHaveBeenCalled();
+    });
+
+    it('should unpin a session when pinned is false', async () => {
+      const { result } = renderHook(() => useSessionStore());
+      const sessionId = 'session-id-to-unpin';
+
+      await act(async () => {
+        await result.current.pinSession(sessionId, false);
+      });
+
+      expect(sessionService.updateSessionGroup).toHaveBeenCalledWith(sessionId, 'default');
+      expect(mockRefresh).toHaveBeenCalled();
+    });
+  });
+
+  describe('updateSessionGroup', () => {
+    it('should update the session group and refresh the list', async () => {
+      const { result } = renderHook(() => useSessionStore());
+      const sessionId = 'session-id';
+      const groupId = 'new-group-id';
+
+      await act(async () => {
+        await result.current.updateSessionGroup(sessionId, groupId);
+      });
+
+      expect(sessionService.updateSessionGroup).toHaveBeenCalledWith(sessionId, groupId);
+      expect(mockRefresh).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/src/store/session/slices/session/action.ts b/src/store/session/slices/session/action.ts
index bd7af495adf6..ad53d636dc1e 100644
--- a/src/store/session/slices/session/action.ts
+++ b/src/store/session/slices/session/action.ts
@@ -61,7 +61,7 @@ export interface SessionAction {
    * switch session url
    */
   switchSession: (sessionId?: string) => void;
-  updateSessionGroup: (sessionId: string, group: string) => Promise<void>;
+  updateSessionGroup: (sessionId: string, groupId: string) => void;
   /**
    * A custom hook that uses SWR to fetch sessions data.
    */
@@ -153,13 +153,11 @@ export const createSessionSlice: StateCreator<
     // TODO: 后续可以把 router 移除
     router?.push(SESSION_CHAT_URL(sessionId, isMobile));
   },
-
-  updateSessionGroup: async (sessionId, group) => {
-    await sessionService.updateSessionGroup(sessionId, group);
+  updateSessionGroup: async (sessionId, groupId) => {
+    await sessionService.updateSessionGroup(sessionId, groupId);
 
     await get().refreshSessions();
   },
-
   useFetchSessions: () =>
     useSWR<LobeSessions>(FETCH_SESSIONS_KEY, sessionService.getSessions, {
       onSuccess: (data) => {
diff --git a/src/store/session/slices/session/helpers.ts b/src/store/session/slices/session/helpers.ts
index e789c84c56b9..d640edb981b4 100644
--- a/src/store/session/slices/session/helpers.ts
+++ b/src/store/session/slices/session/helpers.ts
@@ -1,9 +1,9 @@
-import { LobeAgentSession, LobeSessions, SessionGroupDefaultKeys } from '@/types/session';
+import { LobeAgentSession, LobeSessions, SessionDefaultGroup } from '@/types/session';
 
 import { initLobeSession } from './initialState';
 
 export const getSessionPinned = (session: LobeAgentSession) =>
-  session.group === SessionGroupDefaultKeys.Pinned;
+  session.group === SessionDefaultGroup.Pinned;
 
 const getSessionById = (id: string, sessions: LobeSessions): LobeAgentSession => {
   const session = sessions.find((s) => s.id === id);
diff --git a/src/store/session/slices/session/initialState.ts b/src/store/session/slices/session/initialState.ts
index 599d369fd161..631fe75c41e7 100644
--- a/src/store/session/slices/session/initialState.ts
+++ b/src/store/session/slices/session/initialState.ts
@@ -1,23 +1,6 @@
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
-
-import { DEFAULT_AGENT_META, DEFAULT_INBOX_AVATAR } from '@/const/meta';
+import { DEFAULT_AGENT_META } from '@/const/meta';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { LobeAgentSession, LobeSessionType } from '@/types/session';
-import { merge } from '@/utils/merge';
-
-export interface SessionState {
-  /**
-   * @title 当前活动的会话
-   * @description 当前正在编辑或查看的会话
-   */
-  activeId: string | undefined;
-  fetchSessionsLoading: boolean;
-  isMobile?: boolean;
-  router?: AppRouterInstance;
-  searchKeywords: string;
-  sessions: LobeAgentSession[];
-  topicSearchKeywords: string;
-}
 
 export const initLobeSession: LobeAgentSession = {
   config: DEFAULT_AGENT_CONFIG,
@@ -27,18 +10,3 @@ export const initLobeSession: LobeAgentSession = {
   type: LobeSessionType.Agent,
   updatedAt: Date.now(),
 };
-export const initInboxSession: LobeAgentSession = merge(initLobeSession, {
-  id: 'inbox',
-  meta: {
-    avatar: DEFAULT_INBOX_AVATAR,
-  },
-});
-
-export const initialSessionState: SessionState = {
-  activeId: 'inbox',
-  fetchSessionsLoading: true,
-  isMobile: false,
-  searchKeywords: '',
-  sessions: [],
-  topicSearchKeywords: '',
-};
diff --git a/src/store/session/slices/session/selectors/list.ts b/src/store/session/slices/session/selectors/list.ts
index 34ab1e8a9af3..b2703904fa30 100644
--- a/src/store/session/slices/session/selectors/list.ts
+++ b/src/store/session/slices/session/selectors/list.ts
@@ -1,7 +1,13 @@
 import { INBOX_SESSION_ID } from '@/const/session';
+import { groupHelpers } from '@/store/global/helpers';
 import { sessionHelpers } from '@/store/session/slices/session/helpers';
 import { MetaData } from '@/types/meta';
-import { LobeAgentSession, LobeSessions, SessionGroupDefaultKeys } from '@/types/session';
+import {
+  LobeAgentSession,
+  LobeSessions,
+  SessionDefaultGroup,
+  SessionGroupItem,
+} from '@/types/session';
 
 import { SessionStore } from '../../../store';
 import { initLobeSession } from '../initialState';
@@ -10,26 +16,33 @@ const defaultSessions = (s: SessionStore): LobeSessions => s.sessions;
 
 const searchSessions = (s: SessionStore): LobeSessions => s.searchSessions;
 
-const pinnedSessionList = (s: SessionStore) =>
-  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Pinned);
-
-const unpinnedSessionList = (s: SessionStore) =>
-  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Default);
-
-const customSessionGroup = (s: SessionStore) => {
-  const group2SessionList: Record<string, LobeAgentSession[]> = {};
-  // 1. 筛选用户自定义的session
-  const customList = defaultSessions(s).filter(
-    (s) =>
-      s.group !== SessionGroupDefaultKeys.Pinned && s.group !== SessionGroupDefaultKeys.Default,
-  );
-  // 2. 进行分组
-  for (const s of customList) {
-    if (!s.group) continue;
-    group2SessionList[s.group] = group2SessionList[s.group] || [];
-    group2SessionList[s.group].push(s);
+const sessionList = (sessionCustomGroups: SessionGroupItem[]) => (s: SessionStore) => {
+  const customList: Record<string, LobeAgentSession[]> = {};
+  const defaultList: LobeAgentSession[] = [];
+  const pinnedList: LobeAgentSession[] = [];
+
+  for (const session of defaultSessions(s)) {
+    if (!session.group || session.group === SessionDefaultGroup.Default) {
+      defaultList.push(session);
+    } else if (session.group === SessionDefaultGroup.Pinned) {
+      pinnedList.push(session);
+    } else {
+      const group = groupHelpers.getGroupById(session.group, sessionCustomGroups);
+      if (!group) {
+        s.updateSessionGroup(session.id, SessionDefaultGroup.Default);
+        defaultList.push(session);
+        continue;
+      }
+      customList[session.group] = customList[session.group] || [];
+      customList[session.group].push(session);
+    }
   }
-  return group2SessionList;
+
+  return {
+    customList,
+    defaultList,
+    pinnedList,
+  };
 };
 
 const getSessionById =
@@ -56,11 +69,6 @@ const currentSessionSafe = (s: SessionStore): LobeAgentSession => {
   return currentSession(s) || initLobeSession;
 };
 
-const hasPinnedSessionList = (s: SessionStore) => {
-  const list = pinnedSessionList(s);
-  return list?.length > 0;
-};
-
 const hasCustomAgents = (s: SessionStore) => defaultSessions(s).length > 0;
 
 const isInboxSession = (s: SessionStore) => s.activeId === INBOX_SESSION_ID;
@@ -73,15 +81,12 @@ const isSomeSessionActive = (s: SessionStore) => !!s.activeId && isSessionListIn
 export const sessionSelectors = {
   currentSession,
   currentSessionSafe,
-  customSessionGroup,
   getSessionById,
   getSessionMetaById,
   hasCustomAgents,
-  hasPinnedSessionList,
   isInboxSession,
   isSessionListInit,
   isSomeSessionActive,
-  pinnedSessionList,
   searchSessions,
-  unpinnedSessionList,
+  sessionList,
 };
diff --git a/src/styles/antdOverride.ts b/src/styles/antdOverride.ts
index 0dbf11751ea9..03f59e07aecb 100644
--- a/src/styles/antdOverride.ts
+++ b/src/styles/antdOverride.ts
@@ -4,11 +4,4 @@ export default ({ token }: { prefixCls: string; token: Theme }) => css`
   .${token.prefixCls}-popover {
     z-index: 1100;
   }
-  .${token.prefixCls}-dropdown {
-    > ul {
-      border: 1px solid ${token.colorBorderSecondary};
-      border-radius: ${token.borderRadius}px !important;
-      box-shadow: ${token.boxShadowSecondary};
-    }
-  }
 `;
diff --git a/src/types/session.ts b/src/types/session.ts
index 37519f1d5ba3..b33cc6b0f9c6 100644
--- a/src/types/session.ts
+++ b/src/types/session.ts
@@ -7,19 +7,24 @@ export enum LobeSessionType {
   Group = 'group',
 }
 
-export type SessionGroupKey = 'pinned' | 'default' | string;
+export type SessionGroupId = SessionDefaultGroup | string;
 
-export enum SessionGroupDefaultKeys {
+export enum SessionDefaultGroup {
   Default = 'default',
   Pinned = 'pinned',
 }
 
+export interface SessionGroupItem {
+  id: SessionGroupId;
+  name: string;
+}
+
 /**
  * Lobe Agent
  */
 export interface LobeAgentSession extends BaseDataModel {
   config: LobeAgentConfig;
-  group?: SessionGroupKey;
+  group?: SessionGroupId;
   type: LobeSessionType.Agent;
 }
 
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 23dc775cbe39..2ea21473302d 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -3,6 +3,7 @@ import type { ThemeMode } from 'antd-style';
 
 import { LocaleMode } from '@/types/locale';
 import type { LobeAgentSession } from '@/types/session';
+import { SessionGroupItem } from '@/types/session';
 
 export interface GlobalBaseSettings {
   avatar: string;
@@ -11,6 +12,7 @@ export interface GlobalBaseSettings {
   neutralColor?: NeutralColors;
   password: string;
   primaryColor?: PrimaryColors;
+  sessionCustomGroups: SessionGroupItem[];
   themeMode: ThemeMode;
 }
 

From a8d200c951749f195652b41c2d831e51cdccc30f Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sun, 21 Jan 2024 22:23:55 +0800
Subject: [PATCH 03/20] =?UTF-8?q?=E2=9C=85=20test:=20update=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global/slices/settings/action.test.ts     | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/store/global/slices/settings/action.test.ts b/src/store/global/slices/settings/action.test.ts
index 9c9a8c1718f8..bbcc8baee0e9 100644
--- a/src/store/global/slices/settings/action.test.ts
+++ b/src/store/global/slices/settings/action.test.ts
@@ -5,7 +5,8 @@ import { describe, expect, it, vi } from 'vitest';
 import { DEFAULT_AGENT, DEFAULT_SETTINGS } from '@/const/settings';
 import { useGlobalStore } from '@/store/global';
 import { SettingsTabs } from '@/store/global/initialState';
-import { LobeAgentSettings } from '@/types/session';
+import { LanguageModel } from '@/types/llm';
+import { LobeAgentSettings, SessionGroupItem } from '@/types/session';
 import { GlobalSettings, OpenAIConfig } from '@/types/settings';
 
 beforeEach(() => {
@@ -17,6 +18,23 @@ vi.mock('@/utils/uuid', () => ({
 }));
 
 describe('SettingsAction', () => {
+  describe('addCustomGroup', () => {
+    it('should add a custom group and update session group keys', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        const groupId = result.current.addCustomGroup('New Group');
+        expect(groupId).toBe('unique-id');
+      });
+
+      expect(result.current.settings.sessionCustomGroups).toContainEqual({
+        id: 'unique-id',
+        name: 'New Group',
+      });
+      expect(result.current.preference.sessionGroupKeys).toContain('unique-id');
+    });
+  });
+
   describe('importAppSettings', () => {
     it('should import app settings', () => {
       const { result } = renderHook(() => useGlobalStore());
@@ -97,6 +115,19 @@ describe('SettingsAction', () => {
     });
   });
 
+  describe('updateCustomGroup', () => {
+    it('should update custom groups', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const updatedGroups: SessionGroupItem[] = [{ id: 'group-id', name: 'Updated Group' }];
+
+      act(() => {
+        result.current.updateCustomGroup(updatedGroups);
+      });
+
+      expect(result.current.settings.sessionCustomGroups).toEqual(updatedGroups);
+    });
+  });
+
   describe('updateDefaultAgent', () => {
     it('should update default agent settings', () => {
       const { result } = renderHook(() => useGlobalStore());

From f3955ce60c6eb72390e9d7ba0193b6671d556dbb Mon Sep 17 00:00:00 2001
From: Arvin Xu <arvinx@foxmail.com>
Date: Mon, 22 Jan 2024 16:41:20 +0800
Subject: [PATCH 04/20] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20refactor?=
 =?UTF-8?q?=20session=20group=20with=20db=20mode=20(#1126)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ♻️ refactor: refactor with db

* 🎨 chore: improve code
---
 .../CollapseGroup/Actions.tsx                 | 11 +--
 .../SessionListContent/DefaultMode.tsx        | 45 +++++------
 .../SessionListContent/List/Item/Actions.tsx  | 11 +--
 .../Modals/ConfigGroupModal/GroupItem.tsx     | 40 +++++-----
 .../Modals/ConfigGroupModal/index.tsx         | 20 ++---
 .../Modals/CreateGroupModal.tsx               | 60 ++++++++-------
 .../Modals/RenameGroupModal.tsx               | 38 +++++-----
 src/const/settings.ts                         |  1 -
 src/database/core/db.ts                       |  7 +-
 src/database/core/schemas.ts                  | 15 +++-
 src/database/models/session.ts                | 40 +++++++++-
 src/database/models/sessionGroup.ts           | 63 ++++++++++++++++
 src/database/schemas/sessionGroup.ts          |  8 ++
 src/services/__tests__/session.test.ts        |  5 +-
 src/services/config.ts                        |  4 +-
 src/services/session.ts                       | 74 +++++++++++++++----
 src/store/global/slices/common/action.ts      | 31 ++++----
 .../global/slices/common/initialState.ts      |  5 +-
 src/store/global/slices/common/selectors.ts   |  5 +-
 .../global/slices/settings/action.test.ts     | 33 +--------
 src/store/global/slices/settings/action.ts    | 23 +-----
 .../global/slices/settings/selectors.test.ts  | 19 -----
 src/store/global/slices/settings/selectors.ts |  3 -
 src/store/global/store.ts                     |  7 ++
 src/store/session/initialState.ts             | 35 ++-------
 src/store/session/selectors.ts                |  3 +-
 .../session/slices/session/action.test.ts     | 11 +--
 src/store/session/slices/session/action.ts    | 22 +++---
 .../session/slices/session/initialState.ts    | 42 ++++++++++-
 .../slices/session/selectors/export.ts        | 31 --------
 .../session/slices/session/selectors/index.ts |  1 -
 .../session/slices/session/selectors/list.ts  | 51 +++----------
 .../session/slices/sessionGroup/action.ts     | 47 ++++++++++++
 .../slices/sessionGroup/initialState.ts       |  5 ++
 .../session/slices/sessionGroup/selectors.ts  | 15 ++++
 src/store/session/store.ts                    | 11 ++-
 src/types/session.ts                          | 20 ++++-
 src/types/settings.ts                         |  2 -
 38 files changed, 501 insertions(+), 363 deletions(-)
 create mode 100644 src/database/models/sessionGroup.ts
 create mode 100644 src/database/schemas/sessionGroup.ts
 delete mode 100644 src/store/session/slices/session/selectors/export.ts
 create mode 100644 src/store/session/slices/sessionGroup/action.ts
 create mode 100644 src/store/session/slices/sessionGroup/initialState.ts
 create mode 100644 src/store/session/slices/sessionGroup/selectors.ts

diff --git a/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx b/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx
index 40e696732ec1..229371383f34 100644
--- a/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx
+++ b/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx
@@ -1,14 +1,11 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { App, Dropdown, DropdownProps, MenuProps } from 'antd';
 import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
 import { MoreVertical, PencilLine, Settings2, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
-import { groupHelpers } from '@/store/global/helpers';
-import { settingsSelectors } from '@/store/global/selectors';
+import { useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css }) => ({
   modalRoot: css`
@@ -25,8 +22,8 @@ const Actions = memo<ActionsProps>(({ id, openRenameModal, openConfigModal, onOp
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
   const { modal } = App.useApp();
-  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
-  const updateCustomGroup = useGlobalStore((s) => s.updateCustomGroup);
+
+  const [removeSessionGroup] = useSessionStore((s) => [s.removeSessionGroup]);
   const items: MenuProps['items'] = useMemo(
     () => [
       {
@@ -61,7 +58,7 @@ const Actions = memo<ActionsProps>(({ id, openRenameModal, openConfigModal, onOp
             centered: true,
             okButtonProps: { danger: true },
             onOk: () => {
-              updateCustomGroup(groupHelpers.removeGroup(id, sessionCustomGroups));
+              removeSessionGroup(id);
             },
             rootClassName: styles.modalRoot,
             title: t('sessionGroup.confirmRemoveGroupAlert'),
diff --git a/src/app/chat/features/SessionListContent/DefaultMode.tsx b/src/app/chat/features/SessionListContent/DefaultMode.tsx
index c06f6f6d3b86..797a22219599 100644
--- a/src/app/chat/features/SessionListContent/DefaultMode.tsx
+++ b/src/app/chat/features/SessionListContent/DefaultMode.tsx
@@ -4,9 +4,10 @@ import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
-import { preferenceSelectors, settingsSelectors } from '@/store/global/selectors';
+import { preferenceSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
+import { SessionDefaultGroup } from '@/types/session';
 
 import Actions from '../SessionListContent/CollapseGroup/Actions';
 import CollapseGroup from './CollapseGroup';
@@ -16,35 +17,34 @@ import ConfigGroupModal from './Modals/ConfigGroupModal';
 import RenameGroupModal from './Modals/RenameGroupModal';
 
 const SessionListContent = memo(() => {
+  const { t } = useTranslation('chat');
+
   const [activeGroupId, setActiveGroupId] = useState<string>();
   const [renameGroupModalOpen, setRenameGroupModalOpen] = useState(false);
   const [configGroupModalOpen, setConfigGroupModalOpen] = useState(false);
-  const { t } = useTranslation('chat');
-  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
-  const sessionList =
-    useSessionStore(sessionSelectors.sessionList(sessionCustomGroups), isEqual) || {};
+
+  const [useFetchSessions] = useSessionStore((s) => [s.useFetchSessions]);
+  useFetchSessions();
+
+  const pinnedSessions = useSessionStore(sessionSelectors.pinnedSessions, isEqual);
+  const defaultSessions = useSessionStore(sessionSelectors.defaultSessions, isEqual);
+  const customSessionGroups = useSessionStore(sessionSelectors.customSessionGroups, isEqual);
+
   const [sessionGroupKeys, updatePreference] = useGlobalStore((s) => [
     preferenceSelectors.sessionGroupKeys(s),
     s.updatePreference,
   ]);
-  const [ useFetchSessions] = useSessionStore((s) => [
-    s.useFetchSessions,
-  ]);
-  useFetchSessions();
-
 
   const items = useMemo(
     () =>
       [
-        sessionList.pinnedList?.length > 0 && {
-          children: <SessionList dataSource={sessionList.pinnedList} />,
-          key: 'pinned',
+        pinnedSessions.length > 0 && {
+          children: <SessionList dataSource={pinnedSessions} />,
+          key: SessionDefaultGroup.Pinned,
           label: t('pin'),
         },
-        ...sessionCustomGroups.map(({ id, name }) => ({
-          children: sessionList.customList[id] && (
-            <SessionList dataSource={sessionList.customList[id]} />
-          ),
+        ...customSessionGroups.map(({ id, name, children }) => ({
+          children: <SessionList dataSource={children} />,
           extra: (
             <Actions
               id={id}
@@ -59,12 +59,12 @@ const SessionListContent = memo(() => {
           label: name,
         })),
         {
-          children: <SessionList dataSource={sessionList.defaultList} />,
-          key: 'defaultList',
+          children: <SessionList dataSource={defaultSessions} />,
+          key: SessionDefaultGroup.Default,
           label: t('defaultList'),
         },
       ].filter(Boolean) as CollapseProps['items'],
-    [sessionCustomGroups, sessionList],
+    [customSessionGroups, pinnedSessions, defaultSessions],
   );
 
   return (
@@ -74,8 +74,9 @@ const SessionListContent = memo(() => {
         activeKey={sessionGroupKeys}
         items={items}
         onChange={(keys) => {
-          const sessionGroupKeys = typeof keys === 'string' ? [keys] : keys;
-          updatePreference({ sessionGroupKeys });
+          const expandSessionGroupKeys = typeof keys === 'string' ? [keys] : keys;
+
+          updatePreference({ expandSessionGroupKeys });
         }}
       />
       {activeGroupId && (
diff --git a/src/app/chat/features/SessionListContent/List/Item/Actions.tsx b/src/app/chat/features/SessionListContent/List/Item/Actions.tsx
index 945807c73a55..2fbf7b26f8f8 100644
--- a/src/app/chat/features/SessionListContent/List/Item/Actions.tsx
+++ b/src/app/chat/features/SessionListContent/List/Item/Actions.tsx
@@ -17,11 +17,9 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { configService } from '@/services/config';
-import { useGlobalStore } from '@/store/global';
-import { settingsSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
-import { sessionSelectors } from '@/store/session/selectors';
+import { sessionGroupSelectors, sessionSelectors } from '@/store/session/selectors';
 import { SessionDefaultGroup } from '@/types/session';
 
 const useStyles = createStyles(({ css }) => ({
@@ -38,11 +36,10 @@ interface ActionProps {
 }
 
 const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, setOpen }) => {
-  const { t } = useTranslation('chat');
-
   const { styles } = useStyles();
+  const { t } = useTranslation('chat');
 
-  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
+  const sessionCustomGroups = useSessionStore(sessionGroupSelectors.sessionGroupItems, isEqual);
   const [pin, removeSession, pinSession, duplicateSession, updateSessionGroup] = useSessionStore(
     (s) => {
       const session = sessionSelectors.getSessionById(id)(s);
@@ -51,7 +48,7 @@ const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, setOpen })
         s.removeSession,
         s.pinSession,
         s.duplicateSession,
-        s.updateSessionGroup,
+        s.updateSessionGroupId,
       ];
     },
   );
diff --git a/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx b/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx
index 570a53061325..488b969b6610 100644
--- a/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx
+++ b/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx
@@ -1,14 +1,11 @@
 import { ActionIcon, EditableText, SortableList } from '@lobehub/ui';
-import { Popconfirm, message } from 'antd';
+import { App, Popconfirm } from 'antd';
 import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
 import { PencilLine, Trash } from 'lucide-react';
-import { memo, useCallback, useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
-import { groupHelpers } from '@/store/global/helpers';
-import { settingsSelectors } from '@/store/global/selectors';
+import { useSessionStore } from '@/store/session';
 import { SessionGroupItem } from '@/types/session';
 
 const useStyles = createStyles(({ css }) => ({
@@ -26,22 +23,15 @@ const useStyles = createStyles(({ css }) => ({
 }));
 
 const GroupItem = memo<SessionGroupItem>(({ id, name }) => {
-  const [editing, setEditing] = useState(false);
-  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
-  const updateCustomGroup = useGlobalStore((s) => s.updateCustomGroup);
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
+  const { message } = App.useApp();
 
-  const handleRename = useCallback(
-    (input: string) => {
-      if (!input) return;
-      if (input.length === 0 || input.length > 20)
-        return message.warning(t('sessionGroup.tooLong'));
-      updateCustomGroup(groupHelpers.renameGroup(id, input, sessionCustomGroups));
-      message.success(t('sessionGroup.renameSuccess'));
-    },
-    [id, sessionCustomGroups],
-  );
+  const [editing, setEditing] = useState(false);
+  const [updateSessionGroupName, removeSessionGroup] = useSessionStore((s) => [
+    s.updateSessionGroupName,
+    s.removeSessionGroup,
+  ]);
 
   return (
     <>
@@ -57,7 +47,7 @@ const GroupItem = memo<SessionGroupItem>(({ id, name }) => {
               type: 'primary',
             }}
             onConfirm={() => {
-              updateCustomGroup(groupHelpers.removeGroup(id, sessionCustomGroups));
+              removeSessionGroup(id);
             }}
             title={t('sessionGroup.confirmRemoveGroupAlert')}
           >
@@ -67,8 +57,14 @@ const GroupItem = memo<SessionGroupItem>(({ id, name }) => {
       ) : (
         <EditableText
           editing={editing}
-          onChangeEnd={(v) => {
-            if (name !== v) handleRename(v);
+          onChangeEnd={(input) => {
+            if (name !== input) {
+              if (!input) return;
+              if (input.length === 0 || input.length > 20)
+                return message.warning(t('sessionGroup.tooLong'));
+              updateSessionGroupName(id, input);
+              message.success(t('sessionGroup.renameSuccess'));
+            }
             setEditing(false);
           }}
           onEditingChange={(e) => setEditing(e)}
diff --git a/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/index.tsx b/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/index.tsx
index 156f6681302d..b3bfdee0dad6 100644
--- a/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/index.tsx
+++ b/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/index.tsx
@@ -7,8 +7,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useGlobalStore } from '@/store/global';
-import { settingsSelectors } from '@/store/global/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionGroupSelectors } from '@/store/session/selectors';
 import { SessionGroupItem } from '@/types/session';
 
 import GroupItem from './GroupItem';
@@ -30,10 +30,10 @@ const useStyles = createStyles(({ css, token, stylish }) => ({
 const ConfigGroupModal = memo<ModalProps>(({ open, onCancel }) => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
-  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
-  const [addCustomGroup, updateCustomGroup] = useGlobalStore((s) => [
-    s.addCustomGroup,
-    s.updateCustomGroup,
+  const sessionGroupItems = useSessionStore(sessionGroupSelectors.sessionGroupItems, isEqual);
+  const [addSessionGroup, updateSessionGroupSort] = useSessionStore((s) => [
+    s.addSessionGroup,
+    s.updateSessionGroupSort,
   ]);
 
   return (
@@ -47,8 +47,10 @@ const ConfigGroupModal = memo<ModalProps>(({ open, onCancel }) => {
     >
       <Flexbox>
         <SortableList
-          items={sessionCustomGroups}
-          onChange={(item: SessionGroupItem[]) => updateCustomGroup(item)}
+          items={sessionGroupItems}
+          onChange={(items: SessionGroupItem[]) => {
+            updateSessionGroupSort(items);
+          }}
           renderItem={(item: SessionGroupItem) => (
             <SortableList.Item
               align={'center'}
@@ -65,7 +67,7 @@ const ConfigGroupModal = memo<ModalProps>(({ open, onCancel }) => {
         <Button
           block
           icon={<Icon icon={Plus} />}
-          onClick={() => addCustomGroup(t('sessionGroup.newGroup'))}
+          onClick={() => addSessionGroup(t('sessionGroup.newGroup'))}
         >
           {t('sessionGroup.createGroup')}
         </Button>
diff --git a/src/app/chat/features/SessionListContent/Modals/CreateGroupModal.tsx b/src/app/chat/features/SessionListContent/Modals/CreateGroupModal.tsx
index 36965df9a3bc..c1445e4de102 100644
--- a/src/app/chat/features/SessionListContent/Modals/CreateGroupModal.tsx
+++ b/src/app/chat/features/SessionListContent/Modals/CreateGroupModal.tsx
@@ -1,11 +1,10 @@
 import { Input, Modal, type ModalProps } from '@lobehub/ui';
-import { message } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { memo, useCallback, useState } from 'react';
+import { App } from 'antd';
+import { MouseEvent, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { useGlobalStore } from '@/store/global';
-import { settingsSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 
 interface CreateGroupModalProps extends ModalProps {
@@ -15,41 +14,46 @@ interface CreateGroupModalProps extends ModalProps {
 const CreateGroupModal = memo<CreateGroupModalProps>(
   ({ id, open, onCancel }: CreateGroupModalProps) => {
     const { t } = useTranslation('chat');
-    const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
-    const addCustomGroup = useGlobalStore((s) => s.addCustomGroup);
-    const updateSessionGroup = useSessionStore((s) => s.updateSessionGroup);
-    const [input, setInput] = useState('');
 
-    const handleSubmit = useCallback(
-      (e: any) => {
-        if (!input) return;
-        if (input.length === 0 || input.length > 20)
-          return message.warning(t('sessionGroup.tooLong'));
-
-        const groupId = addCustomGroup(input);
-        updateSessionGroup(id, groupId);
-        message.success(t('sessionGroup.createSuccess'));
-        onCancel?.(e);
-      },
-      [id, input, sessionCustomGroups],
-    );
+    const toggleExpandSessionGroup = useGlobalStore((s) => s.toggleExpandSessionGroup);
+    const { message } = App.useApp();
+    const [updateSessionGroup, addCustomGroup] = useSessionStore((s) => [
+      s.updateSessionGroupId,
+      s.addSessionGroup,
+    ]);
+    const [input, setInput] = useState('');
 
     return (
       <div onClick={(e) => e.stopPropagation()}>
         <Modal
           allowFullscreen
+          centered
           onCancel={onCancel}
-          onOk={handleSubmit}
+          onOk={async (e: MouseEvent<HTMLButtonElement>) => {
+            if (!input) return;
+
+            if (input.length === 0 || input.length > 20)
+              return message.warning(t('sessionGroup.tooLong'));
+
+            const groupId = await addCustomGroup(input);
+            await updateSessionGroup(id, groupId);
+            toggleExpandSessionGroup(groupId, true);
+
+            message.success(t('sessionGroup.createSuccess'));
+            onCancel?.(e);
+          }}
           open={open}
           title={t('sessionGroup.createGroup')}
           width={400}
         >
-          <Input
-            autoFocus
-            onChange={(e) => setInput(e.target.value)}
-            placeholder={t('sessionGroup.inputPlaceholder')}
-            value={input}
-          />
+          <Flexbox paddingBlock={16}>
+            <Input
+              autoFocus
+              onChange={(e) => setInput(e.target.value)}
+              placeholder={t('sessionGroup.inputPlaceholder')}
+              value={input}
+            />
+          </Flexbox>
         </Modal>
       </div>
     );
diff --git a/src/app/chat/features/SessionListContent/Modals/RenameGroupModal.tsx b/src/app/chat/features/SessionListContent/Modals/RenameGroupModal.tsx
index aa4d316629b9..d41f9a3468de 100644
--- a/src/app/chat/features/SessionListContent/Modals/RenameGroupModal.tsx
+++ b/src/app/chat/features/SessionListContent/Modals/RenameGroupModal.tsx
@@ -1,12 +1,11 @@
 import { Input, Modal, type ModalProps } from '@lobehub/ui';
-import { message } from 'antd';
+import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { memo, useCallback, useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
-import { groupHelpers } from '@/store/global/helpers';
-import { settingsSelectors } from '@/store/global/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionGroupSelectors } from '@/store/session/selectors';
 
 interface RenameGroupModalProps extends ModalProps {
   id: string;
@@ -14,28 +13,25 @@ interface RenameGroupModalProps extends ModalProps {
 
 const RenameGroupModal = memo<RenameGroupModalProps>(({ id, open, onCancel }) => {
   const { t } = useTranslation('chat');
-  const sessionCustomGroups = useGlobalStore(settingsSelectors.sessionCustomGroups, isEqual);
-  const updateCustomGroup = useGlobalStore((s) => s.updateCustomGroup);
-  const group = groupHelpers.getGroupById(id, sessionCustomGroups);
-  const [input, setInput] = useState<string>();
 
-  const handleSubmit = useCallback(
-    (e: any) => {
-      if (!input) return;
-      if (input.length === 0 || input.length > 20)
-        return message.warning(t('sessionGroup.tooLong'));
-      updateCustomGroup(groupHelpers.renameGroup(id, input, sessionCustomGroups));
-      message.success(t('sessionGroup.renameSuccess'));
-      onCancel?.(e);
-    },
-    [id, input, sessionCustomGroups],
-  );
+  const updateSessionGroupName = useSessionStore((s) => s.updateSessionGroupName);
+  const group = useSessionStore((s) => sessionGroupSelectors.getGroupById(id)(s), isEqual);
+
+  const [input, setInput] = useState<string>();
 
+  const { message } = App.useApp();
   return (
     <Modal
       allowFullscreen
       onCancel={onCancel}
-      onOk={handleSubmit}
+      onOk={(e) => {
+        if (!input) return;
+        if (input.length === 0 || input.length > 20)
+          return message.warning(t('sessionGroup.tooLong'));
+        updateSessionGroupName(id, input);
+        message.success(t('sessionGroup.renameSuccess'));
+        onCancel?.(e);
+      }}
       open={open}
       title={t('sessionGroup.rename')}
       width={400}
diff --git a/src/const/settings.ts b/src/const/settings.ts
index d8e691eb2cd1..82fdde3b62ff 100644
--- a/src/const/settings.ts
+++ b/src/const/settings.ts
@@ -15,7 +15,6 @@ export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
   fontSize: 14,
   language: 'auto',
   password: '',
-  sessionCustomGroups: [],
   themeMode: 'auto',
 };
 
diff --git a/src/database/core/db.ts b/src/database/core/db.ts
index b47add44ef2b..59615bb821ff 100644
--- a/src/database/core/db.ts
+++ b/src/database/core/db.ts
@@ -5,14 +5,16 @@ import { DB_File } from '@/database/schemas/files';
 import { DB_Message } from '@/database/schemas/message';
 import { DB_Plugin } from '@/database/schemas/plugin';
 import { DB_Session } from '@/database/schemas/session';
+import { DB_SessionGroup } from '@/database/schemas/sessionGroup';
 import { DB_Topic } from '@/database/schemas/topic';
 
-import { dbSchemaV1, dbSchemaV2, dbSchemaV3 } from './schemas';
+import { dbSchemaV1, dbSchemaV2, dbSchemaV3, dbSchemaV4 } from './schemas';
 
 interface LobeDBSchemaMap {
   files: DB_File;
   messages: DB_Message;
   plugins: DB_Plugin;
+  sessionGroups: DB_SessionGroup;
   sessions: DB_Session;
   topics: DB_Topic;
 }
@@ -24,18 +26,21 @@ export class LocalDB extends Dexie {
   public messages: LobeDBTable<'messages'>;
   public topics: LobeDBTable<'topics'>;
   public plugins: LobeDBTable<'plugins'>;
+  public sessionGroups: LobeDBTable<'sessionGroups'>;
 
   constructor() {
     super('LOBE_CHAT_DB');
     this.version(1).stores(dbSchemaV1);
     this.version(2).stores(dbSchemaV2);
     this.version(3).stores(dbSchemaV3);
+    this.version(4).stores(dbSchemaV4);
 
     this.files = this.table('files');
     this.sessions = this.table('sessions');
     this.messages = this.table('messages');
     this.topics = this.table('topics');
     this.plugins = this.table('plugins');
+    this.sessionGroups = this.table('sessionGroups');
   }
 }
 
diff --git a/src/database/core/schemas.ts b/src/database/core/schemas.ts
index a7449eea6357..cfe7adf22c15 100644
--- a/src/database/core/schemas.ts
+++ b/src/database/core/schemas.ts
@@ -24,10 +24,23 @@ export const dbSchemaV2 = {
 // ************************************** //
 // ******* Version 3 - 2023-12-06 ******* //
 // ************************************** //
-// - Added `plugin` table
+// - Added `plugins` table
 
 export const dbSchemaV3 = {
   ...dbSchemaV2,
   plugins:
     '&identifier, type, manifest.type, manifest.meta.title, manifest.meta.description, manifest.meta.author, createdAt, updatedAt',
 };
+
+// ************************************** //
+// ******* Version 4 - 2024-01-21 ******* //
+// ************************************** //
+// - Added `sessionGroups` table
+// - Add `pinned` to sessions table
+
+export const dbSchemaV4 = {
+  ...dbSchemaV3,
+  sessionGroups: '&id, name, sort, createdAt, updatedAt',
+  sessions:
+    '&id, type, group, pinned, meta.title, meta.description, meta.tags, createdAt, updatedAt',
+};
diff --git a/src/database/models/session.ts b/src/database/models/session.ts
index f90f08baf9f6..2d7cd33ffdd4 100644
--- a/src/database/models/session.ts
+++ b/src/database/models/session.ts
@@ -3,9 +3,16 @@ import { DeepPartial } from 'utility-types';
 import { DEFAULT_AGENT_LOBE_SESSION } from '@/const/session';
 import { BaseModel } from '@/database/core';
 import { DBModel } from '@/database/core/types/db';
+import { SessionGroupModel } from '@/database/models/sessionGroup';
 import { DB_Session, DB_SessionSchema } from '@/database/schemas/session';
 import { LobeAgentConfig } from '@/types/agent';
-import { LobeAgentSession, LobeSessions, SessionGroupId } from '@/types/session';
+import {
+  ChatSessionList,
+  LobeAgentSession,
+  LobeSessions,
+  SessionDefaultGroup,
+  SessionGroupId,
+} from '@/types/session';
 import { merge } from '@/utils/merge';
 import { uuid } from '@/utils/uuid';
 
@@ -36,10 +43,19 @@ class _SessionModel extends BaseModel {
    * get sessions by group
    * @param group
    */
-  async queryByGroup(group: SessionGroupId) {
+  async queryByGroup(group: SessionGroupId): Promise<LobeSessions> {
     return this.table.where('group').equals(group).toArray();
   }
 
+  async queryByGroupIds(groups: string[]) {
+    const pools = groups.map(async (id) => {
+      return [id, await this.queryByGroup(id)] as const;
+    });
+    const groupItems = await Promise.all(pools);
+
+    return Object.fromEntries(groupItems);
+  }
+
   async update(id: string, data: Partial<DB_Session>) {
     return super._update(id, data);
   }
@@ -165,6 +181,26 @@ class _SessionModel extends BaseModel {
 
     return this._add(newSession, uuid());
   }
+
+  async queryWithGroups(): Promise<ChatSessionList> {
+    const groups = await SessionGroupModel.query();
+    const customGroups = await this.queryByGroupIds(groups.map((item) => item.id));
+
+    const defaultItems = await this.queryByGroup(SessionDefaultGroup.Default);
+    const pinnedItems = await this.queryByGroup(SessionDefaultGroup.Pinned);
+    // const pinnedItems = await this.table.where('pinned').equals(1).toArray();
+
+    const all = await this.query();
+    return {
+      all,
+      customGroup: groups.map((group) => ({
+        ...group,
+        children: customGroups[group.id],
+      })),
+      default: defaultItems,
+      pinned: pinnedItems,
+    };
+  }
 }
 
 export const SessionModel = new _SessionModel();
diff --git a/src/database/models/sessionGroup.ts b/src/database/models/sessionGroup.ts
new file mode 100644
index 000000000000..51d750d18df8
--- /dev/null
+++ b/src/database/models/sessionGroup.ts
@@ -0,0 +1,63 @@
+import { BaseModel } from '@/database/core';
+import { DB_SessionGroup, DB_SessionGroupSchema } from '@/database/schemas/sessionGroup';
+import { SessionGroups } from '@/types/session';
+import { nanoid } from '@/utils/uuid';
+
+class _SessionGroupModel extends BaseModel {
+  constructor() {
+    super('sessionGroups', DB_SessionGroupSchema);
+  }
+
+  async create(name: string, sort?: number, id = nanoid()) {
+    return this._add({ name, sort }, id);
+  }
+
+  async batchCreate(groups: SessionGroups) {
+    return this._batchAdd(groups, { idGenerator: nanoid });
+  }
+
+  async update(id: string, data: Partial<DB_SessionGroup>) {
+    return super._update(id, data);
+  }
+
+  async delete(id: string, removeGroupItem: boolean = false) {
+    if (!removeGroupItem) return this.table.delete(id);
+
+    // TODO: delete all session associated with the sessionGroup
+  }
+
+  async query(): Promise<SessionGroups> {
+    const allGroups = await this.table.toArray();
+
+    // 自定义排序，先按 sort 存在与否分组，然后分别排序
+    return allGroups.sort((a, b) => {
+      // 如果两个项都有 sort，则按 sort 排序
+      if (a.sort !== undefined && b.sort !== undefined) {
+        return a.sort - b.sort;
+      }
+      // 如果 a 有 sort 而 b 没有，则 a 排在前面
+      if (a.sort !== undefined) {
+        return -1;
+      }
+      // 如果 b 有 sort 而 a 没有，则 b 排在前面
+      if (b.sort !== undefined) {
+        return 1;
+      }
+      // 如果两个项都没有 sort，则按 createdAt 倒序排序
+      if (a.createdAt && b.createdAt) {
+        return b.createdAt - a.createdAt;
+      }
+      return 0;
+    });
+  }
+
+  async updateOrder(sortMap: { id: string; sort: number }[]) {
+    return this.db.transaction('rw', this.table, async () => {
+      for (const { id, sort } of sortMap) {
+        await this.table.update(id, { sort });
+      }
+    });
+  }
+}
+
+export const SessionGroupModel = new _SessionGroupModel();
diff --git a/src/database/schemas/sessionGroup.ts b/src/database/schemas/sessionGroup.ts
new file mode 100644
index 000000000000..4bef20d01585
--- /dev/null
+++ b/src/database/schemas/sessionGroup.ts
@@ -0,0 +1,8 @@
+import { z } from 'zod';
+
+export const DB_SessionGroupSchema = z.object({
+  name: z.string(),
+  sort: z.number().optional(),
+});
+
+export type DB_SessionGroup = z.infer<typeof DB_SessionGroupSchema>;
diff --git a/src/services/__tests__/session.test.ts b/src/services/__tests__/session.test.ts
index 390c6dbacbcb..32fcf5695c97 100644
--- a/src/services/__tests__/session.test.ts
+++ b/src/services/__tests__/session.test.ts
@@ -21,6 +21,7 @@ vi.mock('@/database/models/session', () => {
       isEmpty: vi.fn(),
       queryByKeyword: vi.fn(),
       updateConfig: vi.fn(),
+      queryByGroupIds: vi.fn(),
     },
   };
 });
@@ -140,14 +141,14 @@ describe('SessionService', () => {
     });
   });
 
-  describe('updateSessionGroup', () => {
+  describe('updateSessionGroupId', () => {
     it('should update the group of a session', async () => {
       // Setup
       const groupId = 'new-group';
       (SessionModel.update as Mock).mockResolvedValue({ ...mockSession, group: groupId });
 
       // Execute
-      const result = await sessionService.updateSessionGroup(mockSessionId, groupId);
+      const result = await sessionService.updateSessionGroupId(mockSessionId, groupId);
 
       // Assert
       expect(SessionModel.update).toHaveBeenCalledWith(mockSessionId, { group: groupId });
diff --git a/src/services/config.ts b/src/services/config.ts
index 61a8113d9987..14e8cc3e5048 100644
--- a/src/services/config.ts
+++ b/src/services/config.ts
@@ -4,7 +4,7 @@ import { topicService } from '@/services/topic';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
-import { sessionExportSelectors, sessionSelectors } from '@/store/session/selectors';
+import { sessionSelectors } from '@/store/session/selectors';
 import { ConfigFile } from '@/types/exportConfig';
 import { ChatMessage } from '@/types/message';
 import { LobeSessions } from '@/types/session';
@@ -189,7 +189,7 @@ class ConfigService {
     sessionSelectors.getSessionById(id)(useSessionStore.getState());
 
   private getAgent = (id: string) =>
-    sessionExportSelectors.getExportAgent(id)(useSessionStore.getState());
+    sessionSelectors.getSessionById(id)(useSessionStore.getState());
 
   private mapImportResult = (input: {
     added: number;
diff --git a/src/services/session.ts b/src/services/session.ts
index ae0f4a9c2b92..15002ae3020b 100644
--- a/src/services/session.ts
+++ b/src/services/session.ts
@@ -1,9 +1,18 @@
 import { DeepPartial } from 'utility-types';
 
 import { SessionModel } from '@/database/models/session';
+import { SessionGroupModel } from '@/database/models/sessionGroup';
 import { LobeAgentConfig } from '@/types/agent';
 import { MetaData } from '@/types/meta';
-import { LobeAgentSession, LobeSessionType, LobeSessions, SessionGroupId } from '@/types/session';
+import {
+  ChatSessionList,
+  LobeAgentSession,
+  LobeSessionType,
+  LobeSessions,
+  SessionGroupId,
+  SessionGroupItem,
+  SessionGroups,
+} from '@/types/session';
 
 class SessionService {
   async createNewSession(
@@ -21,24 +30,39 @@ class SessionService {
     return SessionModel.batchCreate(importSessions);
   }
 
+  async duplicateSession(id: string, newTitle: string): Promise<string | undefined> {
+    const res = await SessionModel.duplicate(id, newTitle);
+
+    if (res) return res?.id;
+  }
+
   async getSessions(): Promise<LobeSessions> {
+    const groups = await SessionGroupModel.query();
+    const data = await SessionModel.queryByGroupIds(groups.map((item) => item.id));
+
+    console.log(data);
     return SessionModel.query();
   }
 
+  async getSessionsWithGroup(): Promise<ChatSessionList> {
+    return SessionModel.queryWithGroups();
+  }
+
   async getAllAgents(): Promise<LobeSessions> {
     // TODO: add a filter to get only agents
     return await SessionModel.query();
   }
 
-  async removeSession(id: string) {
-    return SessionModel.delete(id);
+  async hasSessions() {
+    const isEmpty = await SessionModel.isEmpty();
+    return !isEmpty;
   }
 
-  async removeAllSessions() {
-    return SessionModel.clearTable();
+  async searchSessions(keyword: string) {
+    return SessionModel.queryByKeyword(keyword);
   }
 
-  async updateSessionGroup(id: string, group: SessionGroupId) {
+  async updateSessionGroupId(id: string, group: SessionGroupId) {
     return SessionModel.update(id, { group });
   }
 
@@ -50,19 +74,41 @@ class SessionService {
     return SessionModel.updateConfig(activeId, config);
   }
 
-  async hasSessions() {
-    const isEmpty = await SessionModel.isEmpty();
-    return !isEmpty;
+  async removeSession(id: string) {
+    return SessionModel.delete(id);
   }
 
-  async searchSessions(keyword: string) {
-    return SessionModel.queryByKeyword(keyword);
+  async removeAllSessions() {
+    return SessionModel.clearTable();
   }
 
-  async duplicateSession(id: string, newTitle: string): Promise<string | undefined> {
-    const res = await SessionModel.duplicate(id, newTitle);
+  // ************************************** //
+  // ***********  SessionGroup  *********** //
+  // ************************************** //
 
-    if (res) return res?.id;
+  async createSessionGroup(name: string, sort?: number) {
+    const item = await SessionGroupModel.create(name, sort);
+    if (!item) {
+      throw new Error('session group create Error');
+    }
+
+    return item.id;
+  }
+
+  async batchCreateSessionGroups(groups: SessionGroups) {
+    return SessionGroupModel.batchCreate(groups);
+  }
+
+  async removeSessionGroup(id: string, removeChildren?: boolean) {
+    return SessionGroupModel.delete(id, removeChildren);
+  }
+
+  async updateSessionGroup(id: string, data: Partial<SessionGroupItem>) {
+    return SessionGroupModel.update(id, data);
+  }
+
+  async updateSessionGroupOrder(sortMap: { id: string; sort: number }[]) {
+    return SessionGroupModel.updateOrder(sortMap);
   }
 }
 
diff --git a/src/store/global/slices/common/action.ts b/src/store/global/slices/common/action.ts
index 7341eb8c1ee5..8abfc5c5f67e 100644
--- a/src/store/global/slices/common/action.ts
+++ b/src/store/global/slices/common/action.ts
@@ -11,7 +11,6 @@ import type { GlobalStore } from '@/store/global';
 import type { GlobalServerConfig } from '@/types/settings';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
-import { nanoid } from '@/utils/uuid';
 
 import type { GlobalCommonState, GlobalPreference, Guide, SidebarTabKey } from './initialState';
 
@@ -21,7 +20,6 @@ const n = setNamespace('settings');
  * 设置操作
  */
 export interface CommonAction {
-  addCustomGroup: (name: string) => string;
   switchBackToChat: (sessionId?: string) => void;
   /**
    * 切换侧边栏选项
@@ -29,6 +27,7 @@ export interface CommonAction {
    */
   switchSideBar: (key: SidebarTabKey) => void;
   toggleChatSideBar: (visible?: boolean) => void;
+  toggleExpandSessionGroup: (id: string, expand: boolean) => void;
   toggleMobileTopic: (visible?: boolean) => void;
   toggleSystemRole: (visible?: boolean) => void;
   updateGuideState: (guide: Partial<Guide>) => void;
@@ -43,21 +42,6 @@ export const createCommonSlice: StateCreator<
   [],
   CommonAction
 > = (set, get) => ({
-  addCustomGroup: (name) => {
-    const sessionCustomGroups = get().preference.sessionCustomGroups || [];
-
-    const groupId = nanoid();
-    const sessionGroupKeys = get().preference.sessionGroupKeys || [];
-    get().updatePreference(
-      {
-        sessionCustomGroups: [...sessionCustomGroups, { id: groupId, name }],
-        sessionGroupKeys: [...sessionGroupKeys, groupId],
-      },
-      'addCustomGroup',
-    );
-
-    return groupId;
-  },
   switchBackToChat: (sessionId) => {
     get().router?.push(SESSION_CHAT_URL(sessionId || INBOX_SESSION_ID, get().isMobile));
   },
@@ -70,6 +54,19 @@ export const createCommonSlice: StateCreator<
 
     get().updatePreference({ showChatSideBar }, n('toggleAgentPanel', newValue) as string);
   },
+  toggleExpandSessionGroup: (id, expand) => {
+    const { preference } = get();
+    const nextExpandSessionGroup = produce(preference.expandSessionGroupKeys, (draft) => {
+      if (expand) {
+        if (draft.includes(id)) return;
+        draft.push(id);
+      } else {
+        const index = draft.indexOf(id);
+        if (index !== -1) draft.splice(index, 1);
+      }
+    });
+    get().updatePreference({ expandSessionGroupKeys: nextExpandSessionGroup });
+  },
   toggleMobileTopic: (newValue) => {
     const mobileShowTopic =
       typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
diff --git a/src/store/global/slices/common/initialState.ts b/src/store/global/slices/common/initialState.ts
index 786b481dffb9..cc10c8b2964b 100644
--- a/src/store/global/slices/common/initialState.ts
+++ b/src/store/global/slices/common/initialState.ts
@@ -21,11 +21,12 @@ export interface Guide {
 }
 
 export interface GlobalPreference {
+  // which sessionGroup should expand
+  expandSessionGroupKeys: SessionGroupId[];
   guide?: Guide;
   inputHeight: number;
   mobileShowTopic?: boolean;
   sessionCustomGroups: SessionGroupItem[];
-  sessionGroupKeys: SessionGroupId[];
   sessionsWidth: number;
 
   showChatSideBar?: boolean;
@@ -54,11 +55,11 @@ export interface GlobalCommonState {
 export const initialCommonState: GlobalCommonState = {
   isMobile: false,
   preference: {
+    expandSessionGroupKeys: [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default],
     guide: {},
     inputHeight: 200,
     mobileShowTopic: false,
     sessionCustomGroups: [],
-    sessionGroupKeys: [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default],
     sessionsWidth: 320,
     showChatSideBar: true,
     showSessionPanel: true,
diff --git a/src/store/global/slices/common/selectors.ts b/src/store/global/slices/common/selectors.ts
index 73df620157b9..ab201e9b5ce6 100644
--- a/src/store/global/slices/common/selectors.ts
+++ b/src/store/global/slices/common/selectors.ts
@@ -1,9 +1,6 @@
 import { GlobalStore } from '@/store/global';
 
-import { initialState } from '../../initialState';
-
-const sessionGroupKeys = (s: GlobalStore): string[] =>
-  s.preference.sessionGroupKeys || initialState.preference.sessionGroupKeys;
+const sessionGroupKeys = (s: GlobalStore): string[] => s.preference.expandSessionGroupKeys || [];
 
 const useCmdEnterToSend = (s: GlobalStore): boolean => s.preference.useCmdEnterToSend || false;
 
diff --git a/src/store/global/slices/settings/action.test.ts b/src/store/global/slices/settings/action.test.ts
index bbcc8baee0e9..9c9a8c1718f8 100644
--- a/src/store/global/slices/settings/action.test.ts
+++ b/src/store/global/slices/settings/action.test.ts
@@ -5,8 +5,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { DEFAULT_AGENT, DEFAULT_SETTINGS } from '@/const/settings';
 import { useGlobalStore } from '@/store/global';
 import { SettingsTabs } from '@/store/global/initialState';
-import { LanguageModel } from '@/types/llm';
-import { LobeAgentSettings, SessionGroupItem } from '@/types/session';
+import { LobeAgentSettings } from '@/types/session';
 import { GlobalSettings, OpenAIConfig } from '@/types/settings';
 
 beforeEach(() => {
@@ -18,23 +17,6 @@ vi.mock('@/utils/uuid', () => ({
 }));
 
 describe('SettingsAction', () => {
-  describe('addCustomGroup', () => {
-    it('should add a custom group and update session group keys', () => {
-      const { result } = renderHook(() => useGlobalStore());
-
-      act(() => {
-        const groupId = result.current.addCustomGroup('New Group');
-        expect(groupId).toBe('unique-id');
-      });
-
-      expect(result.current.settings.sessionCustomGroups).toContainEqual({
-        id: 'unique-id',
-        name: 'New Group',
-      });
-      expect(result.current.preference.sessionGroupKeys).toContain('unique-id');
-    });
-  });
-
   describe('importAppSettings', () => {
     it('should import app settings', () => {
       const { result } = renderHook(() => useGlobalStore());
@@ -115,19 +97,6 @@ describe('SettingsAction', () => {
     });
   });
 
-  describe('updateCustomGroup', () => {
-    it('should update custom groups', () => {
-      const { result } = renderHook(() => useGlobalStore());
-      const updatedGroups: SessionGroupItem[] = [{ id: 'group-id', name: 'Updated Group' }];
-
-      act(() => {
-        result.current.updateCustomGroup(updatedGroups);
-      });
-
-      expect(result.current.settings.sessionCustomGroups).toEqual(updatedGroups);
-    });
-  });
-
   describe('updateDefaultAgent', () => {
     it('should update default agent settings', () => {
       const { result } = renderHook(() => useGlobalStore());
diff --git a/src/store/global/slices/settings/action.ts b/src/store/global/slices/settings/action.ts
index 94eb15296867..ccd5b1dfccb6 100644
--- a/src/store/global/slices/settings/action.ts
+++ b/src/store/global/slices/settings/action.ts
@@ -7,11 +7,10 @@ import type { StateCreator } from 'zustand/vanilla';
 import { DEFAULT_AGENT, DEFAULT_SETTINGS } from '@/const/settings';
 import type { GlobalStore } from '@/store/global';
 import { SettingsTabs } from '@/store/global/initialState';
-import { LobeAgentSettings, SessionGroupItem } from '@/types/session';
+import { LobeAgentSettings } from '@/types/session';
 import type { GlobalSettings, OpenAIConfig } from '@/types/settings';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
-import { nanoid } from '@/utils/uuid';
 
 const n = setNamespace('settings');
 
@@ -19,7 +18,6 @@ const n = setNamespace('settings');
  * 设置操作
  */
 export interface SettingsAction {
-  addCustomGroup: (name: string) => string;
   importAppSettings: (settings: GlobalSettings) => void;
   /**
    * 重置设置
@@ -38,7 +36,6 @@ export interface SettingsAction {
    * @param themeMode - 主题模式
    */
   switchThemeMode: (themeMode: ThemeMode) => void;
-  updateCustomGroup: (groups: SessionGroupItem[]) => void;
   updateDefaultAgent: (agent: DeepPartial<LobeAgentSettings>) => void;
 }
 
@@ -48,21 +45,6 @@ export const createSettingsSlice: StateCreator<
   [],
   SettingsAction
 > = (set, get) => ({
-  addCustomGroup: (name) => {
-    const sessionCustomGroups = get().settings.sessionCustomGroups || [];
-
-    const groupId = nanoid();
-    const sessionGroupKeys = get().preference.sessionGroupKeys || [];
-    get().updateCustomGroup([...sessionCustomGroups, { id: groupId, name }]);
-    get().updatePreference(
-      {
-        sessionGroupKeys: [...sessionGroupKeys, groupId],
-      },
-      'addCustomGroup',
-    );
-
-    return groupId;
-  },
   importAppSettings: (importAppSettings) => {
     const { setSettings } = get();
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -101,9 +83,6 @@ export const createSettingsSlice: StateCreator<
   switchThemeMode: (themeMode) => {
     get().setSettings({ themeMode });
   },
-  updateCustomGroup: (groups) => {
-    get().setSettings({ sessionCustomGroups: groups });
-  },
   updateDefaultAgent: (agent) => {
     const settings = produce(get().settings, (draft: GlobalSettings) => {
       draft.defaultAgent = merge(draft.defaultAgent, agent);
diff --git a/src/store/global/slices/settings/selectors.test.ts b/src/store/global/slices/settings/selectors.test.ts
index cfa861acdf63..a6d259d4881c 100644
--- a/src/store/global/slices/settings/selectors.test.ts
+++ b/src/store/global/slices/settings/selectors.test.ts
@@ -292,23 +292,4 @@ describe('settingsSelectors', () => {
       expect(result).toBe(true);
     });
   });
-
-  describe('sessionCustomGroups', () => {
-    it('should return session custom groups', () => {
-      const s = {
-        settings: {
-          sessionCustomGroups: [
-            {
-              name: 'Group 1',
-              id: 'group-1',
-            },
-          ],
-        },
-      } as unknown as GlobalStore;
-
-      const result = settingsSelectors.sessionCustomGroups(s);
-
-      expect(result).toMatchSnapshot();
-    });
-  });
 });
diff --git a/src/store/global/slices/settings/selectors.ts b/src/store/global/slices/settings/selectors.ts
index 514e973cbd37..81112f8c1bae 100644
--- a/src/store/global/slices/settings/selectors.ts
+++ b/src/store/global/slices/settings/selectors.ts
@@ -89,8 +89,6 @@ const currentLanguage = (s: GlobalStore) => {
 const dalleConfig = (s: GlobalStore) => s.settings.tool?.dalle || {};
 const isDalleAutoGenerating = (s: GlobalStore) => s.settings.tool?.dalle?.autoGenerate;
 
-const sessionCustomGroups = (s: GlobalStore) => s.settings.sessionCustomGroups || [];
-
 export const settingsSelectors = {
   currentLanguage,
   currentSettings,
@@ -104,5 +102,4 @@ export const settingsSelectors = {
   modelList: modelListSelectors,
   openAIAPI: openAIAPIKeySelectors,
   openAIProxyUrl: openAIProxyUrlSelectors,
-  sessionCustomGroups,
 };
diff --git a/src/store/global/store.ts b/src/store/global/store.ts
index 1e0e7f4d307d..a7287c8af4bb 100644
--- a/src/store/global/store.ts
+++ b/src/store/global/store.ts
@@ -5,6 +5,7 @@ import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
 import { DEFAULT_AGENT, DEFAULT_LLM_CONFIG } from '@/const/settings';
+import { SessionDefaultGroup } from '@/types/session';
 import { isDev } from '@/utils/env';
 
 import { createHyperStorage } from '../middleware/createHyperStorage';
@@ -32,6 +33,12 @@ const persistOptions: PersistOptions<GlobalStore, GlobalPersist> = {
     return {
       ...currentState,
       ...state,
+      preference: produce(state.preference, (draft) => {
+        if (!draft.expandSessionGroupKeys) {
+          draft.expandSessionGroupKeys = [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default];
+          delete (draft as any).sessionGroupKeys;
+        }
+      }),
       settings: produce(state.settings, (draft) => {
         if (!draft.defaultAgent) {
           draft.defaultAgent = DEFAULT_AGENT;
diff --git a/src/store/session/initialState.ts b/src/store/session/initialState.ts
index db151d5024bc..1db1d69d62f5 100644
--- a/src/store/session/initialState.ts
+++ b/src/store/session/initialState.ts
@@ -1,34 +1,9 @@
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import { SessionState, initialSessionState } from './slices/session/initialState';
+import { SessionGroupState, initSessionGroupState } from './slices/sessionGroup/initialState';
 
-import { LobeAgentSession } from '@/types/session';
-
-export type SessionStoreState = SessionState;
-
-export interface SessionState {
-  /**
-   * @title 当前活动的会话
-   * @description 当前正在编辑或查看的会话
-   */
-  activeId: string;
-  isMobile?: boolean;
-  isSearching: boolean;
-  isSessionsFirstFetchFinished: boolean;
-  /**
-   * 后续看看是否可以将 router 部分的逻辑移出去
-   * @deprecated
-   */
-  router?: AppRouterInstance;
-  searchKeywords: string;
-  searchSessions: LobeAgentSession[];
-  sessions: LobeAgentSession[];
-}
+export interface SessionStoreState extends SessionGroupState, SessionState {}
 
 export const initialState: SessionStoreState = {
-  activeId: 'inbox',
-  isMobile: false,
-  isSearching: false,
-  isSessionsFirstFetchFinished: false,
-  searchKeywords: '',
-  searchSessions: [],
-  sessions: [],
+  ...initSessionGroupState,
+  ...initialSessionState,
 };
diff --git a/src/store/session/selectors.ts b/src/store/session/selectors.ts
index ba10b2cfd39d..258f2805d386 100644
--- a/src/store/session/selectors.ts
+++ b/src/store/session/selectors.ts
@@ -1,2 +1,3 @@
 export { agentSelectors } from './slices/agent/selectors';
-export { sessionExportSelectors, sessionSelectors } from './slices/session/selectors';
+export { sessionSelectors } from './slices/session/selectors';
+export { sessionGroupSelectors } from './slices/sessionGroup/selectors';
diff --git a/src/store/session/slices/session/action.test.ts b/src/store/session/slices/session/action.test.ts
index 766444916736..3eefe577f8dd 100644
--- a/src/store/session/slices/session/action.test.ts
+++ b/src/store/session/slices/session/action.test.ts
@@ -17,6 +17,7 @@ vi.mock('@/services/session', () => ({
     updateSessionGroup: vi.fn(),
     removeSession: vi.fn(),
     getSessions: vi.fn(),
+    updateSessionGroupId: vi.fn(),
     searchSessions: vi.fn(),
   },
 }));
@@ -156,7 +157,7 @@ describe('SessionAction', () => {
         await result.current.pinSession(sessionId, true);
       });
 
-      expect(sessionService.updateSessionGroup).toHaveBeenCalledWith(sessionId, 'pinned');
+      expect(sessionService.updateSessionGroupId).toHaveBeenCalledWith(sessionId, 'pinned');
       expect(mockRefresh).toHaveBeenCalled();
     });
 
@@ -168,22 +169,22 @@ describe('SessionAction', () => {
         await result.current.pinSession(sessionId, false);
       });
 
-      expect(sessionService.updateSessionGroup).toHaveBeenCalledWith(sessionId, 'default');
+      expect(sessionService.updateSessionGroupId).toHaveBeenCalledWith(sessionId, 'default');
       expect(mockRefresh).toHaveBeenCalled();
     });
   });
 
-  describe('updateSessionGroup', () => {
+  describe('updateSessionGroupId', () => {
     it('should update the session group and refresh the list', async () => {
       const { result } = renderHook(() => useSessionStore());
       const sessionId = 'session-id';
       const groupId = 'new-group-id';
 
       await act(async () => {
-        await result.current.updateSessionGroup(sessionId, groupId);
+        await result.current.updateSessionGroupId(sessionId, groupId);
       });
 
-      expect(sessionService.updateSessionGroup).toHaveBeenCalledWith(sessionId, groupId);
+      expect(sessionService.updateSessionGroupId).toHaveBeenCalledWith(sessionId, groupId);
       expect(mockRefresh).toHaveBeenCalled();
     });
   });
diff --git a/src/store/session/slices/session/action.ts b/src/store/session/slices/session/action.ts
index ad53d636dc1e..8771b57d1fb4 100644
--- a/src/store/session/slices/session/action.ts
+++ b/src/store/session/slices/session/action.ts
@@ -11,6 +11,7 @@ import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
 import { SessionStore } from '@/store/session';
 import {
+  ChatSessionList,
   LobeAgentSession,
   LobeAgentSettings,
   LobeSessionType,
@@ -61,7 +62,6 @@ export interface SessionAction {
    * switch session url
    */
   switchSession: (sessionId?: string) => void;
-  updateSessionGroup: (sessionId: string, groupId: string) => void;
   /**
    * A custom hook that uses SWR to fetch sessions data.
    */
@@ -128,7 +128,7 @@ export const createSessionSlice: StateCreator<
   },
 
   pinSession: async (sessionId, pinned) => {
-    await sessionService.updateSessionGroup(sessionId, pinned ? 'pinned' : 'default');
+    await sessionService.updateSessionGroupId(sessionId, pinned ? 'pinned' : 'default');
 
     await get().refreshSessions();
   },
@@ -145,6 +145,7 @@ export const createSessionSlice: StateCreator<
       get().switchSession();
     }
   },
+
   switchSession: (sessionId = INBOX_SESSION_ID) => {
     const { isMobile, router } = get();
 
@@ -153,26 +154,25 @@ export const createSessionSlice: StateCreator<
     // TODO: 后续可以把 router 移除
     router?.push(SESSION_CHAT_URL(sessionId, isMobile));
   },
-  updateSessionGroup: async (sessionId, groupId) => {
-    await sessionService.updateSessionGroup(sessionId, groupId);
 
-    await get().refreshSessions();
-  },
   useFetchSessions: () =>
-    useSWR<LobeSessions>(FETCH_SESSIONS_KEY, sessionService.getSessions, {
+    useSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getSessionsWithGroup, {
       onSuccess: (data) => {
         // 由于 https://github.com/lobehub/lobe-chat/pull/541 的关系
         // 只有触发了 refreshSessions 才会更新 sessions，进而触发页面 rerender
-        // 因此这里不能补充判断，否则会导致页面不更新
+        // 因此这里不能补充 equal 判断，否则会导致页面不更新
+        // if (get().isSessionsFirstFetchFinished && isEqual(get().sessions, data)) return;
+
         // TODO：后续的根本解法应该是解除 inbox 和 session 的数据耦合
         // 避免互相依赖的情况出现
 
-        // if (get().isSessionsFirstFetchFinished && isEqual(get().sessions, data)) return;
-
         set(
           {
+            customSessionGroups: data.customGroup,
+            defaultSessions: data.default,
             isSessionsFirstFetchFinished: true,
-            sessions: data,
+            pinnedSessions: data.pinned,
+            sessions: data.all,
           },
           false,
           n('useFetchSessions/onSuccess', data),
diff --git a/src/store/session/slices/session/initialState.ts b/src/store/session/slices/session/initialState.ts
index 631fe75c41e7..f4fc08ea28a4 100644
--- a/src/store/session/slices/session/initialState.ts
+++ b/src/store/session/slices/session/initialState.ts
@@ -1,6 +1,8 @@
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
-import { LobeAgentSession, LobeSessionType } from '@/types/session';
+import { CustomSessionGroup, LobeAgentSession, LobeSessionType } from '@/types/session';
 
 export const initLobeSession: LobeAgentSession = {
   config: DEFAULT_AGENT_CONFIG,
@@ -10,3 +12,41 @@ export const initLobeSession: LobeAgentSession = {
   type: LobeSessionType.Agent,
   updatedAt: Date.now(),
 };
+
+export interface SessionState {
+  /**
+   * @title 当前活动的会话
+   * @description 当前正在编辑或查看的会话
+   */
+  activeId: string;
+  customSessionGroups: CustomSessionGroup[];
+  defaultSessions: LobeAgentSession[];
+  isMobile?: boolean;
+  isSearching: boolean;
+  isSessionsFirstFetchFinished: boolean;
+  pinnedSessions: LobeAgentSession[];
+  /**
+   * 后续看看是否可以将 router 部分的逻辑移出去
+   * @deprecated
+   */
+  router?: AppRouterInstance;
+  searchKeywords: string;
+  searchSessions: LobeAgentSession[];
+  /**
+   * it means defaultSessions
+   */
+  sessions: LobeAgentSession[];
+}
+
+export const initialSessionState: SessionState = {
+  activeId: 'inbox',
+  customSessionGroups: [],
+  defaultSessions: [],
+  isMobile: false,
+  isSearching: false,
+  isSessionsFirstFetchFinished: false,
+  pinnedSessions: [],
+  searchKeywords: '',
+  searchSessions: [],
+  sessions: [],
+};
diff --git a/src/store/session/slices/session/selectors/export.ts b/src/store/session/slices/session/selectors/export.ts
deleted file mode 100644
index a9ae6e1603c3..000000000000
--- a/src/store/session/slices/session/selectors/export.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { transform } from 'lodash-es';
-
-import { SessionStore } from '@/store/session';
-import { ConfigStateAgents, ConfigStateSessions } from '@/types/exportConfig';
-import { LobeAgentSession, LobeSessions } from '@/types/session';
-
-import { sessionHelpers } from '../helpers';
-
-const exportSessions = (s: SessionStore): Pick<ConfigStateSessions, 'sessions'> => ({
-  sessions: s.sessions,
-});
-
-const exportAgents = (s: SessionStore): ConfigStateAgents => {
-  return {
-    sessions: transform(s.sessions, (result: LobeSessions, value, key) => {
-      // 移除 chats 和 topics
-      result[key] = { ...value, chats: {}, topics: {} } as LobeAgentSession;
-    }),
-  };
-};
-
-const getExportAgent =
-  (id: string) =>
-  (s: SessionStore): LobeAgentSession =>
-    sessionHelpers.getSessionById(id, s.sessions);
-
-export const sessionExportSelectors = {
-  exportAgents,
-  exportSessions,
-  getExportAgent,
-};
diff --git a/src/store/session/slices/session/selectors/index.ts b/src/store/session/slices/session/selectors/index.ts
index a1e9d2a81286..71825137f468 100644
--- a/src/store/session/slices/session/selectors/index.ts
+++ b/src/store/session/slices/session/selectors/index.ts
@@ -1,2 +1 @@
-export * from './export';
 export * from './list';
diff --git a/src/store/session/slices/session/selectors/list.ts b/src/store/session/slices/session/selectors/list.ts
index b2703904fa30..dddb149d21ad 100644
--- a/src/store/session/slices/session/selectors/list.ts
+++ b/src/store/session/slices/session/selectors/list.ts
@@ -1,54 +1,23 @@
 import { INBOX_SESSION_ID } from '@/const/session';
-import { groupHelpers } from '@/store/global/helpers';
 import { sessionHelpers } from '@/store/session/slices/session/helpers';
 import { MetaData } from '@/types/meta';
-import {
-  LobeAgentSession,
-  LobeSessions,
-  SessionDefaultGroup,
-  SessionGroupItem,
-} from '@/types/session';
+import { CustomSessionGroup, LobeAgentSession, LobeSessions } from '@/types/session';
 
 import { SessionStore } from '../../../store';
 import { initLobeSession } from '../initialState';
 
-const defaultSessions = (s: SessionStore): LobeSessions => s.sessions;
+const defaultSessions = (s: SessionStore): LobeSessions => s.defaultSessions;
+const pinnedSessions = (s: SessionStore): LobeSessions => s.pinnedSessions;
+const customSessionGroups = (s: SessionStore): CustomSessionGroup[] => s.customSessionGroups;
 
-const searchSessions = (s: SessionStore): LobeSessions => s.searchSessions;
-
-const sessionList = (sessionCustomGroups: SessionGroupItem[]) => (s: SessionStore) => {
-  const customList: Record<string, LobeAgentSession[]> = {};
-  const defaultList: LobeAgentSession[] = [];
-  const pinnedList: LobeAgentSession[] = [];
-
-  for (const session of defaultSessions(s)) {
-    if (!session.group || session.group === SessionDefaultGroup.Default) {
-      defaultList.push(session);
-    } else if (session.group === SessionDefaultGroup.Pinned) {
-      pinnedList.push(session);
-    } else {
-      const group = groupHelpers.getGroupById(session.group, sessionCustomGroups);
-      if (!group) {
-        s.updateSessionGroup(session.id, SessionDefaultGroup.Default);
-        defaultList.push(session);
-        continue;
-      }
-      customList[session.group] = customList[session.group] || [];
-      customList[session.group].push(session);
-    }
-  }
+const allSessions = (s: SessionStore): LobeSessions => s.sessions;
 
-  return {
-    customList,
-    defaultList,
-    pinnedList,
-  };
-};
+const searchSessions = (s: SessionStore): LobeSessions => s.searchSessions;
 
 const getSessionById =
   (id: string) =>
   (s: SessionStore): LobeAgentSession =>
-    sessionHelpers.getSessionById(id, s.sessions);
+    sessionHelpers.getSessionById(id, allSessions(s));
 
 const getSessionMetaById =
   (id: string) =>
@@ -62,7 +31,7 @@ const getSessionMetaById =
 const currentSession = (s: SessionStore): LobeAgentSession | undefined => {
   if (!s.activeId) return;
 
-  return s.sessions.find((i) => i.id === s.activeId);
+  return allSessions(s).find((i) => i.id === s.activeId);
 };
 
 const currentSessionSafe = (s: SessionStore): LobeAgentSession => {
@@ -81,12 +50,14 @@ const isSomeSessionActive = (s: SessionStore) => !!s.activeId && isSessionListIn
 export const sessionSelectors = {
   currentSession,
   currentSessionSafe,
+  customSessionGroups,
+  defaultSessions,
   getSessionById,
   getSessionMetaById,
   hasCustomAgents,
   isInboxSession,
   isSessionListInit,
   isSomeSessionActive,
+  pinnedSessions,
   searchSessions,
-  sessionList,
 };
diff --git a/src/store/session/slices/sessionGroup/action.ts b/src/store/session/slices/sessionGroup/action.ts
new file mode 100644
index 000000000000..99a8dcdf0caf
--- /dev/null
+++ b/src/store/session/slices/sessionGroup/action.ts
@@ -0,0 +1,47 @@
+import { StateCreator } from 'zustand/vanilla';
+
+import { sessionService } from '@/services/session';
+import { SessionStore } from '@/store/session';
+import { SessionGroupItem } from '@/types/session';
+
+export interface SessionGroupAction {
+  addSessionGroup: (name: string) => Promise<string>;
+  removeSessionGroup: (id: string) => Promise<void>;
+  updateSessionGroupId: (sessionId: string, groupId: string) => Promise<void>;
+  updateSessionGroupName: (id: string, name: string) => Promise<void>;
+  updateSessionGroupSort: (items: SessionGroupItem[]) => Promise<void>;
+}
+
+export const createSessionGroupSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionGroupAction
+> = (set, get) => ({
+  addSessionGroup: async (name) => {
+    const id = await sessionService.createSessionGroup(name);
+
+    await get().refreshSessions();
+
+    return id;
+  },
+  removeSessionGroup: async (id) => {
+    await sessionService.removeSessionGroup(id);
+    await get().refreshSessions();
+  },
+  updateSessionGroupId: async (sessionId, groupId) => {
+    await sessionService.updateSessionGroupId(sessionId, groupId);
+
+    await get().refreshSessions();
+  },
+  updateSessionGroupName: async (id, name) => {
+    await sessionService.updateSessionGroup(id, { name });
+    await get().refreshSessions();
+  },
+
+  updateSessionGroupSort: async (items) => {
+    const sortMap = items.map((item, index) => ({ id: item.id, sort: index }));
+    await sessionService.updateSessionGroupOrder(sortMap);
+    await get().refreshSessions();
+  },
+});
diff --git a/src/store/session/slices/sessionGroup/initialState.ts b/src/store/session/slices/sessionGroup/initialState.ts
new file mode 100644
index 000000000000..77b7a8c2e3bc
--- /dev/null
+++ b/src/store/session/slices/sessionGroup/initialState.ts
@@ -0,0 +1,5 @@
+export interface SessionGroupState {
+  activeGroupId?: string;
+}
+
+export const initSessionGroupState: SessionGroupState = {};
diff --git a/src/store/session/slices/sessionGroup/selectors.ts b/src/store/session/slices/sessionGroup/selectors.ts
new file mode 100644
index 000000000000..8dbb09e5ab47
--- /dev/null
+++ b/src/store/session/slices/sessionGroup/selectors.ts
@@ -0,0 +1,15 @@
+import { SessionStore } from '@/store/session';
+
+const sessionGroupItems = (s: SessionStore) =>
+  s.customSessionGroups.map((group) => ({
+    id: group.id,
+    name: group.name,
+  }));
+
+const getGroupById = (id: string) => (s: SessionStore) =>
+  sessionGroupItems(s).find((group) => group.id === id);
+
+export const sessionGroupSelectors = {
+  getGroupById,
+  sessionGroupItems,
+};
diff --git a/src/store/session/store.ts b/src/store/session/store.ts
index 9e08bf428787..f79d2ec6ddc6 100644
--- a/src/store/session/store.ts
+++ b/src/store/session/store.ts
@@ -8,17 +8,24 @@ import { isDev } from '@/utils/env';
 import { SessionStoreState, initialState } from './initialState';
 import { AgentAction, createAgentSlice } from './slices/agent/action';
 import { SessionAction, createSessionSlice } from './slices/session/action';
+import { SessionGroupAction, createSessionGroupSlice } from './slices/sessionGroup/action';
 
 //  ===============  聚合 createStoreFn ============ //
 
-export type SessionStore = SessionAction & AgentAction & SessionStoreState;
+export interface SessionStore
+  extends SessionAction,
+    AgentAction,
+    SessionGroupAction,
+    SessionStoreState {}
+
 const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
   ...initialState,
   ...createAgentSlice(...parameters),
   ...createSessionSlice(...parameters),
+  ...createSessionGroupSlice(...parameters),
 });
 
-//  ===============  实装 useStore ============ //
+//  ===============  implement useStore ============ //
 
 export const useSessionStore = createWithEqualityFn<SessionStore>()(
   subscribeWithSelector(
diff --git a/src/types/session.ts b/src/types/session.ts
index b33cc6b0f9c6..627905fe3afa 100644
--- a/src/types/session.ts
+++ b/src/types/session.ts
@@ -15,10 +15,15 @@ export enum SessionDefaultGroup {
 }
 
 export interface SessionGroupItem {
-  id: SessionGroupId;
+  createdAt: number;
+  id: string;
   name: string;
+  sort?: number;
+  updatedAt: number;
 }
 
+export type SessionGroups = SessionGroupItem[];
+
 /**
  * Lobe Agent
  */
@@ -37,3 +42,16 @@ export interface LobeAgentSettings {
 }
 
 export type LobeSessions = LobeAgentSession[];
+
+export interface CustomSessionGroup {
+  children: LobeSessions;
+  id: SessionGroupId;
+  name: string;
+}
+
+export interface ChatSessionList {
+  all: LobeSessions;
+  customGroup: CustomSessionGroup[];
+  default: LobeSessions;
+  pinned: LobeSessions;
+}
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 2ea21473302d..23dc775cbe39 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -3,7 +3,6 @@ import type { ThemeMode } from 'antd-style';
 
 import { LocaleMode } from '@/types/locale';
 import type { LobeAgentSession } from '@/types/session';
-import { SessionGroupItem } from '@/types/session';
 
 export interface GlobalBaseSettings {
   avatar: string;
@@ -12,7 +11,6 @@ export interface GlobalBaseSettings {
   neutralColor?: NeutralColors;
   password: string;
   primaryColor?: PrimaryColors;
-  sessionCustomGroups: SessionGroupItem[];
   themeMode: ThemeMode;
 }
 

From 4c08b6813c40b6634287e5dc234e10b1686ac0e1 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Mon, 22 Jan 2024 16:46:01 +0800
Subject: [PATCH 05/20] =?UTF-8?q?=F0=9F=94=A5=20chore:=20clean=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/global/helpers.ts                 |  2 -
 src/store/global/slices/settings/helpers.ts | 42 ---------------------
 2 files changed, 44 deletions(-)
 delete mode 100644 src/store/global/slices/settings/helpers.ts

diff --git a/src/store/global/helpers.ts b/src/store/global/helpers.ts
index cc88a6575d0d..f2b8ced737c6 100644
--- a/src/store/global/helpers.ts
+++ b/src/store/global/helpers.ts
@@ -6,5 +6,3 @@ const getCurrentLanguage = () => settingsSelectors.currentLanguage(useGlobalStor
 export const globalHelpers = {
   getCurrentLanguage,
 };
-
-export * from './slices/settings/helpers';
diff --git a/src/store/global/slices/settings/helpers.ts b/src/store/global/slices/settings/helpers.ts
deleted file mode 100644
index 4ee9d39b60a5..000000000000
--- a/src/store/global/slices/settings/helpers.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { SessionGroupItem } from '@/types/session';
-
-const getGroupByName = (
-  name: string,
-  customGroups: SessionGroupItem[] = [],
-): SessionGroupItem | undefined => {
-  return customGroups.find((group) => group.name === name);
-};
-
-const getGroupById = (
-  id: string,
-  customGroups: SessionGroupItem[] = [],
-): SessionGroupItem | undefined => {
-  return customGroups.find((group) => group.id === id);
-};
-
-const removeGroup = (id: string, customGroups: SessionGroupItem[] = []): SessionGroupItem[] => {
-  return customGroups.filter((group) => group.id !== id);
-};
-
-const renameGroup = (
-  id: string,
-  name: string,
-  customGroups: SessionGroupItem[] = [],
-): SessionGroupItem[] => {
-  return customGroups.map((group) => {
-    if (group.id === id) {
-      return {
-        ...group,
-        name,
-      };
-    }
-    return group;
-  });
-};
-
-export const groupHelpers = {
-  getGroupById,
-  getGroupByName,
-  removeGroup,
-  renameGroup,
-};

From 6156240eef1cfdd57f40e304d1c774d493545ac3 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Mon, 22 Jan 2024 23:49:29 +0800
Subject: [PATCH 06/20] =?UTF-8?q?=F0=9F=97=83=EF=B8=8F=20fix:=20add=20migr?=
 =?UTF-8?q?ation=20to=20new=20data=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/database/core/db.ts                       |  21 +-
 src/database/models/__tests__/session.test.ts |   2 +-
 src/database/models/message.ts                |  15 +-
 src/database/models/session.ts                |  90 ++++++--
 src/database/schemas/session.ts               |   1 +
 .../FromV2ToV3/fixtures/input-v2-session.json |  72 +++++++
 .../fixtures/output-v3-from-v1.json           | 203 ++++++++++++++++++
 .../FromV2ToV3/fixtures/output-v3.json        |  74 +++++++
 src/migrations/FromV2ToV3/index.ts            |  29 +++
 src/migrations/FromV2ToV3/migrations.test.ts  |  42 ++++
 src/migrations/FromV2ToV3/types/v3.ts         |  18 ++
 src/migrations/index.ts                       |   8 +-
 src/services/session.ts                       |   3 +
 .../session/slices/session/action.test.ts     |   5 +-
 src/store/session/slices/session/action.ts    |   4 +-
 src/store/session/slices/session/helpers.ts   |   5 +-
 src/types/session.ts                          |   1 +
 17 files changed, 553 insertions(+), 40 deletions(-)
 create mode 100644 src/migrations/FromV2ToV3/fixtures/input-v2-session.json
 create mode 100644 src/migrations/FromV2ToV3/fixtures/output-v3-from-v1.json
 create mode 100644 src/migrations/FromV2ToV3/fixtures/output-v3.json
 create mode 100644 src/migrations/FromV2ToV3/index.ts
 create mode 100644 src/migrations/FromV2ToV3/migrations.test.ts
 create mode 100644 src/migrations/FromV2ToV3/types/v3.ts

diff --git a/src/database/core/db.ts b/src/database/core/db.ts
index 59615bb821ff..3cba16c2760b 100644
--- a/src/database/core/db.ts
+++ b/src/database/core/db.ts
@@ -1,4 +1,4 @@
-import Dexie from 'dexie';
+import Dexie, { Transaction } from 'dexie';
 
 import { DBModel } from '@/database/core/types/db';
 import { DB_File } from '@/database/schemas/files';
@@ -33,7 +33,9 @@ export class LocalDB extends Dexie {
     this.version(1).stores(dbSchemaV1);
     this.version(2).stores(dbSchemaV2);
     this.version(3).stores(dbSchemaV3);
-    this.version(4).stores(dbSchemaV4);
+    this.version(4)
+      .stores(dbSchemaV4)
+      .upgrade((trans) => this.upgradeToV4(trans));
 
     this.files = this.table('files');
     this.sessions = this.table('sessions');
@@ -42,6 +44,21 @@ export class LocalDB extends Dexie {
     this.plugins = this.table('plugins');
     this.sessionGroups = this.table('sessionGroups');
   }
+
+  /**
+   * 2024.01.22
+   *
+   * DB V3 to V4
+   * from `group = pinned` to `pinned:true`
+   */
+  upgradeToV4 = async (trans: Transaction) => {
+    const sessions = trans.table('sessions');
+    await sessions.toCollection().modify((session) => {
+      // translate boolean to number
+      session.pinned = session.group === 'pinned' ? 1 : 0;
+      session.group = 'default';
+    });
+  };
 }
 
 export const LocalDBInstance = new LocalDB();
diff --git a/src/database/models/__tests__/session.test.ts b/src/database/models/__tests__/session.test.ts
index 65dabdecc451..53ae54acaf87 100644
--- a/src/database/models/__tests__/session.test.ts
+++ b/src/database/models/__tests__/session.test.ts
@@ -63,7 +63,7 @@ describe('SessionModel', () => {
     const group: SessionGroupId = 'testGroup';
     await SessionModel.batchCreate([sessionData, sessionData] as LobeAgentSession[]);
 
-    const sessionsByGroup = await SessionModel.queryByGroup(group);
+    const sessionsByGroup = await SessionModel.querySessionsByGroupId(group);
 
     // Assuming all created sessions belong to the same group
     expect(sessionsByGroup).toHaveLength(2);
diff --git a/src/database/models/message.ts b/src/database/models/message.ts
index 2de63244f6b7..e88121e1d555 100644
--- a/src/database/models/message.ts
+++ b/src/database/models/message.ts
@@ -132,7 +132,7 @@ class _MessageModel extends BaseModel {
 
   /**
    * Deletes multiple messages based on the assistantId and optionally the topicId.
-   * If topicId is not provided, it deletes messages where topicId is undefined.
+   * If topicId is not provided, it deletes messages where topicId is undefined or null.
    * If topicId is provided, it deletes messages with that specific topicId.
    *
    * @param {string} sessionId - The identifier of the assistant associated with the messages.
@@ -142,13 +142,12 @@ class _MessageModel extends BaseModel {
   async batchDelete(sessionId: string, topicId: string | undefined): Promise<void> {
     // If topicId is specified, use both assistantId and topicId as the filter criteria in the query.
     // Otherwise, filter by assistantId and require that topicId is undefined.
-    const query =
-      topicId !== undefined
-        ? this.table.where({ sessionId, topicId }) // Use a compound index
-        : this.table
-            .where('sessionId')
-            .equals(sessionId)
-            .and((message) => message.topicId === undefined);
+    const query = !!topicId
+      ? this.table.where({ sessionId, topicId }) // Use a compound index
+      : this.table
+          .where('sessionId')
+          .equals(sessionId)
+          .and((message) => !message.topicId);
 
     // Retrieve a collection of message IDs that satisfy the criteria
     const messageIds = await query.primaryKeys();
diff --git a/src/database/models/session.ts b/src/database/models/session.ts
index 2d7cd33ffdd4..120b93553fd2 100644
--- a/src/database/models/session.ts
+++ b/src/database/models/session.ts
@@ -27,7 +27,9 @@ class _SessionModel extends BaseModel {
   }
 
   async batchCreate(sessions: LobeAgentSession[]) {
-    return this._batchAdd(sessions, { idGenerator: uuid });
+    const DB_Sessions = sessions.map((s) => this.mapToDB_Session(s));
+
+    return this._batchAdd<DB_Session>(DB_Sessions, { idGenerator: uuid });
   }
 
   async query({
@@ -36,20 +38,52 @@ class _SessionModel extends BaseModel {
   }: { current?: number; pageSize?: number } = {}): Promise<LobeSessions> {
     const offset = current * pageSize;
 
-    return this.table.orderBy('updatedAt').reverse().offset(offset).limit(pageSize).toArray();
+    const items: DBModel<DB_Session>[] = await this.table
+      .orderBy('updatedAt')
+      .reverse()
+      .offset(offset)
+      .limit(pageSize)
+      .toArray();
+
+    return this.mapToAgentSessions(items);
+  }
+
+  async queryWithGroups(): Promise<ChatSessionList> {
+    const groups = await SessionGroupModel.query();
+    const customGroups = await this.queryByGroupIds(groups.map((item) => item.id));
+    const defaultItems = await this.querySessionsByGroupId(SessionDefaultGroup.Default);
+    const pinnedItems = await this.getPinnedSessions();
+
+    const all = await this.query();
+    return {
+      all,
+      customGroup: groups.map((group) => ({
+        ...group,
+        children: customGroups[group.id],
+      })),
+      default: defaultItems,
+      pinned: pinnedItems,
+    };
   }
 
   /**
    * get sessions by group
    * @param group
    */
-  async queryByGroup(group: SessionGroupId): Promise<LobeSessions> {
-    return this.table.where('group').equals(group).toArray();
+  async querySessionsByGroupId(group: SessionGroupId): Promise<LobeSessions> {
+    const items: DBModel<DB_Session>[] = await this.table
+      .where('group')
+      .equals(group)
+      .and((session) => !session.pinned)
+      .reverse()
+      .sortBy('updatedAt');
+
+    return this.mapToAgentSessions(items);
   }
 
   async queryByGroupIds(groups: string[]) {
     const pools = groups.map(async (id) => {
-      return [id, await this.queryByGroup(id)] as const;
+      return [id, await this.querySessionsByGroupId(id)] as const;
     });
     const groupItems = await Promise.all(pools);
 
@@ -60,6 +94,10 @@ class _SessionModel extends BaseModel {
     return super._update(id, data);
   }
 
+  async updatePinned(id: string, pinned: boolean) {
+    return this.update(id, { pinned: pinned ? 1 : 0 });
+  }
+
   async updateConfig(id: string, data: DeepPartial<LobeAgentConfig>) {
     const session = await this.findById(id);
     if (!session) return;
@@ -68,6 +106,7 @@ class _SessionModel extends BaseModel {
 
     return this.update(id, { config });
   }
+
   /**
    * Delete a session , also delete all messages and topic associated with it.
    */
@@ -164,13 +203,13 @@ class _SessionModel extends BaseModel {
     ]);
 
     // Retrieve unique sessions by IDs
-    const data = await this.table
+    const items: DBModel<DB_Session>[] = await this.table
       .where('id')
       .anyOf([...combinedSessionIds])
       .toArray();
 
     console.timeEnd('queryByKeyword');
-    return data;
+    return this.mapToAgentSessions(items);
   }
 
   async duplicate(id: string, newTitle?: string) {
@@ -182,25 +221,34 @@ class _SessionModel extends BaseModel {
     return this._add(newSession, uuid());
   }
 
-  async queryWithGroups(): Promise<ChatSessionList> {
-    const groups = await SessionGroupModel.query();
-    const customGroups = await this.queryByGroupIds(groups.map((item) => item.id));
+  async getPinnedSessions(): Promise<LobeSessions> {
+    const items: DBModel<DB_Session>[] = await this.table
+      .where('pinned')
+      .equals(1)
+      .reverse()
+      .sortBy('updatedAt');
 
-    const defaultItems = await this.queryByGroup(SessionDefaultGroup.Default);
-    const pinnedItems = await this.queryByGroup(SessionDefaultGroup.Pinned);
-    // const pinnedItems = await this.table.where('pinned').equals(1).toArray();
+    return this.mapToAgentSessions(items);
+  }
 
-    const all = await this.query();
+  private mapToDB_Session(session: LobeAgentSession): DBModel<DB_Session> {
     return {
-      all,
-      customGroup: groups.map((group) => ({
-        ...group,
-        children: customGroups[group.id],
-      })),
-      default: defaultItems,
-      pinned: pinnedItems,
+      ...session,
+      group: session.group || SessionDefaultGroup.Default,
+      pinned: session.pinned ? 1 : 0,
     };
   }
+
+  private DB_SessionToAgentSession(session: DBModel<DB_Session>) {
+    return {
+      ...session,
+      pinned: !!session.pinned,
+    } as LobeAgentSession;
+  }
+
+  private mapToAgentSessions(session: DBModel<DB_Session>[]) {
+    return session.map((item) => this.DB_SessionToAgentSession(item));
+  }
 }
 
 export const SessionModel = new _SessionModel();
diff --git a/src/database/schemas/session.ts b/src/database/schemas/session.ts
index 61ee0dc4a75b..32abfb3e9f20 100644
--- a/src/database/schemas/session.ts
+++ b/src/database/schemas/session.ts
@@ -50,6 +50,7 @@ export const DB_SessionSchema = z.object({
   config: AgentSchema,
   group: z.string().default('default'),
   meta: LobeMetaDataSchema,
+  pinned: z.number().int().min(0).max(1).optional(),
   type: z.enum(['agent', 'group']).default('agent'),
 });
 
diff --git a/src/migrations/FromV2ToV3/fixtures/input-v2-session.json b/src/migrations/FromV2ToV3/fixtures/input-v2-session.json
new file mode 100644
index 000000000000..bf00c049a9e2
--- /dev/null
+++ b/src/migrations/FromV2ToV3/fixtures/input-v2-session.json
@@ -0,0 +1,72 @@
+{
+  "exportType": "sessions",
+  "state": {
+    "sessions": [
+      {
+        "config": {
+          "displayMode": "chat",
+          "historyCount": 1,
+          "model": "gpt-3.5-turbo",
+          "params": {
+            "frequency_penalty": 0,
+            "presence_penalty": 0,
+            "temperature": 0.6,
+            "top_p": 1,
+            "max_tokens": 2200
+          },
+          "plugins": [],
+          "systemRole": "你是一名 Postgresql 的数据库专家。用户是一名数据库小白，你需要使用简单直白的方式告诉用户如何使用 ostgresql 和它相应的 orm 工具 primsa",
+          "enableCompressThreshold": false,
+          "enableMaxTokens": false,
+          "inputTemplate": ""
+        },
+        "createdAt": 1698463356269,
+        "id": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "meta": {
+          "avatar": "🐘",
+          "backgroundColor": "rgba(0,0,0,0)",
+          "title": "Postgresql 指南",
+          "description": "PostgreSQL 数据库和 Prisma ORM 工具的简单使用指南",
+          "tags": ["数据库", "PostgreSQL", "教程", "ORM", "Prisma"]
+        },
+        "type": "agent",
+        "updatedAt": 1698463356269,
+        "group": "pinned"
+      },
+      {
+        "config": {
+          "displayMode": "chat",
+          "historyCount": 1,
+          "model": "gpt-3.5-turbo",
+          "params": {
+            "frequency_penalty": 0,
+            "presence_penalty": 0,
+            "temperature": 0.6,
+            "top_p": 1,
+            "max_tokens": 2200
+          },
+          "plugins": [],
+          "systemRole": "你是一名 Postgresql 的数据库专家。用户是一名数据库小白，你需要使用简单直白的方式告诉用户如何使用 ostgresql 和它相应的 orm 工具 primsa",
+          "enableCompressThreshold": false,
+          "enableMaxTokens": false,
+          "inputTemplate": ""
+        },
+        "createdAt": 1698463356269,
+        "id": "06cc3e20-e870-4098-a619-c07a849d74dd",
+        "meta": {
+          "avatar": "🐘",
+          "backgroundColor": "rgba(0,0,0,0)",
+          "title": "Postgresql 指南",
+          "description": "PostgreSQL 数据库和 Prisma ORM 工具的简单使用指南",
+          "tags": ["数据库", "PostgreSQL", "教程", "ORM", "Prisma"]
+        },
+        "type": "agent",
+        "updatedAt": 1698463356269,
+        "group": "default"
+      }
+    ],
+    "topics": [],
+    "messages": []
+  },
+  "version": 2
+}
diff --git a/src/migrations/FromV2ToV3/fixtures/output-v3-from-v1.json b/src/migrations/FromV2ToV3/fixtures/output-v3-from-v1.json
new file mode 100644
index 000000000000..b6b39f4417e0
--- /dev/null
+++ b/src/migrations/FromV2ToV3/fixtures/output-v3-from-v1.json
@@ -0,0 +1,203 @@
+{
+  "exportType": "sessions",
+  "state": {
+    "sessions": [
+      {
+        "config": {
+          "displayMode": "chat",
+          "historyCount": 1,
+          "model": "gpt-3.5-turbo",
+          "params": {
+            "frequency_penalty": 0,
+            "presence_penalty": 0,
+            "temperature": 0.6,
+            "top_p": 1,
+            "max_tokens": 2200
+          },
+          "plugins": [],
+          "systemRole": "你是一名 Postgresql 的数据库专家。用户是一名数据库小白，你需要使用简单直白的方式告诉用户如何使用 ostgresql 和它相应的 orm 工具 primsa",
+          "enableCompressThreshold": false,
+          "enableMaxTokens": false,
+          "inputTemplate": ""
+        },
+        "createdAt": 1698463356269,
+        "id": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "meta": {
+          "avatar": "🐘",
+          "backgroundColor": "rgba(0,0,0,0)",
+          "title": "Postgresql 指南",
+          "description": "PostgreSQL 数据库和 Prisma ORM 工具的简单使用指南",
+          "tags": ["数据库", "PostgreSQL", "教程", "ORM", "Prisma"]
+        },
+        "type": "agent",
+        "updatedAt": 1698463356269,
+        "group": "default",
+        "pinned": true
+      }
+    ],
+    "topics": [
+      {
+        "createdAt": 1698463911747,
+        "id": "CZg3IEdy",
+        "title": "Prisma中的cuid函数作用是什么",
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "updatedAt": 1698463915716
+      },
+      {
+        "createdAt": 1698754463117,
+        "id": "MNWhBEh5",
+        "title": "启动 PostgreSQL Docker 镜像方法",
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "updatedAt": 1698754464867
+      }
+    ],
+    "messages": [
+      {
+        "content": "是的，你可以使用 Prisma 来自定义生成 `id` 的逻辑，例如使用 `nanoid` 库来生成唯一标识符。\n\n首先，你需要在项目中安装 `nanoid` 库：\n\n```\nnpm install nanoid\n```\n\n然后，你可以在 Prisma 的模型定义中使用 `@default` 指令，并提供一个自定义的默认值函数来生成 `id`。\n\n```prisma\nmodel Message {\n  id String @id @default(dbgenerated(\"nanoid(10)\"))\n\n  createdAt DateTime @default(now())\n  updatedAt DateTime @updatedAt\n}\n```\n\n在上述模型定义中，我们使用 `dbgenerated` 指令来定义一个自定义的默认值函数。函数 `nanoid(10)` 会生成一个长度为 10 的唯一标识符。\n\n请注意，使用自定义的 `id` 生成逻辑可能会对数据库性能产生一些影响，因为每次创建新记录时都需要执行自定义函数。因此，请确保你的自定义逻辑是高效的，并在实际使用中进行测试和评估性能。",
+        "createdAt": 1698463981313,
+        "id": "n2Tsl3Dm",
+        "meta": {},
+        "parentId": "JSZaJOGj",
+        "role": "assistant",
+        "updatedAt": 1698464004494,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "topicId": "CZg3IEdy",
+        "fromModel": "gpt-3.5-turbo"
+      },
+      {
+        "content": "如何指定 自定义函数的引入位置？",
+        "createdAt": 1698464173224,
+        "id": "xPft8Msa",
+        "meta": {},
+        "role": "user",
+        "updatedAt": 1698464173226,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "topicId": "CZg3IEdy"
+      },
+      {
+        "content": "在 Prisma 中，你可以通过在 `schema.prisma` 文件的顶部使用 `generator` 块来指定自定义函数的引入位置。\n\n例如，假设你想使用 `nanoid` 库来生成自定义的 `id`，你可以按照以下方式配置：\n\n```prisma\ngenerator client {\n  provider = \"prisma-client-js\"\n  output   = \"./node_modules/@prisma/client\"\n}\n\ngenerator dbgenerated {\n  provider = \"prisma-dbgenerator\"\n  output   = \"./node_modules/@prisma/client\"\n  binaryTargets = [\"native\"]\n  previewFeatures = [\"nativeTypes\"]\n  config = {\n    \"generator\": {\n      \"dbgenerated\": {\n        \"output\": \"./src/db/generated\",\n        \"provider\": \"./src/db/generated/provider.js\"\n      }\n    }\n  }\n}\n```\n\n在上述配置中，我们定义了两个生成器。`client` 生成器用于生成 Prisma 客户端代码，而 `dbgenerated` 生成器用于生成数据库相关的代码。\n\n注意到 `dbgenerated` 生成器的 `config` 部分中有一个 `provider` 字段，它指定了自定义函数的引入位置。在这个示例中，我们将自定义函数放在 `./src/db/generated/provider.js` 文件中。\n\n你可以根据你的项目结构和需要来调整路径和文件名，确保指定的 `provider` 路径正确引入了自定义函数。",
+        "createdAt": 1698464173228,
+        "id": "jZc2KKRs",
+        "meta": {},
+        "parentId": "xPft8Msa",
+        "role": "assistant",
+        "updatedAt": 1698464181896,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "topicId": "CZg3IEdy",
+        "fromModel": "gpt-3.5-turbo"
+      },
+      {
+        "content": "如何启动一个 postgres Docker 镜像？",
+        "createdAt": 1698754460196,
+        "id": "LjG9XSuq",
+        "meta": {},
+        "role": "user",
+        "updatedAt": 1698754463118,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "topicId": "MNWhBEh5"
+      },
+      {
+        "content": "要启动一个 PostgreSQL Docker 镜像，你可以按照以下步骤操作：\n\n1. 首先，确保你已经安装了 Docker，可以在终端中运行 `docker --version` 来检查。\n\n2. 在终端中运行以下命令以下载并启动一个 PostgreSQL 镜像：\n\n   ```shell\n   docker run --name my-postgres -e POSTGRES_PASSWORD=mysecretpassword -p 5432:5432 -d postgres\n   ```\n\n   这将从 Docker Hub 下载 PostgreSQL 镜像",
+        "createdAt": 1698754479751,
+        "id": "CL7E1Mc5",
+        "meta": {},
+        "parentId": "LjG9XSuq",
+        "role": "assistant",
+        "updatedAt": 1698754507690,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "topicId": "MNWhBEh5",
+        "fromModel": "gpt-3.5-turbo"
+      },
+      {
+        "content": "如何指定本地存储的目录到 /www/database/postgres",
+        "createdAt": 1698754591763,
+        "id": "UIvHZr7m",
+        "meta": {},
+        "role": "user",
+        "updatedAt": 1698754591764,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "topicId": "MNWhBEh5"
+      },
+      {
+        "content": "要将本地存储的目录映射到容器内的 `/var/lib/postgresql/data` 目录，你可以使用 Docker 的 `-v` 参数。\n\n以下是示例命令：\n\n```shell\ndocker run --name my-postgres -e POSTGRES_PASSWORD=mysecretpassword -p 5432:5432 -v /www/database/postgres:/var/lib/postgresql/data -d postgres\n```\n\n在这个命令中，我们使用了 `-v` 参数来指定本地目录 `/www/database/postgres` 映射到容器内的 `/var/lib/postgresql/data` 目录。这样，所有的 PostgreSQL 数据将会保存在本地指定的目录中。",
+        "createdAt": 1698754591765,
+        "id": "XLJOK44r",
+        "meta": {},
+        "parentId": "UIvHZr7m",
+        "role": "assistant",
+        "updatedAt": 1698754609275,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "topicId": "MNWhBEh5",
+        "fromModel": "gpt-3.5-turbo"
+      },
+      {
+        "content": "docker run --name postgres -e POSTGRES_PASSWORD=DSLapHYdzNrai5j6 -p 33300:5432 -v /www/database/postgres:/var/lib/postgresql/data -d postgres",
+        "createdAt": 1698754700529,
+        "id": "W3J6jQjm",
+        "meta": {},
+        "role": "user",
+        "updatedAt": 1698754700530,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "topicId": "MNWhBEh5"
+      },
+      {
+        "content": "如何启动 pgadmin",
+        "createdAt": 1698755749886,
+        "id": "L7mq0ehV",
+        "meta": {},
+        "role": "user",
+        "updatedAt": 1698755749888,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "topicId": "MNWhBEh5"
+      },
+      {
+        "content": "要启动 pgAdmin，你可以按照以下步骤操作：\n\n1. 首先，确保你已经安装了 Docker，并且已经成功启动了 PostgreSQL Docker 容器。\n\n2. 在终端中运行以下命令以启动 pgAdmin Docker 容器：\n\n   ```shell\n   docker run --name my-pgadmin -p 5050:80 -e PGADMIN_DEFAULT_EMAIL=myemail@example.com -e PGADMIN_DEFAULT_PASSWORD=mypassword -d dpage/pgadmin4\n   ```\n\n   在这个命令中，我们使用了 `-p` 参数来将容器的端口 80 映射到本地的端口 5050。你可以根据需要修改这个端口映射。\n\n   我们还使用了 `-e` 参数来设置 pgAdmin 的默认登录邮箱和密码。你可以根据需要修改这些值。\n\n3. 在浏览器中访问 `http://localhost:5050`，你将看到 pgAdmin 的登录界面。\n\n4. 使用在上一步中设置的邮箱和密码进行登录。\n\n5. 在 pgAdmin 中，你可以添加一个新的服务器连接，以连接到运行在 Docker 容器中的 PostgreSQL 数据库。要添加一个新的服务器连接，你需要提供以下信息：\n\n   - 主机名/地址：使用 Docker 容器的 IP 地址或者 `localhost`。\n   - 端口：使用 Docker 容器中 PostgreSQL 的映射端口，例如 33300。\n   - 用户名和密码：使用在启动 PostgreSQL 容器时设置的用户名和密码。\n\n   完成上述信息的填写后，点击保存并连接到 PostgreSQL 服务器。\n\n现在，你已经成功启动了 pgAdmin 并连接到了你的 PostgreSQL 数据库。你可以使用 pgAdmin 来管理和操作你的数据库。",
+        "createdAt": 1698755749889,
+        "id": "d5XTX9EQ",
+        "meta": {},
+        "parentId": "L7mq0ehV",
+        "role": "assistant",
+        "updatedAt": 1698755786183,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "topicId": "MNWhBEh5",
+        "fromModel": "gpt-3.5-turbo"
+      },
+      {
+        "content": "abcabc",
+        "createdAt": 1690650544852,
+        "id": "KPPDiRyW",
+        "meta": {},
+        "parentId": "42k72jMi",
+        "role": "function",
+        "updatedAt": 1690650572399,
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+
+        "fromModel": "gpt-3.5-turbo-16k",
+        "plugin": {
+          "apiName": "websiteCrawler",
+          "arguments": "{\n  \"url\": \"https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651264337&idx=1&sn=d7d9126578c74c912e1f0d42cb5629da&chksm=bd48ccd58a3f45c3f2cbc7d7b732c820b9e7cd6b547c06acc8170b233710b5fb5ed62f5fd94d&mpshare=1&scene=1&srcid=07294Mpw7C6JCLgtagL1cBDR&sharer_sharetime=1690622712877&sharer_shareid=0358058a42fc25387d28337fc3d22c3c#rd\"\n}",
+          "identifier": "websiteCrawler",
+          "type": "default"
+        }
+      },
+      {
+        "content": "bbbbb",
+        "createdAt": 1700065743405,
+        "id": "9cRjevRQ",
+        "meta": {},
+        "parentId": "3nDXtEKv",
+        "role": "function",
+        "sessionId": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "updatedAt": 1700065751861,
+        "fromModel": "gpt-3.5-turbo-16k",
+        "plugin": {
+          "apiName": "getWebsiteContent",
+          "arguments": "{\n  \"url\": \"https://nodejs.org/api/packages.html#dual-package-hazard\"\n}",
+          "identifier": "website-crawler",
+          "type": "default"
+        }
+      }
+    ]
+  },
+  "version": 3
+}
diff --git a/src/migrations/FromV2ToV3/fixtures/output-v3.json b/src/migrations/FromV2ToV3/fixtures/output-v3.json
new file mode 100644
index 000000000000..f551f7ce8b63
--- /dev/null
+++ b/src/migrations/FromV2ToV3/fixtures/output-v3.json
@@ -0,0 +1,74 @@
+{
+  "exportType": "sessions",
+  "state": {
+    "sessions": [
+      {
+        "config": {
+          "displayMode": "chat",
+          "historyCount": 1,
+          "model": "gpt-3.5-turbo",
+          "params": {
+            "frequency_penalty": 0,
+            "presence_penalty": 0,
+            "temperature": 0.6,
+            "top_p": 1,
+            "max_tokens": 2200
+          },
+          "plugins": [],
+          "systemRole": "你是一名 Postgresql 的数据库专家。用户是一名数据库小白，你需要使用简单直白的方式告诉用户如何使用 ostgresql 和它相应的 orm 工具 primsa",
+          "enableCompressThreshold": false,
+          "enableMaxTokens": false,
+          "inputTemplate": ""
+        },
+        "createdAt": 1698463356269,
+        "id": "06cc3e20-e870-4099-a619-c07a849d742d",
+        "meta": {
+          "avatar": "🐘",
+          "backgroundColor": "rgba(0,0,0,0)",
+          "title": "Postgresql 指南",
+          "description": "PostgreSQL 数据库和 Prisma ORM 工具的简单使用指南",
+          "tags": ["数据库", "PostgreSQL", "教程", "ORM", "Prisma"]
+        },
+        "type": "agent",
+        "updatedAt": 1698463356269,
+        "group": "default",
+        "pinned": true
+      },
+      {
+        "config": {
+          "displayMode": "chat",
+          "historyCount": 1,
+          "model": "gpt-3.5-turbo",
+          "params": {
+            "frequency_penalty": 0,
+            "presence_penalty": 0,
+            "temperature": 0.6,
+            "top_p": 1,
+            "max_tokens": 2200
+          },
+          "plugins": [],
+          "systemRole": "你是一名 Postgresql 的数据库专家。用户是一名数据库小白，你需要使用简单直白的方式告诉用户如何使用 ostgresql 和它相应的 orm 工具 primsa",
+          "enableCompressThreshold": false,
+          "enableMaxTokens": false,
+          "inputTemplate": ""
+        },
+        "createdAt": 1698463356269,
+        "id": "06cc3e20-e870-4098-a619-c07a849d74dd",
+        "meta": {
+          "avatar": "🐘",
+          "backgroundColor": "rgba(0,0,0,0)",
+          "title": "Postgresql 指南",
+          "description": "PostgreSQL 数据库和 Prisma ORM 工具的简单使用指南",
+          "tags": ["数据库", "PostgreSQL", "教程", "ORM", "Prisma"]
+        },
+        "type": "agent",
+        "updatedAt": 1698463356269,
+        "group": "default",
+        "pinned": false
+      }
+    ],
+    "topics": [],
+    "messages": []
+  },
+  "version": 3
+}
diff --git a/src/migrations/FromV2ToV3/index.ts b/src/migrations/FromV2ToV3/index.ts
new file mode 100644
index 000000000000..158a4b93bebd
--- /dev/null
+++ b/src/migrations/FromV2ToV3/index.ts
@@ -0,0 +1,29 @@
+import type { Migration, MigrationData } from '@/migrations/VersionController';
+
+import { V2ConfigState, V2Session } from '../FromV1ToV2/types/v2';
+import { V3ConfigState, V3Session } from './types/v3';
+
+export class MigrationV2ToV3 implements Migration {
+  // from this version to start migration
+  version = 2;
+
+  migrate(data: MigrationData<V2ConfigState>): MigrationData<V3ConfigState> {
+    const { sessions } = data.state;
+
+    return {
+      ...data,
+      state: {
+        ...data.state,
+        sessions: sessions.map((s) => this.migrateSession(s)),
+      },
+    };
+  }
+
+  migrateSession = (session: V2Session): V3Session => {
+    return {
+      ...session,
+      group: 'default',
+      pinned: session.group === 'pinned',
+    };
+  };
+}
diff --git a/src/migrations/FromV2ToV3/migrations.test.ts b/src/migrations/FromV2ToV3/migrations.test.ts
new file mode 100644
index 000000000000..fd9315a52d73
--- /dev/null
+++ b/src/migrations/FromV2ToV3/migrations.test.ts
@@ -0,0 +1,42 @@
+import { MigrationData, VersionController } from '@/migrations/VersionController';
+
+import { MigrationV1ToV2 } from '../FromV1ToV2';
+import inputV1Data from '../FromV1ToV2/fixtures/input-v1-session.json';
+import inputV2Data from './fixtures/input-v2-session.json';
+import outputV3DataFromV1 from './fixtures/output-v3-from-v1.json';
+import outputV3Data from './fixtures/output-v3.json';
+import { MigrationV2ToV3 } from './index';
+
+describe('MigrationV2ToV3', () => {
+  let migrations;
+  let versionController: VersionController<any>;
+
+  beforeEach(() => {
+    migrations = [MigrationV2ToV3];
+    versionController = new VersionController(migrations, 3);
+  });
+
+  it('should migrate data correctly through multiple versions', () => {
+    const data: MigrationData = inputV2Data;
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3Data.version);
+    expect(migratedData.state.sessions).toEqual(outputV3Data.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3Data.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3Data.state.messages);
+  });
+
+  it('should work correct from v1 to v3', () => {
+    const data: MigrationData = inputV1Data;
+
+    versionController = new VersionController([MigrationV2ToV3, MigrationV1ToV2], 3);
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3DataFromV1.version);
+    expect(migratedData.state.sessions).toEqual(outputV3DataFromV1.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3DataFromV1.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3DataFromV1.state.messages);
+  });
+});
diff --git a/src/migrations/FromV2ToV3/types/v3.ts b/src/migrations/FromV2ToV3/types/v3.ts
new file mode 100644
index 000000000000..52c50fe0c75b
--- /dev/null
+++ b/src/migrations/FromV2ToV3/types/v3.ts
@@ -0,0 +1,18 @@
+import { V1Config } from '@/migrations/FromV1ToV2/types/v1';
+
+import { Meta, V2ConfigState } from '../../FromV1ToV2/types/v2';
+
+export interface V3ConfigState extends V2ConfigState {
+  sessions: V3Session[];
+}
+
+export interface V3Session {
+  config: V1Config;
+  createdAt: number;
+  group: 'default';
+  id: string;
+  meta: Meta;
+  pinned?: boolean;
+  type: string;
+  updatedAt: number;
+}
diff --git a/src/migrations/index.ts b/src/migrations/index.ts
index 8bcb91e39ef9..7a6b31894433 100644
--- a/src/migrations/index.ts
+++ b/src/migrations/index.ts
@@ -1,3 +1,4 @@
+import { MigrationV2ToV3 } from '@/migrations/FromV2ToV3';
 import { VersionController } from '@/migrations/VersionController';
 import { ConfigStateAll } from '@/types/exportConfig';
 
@@ -5,10 +6,15 @@ import { MigrationV0ToV1 } from './FromV0ToV1';
 import { MigrationV1ToV2 } from './FromV1ToV2';
 
 // 当前最新的版本号
-export const CURRENT_CONFIG_VERSION = 2;
+export const CURRENT_CONFIG_VERSION = 3;
 
 // 历史记录版本升级模块
 const ConfigMigrations = [
+  /**
+   * 2024.01.22
+   * from `group = pinned` to `pinned:true`
+   */
+  MigrationV2ToV3,
   /**
    * 2023.11.27
    * 从单 key 数据库转换为基于 dexie 的关系型结构
diff --git a/src/services/session.ts b/src/services/session.ts
index 15002ae3020b..d5896313490c 100644
--- a/src/services/session.ts
+++ b/src/services/session.ts
@@ -65,6 +65,9 @@ class SessionService {
   async updateSessionGroupId(id: string, group: SessionGroupId) {
     return SessionModel.update(id, { group });
   }
+  async updateSessionPinned(id: string, pinned: boolean) {
+    return SessionModel.updatePinned(id, pinned);
+  }
 
   async updateSessionMeta(activeId: string, meta: Partial<MetaData>) {
     return SessionModel.update(activeId, { meta });
diff --git a/src/store/session/slices/session/action.test.ts b/src/store/session/slices/session/action.test.ts
index 3eefe577f8dd..0ba31817165a 100644
--- a/src/store/session/slices/session/action.test.ts
+++ b/src/store/session/slices/session/action.test.ts
@@ -19,6 +19,7 @@ vi.mock('@/services/session', () => ({
     getSessions: vi.fn(),
     updateSessionGroupId: vi.fn(),
     searchSessions: vi.fn(),
+    updateSessionPinned: vi.fn(),
   },
 }));
 
@@ -157,7 +158,7 @@ describe('SessionAction', () => {
         await result.current.pinSession(sessionId, true);
       });
 
-      expect(sessionService.updateSessionGroupId).toHaveBeenCalledWith(sessionId, 'pinned');
+      expect(sessionService.updateSessionPinned).toHaveBeenCalledWith(sessionId, true);
       expect(mockRefresh).toHaveBeenCalled();
     });
 
@@ -169,7 +170,7 @@ describe('SessionAction', () => {
         await result.current.pinSession(sessionId, false);
       });
 
-      expect(sessionService.updateSessionGroupId).toHaveBeenCalledWith(sessionId, 'default');
+      expect(sessionService.updateSessionPinned).toHaveBeenCalledWith(sessionId, false);
       expect(mockRefresh).toHaveBeenCalled();
     });
   });
diff --git a/src/store/session/slices/session/action.ts b/src/store/session/slices/session/action.ts
index 8771b57d1fb4..2946694e224d 100644
--- a/src/store/session/slices/session/action.ts
+++ b/src/store/session/slices/session/action.ts
@@ -48,7 +48,7 @@ export interface SessionAction {
   /**
    * Pins or unpins a session.
    */
-  pinSession: (id: string, pinned?: boolean) => Promise<void>;
+  pinSession: (id: string, pinned: boolean) => Promise<void>;
   /**
    * re-fetch the data
    */
@@ -128,7 +128,7 @@ export const createSessionSlice: StateCreator<
   },
 
   pinSession: async (sessionId, pinned) => {
-    await sessionService.updateSessionGroupId(sessionId, pinned ? 'pinned' : 'default');
+    await sessionService.updateSessionPinned(sessionId, pinned);
 
     await get().refreshSessions();
   },
diff --git a/src/store/session/slices/session/helpers.ts b/src/store/session/slices/session/helpers.ts
index d640edb981b4..cf5dddb77e6b 100644
--- a/src/store/session/slices/session/helpers.ts
+++ b/src/store/session/slices/session/helpers.ts
@@ -1,9 +1,8 @@
-import { LobeAgentSession, LobeSessions, SessionDefaultGroup } from '@/types/session';
+import { LobeAgentSession, LobeSessions } from '@/types/session';
 
 import { initLobeSession } from './initialState';
 
-export const getSessionPinned = (session: LobeAgentSession) =>
-  session.group === SessionDefaultGroup.Pinned;
+export const getSessionPinned = (session: LobeAgentSession) => session.pinned;
 
 const getSessionById = (id: string, sessions: LobeSessions): LobeAgentSession => {
   const session = sessions.find((s) => s.id === id);
diff --git a/src/types/session.ts b/src/types/session.ts
index 627905fe3afa..39ef89edb9af 100644
--- a/src/types/session.ts
+++ b/src/types/session.ts
@@ -30,6 +30,7 @@ export type SessionGroups = SessionGroupItem[];
 export interface LobeAgentSession extends BaseDataModel {
   config: LobeAgentConfig;
   group?: SessionGroupId;
+  pinned?: boolean;
   type: LobeSessionType.Agent;
 }
 

From ff22e955059969b2cd4791bbf5592fea281d88c4 Mon Sep 17 00:00:00 2001
From: Arvin Xu <arvinx@foxmail.com>
Date: Mon, 22 Jan 2024 23:50:53 +0800
Subject: [PATCH 07/20] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20a=20document?=
 =?UTF-8?q?=20of=20how=20to=20implement=20a=20complete=20feature=20(#1120)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Create Database.zh-CN.md

* Update Database.zh-CN.md

* 📝 docs: update docs

* Update Database.zh-CN.md
---
 ...ent.md => Feature-Development-Frontend.md} |   0
 .../Feature-Development-Frontend.zh-CN.md     | 126 +++++
 docs/Development/Feature-Development.zh-CN.md | 472 +++++++++++++++---
 .../State-Management-Intro.md                 |   0
 .../State-Management-Intro.zh-CN.md           |  18 +-
 ...ctors.md => State-Management-Selectors.md} |   0
 ...md => State-Management-Selectors.zh-CN.md} |   0
 docs/Home.md                                  |   1 +
 docs/_Sidebar.md                              |   1 +
 9 files changed, 526 insertions(+), 92 deletions(-)
 rename docs/Development/{Feature-Development.md => Feature-Development-Frontend.md} (100%)
 create mode 100644 docs/Development/Feature-Development-Frontend.zh-CN.md
 rename docs/Development/{State-Management => }/State-Management-Intro.md (100%)
 rename docs/Development/{State-Management => }/State-Management-Intro.zh-CN.md (95%)
 rename docs/Development/{State-Management/Selectors.md => State-Management-Selectors.md} (100%)
 rename docs/Development/{State-Management/Selectors.zh-CN.md => State-Management-Selectors.zh-CN.md} (100%)

diff --git a/docs/Development/Feature-Development.md b/docs/Development/Feature-Development-Frontend.md
similarity index 100%
rename from docs/Development/Feature-Development.md
rename to docs/Development/Feature-Development-Frontend.md
diff --git a/docs/Development/Feature-Development-Frontend.zh-CN.md b/docs/Development/Feature-Development-Frontend.zh-CN.md
new file mode 100644
index 000000000000..4a4c4111d923
--- /dev/null
+++ b/docs/Development/Feature-Development-Frontend.zh-CN.md
@@ -0,0 +1,126 @@
+# 如何开发一个新功能：前端实现
+
+LobeChat 基于 Next.js 框架构建，使用 TypeScript 作为主要开发语言。在开发新功能时，我们需要遵循一定的开发流程，以确保代码的质量和稳定性。大致的流程分为以下五步：
+
+1. 路由：定义路由 (`src/app`)
+2. 数据结构： 定义数据结构 ( `src/types` )
+3. 业务功能实现： zustand store (`src/store`)
+4. 页面展示：书写静态组件 / 页面 (`src/app/<new-page>/features/<new-feature>.tsx`)
+5. 功能绑定：绑定 store 与页面的触发 (`const  [state,function]= useNewStore(s=>[s.state,s.function])`)
+
+我们以 "会话消息" 功能为例，以下是实现这个功能的简要步骤：
+
+#### TOC
+
+- [1. 定义路由](#1-定义路由)
+- [2. 定义数据结构](#2-定义数据结构)
+- [3. 创建 Zustand Store](#3-创建-zustand-store)
+- [4. 创建页面与组件](#4-创建页面与组件)
+- [5. 功能绑定](#5-功能绑定)
+
+## 1. 定义路由
+
+在 `src/app` 目录下，我们需要定义一个新的路由来承载 "会话消息" 页面。一般来说，我们会在 `src/app` 下创建一个新的文件夹，例如 `chat`，并且在这个文件夹中创建 `page.tsx`文件，在该文件中导出 React 组件作为页面的主体。
+
+```tsx
+// src/app/chat/page.tsx
+import ChatPage from './features/chat';
+
+export default ChatPage;
+```
+
+## 2. 定义数据结构
+
+在 `src/types` 目录下，我们需要定义 "会话消息" 的数据结构。例如，我们创建一个 `chat.ts` 文件，并在其中定义 `ChatMessage` 类型：
+
+```ts
+// src/types/chat.ts
+
+export type ChatMessage = {
+  id: string;
+  content: string;
+  timestamp: number;
+  sender: 'user' | 'bot';
+};
+```
+
+## 3. 创建 Zustand Store
+
+在 `src/store` 目录下，我们需要创建一个新的 Zustand Store 来管理 "会话消息" 的状态。例如，我们创建一个 `chatStore.ts` 文件，并在其中定义一个 Zustand Store：
+
+```ts
+// src/store/chatStore.ts
+import create from 'zustand';
+
+type ChatState = {
+  messages: ChatMessage[];
+  addMessage: (message: ChatMessage) => void;
+};
+
+export const useChatStore = create<ChatState>((set) => ({
+  messages: [],
+  addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
+}));
+```
+
+## 4. 创建页面与组件
+
+在 `src/app/<new-page>/features/<new-feature>.tsx` 中，我们需要创建一个新的页面或组件来显示 "会话消息"。在这个文件中，我们可以使用上面创建的 Zustand Store，以及 Ant Design 的组件来构建 UI：
+
+```jsx
+// src/features/chat/index.tsx
+import { List, Typography } from 'antd';
+import { useChatStore } from 'src/store/chatStore';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+
+  return (
+    <List
+      dataSource={messages}
+      renderItem={(message) => (
+        <List.Item>
+          <Typography.Text>{message.content}</Typography.Text>
+        </List.Item>
+      )}
+    />
+  );
+};
+
+export default ChatPage;
+```
+
+## 5. 功能绑定
+
+在页面或组件中，我们需要将 Zustand Store 的状态和方法绑定到 UI 上。在上面的示例中，我们已经将 `messages` 状态绑定到了列表的 `dataSource` 属性上。现在，我们还需要一个方法来添加新的消息。我们可以在 Zustand Store 中定义这个方法，然后在页面或组件中使用它：
+
+```jsx
+import { Button } from 'antd';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+  const addMessage = useChatStore((state) => state.addMessage);
+
+  const handleSend = () => {
+    addMessage({ id: '1', content: 'Hello, world!', timestamp: Date.now(), sender: 'user' });
+  };
+
+  return (
+    <>
+      <List
+        dataSource={messages}
+        renderItem={(message) => (
+          <List.Item>
+            <Typography.Text>{message.content}</Typography.Text>
+          </List.Item>
+        )}
+      />
+      <Button onClick={handleSend}>Send</Button>
+    </>
+  );
+};
+
+export default ChatPage;
+```
+
+以上就是在 LobeChat 中实现 "会话消息" 功能的步骤。当然，在 LobeChat 的实际开发中，真实场景所面临的业务诉求和场景远比上述 demo 复杂，请根据实际情况进行开发。
diff --git a/docs/Development/Feature-Development.zh-CN.md b/docs/Development/Feature-Development.zh-CN.md
index 13a3fd251ef1..dc6b1fde75dd 100644
--- a/docs/Development/Feature-Development.zh-CN.md
+++ b/docs/Development/Feature-Development.zh-CN.md
@@ -1,126 +1,432 @@
-# 如何开发一个新功能
+# LobeChat 功能开发完全指南
 
-LobeChat 基于 Next.js 框架构建，使用 TypeScript 作为主要开发语言。在开发新功能时，我们需要遵循一定的开发流程，以确保代码的质量和稳定性。大致的流程分为以下五步：
+本文档旨在指导开发者了解我们在 LobeChat 中的完整功能实现流程。我们将以 sessionGroup 的实现为例：[✨ feat: add session group manager](https://github.com/lobehub/lobe-chat/pull/1055) . 介绍完整实现流程。
 
-1. 路由：定义路由 (`src/app`)
-2. 数据结构： 定义数据结构 ( `src/types` )
-3. 业务功能实现： zustand store (`src/store`)
-4. 页面展示：书写静态组件 / 页面 (`src/app/<new-page>/features/<new-feature>.tsx`)
-5. 功能绑定：绑定 store 与页面的触发 (`const  [state,function]= useNewStore(s=>[s.state,s.function])`)
+本文通过以下五个主要部分来阐述完整的实现流程：
 
-我们以 "会话消息" 功能为例，以下是实现这个功能的简要步骤：
+1. 数据模型 / 数据库定义
+2. Service 实现 / Model 实现
+3. 前端数据流 Store 实现
+4. UI 实现与 action 绑定
+5. 数据迁移
 
-#### TOC
+## 一、数据库部分
 
-- [1. 定义路由](#1-定义路由)
-- [2. 定义数据结构](#2-定义数据结构)
-- [3. 创建 Zustand Store](#3-创建-zustand-store)
-- [4. 创建页面与组件](#4-创建页面与组件)
-- [5. 功能绑定](#5-功能绑定)
+为了实现 Session Group 功能，首先需要在数据库层面定义相关的数据模型和索引。
 
-## 1. 定义路由
+定义一个新的 sessionGroup 表，分 4 步：
 
-在 `src/app` 目录下，我们需要定义一个新的路由来承载 "会话消息" 页面。一般来说，我们会在 `src/app` 下创建一个新的文件夹，例如 `chat`，并且在这个文件夹中创建 `page.tsx`文件，在该文件中导出 React 组件作为页面的主体。
+### 1. 建立数据模型 schema
 
-```tsx
-// src/app/chat/page.tsx
-import ChatPage from './features/chat';
+在 `src/database/schema/sessionGroup.ts` 中定义 `DB_SessionGroup` 的数据模型：
+
+```typescript
+import { z } from 'zod';
+
+export const DB_SessionGroupSchema = z.object({
+  name: z.string(),
+  sort: z.number().optional(),
+});
 
-export default ChatPage;
+export type DB_SessionGroup = z.infer<typeof DB_SessionGroupSchema>;
 ```
 
-## 2. 定义数据结构
+### 2. 创建数据库索引
 
-在 `src/types` 目录下，我们需要定义 "会话消息" 的数据结构。例如，我们创建一个 `chat.ts` 文件，并在其中定义 `ChatMessage` 类型：
+由于新增了一个表，需要在在数据库 Schema 中，为 `sessionGroup` 表添加索引。
 
-```ts
-// src/types/chat.ts
+在 `src/database/core/schema.ts` 中添加 `dbSchemaV4`:
+
+```diff
+// ... 前面的一些实现
 
-export type ChatMessage = {
-  id: string;
-  content: string;
-  timestamp: number;
-  sender: 'user' | 'bot';
+// ************************************** //
+// ******* Version 3 - 2023-12-06 ******* //
+// ************************************** //
+// - Added `plugin` table
+
+export const dbSchemaV3 = {
+  ...dbSchemaV2,
+  plugins:
+    '&identifier, type, manifest.type, manifest.meta.title, manifest.meta.description, manifest.meta.author, createdAt, updatedAt',
 };
+
++ // ************************************** //
++ // ******* Version 4 - 2024-01-21 ******* //
++ // ************************************** //
++ // - Added `sessionGroup` table
+
++ export const dbSchemaV4 = {
++   ...dbSchemaV3,
++   sessionGroups: '&id, name, sort, createdAt, updatedAt',
++   sessions: '&id, type, group, pinned, meta.title, meta.description, meta.tags, createdAt, updatedAt',
+};
+```
+
+### 3. 在 db 中加入 sessionGroups 表
+
+扩展本地核心 DB `LocalDB` 类以包含新的 `sessionGroups` 表：
+
+```diff
+
+import { dbSchemaV1, dbSchemaV2, dbSchemaV3, dbSchemaV4 } from './schemas';
+
+interface LobeDBSchemaMap {
+  files: DB_File;
+  messages: DB_Message;
+  plugins: DB_Plugin;
++ sessionGroups: DB_SessionGroup;
+  sessions: DB_Session;
+  topics: DB_Topic;
+}
+
+// Define a local DB
+export class LocalDB extends Dexie {
+  public files: LobeDBTable<'files'>;
+  public sessions: LobeDBTable<'sessions'>;
+  public messages: LobeDBTable<'messages'>;
+  public topics: LobeDBTable<'topics'>;
+  public plugins: LobeDBTable<'plugins'>;
++ public sessionGroups: LobeDBTable<'sessionGroups'>;
+
+  constructor() {
+    super('LOBE_CHAT_DB');
+    this.version(1).stores(dbSchemaV1);
+    this.version(2).stores(dbSchemaV2);
+    this.version(3).stores(dbSchemaV3);
++   this.version(4).stores(dbSchemaV4);
+
+    this.files = this.table('files');
+    this.sessions = this.table('sessions');
+    this.messages = this.table('messages');
+    this.topics = this.table('topics');
+    this.plugins = this.table('plugins');
++   this.sessionGroups = this.table('sessionGroups');
+  }
+}
+```
+
+> \[!Note]
+>
+> 在最后一部分，还包含了数据迁移相关的工作，由于本节只关注 schema 定义，因此不呈现迁移代码。
+
+### 4. 定义 Model
+
+在 `model/sessionGroup.ts` 中定义 `SessionGroupModel`：
+
+```typescript
+import { BaseModel } from '@/database/core';
+import { DB_SessionGroup, DB_SessionGroupSchema } from '@/database/schemas/sessionGroup';
+import { nanoid } from '@/utils/uuid';
+
+class _SessionGroupModel extends BaseModel {
+  constructor() {
+    super('sessions', DB_SessionGroupSchema);
+  }
+
+  async create(name: string, sort?: number, id = nanoid()) {
+    return this._add({ name, sort }, id);
+  }
+
+  // ... 其他 CRUD 方法的实现
+}
+
+export const SessionGroupModel = new _SessionGroupModel();
 ```
 
-## 3. 创建 Zustand Store
+## 二、Service 部分
 
-在 `src/store` 目录下，我们需要创建一个新的 Zustand Store 来管理 "会话消息" 的状态。例如，我们创建一个 `chatStore.ts` 文件，并在其中定义一个 Zustand Store：
+在 `sessionService` 中实现 Session Group 相关的请求逻辑：
+
+```typescript
+class SessionService {
+  // ... 省略 session 业务逻辑
+
+  // ************************************** //
+  // ***********  SessionGroup  *********** //
+  // ************************************** //
+
+  async createSessionGroup(name: string, sort?: number) {
+    const item = await SessionGroupModel.create(name, sort);
+    if (!item) {
+      throw new Error('session group create Error');
+    }
+
+    return item.id;
+  }
+
+  // ... 其他 SessionGroup 相关的实现
+}
+```
+
+把 sessionGroup 的实现放到 sessionService 的考虑是，可以让会话 Session 领域更加内聚。如果未来对 sessionGroup 有了更多的要求，可以考虑再单独拆除。例如 chat 就是从 session 中拆出来的一个独立域。
+
+## 三、Store Action 部分
+
+### sessionGroup CRUD
+
+在 `src/store/session/slice/sessionGroup` 中实现 Session Group 相关的逻辑。
+
+以 `action.ts` 为例，需要实现的方法有：
 
 ```ts
-// src/store/chatStore.ts
-import create from 'zustand';
+export interface SessionGroupAction {
+  // 增
+  addSessionGroup: (name: string) => Promise<string>;
+  // 删
+  removeSessionGroup: (id: string) => Promise<void>;
+  // 为 session 修改它的 groupId
+  updateSessionGroupId: (sessionId: string, groupId: string) => Promise<void>;
+  // 改组名
+  updateSessionGroupName: (id: string, name: string) => Promise<void>;
+  // 改分组排序
+  updateSessionGroupSort: (items: SessionGroupItem[]) => Promise<void>;
+}
+```
 
-type ChatState = {
-  messages: ChatMessage[];
-  addMessage: (message: ChatMessage) => void;
-};
+以 `addSessionGroup` 为例，在 action 中调用 sessionService，并使用 `refreshSessions` 刷新 sessions 数据：
 
-export const useChatStore = create<ChatState>((set) => ({
-  messages: [],
-  addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
-}));
+```ts
+export const createSessionGroupSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionGroupAction
+> = (set, get) => ({
+  addSessionGroup: async (name) => {
+    const id = await sessionService.createSessionGroup(name);
+    await get().refreshSessions();
+    return id;
+  },
+  // ... 其他 action 实现
+});
 ```
 
-## 4. 创建页面与组件
+### sessions 分组
 
-在 `src/app/<new-page>/features/<new-feature>.tsx` 中，我们需要创建一个新的页面或组件来显示 "会话消息"。在这个文件中，我们可以使用上面创建的 Zustand Store，以及 Ant Design 的组件来构建 UI：
+由于本次实现，会从单一的 sessions 变成 pinnedSessions、customSessionGroups 和 defaultSessions 三个，请求数据的逻辑也发生了变化：
 
-```jsx
-// src/features/chat/index.tsx
-import { List, Typography } from 'antd';
-import { useChatStore } from 'src/store/chatStore';
+```ts
+export const createSessionSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionAction
+> = (set, get) => ({
+  // ... 其他方法
+  useFetchSessions: () =>
+    useSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getSessionsWithGroup, {
+      onSuccess: (data) => {
+        set(
+          {
+            customSessionGroups: data.customGroup,
+            defaultSessions: data.default,
+            isSessionsFirstFetchFinished: true,
+            pinnedSessions: data.pinned,
+            sessions: data.all,
+          },
+          false,
+          n('useFetchSessions/onSuccess', data),
+        );
+      },
+    }),
+});
+```
+
+取数逻辑在 `sessionService.getSessionsWithGroup` ，直接调用了 `SessionModel.queryWithGroups()` 实现取数：
 
-const ChatPage = () => {
-  const messages = useChatStore((state) => state.messages);
+```ts
+class _SessionModel extends BaseModel {
+  // ... 其他方法
+
+  async queryWithGroups(): Promise<ChatSessionList> {
+    const groups = await SessionGroupModel.query();
+    const customGroups = await this.queryByGroupIds(groups.map((item) => item.id));
+    const defaultItems = await this.querySessionsByGroupId(SessionDefaultGroup.Default);
+    const pinnedItems = await this.getPinnedSessions();
+
+    const all = await this.query();
+    return {
+      all,
+      customGroup: groups.map((group) => ({
+        ...group,
+        children: customGroups[group.id],
+      })),
+      default: defaultItems,
+      pinned: pinnedItems,
+    };
+  }
+}
+```
+
+## 四、UI 部分
+
+在 UI 组件中绑定 Store Action 实现交互逻辑，例如 `CreateGroupModal`：
+
+```tsx
+const CreateGroupModal = () => {
+  // ... 其他逻辑
+
+  const [updateSessionGroup, addCustomGroup] = useSessionStore((s) => [
+    s.updateSessionGroupId,
+    s.addSessionGroup,
+  ]);
 
   return (
-    <List
-      dataSource={messages}
-      renderItem={(message) => (
-        <List.Item>
-          <Typography.Text>{message.content}</Typography.Text>
-        </List.Item>
-      )}
-    />
+    <Modal
+      onOk={async () => {
+        // ... 其他逻辑
+        const groupId = await addCustomGroup(name);
+        await updateSessionGroup(sessionId, groupId);
+      }}
+    >
+      {/* ... */}
+    </Modal>
   );
 };
+```
+
+## 五、数据迁移部分
+
+一般的迭代不太需要关心数据迁移问题，而一旦遇到旧的数据结构无法满足新的需求时，就需要考虑数据迁移的问题了。
+
+在本次实现中，session 的 group 字段可以说是典型案例。
+
+之前通过将其标记为 `pinned` 和 `default` 来区分置顶与分组。但是如果存在多个分组时，这种模式就无法满足了。
 
-export default ChatPage;
 ```
+before   pin:  group = abc
+after    pin:  group = pinned
+after  unpin:  group = default
+```
+
+可以看到，如果取消置顶， unpin 之后 group 是无法回到 abc 的，因为没有其他存放这个字段。 因此我们需要一个新的字段 `pinned` 来标记是否置顶，而 `group` 字段则专心用来标记分组。
+
+这样一来，就需要将旧的数据迁移到新的数据结构中，核心的一条迁移逻辑为：
+
+- 当用户的 `group` 字段为 `pinned` 时，将其 `pinned` 字段置为 `true`，同时将 group 设为 `default`;
+
+而数据迁移需要考虑两块：
 
-## 5. 功能绑定
+- 配置文件迁移
+- 数据库迁移
 
-在页面或组件中，我们需要将 Zustand Store 的状态和方法绑定到 UI 上。在上面的示例中，我们已经将 `messages` 状态绑定到了列表的 `dataSource` 属性上。现在，我们还需要一个方法来添加新的消息。我们可以在 Zustand Store 中定义这个方法，然后在页面或组件中使用它：
+我建议优先实现配置文件迁移，后实现数据库迁移。因为配置文件迁移相对数据库迁移更加易于复现与测试。
+
+### 配置文件迁移
+
+LobeChat 的配置文件迁移管理在 `src/migrations/index.ts` 中，
+
+```ts
+// 当前最新的版本号
+export const CURRENT_CONFIG_VERSION = 3;
+
+// 历史记录版本升级模块
+const ConfigMigrations = [
+  /**
+   * 2024.01.22
+   * from `group = pinned` to `pinned:true`
+   */
+  MigrationV2ToV3,
+  /**
+   * 2023.11.27
+   * 从单 key 数据库转换为基于 dexie 的关系型结构
+   */
+  MigrationV1ToV2,
+  /**
+   * 2023.07.11
+   * just the first version, Nothing to do
+   */
+  MigrationV0ToV1,
+];
+```
 
-```jsx
-import { Button } from 'antd';
+同时，配置文件的版本号和数据库版本号不一定完全一致对应，原因是 db 的版本升级可能不一定存在需要数据迁移的情况。（比如新增了一个表，或者新增了一个字段），而配置文件的版本升级则一定存在数据迁移的情况。
 
-const ChatPage = () => {
-  const messages = useChatStore((state) => state.messages);
-  const addMessage = useChatStore((state) => state.addMessage);
+本次迁移配置文件的逻辑在 `src/migrations/FromV2ToV3.ts` 中：
 
-  const handleSend = () => {
-    addMessage({ id: '1', content: 'Hello, world!', timestamp: Date.now(), sender: 'user' });
+```ts
+import type { Migration, MigrationData } from '@/migrations/VersionController';
+
+import { V2ConfigState, V2Session } from '../FromV1ToV2/types/v2';
+import { V3ConfigState, V3Session } from './types/v3';
+
+export class MigrationV2ToV3 implements Migration {
+  // 指定从该版本开始向上升级
+  version = 2;
+
+  migrate(data: MigrationData<V2ConfigState>): MigrationData<V3ConfigState> {
+    const { sessions } = data.state;
+
+    return {
+      ...data,
+      state: {
+        ...data.state,
+        sessions: sessions.map((s) => this.migrateSession(s)),
+      },
+    };
+  }
+
+  migrateSession = (session: V2Session): V3Session => {
+    return {
+      ...session,
+      group: 'default',
+      pinned: session.group === 'pinned',
+    };
   };
+}
+```
 
-  return (
-    <>
-      <List
-        dataSource={messages}
-        renderItem={(message) => (
-          <List.Item>
-            <Typography.Text>{message.content}</Typography.Text>
-          </List.Item>
-        )}
-      />
-      <Button onClick={handleSend}>Send</Button>
-    </>
-  );
-};
+实现可以看到非常简单。但重要的是，我们需要保证迁移的正确性，因此需要编写测试用例来保证迁移的正确性，测试用例写在 `migrations.test.ts` 中，需要搭配 `fixtures` 来固化测试数据。
+
+```ts
+import { MigrationData, VersionController } from '@/migrations/VersionController';
+
+import { MigrationV1ToV2 } from '../FromV1ToV2';
+import inputV1Data from '../FromV1ToV2/fixtures/input-v1-session.json';
+import inputV2Data from './fixtures/input-v2-session.json';
+import outputV3DataFromV1 from './fixtures/output-v3-from-v1.json';
+import outputV3Data from './fixtures/output-v3.json';
+import { MigrationV2ToV3 } from './index';
+
+describe('MigrationV2ToV3', () => {
+  let migrations;
+  let versionController: VersionController<any>;
 
-export default ChatPage;
+  beforeEach(() => {
+    migrations = [MigrationV2ToV3];
+    versionController = new VersionController(migrations, 3);
+  });
+
+  it('should migrate data correctly through multiple versions', () => {
+    const data: MigrationData = inputV2Data;
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3Data.version);
+    expect(migratedData.state.sessions).toEqual(outputV3Data.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3Data.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3Data.state.messages);
+  });
+
+  it('should work correct from v1 to v3', () => {
+    const data: MigrationData = inputV1Data;
+
+    versionController = new VersionController([MigrationV2ToV3, MigrationV1ToV2], 3);
+
+    const migratedData = versionController.migrate(data);
+
+    expect(migratedData.version).toEqual(outputV3DataFromV1.version);
+    expect(migratedData.state.sessions).toEqual(outputV3DataFromV1.state.sessions);
+    expect(migratedData.state.topics).toEqual(outputV3DataFromV1.state.topics);
+    expect(migratedData.state.messages).toEqual(outputV3DataFromV1.state.messages);
+  });
+});
 ```
 
-以上就是在 LobeChat 中实现 "会话消息" 功能的步骤。当然，在 LobeChat 的实际开发中，真实场景所面临的业务诉求和场景远比上述 demo 复杂，请根据实际情况进行开发。
+需要测试：
+
+- 正常的单次迁移（v2 -> v3)
+- 完整的迁移 (v1 -> v3)
+
+以上就是 LobeChat Session Group 功能的完整实现流程。开发者可以参考本文档进行相关功能的开发和测试。
diff --git a/docs/Development/State-Management/State-Management-Intro.md b/docs/Development/State-Management-Intro.md
similarity index 100%
rename from docs/Development/State-Management/State-Management-Intro.md
rename to docs/Development/State-Management-Intro.md
diff --git a/docs/Development/State-Management/State-Management-Intro.zh-CN.md b/docs/Development/State-Management-Intro.zh-CN.md
similarity index 95%
rename from docs/Development/State-Management/State-Management-Intro.zh-CN.md
rename to docs/Development/State-Management-Intro.zh-CN.md
index 9fdd53a37e6c..5310cb096b45 100644
--- a/docs/Development/State-Management/State-Management-Intro.zh-CN.md
+++ b/docs/Development/State-Management-Intro.zh-CN.md
@@ -125,16 +125,16 @@ src/store/session
 ├── helpers.ts                         # 辅助函数
 └── slices                             # 各个独立的功能切片
     ├── agent                          # 助理 Slice
-    │   ├── action.ts                  
-    │   ├── index.ts                   
-    │   └── selectors.ts               
+    │   ├── action.ts
+    │   ├── index.ts
+    │   └── selectors.ts
     └── session                        # 会话 Slice
-        ├── action.ts                  
-        ├── helpers.ts                 
-        ├── initialState.ts                
-        └── selectors                      
-            ├── export.ts                  
-            ├── list.ts                   
+        ├── action.ts
+        ├── helpers.ts
+        ├── initialState.ts
+        └── selectors
+            ├── export.ts
+            ├── list.ts
             └── index.ts
 
 ```
diff --git a/docs/Development/State-Management/Selectors.md b/docs/Development/State-Management-Selectors.md
similarity index 100%
rename from docs/Development/State-Management/Selectors.md
rename to docs/Development/State-Management-Selectors.md
diff --git a/docs/Development/State-Management/Selectors.zh-CN.md b/docs/Development/State-Management-Selectors.zh-CN.md
similarity index 100%
rename from docs/Development/State-Management/Selectors.zh-CN.md
rename to docs/Development/State-Management-Selectors.zh-CN.md
diff --git a/docs/Home.md b/docs/Home.md
index 1c4fd37fd273..7accfe325bab 100644
--- a/docs/Home.md
+++ b/docs/Home.md
@@ -44,6 +44,7 @@ LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-perform
   - [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selector) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selector.zh-CN)
 - [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Chat-API.zh-CN)
 - [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Feature-Development) | [如何开发一个新功能](https://github.com/lobehub/lobe-chat/wiki/Feature-Development.zh-CN)
+  - [Frontend](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend) | [前端实现](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend.zh-CN)
 - [Internationalization Implementation Guide](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation) | [国际化实现指南](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation.zh-CN)
 - [New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
 - [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.zh-CN)
diff --git a/docs/_Sidebar.md b/docs/_Sidebar.md
index c833809bb3a8..0a0d2a54c0bf 100644
--- a/docs/_Sidebar.md
+++ b/docs/_Sidebar.md
@@ -32,6 +32,7 @@
   - [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selector) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selector.zh-CN)
 - [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Chat-API.zh-CN)
 - [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Feature-Development) | [如何开发一个新功能](https://github.com/lobehub/lobe-chat/wiki/Feature-Development.zh-CN)
+  - [Frontend](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend) | [前端实现](https://github.com/lobehub/lobe-chat/wiki/Feature-Development-Frontend.zh-CN)
 - [Internationalization Implementation Guide](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation) | [国际化实现指南](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation.zh-CN)
 - [New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
 - [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.zh-CN)

From 139dfee99b8281164c7858171cca25557ddf1395 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 23 Jan 2024 14:28:19 +0800
Subject: [PATCH 08/20] =?UTF-8?q?=E2=9C=85=20test:=20add=20test=20for=20th?=
 =?UTF-8?q?e=20database?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/database/models/__tests__/message.test.ts |  42 +++
 src/database/models/__tests__/plugin.test.ts  |  77 ++++++
 src/database/models/__tests__/session.test.ts | 240 +++++++++++++-----
 .../models/__tests__/sessionGroup.test.ts     | 170 +++++++++++++
 src/database/models/__tests__/topic.test.ts   |  77 +++++-
 src/database/models/sessionGroup.ts           |  17 +-
 6 files changed, 555 insertions(+), 68 deletions(-)
 create mode 100644 src/database/models/__tests__/plugin.test.ts
 create mode 100644 src/database/models/__tests__/sessionGroup.test.ts

diff --git a/src/database/models/__tests__/message.test.ts b/src/database/models/__tests__/message.test.ts
index 182e3bb41f0e..661e8f35418d 100644
--- a/src/database/models/__tests__/message.test.ts
+++ b/src/database/models/__tests__/message.test.ts
@@ -373,4 +373,46 @@ describe('MessageModel', () => {
       }
     });
   });
+
+  describe('clearTable', () => {
+    it('should clear the table', async () => {
+      await MessageModel.create(messageData);
+      await MessageModel.clearTable();
+      const messages = await MessageModel.queryAll();
+      expect(messages).toHaveLength(0);
+    });
+  });
+
+  describe('updatePluginState', () => {
+    it('should update plugin state', async () => {
+      const createdMessage = await MessageModel.create(messageData);
+      await MessageModel.updatePluginState(createdMessage.id, 'testKey', 'testValue');
+      const updatedMessage = await MessageModel.findById(createdMessage.id);
+      expect(updatedMessage.pluginState).toHaveProperty('testKey', 'testValue');
+    });
+  });
+  describe('clearTable', () => {
+    it('should clear the table', async () => {
+      await MessageModel.create(messageData);
+      await MessageModel.clearTable();
+      const messages = await MessageModel.queryAll();
+      expect(messages).toHaveLength(0);
+    });
+  });
+
+  describe('updatePluginState', () => {
+    it('should update plugin state', async () => {
+      const createdMessage = await MessageModel.create(messageData);
+      await MessageModel.updatePluginState(createdMessage.id, 'testKey', 'testValue');
+      const updatedMessage = await MessageModel.findById(createdMessage.id);
+      expect(updatedMessage.pluginState).toHaveProperty('testKey', 'testValue');
+    });
+  });
+
+  describe('isEmpty', () => {
+    it('should return true if table is empty', async () => {
+      const isEmpty = await MessageModel.isEmpty();
+      expect(isEmpty).toBeTruthy();
+    });
+  });
 });
diff --git a/src/database/models/__tests__/plugin.test.ts b/src/database/models/__tests__/plugin.test.ts
new file mode 100644
index 000000000000..15541001e63c
--- /dev/null
+++ b/src/database/models/__tests__/plugin.test.ts
@@ -0,0 +1,77 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { DB_Plugin } from '../../schemas/plugin';
+import { PluginModel } from '../plugin';
+
+describe('PluginModel', () => {
+  let pluginData: DB_Plugin;
+
+  beforeEach(() => {
+    // 设置正确结构的插件数据
+    pluginData = {
+      identifier: 'test-plugin',
+      manifest: {},
+      type: 'plugin',
+    };
+  });
+
+  afterEach(async () => {
+    // 每次测试后清理数据库
+    await PluginModel.clear();
+  });
+
+  describe('getList', () => {
+    it('should fetch and return the plugin list', async () => {
+      await PluginModel.create(pluginData);
+      const plugins = await PluginModel.getList();
+      expect(plugins).toHaveLength(1);
+      expect(plugins[0]).toEqual(pluginData);
+    });
+  });
+
+  describe('create', () => {
+    it('should create a plugin record', async () => {
+      await PluginModel.create(pluginData);
+      const plugins = await PluginModel.getList();
+      expect(plugins).toHaveLength(1);
+      expect(plugins[0]).toEqual(pluginData);
+    });
+  });
+
+  describe('batchCreate', () => {
+    it('should batch create plugin records', async () => {
+      await PluginModel.batchCreate([pluginData, { ...pluginData, identifier: 'abc' }]);
+      const plugins = await PluginModel.getList();
+      expect(plugins).toHaveLength(2);
+    });
+  });
+
+  describe('delete', () => {
+    it('should delete a plugin', async () => {
+      await PluginModel.create(pluginData);
+      await PluginModel.delete(pluginData.identifier);
+      const plugins = await PluginModel.getList();
+      expect(plugins).toHaveLength(0);
+    });
+  });
+
+  describe('update', () => {
+    it('should update a plugin', async () => {
+      await PluginModel.create(pluginData);
+      const updatedPluginData: DB_Plugin = { ...pluginData, type: 'customPlugin' };
+      await PluginModel.update(pluginData.identifier, updatedPluginData);
+      const plugins = await PluginModel.getList();
+      expect(plugins).toHaveLength(1);
+      expect(plugins[0]).toEqual(updatedPluginData);
+    });
+  });
+
+  describe('clear', () => {
+    it('should clear the table', async () => {
+      await PluginModel.create(pluginData);
+      await PluginModel.clear();
+      const plugins = await PluginModel.getList();
+      expect(plugins).toHaveLength(0);
+    });
+  });
+});
diff --git a/src/database/models/__tests__/session.test.ts b/src/database/models/__tests__/session.test.ts
index 53ae54acaf87..5d2793b2503b 100644
--- a/src/database/models/__tests__/session.test.ts
+++ b/src/database/models/__tests__/session.test.ts
@@ -3,6 +3,7 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { CreateMessageParams, MessageModel } from '@/database/models/message';
 import { TopicModel } from '@/database/models/topic';
+import { LobeAgentConfig } from '@/types/agent';
 import { LobeAgentSession, LobeSessionType, SessionGroupId } from '@/types/session';
 
 import { SessionModel } from '../session';
@@ -25,93 +26,208 @@ describe('SessionModel', () => {
     // Clean up the database after each test
     await SessionModel.clearTable();
   });
+  describe('create', () => {
+    it('should create a session record', async () => {
+      const result = await SessionModel.create('agent', sessionData);
 
-  it('should create a session record', async () => {
-    const result = await SessionModel.create('agent', sessionData);
+      expect(result).toHaveProperty('id');
+      // Verify that the session has been added to the database
+      // Assuming findById is a method that retrieves a session by ID
+      const sessionInDb = await SessionModel.findById(result.id);
 
-    expect(result).toHaveProperty('id');
-    // Verify that the session has been added to the database
-    // Assuming findById is a method that retrieves a session by ID
-    const sessionInDb = await SessionModel.findById(result.id);
+      expect(sessionInDb).toEqual(expect.objectContaining(sessionData));
+    });
+  });
 
-    expect(sessionInDb).toEqual(expect.objectContaining(sessionData));
+  describe('batchCreate', () => {
+    it('should batch create session records', async () => {
+      const sessionsToCreate = [sessionData, sessionData];
+      const results = await SessionModel.batchCreate(sessionsToCreate as LobeAgentSession[]);
+
+      expect(results.ids).toHaveLength(sessionsToCreate.length);
+      // Verify that the sessions have been added to the database
+      for (const result of results.ids!) {
+        const sessionInDb = await SessionModel.findById(result);
+        expect(sessionInDb).toEqual(expect.objectContaining(sessionData));
+      }
+    });
   });
 
-  it('should batch create session records', async () => {
-    const sessionsToCreate = [sessionData, sessionData];
-    const results = await SessionModel.batchCreate(sessionsToCreate as LobeAgentSession[]);
+  describe('query', () => {
+    it('should query sessions with pagination', async () => {
+      // Create multiple sessions to test the query method
+      await SessionModel.batchCreate([sessionData, sessionData] as LobeAgentSession[]);
 
-    expect(results.ids).toHaveLength(sessionsToCreate.length);
-    // Verify that the sessions have been added to the database
-    for (const result of results.ids!) {
-      const sessionInDb = await SessionModel.findById(result);
-      expect(sessionInDb).toEqual(expect.objectContaining(sessionData));
-    }
+      const queriedSessions = await SessionModel.query({ pageSize: 1, current: 0 });
+
+      expect(queriedSessions).toHaveLength(1);
+    });
   });
 
-  it('should query sessions with pagination', async () => {
-    // Create multiple sessions to test the query method
-    await SessionModel.batchCreate([sessionData, sessionData] as LobeAgentSession[]);
+  describe('querySessionsByGroupId', () => {
+    it('should query sessions by group', async () => {
+      // Create multiple sessions to test the queryByGroup method
+      const group: SessionGroupId = 'testGroup';
+      await SessionModel.batchCreate([sessionData, sessionData] as LobeAgentSession[]);
 
-    const queriedSessions = await SessionModel.query({ pageSize: 1, current: 0 });
+      const sessionsByGroup = await SessionModel.querySessionsByGroupId(group);
 
-    expect(queriedSessions).toHaveLength(1);
+      // Assuming all created sessions belong to the same group
+      expect(sessionsByGroup).toHaveLength(2);
+      expect(sessionsByGroup.every((i) => i.group === group)).toBeTruthy();
+    });
   });
 
-  it('should query sessions by group', async () => {
-    // Create multiple sessions to test the queryByGroup method
-    const group: SessionGroupId = 'testGroup';
-    await SessionModel.batchCreate([sessionData, sessionData] as LobeAgentSession[]);
+  describe('update', () => {
+    it('should update a session', async () => {
+      const createdSession = await SessionModel.create('agent', sessionData);
+      const updateData = { group: 'newGroup' };
 
-    const sessionsByGroup = await SessionModel.querySessionsByGroupId(group);
+      await SessionModel.update(createdSession.id, updateData);
+      const updatedSession = await SessionModel.findById(createdSession.id);
 
-    // Assuming all created sessions belong to the same group
-    expect(sessionsByGroup).toHaveLength(2);
-    expect(sessionsByGroup.every((i) => i.group === group)).toBeTruthy();
+      expect(updatedSession).toHaveProperty('group', 'newGroup');
+    });
   });
 
-  it('should update a session', async () => {
-    const createdSession = await SessionModel.create('agent', sessionData);
-    const updateData = { group: 'newGroup' };
+  describe('updatePinned', () => {
+    it('should update pinned status of a session', async () => {
+      const createdSession = await SessionModel.create('agent', sessionData);
+      await SessionModel.updatePinned(createdSession.id, true);
+      const updatedSession = await SessionModel.findById(createdSession.id);
+      expect(updatedSession).toHaveProperty('pinned', 1);
+    });
+  });
 
-    await SessionModel.update(createdSession.id, updateData);
-    const updatedSession = await SessionModel.findById(createdSession.id);
+  describe('updateConfig', () => {
+    it('should update config of a session', async () => {
+      const { id } = await SessionModel.create('agent', sessionData);
+      const dbSession = await SessionModel.findById(id);
 
-    expect(updatedSession).toHaveProperty('group', 'newGroup');
+      const newConfig = { ...dbSession.config, systemRole: 'newValue' } as LobeAgentConfig;
+      await SessionModel.updateConfig(id, newConfig);
+      const updatedSession = await SessionModel.findById(id);
+      expect(updatedSession.config).toEqual(newConfig);
+    });
   });
 
-  // 删除一个 session 时，也需要同步删除具有 sessionId 的 topic 和 message
-  it('should delete a session and its associated data', async () => {
-    // create session , topic and message test data
-    const { id: sessionId } = await SessionModel.create('agent', sessionData);
+  describe('clearTable', () => {
+    it('should clear all sessions', async () => {
+      await SessionModel.batchCreate([sessionData, sessionData] as LobeAgentSession[]);
+      await SessionModel.clearTable();
+      const sessionsInDb = await SessionModel.query();
+      expect(sessionsInDb).toHaveLength(0);
+    });
+  });
 
-    const topicData = {
-      title: 'Test Topic',
-      sessionId: sessionId,
-      favorite: false,
-    };
-    const createdTopic = await TopicModel.create(topicData);
+  describe('isEmpty', () => {
+    it('should check if table is empty', async () => {
+      await SessionModel.clearTable();
+      const isEmpty = await SessionModel.isEmpty();
+      expect(isEmpty).toBeTruthy();
+      await SessionModel.create('agent', sessionData);
+      const isNotEmpty = await SessionModel.isEmpty();
+      expect(isNotEmpty).toBeFalsy();
+    });
+  });
 
-    const messageData: CreateMessageParams = {
-      content: 'Test Message',
-      sessionId: sessionId,
-      topicId: createdTopic.id,
-      role: 'user',
-    };
-    await MessageModel.create(messageData);
+  describe('queryByKeyword', () => {
+    it('should query sessions by keyword', async () => {
+      const keyword = 'testKeyword';
+      const sessionWithKeyword = { ...sessionData, meta: { title: keyword } };
+      await SessionModel.create('agent', sessionWithKeyword);
+      const sessionsByKeyword = await SessionModel.queryByKeyword(keyword);
+      expect(sessionsByKeyword).toHaveLength(1);
+      expect(sessionsByKeyword[0].meta.title).toContain(keyword);
+    });
+  });
+
+  describe('getPinnedSessions', () => {
+    it('should get pinned sessions', async () => {
+      const pinnedSession = { ...sessionData, pinned: true };
+      const unpinnedSession = { ...sessionData, pinned: false };
+      await SessionModel.batchCreate([pinnedSession, unpinnedSession] as LobeAgentSession[]);
+      const pinnedSessions = await SessionModel.getPinnedSessions();
+      expect(pinnedSessions).toHaveLength(1);
+      expect(pinnedSessions[0].pinned).toBeTruthy();
+    });
+  });
 
-    await SessionModel.delete(sessionId);
+  describe('queryWithGroups', () => {
+    it('should query sessions with groups', async () => {
+      await SessionModel.create('agent', sessionData);
+
+      const sessionsWithGroups = await SessionModel.queryWithGroups();
+      expect(sessionsWithGroups.all).toHaveLength(1);
+      expect(sessionsWithGroups.all[0]).toEqual(expect.objectContaining(sessionData));
+    });
+  });
+
+  describe('queryByGroupIds', () => {
+    it('should query sessions by group ids', async () => {
+      const createdSession = await SessionModel.create('agent', sessionData);
+      const session = await SessionModel.findById(createdSession.id);
+      const sessionsByGroupIds = await SessionModel.queryByGroupIds([session.group]);
+      expect(sessionsByGroupIds[session.group]).toHaveLength(1);
+      expect(sessionsByGroupIds[session.group][0]).toEqual(expect.objectContaining(sessionData));
+    });
+  });
+
+  describe('delete', () => {
+    it('should delete a session', async () => {
+      const createdSession = await SessionModel.create('agent', sessionData);
+      await SessionModel.delete(createdSession.id);
+      const sessionInDb = await SessionModel.findById(createdSession.id);
+      expect(sessionInDb).toBeUndefined();
+    });
+
+    // 删除一个 session 时，也需要同步删除具有 sessionId 的 topic 和 message
+    it('should delete a session and its associated data', async () => {
+      // create session , topic and message test data
+      const { id: sessionId } = await SessionModel.create('agent', sessionData);
+
+      const topicData = {
+        title: 'Test Topic',
+        sessionId: sessionId,
+        favorite: false,
+      };
+      const createdTopic = await TopicModel.create(topicData);
+
+      const messageData: CreateMessageParams = {
+        content: 'Test Message',
+        sessionId: sessionId,
+        topicId: createdTopic.id,
+        role: 'user',
+      };
+      await MessageModel.create(messageData);
+
+      await SessionModel.delete(sessionId);
+
+      // Verify the session and its related data (topics, messages) are deleted
+      const sessionInDb = await SessionModel.findById(sessionId);
+      expect(sessionInDb).toBeUndefined();
+
+      // You need to verify that topics and messages related to the session are also deleted
+      const topicsInDb = await TopicModel.findBySessionId(sessionId);
+      expect(topicsInDb).toHaveLength(0);
+
+      // Verify all associated messages are deleted
+      const messagesInDb = await MessageModel.query({ sessionId });
+      expect(messagesInDb).toHaveLength(0);
+    });
+  });
 
-    // Verify the session and its related data (topics, messages) are deleted
-    const sessionInDb = await SessionModel.findById(sessionId);
-    expect(sessionInDb).toBeUndefined();
+  describe('duplicate', () => {
+    it('should duplicate a session', async () => {
+      const createdSession = await SessionModel.create('agent', sessionData);
+      const duplicatedSession = await SessionModel.duplicate(createdSession.id);
+      const sessionsInDb = await SessionModel.query();
+      expect(sessionsInDb).toHaveLength(2);
 
-    // You need to verify that topics and messages related to the session are also deleted
-    const topicsInDb = await TopicModel.findBySessionId(sessionId);
-    expect(topicsInDb).toHaveLength(0);
+      if (!duplicatedSession) return;
+      const session = await SessionModel.findById(duplicatedSession.id);
 
-    // Verify all associated messages are deleted
-    const messagesInDb = await MessageModel.query({ sessionId });
-    expect(messagesInDb).toHaveLength(0);
+      expect(session).toEqual(expect.objectContaining(sessionData));
+    });
   });
 });
diff --git a/src/database/models/__tests__/sessionGroup.test.ts b/src/database/models/__tests__/sessionGroup.test.ts
new file mode 100644
index 000000000000..405dc06aca99
--- /dev/null
+++ b/src/database/models/__tests__/sessionGroup.test.ts
@@ -0,0 +1,170 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { SessionGroups } from '@/types/session';
+
+import { DB_SessionGroup } from '../../schemas/sessionGroup';
+import { SessionGroupModel } from '../sessionGroup';
+
+describe('SessionGroupModel', () => {
+  let sessionGroupData: DB_SessionGroup;
+
+  beforeEach(() => {
+    // 设置正确结构的会话组数据
+    sessionGroupData = {
+      name: 'test-group',
+      sort: 1,
+    };
+  });
+
+  afterEach(async () => {
+    // 每次测试后清理数据库
+    await SessionGroupModel.clear();
+  });
+
+  describe('create', () => {
+    it('should create a session group record', async () => {
+      const createdGroup = await SessionGroupModel.create(
+        sessionGroupData.name,
+        sessionGroupData.sort,
+      );
+      const item = await SessionGroupModel.findById(createdGroup.id);
+      expect(item.name).toEqual(sessionGroupData.name);
+      expect(item.sort).toEqual(sessionGroupData.sort);
+    });
+  });
+
+  describe('batchCreate', () => {
+    it('should batch create session group records', async () => {
+      const groups = [
+        sessionGroupData,
+        { ...sessionGroupData, name: 'another-group' },
+      ] as SessionGroups;
+      await SessionGroupModel.batchCreate(groups);
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups).toHaveLength(2);
+    });
+  });
+
+  describe('update', () => {
+    it('should update a session group', async () => {
+      const createdGroup = await SessionGroupModel.create(
+        sessionGroupData.name,
+        sessionGroupData.sort,
+      );
+      const updatedGroupData: DB_SessionGroup = { ...sessionGroupData, name: 'updated-group' };
+      await SessionGroupModel.update(createdGroup.id, updatedGroupData);
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups[0].name).toEqual(updatedGroupData.name);
+    });
+  });
+
+  describe('delete', () => {
+    it('should delete a session group', async () => {
+      const createdGroup = await SessionGroupModel.create(
+        sessionGroupData.name,
+        sessionGroupData.sort,
+      );
+      await SessionGroupModel.delete(createdGroup.id);
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups).toHaveLength(0);
+    });
+  });
+
+  describe('query', () => {
+    it('should fetch and return the session group list', async () => {
+      await SessionGroupModel.create(sessionGroupData.name, sessionGroupData.sort);
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups).toHaveLength(1);
+      expect(fetchedGroups[0].name).toEqual(sessionGroupData.name);
+    });
+
+    it('should return an empty array when there are no session groups', async () => {
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups).toEqual([]);
+    });
+
+    it('should return session groups sorted by sort field when it exists', async () => {
+      const group1 = await SessionGroupModel.create('group1', 2);
+      const group2 = await SessionGroupModel.create('group2', 1);
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups[0].id).toEqual(group2.id);
+      expect(fetchedGroups[1].id).toEqual(group1.id);
+    });
+
+    it('should return session groups sorted by createdAt when sort field does not exist', async () => {
+      const group1 = await SessionGroupModel.create('group1');
+      const group2 = await SessionGroupModel.create('group2');
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups[0].id).toEqual(group2.id);
+      expect(fetchedGroups[1].id).toEqual(group1.id);
+    });
+
+    it('should return session groups sorted by sort field first and then by createdAt', async () => {
+      const group0 = await SessionGroupModel.create('group0');
+      const group1 = await SessionGroupModel.create('group1', 1);
+      const group2 = await SessionGroupModel.create('group2');
+      const group3 = await SessionGroupModel.create('group3', 2);
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups[0].id).toEqual(group1.id);
+      expect(fetchedGroups[1].id).toEqual(group3.id);
+      expect(fetchedGroups[2].id).toEqual(group2.id);
+      expect(fetchedGroups[3].id).toEqual(group0.id);
+    });
+
+    it('should return session groups sorted by sort ', async () => {
+      const group1 = await SessionGroupModel.create('group1', 1);
+      const group2 = await SessionGroupModel.create('group2');
+      const group3 = await SessionGroupModel.create('group3', 2);
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups[0].id).toEqual(group1.id);
+      expect(fetchedGroups[1].id).toEqual(group3.id);
+      expect(fetchedGroups[2].id).toEqual(group2.id);
+    });
+
+    it('should return session groups sorted by createdAt when sort fields are equal', async () => {
+      const group1 = await SessionGroupModel.create('group1', 1);
+      const group2 = await SessionGroupModel.create('group2', 1);
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups[0].id).toEqual(group2.id);
+      expect(fetchedGroups[1].id).toEqual(group1.id);
+    });
+  });
+
+  describe('updateOrder', () => {
+    it('should update the order of session groups', async () => {
+      const group1 = await SessionGroupModel.create(sessionGroupData.name, sessionGroupData.sort);
+      const group2 = await SessionGroupModel.create('another-group', 2);
+      await SessionGroupModel.updateOrder([
+        { id: group1.id, sort: 2 },
+        { id: group2.id, sort: 1 },
+      ]);
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups[0].id).toEqual(group2.id);
+      expect(fetchedGroups[1].id).toEqual(group1.id);
+    });
+  });
+
+  describe('findById', () => {
+    it('should find a session group by id', async () => {
+      const createdGroup = await SessionGroupModel.create(
+        sessionGroupData.name,
+        sessionGroupData.sort,
+      );
+      const fetchedGroup = await SessionGroupModel.findById(createdGroup.id);
+      expect(fetchedGroup).toMatchObject({ ...createdGroup, ...sessionGroupData });
+    });
+  });
+
+  describe('clear', () => {
+    it('should clear all session groups', async () => {
+      await SessionGroupModel.create(sessionGroupData.name, sessionGroupData.sort);
+      const first = await SessionGroupModel.query();
+      expect(first).toHaveLength(1);
+
+      await SessionGroupModel.clear();
+
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups).toHaveLength(0);
+    });
+  });
+});
diff --git a/src/database/models/__tests__/topic.test.ts b/src/database/models/__tests__/topic.test.ts
index 06e59d4ce16b..4e5e4fd0ee69 100644
--- a/src/database/models/__tests__/topic.test.ts
+++ b/src/database/models/__tests__/topic.test.ts
@@ -25,6 +25,7 @@ describe('TopicModel', () => {
     // Clean up the database after each test
     await TopicModel.clearTable();
   });
+
   describe('create', () => {
     it('should create a topic record', async () => {
       const result = await TopicModel.create(topicData);
@@ -395,7 +396,7 @@ describe('TopicModel', () => {
     it('should fail if the database transaction fails', async () => {
       // 强制数据库事务失败，例如通过在复制过程中抛出异常
       const dbTransactionFailedError = new Error('DB transaction failed');
-      vi.spyOn(TopicModel['db'], 'transaction').mockImplementation((async () => {
+      const spyOn = vi.spyOn(TopicModel['db'], 'transaction').mockImplementation((async () => {
         throw dbTransactionFailedError;
       }) as any);
 
@@ -403,6 +404,7 @@ describe('TopicModel', () => {
       await expect(TopicModel.duplicateTopic(originalTopic.id)).rejects.toThrow(
         dbTransactionFailedError,
       );
+      spyOn.mockRestore();
     });
 
     it('should not create partial duplicates if the process fails at some point', async () => {
@@ -422,4 +424,77 @@ describe('TopicModel', () => {
       expect(messages).toHaveLength(originalMessages.length); // 只有原始消息
     });
   });
+
+  describe('clearTable', () => {
+    it('should clear the table', async () => {
+      // Create a topic to ensure the table is not empty
+      await TopicModel.create(topicData);
+
+      // Clear the table
+      await TopicModel.clearTable();
+
+      // Verify the table is empty
+      const topics = await TopicModel.queryAll();
+      expect(topics).toHaveLength(0);
+    });
+  });
+
+  describe('update', () => {
+    it('should update a topic', async () => {
+      // Create a topic
+      const createdTopic = await TopicModel.create(topicData);
+
+      // Update the topic
+      const newTitle = 'Updated Title';
+      await TopicModel.update(createdTopic.id, { title: newTitle });
+
+      // Verify the topic is updated
+      const updatedTopic = await TopicModel.findById(createdTopic.id);
+      expect(updatedTopic.title).toBe(newTitle);
+    });
+  });
+
+  describe('batchDelete', () => {
+    it('should batch delete topics', async () => {
+      // Create multiple topics
+      const topic1 = await TopicModel.create(topicData);
+      const topic2 = await TopicModel.create(topicData);
+
+      await TopicModel.create(topicData);
+
+      const ids = [topic1.id, topic2.id];
+      // Batch delete the topics
+      await TopicModel.batchDelete(ids);
+
+      expect(await TopicModel.table.count()).toEqual(1);
+    });
+  });
+
+  describe('queryAll', () => {
+    it('should query all topics', async () => {
+      // Create multiple topics
+      await TopicModel.batchCreate([topicData, topicData]);
+
+      // Query all topics
+      const topics = await TopicModel.queryAll();
+
+      // Verify all topics are queried
+      expect(topics).toHaveLength(2);
+    });
+  });
+
+  describe('queryByKeyword', () => {
+    it('should query topics by keyword', async () => {
+      // Create a topic with a unique title
+      const uniqueTitle = 'Unique Title';
+      await TopicModel.create({ ...topicData, title: uniqueTitle });
+
+      // Query topics by the unique title
+      const topics = await TopicModel.queryByKeyword(uniqueTitle);
+
+      // Verify the correct topic is queried
+      expect(topics).toHaveLength(1);
+      expect(topics[0].title).toBe(uniqueTitle);
+    });
+  });
 });
diff --git a/src/database/models/sessionGroup.ts b/src/database/models/sessionGroup.ts
index 51d750d18df8..758ccfd59c6f 100644
--- a/src/database/models/sessionGroup.ts
+++ b/src/database/models/sessionGroup.ts
@@ -11,11 +11,14 @@ class _SessionGroupModel extends BaseModel {
   async create(name: string, sort?: number, id = nanoid()) {
     return this._add({ name, sort }, id);
   }
-
   async batchCreate(groups: SessionGroups) {
     return this._batchAdd(groups, { idGenerator: nanoid });
   }
 
+  async findById(id: string): Promise<DB_SessionGroup> {
+    return this.table.get(id);
+  }
+
   async update(id: string, data: Partial<DB_SessionGroup>) {
     return super._update(id, data);
   }
@@ -33,6 +36,9 @@ class _SessionGroupModel extends BaseModel {
     return allGroups.sort((a, b) => {
       // 如果两个项都有 sort，则按 sort 排序
       if (a.sort !== undefined && b.sort !== undefined) {
+        // 如果sort 一样，按时间倒序排序
+        if (a.sort === b.sort) return b.createdAt - a.createdAt;
+
         return a.sort - b.sort;
       }
       // 如果 a 有 sort 而 b 没有，则 a 排在前面
@@ -44,10 +50,7 @@ class _SessionGroupModel extends BaseModel {
         return 1;
       }
       // 如果两个项都没有 sort，则按 createdAt 倒序排序
-      if (a.createdAt && b.createdAt) {
-        return b.createdAt - a.createdAt;
-      }
-      return 0;
+      return b.createdAt - a.createdAt;
     });
   }
 
@@ -58,6 +61,10 @@ class _SessionGroupModel extends BaseModel {
       }
     });
   }
+
+  async clear() {
+    this.table.clear();
+  }
 }
 
 export const SessionGroupModel = new _SessionGroupModel();

From d17508cb2283b8b74d6552ce57a1b37d7a1fcdd6 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 23 Jan 2024 14:38:21 +0800
Subject: [PATCH 09/20] =?UTF-8?q?=E2=9C=85=20test:=20add=20test=20for=20th?=
 =?UTF-8?q?e=20database?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../models/__tests__/sessionGroup.test.ts         |  5 +++++
 src/store/global/slices/common/initialState.ts    |  4 +---
 .../settings/__snapshots__/selectors.test.ts.snap | 15 ---------------
 .../global/slices/settings/selectors.test.ts      |  6 ------
 4 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/src/database/models/__tests__/sessionGroup.test.ts b/src/database/models/__tests__/sessionGroup.test.ts
index 405dc06aca99..299bf5a69660 100644
--- a/src/database/models/__tests__/sessionGroup.test.ts
+++ b/src/database/models/__tests__/sessionGroup.test.ts
@@ -123,6 +123,11 @@ describe('SessionGroupModel', () => {
 
     it('should return session groups sorted by createdAt when sort fields are equal', async () => {
       const group1 = await SessionGroupModel.create('group1', 1);
+      await new Promise((resolve) =>
+        setTimeout(() => {
+          resolve(undefined);
+        }, 300),
+      );
       const group2 = await SessionGroupModel.create('group2', 1);
       const fetchedGroups = await SessionGroupModel.query();
       expect(fetchedGroups[0].id).toEqual(group2.id);
diff --git a/src/store/global/slices/common/initialState.ts b/src/store/global/slices/common/initialState.ts
index cc10c8b2964b..41d79a8d0d5e 100644
--- a/src/store/global/slices/common/initialState.ts
+++ b/src/store/global/slices/common/initialState.ts
@@ -1,6 +1,6 @@
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 
-import { SessionDefaultGroup, SessionGroupId, SessionGroupItem } from '@/types/session';
+import { SessionDefaultGroup, SessionGroupId } from '@/types/session';
 
 export enum SidebarTabKey {
   Chat = 'chat',
@@ -26,7 +26,6 @@ export interface GlobalPreference {
   guide?: Guide;
   inputHeight: number;
   mobileShowTopic?: boolean;
-  sessionCustomGroups: SessionGroupItem[];
   sessionsWidth: number;
 
   showChatSideBar?: boolean;
@@ -59,7 +58,6 @@ export const initialCommonState: GlobalCommonState = {
     guide: {},
     inputHeight: 200,
     mobileShowTopic: false,
-    sessionCustomGroups: [],
     sessionsWidth: 320,
     showChatSideBar: true,
     showSessionPanel: true,
diff --git a/src/store/global/slices/settings/__snapshots__/selectors.test.ts.snap b/src/store/global/slices/settings/__snapshots__/selectors.test.ts.snap
index 0b2af124d5ad..3a7f56cc87e4 100644
--- a/src/store/global/slices/settings/__snapshots__/selectors.test.ts.snap
+++ b/src/store/global/slices/settings/__snapshots__/selectors.test.ts.snap
@@ -145,12 +145,6 @@ exports[`settingsSelectors > currentSettings > should merge DEFAULT_SETTINGS and
   "neutralColor": "sand",
   "password": "password123",
   "primaryColor": "blue",
-  "sessionCustomGroups": [
-    {
-      "id": "group-1",
-      "name": "Group 1",
-    },
-  ],
   "themeMode": "light",
   "tool": {
     "dalle": {
@@ -250,12 +244,3 @@ exports[`settingsSelectors > defaultAgentMeta > should merge DEFAULT_AGENT_META
   "description": "Test agent",
 }
 `;
-
-exports[`settingsSelectors > sessionCustomGroups > should return session custom groups 1`] = `
-[
-  {
-    "id": "group-1",
-    "name": "Group 1",
-  },
-]
-`;
diff --git a/src/store/global/slices/settings/selectors.test.ts b/src/store/global/slices/settings/selectors.test.ts
index a6d259d4881c..8a109e880eac 100644
--- a/src/store/global/slices/settings/selectors.test.ts
+++ b/src/store/global/slices/settings/selectors.test.ts
@@ -15,12 +15,6 @@ describe('settingsSelectors', () => {
           password: 'password123',
           primaryColor: 'blue',
           themeMode: 'light',
-          sessionCustomGroups: [
-            {
-              name: 'Group 1',
-              id: 'group-1',
-            },
-          ],
           defaultAgent: {
             config: {
               systemRole: '',

From b221278c7a364248455431186b58fb0978ec301a Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 23 Jan 2024 15:08:51 +0800
Subject: [PATCH 10/20] =?UTF-8?q?=E2=9C=85=20test:=20update=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/Development/Feature-Development.zh-CN.md |  2 +-
 .../core/__tests__/db-upgrade.test.ts         | 42 +++++++++++++++++++
 src/database/core/db.ts                       |  6 ++-
 src/database/core/types/db.ts                 |  2 +
 4 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 src/database/core/__tests__/db-upgrade.test.ts

diff --git a/docs/Development/Feature-Development.zh-CN.md b/docs/Development/Feature-Development.zh-CN.md
index dc6b1fde75dd..9deba1a48ff4 100644
--- a/docs/Development/Feature-Development.zh-CN.md
+++ b/docs/Development/Feature-Development.zh-CN.md
@@ -90,7 +90,7 @@ export class LocalDB extends Dexie {
 + public sessionGroups: LobeDBTable<'sessionGroups'>;
 
   constructor() {
-    super('LOBE_CHAT_DB');
+    super(LOBE_CHAT_LOCAL_DB_NAME);
     this.version(1).stores(dbSchemaV1);
     this.version(2).stores(dbSchemaV2);
     this.version(3).stores(dbSchemaV3);
diff --git a/src/database/core/__tests__/db-upgrade.test.ts b/src/database/core/__tests__/db-upgrade.test.ts
new file mode 100644
index 000000000000..1f0b6a20c619
--- /dev/null
+++ b/src/database/core/__tests__/db-upgrade.test.ts
@@ -0,0 +1,42 @@
+import Dexie from 'dexie';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { LocalDB } from '../db';
+import { dbSchemaV3 } from '../schemas';
+import { LOBE_CHAT_LOCAL_DB_NAME } from '../types/db';
+
+beforeEach(async () => {
+  // 确保在测试开始前删除数据库
+  await Dexie.delete(LOBE_CHAT_LOCAL_DB_NAME);
+});
+
+afterEach(async () => {
+  // 确保在测试结束后删除数据库
+  await Dexie.delete(LOBE_CHAT_LOCAL_DB_NAME);
+});
+
+describe('LocalDB migration', () => {
+  it('should upgrade from version 3 to version 4 correctly', async () => {
+    // 使用版本3的schema创建数据库实例并填充测试数据
+    const dbV3 = new Dexie(LOBE_CHAT_LOCAL_DB_NAME);
+    dbV3.version(3).stores(dbSchemaV3);
+    await dbV3.open();
+    await dbV3.table('sessions').bulkAdd([
+      { id: 's1', group: 'pinned' },
+      { id: 's2', group: 'default' },
+    ]);
+    dbV3.close();
+
+    // 创建新的数据库实例，包含版本4的迁移逻辑
+    const dbV4 = new LocalDB();
+    await dbV4.open();
+
+    // 验证迁移后的数据
+    const updatedSession1 = await dbV4.sessions.get('s1');
+    const updatedSession2 = await dbV4.sessions.get('s2');
+    expect(updatedSession1).toEqual({ id: 's1', pinned: 1, group: 'default' });
+    expect(updatedSession2).toEqual({ id: 's2', pinned: 0, group: 'default' });
+
+    dbV4.close();
+  });
+});
diff --git a/src/database/core/db.ts b/src/database/core/db.ts
index 3cba16c2760b..c6c1845716c1 100644
--- a/src/database/core/db.ts
+++ b/src/database/core/db.ts
@@ -1,6 +1,6 @@
 import Dexie, { Transaction } from 'dexie';
 
-import { DBModel } from '@/database/core/types/db';
+import { DBModel, LOBE_CHAT_LOCAL_DB_NAME } from '@/database/core/types/db';
 import { DB_File } from '@/database/schemas/files';
 import { DB_Message } from '@/database/schemas/message';
 import { DB_Plugin } from '@/database/schemas/plugin';
@@ -29,7 +29,7 @@ export class LocalDB extends Dexie {
   public sessionGroups: LobeDBTable<'sessionGroups'>;
 
   constructor() {
-    super('LOBE_CHAT_DB');
+    super(LOBE_CHAT_LOCAL_DB_NAME);
     this.version(1).stores(dbSchemaV1);
     this.version(2).stores(dbSchemaV2);
     this.version(3).stores(dbSchemaV3);
@@ -52,12 +52,14 @@ export class LocalDB extends Dexie {
    * from `group = pinned` to `pinned:true`
    */
   upgradeToV4 = async (trans: Transaction) => {
+    console.log('start');
     const sessions = trans.table('sessions');
     await sessions.toCollection().modify((session) => {
       // translate boolean to number
       session.pinned = session.group === 'pinned' ? 1 : 0;
       session.group = 'default';
     });
+    console.log('finished');
   };
 }
 
diff --git a/src/database/core/types/db.ts b/src/database/core/types/db.ts
index 0e1283bdc037..5b7d884a953f 100644
--- a/src/database/core/types/db.ts
+++ b/src/database/core/types/db.ts
@@ -11,3 +11,5 @@ export const DBBaseFieldsSchema = z.object({
   id: z.string(),
   updatedAt: z.number(),
 });
+
+export const LOBE_CHAT_LOCAL_DB_NAME = 'LOBE_CHAT_DB';

From ae06064187cf94af0d48259ec37c8c1fd84ff07e Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 23 Jan 2024 18:00:26 +0800
Subject: [PATCH 11/20] =?UTF-8?q?=F0=9F=90=9B=20fix:=20fix=20remove=20sess?=
 =?UTF-8?q?ion=20group=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SessionListContent/DefaultMode.tsx        |  2 +-
 .../SessionListContent/List/AddButton.tsx     |  6 ++---
 .../SessionListContent/List/index.tsx         |  6 +++--
 .../SessionListContent/SearchMode.tsx         |  2 +-
 src/components/FullscreenLoading/index.tsx    |  2 +-
 src/database/models/__tests__/session.test.ts | 22 ++++++++++++++++++-
 .../models/__tests__/sessionGroup.test.ts     | 21 ++++++++++++++++++
 src/database/models/session.ts                | 14 +++++++++++-
 src/database/models/sessionGroup.ts           | 12 +++++++---
 src/locales/default/common.ts                 |  1 +
 src/migrations/FromV2ToV3/index.ts            |  1 +
 src/migrations/FromV2ToV3/types/v3.ts         |  9 ++++++++
 src/services/config.ts                        | 18 ++++++++++++---
 src/services/session.ts                       |  6 ++++-
 src/store/session/slices/session/action.ts    |  3 +--
 src/types/exportConfig.ts                     |  3 ++-
 16 files changed, 108 insertions(+), 20 deletions(-)

diff --git a/src/app/chat/features/SessionListContent/DefaultMode.tsx b/src/app/chat/features/SessionListContent/DefaultMode.tsx
index 797a22219599..e978a3f86af4 100644
--- a/src/app/chat/features/SessionListContent/DefaultMode.tsx
+++ b/src/app/chat/features/SessionListContent/DefaultMode.tsx
@@ -44,7 +44,7 @@ const SessionListContent = memo(() => {
           label: t('pin'),
         },
         ...customSessionGroups.map(({ id, name, children }) => ({
-          children: <SessionList dataSource={children} />,
+          children: <SessionList dataSource={children} groupId={id} />,
           extra: (
             <Actions
               id={id}
diff --git a/src/app/chat/features/SessionListContent/List/AddButton.tsx b/src/app/chat/features/SessionListContent/List/AddButton.tsx
index d94d3e5848c8..98a6e62fd41b 100644
--- a/src/app/chat/features/SessionListContent/List/AddButton.tsx
+++ b/src/app/chat/features/SessionListContent/List/AddButton.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@lobehub/ui';
-import { Button, type ButtonProps } from 'antd';
+import { Button } from 'antd';
 import { Plus } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,12 +7,12 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 
-const AddButton = memo<ButtonProps>((props) => {
+const AddButton = memo<{ groupId?: string }>(({ groupId }) => {
   const { t } = useTranslation('chat');
   const createSession = useSessionStore((s) => s.createSession);
   return (
     <Flexbox style={{ margin: '12px 16px' }}>
-      <Button block icon={<Icon icon={Plus} />} onClick={() => createSession()} {...props}>
+      <Button block icon={<Icon icon={Plus} />} onClick={() => createSession({ group: groupId })}>
         {t('newAgent')}
       </Button>
     </Flexbox>
diff --git a/src/app/chat/features/SessionListContent/List/index.tsx b/src/app/chat/features/SessionListContent/List/index.tsx
index 343d62498210..c4452b3ec312 100644
--- a/src/app/chat/features/SessionListContent/List/index.tsx
+++ b/src/app/chat/features/SessionListContent/List/index.tsx
@@ -20,8 +20,10 @@ const useStyles = createStyles(
 
 interface SessionListProps {
   dataSource: LobeAgentSession[];
+  groupId?: string;
+  showAddButton?: boolean;
 }
-const SessionList = memo<SessionListProps>(({ dataSource }) => {
+const SessionList = memo<SessionListProps>(({ dataSource, groupId, showAddButton = true }) => {
   const [activeSession, switchSession, isInit] = useSessionStore((s) => [
     s.activeSession,
     s.switchSession,
@@ -50,7 +52,7 @@ const SessionList = memo<SessionListProps>(({ dataSource }) => {
       </LazyLoad>
     ))
   ) : (
-    <AddButton />
+    showAddButton && <AddButton groupId={groupId} />
   );
 });
 
diff --git a/src/app/chat/features/SessionListContent/SearchMode.tsx b/src/app/chat/features/SessionListContent/SearchMode.tsx
index f9defc86b495..2fe823036cb8 100644
--- a/src/app/chat/features/SessionListContent/SearchMode.tsx
+++ b/src/app/chat/features/SessionListContent/SearchMode.tsx
@@ -9,7 +9,7 @@ import SessionList from './List';
 const SessionListContent = memo(() => {
   const searchSessions = useSessionStore(sessionSelectors.searchSessions, isEqual);
 
-  return <SessionList dataSource={searchSessions} />;
+  return <SessionList dataSource={searchSessions} showAddButton={false} />;
 });
 
 export default SessionListContent;
diff --git a/src/components/FullscreenLoading/index.tsx b/src/components/FullscreenLoading/index.tsx
index 7de4f139ff7f..79507d05f7e6 100644
--- a/src/components/FullscreenLoading/index.tsx
+++ b/src/components/FullscreenLoading/index.tsx
@@ -5,7 +5,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 const FullscreenLoading = memo<{ title?: string }>(({ title }) => {
   return (
-    <Flexbox height={'100%'} width={'100%'}>
+    <Flexbox height={'100%'} style={{ userSelect: 'none' }} width={'100%'}>
       <Center flex={1} gap={12} width={'100%'}>
         <Logo extra={'Chat'} size={48} type={'combine'} />
         <Center gap={16} horizontal>
diff --git a/src/database/models/__tests__/session.test.ts b/src/database/models/__tests__/session.test.ts
index 5d2793b2503b..82a14528568b 100644
--- a/src/database/models/__tests__/session.test.ts
+++ b/src/database/models/__tests__/session.test.ts
@@ -4,7 +4,12 @@ import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { CreateMessageParams, MessageModel } from '@/database/models/message';
 import { TopicModel } from '@/database/models/topic';
 import { LobeAgentConfig } from '@/types/agent';
-import { LobeAgentSession, LobeSessionType, SessionGroupId } from '@/types/session';
+import {
+  LobeAgentSession,
+  LobeSessionType,
+  SessionDefaultGroup,
+  SessionGroupId,
+} from '@/types/session';
 
 import { SessionModel } from '../session';
 
@@ -51,6 +56,21 @@ describe('SessionModel', () => {
         expect(sessionInDb).toEqual(expect.objectContaining(sessionData));
       }
     });
+
+    it('should set group to default if it does not exist in SessionGroup', async () => {
+      const sessionDataWithInvalidGroup = {
+        ...sessionData,
+        group: 'nonExistentGroup',
+      } as LobeAgentSession;
+
+      const results = await SessionModel.batchCreate([sessionDataWithInvalidGroup]);
+
+      // Verify that the group has been set to default
+      for (const result of results.ids!) {
+        const sessionInDb = await SessionModel.findById(result);
+        expect(sessionInDb.group).toEqual(SessionDefaultGroup.Default);
+      }
+    });
   });
 
   describe('query', () => {
diff --git a/src/database/models/__tests__/sessionGroup.test.ts b/src/database/models/__tests__/sessionGroup.test.ts
index 299bf5a69660..6f311fd87147 100644
--- a/src/database/models/__tests__/sessionGroup.test.ts
+++ b/src/database/models/__tests__/sessionGroup.test.ts
@@ -1,5 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
+import { SessionModel } from '@/database/models/session';
 import { SessionGroups } from '@/types/session';
 
 import { DB_SessionGroup } from '../../schemas/sessionGroup';
@@ -68,6 +69,26 @@ describe('SessionGroupModel', () => {
       const fetchedGroups = await SessionGroupModel.query();
       expect(fetchedGroups).toHaveLength(0);
     });
+    it('should delete a session group and update associated sessions', async () => {
+      // Create a new session group
+      const createdGroup = await SessionGroupModel.create(
+        sessionGroupData.name,
+        sessionGroupData.sort,
+      );
+
+      // Delete the created session group
+      await SessionGroupModel.delete(createdGroup.id);
+
+      // Fetch all session groups to confirm deletion
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups).toHaveLength(0);
+
+      // Fetch all sessions to confirm update
+      const fetchedSessions = await SessionModel.query();
+      fetchedSessions.forEach((session) => {
+        expect(session.group).not.toEqual(createdGroup.id);
+      });
+    });
   });
 
   describe('query', () => {
diff --git a/src/database/models/session.ts b/src/database/models/session.ts
index 120b93553fd2..a12bb34b5695 100644
--- a/src/database/models/session.ts
+++ b/src/database/models/session.ts
@@ -27,7 +27,19 @@ class _SessionModel extends BaseModel {
   }
 
   async batchCreate(sessions: LobeAgentSession[]) {
-    const DB_Sessions = sessions.map((s) => this.mapToDB_Session(s));
+    const DB_Sessions = await Promise.all(
+      sessions.map(async (s) => {
+        if (s.group && s.group !== SessionDefaultGroup.Default) {
+          // Check if the group exists in the SessionGroup table
+          const groupExists = await SessionGroupModel.findById(s.group);
+          // If the group does not exist, set it to default
+          if (!groupExists) {
+            s.group = SessionDefaultGroup.Default;
+          }
+        }
+        return this.mapToDB_Session(s);
+      }),
+    );
 
     return this._batchAdd<DB_Session>(DB_Sessions, { idGenerator: uuid });
   }
diff --git a/src/database/models/sessionGroup.ts b/src/database/models/sessionGroup.ts
index 758ccfd59c6f..cff661c4f1b1 100644
--- a/src/database/models/sessionGroup.ts
+++ b/src/database/models/sessionGroup.ts
@@ -24,9 +24,15 @@ class _SessionGroupModel extends BaseModel {
   }
 
   async delete(id: string, removeGroupItem: boolean = false) {
-    if (!removeGroupItem) return this.table.delete(id);
-
-    // TODO: delete all session associated with the sessionGroup
+    this.db.sessions.toCollection().modify((session) => {
+      //  update all session associated with the sessionGroup to default
+      if (session.group === id) session.group = 'default';
+    });
+    if (!removeGroupItem) {
+      return this.table.delete(id);
+    } else {
+      return this.db.sessions.where('group').equals(id).delete();
+    }
   }
 
   async query(): Promise<SessionGroups> {
diff --git a/src/locales/default/common.ts b/src/locales/default/common.ts
index cadde0f0ff4a..217a96b74f14 100644
--- a/src/locales/default/common.ts
+++ b/src/locales/default/common.ts
@@ -44,6 +44,7 @@ export default {
       added: '导入成功',
       errors: '导入出错',
       messages: '消息',
+      sessionGroups: '分组',
       sessions: '助手',
       skips: '重复跳过',
       topics: '话题',
diff --git a/src/migrations/FromV2ToV3/index.ts b/src/migrations/FromV2ToV3/index.ts
index 158a4b93bebd..691e121ec212 100644
--- a/src/migrations/FromV2ToV3/index.ts
+++ b/src/migrations/FromV2ToV3/index.ts
@@ -14,6 +14,7 @@ export class MigrationV2ToV3 implements Migration {
       ...data,
       state: {
         ...data.state,
+        sessionGroups: [],
         sessions: sessions.map((s) => this.migrateSession(s)),
       },
     };
diff --git a/src/migrations/FromV2ToV3/types/v3.ts b/src/migrations/FromV2ToV3/types/v3.ts
index 52c50fe0c75b..9f322a2639d0 100644
--- a/src/migrations/FromV2ToV3/types/v3.ts
+++ b/src/migrations/FromV2ToV3/types/v3.ts
@@ -3,6 +3,7 @@ import { V1Config } from '@/migrations/FromV1ToV2/types/v1';
 import { Meta, V2ConfigState } from '../../FromV1ToV2/types/v2';
 
 export interface V3ConfigState extends V2ConfigState {
+  sessionGroups: V3SessionGroup[];
   sessions: V3Session[];
 }
 
@@ -16,3 +17,11 @@ export interface V3Session {
   type: string;
   updatedAt: number;
 }
+
+export interface V3SessionGroup {
+  createdAt: number;
+  id: string;
+  name: string;
+  sort: number;
+  updatedAt: number;
+}
diff --git a/src/services/config.ts b/src/services/config.ts
index 14e8cc3e5048..e88bbeae5ab0 100644
--- a/src/services/config.ts
+++ b/src/services/config.ts
@@ -7,7 +7,7 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { ConfigFile } from '@/types/exportConfig';
 import { ChatMessage } from '@/types/message';
-import { LobeSessions } from '@/types/session';
+import { LobeSessions, SessionGroupItem } from '@/types/session';
 import { GlobalSettings } from '@/types/settings';
 import { ChatTopic } from '@/types/topic';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
@@ -19,6 +19,7 @@ export interface ImportResult {
 }
 export interface ImportResults {
   messages?: ImportResult;
+  sessionGroups?: ImportResult;
   sessions: ImportResult;
   topics?: ImportResult;
 }
@@ -40,6 +41,9 @@ class ConfigService {
   importTopics = async (topics: ChatTopic[]) => {
     return topicService.batchCreateTopics(topics);
   };
+  importSessionGroups = async (sessionGroups: SessionGroupItem[]) => {
+    return sessionService.batchCreateSessionGroups(sessionGroups);
+  };
 
   importConfigState = async (config: ConfigFile): Promise<ImportResults | undefined> => {
     switch (config.exportType) {
@@ -59,6 +63,8 @@ class ConfigService {
       case 'all': {
         await this.importSettings(config.state.settings);
 
+        const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
         const [sessions, messages, topics] = await Promise.all([
           this.importSessions(config.state.sessions),
           this.importMessages(config.state.messages),
@@ -67,12 +73,15 @@ class ConfigService {
 
         return {
           messages: this.mapImportResult(messages),
+          sessionGroups: this.mapImportResult(sessionGroups),
           sessions: this.mapImportResult(sessions),
           topics: this.mapImportResult(topics),
         };
       }
 
       case 'sessions': {
+        const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
         const [sessions, messages, topics] = await Promise.all([
           this.importSessions(config.state.sessions),
           this.importMessages(config.state.messages),
@@ -81,6 +90,7 @@ class ConfigService {
 
         return {
           messages: this.mapImportResult(messages),
+          sessionGroups: this.mapImportResult(sessionGroups),
           sessions: this.mapImportResult(sessions),
           topics: this.mapImportResult(topics),
         };
@@ -104,10 +114,11 @@ class ConfigService {
    */
   exportSessions = async () => {
     const sessions = await sessionService.getSessions();
+    const sessionGroups = await sessionService.getSessionGroups();
     const messages = await messageService.getAllMessages();
     const topics = await topicService.getAllTopics();
 
-    const config = createConfigFile('sessions', { messages, sessions, topics });
+    const config = createConfigFile('sessions', { messages, sessionGroups, sessions, topics });
 
     exportConfigFile(config, 'sessions');
   };
@@ -174,11 +185,12 @@ class ConfigService {
    */
   exportAll = async () => {
     const sessions = await sessionService.getSessions();
+    const sessionGroups = await sessionService.getSessionGroups();
     const messages = await messageService.getAllMessages();
     const topics = await topicService.getAllTopics();
     const settings = this.getSettings();
 
-    const config = createConfigFile('all', { messages, sessions, settings, topics });
+    const config = createConfigFile('all', { messages, sessionGroups, sessions, settings, topics });
 
     exportConfigFile(config, 'config');
   };
diff --git a/src/services/session.ts b/src/services/session.ts
index d5896313490c..e76222edbb54 100644
--- a/src/services/session.ts
+++ b/src/services/session.ts
@@ -103,7 +103,7 @@ class SessionService {
   }
 
   async removeSessionGroup(id: string, removeChildren?: boolean) {
-    return SessionGroupModel.delete(id, removeChildren);
+    return await SessionGroupModel.delete(id, removeChildren);
   }
 
   async updateSessionGroup(id: string, data: Partial<SessionGroupItem>) {
@@ -113,6 +113,10 @@ class SessionService {
   async updateSessionGroupOrder(sortMap: { id: string; sort: number }[]) {
     return SessionGroupModel.updateOrder(sortMap);
   }
+
+  async getSessionGroups(): Promise<SessionGroupItem[]> {
+    return SessionGroupModel.query();
+  }
 }
 
 export const sessionService = new SessionService();
diff --git a/src/store/session/slices/session/action.ts b/src/store/session/slices/session/action.ts
index 2946694e224d..bdb03a198be6 100644
--- a/src/store/session/slices/session/action.ts
+++ b/src/store/session/slices/session/action.ts
@@ -13,7 +13,6 @@ import { SessionStore } from '@/store/session';
 import {
   ChatSessionList,
   LobeAgentSession,
-  LobeAgentSettings,
   LobeSessionType,
   LobeSessions,
 } from '@/types/session';
@@ -43,7 +42,7 @@ export interface SessionAction {
    * @param agent
    * @returns sessionId
    */
-  createSession: (agent?: DeepPartial<LobeAgentSettings>) => Promise<string>;
+  createSession: (session?: DeepPartial<LobeAgentSession>) => Promise<string>;
   duplicateSession: (id: string) => Promise<void>;
   /**
    * Pins or unpins a session.
diff --git a/src/types/exportConfig.ts b/src/types/exportConfig.ts
index 92c0e77ee765..3e52736d59f2 100644
--- a/src/types/exportConfig.ts
+++ b/src/types/exportConfig.ts
@@ -1,5 +1,5 @@
 import { ChatMessage } from '@/types/message';
-import { LobeSessions } from '@/types/session';
+import { LobeSessions, SessionGroupItem } from '@/types/session';
 import { GlobalSettings } from '@/types/settings';
 import { ChatTopic } from '@/types/topic';
 
@@ -43,6 +43,7 @@ export interface ConfigModelMap {
  */
 export interface ConfigStateSessions {
   messages: ChatMessage[];
+  sessionGroups: SessionGroupItem[];
   sessions: LobeSessions;
   topics: ChatTopic[];
 }

From b789366b830e5c422ce05d6c8deacc578ad9034f Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 23 Jan 2024 22:43:44 +0800
Subject: [PATCH 12/20] =?UTF-8?q?=E2=9C=85=20test:=20fix=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/database/models/__tests__/session.test.ts      | 3 +++
 src/database/models/__tests__/sessionGroup.test.ts | 9 ++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/database/models/__tests__/session.test.ts b/src/database/models/__tests__/session.test.ts
index 82a14528568b..b875a2a51232 100644
--- a/src/database/models/__tests__/session.test.ts
+++ b/src/database/models/__tests__/session.test.ts
@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { CreateMessageParams, MessageModel } from '@/database/models/message';
+import { SessionGroupModel } from '@/database/models/sessionGroup';
 import { TopicModel } from '@/database/models/topic';
 import { LobeAgentConfig } from '@/types/agent';
 import {
@@ -88,6 +89,8 @@ describe('SessionModel', () => {
     it('should query sessions by group', async () => {
       // Create multiple sessions to test the queryByGroup method
       const group: SessionGroupId = 'testGroup';
+      await SessionGroupModel.create('测试分组', 0, group);
+
       await SessionModel.batchCreate([sessionData, sessionData] as LobeAgentSession[]);
 
       const sessionsByGroup = await SessionModel.querySessionsByGroupId(group);
diff --git a/src/database/models/__tests__/sessionGroup.test.ts b/src/database/models/__tests__/sessionGroup.test.ts
index 6f311fd87147..844e4f193c23 100644
--- a/src/database/models/__tests__/sessionGroup.test.ts
+++ b/src/database/models/__tests__/sessionGroup.test.ts
@@ -114,8 +114,11 @@ describe('SessionGroupModel', () => {
 
     it('should return session groups sorted by createdAt when sort field does not exist', async () => {
       const group1 = await SessionGroupModel.create('group1');
+      await new Promise((resolve) => setTimeout(() => resolve(undefined), 300));
       const group2 = await SessionGroupModel.create('group2');
+
       const fetchedGroups = await SessionGroupModel.query();
+
       expect(fetchedGroups[0].id).toEqual(group2.id);
       expect(fetchedGroups[1].id).toEqual(group1.id);
     });
@@ -144,11 +147,7 @@ describe('SessionGroupModel', () => {
 
     it('should return session groups sorted by createdAt when sort fields are equal', async () => {
       const group1 = await SessionGroupModel.create('group1', 1);
-      await new Promise((resolve) =>
-        setTimeout(() => {
-          resolve(undefined);
-        }, 300),
-      );
+      await new Promise((resolve) => setTimeout(() => resolve(undefined), 300));
       const group2 = await SessionGroupModel.create('group2', 1);
       const fetchedGroups = await SessionGroupModel.query();
       expect(fetchedGroups[0].id).toEqual(group2.id);

From f358a5937be2683c2fe65f6ca4f1d48237cd87fb Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 23 Jan 2024 23:12:49 +0800
Subject: [PATCH 13/20] =?UTF-8?q?=E2=9C=85=20test:=20add=20test=20for=20co?=
 =?UTF-8?q?mmon=20action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/global/slices/common/action.test.ts | 130 ++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 src/store/global/slices/common/action.test.ts

diff --git a/src/store/global/slices/common/action.test.ts b/src/store/global/slices/common/action.test.ts
new file mode 100644
index 000000000000..70743eb3ce58
--- /dev/null
+++ b/src/store/global/slices/common/action.test.ts
@@ -0,0 +1,130 @@
+import { act, renderHook } from '@testing-library/react';
+import { router } from 'next/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { globalService } from '@/services/global';
+import { useGlobalStore } from '@/store/global';
+import { type Guide, SidebarTabKey } from '@/store/global/slices/common/initialState';
+
+// Mock globalService
+vi.mock('@/services/global', () => ({
+  globalService: {
+    getLatestVersion: vi.fn(),
+    getGlobalConfig: vi.fn(),
+  },
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('createCommonSlice', () => {
+  describe('switchBackToChat', () => {
+    it('should switch back to chat', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const sessionId = 'session-id';
+      const router = { push: vi.fn() } as any;
+
+      act(() => {
+        useGlobalStore.setState({ router });
+        result.current.switchBackToChat(sessionId);
+      });
+
+      expect(router.push).toHaveBeenCalledWith('/chat?session=session-id');
+    });
+  });
+
+  describe('switchSideBar', () => {
+    it('should switch sidebar', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        result.current.switchSideBar(SidebarTabKey.Market);
+      });
+
+      expect(result.current.sidebarKey).toEqual(SidebarTabKey.Market);
+    });
+  });
+
+  describe('toggleChatSideBar', () => {
+    it('should toggle chat sidebar', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        useGlobalStore.getState().updatePreference({ showChatSideBar: false });
+        result.current.toggleChatSideBar();
+      });
+
+      expect(result.current.preference.showChatSideBar).toBe(true);
+    });
+
+    // Add more tests for other actions in createCommonSlice
+  });
+
+  describe('toggleExpandSessionGroup', () => {
+    it('should toggle expand session group', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const groupId = 'group-id';
+
+      act(() => {
+        result.current.toggleExpandSessionGroup(groupId, true);
+      });
+
+      expect(result.current.preference.expandSessionGroupKeys).toContain(groupId);
+    });
+  });
+
+  describe('toggleMobileTopic', () => {
+    it('should toggle mobile topic', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        result.current.toggleMobileTopic();
+      });
+
+      expect(result.current.preference.mobileShowTopic).toBe(true);
+    });
+  });
+
+  describe('toggleSystemRole', () => {
+    it('should toggle system role', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        result.current.toggleSystemRole(true);
+      });
+
+      expect(result.current.preference.showSystemRole).toBe(true);
+    });
+  });
+
+  describe('updateGuideState', () => {
+    it('should update guide state', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const guide: Guide = { topic: true };
+
+      act(() => {
+        result.current.updateGuideState(guide);
+      });
+
+      expect(result.current.preference.guide).toEqual(guide);
+    });
+  });
+
+  describe('updatePreference', () => {
+    it('should update preference', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const preference = { inputHeight: 200 };
+
+      act(() => {
+        result.current.updatePreference(preference);
+      });
+
+      expect(result.current.preference.inputHeight).toEqual(200);
+    });
+  });
+});

From a5eb9462d8cc322c95128275c761ab5bc67bcdf3 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 23 Jan 2024 23:20:41 +0800
Subject: [PATCH 14/20] =?UTF-8?q?=F0=9F=8E=A8=20chore:=20clear=20console?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/database/core/db.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/database/core/db.ts b/src/database/core/db.ts
index c6c1845716c1..600f4a445e4a 100644
--- a/src/database/core/db.ts
+++ b/src/database/core/db.ts
@@ -52,14 +52,12 @@ export class LocalDB extends Dexie {
    * from `group = pinned` to `pinned:true`
    */
   upgradeToV4 = async (trans: Transaction) => {
-    console.log('start');
     const sessions = trans.table('sessions');
     await sessions.toCollection().modify((session) => {
       // translate boolean to number
       session.pinned = session.group === 'pinned' ? 1 : 0;
       session.group = 'default';
     });
-    console.log('finished');
   };
 }
 

From 2a908ebf630703f753c52107e859340db0acb1e5 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 23 Jan 2024 23:32:12 +0800
Subject: [PATCH 15/20] =?UTF-8?q?=F0=9F=90=9B=20fix:=20support=20clear=20a?=
 =?UTF-8?q?ll=20sessionGroups?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/settings/common/Common.tsx              | 6 +++++-
 src/services/config.ts                          | 5 +++--
 src/services/session.ts                         | 4 ++++
 src/store/session/slices/sessionGroup/action.ts | 9 ++++++++-
 src/types/exportConfig.ts                       | 1 +
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/app/settings/common/Common.tsx b/src/app/settings/common/Common.tsx
index 478aec978f4e..3f99d6ef16bf 100644
--- a/src/app/settings/common/Common.tsx
+++ b/src/app/settings/common/Common.tsx
@@ -30,7 +30,10 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
 
-  const clearSessions = useSessionStore((s) => s.clearSessions);
+  const [clearSessions, clearSessionGroups] = useSessionStore((s) => [
+    s.clearSessions,
+    s.clearSessionGroups,
+  ]);
   const [clearTopics, clearAllMessages] = useChatStore((s) => [
     s.removeAllTopics,
     s.clearAllMessages,
@@ -71,6 +74,7 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
         await clearTopics();
         await removeAllFiles();
         await clearAllMessages();
+        await clearSessionGroups();
 
         message.success(t('danger.clear.success'));
       },
diff --git a/src/services/config.ts b/src/services/config.ts
index e88bbeae5ab0..0f6fb3488694 100644
--- a/src/services/config.ts
+++ b/src/services/config.ts
@@ -103,8 +103,9 @@ class ConfigService {
    */
   exportAgents = async () => {
     const agents = await sessionService.getAllAgents();
+    const sessionGroups = await sessionService.getSessionGroups();
 
-    const config = createConfigFile('agents', { sessions: agents });
+    const config = createConfigFile('agents', { sessionGroups, sessions: agents });
 
     exportConfigFile(config, 'agents');
   };
@@ -164,7 +165,7 @@ class ConfigService {
     const agent = this.getAgent(id);
     if (!agent) return;
 
-    const config = createConfigFile('agents', { sessions: [agent] });
+    const config = createConfigFile('agents', { sessionGroups: [], sessions: [agent] });
 
     exportConfigFile(config, agent.meta?.title || 'agent');
   };
diff --git a/src/services/session.ts b/src/services/session.ts
index e76222edbb54..f59fdb9af7f1 100644
--- a/src/services/session.ts
+++ b/src/services/session.ts
@@ -117,6 +117,10 @@ class SessionService {
   async getSessionGroups(): Promise<SessionGroupItem[]> {
     return SessionGroupModel.query();
   }
+
+  async clearSessionGroups() {
+    return SessionGroupModel.clear();
+  }
 }
 
 export const sessionService = new SessionService();
diff --git a/src/store/session/slices/sessionGroup/action.ts b/src/store/session/slices/sessionGroup/action.ts
index 99a8dcdf0caf..4d4f56860cb7 100644
--- a/src/store/session/slices/sessionGroup/action.ts
+++ b/src/store/session/slices/sessionGroup/action.ts
@@ -6,6 +6,7 @@ import { SessionGroupItem } from '@/types/session';
 
 export interface SessionGroupAction {
   addSessionGroup: (name: string) => Promise<string>;
+  clearSessionGroups: () => Promise<void>;
   removeSessionGroup: (id: string) => Promise<void>;
   updateSessionGroupId: (sessionId: string, groupId: string) => Promise<void>;
   updateSessionGroupName: (id: string, name: string) => Promise<void>;
@@ -25,6 +26,12 @@ export const createSessionGroupSlice: StateCreator<
 
     return id;
   },
+
+  clearSessionGroups: async () => {
+    await sessionService.clearSessionGroups();
+    await get().refreshSessions();
+  },
+
   removeSessionGroup: async (id) => {
     await sessionService.removeSessionGroup(id);
     await get().refreshSessions();
@@ -34,11 +41,11 @@ export const createSessionGroupSlice: StateCreator<
 
     await get().refreshSessions();
   },
+
   updateSessionGroupName: async (id, name) => {
     await sessionService.updateSessionGroup(id, { name });
     await get().refreshSessions();
   },
-
   updateSessionGroupSort: async (items) => {
     const sortMap = items.map((item, index) => ({ id: item.id, sort: index }));
     await sessionService.updateSessionGroupOrder(sortMap);
diff --git a/src/types/exportConfig.ts b/src/types/exportConfig.ts
index 3e52736d59f2..9f6c5b32e437 100644
--- a/src/types/exportConfig.ts
+++ b/src/types/exportConfig.ts
@@ -61,6 +61,7 @@ export interface ConfigStateSingleSession {
  * 配置状态：角色
  */
 export interface ConfigStateAgents {
+  sessionGroups: SessionGroupItem[];
   sessions: LobeSessions;
 }
 

From 04556cdefb86e6b7e32acb9070a8016f3f2753bb Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 23 Jan 2024 23:46:36 +0800
Subject: [PATCH 16/20] =?UTF-8?q?=E2=9C=85=20test:=20add=20test=20for=20se?=
 =?UTF-8?q?ssionService?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/services/__tests__/session.test.ts | 200 ++++++++++++++++++++++++-
 src/services/session.ts                |   4 -
 2 files changed, 195 insertions(+), 9 deletions(-)

diff --git a/src/services/__tests__/session.test.ts b/src/services/__tests__/session.test.ts
index 32fcf5695c97..0dedb7e2fc76 100644
--- a/src/services/__tests__/session.test.ts
+++ b/src/services/__tests__/session.test.ts
@@ -1,13 +1,12 @@
 import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { SessionModel } from '@/database/models/session';
+import { SessionGroupModel } from '@/database/models/sessionGroup';
 import { LobeAgentConfig } from '@/types/agent';
-import { LobeAgentSession, LobeSessionType } from '@/types/session';
+import { LobeAgentSession, LobeSessionType, SessionGroups } from '@/types/session';
 
 import { sessionService } from '../session';
 
-// 请确保路径与你的项目结构匹配
-
 // Mock the SessionModel
 vi.mock('@/database/models/session', () => {
   return {
@@ -22,6 +21,28 @@ vi.mock('@/database/models/session', () => {
       queryByKeyword: vi.fn(),
       updateConfig: vi.fn(),
       queryByGroupIds: vi.fn(),
+      updatePinned: vi.fn(),
+      duplicate: vi.fn(),
+      queryWithGroups: vi.fn(),
+    },
+  };
+});
+
+// Mock the SessionGroupModel
+vi.mock('@/database/models/sessionGroup', () => {
+  return {
+    SessionGroupModel: {
+      create: vi.fn(),
+      query: vi.fn(),
+      delete: vi.fn(),
+      clear: vi.fn(),
+      update: vi.fn(),
+      batchCreate: vi.fn(),
+      isEmpty: vi.fn(),
+      updateOrder: vi.fn(),
+      queryByKeyword: vi.fn(),
+      updateConfig: vi.fn(),
+      queryByGroupIds: vi.fn(),
     },
   };
 });
@@ -67,7 +88,6 @@ describe('SessionService', () => {
       );
     });
   });
-  // ... (前面的测试代码)
 
   describe('batchCreateSessions', () => {
     it('should batch create sessions', async () => {
@@ -82,8 +102,9 @@ describe('SessionService', () => {
       expect(result).toBe(mockSessions);
     });
   });
+
   describe('getSessions', () => {
-    it('should retrieve sessions', async () => {
+    it('should retrieve sessions with their group ids', async () => {
       // Setup
       (SessionModel.query as Mock).mockResolvedValue(mockSessions);
 
@@ -185,6 +206,7 @@ describe('SessionService', () => {
       expect(result).toEqual({ ...mockSession, config: newConfig });
     });
   });
+
   describe('hasSessions', () => {
     it('should return false if no sessions exist', async () => {
       // Setup
@@ -225,4 +247,172 @@ describe('SessionService', () => {
       expect(result).toBe(mockSessions);
     });
   });
+
+  describe('duplicateSession', () => {
+    it('should duplicate a session and return its id', async () => {
+      // Setup
+      const newTitle = 'Duplicated Session';
+      (SessionModel.duplicate as Mock).mockResolvedValue({
+        ...mockSession,
+        id: 'duplicated-session-id',
+      });
+
+      // Execute
+      const duplicatedSessionId = await sessionService.duplicateSession(mockSessionId, newTitle);
+
+      // Assert
+      expect(SessionModel.duplicate).toHaveBeenCalledWith(mockSessionId, newTitle);
+      expect(duplicatedSessionId).toBe('duplicated-session-id');
+    });
+  });
+
+  describe('getSessionsWithGroup', () => {
+    it('should retrieve sessions with their group', async () => {
+      // Setup
+      (SessionModel.queryWithGroups as Mock).mockResolvedValue(mockSessions);
+
+      // Execute
+      const sessionsWithGroup = await sessionService.getSessionsWithGroup();
+
+      // Assert
+      expect(SessionModel.queryWithGroups).toHaveBeenCalled();
+      expect(sessionsWithGroup).toBe(mockSessions);
+    });
+  });
+
+  describe('updateSessionPinned', () => {
+    it('should update the pinned status of a session', async () => {
+      // Setup
+      const pinned = true;
+      (SessionModel.updatePinned as Mock).mockResolvedValue({ ...mockSession, pinned });
+
+      // Execute
+      const result = await sessionService.updateSessionPinned(mockSessionId, pinned);
+
+      // Assert
+      expect(SessionModel.updatePinned).toHaveBeenCalledWith(mockSessionId, pinned);
+      expect(result).toEqual({ ...mockSession, pinned });
+    });
+  });
+
+  // SessionGroup related tests
+  describe('createSessionGroup', () => {
+    it('should create a new session group and return its id', async () => {
+      // Setup
+      const groupName = 'New Group';
+      const sort = 1;
+      (SessionGroupModel.create as Mock).mockResolvedValue({
+        id: 'new-group-id',
+        name: groupName,
+        sort,
+      });
+
+      // Execute
+      const groupId = await sessionService.createSessionGroup(groupName, sort);
+
+      // Assert
+      expect(SessionGroupModel.create).toHaveBeenCalledWith(groupName, sort);
+      expect(groupId).toBe('new-group-id');
+    });
+  });
+
+  describe('batchCreateSessionGroups', () => {
+    it('should batch create session groups', async () => {
+      // Setup
+      const groups = [
+        { id: 'group-1', name: 'Group 1', sort: 1 },
+        { id: 'group-2', name: 'Group 2', sort: 2 },
+      ] as SessionGroups;
+
+      (SessionGroupModel.batchCreate as Mock).mockResolvedValue(groups);
+
+      // Execute
+      const result = await sessionService.batchCreateSessionGroups(groups);
+
+      // Assert
+      expect(SessionGroupModel.batchCreate).toHaveBeenCalledWith(groups);
+      expect(result).toBe(groups);
+    });
+  });
+
+  describe('removeSessionGroup', () => {
+    it('should remove a session group by its id', async () => {
+      // Setup
+      const removeChildren = true;
+      (SessionGroupModel.delete as Mock).mockResolvedValue(true);
+
+      // Execute
+      const result = await sessionService.removeSessionGroup('group-id', removeChildren);
+
+      // Assert
+      expect(SessionGroupModel.delete).toHaveBeenCalledWith('group-id', removeChildren);
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('clearSessionGroups', () => {
+    it('should clear all session groups', async () => {
+      // Setup
+      (SessionGroupModel.clear as Mock).mockResolvedValue(true);
+
+      // Execute
+      const result = await sessionService.clearSessionGroups();
+
+      // Assert
+      expect(SessionGroupModel.clear).toHaveBeenCalled();
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('getSessionGroups', () => {
+    it('should retrieve all session groups', async () => {
+      // Setup
+      const groups = [
+        { id: 'group-1', name: 'Group 1', sort: 1 },
+        { id: 'group-2', name: 'Group 2', sort: 2 },
+      ];
+      (SessionGroupModel.query as Mock).mockResolvedValue(groups);
+
+      // Execute
+      const result = await sessionService.getSessionGroups();
+
+      // Assert
+      expect(SessionGroupModel.query).toHaveBeenCalled();
+      expect(result).toBe(groups);
+    });
+  });
+
+  describe('updateSessionGroup', () => {
+    it('should update a session group', async () => {
+      // Setup
+      const groupId = 'group-1';
+      const data = { name: 'Updated Group', sort: 2 };
+      (SessionGroupModel.update as Mock).mockResolvedValue({ id: groupId, ...data });
+
+      // Execute
+      const result = await sessionService.updateSessionGroup(groupId, data);
+
+      // Assert
+      expect(SessionGroupModel.update).toHaveBeenCalledWith(groupId, data);
+      expect(result).toEqual({ id: groupId, ...data });
+    });
+  });
+
+  describe('updateSessionGroupOrder', () => {
+    it('should update the order of session groups', async () => {
+      // Setup
+      const sortMap = [
+        { id: 'group-1', sort: 2 },
+        { id: 'group-2', sort: 1 },
+      ];
+      (SessionGroupModel.updateOrder as Mock).mockResolvedValue(true);
+
+      // Execute
+      const result = await sessionService.updateSessionGroupOrder(sortMap);
+
+      // Assert
+      expect(SessionGroupModel.updateOrder).toHaveBeenCalledWith(sortMap);
+      expect(result).toBe(true);
+    });
+  });
 });
diff --git a/src/services/session.ts b/src/services/session.ts
index f59fdb9af7f1..825eec8ae491 100644
--- a/src/services/session.ts
+++ b/src/services/session.ts
@@ -37,10 +37,6 @@ class SessionService {
   }
 
   async getSessions(): Promise<LobeSessions> {
-    const groups = await SessionGroupModel.query();
-    const data = await SessionModel.queryByGroupIds(groups.map((item) => item.id));
-
-    console.log(data);
     return SessionModel.query();
   }
 

From 7a3342f9f7519662a31609535bdff2663941d130 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Tue, 23 Jan 2024 23:54:45 +0800
Subject: [PATCH 17/20] =?UTF-8?q?=F0=9F=90=9B=20fix:=20fix=20agent=20impor?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/services/config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/services/config.ts b/src/services/config.ts
index 0f6fb3488694..c03368c0442a 100644
--- a/src/services/config.ts
+++ b/src/services/config.ts
@@ -54,8 +54,11 @@ class ConfigService {
       }
 
       case 'agents': {
+        const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
         const data = await this.importSessions(config.state.sessions);
         return {
+          sessionGroups: this.mapImportResult(sessionGroups),
           sessions: this.mapImportResult(data),
         };
       }

From 6be36a70fb1701fbef24171b35c7f165894b84d5 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Wed, 24 Jan 2024 00:04:06 +0800
Subject: [PATCH 18/20] =?UTF-8?q?=F0=9F=93=9D=20docs:=20Update=20Feature-D?=
 =?UTF-8?q?evelopment.zh-CN.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/Development/Feature-Development.zh-CN.md | 411 +++++++++++++++---
 1 file changed, 343 insertions(+), 68 deletions(-)

diff --git a/docs/Development/Feature-Development.zh-CN.md b/docs/Development/Feature-Development.zh-CN.md
index 9deba1a48ff4..1395c55371cb 100644
--- a/docs/Development/Feature-Development.zh-CN.md
+++ b/docs/Development/Feature-Development.zh-CN.md
@@ -1,20 +1,21 @@
 # LobeChat 功能开发完全指南
 
-本文档旨在指导开发者了解我们在 LobeChat 中的完整功能实现流程。我们将以 sessionGroup 的实现为例：[✨ feat: add session group manager](https://github.com/lobehub/lobe-chat/pull/1055) . 介绍完整实现流程。
+本文档旨在指导开发者了解如何在 LobeChat 中开发一块完整的功能需求。
 
-本文通过以下五个主要部分来阐述完整的实现流程：
+我们将以 sessionGroup 的实现为示例：[✨ feat: add session group manager](https://github.com/lobehub/lobe-chat/pull/1055) ， 通过以下六个主要部分来阐述完整的实现流程：
 
 1. 数据模型 / 数据库定义
 2. Service 实现 / Model 实现
 3. 前端数据流 Store 实现
 4. UI 实现与 action 绑定
 5. 数据迁移
+6. 数据导入导出
 
 ## 一、数据库部分
 
 为了实现 Session Group 功能，首先需要在数据库层面定义相关的数据模型和索引。
 
-定义一个新的 sessionGroup 表，分 4 步：
+定义一个新的 sessionGroup 表，分 3 步：
 
 ### 1. 建立数据模型 schema
 
@@ -33,7 +34,7 @@ export type DB_SessionGroup = z.infer<typeof DB_SessionGroupSchema>;
 
 ### 2. 创建数据库索引
 
-由于新增了一个表，需要在在数据库 Schema 中，为 `sessionGroup` 表添加索引。
+由于要新增一个表，所以需要在在数据库 Schema 中，为 `sessionGroup` 表添加索引。
 
 在 `src/database/core/schema.ts` 中添加 `dbSchemaV4`:
 
@@ -63,9 +64,17 @@ export const dbSchemaV3 = {
 };
 ```
 
-### 3. 在 db 中加入 sessionGroups 表
+> \[!Note]
+>
+> 除了 `sessionGroups` 外，此处也修改了 `sessions` 的定义，原因是存在数据迁移的情况。但由于本节只关注 schema 定义，不展开数据迁移部分实现，详情可见第五节。
+
+> \[!Important]
+>
+> 如果你不了解为何此处需要创建索引，以及不了解此处的 schema 的定义语法。你可能需要提前了解下 Dexie.js 相关的基础知识，可以查阅 [📘 本地数据库](./Local-Database.zh-CN) 部分了解相关内容。
 
-扩展本地核心 DB `LocalDB` 类以包含新的 `sessionGroups` 表：
+### 3. 在本地 DB 中加入 sessionGroups 表
+
+扩展本地数据库类以包含新的 `sessionGroups` 表：
 
 ```diff
 
@@ -106,13 +115,17 @@ export class LocalDB extends Dexie {
 }
 ```
 
-> \[!Note]
->
-> 在最后一部分，还包含了数据迁移相关的工作，由于本节只关注 schema 定义，因此不呈现迁移代码。
+如此一来，你就可以通过在 `Application` -> `Storage` -> `IndexedDB` 中查看到 `LOBE_CHAT_DB` 里的 `sessionGroups` 表了。
+
+![](https://github.com/lobehub/lobe-chat/assets/28616219/aea50f66-4060-4a32-88c8-b3c672d05be8)
 
-### 4. 定义 Model
+## 二、Model 与 Service 部分
 
-在 `model/sessionGroup.ts` 中定义 `SessionGroupModel`：
+### 定义 Model
+
+在构建 LobeChat 应用时，Model 负责与数据库的交互，它定义了如何读取、插入、更新和删除数据库的数据，定义具体的业务逻辑。
+
+在 `src/database/model/sessionGroup.ts` 中定义 `SessionGroupModel`：
 
 ```typescript
 import { BaseModel } from '@/database/core';
@@ -134,9 +147,13 @@ class _SessionGroupModel extends BaseModel {
 export const SessionGroupModel = new _SessionGroupModel();
 ```
 
-## 二、Service 部分
+### Service 实现
+
+在 LobeChat 中，Service 层主要负责与后端服务进行通信，封装业务逻辑，并提供数据给前端的其他层使用。`SessionService` 是一个专门处理与会话（Session）相关业务逻辑的服务类，它封装了创建会话、查询会话、更新会话等操作。
+
+为了保持代码的可维护性和可扩展性，我们将会话分组相关的服务逻辑放在 `SessionService` 中，这样可以使会话领域的业务逻辑保持内聚。当业务需求增加或变化时，我们可以更容易地在这个领域内进行修改和扩展。
 
-在 `sessionService` 中实现 Session Group 相关的请求逻辑：
+`SessionService` 通过调用 `SessionGroupModel` 的方法来实现对会话分组的管理。 在 `sessionService` 中实现 Session Group 相关的请求逻辑：
 
 ```typescript
 class SessionService {
@@ -159,32 +176,32 @@ class SessionService {
 }
 ```
 
-把 sessionGroup 的实现放到 sessionService 的考虑是，可以让会话 Session 领域更加内聚。如果未来对 sessionGroup 有了更多的要求，可以考虑再单独拆除。例如 chat 就是从 session 中拆出来的一个独立域。
-
 ## 三、Store Action 部分
 
+在 LobeChat 应用中，Store 是用于管理应用前端状态的模块。其中的 Action 是触发状态更新的函数，通常会调用服务层的方法来执行实际的数据处理操作，然后更新 Store 中的状态。我们采用了 `zustand` 作为 Store 模块的底层依赖，对于状态管理的详细实践介绍，可以查阅 [📘 状态管理最佳实践](./State-Management-Intro.zh-CN)
+
 ### sessionGroup CRUD
 
-在 `src/store/session/slice/sessionGroup` 中实现 Session Group 相关的逻辑。
+会话组的 CRUD 操作是管理会话组数据的核心行为。在 `src/store/session/slice/sessionGroup` 中，我们将实现与会话组相关的状态逻辑，包括添加、删除、更新会话组及其排序。
 
-以 `action.ts` 为例，需要实现的方法有：
+以下是 `action.ts` 文件中需要实现的 `SessionGroupAction` 接口方法：
 
 ```ts
 export interface SessionGroupAction {
-  // 增
+  // 增加会话组
   addSessionGroup: (name: string) => Promise<string>;
-  // 删
+  // 删除会话组
   removeSessionGroup: (id: string) => Promise<void>;
-  // 为 session 修改它的 groupId
+  // 更新会话的会话组 ID
   updateSessionGroupId: (sessionId: string, groupId: string) => Promise<void>;
-  // 改组名
+  // 更新会话组名称
   updateSessionGroupName: (id: string, name: string) => Promise<void>;
-  // 改分组排序
+  // 更新会话组排序
   updateSessionGroupSort: (items: SessionGroupItem[]) => Promise<void>;
 }
 ```
 
-以 `addSessionGroup` 为例，在 action 中调用 sessionService，并使用 `refreshSessions` 刷新 sessions 数据：
+以 `addSessionGroup` 方法为例，我们首先调用 `sessionService` 的 `createSessionGroup` 方法来创建新的会话组，然后使用 `refreshSessions` 方法来刷新 sessions 状态：
 
 ```ts
 export const createSessionGroupSlice: StateCreator<
@@ -193,20 +210,35 @@ export const createSessionGroupSlice: StateCreator<
   [],
   SessionGroupAction
 > = (set, get) => ({
+  // 实现添加会话组的逻辑
   addSessionGroup: async (name) => {
+    // 调用服务层的 createSessionGroup 方法并传入会话组名称
     const id = await sessionService.createSessionGroup(name);
+    // 调用 get 方法获取当前的 Store 状态并执行 refreshSessions 方法刷新会话数据
     await get().refreshSessions();
+    // 返回新创建的会话组 ID
     return id;
   },
   // ... 其他 action 实现
 });
 ```
 
-### sessions 分组
+通过以上的实现，我们可以确保在添加新的会话组后，应用的状态会及时更新，且相关的组件会收到最新的状态并重新渲染。这种方式提高了数据流的可预测性和可维护性，同时也简化了组件之间的通信。
 
-由于本次实现，会从单一的 sessions 变成 pinnedSessions、customSessionGroups 和 defaultSessions 三个，请求数据的逻辑也发生了变化：
+### Sessions 分组逻辑改造
 
-```ts
+本次需求改造需要对 Sessions 进行升级，从原来的单一列表变成了三个不同的分组：`pinnedSessions`（置顶列表）、`customSessionGroups`（自定义分组）和 `defaultSessions`（默认列表）。
+
+为了处理这些分组，我们需要改造 `useFetchSessions` 的实现逻辑。以下是关键的改动点：
+
+1. 使用 `sessionService.getSessionsWithGroup` 方法负责调用后端接口来获取分组后的会话数据；
+2. 将获取后的数据保存为三到不同的状态字段中：`pinnedSessions`、`customSessionGroups` 和 `defaultSessions`；
+
+#### `useFetchSessions` 方法
+
+该方法在 `createSessionSlice` 中定义，如下所示：
+
+```typescript
 export const createSessionSlice: StateCreator<
   SessionStore,
   [['zustand/devtools', never]],
@@ -233,32 +265,92 @@ export const createSessionSlice: StateCreator<
 });
 ```
 
-取数逻辑在 `sessionService.getSessionsWithGroup` ，直接调用了 `SessionModel.queryWithGroups()` 实现取数：
+在成功获取数据后，我们使用 `set` 方法来更新 `customSessionGroups`、`defaultSessions`、`pinnedSessions` 和 `sessions` 状态。这将保证状态与最新的会话数据同步。
 
-```ts
+#### getSessionsWithGroup
+
+使用 `sessionService.getSessionsWithGroup` 方法负责调用后端接口 `SessionModel.queryWithGroups()`
+
+```typescript
+class SessionService {
+  // ... 其他 SessionGroup 相关的实现
+
+  async getSessionsWithGroup(): Promise<ChatSessionList> {
+    return SessionModel.queryWithGroups();
+  }
+}
+```
+
+#### `SessionModel.queryWithGroups` 方法
+
+此方法是 `sessionService.getSessionsWithGroup` 调用的核心方法，它负责查询和组织会话数据，代码如下：
+
+```typescript
 class _SessionModel extends BaseModel {
   // ... 其他方法
 
+  /**
+   * 查询会话数据，并根据会话组将会话分类。
+   * @returns {Promise<ChatSessionList>} 返回一个对象，其中包含所有会话以及分为不同组的会话列表。
+   */
   async queryWithGroups(): Promise<ChatSessionList> {
+    // 查询会话组数据
     const groups = await SessionGroupModel.query();
+    // 根据会话组ID查询自定义会话组
     const customGroups = await this.queryByGroupIds(groups.map((item) => item.id));
+    // 查询默认会话列表
     const defaultItems = await this.querySessionsByGroupId(SessionDefaultGroup.Default);
+    // 查询置顶的会话
     const pinnedItems = await this.getPinnedSessions();
 
+    // 查询所有会话
     const all = await this.query();
+    // 组合并返回所有会话及其分组信息
     return {
-      all,
-      customGroup: groups.map((group) => ({
-        ...group,
-        children: customGroups[group.id],
-      })),
-      default: defaultItems,
-      pinned: pinnedItems,
+      all, // 包含所有会话的数组
+      customGroup: groups.map((group) => ({ ...group, children: customGroups[group.id] })), // 自定义分组
+      default: defaultItems, // 默认会话列表
+      pinned: pinnedItems, // 置顶会话列表
     };
   }
 }
 ```
 
+方法 `queryWithGroups` 首先查询所有会话组，然后基于这些组的 ID 查询自定义会话组，同时查询默认和固定的会话。最后，它返回一个包含所有会话和按组分类的会话列表对象。
+
+### sessions selectors 调整
+
+由于 sessions 中关于分组的逻辑发生了变化，因此我们需要调整 `sessions` 的 selectors 逻辑，以确保它们能够正确地处理新的数据结构。
+
+原有的 selectors:
+
+```ts
+// 默认分组
+const defaultSessions = (s: SessionStore): LobeSessions => s.sessions;
+
+// 置顶分组
+const pinnedSessionList = (s: SessionStore) =>
+  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Pinned);
+
+// 未置顶分组
+const unpinnedSessionList = (s: SessionStore) =>
+  defaultSessions(s).filter((s) => s.group === SessionGroupDefaultKeys.Default);
+```
+
+修改后：
+
+```ts
+const defaultSessions = (s: SessionStore): LobeSessions => s.defaultSessions;
+const pinnedSessions = (s: SessionStore): LobeSessions => s.pinnedSessions;
+const customSessionGroups = (s: SessionStore): CustomSessionGroup[] => s.customSessionGroups;
+```
+
+由于在 UI 中的取数全部是通过 `useSessionStore(sessionSelectors.defaultSessions)` 这样的写法实现的，因此我们只需要修改 `defaultSessions` 的选择器实现，即可完成数据结构的变更。 UI 层的取数代码完全不用变更，可以大大降低重构的成本和风险。
+
+> !\[Important]
+>
+> 如果你对 Selectors 的概念和功能不太了解，可以查阅 [📘 数据存储取数模块](./State-Management-Selectors.zh-CN) 部分了解相关内容。
+
 ## 四、UI 部分
 
 在 UI 组件中绑定 Store Action 实现交互逻辑，例如 `CreateGroupModal`：
@@ -286,13 +378,15 @@ const CreateGroupModal = () => {
 };
 ```
 
-## 五、数据迁移部分
+## 五、数据迁移
+
+在软件开发过程中，数据迁移是一个不可避免的问题，尤其是当现有的数据结构无法满足新的业务需求时。对于本次 SessionGroup 的迭代，我们需要处理 `session` 的 `group` 字段的迁移，这是一个典型的数据迁移案例。
 
-一般的迭代不太需要关心数据迁移问题，而一旦遇到旧的数据结构无法满足新的需求时，就需要考虑数据迁移的问题了。
+### 旧数据结构的问题
 
-在本次实现中，session 的 group 字段可以说是典型案例。
+在旧的数据结构中，`group` 字段被用来标记会话是否为 `pinned`（置顶）或属于某个 `default`（默认）分组。但是当需要支持多个会话分组时，原有的数据结构就显得不够灵活了。
 
-之前通过将其标记为 `pinned` 和 `default` 来区分置顶与分组。但是如果存在多个分组时，这种模式就无法满足了。
+例如：
 
 ```
 before   pin:  group = abc
@@ -300,34 +394,32 @@ after    pin:  group = pinned
 after  unpin:  group = default
 ```
 
-可以看到，如果取消置顶， unpin 之后 group 是无法回到 abc 的，因为没有其他存放这个字段。 因此我们需要一个新的字段 `pinned` 来标记是否置顶，而 `group` 字段则专心用来标记分组。
+从上述示例中可以看出，一旦会话从置顶状态（`pinned`）取消置顶（`unpin`），`group` 字段将无法恢复为原来的 `abc` 值。这是因为我们没有一个独立的字段来维护置顶状态。因此，我们引入了一个新的字段 `pinned` 来表示会话是否被置顶，而 `group` 字段将仅用于标识会话分组。
 
-这样一来，就需要将旧的数据迁移到新的数据结构中，核心的一条迁移逻辑为：
-
-- 当用户的 `group` 字段为 `pinned` 时，将其 `pinned` 字段置为 `true`，同时将 group 设为 `default`;
+### 迁移策略
 
-而数据迁移需要考虑两块：
+本次迁移的核心逻辑只有一条：
 
-- 配置文件迁移
-- 数据库迁移
+- 当用户的 `group` 字段为 `pinned` 时，将其 `pinned` 字段置为 `true`，同时将 group 设为 `default`;
 
-我建议优先实现配置文件迁移，后实现数据库迁移。因为配置文件迁移相对数据库迁移更加易于复现与测试。
+但 LobeChat 中的数据迁移通常涉及到 **配置文件迁移** 和 **数据库迁移** 两个部分。所以上述逻辑会需要分别在两块实现迁移。
 
-### 配置文件迁移
+#### 配置文件迁移
 
-LobeChat 的配置文件迁移管理在 `src/migrations/index.ts` 中，
+对于配置文件迁移，我们建议先于数据库迁移进行，因为配置文件迁移通常更容易进行测试和验证。LobeChat 的文件迁移配置位于 `src/migrations/index.ts` 文件中，其中定义了配置文件迁移的各个版本及对应的迁移脚本。
 
-```ts
+```diff
 // 当前最新的版本号
-export const CURRENT_CONFIG_VERSION = 3;
+- export const CURRENT_CONFIG_VERSION = 2;
++ export const CURRENT_CONFIG_VERSION = 3;
 
 // 历史记录版本升级模块
 const ConfigMigrations = [
-  /**
-   * 2024.01.22
-   * from `group = pinned` to `pinned:true`
-   */
-  MigrationV2ToV3,
++ /**
++ * 2024.01.22
++  * from `group = pinned` to `pinned:true`
++  */
++ MigrationV2ToV3,
   /**
    * 2023.11.27
    * 从单 key 数据库转换为基于 dexie 的关系型结构
@@ -341,16 +433,9 @@ const ConfigMigrations = [
 ];
 ```
 
-同时，配置文件的版本号和数据库版本号不一定完全一致对应，原因是 db 的版本升级可能不一定存在需要数据迁移的情况。（比如新增了一个表，或者新增了一个字段），而配置文件的版本升级则一定存在数据迁移的情况。
-
-本次迁移配置文件的逻辑在 `src/migrations/FromV2ToV3.ts` 中：
+本次的配置文件迁移逻辑定义在 `src/migrations/FromV2ToV3/index.ts` 中，简化如下：
 
 ```ts
-import type { Migration, MigrationData } from '@/migrations/VersionController';
-
-import { V2ConfigState, V2Session } from '../FromV1ToV2/types/v2';
-import { V3ConfigState, V3Session } from './types/v3';
-
 export class MigrationV2ToV3 implements Migration {
   // 指定从该版本开始向上升级
   version = 2;
@@ -377,7 +462,7 @@ export class MigrationV2ToV3 implements Migration {
 }
 ```
 
-实现可以看到非常简单。但重要的是，我们需要保证迁移的正确性，因此需要编写测试用例来保证迁移的正确性，测试用例写在 `migrations.test.ts` 中，需要搭配 `fixtures` 来固化测试数据。
+可以看到迁移的实现非常简单。但重要的是，我们需要保证迁移的正确性，因此需要编写对应的测试用例 `src/migrations/FromV2ToV3/migrations.test.ts`：
 
 ```ts
 import { MigrationData, VersionController } from '@/migrations/VersionController';
@@ -424,9 +509,199 @@ describe('MigrationV2ToV3', () => {
 });
 ```
 
-需要测试：
+单测需要使用 `fixtures` 来固定测试数据，测试用例包含了两个部分的验证逻辑： 1） 单次迁移（v2 -> v3）和 2） 完整迁移（v1 -> v3）的正确性。
+
+> \[!Important]
+>
+> 配置文件的版本号可能与数据库版本号不一致，因为数据库版本的更新不总是伴随数据结构的变化（如新增表或字段），而配置文件的版本更新则通常涉及到数据迁移。
+
+#### 数据库迁移
+
+数据库迁移则需要在 `LocalDB` 类中实施，该类定义在 `src/database/core/db.ts` 文件中。迁移过程涉及到为 `sessions` 表的每条记录添加新的 `pinned` 字段，并重置 `group` 字段：
+
+```diff
+export class LocalDB extends Dexie {
+  public files: LobeDBTable<'files'>;
+  public sessions: LobeDBTable<'sessions'>;
+  public messages: LobeDBTable<'messages'>;
+  public topics: LobeDBTable<'topics'>;
+  public plugins: LobeDBTable<'plugins'>;
+  public sessionGroups: LobeDBTable<'sessionGroups'>;
+
+  constructor() {
+    super(LOBE_CHAT_LOCAL_DB_NAME);
+    this.version(1).stores(dbSchemaV1);
+    this.version(2).stores(dbSchemaV2);
+    this.version(3).stores(dbSchemaV3);
+    this.version(4)
+      .stores(dbSchemaV4)
++     .upgrade((trans) => this.upgradeToV4(trans));
+
+    this.files = this.table('files');
+    this.sessions = this.table('sessions');
+    this.messages = this.table('messages');
+    this.topics = this.table('topics');
+    this.plugins = this.table('plugins');
+    this.sessionGroups = this.table('sessionGroups');
+  }
+
++  /**
++   * 2024.01.22
++   *
++   * DB V3 to V4
++   * from `group = pinned` to `pinned:true`
++   */
++  upgradeToV4 = async (trans: Transaction) => {
++    const sessions = trans.table('sessions');
++    await sessions.toCollection().modify((session) => {
++      // translate boolean to number
++      session.pinned = session.group === 'pinned' ? 1 : 0;
++      session.group = 'default';
++    });
++  };
+}
+```
+
+以上就是我们的数据迁移策略。在进行迁移时，务必确保迁移脚本的正确性，并通过充分的测试验证迁移结果。
+
+## 六、数据导入导出
+
+在 LobeChat 中，数据导入导出功能是为了确保用户可以在不同设备之间迁移他们的数据。这包括会话、话题、消息和设置等数据。在本次的 Session Group 功能实现中，我们也需要对数据导入导出进行处理，以确保当完整导出的数据在其他设备上可以一模一样恢复。
+
+数据导入导出的核心实现在 `src/service/config.ts` 的 `ConfigService` 中，其中的关键方法如下：
+
+| 方法名称              | 描述             |
+| --------------------- | ---------------- |
+| `importConfigState`   | 导入配置数据     |
+| `exportAgents`        | 导出所有助理数据 |
+| `exportSessions`      | 导出所有会话数据 |
+| `exportSingleSession` | 导出单个会话数据 |
+| `exportSingleAgent`   | 导出单个助理数据 |
+| `exportSettings`      | 导出设置数据     |
+| `exportAll`           | 导出所有数据     |
+
+### 数据导出
+
+在 LobeChat 中，当用户选择导出数据时，会将当前的会话、话题、消息和设置等数据打包成一个 JSON 文件并提供给用户下载。这个 JSON 文件的标准结构如下：
+
+```json
+{
+  "exportType": "sessions",
+  "state": {
+    "sessions": [],
+    "topics": [],
+    "messages": []
+  },
+  "version": 3
+}
+```
+
+其中：
+
+- `exportType`： 标识导出数据的类型，目前有 `sessions`、 `agent` 、 `settings` 和 `all` 四种；
+- `state`： 存储实际的数据，不同 `exportType` 的数据类型也不同；
+- `version`： 标识数据的版本。
+
+在 Session Group 功能实现中，我们需要在 `state` 字段中添加 `sessionGroups` 数据。这样，当用户导出数据时，他们的 Session Group 数据也会被包含在内。
+
+以导出 sessions 为例，导出数据的相关实现代码修改如下：
+
+```diff
+class ConfigService {
+  // ... 省略其他
+
+  exportSessions = async () => {
+    const sessions = await sessionService.getSessions();
++   const sessionGroups = await sessionService.getSessionGroups();
+    const messages = await messageService.getAllMessages();
+    const topics = await topicService.getAllTopics();
+
+-   const config = createConfigFile('sessions', { messages, sessions, topics });
++   const config = createConfigFile('sessions', { messages, sessionGroups, sessions, topics });
+
+    exportConfigFile(config, 'sessions');
+  };
+}
+```
+
+### 数据导入
+
+数据导入的功能是通过 `ConfigService.importConfigState` 来实现的。当用户选择导入数据时，他们需要提供一个由 符合上述结构规范的 JSON 文件。`importConfigState` 方法接受配置文件的数据，并将其导入到应用中。
+
+在 Session Group 功能实现中，我们需要在导入数据的过程中处理 `sessionGroups` 数据。这样，当用户导入数据时，他们的 Session Group 数据也会被正确地导入。
+
+以下是 `importConfigState` 中导入实现的变更代码：
+
+```diff
+class ConfigService {
+  // ... 省略其他代码
+
++ importSessionGroups = async (sessionGroups: SessionGroupItem[]) => {
++   return sessionService.batchCreateSessionGroups(sessionGroups);
++ };
+
+  importConfigState = async (config: ConfigFile): Promise<ImportResults | undefined> => {
+    switch (config.exportType) {
+      case 'settings': {
+        await this.importSettings(config.state.settings);
+
+        break;
+      }
+
+      case 'agents': {
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const data = await this.importSessions(config.state.sessions);
+        return {
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(data),
+        };
+      }
+
+      case 'all': {
+        await this.importSettings(config.state.settings);
+
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const [sessions, messages, topics] = await Promise.all([
+          this.importSessions(config.state.sessions),
+          this.importMessages(config.state.messages),
+          this.importTopics(config.state.topics),
+        ]);
+
+        return {
+          messages: this.mapImportResult(messages),
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(sessions),
+          topics: this.mapImportResult(topics),
+        };
+      }
+
+      case 'sessions': {
++       const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
+
+        const [sessions, messages, topics] = await Promise.all([
+          this.importSessions(config.state.sessions),
+          this.importMessages(config.state.messages),
+          this.importTopics(config.state.topics),
+        ]);
+
+        return {
+          messages: this.mapImportResult(messages),
++         sessionGroups: this.mapImportResult(sessionGroups),
+          sessions: this.mapImportResult(sessions),
+          topics: this.mapImportResult(topics),
+        };
+      }
+    }
+  };
+}
+```
+
+上述修改的一个要点是先进行 sessionGroup 的导入，因为如果先导入 session 时，如果没有在当前数据库中查到相应的 SessionGroup Id，那么这个 session 的 group 会兜底修改为默认值。这样就无法正确地将 sessionGroup 的 ID 与 session 进行关联。
+
+以上就是 LobeChat Session Group 功能在数据导入导出部分的实现。通过这种方式，我们可以确保用户的 Session Group 数据在导入导出过程中能够被正确地处理。
 
-- 正常的单次迁移（v2 -> v3)
-- 完整的迁移 (v1 -> v3)
+## 总结
 
 以上就是 LobeChat Session Group 功能的完整实现流程。开发者可以参考本文档进行相关功能的开发和测试。

From 2a81007fa072c3046a19b5bb29a48a182434ce14 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Wed, 24 Jan 2024 00:18:27 +0800
Subject: [PATCH 19/20] =?UTF-8?q?=F0=9F=8C=90=20style:=20add=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ar/chat.json      | 14 +++++++++++++-
 locales/ar/common.json    |  1 +
 locales/de-DE/chat.json   | 14 +++++++++++++-
 locales/de-DE/common.json |  1 +
 locales/en-US/chat.json   | 14 +++++++++++++-
 locales/en-US/common.json |  1 +
 locales/es-ES/chat.json   | 14 +++++++++++++-
 locales/es-ES/common.json |  1 +
 locales/fr-FR/chat.json   | 14 +++++++++++++-
 locales/fr-FR/common.json |  1 +
 locales/it-IT/chat.json   | 14 +++++++++++++-
 locales/it-IT/common.json |  1 +
 locales/ja-JP/chat.json   | 14 +++++++++++++-
 locales/ja-JP/common.json |  1 +
 locales/ko-KR/chat.json   | 14 +++++++++++++-
 locales/ko-KR/common.json |  1 +
 locales/nl-NL/chat.json   | 14 +++++++++++++-
 locales/nl-NL/common.json |  1 +
 locales/pl-PL/chat.json   | 14 +++++++++++++-
 locales/pl-PL/common.json |  1 +
 locales/pt-BR/chat.json   | 14 +++++++++++++-
 locales/pt-BR/common.json |  1 +
 locales/ru-RU/chat.json   | 14 +++++++++++++-
 locales/ru-RU/common.json |  1 +
 locales/tr-TR/chat.json   | 14 +++++++++++++-
 locales/tr-TR/common.json |  1 +
 locales/vi-VN/chat.json   | 14 +++++++++++++-
 locales/vi-VN/common.json |  1 +
 locales/zh-CN/chat.json   | 14 +++++++++++++-
 locales/zh-CN/common.json |  1 +
 locales/zh-TW/chat.json   | 14 +++++++++++++-
 locales/zh-TW/common.json |  1 +
 32 files changed, 224 insertions(+), 16 deletions(-)

diff --git a/locales/ar/chat.json b/locales/ar/chat.json
index 6367e3d785b6..539018b4f396 100644
--- a/locales/ar/chat.json
+++ b/locales/ar/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "سيتم مسح رسائل الجلسة الحالية قريبًا، وبمجرد المسح لن يمكن استعادتها، يرجى تأكيد الإجراء الخاص بك",
   "confirmRemoveSessionItemAlert": "سيتم حذف هذا المساعد قريبًا، وبمجرد الحذف لن يمكن استعادته، يرجى تأكيد الإجراء الخاص بك",
   "defaultAgent": "المساعد الافتراضي",
+  "defaultList": "القائمة الافتراضية",
   "defaultSession": "المساعد الافتراضي",
   "duplicateTitle": "{{title}} نسخة",
   "historyRange": "نطاق التاريخ",
@@ -34,7 +35,18 @@
   "roleAndArchive": "الدور والأرشيف",
   "searchAgentPlaceholder": "البحث عن مساعد ومحادثة...",
   "sendPlaceholder": "أدخل محتوى الدردشة...",
-  "sessionList": "قائمة المساعدين",
+  "sessionGroup": {
+    "config": "إدارة المجموعات",
+    "confirmRemoveGroupAlert": "سيتم حذف هذه المجموعة قريبًا، وبعد الحذف، سيتم نقل مساعدي هذه المجموعة إلى القائمة الافتراضية، يرجى تأكيد إجراءك",
+    "createGroup": "إضافة مجموعة جديدة",
+    "createSuccess": "تم الإنشاء بنجاح",
+    "inputPlaceholder": "الرجاء إدخال اسم المجموعة...",
+    "moveGroup": "نقل إلى مجموعة",
+    "newGroup": "مجموعة جديدة",
+    "rename": "إعادة تسمية المجموعة",
+    "renameSuccess": "تمت إعادة التسمية بنجاح",
+    "tooLong": "يجب أن يكون طول اسم المجموعة بين 1 و 20"
+  },
   "shareModal": {
     "download": "تحميل اللقطة",
     "imageType": "نوع الصورة",
diff --git a/locales/ar/common.json b/locales/ar/common.json
index 4f289ffff8c0..b7290c6c10d1 100644
--- a/locales/ar/common.json
+++ b/locales/ar/common.json
@@ -44,6 +44,7 @@
       "added": "تمت الإضافة بنجاح",
       "errors": "حدثت أخطاء أثناء الاستيراد",
       "messages": "الرسائل",
+      "sessionGroups": "مجموعات الجلسة",
       "sessions": "الجلسات",
       "skips": "التخطيات",
       "topics": "المواضيع",
diff --git a/locales/de-DE/chat.json b/locales/de-DE/chat.json
index 89e224c7cda3..b83dd89d8ef9 100644
--- a/locales/de-DE/chat.json
+++ b/locales/de-DE/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "Möchtest du wirklich die aktuellen Nachrichten löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
   "confirmRemoveSessionItemAlert": "Möchtest du diesen Assistenten wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
   "defaultAgent": "Standardassistent",
+  "defaultList": "Standardliste",
   "defaultSession": "Standardassistent",
   "duplicateTitle": "{{title}} Kopie",
   "historyRange": "Verlaufsbereich",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Rolle und Archiv",
   "searchAgentPlaceholder": "Assistenten und Unterhaltungen durchsuchen...",
   "sendPlaceholder": "Chat-Nachricht eingeben...",
-  "sessionList": "Assistentenliste",
+  "sessionGroup": {
+    "config": "Gruppenkonfiguration",
+    "confirmRemoveGroupAlert": "Die Gruppe wird bald gelöscht. Nach dem Löschen werden die Assistenten in die Standardliste verschoben. Bitte bestätigen Sie Ihre Aktion.",
+    "createGroup": "Neue Gruppe erstellen",
+    "createSuccess": "Erstellung erfolgreich",
+    "inputPlaceholder": "Geben Sie den Gruppennamen ein...",
+    "moveGroup": "In Gruppe verschieben",
+    "newGroup": "Neue Gruppe",
+    "rename": "Gruppe umbenennen",
+    "renameSuccess": "Umbenennung erfolgreich",
+    "tooLong": "Gruppenname muss zwischen 1 und 20 Zeichen lang sein"
+  },
   "shareModal": {
     "download": "Screenshot herunterladen",
     "imageType": "Bildformat",
diff --git a/locales/de-DE/common.json b/locales/de-DE/common.json
index d9d66b5748f5..724e10b6b1bb 100644
--- a/locales/de-DE/common.json
+++ b/locales/de-DE/common.json
@@ -44,6 +44,7 @@
       "added": "Erfolgreich importiert",
       "errors": "Fehler beim Import",
       "messages": "Nachrichten",
+      "sessionGroups": "Sitzungsgruppen",
       "sessions": "Assistenten",
       "skips": "Übersprungen (doppelt)",
       "topics": "Themen",
diff --git a/locales/en-US/chat.json b/locales/en-US/chat.json
index 42e7f02aeb3c..6c148749fb4c 100644
--- a/locales/en-US/chat.json
+++ b/locales/en-US/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "You are about to clear the current session messages. Once cleared, they cannot be retrieved. Please confirm your action.",
   "confirmRemoveSessionItemAlert": "You are about to delete this agent. Once deleted, it cannot be retrieved. Please confirm your action.",
   "defaultAgent": "Default Agent",
+  "defaultList": "Default List",
   "defaultSession": "Default Agent",
   "duplicateTitle": "{{title}} Copy",
   "historyRange": "History Range",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Role and Archive",
   "searchAgentPlaceholder": "Search agents and conversations...",
   "sendPlaceholder": "Type your message here...",
-  "sessionList": "Agent List",
+  "sessionGroup": {
+    "config": "Group Management",
+    "confirmRemoveGroupAlert": "This group is about to be deleted. After deletion, the assistants in this group will be moved to the default list. Please confirm your operation.",
+    "createGroup": "Add New Group",
+    "createSuccess": "Created successfully",
+    "inputPlaceholder": "Please enter group name...",
+    "moveGroup": "Move to Group",
+    "newGroup": "New Group",
+    "rename": "Rename Group",
+    "renameSuccess": "Renamed successfully",
+    "tooLong": "Group name length should be between 1-20"
+  },
   "shareModal": {
     "download": "Download Screenshot",
     "imageType": "Image Format",
diff --git a/locales/en-US/common.json b/locales/en-US/common.json
index 0bb69850024c..7f39eda271b2 100644
--- a/locales/en-US/common.json
+++ b/locales/en-US/common.json
@@ -44,6 +44,7 @@
       "added": "Imported successfully",
       "errors": "Import errors",
       "messages": "Messages",
+      "sessionGroups": "Groups",
       "sessions": "Agents",
       "skips": "Duplicates skipped",
       "topics": "Topics",
diff --git a/locales/es-ES/chat.json b/locales/es-ES/chat.json
index 3f170f9cf134..2d72259f73ed 100644
--- a/locales/es-ES/chat.json
+++ b/locales/es-ES/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "Estás a punto de borrar los mensajes de esta sesión. Una vez borrados, no se podrán recuperar. Por favor, confirma tu acción.",
   "confirmRemoveSessionItemAlert": "Estás a punto de eliminar este asistente. Una vez eliminado, no se podrá recuperar. Por favor, confirma tu acción.",
   "defaultAgent": "Asistente predeterminado",
+  "defaultList": "Lista predeterminada",
   "defaultSession": "Asistente predeterminado",
   "duplicateTitle": "{{title}} Copia",
   "historyRange": "Rango de historial",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Rol y archivo",
   "searchAgentPlaceholder": "Buscar asistentes y conversaciones...",
   "sendPlaceholder": "Escribe tu mensaje...",
-  "sessionList": "Lista de asistentes",
+  "sessionGroup": {
+    "config": "Gestión de grupos",
+    "confirmRemoveGroupAlert": "Estás a punto de eliminar este grupo. Una vez eliminado, los asistentes de este grupo se moverán a la lista predeterminada. Por favor, confirma tu acción.",
+    "createGroup": "Crear nuevo grupo",
+    "createSuccess": "Grupo creado con éxito",
+    "inputPlaceholder": "Introduce el nombre del grupo...",
+    "moveGroup": "Mover al grupo",
+    "newGroup": "Nuevo grupo",
+    "rename": "Renombrar grupo",
+    "renameSuccess": "Grupo renombrado con éxito",
+    "tooLong": "El nombre del grupo debe tener entre 1 y 20 caracteres"
+  },
   "shareModal": {
     "download": "Descargar captura de pantalla",
     "imageType": "Tipo de imagen",
diff --git a/locales/es-ES/common.json b/locales/es-ES/common.json
index c5e3818ab75c..8df4f44c717f 100644
--- a/locales/es-ES/common.json
+++ b/locales/es-ES/common.json
@@ -44,6 +44,7 @@
       "added": "Importación exitosa",
       "errors": "Errores de importación",
       "messages": "Mensajes",
+      "sessionGroups": "Grupos de sesión",
       "sessions": "Asistentes",
       "skips": "Saltos de duplicados",
       "topics": "Temas",
diff --git a/locales/fr-FR/chat.json b/locales/fr-FR/chat.json
index 5bc6afeab4a0..0f31e51e323f 100644
--- a/locales/fr-FR/chat.json
+++ b/locales/fr-FR/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "Vous êtes sur le point d'effacer les messages de cette session. Cette action est irréversible. Veuillez confirmer.",
   "confirmRemoveSessionItemAlert": "Vous êtes sur le point de supprimer cet agent. Cette action est irréversible. Veuillez confirmer.",
   "defaultAgent": "Agent par défaut",
+  "defaultList": "Liste par défaut",
   "defaultSession": "Session par défaut",
   "duplicateTitle": "{{title}} Copie",
   "historyRange": "Plage d'historique",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Rôle et archivage",
   "searchAgentPlaceholder": "Rechercher des agents et des conversations...",
   "sendPlaceholder": "Saisissez votre message...",
-  "sessionList": "Liste des agents",
+  "sessionGroup": {
+    "config": "Gestion des groupes",
+    "confirmRemoveGroupAlert": "Vous êtes sur le point de supprimer ce groupe. Une fois supprimé, les assistants de ce groupe seront déplacés vers la liste par défaut. Veuillez confirmer votre action.",
+    "createGroup": "Créer un nouveau groupe",
+    "createSuccess": "Création réussie",
+    "inputPlaceholder": "Veuillez saisir le nom du groupe...",
+    "moveGroup": "Déplacer vers un groupe",
+    "newGroup": "Nouveau groupe",
+    "rename": "Renommer le groupe",
+    "renameSuccess": "Renommage réussi",
+    "tooLong": "Le nom du groupe doit comporter entre 1 et 20 caractères"
+  },
   "shareModal": {
     "download": "Télécharger la capture d'écran",
     "imageType": "Type d'image",
diff --git a/locales/fr-FR/common.json b/locales/fr-FR/common.json
index 97685ba96f74..d47aee87d00d 100644
--- a/locales/fr-FR/common.json
+++ b/locales/fr-FR/common.json
@@ -44,6 +44,7 @@
       "added": "Importation réussie",
       "errors": "Erreurs d'importation",
       "messages": "Messages",
+      "sessionGroups": "Groupes de session",
       "sessions": "Agents",
       "skips": "Éléments ignorés en double",
       "topics": "Sujets",
diff --git a/locales/it-IT/chat.json b/locales/it-IT/chat.json
index 79deea61cd5a..875e7f305751 100644
--- a/locales/it-IT/chat.json
+++ b/locales/it-IT/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "Stai per cancellare i messaggi attuali, questa operazione non potrà essere annullata. Confermi?",
   "confirmRemoveSessionItemAlert": "Stai per rimuovere questo assistente, l'operazione non potrà essere annullata. Confermi?",
   "defaultAgent": "Assistente predefinito",
+  "defaultList": "Lista predefinita",
   "defaultSession": "Sessione predefinita",
   "duplicateTitle": "{{title}} Copia",
   "historyRange": "Intervallo cronologico",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Ruolo e archivio",
   "searchAgentPlaceholder": "Cerca assistente e conversazioni...",
   "sendPlaceholder": "Inserisci il testo della chat...",
-  "sessionList": "Elenco sessioni",
+  "sessionGroup": {
+    "config": "Gestione gruppi",
+    "confirmRemoveGroupAlert": "Stai per rimuovere questo gruppo. Dopo la rimozione, gli assistenti di questo gruppo verranno spostati nella lista predefinita. Confermi l'operazione?",
+    "createGroup": "Aggiungi nuovo gruppo",
+    "createSuccess": "Creazione riuscita",
+    "inputPlaceholder": "Inserisci il nome del gruppo...",
+    "moveGroup": "Sposta nel gruppo",
+    "newGroup": "Nuovo gruppo",
+    "rename": "Rinomina gruppo",
+    "renameSuccess": "Rinominazione riuscita",
+    "tooLong": "Il nome del gruppo deve essere lungo 1-20 caratteri"
+  },
   "shareModal": {
     "download": "Scarica screenshot",
     "imageType": "Tipo di immagine",
diff --git a/locales/it-IT/common.json b/locales/it-IT/common.json
index 7ce69cbb8628..7e4de01f1451 100644
--- a/locales/it-IT/common.json
+++ b/locales/it-IT/common.json
@@ -44,6 +44,7 @@
       "added": "Importazione riuscita",
       "errors": "Errori di importazione",
       "messages": "Messaggi",
+      "sessionGroups": "Gruppi di sessione",
       "sessions": "Sessioni",
       "skips": "Elementi saltati",
       "topics": "Argomenti",
diff --git a/locales/ja-JP/chat.json b/locales/ja-JP/chat.json
index b0143996dcb9..bd0d412e3af3 100644
--- a/locales/ja-JP/chat.json
+++ b/locales/ja-JP/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "現在の会話をクリアします。クリアした後は元に戻すことはできません。操作を確認してください。",
   "confirmRemoveSessionItemAlert": "このエージェントを削除します。削除した後は元に戻すことはできません。操作を確認してください。",
   "defaultAgent": "デフォルトエージェント",
+  "defaultList": "デフォルトリスト",
   "defaultSession": "デフォルトセッション",
   "duplicateTitle": "{{title}} のコピー",
   "historyRange": "履歴範囲",
@@ -34,7 +35,18 @@
   "roleAndArchive": "役割とアーカイブ",
   "searchAgentPlaceholder": "エージェントや会話を検索...",
   "sendPlaceholder": "チャット内容を入力してください...",
-  "sessionList": "エージェントリスト",
+  "sessionGroup": {
+    "config": "グループ設定",
+    "confirmRemoveGroupAlert": "このグループを削除します。削除後、このグループのアシスタントはデフォルトリストに移動されます。操作を確認してください。",
+    "createGroup": "新しいグループを作成",
+    "createSuccess": "作成が成功しました",
+    "inputPlaceholder": "グループ名を入力してください...",
+    "moveGroup": "グループに移動",
+    "newGroup": "新しいグループ",
+    "rename": "グループ名を変更",
+    "renameSuccess": "名前の変更が成功しました",
+    "tooLong": "グループ名は1〜20文字で入力してください"
+  },
   "shareModal": {
     "download": "スクリーンショットをダウンロード",
     "imageType": "画像形式",
diff --git a/locales/ja-JP/common.json b/locales/ja-JP/common.json
index a5ab5ae4e72d..d4fb6ccc522e 100644
--- a/locales/ja-JP/common.json
+++ b/locales/ja-JP/common.json
@@ -44,6 +44,7 @@
       "added": "インポートが成功しました",
       "errors": "インポートエラー",
       "messages": "メッセージ",
+      "sessionGroups": "セッショングループ",
       "sessions": "セッション",
       "skips": "重複スキップ",
       "topics": "トピック",
diff --git a/locales/ko-KR/chat.json b/locales/ko-KR/chat.json
index c8f7f1cfcd8c..c2eafa9922d6 100644
--- a/locales/ko-KR/chat.json
+++ b/locales/ko-KR/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "현재 대화를 지우시면 되돌릴 수 없습니다. 작업을 확인하시겠습니까?",
   "confirmRemoveSessionItemAlert": "이 도우미를 삭제하시면 되돌릴 수 없습니다. 작업을 확인하시겠습니까?",
   "defaultAgent": "기본 도우미",
+  "defaultList": "기본 목록",
   "defaultSession": "기본 도우미",
   "duplicateTitle": "{{title}} 복사본",
   "historyRange": "대화 기록 범위",
@@ -34,7 +35,18 @@
   "roleAndArchive": "역할 및 아카이브",
   "searchAgentPlaceholder": "도우미 및 대화 검색...",
   "sendPlaceholder": "채팅 내용 입력...",
-  "sessionList": "도우미 목록",
+  "sessionGroup": {
+    "config": "그룹 설정",
+    "confirmRemoveGroupAlert": "이 그룹을 삭제하려고 합니다. 삭제 후 이 그룹의 도우미는 기본 목록으로 이동됩니다. 작업을 확인하십시오.",
+    "createGroup": "새 그룹 추가",
+    "createSuccess": "생성 성공",
+    "inputPlaceholder": "그룹 이름을 입력하세요...",
+    "moveGroup": "그룹으로 이동",
+    "newGroup": "새 그룹",
+    "rename": "그룹 이름 변경",
+    "renameSuccess": "이름 변경 성공",
+    "tooLong": "그룹 이름은 1-20자여야 합니다"
+  },
   "shareModal": {
     "download": "스크린샷 다운로드",
     "imageType": "이미지 형식",
diff --git a/locales/ko-KR/common.json b/locales/ko-KR/common.json
index b3fc0d1c7872..1ab0d9b17e7f 100644
--- a/locales/ko-KR/common.json
+++ b/locales/ko-KR/common.json
@@ -44,6 +44,7 @@
       "added": "가져오기 성공",
       "errors": "가져오기 오류",
       "messages": "메시지",
+      "sessionGroups": "세션 그룹",
       "sessions": "에이전트",
       "skips": "중복 건너뛰기",
       "topics": "주제",
diff --git a/locales/nl-NL/chat.json b/locales/nl-NL/chat.json
index dc59cc4cd4b9..4dad69d748ec 100644
--- a/locales/nl-NL/chat.json
+++ b/locales/nl-NL/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "Huidige berichten worden gewist en kunnen niet worden hersteld. Bevestig je actie.",
   "confirmRemoveSessionItemAlert": "Deze assistent wordt verwijderd en kan niet worden hersteld. Bevestig je actie.",
   "defaultAgent": "Standaard assistent",
+  "defaultList": "Standaardlijst",
   "defaultSession": "Standaard assistent",
   "duplicateTitle": "{{title}} Kopie",
   "historyRange": "Geschiedenisbereik",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Rol en archief",
   "searchAgentPlaceholder": "Zoek assistenten en gesprekken...",
   "sendPlaceholder": "Voer chatbericht in...",
-  "sessionList": "Lijst met assistenten",
+  "sessionGroup": {
+    "config": "Groepsbeheer",
+    "confirmRemoveGroupAlert": "Je staat op het punt deze groep te verwijderen. Na verwijdering zullen de assistenten van deze groep worden verplaatst naar de standaardlijst. Bevestig je actie.",
+    "createGroup": "Nieuwe groep toevoegen",
+    "createSuccess": "Succesvol aangemaakt",
+    "inputPlaceholder": "Voer de naam van de groep in...",
+    "moveGroup": "Verplaatsen naar groep",
+    "newGroup": "Nieuwe groep",
+    "rename": "Groepsnaam wijzigen",
+    "renameSuccess": "Naam succesvol gewijzigd",
+    "tooLong": "De groepsnaam moet tussen 1 en 20 tekens lang zijn"
+  },
   "shareModal": {
     "download": "Screenshot downloaden",
     "imageType": "Afbeeldingstype",
diff --git a/locales/nl-NL/common.json b/locales/nl-NL/common.json
index 977a271c2bdc..2f650bcde44e 100644
--- a/locales/nl-NL/common.json
+++ b/locales/nl-NL/common.json
@@ -44,6 +44,7 @@
       "added": "Succesvol geïmporteerd",
       "errors": "Fouten bij importeren",
       "messages": "Berichten",
+      "sessionGroups": "Sessiegroepen",
       "sessions": "Assistenten",
       "skips": "Overslaan van duplicaten",
       "topics": "Onderwerpen",
diff --git a/locales/pl-PL/chat.json b/locales/pl-PL/chat.json
index 4c995b265932..9538f0091778 100644
--- a/locales/pl-PL/chat.json
+++ b/locales/pl-PL/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "Czy na pewno chcesz wyczyścić bieżącą rozmowę? Tej operacji nie można cofnąć.",
   "confirmRemoveSessionItemAlert": "Czy na pewno chcesz usunąć tego asystenta? Tej operacji nie można cofnąć.",
   "defaultAgent": "Domyślny asystent",
+  "defaultList": "Domyślna lista",
   "defaultSession": "Domyślna sesja",
   "duplicateTitle": "{{title}} kopia",
   "historyRange": "Zakres historii",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Rola i archiwum",
   "searchAgentPlaceholder": "Szukaj asystentów i rozmów...",
   "sendPlaceholder": "Wpisz treść rozmowy...",
-  "sessionList": "Lista sesji",
+  "sessionGroup": {
+    "config": "Zarządzanie grupami",
+    "confirmRemoveGroupAlert": "Czy na pewno chcesz usunąć tę grupę? Po usunięciu asystenci z tej grupy zostaną przeniesieni do domyślnej listy. Potwierdź swoje działanie.",
+    "createGroup": "Dodaj nową grupę",
+    "createSuccess": "Utworzono pomyślnie",
+    "inputPlaceholder": "Wprowadź nazwę grupy...",
+    "moveGroup": "Przenieś do grupy",
+    "newGroup": "Nowa grupa",
+    "rename": "Zmień nazwę grupy",
+    "renameSuccess": "Zmiana nazwy pomyślna",
+    "tooLong": "Nazwa grupy musi mieć od 1 do 20 znaków"
+  },
   "shareModal": {
     "download": "Pobierz zrzut ekranu",
     "imageType": "Typ obrazu",
diff --git a/locales/pl-PL/common.json b/locales/pl-PL/common.json
index 7bca85279c0e..8eec4732739e 100644
--- a/locales/pl-PL/common.json
+++ b/locales/pl-PL/common.json
@@ -44,6 +44,7 @@
       "added": "Pomyślnie zaimportowano",
       "errors": "Błędy importu",
       "messages": "Wiadomości",
+      "sessionGroups": "Grupy sesji",
       "sessions": "Sesje",
       "skips": "Pominięcia duplikatów",
       "topics": "Tematy",
diff --git a/locales/pt-BR/chat.json b/locales/pt-BR/chat.json
index 977772784264..b680c7a0ac13 100644
--- a/locales/pt-BR/chat.json
+++ b/locales/pt-BR/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "Você está prestes a limpar as mensagens desta sessão. Depois de limpar, não será possível recuperá-las. Por favor, confirme sua ação.",
   "confirmRemoveSessionItemAlert": "Você está prestes a remover este assistente. Depois de remover, não será possível recuperá-lo. Por favor, confirme sua ação.",
   "defaultAgent": "Assistente Padrão",
+  "defaultList": "Lista padrão",
   "defaultSession": "Sessão Padrão",
   "duplicateTitle": "{{title}} Cópia",
   "historyRange": "Intervalo de Histórico",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Função e Arquivo",
   "searchAgentPlaceholder": "Pesquisar assistentes e conversas...",
   "sendPlaceholder": "Digite a mensagem...",
-  "sessionList": "Lista de Assistentes",
+  "sessionGroup": {
+    "config": "Gerenciar grupos",
+    "confirmRemoveGroupAlert": "Você está prestes a excluir este grupo. Após a exclusão, os assistentes deste grupo serão movidos para a lista padrão. Por favor, confirme sua operação.",
+    "createGroup": "Criar novo grupo",
+    "createSuccess": "Criado com sucesso",
+    "inputPlaceholder": "Digite o nome do grupo...",
+    "moveGroup": "Mover para o grupo",
+    "newGroup": "Novo grupo",
+    "rename": "Renomear grupo",
+    "renameSuccess": "Renomeado com sucesso",
+    "tooLong": "O nome do grupo deve ter entre 1 e 20 caracteres"
+  },
   "shareModal": {
     "download": "Baixar Captura de Tela",
     "imageType": "Tipo de Imagem",
diff --git a/locales/pt-BR/common.json b/locales/pt-BR/common.json
index fd791df2d0fc..d3f28461cd80 100644
--- a/locales/pt-BR/common.json
+++ b/locales/pt-BR/common.json
@@ -44,6 +44,7 @@
       "added": "Importação bem-sucedida",
       "errors": "Erros na importação",
       "messages": "Mensagens",
+      "sessionGroups": "Grupos de sessão",
       "sessions": "Assistentes",
       "skips": "Ignorados",
       "topics": "Tópicos",
diff --git a/locales/ru-RU/chat.json b/locales/ru-RU/chat.json
index 973ac35fa46d..8ff9cea690a9 100644
--- a/locales/ru-RU/chat.json
+++ b/locales/ru-RU/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "Вы уверены, что хотите очистить текущий разговор? После этого его нельзя будет восстановить.",
   "confirmRemoveSessionItemAlert": "Вы уверены, что хотите удалить этого помощника? После этого его нельзя будет восстановить.",
   "defaultAgent": "Пользовательский помощник",
+  "defaultList": "Список по умолчанию",
   "defaultSession": "Пользовательский помощник",
   "duplicateTitle": "{{title}} Копия",
   "historyRange": "История сообщений",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Роль и архив",
   "searchAgentPlaceholder": "Поиск помощников и разговоров...",
   "sendPlaceholder": "Введите сообщение...",
-  "sessionList": "Список помощников",
+  "sessionGroup": {
+    "config": "Управление группами",
+    "confirmRemoveGroupAlert": "Вы уверены, что хотите удалить эту группу? После удаления помощники из этой группы будут перемещены в список по умолчанию.",
+    "createGroup": "Создать новую группу",
+    "createSuccess": "Создание успешно",
+    "inputPlaceholder": "Введите название группы...",
+    "moveGroup": "Переместить в группу",
+    "newGroup": "Новая группа",
+    "rename": "Переименовать группу",
+    "renameSuccess": "Переименование успешно",
+    "tooLong": "Название группы должно содержать от 1 до 20 символов"
+  },
   "shareModal": {
     "download": "Скачать скриншот",
     "imageType": "Тип изображения",
diff --git a/locales/ru-RU/common.json b/locales/ru-RU/common.json
index 78a26848df77..c43885218c6b 100644
--- a/locales/ru-RU/common.json
+++ b/locales/ru-RU/common.json
@@ -44,6 +44,7 @@
       "added": "Успешно импортировано",
       "errors": "Ошибка импорта",
       "messages": "Сообщения",
+      "sessionGroups": "Группы сессий",
       "sessions": "Агенты",
       "skips": "Пропущено дубликатов",
       "topics": "Темы",
diff --git a/locales/tr-TR/chat.json b/locales/tr-TR/chat.json
index aefe6af1d2ea..6689c775d413 100644
--- a/locales/tr-TR/chat.json
+++ b/locales/tr-TR/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "Mevcut oturum mesajlarını temizlemek üzeresiniz. Temizlendikten sonra geri alınamazlar. Lütfen eyleminizi onaylayın.",
   "confirmRemoveSessionItemAlert": "Bu asistanı silmek üzeresiniz. Silindikten sonra geri alınamaz. Lütfen eyleminizi onaylayın.",
   "defaultAgent": "Varsayılan Asistan",
+  "defaultList": "Varsayılan Liste",
   "defaultSession": "Varsayılan Asistan",
   "duplicateTitle": "{{title}} Kopya",
   "historyRange": "Geçmiş Aralığı",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Rol ve Arşiv",
   "searchAgentPlaceholder": "Arama yardımcıları ve konuşmalar...",
   "sendPlaceholder": "Mesajınızı buraya yazın...",
-  "sessionList": "Asistanlar",
+  "sessionGroup": {
+    "config": "Grup Yönetimi",
+    "confirmRemoveGroupAlert": "Bu grup silinecek, silindikten sonra bu grubun yardımcıları varsayılan listeye taşınacak, işleminizi onaylıyor musunuz?",
+    "createGroup": "Yeni Grup Ekle",
+    "createSuccess": "Oluşturma Başarılı",
+    "inputPlaceholder": "Grup adını girin...",
+    "moveGroup": "Gruba Taşı",
+    "newGroup": "Yeni Grup",
+    "rename": "Grup Adını Değiştir",
+    "renameSuccess": "Yeniden Adlandırma Başarılı",
+    "tooLong": "Grup adı 1-20 karakter arasında olmalıdır"
+  },
   "shareModal": {
     "download": "Ekran Görüntüsünü İndir",
     "imageType": "Format",
diff --git a/locales/tr-TR/common.json b/locales/tr-TR/common.json
index afffc50f4660..2f4f7fbcd1eb 100644
--- a/locales/tr-TR/common.json
+++ b/locales/tr-TR/common.json
@@ -44,6 +44,7 @@
       "added": "Başarıyla içe aktarıldı",
       "errors": "İçe Aktarma Hataları",
       "messages": "Mesajlar",
+      "sessionGroups": "Gruplar",
       "sessions": "Asistanlar",
       "skips": "Geç",
       "topics": "Konular",
diff --git a/locales/vi-VN/chat.json b/locales/vi-VN/chat.json
index a2ce0287346e..52730035f61b 100644
--- a/locales/vi-VN/chat.json
+++ b/locales/vi-VN/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "Bạn sắp xóa tin nhắn hiện tại. Hành động này không thể hoàn tác, vui lòng xác nhận.",
   "confirmRemoveSessionItemAlert": "Bạn sắp xóa trợ lý này. Hành động này không thể hoàn tác, vui lòng xác nhận.",
   "defaultAgent": "Trợ lý mặc định",
+  "defaultList": "Danh sách mặc định",
   "defaultSession": "Trợ lý mặc định",
   "duplicateTitle": "{{title}} Bản sao",
   "historyRange": "Phạm vi lịch sử",
@@ -34,7 +35,18 @@
   "roleAndArchive": "Vai trò và lưu trữ",
   "searchAgentPlaceholder": "Tìm kiếm trợ lý và cuộc trò chuyện...",
   "sendPlaceholder": "Nhập nội dung trò chuyện...",
-  "sessionList": "Danh sách trợ lý",
+  "sessionGroup": {
+    "config": "Quản lý nhóm",
+    "confirmRemoveGroupAlert": "Bạn sẽ xóa nhóm này, sau khi xóa, trợ lý của nhóm sẽ được di chuyển vào danh sách mặc định, vui lòng xác nhận hành động của bạn",
+    "createGroup": "Thêm nhóm mới",
+    "createSuccess": "Tạo thành công",
+    "inputPlaceholder": "Vui lòng nhập tên nhóm...",
+    "moveGroup": "Di chuyển vào nhóm",
+    "newGroup": "Nhóm mới",
+    "rename": "Đổi tên nhóm",
+    "renameSuccess": "Đổi tên thành công",
+    "tooLong": "Tên nhóm phải có độ dài từ 1-20 ký tự"
+  },
   "shareModal": {
     "download": "Tải xuống ảnh chụp màn hình",
     "imageType": "Định dạng ảnh",
diff --git a/locales/vi-VN/common.json b/locales/vi-VN/common.json
index 1c254c541f45..a8bd44dc6954 100644
--- a/locales/vi-VN/common.json
+++ b/locales/vi-VN/common.json
@@ -44,6 +44,7 @@
       "added": "Nhập thành công",
       "errors": "Lỗi nhập",
       "messages": "Tin nhắn",
+      "sessionGroups": "Nhóm phiên",
       "sessions": "Trợ lý",
       "skips": "Bỏ qua trùng lặp",
       "topics": "Chủ đề",
diff --git a/locales/zh-CN/chat.json b/locales/zh-CN/chat.json
index ebea6f355981..260a6b0e450f 100644
--- a/locales/zh-CN/chat.json
+++ b/locales/zh-CN/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "即将清空当前会话消息，清空后将无法找回，请确认你的操作",
   "confirmRemoveSessionItemAlert": "即将删除该助手，删除后该将无法找回，请确认你的操作",
   "defaultAgent": "自定义助手",
+  "defaultList": "默认列表",
   "defaultSession": "自定义助手",
   "duplicateTitle": "{{title}} 副本",
   "historyRange": "历史范围",
@@ -34,7 +35,18 @@
   "roleAndArchive": "角色与记录",
   "searchAgentPlaceholder": "搜索助手和对话...",
   "sendPlaceholder": "输入聊天内容...",
-  "sessionList": "助手列表",
+  "sessionGroup": {
+    "config": "分组管理",
+    "confirmRemoveGroupAlert": "即将删除该分组，删除后该分组的助手将移动到默认列表，请确认你的操作",
+    "createGroup": "添加新分组",
+    "createSuccess": "创建成功",
+    "inputPlaceholder": "请输入分组名称...",
+    "moveGroup": "移动到分组",
+    "newGroup": "新分组",
+    "rename": "重命名分组",
+    "renameSuccess": "重命名成功",
+    "tooLong": "分组名称长度需在 1-20 之内"
+  },
   "shareModal": {
     "download": "下载截图",
     "imageType": "图片格式",
diff --git a/locales/zh-CN/common.json b/locales/zh-CN/common.json
index aae1295dabcb..aab3a17206bb 100644
--- a/locales/zh-CN/common.json
+++ b/locales/zh-CN/common.json
@@ -44,6 +44,7 @@
       "added": "导入成功",
       "errors": "导入出错",
       "messages": "消息",
+      "sessionGroups": "分组",
       "sessions": "助手",
       "skips": "重复跳过",
       "topics": "话题",
diff --git a/locales/zh-TW/chat.json b/locales/zh-TW/chat.json
index f6fb06d2b83a..2ed6a11c37a5 100644
--- a/locales/zh-TW/chat.json
+++ b/locales/zh-TW/chat.json
@@ -6,6 +6,7 @@
   "confirmClearCurrentMessages": "即將清空當前對話，清空後將無法找回，請確認你的操作",
   "confirmRemoveSessionItemAlert": "即將刪除該助手，刪除後將無法找回，請確認你的操作",
   "defaultAgent": "自定義助手",
+  "defaultList": "預設清單",
   "defaultSession": "自定義助手",
   "duplicateTitle": "{{title}} 副本",
   "historyRange": "歷史範圍",
@@ -34,7 +35,18 @@
   "roleAndArchive": "角色與記錄",
   "searchAgentPlaceholder": "搜索助手和對話...",
   "sendPlaceholder": "輸入聊天內容...",
-  "sessionList": "助手列表",
+  "sessionGroup": {
+    "config": "分組管理",
+    "confirmRemoveGroupAlert": "即將刪除該分組，刪除後該分組的助手將移動到預設清單，請確認你的操作",
+    "createGroup": "新增新分組",
+    "createSuccess": "創建成功",
+    "inputPlaceholder": "請輸入分組名稱...",
+    "moveGroup": "移動到分組",
+    "newGroup": "新分組",
+    "rename": "重新命名分組",
+    "renameSuccess": "重新命名成功",
+    "tooLong": "分組名稱長度需在 1-20 之內"
+  },
   "shareModal": {
     "download": "下載截圖",
     "imageType": "圖片格式",
diff --git a/locales/zh-TW/common.json b/locales/zh-TW/common.json
index 73997da24ab7..e5576c8156eb 100644
--- a/locales/zh-TW/common.json
+++ b/locales/zh-TW/common.json
@@ -44,6 +44,7 @@
       "added": "匯入成功",
       "errors": "匯入出錯",
       "messages": "訊息",
+      "sessionGroups": "會話分組",
       "sessions": "助手",
       "skips": "重複跳過",
       "topics": "話題",

From 041a6d1b8c60a1c8905df0148c22b1587267ca6c Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Wed, 24 Jan 2024 15:19:29 +0800
Subject: [PATCH 20/20] =?UTF-8?q?=F0=9F=9A=B8=20style:=20add=20manager=20f?=
 =?UTF-8?q?or=20default=20group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CollapseGroup/Actions.tsx                 | 157 ++++++++++--------
 .../SessionListContent/DefaultMode.tsx        |   3 +
 2 files changed, 91 insertions(+), 69 deletions(-)

diff --git a/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx b/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx
index 229371383f34..fc5c8a029d38 100644
--- a/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx
+++ b/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx
@@ -13,84 +13,103 @@ const useStyles = createStyles(({ css }) => ({
   `,
 }));
 interface ActionsProps extends Pick<DropdownProps, 'onOpenChange'> {
-  id: string;
+  id?: string;
+  isCustomGroup?: boolean;
   openConfigModal: () => void;
-  openRenameModal: () => void;
+  openRenameModal?: () => void;
 }
 
-const Actions = memo<ActionsProps>(({ id, openRenameModal, openConfigModal, onOpenChange }) => {
-  const { t } = useTranslation('chat');
-  const { styles } = useStyles();
-  const { modal } = App.useApp();
+const Actions = memo<ActionsProps>(
+  ({ id, openRenameModal, openConfigModal, onOpenChange, isCustomGroup }) => {
+    const { t } = useTranslation('chat');
+    const { styles } = useStyles();
+    const { modal } = App.useApp();
 
-  const [removeSessionGroup] = useSessionStore((s) => [s.removeSessionGroup]);
-  const items: MenuProps['items'] = useMemo(
-    () => [
-      {
-        icon: <Icon icon={PencilLine} />,
-        key: 'rename',
-        label: t('sessionGroup.rename'),
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-          openRenameModal();
+    const [removeSessionGroup] = useSessionStore((s) => [s.removeSessionGroup]);
+    const customGroupItems: MenuProps['items'] = useMemo(
+      () => [
+        {
+          icon: <Icon icon={PencilLine} />,
+          key: 'rename',
+          label: t('sessionGroup.rename'),
+          onClick: ({ domEvent }) => {
+            domEvent.stopPropagation();
+            openRenameModal?.();
+          },
         },
-      },
-      {
-        icon: <Icon icon={Settings2} />,
-        key: 'config',
-        label: t('sessionGroup.config'),
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-          openConfigModal();
+        {
+          icon: <Icon icon={Settings2} />,
+          key: 'config',
+          label: t('sessionGroup.config'),
+          onClick: ({ domEvent }) => {
+            domEvent.stopPropagation();
+            openConfigModal();
+          },
         },
-      },
-      {
-        type: 'divider',
-      },
-      {
-        danger: true,
-        icon: <Icon icon={Trash} />,
-        key: 'delete',
-        label: t('delete', { ns: 'common' }),
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-          modal.confirm({
-            centered: true,
-            okButtonProps: { danger: true },
-            onOk: () => {
-              removeSessionGroup(id);
-            },
-            rootClassName: styles.modalRoot,
-            title: t('sessionGroup.confirmRemoveGroupAlert'),
-          });
+        {
+          type: 'divider',
         },
-      },
-    ],
-    [],
-  );
+        {
+          danger: true,
+          icon: <Icon icon={Trash} />,
+          key: 'delete',
+          label: t('delete', { ns: 'common' }),
+          onClick: ({ domEvent }) => {
+            domEvent.stopPropagation();
+            modal.confirm({
+              centered: true,
+              okButtonProps: { danger: true },
+              onOk: () => {
+                if (!id) return;
+                removeSessionGroup(id);
+              },
+              rootClassName: styles.modalRoot,
+              title: t('sessionGroup.confirmRemoveGroupAlert'),
+            });
+          },
+        },
+      ],
+      [],
+    );
 
-  return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
+    const defaultItems: MenuProps['items'] = useMemo(
+      () => [
+        {
+          icon: <Icon icon={Settings2} />,
+          key: 'config',
+          label: t('sessionGroup.config'),
+          onClick: ({ domEvent }) => {
+            domEvent.stopPropagation();
+            openConfigModal();
+          },
         },
-      }}
-      onOpenChange={onOpenChange}
-      trigger={['click']}
-    >
-      <ActionIcon
-        icon={MoreVertical}
-        onClick={(e) => {
-          e.stopPropagation();
+      ],
+      [],
+    );
+
+    return (
+      <Dropdown
+        arrow={false}
+        menu={{
+          items: isCustomGroup ? customGroupItems : defaultItems,
+          onClick: ({ domEvent }) => {
+            domEvent.stopPropagation();
+          },
         }}
-        size={{ blockSize: 22, fontSize: 16 }}
-        style={{ marginRight: -8 }}
-      />
-    </Dropdown>
-  );
-});
+        onOpenChange={onOpenChange}
+        trigger={['click']}
+      >
+        <ActionIcon
+          icon={MoreVertical}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          size={{ blockSize: 22, fontSize: 16 }}
+          style={{ marginRight: -8 }}
+        />
+      </Dropdown>
+    );
+  },
+);
 
 export default Actions;
diff --git a/src/app/chat/features/SessionListContent/DefaultMode.tsx b/src/app/chat/features/SessionListContent/DefaultMode.tsx
index e978a3f86af4..61106efc01f9 100644
--- a/src/app/chat/features/SessionListContent/DefaultMode.tsx
+++ b/src/app/chat/features/SessionListContent/DefaultMode.tsx
@@ -40,6 +40,7 @@ const SessionListContent = memo(() => {
       [
         pinnedSessions.length > 0 && {
           children: <SessionList dataSource={pinnedSessions} />,
+          extra: <Actions openConfigModal={() => setConfigGroupModalOpen(true)} />,
           key: SessionDefaultGroup.Pinned,
           label: t('pin'),
         },
@@ -48,6 +49,7 @@ const SessionListContent = memo(() => {
           extra: (
             <Actions
               id={id}
+              isCustomGroup
               onOpenChange={(isOpen) => {
                 if (isOpen) setActiveGroupId(id);
               }}
@@ -60,6 +62,7 @@ const SessionListContent = memo(() => {
         })),
         {
           children: <SessionList dataSource={defaultSessions} />,
+          extra: <Actions openConfigModal={() => setConfigGroupModalOpen(true)} />,
           key: SessionDefaultGroup.Default,
           label: t('defaultList'),
         },