@lobehub/chat 0.28.0 → 0.30.0

package/.eslintrc.js

@@ -4,5 +4,8 @@ config.extends.push('plugin:@next/next/recommended');
 
 config.rules['unicorn/no-negated-condition'] = 0;
 config.rules['unicorn/prefer-type-error'] = 0;
+config.rules['unicorn/prefer-logical-operator-over-ternary'] = 0;
+config.rules['unicorn/no-null'] = 0;
+config.rules['unicorn/no-typeof-undefined'] = 0;
 
 module.exports = config;

package/CHANGELOG.md

@@ -2,6 +2,60 @@
 
 # Changelog
 
+## [Version 0.30.0](https://github.com/lobehub/lobe-chat/compare/v0.29.0...v0.30.0)
+
+<sup>Released on **2023-07-30**</sup>
+
+#### ✨ Features
+
+- **misc**: 优化保存为话题功能, 实现 Topic 重命名功能, 实现话题删除功能, 支持缓存角色面板的展开折叠状态.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 优化保存为话题功能 ([fdbe084](https://github.com/lobehub/lobe-chat/commit/fdbe084))
+- **misc**: 实现 Topic 重命名功能 ([5ef1685](https://github.com/lobehub/lobe-chat/commit/5ef1685))
+- **misc**: 实现话题删除功能 ([970889d](https://github.com/lobehub/lobe-chat/commit/970889d))
+- **misc**: 支持缓存角色面板的展开折叠状态 ([c241c4b](https://github.com/lobehub/lobe-chat/commit/c241c4b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.29.0](https://github.com/lobehub/lobe-chat/compare/v0.28.0...v0.29.0)
+
+<sup>Released on **2023-07-30**</sup>
+
+#### ✨ Features
+
+- **misc**: 实现单个会话和角色的导出功能, 实现清空所有会话消息.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 实现单个会话和角色的导出功能 ([d15a481](https://github.com/lobehub/lobe-chat/commit/d15a481))
+- **misc**: 实现清空所有会话消息 ([64c5125](https://github.com/lobehub/lobe-chat/commit/64c5125))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.28.0](https://github.com/lobehub/lobe-chat/compare/v0.27.4...v0.28.0)
 
 <sup>Released on **2023-07-30**</sup>

package/package.json

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

package/src/const/message.ts

@@ -1,3 +1,5 @@
+export const LOADING_FLAT = '...';
+
 // 只要 start with 这个，就可以判断为 function message
 export const FUNCTION_MESSAGE_FLAG = '{"function';
 

package/src/features/SideBar/BottomAction.tsx

@@ -22,8 +22,8 @@ const BottomAction = memo<{ children: ReactNode }>(({ children }) => {
   const { t } = useTranslation('common');
 
   const { exportSessions, exportSettings, exportAll, exportAgents } = useExportConfig();
-
   const { importConfig } = useImportConfig();
+
   const items: MenuProps['items'] = useMemo(
     () => [
       {

package/src/helpers/export.ts

@@ -0,0 +1,62 @@
+import { sessionSelectors, useSessionStore } from '@/store/session';
+import { settingsSelectors, useSettings } from '@/store/settings';
+import { createConfigFile, exportConfigFile } from '@/utils/config';
+
+const getAgents = () => sessionSelectors.exportAgents(useSessionStore.getState());
+const getAgent = (id: string) => sessionSelectors.getExportAgent(id)(useSessionStore.getState());
+
+const getSessions = () => sessionSelectors.exportSessions(useSessionStore.getState());
+const getSession = (id: string) => sessionSelectors.getSessionById(id)(useSessionStore.getState());
+
+const getSettings = () => settingsSelectors.exportSettings(useSettings.getState());
+
+export const exportAgents = () => {
+  const sessions = getAgents();
+
+  const config = createConfigFile('agents', { sessions });
+
+  exportConfigFile(config, 'agents');
+};
+
+export const exportSingleAgent = (id: string) => {
+  const agent = getAgent(id);
+  if (!agent) return;
+
+  const config = createConfigFile('agents', { sessions: { [id]: agent } });
+
+  exportConfigFile(config, agent.meta?.title || 'agent');
+};
+
+export const exportSessions = () => {
+  const sessions = getSessions();
+  const config = createConfigFile('sessions', { sessions });
+
+  exportConfigFile(config, 'sessions');
+};
+
+export const exportSingleSession = (id: string) => {
+  const session = getSession(id);
+  if (!session) return;
+  const sessions = { [id]: session };
+
+  const config = createConfigFile('sessions', { sessions });
+
+  exportConfigFile(config, `${session.meta?.title}-session`);
+};
+
+export const exportSettings = () => {
+  const settings = getSettings();
+
+  const config = createConfigFile('settings', { settings });
+
+  exportConfigFile(config, 'settings');
+};
+
+export const exportAll = () => {
+  const sessions = getSessions();
+  const settings = getSettings();
+
+  const config = createConfigFile('all', { sessions, settings });
+
+  exportConfigFile(config, 'config');
+};

package/src/hooks/useExportConfig.ts

@@ -1,69 +1,6 @@
-import { transform } from 'lodash-es';
 import { useMemo } from 'react';
-import { shallow } from 'zustand/shallow';
 
-import { Migration } from '@/migrations';
-import { useSessionStore } from '@/store/session';
-import { useSettings } from '@/store/settings';
-import {
-  ConfigFileAgents,
-  ConfigFileAll,
-  ConfigFileSessions,
-  ConfigFileSettings,
-} from '@/types/exportConfig';
-import { exportConfigFile } from '@/utils/config';
+import { exportAgents, exportAll, exportSessions, exportSettings } from '@/helpers/export';
 
-export const useExportConfig = () => {
-  const [sessions] = useSessionStore((s) => [s.sessions], shallow);
-
-  const [settings] = useSettings((s) => [s.settings, s.importSettings], shallow);
-
-  const exportAgents = () => {
-    const config: ConfigFileAgents = {
-      exportType: 'agents',
-      state: {
-        sessions: transform(sessions, (result, value, key) => {
-          result[key] = { ...value, chats: {}, topics: {} };
-        }),
-      },
-      version: Migration.targetVersion,
-    };
-
-    exportConfigFile(config, 'agents');
-  };
-
-  const exportSessions = () => {
-    const config: ConfigFileSessions = {
-      exportType: 'sessions',
-      state: { sessions },
-      version: Migration.targetVersion,
-    };
-
-    exportConfigFile(config, 'sessions');
-  };
-
-  const exportSettings = () => {
-    const config: ConfigFileSettings = {
-      exportType: 'settings',
-      state: { settings },
-      version: Migration.targetVersion,
-    };
-
-    exportConfigFile(config, 'settings');
-  };
-
-  const exportAll = () => {
-    // 将 入参转换为 配置文件格式
-    const config: ConfigFileAll = {
-      exportType: 'all',
-      state: { sessions, settings },
-      version: Migration.targetVersion,
-    };
-    exportConfigFile(config, 'config');
-  };
-
-  return useMemo(
-    () => ({ exportAgents, exportAll, exportSessions, exportSettings }),
-    [sessions, settings],
-  );
-};
+export const useExportConfig = () =>
+  useMemo(() => ({ exportAgents, exportAll, exportSessions, exportSettings }), []);

package/src/locales/default/common.ts

@@ -52,6 +52,8 @@ export default {
   temp: '临时',
   tokenDetail: '系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}',
   topic: {
+    confirmRemoveTopic: '即将删除该话题，删除后将不可恢复，请谨慎操作。',
+    defaultTitle: '默认话题',
     saveCurrentMessages: '将当前会话保存为话题',
     searchPlaceholder: '搜索话题...',
   },

package/src/locales/default/setting.ts

@@ -2,9 +2,10 @@ export default {
   danger: {
     clear: {
       action: '立即清除',
-      confirm: '确认清除所有聊天、设置数据？',
-      desc: '清除所有聊天、设置数据',
-      title: '清除所有数据',
+      confirm: '确认清除所有聊天数据？',
+      desc: '清除所有会话数据',
+      success: '已清除所有会话消息',
+      title: '清除所有会话消息',
     },
     reset: {
       action: '立即重置',

package/src/migrations/index.ts

@@ -1,4 +1,4 @@
-import { ConfigState } from '@/types/exportConfig';
+import { ConfigStateAll } from '@/types/exportConfig';
 import { VersionController } from '@/utils/VersionController';
 
 // 当前最新的版本号
@@ -7,7 +7,7 @@ export const CURRENT_CONFIG_VERSION = 1;
 // 历史记录版本升级模块
 export const ConfigMigrations = [];
 
-export const Migration = new VersionController<ConfigState>(
+export const Migration = new VersionController<ConfigStateAll>(
   ConfigMigrations,
   CURRENT_CONFIG_VERSION,
 );

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

@@ -1,12 +1,13 @@
 import { ActionIcon, Avatar, Icon, List } from '@lobehub/ui';
 import { useHover } from 'ahooks';
-import { Dropdown, type MenuProps, Popconfirm, Tag } from 'antd';
+import { App, Dropdown, type MenuProps, Tag } from 'antd';
 import { FolderOutput, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
-import { FC, memo, useMemo, useRef, useState } from 'react';
+import { FC, memo, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { agentSelectors, chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
@@ -24,10 +25,10 @@ interface SessionItemProps {
 const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pin }) => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
-  const [popOpen, setPopOpen] = useState(false);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
+
   const { t } = useTranslation('common');
-  const isHighlight = isHovering || dropdownOpen;
+  const isHighlight = isHovering;
+
   const { styles, theme, cx } = useStyles(isHighlight);
   const [defaultModel] = useSettings((s) => [s.settings.model], shallow);
 
@@ -58,23 +59,31 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pi
     ];
   }, shallow);
 
-  // TODO: 动作绑定
+  const { modal } = App.useApp();
   const items: MenuProps['items'] = useMemo(
     () => [
       {
         icon: <Icon icon={pin ? PinOff : Pin} />,
         key: 'pin',
         label: t(pin ? 'pinOff' : 'pin'),
+        // TODO: 动作绑定
+        onClick: () => {},
       },
       {
         children: [
           {
             key: 'agent',
             label: <div>{t('exportType.agent')}</div>,
+            onClick: () => {
+              exportSingleAgent(id);
+            },
           },
           {
             key: 'agentWithMessage',
             label: <div>{t('exportType.agentWithMessage')}</div>,
+            onClick: () => {
+              exportSingleSession(id);
+            },
           },
         ],
         icon: <Icon icon={FolderOutput} />,
@@ -82,10 +91,24 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pi
         label: t('export'),
       },
       {
+        danger: true,
         icon: <Icon icon={Trash} />,
         key: 'delete',
         label: t('delete'),
-        onClick: () => setPopOpen(true),
+        onClick: ({ domEvent }) => {
+          domEvent.stopPropagation();
+
+          modal.confirm({
+            centered: true,
+            okButtonProps: { danger: true },
+            okText: t('ok'),
+            onOk: () => {
+              removeSession(id);
+            },
+            rootClassName: styles.modalRoot,
+            title: t('confirmRemoveSessionItemAlert'),
+          });
+        },
       },
     ],
     [id],
@@ -123,15 +146,6 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pi
                       {model}
                     </Tag>
                   )}
-                  {/*{showChatLength && (*/}
-                  {/*  <Tag*/}
-                  {/*    bordered={false}*/}
-                  {/*    style={{ color: theme.colorTextSecondary, display: 'flex', gap: 4 }}*/}
-                  {/*  >*/}
-                  {/*    <Icon icon={LucideMessageCircle} />*/}
-                  {/*    {chatLength}*/}
-                  {/*  </Tag>*/}
-                  {/*)}*/}
                 </Flexbox>
               )}
             </Flexbox>
@@ -140,42 +154,20 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pi
           style={{ color: theme.colorText }}
           title={title}
         />
-        <Popconfirm
-          arrow={false}
-          cancelText={t('cancel')}
-          okButtonProps={{ danger: true }}
-          okText={t('ok')}
-          onCancel={() => setPopOpen(false)}
-          onConfirm={(e) => {
-            e?.stopPropagation();
-            removeSession(id);
-            setPopOpen(false);
-          }}
-          open={popOpen}
-          overlayStyle={{ width: 280 }}
-          title={t('confirmRemoveSessionItemAlert')}
-        >
-          <Dropdown
-            arrow={false}
-            menu={{ items }}
-            onOpenChange={setDropdownOpen}
-            open={dropdownOpen}
-            trigger={['click']}
-          >
-            <ActionIcon
-              className="session-remove"
-              icon={MoreVertical}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-              size={{
-                blockSize: 28,
-                fontSize: 16,
-              }}
-            />
-          </Dropdown>
-        </Popconfirm>
+        <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
+          <ActionIcon
+            className="session-remove"
+            icon={MoreVertical}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            size={{
+              blockSize: 28,
+              fontSize: 16,
+            }}
+          />
+        </Dropdown>
       </Flexbox>
     </div>
   );

package/src/pages/chat/SessionList/List/style.ts

@@ -52,6 +52,9 @@ export const useStyles = createStyles(({ css, token }, isHighlight: boolean) =>
     hover: css`
       background-color: ${token.colorFillSecondary};
     `,
+    modalRoot: css`
+      z-index: 2000;
+    `,
     pin: css`
       background-color: ${token.colorFillTertiary};
     `,

package/src/pages/chat/[id]/Config/SideBar.tsx

@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { Topic } from '@/pages/chat/[id]/Config/Topic';
 import { agentSelectors, useSessionStore } from '@/store/session';
 
 import Header from './Header';
+import { Topic } from './Topic';
 
 const useStyles = createStyles(({ css, token }) => ({
   desc: css`

package/src/pages/chat/[id]/Config/Topic/DefaultContent.tsx

@@ -0,0 +1,29 @@
+import { Icon } from '@lobehub/ui';
+import { Tag, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import { MessageSquareDashed } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const { Paragraph } = Typography;
+
+const DefaultContent = memo(() => {
+  const { t } = useTranslation('common');
+
+  const theme = useTheme();
+
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <Flexbox align={'center'} height={24} justify={'center'} width={24}>
+        <Icon color={theme.colorTextDescription} icon={MessageSquareDashed} />
+      </Flexbox>
+      <Paragraph ellipsis={{ rows: 1 }} style={{ margin: 0 }}>
+        {t('topic.defaultTitle')}
+      </Paragraph>
+      <Tag>{t('temp')}</Tag>
+    </Flexbox>
+  );
+});
+
+export default DefaultContent;

package/src/pages/chat/[id]/Config/Topic/TopicContent.tsx

@@ -0,0 +1,151 @@
+import { ActionIcon, EditableText, Icon } from '@lobehub/ui';
+import { App, Dropdown, type MenuProps, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { MoreVertical, PencilLine, Star, Trash } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/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 { Paragraph } = Typography;
+
+interface TopicContentProps {
+  fav?: boolean;
+  id: string;
+  title: string;
+}
+
+const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
+  const { t } = useTranslation('common');
+
+  const [editing, dispatchTopic, removeTopic] = useSessionStore(
+    (s) => [s.renameTopicId === id, s.dispatchTopic, s.removeTopic],
+    shallow,
+  );
+  const { styles, theme } = useStyles();
+
+  const toggleEditing = (visible?: boolean) => {
+    useSessionStore.setState({ renameTopicId: visible ? id : '' });
+  };
+
+  const { modal } = App.useApp();
+
+  const items = useMemo<MenuProps['items']>(
+    () => [
+      {
+        icon: <Icon icon={PencilLine} />,
+        key: 'rename',
+        label: t('rename'),
+        onClick: () => {
+          toggleEditing(true);
+        },
+      },
+      // {
+      //   icon: <Icon icon={Share2} />,
+      //   key: 'share',
+      //   label: t('share'),
+      // },
+      {
+        danger: true,
+        icon: <Icon icon={Trash} />,
+        key: 'delete',
+        label: t('delete'),
+        onClick: () => {
+          if (!id) return;
+
+          modal.confirm({
+            centered: true,
+            okButtonProps: { danger: true },
+            onOk: () => {
+              removeTopic(id);
+            },
+            title: t('topic.confirmRemoveTopic'),
+          });
+        },
+      },
+    ],
+    [],
+  );
+
+  return (
+    <>
+      <ActionIcon
+        color={fav ? theme.colorWarning : undefined}
+        fill={fav ? theme.colorWarning : 'transparent'}
+        icon={Star}
+        onClick={() => {
+          if (!id) return;
+          dispatchTopic({ favorite: !fav, id, type: 'favorChatTopic' });
+        }}
+        size={'small'}
+      />
+
+      {!editing ? (
+        <Paragraph
+          className={styles.title}
+          ellipsis={{ rows: 1, tooltip: title }}
+          style={{ margin: 0 }}
+        >
+          {title}
+        </Paragraph>
+      ) : (
+        <EditableText
+          editing={editing}
+          onChangeEnd={(v) => {
+            if (title !== v) {
+              dispatchTopic({ id, key: 'title', type: 'updateChatTopic', value: v });
+            }
+            toggleEditing(false);
+          }}
+          onEditingChange={toggleEditing}
+          showEditIcon={false}
+          size={'small'}
+          style={{
+            background: theme.colorBgContainer,
+            borderRadius: 6,
+            height: 28,
+            padding: '0 2px',
+          }}
+          value={title}
+        />
+      )}
+      {!editing && (
+        <Dropdown
+          arrow={false}
+          menu={{
+            items: items,
+            onClick: ({ domEvent }) => {
+              domEvent.stopPropagation();
+            },
+          }}
+          trigger={['click']}
+        >
+          <ActionIcon
+            className="topic-more"
+            icon={MoreVertical}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            size={'small'}
+          />
+        </Dropdown>
+      )}
+    </>
+  );
+});
+
+export default TopicContent;