@lobehub/chat 0.18.2 → 0.20.0

package/CHANGELOG.md

@@ -2,6 +2,65 @@
 
 # Changelog
 
+## [Version 0.20.0](https://github.com/lobehub/lobe-chat/compare/v0.19.0...v0.20.0)
+
+<sup>Released on **2023-07-25**</sup>
+
+#### ✨ Features
+
+- **misc**: 实现话题模块.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 实现话题模块, closes [#16](https://github.com/lobehub/lobe-chat/issues/16) ([64fd6ee](https://github.com/lobehub/lobe-chat/commit/64fd6ee))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.19.0](https://github.com/lobehub/lobe-chat/compare/v0.18.2...v0.19.0)
+
+<sup>Released on **2023-07-24**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 将 message reducer 提取到独立文件夹中, 清理无用代码实现.
+
+#### ✨ Features
+
+- **misc**: 数据结构层完成 topic 模型改造.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 将 message reducer 提取到独立文件夹中 ([64f40ca](https://github.com/lobehub/lobe-chat/commit/64f40ca))
+- **misc**: 清理无用代码实现 ([3655b60](https://github.com/lobehub/lobe-chat/commit/3655b60))
+
+#### What's improved
+
+- **misc**: 数据结构层完成 topic 模型改造 ([99fa2a6](https://github.com/lobehub/lobe-chat/commit/99fa2a6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.18.2](https://github.com/lobehub/lobe-chat/compare/v0.18.1...v0.18.2)
 
 <sup>Released on **2023-07-24**</sup>

package/package.json

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

package/src/locales/default/common.ts

@@ -4,8 +4,6 @@ export default {
   agentModel: '模型',
   agentProfile: '助手信息',
   archive: '归档',
-  archiveCurrentMessages: '归档当前会话',
-  archiveSearchPlaceholder: '搜索归档对话...',
   autoGenerate: '自动补全',
   autoGenerateTooltip: '基于提示词自动补全助手描述',
   cancel: '取消',
@@ -28,6 +26,10 @@ export default {
   setting: '设置',
   share: '分享',
   tokenDetail: '系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}',
+  topic: {
+    saveCurrentMessages: '将当前会话保存为话题',
+    searchPlaceholder: '搜索话题...',
+  },
   updateAgent: '更新助理信息',
   updatePrompt: '更新提示词',
 };

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

@@ -1,11 +1,12 @@
 import { ActionIcon, DraggablePanelBody, EditableMessage, SearchBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ChevronRight } from 'lucide-react';
+import { Maximize2Icon } from 'lucide-react';
 import { memo, useState } from 'react';
 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';
@@ -42,8 +43,10 @@ const useStyles = createStyles(({ css, token }) => ({
 const SideBar = memo(() => {
   const [openModal, setOpenModal] = useState(false);
   const { styles } = useStyles();
-  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
-  const systemRole = useSessionStore(agentSelectors.currentAgentSystemRole, shallow);
+  const [systemRole, updateAgentConfig] = useSessionStore(
+    (s) => [agentSelectors.currentAgentSystemRole(s), s.updateAgentConfig],
+    shallow,
+  );
 
   const { t } = useTranslation('common');
   return (
@@ -51,7 +54,7 @@ const SideBar = memo(() => {
       <Header
         actions={
           <ActionIcon
-            icon={ChevronRight}
+            icon={Maximize2Icon}
             onClick={() => setOpenModal(true)}
             size="small"
             title={t('edit')}
@@ -76,8 +79,9 @@ const SideBar = memo(() => {
         }}
         value={systemRole}
       />
-      <Flexbox style={{ padding: 16 }}>
-        <SearchBar placeholder={t('archiveSearchPlaceholder')} />
+      <Flexbox gap={12} style={{ padding: 16 }}>
+        <SearchBar placeholder={t('topic.searchPlaceholder')} type={'block'} />
+        <Topic />
       </Flexbox>
     </DraggablePanelBody>
   );

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

@@ -0,0 +1,27 @@
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { topicSelectors, useSessionStore } from '@/store/session';
+
+import TopicItem from './TopicItem';
+
+export const Topic = () => {
+  const topics = useSessionStore(topicSelectors.currentTopics);
+  const [activeTopicId] = useSessionStore((s) => [s.activeTopicId], shallow);
+  return (
+    <Flexbox gap={8}>
+      <TopicItem active={!activeTopicId} fav={false} title={'默认话题'} />
+
+      {topics.map(({ id, favorite, title }) => (
+        <TopicItem
+          active={activeTopicId === id}
+          fav={favorite}
+          id={id}
+          key={id}
+          showFav
+          title={title}
+        />
+      ))}
+    </Flexbox>
+  );
+};

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

@@ -0,0 +1,80 @@
+import { StarFilled, StarOutlined } from '@ant-design/icons';
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { LucideIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    background: ${token.colorFill};
+
+    &:hover {
+      background: ${token.colorFill};
+    }
+  `,
+  container: css`
+    cursor: pointer;
+    background: ${token.colorFillTertiary};
+    border-radius: 6px;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  split: css`
+    border-bottom: 1px solid ${token.colorSplit};
+  `,
+}));
+
+export interface ConfigCellProps {
+  active?: boolean;
+  fav?: boolean;
+  id?: string;
+  showFav?: boolean;
+  title: string;
+}
+
+const TopicItem = memo<ConfigCellProps>(({ title, active, id, showFav, fav }) => {
+  const { styles, theme, cx } = useStyles();
+
+  const [dispatchTopic, toggleTopic] = useSessionStore(
+    (s) => [s.dispatchTopic, s.toggleTopic],
+    shallow,
+  );
+  const starIcon = (fav ? StarFilled : StarOutlined) as LucideIcon;
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={cx(styles.container, active && styles.active)}
+      distribution={'space-between'}
+      horizontal
+      onClick={() => {
+        toggleTopic(id);
+      }}
+      padding={'10px 12px'}
+    >
+      {title}
+      {!showFav ? undefined : (
+        <ActionIcon
+          icon={starIcon}
+          onClick={() => {
+            if (!id) return;
+
+            dispatchTopic({ id, key: 'favorite', type: 'updateChatTopic', value: !fav });
+          }}
+          size={'small'}
+          style={{
+            color: fav ? theme.yellow : undefined,
+          }}
+        />
+      )}
+    </Flexbox>
+  );
+});
+
+export default TopicItem;

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

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

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

@@ -12,10 +12,18 @@ import { agentSelectors, useSessionStore } from '@/store/session';
 const Header = memo(() => {
   const { t } = useTranslation('common');
 
-  const [meta, id, modle] = useSessionStore(
-    (s) => [agentSelectors.currentAgentMeta(s), s.activeId, agentSelectors.currentAgentModel(s)],
+  const [title, description, avatar, backgroundColor, id, model] = useSessionStore(
+    (s) => [
+      agentSelectors.currentAgentTitle(s),
+      agentSelectors.currentAgentDescription(s),
+      agentSelectors.currentAgentAvatar(s),
+      agentSelectors.currentAgentBackgroundColor(s),
+      s.activeId,
+      agentSelectors.currentAgentModel(s),
+    ],
     shallow,
   );
+
   const [showAgentSettings, toggleConfig] = useSessionStore(
     (s) => [s.showAgentSettings, s.toggleConfig],
     shallow,
@@ -26,20 +34,16 @@ const Header = memo(() => {
       left={
         <>
           <Avatar
-            avatar={meta?.avatar}
-            background={meta?.backgroundColor}
+            avatar={avatar}
+            background={backgroundColor}
             onClick={() => {
               Router.push(`/chat/${id}/edit`);
             }}
             size={40}
             style={{ cursor: 'pointer' }}
-            title={meta?.title}
-          />
-          <HeaderTitle
-            desc={meta?.description || t('noDescription')}
-            tag={<Tag>{modle}</Tag>}
-            title={meta?.title || t('defaultAgent')}
+            title={title}
           />
+          <HeaderTitle desc={description} tag={<Tag>{model}</Tag>} title={title} />
         </>
       }
       right={

package/src/pages/chat/layout.tsx

@@ -17,8 +17,8 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
     initI18n.finally();
   }, []);
 
-  const [activeSession] = useSessionStore((s) => {
-    return [s.activeSession];
+  const [activeSession, toggleTopic] = useSessionStore((s) => {
+    return [s.activeSession, s.toggleTopic];
   }, shallow);
 
   const router = useRouter();
@@ -26,10 +26,16 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
 
   useEffect(() => {
     const hasRehydrated = useSessionStore.persist.hasHydrated();
-    // 只有当水合完毕后，才能正常去激活会话
-    if (typeof id === 'string' && hasRehydrated) {
+    // 只有当水合完毕后再开始做操作
+    if (!hasRehydrated) return;
+
+    // 1. 正常激活会话
+    if (typeof id === 'string') {
       activeSession(id);
     }
+
+    // 将话题重置为默认值
+    toggleTopic();
   }, [id]);
 
   useEffect(() => {

package/src/prompts/chat.ts

@@ -0,0 +1,19 @@
+import { OpenAIChatMessage, OpenAIStreamPayload } from '@/types/openai';
+
+export const promptSummaryTitle = (
+  messages: OpenAIChatMessage[],
+): Partial<OpenAIStreamPayload> => ({
+  messages: [
+    {
+      content:
+        '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题，不需要包含标点符号',
+      role: 'system',
+    },
+    {
+      content: `${messages.map((message) => `${message.role}: ${message.content}`).join('\n')}
+
+请总结上述对话为10个字以内的标题，不需要包含标点符号`,
+      role: 'user',
+    },
+  ],
+});

package/src/store/session/selectors.ts

@@ -1,3 +1,3 @@
 export { agentSelectors } from './slices/agentConfig';
-export { chatSelectors } from './slices/chat';
+export { chatSelectors, topicSelectors } from './slices/chat';
 export { sessionSelectors } from './slices/session';

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

@@ -17,6 +17,9 @@ const currentAgentMeta = (s: SessionStore): MetaData => {
 
 const currentAgentTitle = (s: SessionStore) => currentAgentMeta(s)?.title || t('defaultSession');
 
+const currentAgentDescription = (s: SessionStore) =>
+  currentAgentMeta(s)?.description || t('noDescription');
+
 const currentAgentBackgroundColor = (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
   if (!session) return DEFAULT_BACKGROUND_COLOR;
@@ -62,6 +65,7 @@ export const agentSelectors = {
   currentAgentBackgroundColor,
   currentAgentConfig,
   currentAgentConfigSafe,
+  currentAgentDescription,
   currentAgentMeta,
   currentAgentModel,
   currentAgentSystemRole,

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

@@ -0,0 +1,21 @@
+import { StateCreator } from 'zustand/vanilla';
+
+import { SessionStore } from '@/store/session';
+
+import { ChatMessageAction, chatMessage } from './message';
+import { ChatTopicAction, chatTopic } from './topic';
+
+/**
+ * 聊天操作
+ */
+export interface ChatAction extends ChatTopicAction, ChatMessageAction {}
+
+export const createChatSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  ChatAction
+> = (...params) => ({
+  ...chatTopic(...params),
+  ...chatMessage(...params),
+});

package/src/store/session/slices/chat/{action.ts → actions/message.ts}

@@ -7,14 +7,14 @@ import { fetchSSE } from '@/utils/fetch';
 import { isFunctionMessage } from '@/utils/message';
 import { nanoid } from '@/utils/uuid';
 
-import { MessageDispatch, messagesReducer } from './messageReducer';
+import { MessageDispatch, messagesReducer } from '../reducers/message';
 
 const LOADING_FLAT = '...';
 
 /**
  * 聊天操作
  */
-export interface ChatAction {
+export interface ChatMessageAction {
   /**
    * 清除消息
    */
@@ -44,11 +44,7 @@ export interface ChatAction {
     assistantMessageId: string,
     withPlugin?: boolean,
   ) => Promise<{ isFunctionCall: boolean; output: string }>;
-  /**
-   * 处理消息编辑
-   * @param messageId - 消息 ID，可选
-   */
-  handleMessageEditing: (messageId: string | undefined) => void;
+
   /**
    * 实际获取 AI 响应
    *
@@ -61,6 +57,7 @@ export interface ChatAction {
    * @param id - 消息 ID
    */
   resendMessage: (id: string) => Promise<void>;
+
   /**
    * 发送消息
    * @param text - 消息文本
@@ -68,14 +65,20 @@ export interface ChatAction {
   sendMessage: (text: string) => Promise<void>;
 }
 
-export const createChatSlice: StateCreator<
+export const chatMessage: StateCreator<
   SessionStore,
   [['zustand/devtools', never]],
   [],
-  ChatAction
+  ChatMessageAction
 > = (set, get) => ({
   clearMessage: () => {
-    get().dispatchMessage({ type: 'resetMessages' });
+    const { dispatchMessage, activeTopicId, dispatchTopic } = get();
+
+    dispatchMessage({ topicId: activeTopicId, type: 'resetMessages' });
+
+    if (activeTopicId) {
+      dispatchTopic({ id: activeTopicId, type: 'deleteChatTopic' });
+    }
   },
 
   createOrSendMsg: async (message) => {
@@ -158,12 +161,8 @@ export const createChatSlice: StateCreator<
     return { isFunctionCall, output };
   },
 
-  handleMessageEditing: (messageId) => {
-    set({ editingMessageId: messageId });
-  },
-
   realFetchAIResponse: async (messages, userMessageId) => {
-    const { dispatchMessage, generateMessage } = get();
+    const { dispatchMessage, generateMessage, activeTopicId } = get();
 
     // 添加 systemRole
     const { systemRole, model } = agentSelectors.currentAgentConfigSafe(get());
@@ -173,49 +172,46 @@ export const createChatSlice: StateCreator<
 
     // 再添加一个空的信息用于放置 ai 响应，注意顺序不能反
     // 因为如果顺序反了，messages 中将包含新增的 ai message
-    const assistantId = nanoid();
+    const mid = nanoid();
 
     dispatchMessage({
-      id: assistantId,
+      id: mid,
       message: LOADING_FLAT,
       parentId: userMessageId,
       role: 'assistant',
       type: 'addMessage',
     });
 
+    // 如果有 activeTopicId，则添加 topicId
+    if (activeTopicId) {
+      dispatchMessage({ id: mid, key: 'topicId', type: 'updateMessage', value: activeTopicId });
+    }
+
     // 为模型添加 fromModel 的额外信息
-    dispatchMessage({
-      id: assistantId,
-      key: 'fromModel',
-      type: 'updateMessageExtra',
-      value: model,
-    });
+    dispatchMessage({ id: mid, key: 'fromModel', type: 'updateMessageExtra', value: model });
 
     // 生成 ai message
-    const { output, isFunctionCall } = await generateMessage(messages, assistantId);
+    const { output, isFunctionCall } = await generateMessage(messages, mid);
 
     // 如果是 function，则发送函数调用方法
     if (isFunctionCall) {
       const { function_call } = JSON.parse(output);
 
       dispatchMessage({
-        id: assistantId,
+        id: mid,
         key: 'function_call',
         type: 'updateMessage',
         value: function_call,
       });
 
       await generateMessage(
-        [
-          ...messages,
-          { content: '', function_call, id: assistantId, role: 'assistant' } as ChatMessage,
-        ],
-        assistantId,
+        [...messages, { content: '', function_call, id: mid, role: 'assistant' } as ChatMessage],
+        mid,
         true,
       );
 
       dispatchMessage({
-        id: assistantId,
+        id: mid,
         key: 'role',
         type: 'updateMessage',
         value: 'assistant',
@@ -251,13 +247,19 @@ export const createChatSlice: StateCreator<
   },
 
   sendMessage: async (message) => {
-    const { dispatchMessage, realFetchAIResponse, autocompleteSessionAgentMeta } = get();
+    const { dispatchMessage, realFetchAIResponse, autocompleteSessionAgentMeta, activeTopicId } =
+      get();
     const session = sessionSelectors.currentSession(get());
     if (!session || !message) return;
 
     const userId = nanoid();
     dispatchMessage({ id: userId, message, role: 'user', type: 'addMessage' });
 
+    // 如果有 activeTopicId，则添加 topicId
+    if (activeTopicId) {
+      dispatchMessage({ id: userId, key: 'topicId', type: 'updateMessage', value: activeTopicId });
+    }
+
     // 先拿到当前的 messages
     const messages = chatSelectors.currentChats(get());
 

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

@@ -0,0 +1,98 @@
+import { StateCreator } from 'zustand/vanilla';
+
+import { promptSummaryTitle } from '@/prompts/chat';
+import { SessionStore, chatSelectors, sessionSelectors } from '@/store/session';
+import { fetchPresetTaskResult } from '@/utils/fetch';
+import { nanoid } from '@/utils/uuid';
+
+import { ChatTopicDispatch, topicReducer } from '../reducers/topic';
+
+export interface ChatTopicAction {
+  /**
+   * 分发主题
+   * @param payload - 要分发的主题
+   */
+  dispatchTopic: (payload: ChatTopicDispatch) => void;
+  /**
+   * 将当前消息保存为主题
+   */
+  saveToTopic: () => void;
+  /**
+   * 切换主题
+   * @param id - 要切换的主题的 ID
+   */
+  toggleTopic: (id?: string) => void;
+  /**
+   * 更新主题加载状态
+   * @param id - 要更新的主题的 ID
+   */
+  updateTopicLoading: (id?: string) => void;
+}
+export const chatTopic: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  ChatTopicAction
+> = (set, get) => ({
+  dispatchTopic: (payload) => {
+    const { activeId } = get();
+    const session = sessionSelectors.currentSession(get());
+    if (!activeId || !session) return;
+
+    const topics = topicReducer(session.topics || {}, payload);
+
+    get().dispatchSession({ id: activeId, topics, type: 'updateSessionTopic' });
+  },
+  saveToTopic: () => {
+    const session = sessionSelectors.currentSession(get());
+    if (!session) return;
+
+    const { dispatchTopic, dispatchMessage, updateTopicLoading } = get();
+    // 获取当前的 messages
+    const messages = chatSelectors.currentChats(get());
+
+    const topicId = nanoid();
+
+    const defaultTitle = '默认话题';
+    const newTopic = {
+      createAt: Date.now(),
+      id: topicId,
+      title: defaultTitle,
+      updateAt: Date.now(),
+    };
+
+    dispatchTopic({
+      topic: newTopic,
+      type: 'addChatTopic',
+    });
+
+    // 为所有 message 添加 topicId
+    for (const m of messages) {
+      dispatchMessage({ id: m.id, key: 'topicId', type: 'updateMessage', value: topicId });
+    }
+
+    let output = '';
+
+    // 自动总结话题标题
+    fetchPresetTaskResult({
+      onError: () => {
+        dispatchTopic({ id: topicId, key: 'title', type: 'updateChatTopic', value: defaultTitle });
+      },
+      onLoadingChange: (loading) => {
+        updateTopicLoading(loading ? topicId : undefined);
+      },
+      onMessageHandle: (x) => {
+        output += x;
+        dispatchTopic({ id: topicId, key: 'title', type: 'updateChatTopic', value: output });
+      },
+      params: promptSummaryTitle(messages),
+    });
+  },
+  toggleTopic: (id) => {
+    set({ activeTopicId: id });
+  },
+
+  updateTopicLoading: (id) => {
+    set({ topicLoadingId: id });
+  },
+});

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

@@ -1,3 +1,3 @@
-export * from './action';
+export * from './actions';
 export * from './initialState';
 export * from './selectors';