@lobehub/chat 0.120.6 → 0.121.0

package/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": "圖片格式",

package/locales/zh-TW/common.json

@@ -44,6 +44,7 @@
       "added": "匯入成功",
       "errors": "匯入出錯",
       "messages": "訊息",
+      "sessionGroups": "會話分組",
       "sessions": "助手",
       "skips": "重複跳過",
       "topics": "話題",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.120.6",
+  "version": "0.121.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -44,11 +44,8 @@
     "release": "semantic-release",
     "start": "next start",
     "stylelint": "stylelint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
-    "test": "npm run test-temp-fixture-ci && vitest",
-    "test-a-local": "vitest",
-    "test-temp-fixture-ci": "echo 'please remove this script after new bun@1.0.24 released' && rm -rf node_modules && npx bun@1.0.22 install",
-    "test:coverage": "npm run test-temp-fixture-ci && vitest run --coverage",
-    "test:coverage-local": "vitest run --coverage",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
     "test:update": "vitest -u",
     "type-check": "tsc --noEmit",
     "workflow:docs": "tsx scripts/docsWorkflow/index.ts",
@@ -161,6 +158,7 @@
     "@types/uuid": "^9",
     "@umijs/lint": "^4",
     "@vitest/coverage-v8": "^1",
+    "ajv-keywords": "^5.1.0",
     "commitlint": "^18",
     "consola": "^3",
     "dpdm": "^3",

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

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

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

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

package/src/app/chat/features/SessionListContent/CollapseGroup/Actions.tsx

@@ -0,0 +1,115 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { App, Dropdown, DropdownProps, MenuProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { MoreVertical, PencilLine, Settings2, Trash } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const useStyles = createStyles(({ css }) => ({
+  modalRoot: css`
+    z-index: 2000;
+  `,
+}));
+interface ActionsProps extends Pick<DropdownProps, 'onOpenChange'> {
+  id?: string;
+  isCustomGroup?: boolean;
+  openConfigModal: () => void;
+  openRenameModal?: () => void;
+}
+
+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 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();
+          },
+        },
+        {
+          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'),
+            });
+          },
+        },
+      ],
+      [],
+    );
+
+    const defaultItems: MenuProps['items'] = useMemo(
+      () => [
+        {
+          icon: <Icon icon={Settings2} />,
+          key: 'config',
+          label: t('sessionGroup.config'),
+          onClick: ({ domEvent }) => {
+            domEvent.stopPropagation();
+            openConfigModal();
+          },
+        },
+      ],
+      [],
+    );
+
+    return (
+      <Dropdown
+        arrow={false}
+        menu={{
+          items: isCustomGroup ? customGroupItems : defaultItems,
+          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;

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

package/src/app/chat/features/SessionListContent/DefaultMode.tsx

@@ -1,45 +1,74 @@
 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 { 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';
 import Inbox from './Inbox';
 import SessionList from './List';
+import ConfigGroupModal from './Modals/ConfigGroupModal';
+import RenameGroupModal from './Modals/RenameGroupModal';
 
 const SessionListContent = memo(() => {
   const { t } = useTranslation('chat');
-  const unpinnedSessionList = useSessionStore(sessionSelectors.unpinnedSessionList, isEqual);
-  const pinnedList = useSessionStore(sessionSelectors.pinnedSessionList, isEqual);
-  const [hasPinnedSessionList, useFetchSessions] = useSessionStore((s) => [
-    sessionSelectors.hasPinnedSessionList(s),
-    s.useFetchSessions,
-  ]);
+
+  const [activeGroupId, setActiveGroupId] = useState<string>();
+  const [renameGroupModalOpen, setRenameGroupModalOpen] = useState(false);
+  const [configGroupModalOpen, setConfigGroupModalOpen] = useState(false);
+
+  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,
   ]);
 
-  useFetchSessions();
-
-  const items = [
-    hasPinnedSessionList && {
-      children: <SessionList dataSource={pinnedList} />,
-      key: 'pinned',
-      label: t('pin'),
-    },
-    {
-      children: <SessionList dataSource={unpinnedSessionList} />,
-      key: 'sessionList',
-      label: t('sessionList'),
-    },
-  ].filter(Boolean) as CollapseProps['items'];
+  const items = useMemo(
+    () =>
+      [
+        pinnedSessions.length > 0 && {
+          children: <SessionList dataSource={pinnedSessions} />,
+          extra: <Actions openConfigModal={() => setConfigGroupModalOpen(true)} />,
+          key: SessionDefaultGroup.Pinned,
+          label: t('pin'),
+        },
+        ...customSessionGroups.map(({ id, name, children }) => ({
+          children: <SessionList dataSource={children} groupId={id} />,
+          extra: (
+            <Actions
+              id={id}
+              isCustomGroup
+              onOpenChange={(isOpen) => {
+                if (isOpen) setActiveGroupId(id);
+              }}
+              openConfigModal={() => setConfigGroupModalOpen(true)}
+              openRenameModal={() => setRenameGroupModalOpen(true)}
+            />
+          ),
+          key: id,
+          label: name,
+        })),
+        {
+          children: <SessionList dataSource={defaultSessions} />,
+          extra: <Actions openConfigModal={() => setConfigGroupModalOpen(true)} />,
+          key: SessionDefaultGroup.Default,
+          label: t('defaultList'),
+        },
+      ].filter(Boolean) as CollapseProps['items'],
+    [customSessionGroups, pinnedSessions, defaultSessions],
+  );
 
   return (
     <>
@@ -48,11 +77,22 @@ const SessionListContent = memo(() => {
         activeKey={sessionGroupKeys}
         items={items}
         onChange={(keys) => {
-          const sessionGroupKeys = typeof keys === 'string' ? [keys] : keys;
+          const expandSessionGroupKeys = typeof keys === 'string' ? [keys] : keys;
 
-          updatePreference({ sessionGroupKeys });
+          updatePreference({ expandSessionGroupKeys });
         }}
       />
+      {activeGroupId && (
+        <RenameGroupModal
+          id={activeGroupId}
+          onCancel={() => setRenameGroupModalOpen(false)}
+          open={renameGroupModalOpen}
+        />
+      )}
+      <ConfigGroupModal
+        onCancel={() => setConfigGroupModalOpen(false)}
+        open={configGroupModalOpen}
+      />
     </>
   );
 });

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

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

@@ -1,14 +1,26 @@
 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 {
+  Check,
+  HardDriveDownload,
+  ListTree,
+  LucideCopy,
+  LucidePlus,
+  MoreVertical,
+  Pin,
+  PinOff,
+  Trash,
+} from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { configService } from '@/services/config';
 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 }) => ({
   modalRoot: css`
@@ -17,27 +29,35 @@ const useStyles = createStyles(({ css }) => ({
 }));
 
 interface ActionProps {
+  group: string | undefined;
   id: string;
+  openCreateGroupModal: () => void;
   setOpen: (open: boolean) => void;
 }
 
-const Actions = memo<ActionProps>(({ id, setOpen }) => {
-  const { t } = useTranslation('common');
-
+const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, setOpen }) => {
   const { styles } = useStyles();
+  const { t } = useTranslation('chat');
 
-  const [pin, removeSession, pinSession, duplicateSession] = useSessionStore((s) => {
-    const session = sessionSelectors.getSessionById(id)(s);
-    return [
-      sessionHelpers.getSessionPinned(session),
-      s.removeSession,
-      s.pinSession,
-      s.duplicateSession,
-    ];
-  });
+  const sessionCustomGroups = useSessionStore(sessionGroupSelectors.sessionGroupItems, 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.updateSessionGroupId,
+      ];
+    },
+  );
 
   const { modal } = App.useApp();
 
+  const isDefault = group === SessionDefaultGroup.Default;
+  // const hasDivider = !isDefault || Object.keys(sessionByGroup).length > 0;
+
   const items: MenuProps['items'] = useMemo(
     () => [
       {
@@ -48,18 +68,69 @@ const Actions = memo<ActionProps>(({ id, 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);
+            },
+          })),
+          {
+            icon: isDefault ? <Icon icon={Check} /> : <div />,
+            key: 'defaultList',
+            label: t('defaultList'),
+            onClick: () => {
+              updateSessionGroup(id, SessionDefaultGroup.Default);
+            },
+          },
+          {
+            type: 'divider',
+          },
+          {
+            icon: <Icon icon={LucidePlus} />,
+            key: 'createGroup',
+            label: <div>{t('sessionGroup.createGroup')}</div>,
+            onClick: ({ domEvent }) => {
+              domEvent.stopPropagation();
+              openCreateGroupModal();
+            },
+          },
+        ],
+        icon: <Icon icon={ListTree} />,
+        key: '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);
             },
@@ -67,32 +138,15 @@ const Actions = memo<ActionProps>(({ id, 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 },