@lobehub/chat 0.28.0 → 0.30.0

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

@@ -0,0 +1,70 @@
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+
+import DefaultContent from './DefaultContent';
+import TopicContent from './TopicContent';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  active: css`
+    background: ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary};
+    transition: background 200ms ${token.motionEaseOut};
+
+    &:hover {
+      background: ${token.colorFill};
+    }
+  `,
+  container: css`
+    cursor: pointer;
+    padding: 12px 8px;
+    border-radius: ${token.borderRadius}px;
+
+    .topic-more {
+      opacity: 0;
+      transition: opacity 400ms ${token.motionEaseOut};
+    }
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+
+      .topic-more {
+        opacity: 1;
+      }
+    }
+  `,
+  split: css`
+    border-bottom: 1px solid ${token.colorSplit};
+  `,
+}));
+
+export interface ConfigCellProps {
+  active?: boolean;
+  fav?: boolean;
+  id?: string;
+  title: string;
+}
+
+const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav }) => {
+  const { styles, cx } = useStyles();
+
+  const [toggleTopic] = useSessionStore((s) => [s.toggleTopic], shallow);
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={cx(styles.container, active && styles.active)}
+      distribution={'space-between'}
+      horizontal
+      onClick={() => {
+        toggleTopic(id);
+      }}
+    >
+      {!id ? <DefaultContent /> : <TopicContent fav={fav} id={id} title={title} />}
+    </Flexbox>
+  );
+});
+
+export default TopicItem;

package/src/pages/chat/[id]/Config/{Topic.tsx → Topic/index.tsx}

@@ -13,14 +13,7 @@ export const Topic = () => {
       <TopicItem active={!activeTopicId} fav={false} title={'默认话题'} />
 
       {topics.map(({ id, favorite, title }) => (
-        <TopicItem
-          active={activeTopicId === id}
-          fav={favorite}
-          id={id}
-          key={id}
-          showFav
-          title={title}
-        />
+        <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
       ))}
     </Flexbox>
   );

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

@@ -5,7 +5,7 @@ import { shallow } from 'zustand/shallow';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
-import { useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
 
 import SideBar from './SideBar';
 
@@ -23,8 +23,8 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
 
 const Config = () => {
   const { styles } = useStyles();
-  const [showAgentSettings, toggleConfig] = useSessionStore(
-    (s) => [s.showAgentSettings, s.toggleConfig],
+  const [showAgentSettings, toggleConfig] = useSettings(
+    (s) => [s.showAgentConfig, s.toggleAgentPanel],
     shallow,
   );
 
@@ -32,11 +32,9 @@ const Config = () => {
     <DraggablePanel
       className={styles.drawer}
       expand={showAgentSettings}
-      maxWidth={CHAT_SIDEBAR_WIDTH}
       minWidth={CHAT_SIDEBAR_WIDTH}
       onExpandChange={toggleConfig}
       placement={'right'}
-      resize={false}
     >
       <HeaderSpacing />
       <DraggablePanelContainer style={{ flex: 'none', minWidth: CHAT_SIDEBAR_WIDTH }}>

package/src/pages/chat/[id]/Conversation/Input/index.tsx

@@ -1,7 +1,7 @@
 import { ChatInputArea, DraggablePanel, Icon, Tooltip } from '@lobehub/ui';
 import { Button } from 'antd';
 import { LucideGalleryVerticalEnd } from 'lucide-react';
-import { memo, useMemo, useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
@@ -18,18 +18,15 @@ const ChatInput = () => {
   const [text, setText] = useState('');
 
   const [inputHeight] = useSettings((s) => [s.inputHeight], shallow);
-  const [sendMessage, saveToTopic] = useSessionStore(
-    (s) => [s.createOrSendMsg, s.saveToTopic],
+  const [sendMessage, hasTopic, saveToTopic] = useSessionStore(
+    (s) => [s.createOrSendMsg, !!s.activeTopicId, s.saveToTopic],
     shallow,
   );
 
-  const footer = useMemo(
-    () => (
-      <Tooltip title={t('topic.saveCurrentMessages')}>
-        <Button icon={<Icon icon={LucideGalleryVerticalEnd} />} onClick={saveToTopic} />
-      </Tooltip>
-    ),
-    [],
+  const footer = hasTopic ? null : (
+    <Tooltip title={t('topic.saveCurrentMessages')}>
+      <Button icon={<Icon icon={LucideGalleryVerticalEnd} />} onClick={saveToTopic} />
+    </Tooltip>
   );
 
   return (

package/src/pages/chat/[id]/Header.tsx

@@ -8,6 +8,7 @@ import { shallow } from 'zustand/shallow';
 
 import HeaderTitle from '@/components/HeaderTitle';
 import { agentSelectors, useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
 
 const Header = memo(() => {
   const { t } = useTranslation('common');
@@ -24,8 +25,8 @@ const Header = memo(() => {
     shallow,
   );
 
-  const [showAgentSettings, toggleConfig] = useSessionStore(
-    (s) => [s.showAgentSettings, s.toggleConfig],
+  const [showAgentSettings, toggleConfig] = useSettings(
+    (s) => [s.showAgentConfig, s.toggleAgentPanel],
     shallow,
   );
 

package/src/pages/chat/[id]/edit/Header.tsx

@@ -6,19 +6,32 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import HeaderTitle from '@/components/HeaderTitle';
+import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
+import { useSessionStore } from '@/store/session';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
+  const id = useSessionStore((s) => s.activeId);
 
-  const items: MenuProps['items'] = useMemo(
+  const items = useMemo<MenuProps['items']>(
     () => [
       {
         key: 'agent',
         label: <div>{t('exportType.agent', { ns: 'common' })}</div>,
+        onClick: () => {
+          if (!id) return;
+
+          exportSingleAgent(id);
+        },
       },
       {
         key: 'agentWithMessage',
         label: <div>{t('exportType.agentWithMessage', { ns: 'common' })}</div>,
+        onClick: () => {
+          if (!id) return;
+
+          exportSingleSession(id);
+        },
       },
     ],
     [],

package/src/pages/setting/SettingForm.tsx

@@ -1,5 +1,5 @@
 import { Form, type ItemGroup, ThemeSwitch } from '@lobehub/ui';
-import { Form as AntForm, Button, Input, Popconfirm, Select, Switch } from 'antd';
+import { Form as AntForm, App, Button, Input, Select, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
 import { AppWindow, BrainCog, MessagesSquare, Palette, Webhook } from 'lucide-react';
@@ -11,6 +11,7 @@ import { shallow } from 'zustand/shallow';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { options } from '@/locales/options';
+import { useSessionStore } from '@/store/session';
 import { settingsSelectors, useSettings } from '@/store/settings';
 import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
 import { LanguageModel } from '@/types/llm';
@@ -27,6 +28,7 @@ type SettingItemGroup = ItemGroup & {
 const SettingForm = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
+  const clearSessions = useSessionStore((s) => s.clearSessions);
   const settings = useSettings(settingsSelectors.currentSettings, isEqual);
   const { setThemeMode, setSettings, resetSettings } = useSettings(
     (s) => ({
@@ -37,14 +39,35 @@ const SettingForm = memo(() => {
     shallow,
   );
 
+  const { message, modal } = App.useApp();
   const handleReset = useCallback(() => {
-    resetSettings();
-    form.setFieldsValue(DEFAULT_SETTINGS);
+    modal.confirm({
+      cancelText: t('cancel', { ns: 'common' }),
+      centered: true,
+      okButtonProps: { danger: true },
+      okText: t('ok', { ns: 'common' }),
+      onOk: () => {
+        resetSettings();
+        form.setFieldsValue(DEFAULT_SETTINGS);
+      },
+      title: t('danger.reset.confirm'),
+    });
   }, []);
 
   const handleClear = useCallback(() => {
-    handleReset();
-    // TODO: 删除聊天记录
+    modal.confirm({
+      cancelText: t('cancel', { ns: 'common' }),
+      centered: true,
+      okButtonProps: {
+        danger: true,
+      },
+      okText: t('ok', { ns: 'common' }),
+      onOk: () => {
+        clearSessions();
+        message.success(t('danger.clear.success'));
+      },
+      title: t('danger.clear.confirm'),
+    });
   }, []);
 
   const theme: SettingItemGroup = useMemo(
@@ -240,18 +263,9 @@ const SettingForm = memo(() => {
         },
         {
           children: (
-            <Popconfirm
-              arrow={false}
-              cancelText={t('cancel', { ns: 'common' })}
-              okButtonProps={{ danger: true }}
-              okText={t('ok', { ns: 'common' })}
-              onConfirm={handleReset}
-              title={t('danger.reset.confirm')}
-            >
-              <Button danger type="primary">
-                {t('danger.reset.action')}
-              </Button>
-            </Popconfirm>
+            <Button danger onClick={handleReset} type="primary">
+              {t('danger.reset.action')}
+            </Button>
           ),
           desc: t('danger.reset.title'),
           label: t('danger.reset.desc'),
@@ -259,18 +273,9 @@ const SettingForm = memo(() => {
         },
         {
           children: (
-            <Popconfirm
-              arrow={false}
-              cancelText={t('cancel', { ns: 'common' })}
-              okButtonProps={{ danger: true }}
-              okText={t('ok', { ns: 'common' })}
-              onConfirm={handleClear}
-              title={t('danger.clear.confirm')}
-            >
-              <Button danger type="primary">
-                {t('danger.clear.action')}
-              </Button>
-            </Popconfirm>
+            <Button danger onClick={handleClear} type="primary">
+              {t('danger.clear.action')}
+            </Button>
           ),
           desc: t('danger.clear.title'),
           label: t('danger.clear.desc'),

package/src/store/session/slices/agentConfig/action.ts

@@ -46,11 +46,6 @@ export interface AgentAction {
   internalUpdateAgentMeta: (id: string) => any;
   toggleAgentPlugin: (pluginId: string) => void;
 
-  /**
-   * 切换配置
-   * @param showPanel - 是否显示面板，默认为 true
-   */
-  toggleConfig: (showPanel?: boolean) => void;
   /**
    * 更新代理配置
    * @param config - 部分 LobeAgentConfig 的配置
@@ -214,12 +209,6 @@ export const createAgentSlice: StateCreator<
     get().dispatchSession({ config, id: activeId, type: 'updateSessionConfig' });
   },
 
-  toggleConfig: (newValue) => {
-    const showAgentSettings = typeof newValue === 'boolean' ? newValue : !get().showAgentSettings;
-
-    set({ showAgentSettings });
-  },
-
   updateAgentConfig: (config) => {
     const { activeId } = get();
     const session = sessionSelectors.currentSession(get());

package/src/store/session/slices/agentConfig/initialState.ts

@@ -6,8 +6,6 @@ export type SessionLoadingState = Record<Partial<keyof MetaData>, boolean>;
 
 export interface AgentConfigState {
   autocompleteLoading: SessionLoadingState;
-
-  showAgentSettings: boolean;
 }
 
 export const initialLobeAgentConfig: LobeAgentConfig = {
@@ -32,6 +30,4 @@ export const initialAgentConfigState: AgentConfigState = {
     tag: false,
     title: false,
   },
-
-  showAgentSettings: true,
 };

package/src/store/session/slices/chat/actions/message.ts

@@ -1,5 +1,6 @@
 import { StateCreator } from 'zustand/vanilla';
 
+import { LOADING_FLAT } from '@/const/message';
 import { fetchChatModel } from '@/services/chatModel';
 import { fetchPlugin } from '@/services/plugin';
 import { SessionStore, agentSelectors, chatSelectors, sessionSelectors } from '@/store/session';
@@ -10,8 +11,6 @@ import { nanoid } from '@/utils/uuid';
 
 import { MessageDispatch, messagesReducer } from '../reducers/message';
 
-const LOADING_FLAT = '...';
-
 /**
  * 聊天操作
  */
@@ -216,6 +215,7 @@ export const chatMessage: StateCreator<
 
     await realFetchAIResponse(histories, latestMsg.id);
   },
+
   sendMessage: async (message) => {
     const { dispatchMessage, realFetchAIResponse, autocompleteSessionAgentMeta, activeTopicId } =
       get();

package/src/store/session/slices/chat/actions/topic.ts

@@ -1,7 +1,8 @@
 import { StateCreator } from 'zustand/vanilla';
 
+import { LOADING_FLAT } from '@/const/message';
 import { promptSummaryTitle } from '@/prompts/chat';
-import { SessionStore, chatSelectors, sessionSelectors } from '@/store/session';
+import { SessionStore, chatSelectors, sessionSelectors, topicSelectors } from '@/store/session';
 import { fetchPresetTaskResult } from '@/utils/fetch';
 import { nanoid } from '@/utils/uuid';
 
@@ -13,6 +14,11 @@ export interface ChatTopicAction {
    * @param payload - 要分发的主题
    */
   dispatchTopic: (payload: ChatTopicDispatch) => void;
+  /**
+   * 移除话题
+   * @param id
+   */
+  removeTopic: (id: string) => void;
   /**
    * 将当前消息保存为主题
    */
@@ -28,6 +34,7 @@ export interface ChatTopicAction {
    */
   updateTopicLoading: (id?: string) => void;
 }
+
 export const chatTopic: StateCreator<
   SessionStore,
   [['zustand/devtools', never]],
@@ -43,6 +50,24 @@ export const chatTopic: StateCreator<
 
     get().dispatchSession({ id: activeId, topics, type: 'updateSessionTopic' });
   },
+  removeTopic: (id) => {
+    const { dispatchTopic, dispatchMessage, toggleTopic } = get();
+
+    // 移除关联的 message
+    const messages = topicSelectors.getTopicMessages(id)(get());
+    for (const m of messages) {
+      dispatchMessage({
+        id: m.id,
+        type: 'deleteMessage',
+      });
+    }
+
+    // 最后移除 topic
+    dispatchTopic({ id, type: 'deleteChatTopic' });
+
+    // 切换到默认 topic
+    toggleTopic();
+  },
   saveToTopic: () => {
     const session = sessionSelectors.currentSession(get());
     if (!session) return;
@@ -71,6 +96,8 @@ export const chatTopic: StateCreator<
       dispatchMessage({ id: m.id, key: 'topicId', type: 'updateMessage', value: topicId });
     }
 
+    dispatchTopic({ id: topicId, key: 'title', type: 'updateChatTopic', value: LOADING_FLAT });
+
     let output = '';
 
     // 自动总结话题标题
@@ -91,7 +118,6 @@ export const chatTopic: StateCreator<
   toggleTopic: (id) => {
     set({ activeTopicId: id });
   },
-
   updateTopicLoading: (id) => {
     set({ topicLoadingId: id });
   },

package/src/store/session/slices/chat/initialState.ts

@@ -1,6 +1,7 @@
 export interface ChatState {
   activeTopicId?: string;
   chatLoadingId?: string;
+  renameTopicId?: string;
   topicLoadingId?: string;
 }
 

package/src/store/session/slices/chat/reducers/topic.ts

@@ -14,12 +14,22 @@ interface UpdateChatTopicAction {
   value: any;
 }
 
+interface FavorChatTopicAction {
+  favorite: boolean;
+  id: string;
+  type: 'favorChatTopic';
+}
+
 interface DeleteChatTopicAction {
   id: string;
   type: 'deleteChatTopic';
 }
 
-export type ChatTopicDispatch = AddChatTopicAction | UpdateChatTopicAction | DeleteChatTopicAction;
+export type ChatTopicDispatch =
+  | AddChatTopicAction
+  | UpdateChatTopicAction
+  | DeleteChatTopicAction
+  | FavorChatTopicAction;
 
 export const topicReducer = (state: ChatTopicMap, payload: ChatTopicDispatch): ChatTopicMap => {
   switch (payload.type) {
@@ -46,6 +56,18 @@ export const topicReducer = (state: ChatTopicMap, payload: ChatTopicDispatch): C
       });
     }
 
+    case 'favorChatTopic': {
+      return produce(state, (draftState) => {
+        const { favorite, id } = payload;
+
+        if (!draftState[id]) return;
+
+        const topic = draftState[id];
+
+        topic.favorite = favorite;
+      });
+    }
+
     case 'deleteChatTopic': {
       return produce(state, (draftState) => {
         delete draftState[payload.id];

package/src/store/session/slices/chat/selectors/index.ts

@@ -1,6 +1,6 @@
 import { currentChats } from './chat';
 import { chatsTokenCount, systemRoleTokenCount, totalTokenCount } from './token';
-import { currentTopics } from './topic';
+import { currentTopics, getTopicMessages } from './topic';
 
 export const chatSelectors = {
   chatsTokenCount,
@@ -11,4 +11,5 @@ export const chatSelectors = {
 
 export const topicSelectors = {
   currentTopics,
+  getTopicMessages,
 };

package/src/store/session/slices/chat/selectors/topic.ts

@@ -1,5 +1,6 @@
 // 展示在聊天框中的消息
 import { SessionStore, sessionSelectors } from '@/store/session';
+import { organizeChats } from '@/store/session/slices/chat/selectors/utils';
 import { ChatTopic } from '@/types/topic';
 
 export const currentTopics = (s: SessionStore): ChatTopic[] => {
@@ -14,3 +15,10 @@ export const currentTopics = (s: SessionStore): ChatTopic[] => {
 
   return [...favTopics, ...defaultTopics];
 };
+
+export const getTopicMessages = (topicId: string) => (s: SessionStore) => {
+  const session = sessionSelectors.currentSession(s);
+  if (!session) return [];
+
+  return organizeChats(session, { assistant: '', user: '' }, topicId);
+};

package/src/store/session/slices/session/action.ts

@@ -11,18 +11,20 @@ import { SessionDispatch, sessionsReducer } from './reducers/session';
 
 export interface SessionAction {
   activeSession: (sessionId: string) => void;
+  clearSessions: () => void;
+
   /**
    * @title 添加会话
    * @param session - 会话信息
    * @returns void
    */
   createSession: () => Promise<string>;
-
   /**
    * 变更session
    * @param payload - 聊天记录
    */
   dispatchSession: (payload: SessionDispatch) => void;
+
   /**
    * 导入会话
    * @param sessions
@@ -34,14 +36,12 @@ export interface SessionAction {
    * @returns 压缩后的消息
    */
   // genShareUrl: () => string;
-
   /**
    * @title 删除会话
    * @param index - 会话索引
    * @returns void
    */
   removeSession: (sessionId: string) => void;
-
   /**
    * @title 切换会话
    * @param sessionId - 会话索引
@@ -60,6 +60,10 @@ export const createSessionSlice: StateCreator<
     set({ activeId: sessionId });
   },
 
+  clearSessions: () => {
+    set({ sessions: {} });
+  },
+
   createSession: async () => {
     const { dispatchSession, switchSession } = get();
 
@@ -100,7 +104,6 @@ export const createSessionSlice: StateCreator<
       }),
     });
   },
-
   removeSession: (sessionId) => {
     get().dispatchSession({ id: sessionId, type: 'removeSession' });
 
@@ -108,6 +111,7 @@ export const createSessionSlice: StateCreator<
       Router.push('/');
     }
   },
+
   switchSession: async (sessionId) => {
     if (get().activeId === sessionId) return;
 
@@ -118,7 +122,6 @@ export const createSessionSlice: StateCreator<
     // 新会话
     await Router.push(`/chat/${sessionId}`);
   },
-
   // genShareUrl: () => {
   //   const session = sessionSelectors.currentSession(get());
   //   if (!session) return '';

package/src/store/session/slices/session/selectors/export.ts

@@ -0,0 +1,23 @@
+import { transform } from 'lodash-es';
+
+import { SessionStore } from '@/store/session';
+import { LobeAgentSession, LobeSessions } from '@/types/session';
+
+import { getSessionById } from './list';
+
+export const exportSessions = (s: SessionStore) => s.sessions;
+
+// 排除 chats
+export const exportAgents = (s: SessionStore) => {
+  return transform(s.sessions, (result: LobeSessions, value, key) => {
+    // 移除 chats 和 topics
+    result[key] = { ...value, chats: {}, topics: {} } as LobeAgentSession;
+  });
+};
+// 排除 chats
+export const getExportAgent =
+  (id: string) =>
+  (s: SessionStore): LobeAgentSession => {
+    const session = getSessionById(id)(s);
+    return { ...session, chats: {}, topics: {} };
+  };

package/src/store/session/slices/session/selectors/index.ts

@@ -1,14 +1,18 @@
+import { exportAgents, exportSessions, getExportAgent } from './export';
 import {
+  currentSession,
   currentSessionSafe,
-  currentSessionSel,
   getSessionById,
   getSessionMetaById,
   sessionList,
 } from './list';
 
 export const sessionSelectors = {
-  currentSession: currentSessionSel,
+  currentSession,
   currentSessionSafe,
+  exportAgents,
+  exportSessions,
+  getExportAgent,
   getSessionById,
   getSessionMetaById,
   sessionList,

package/src/store/session/slices/session/selectors/list.ts

@@ -5,13 +5,14 @@ import { filterWithKeywords } from '@/utils/filter';
 
 import { initLobeSession } from '../initialState';
 
-export const currentSessionSel = (s: SessionStore): LobeAgentSession | undefined => {
+export const currentSession = (s: SessionStore): LobeAgentSession | undefined => {
   if (!s.activeId) return;
 
   return s.sessions[s.activeId];
 };
+
 export const currentSessionSafe = (s: SessionStore): LobeAgentSession => {
-  return currentSessionSel(s) || initLobeSession;
+  return currentSession(s) || initLobeSession;
 };
 
 export const sessionList = (s: SessionStore) => {