@lobehub/chat 0.120.5 → 0.121.0

package/src/app/chat/features/SessionListContent/List/Item/index.tsx

@@ -12,6 +12,7 @@ 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';
 
 interface SessionItemProps {
@@ -20,12 +21,13 @@ interface SessionItemProps {
 
 const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [open, setOpen] = 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] =
+  const [pin, title, description, systemRole, avatar, avatarBackground, updateAt, model, group] =
     useSessionStore((s) => {
       const session = sessionSelectors.getSessionById(id)(s);
       const meta = session.meta;
@@ -40,12 +42,23 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
         meta.backgroundColor,
         session?.updatedAt,
         session.config.model,
+        session?.group,
       ];
     });
 
   const showModel = model !== defaultModel;
 
-  const actions = useMemo(() => <Actions id={id} setOpen={setOpen} />, [id]);
+  const actions = useMemo(
+    () => (
+      <Actions
+        group={group}
+        id={id}
+        openCreateGroupModal={() => setCreateGroupModalOpen(true)}
+        setOpen={setOpen}
+      />
+    ),
+    [group, id],
+  );
 
   const addon = useMemo(
     () =>
@@ -58,19 +71,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
+        id={id}
+        onCancel={() => setCreateGroupModalOpen(false)}
+        open={createGroupModalOpen}
+      />
+    </>
   );
 }, shallow);
 

package/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} />
   );
 });
 

package/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx

@@ -0,0 +1,84 @@
+import { ActionIcon, EditableText, SortableList } from '@lobehub/ui';
+import { App, Popconfirm } from 'antd';
+import { createStyles } from 'antd-style';
+import { PencilLine, Trash } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+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 { t } = useTranslation('chat');
+  const { styles } = useStyles();
+  const { message } = App.useApp();
+
+  const [editing, setEditing] = useState(false);
+  const [updateSessionGroupName, removeSessionGroup] = useSessionStore((s) => [
+    s.updateSessionGroupName,
+    s.removeSessionGroup,
+  ]);
+
+  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={() => {
+              removeSessionGroup(id);
+            }}
+            title={t('sessionGroup.confirmRemoveGroupAlert')}
+          >
+            <ActionIcon icon={Trash} size={'small'} />
+          </Popconfirm>
+        </>
+      ) : (
+        <EditableText
+          editing={editing}
+          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)}
+          showEditIcon={false}
+          size={'small'}
+          style={{
+            height: 28,
+          }}
+          type={'pure'}
+          value={name}
+        />
+      )}
+    </>
+  );
+});
+
+export default GroupItem;

package/src/app/chat/features/SessionListContent/Modals/ConfigGroupModal/index.tsx

@@ -0,0 +1,79 @@
+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 { useSessionStore } from '@/store/session';
+import { sessionGroupSelectors } from '@/store/session/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 sessionGroupItems = useSessionStore(sessionGroupSelectors.sessionGroupItems, isEqual);
+  const [addSessionGroup, updateSessionGroupSort] = useSessionStore((s) => [
+    s.addSessionGroup,
+    s.updateSessionGroupSort,
+  ]);
+
+  return (
+    <Modal
+      allowFullscreen
+      footer={null}
+      onCancel={onCancel}
+      open={open}
+      title={t('sessionGroup.config')}
+      width={400}
+    >
+      <Flexbox>
+        <SortableList
+          items={sessionGroupItems}
+          onChange={(items: SessionGroupItem[]) => {
+            updateSessionGroupSort(items);
+          }}
+          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={() => addSessionGroup(t('sessionGroup.newGroup'))}
+        >
+          {t('sessionGroup.createGroup')}
+        </Button>
+      </Flexbox>
+    </Modal>
+  );
+});
+
+export default ConfigGroupModal;

package/src/app/chat/features/SessionListContent/Modals/CreateGroupModal.tsx

@@ -0,0 +1,63 @@
+import { Input, Modal, type ModalProps } from '@lobehub/ui';
+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 { useSessionStore } from '@/store/session';
+
+interface CreateGroupModalProps extends ModalProps {
+  id: string;
+}
+
+const CreateGroupModal = memo<CreateGroupModalProps>(
+  ({ id, open, onCancel }: CreateGroupModalProps) => {
+    const { t } = useTranslation('chat');
+
+    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={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}
+        >
+          <Flexbox paddingBlock={16}>
+            <Input
+              autoFocus
+              onChange={(e) => setInput(e.target.value)}
+              placeholder={t('sessionGroup.inputPlaceholder')}
+              value={input}
+            />
+          </Flexbox>
+        </Modal>
+      </div>
+    );
+  },
+);
+
+export default CreateGroupModal;

package/src/app/chat/features/SessionListContent/Modals/RenameGroupModal.tsx

@@ -0,0 +1,50 @@
+import { Input, Modal, type ModalProps } from '@lobehub/ui';
+import { App } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+import { sessionGroupSelectors } from '@/store/session/selectors';
+
+interface RenameGroupModalProps extends ModalProps {
+  id: string;
+}
+
+const RenameGroupModal = memo<RenameGroupModalProps>(({ id, open, onCancel }) => {
+  const { t } = useTranslation('chat');
+
+  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={(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}
+    >
+      <Input
+        autoFocus
+        defaultValue={group?.name}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder={t('sessionGroup.inputPlaceholder')}
+        value={input}
+      />
+    </Modal>
+  );
+});
+
+export default RenameGroupModal;

package/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;

package/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'));
       },

package/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>

package/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();
+  });
+});

package/src/database/core/db.ts

@@ -1,18 +1,20 @@
-import Dexie from 'dexie';
+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';
 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,19 +26,39 @@ 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');
+    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';
+    });
+  };
 }
 
 export const LocalDBInstance = new LocalDB();

package/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',
+};

package/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';

package/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();
+    });
+  });
 });