@lobehub/chat 1.28.6 → 1.29.0

package/src/database/server/migrations/meta/_journal.json

@@ -77,6 +77,13 @@
       "when": 1730900133049,
       "tag": "0010_add_accessed_at_and_clean_tables",
       "breakpoints": true
+    },
+    {
+      "idx": 11,
+      "version": "7",
+      "when": 1731138670427,
+      "tag": "0011_add_topic_history_summary",
+      "breakpoints": true
     }
   ],
   "version": "6"

package/src/database/server/models/__tests__/topic.test.ts

@@ -427,6 +427,8 @@ describe('TopicModel', () => {
         favorite: true,
         sessionId,
         userId,
+        historySummary: null,
+        metadata: null,
         clientId: null,
         createdAt: expect.any(Date),
         updatedAt: expect.any(Date),
@@ -473,6 +475,8 @@ describe('TopicModel', () => {
         title: 'New Topic',
         favorite: false,
         clientId: null,
+        historySummary: null,
+        metadata: null,
         sessionId,
         userId,
         createdAt: expect.any(Date),

package/src/database/server/models/topic.ts

@@ -36,6 +36,8 @@ export class TopicModel {
           createdAt: topics.createdAt,
           favorite: topics.favorite,
           id: topics.id,
+          metadata: topics.metadata,
+          summary: topics.historySummary,
           title: topics.title,
           updatedAt: topics.updatedAt,
         })
@@ -47,6 +49,20 @@ export class TopicModel {
         .limit(pageSize)
         .offset(offset)
     );
+
+    // return result.map(({ summary, metadata, ...item }) => {
+    //   const meta = metadata as ChatTopicMetadata;
+    //   return {
+    //     ...item,
+    //     summary: !!summary
+    //       ? ({
+    //           content: summary,
+    //           model: meta?.model,
+    //           provider: meta?.provider,
+    //         } as ChatTopicSummary)
+    //       : undefined,
+    //   };
+    // });
   }
 
   async findById(id: string) {

package/src/database/server/schemas/lobechat/topic.ts

@@ -1,5 +1,5 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix  */
-import { boolean, pgTable, text, unique } from 'drizzle-orm/pg-core';
+import { boolean, jsonb, pgTable, text, unique } from 'drizzle-orm/pg-core';
 
 import { idGenerator } from '../../utils/idGenerator';
 import { timestamps } from './_helpers';
@@ -19,7 +19,8 @@ export const topics = pgTable(
       .references(() => users.id, { onDelete: 'cascade' })
       .notNull(),
     clientId: text('client_id'),
-
+    historySummary: text('history_summary'),
+    metadata: jsonb('metadata'),
     ...timestamps,
   },
   (t) => ({

package/src/features/AgentSetting/AgentChat/index.tsx

@@ -18,20 +18,13 @@ const AgentChat = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
   const { isDarkMode } = useThemeMode();
-  const [
-    displayMode,
-    enableAutoCreateTopic,
-    enableHistoryCount,
-    enableCompressThreshold,
-    updateConfig,
-  ] = useStore((s) => {
+  const [displayMode, enableAutoCreateTopic, enableHistoryCount, updateConfig] = useStore((s) => {
     const config = selectors.chatConfig(s);
 
     return [
       config.displayMode,
       config.enableAutoCreateTopic,
       config.enableHistoryCount,
-      config.enableCompressThreshold,
       s.setChatConfig,
     ];
   });
@@ -110,19 +103,12 @@ const AgentChat = memo(() => {
       },
       {
         children: <Switch />,
-        label: t('settingChat.enableCompressThreshold.title'),
+        hidden: !enableHistoryCount,
+        label: t('settingChat.enableCompressHistory.title'),
         minWidth: undefined,
-        name: 'enableCompressThreshold',
+        name: 'enableCompressHistory',
         valuePropName: 'checked',
       },
-      {
-        children: <SliderWithInput max={32} min={0} />,
-        desc: t('settingChat.compressThreshold.desc'),
-        divider: false,
-        hidden: !enableCompressThreshold,
-        label: t('settingChat.compressThreshold.title'),
-        name: 'compressThreshold',
-      },
     ],
     title: t('settingChat.title'),
   };

package/src/features/ChatInput/ActionBar/History.tsx

@@ -5,6 +5,7 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 
@@ -12,17 +13,18 @@ const History = memo(() => {
   const { t } = useTranslation('setting');
   const [popoverOpen, setPopoverOpen] = useState(false);
 
-  const [historyCount, unlimited, updateAgentConfig] = useAgentStore((s) => {
+  const [historyCount, enableHistoryCount, updateAgentConfig] = useAgentStore((s) => {
     const config = agentSelectors.currentAgentChatConfig(s);
-    return [config.historyCount, !config.enableHistoryCount, s.updateAgentChatConfig];
+    return [config.historyCount, config.enableHistoryCount, s.updateAgentChatConfig];
   });
 
   const title = t(
-    unlimited
-      ? 'settingChat.enableHistoryCount.unlimited'
-      : 'settingChat.enableHistoryCount.limited',
+    enableHistoryCount
+      ? 'settingChat.enableHistoryCount.limited'
+      : 'settingChat.enableHistoryCount.unlimited',
     { number: historyCount || 0 },
   );
+  const mobile = useIsMobile();
 
   return (
     <Popover
@@ -30,36 +32,37 @@ const History = memo(() => {
       content={
         <Flexbox align={'center'} gap={16} horizontal>
           <SliderWithInput
-            disabled={unlimited}
-            max={30}
-            min={1}
+            disabled={!enableHistoryCount}
+            max={20}
+            min={0}
             onChange={(v) => {
               updateAgentConfig({ historyCount: v });
             }}
             step={1}
-            style={{ width: 160 }}
+            style={{ width: mobile ? 160 : 300 }}
             value={historyCount}
           />
-          <Flexbox align={'center'} gap={4} horizontal>
-            <Switch
-              checked={unlimited}
-              onChange={(checked) => {
-                updateAgentConfig({ enableHistoryCount: !checked });
-              }}
-              size={'small'}
-            />
-            {t('settingChat.enableHistoryCount.alias')}
-          </Flexbox>
         </Flexbox>
       }
       onOpenChange={setPopoverOpen}
       open={popoverOpen}
       placement={'top'}
-      title={t('settingChat.enableHistoryCount.setlimited')}
+      title={
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Switch
+            checked={enableHistoryCount}
+            onChange={(enableHistoryCount) => {
+              updateAgentConfig({ enableHistoryCount });
+            }}
+            size={'small'}
+          />
+          {t('settingChat.enableHistoryCount.title')}
+        </Flexbox>
+      }
       trigger={'click'}
     >
       <ActionIcon
-        icon={unlimited ? TimerOff : Timer}
+        icon={enableHistoryCount ? Timer : TimerOff}
         placement={'bottom'}
         title={popoverOpen ? undefined : title}
       />

package/src/features/ChatInput/ActionBar/Token/TokenTag.tsx

@@ -10,7 +10,7 @@ import { useTokenCount } from '@/hooks/useTokenCount';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
 import { useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 import { useUserStore } from '@/store/user';
@@ -22,15 +22,23 @@ const Token = memo(() => {
   const { t } = useTranslation(['chat', 'components']);
   const theme = useTheme();
 
-  const [input, messageString] = useChatStore((s) => [
+  const [input, messageString, historySummary] = useChatStore((s) => [
     s.inputMessage,
     chatSelectors.chatsMessageString(s),
+    topicSelectors.currentActiveTopicSummary(s)?.content || '',
   ]);
 
-  const [systemRole, model] = useAgentStore((s) => [
-    agentSelectors.currentAgentSystemRole(s),
-    agentSelectors.currentAgentModel(s) as string,
-  ]);
+  const [systemRole, model] = useAgentStore((s) => {
+    const config = agentSelectors.currentAgentChatConfig(s);
+
+    return [
+      agentSelectors.currentAgentSystemRole(s),
+      agentSelectors.currentAgentModel(s) as string,
+      // add these two params to enable the component to re-render
+      config.historyCount,
+      config.enableHistoryCount,
+    ];
+  });
 
   const maxTokens = useUserStore(modelProviderSelectors.modelMaxToken(model));
 
@@ -55,9 +63,10 @@ const Token = memo(() => {
 
   // SystemRole token
   const systemRoleToken = useTokenCount(systemRole);
+  const historySummaryToken = useTokenCount(historySummary);
 
   // Total token
-  const totalToken = systemRoleToken + toolsToken + chatsToken;
+  const totalToken = systemRoleToken + historySummaryToken + toolsToken + chatsToken;
 
   const content = (
     <Flexbox gap={12} style={{ minWidth: 200 }}>
@@ -99,6 +108,12 @@ const Token = memo(() => {
             title: t('tokenDetails.tools'),
             value: toolsToken,
           },
+          {
+            color: theme.orange,
+            id: 'historySummary',
+            title: t('tokenDetails.historySummary'),
+            value: historySummaryToken,
+          },
           {
             color: theme.gold,
             id: 'chats',

package/src/features/Conversation/Actions/index.ts

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
-import { LLMRoleType } from '@/types/llm';
+import { MessageRoleType } from '@/types/message';
 
 import { OnActionsClick, RenderAction } from '../types';
 import { AssistantActionsBar } from './Assistant';
@@ -11,7 +11,7 @@ import { DefaultActionsBar } from './Fallback';
 import { ToolActionsBar } from './Tool';
 import { UserActionsBar } from './User';
 
-export const renderActions: Record<LLMRoleType, RenderAction> = {
+export const renderActions: Record<MessageRoleType, RenderAction> = {
   assistant: AssistantActionsBar,
   system: DefaultActionsBar,
   tool: ToolActionsBar,

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -22,9 +22,9 @@ import {
   renderMessages,
   useAvatarsClick,
 } from '../../Messages';
+import History from '../History';
 import { markdownElements } from '../MarkdownElements';
 import ActionsBar from './ActionsBar';
-import HistoryDivider from './HistoryDivider';
 import { processWithArtifact } from './utils';
 
 const rehypePlugins = markdownElements.map((element) => element.rehypePlugin);
@@ -61,11 +61,9 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
 
     if (index >= chats.length) return;
 
-    return chatSelectors.currentChatsWithGuideMessage(meta)(s)[index];
+    return chats[index];
   }, isEqual);
 
-  const historyLength = useChatStore((s) => chatSelectors.currentChats(s).length);
-
   const [
     isMessageLoading,
     generating,
@@ -138,12 +136,14 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
 
   const error = useErrorContent(item?.error);
 
+  const historyLength = useChatStore((s) => chatSelectors.currentChats(s).length);
+
   const enableHistoryDivider = useAgentStore((s) => {
     const config = agentSelectors.currentAgentChatConfig(s);
     return (
       config.enableHistoryCount &&
       historyLength > (config.historyCount ?? 0) &&
-      config.historyCount === historyLength - index + 1
+      config.historyCount === historyLength - index
     );
   });
 
@@ -166,7 +166,7 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
   return (
     item && (
       <>
-        <HistoryDivider enable={enableHistoryDivider} />
+        {enableHistoryDivider && <History  />}
         <ChatItem
           actions={
             <ActionsBar

package/src/features/Conversation/components/History/index.tsx

@@ -0,0 +1,71 @@
+import { ModelTag } from '@lobehub/icons';
+import { Icon, Markdown } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { ScrollText } from 'lucide-react';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { topicSelectors } from '@/store/chat/selectors';
+
+import HistoryDivider from './HistoryDivider';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding-inline: 12px;
+    border-radius: 12px;
+  `,
+  content: css`
+    color: ${token.colorTextDescription};
+  `,
+  line: css`
+    width: 3px;
+    height: 100%;
+    background: ${token.colorBorder};
+  `,
+}));
+
+const History = memo(() => {
+  const { styles, theme } = useStyles();
+  const [content, model] = useChatStore((s) => {
+    const history = topicSelectors.currentActiveTopicSummary(s);
+    return [history?.content, history?.model];
+  });
+
+  return (
+    <Flexbox paddingInline={16} style={{ paddingBottom: 8 }}>
+      <HistoryDivider enable />
+      {!!content && (
+        <Flexbox className={styles.container} gap={8}>
+          <Flexbox align={'flex-start'} gap={8} horizontal>
+            <Center height={20} width={20}>
+              <Icon
+                icon={ScrollText}
+                size={{ fontSize: 16 }}
+                style={{ color: theme.colorTextDescription }}
+              />
+            </Center>
+            <Typography.Text type={'secondary'}>历史消息总结</Typography.Text>
+
+            {model && (
+              <div>
+                <ModelTag model={model} />
+              </div>
+            )}
+          </Flexbox>
+          <Flexbox align={'flex-start'} gap={8} horizontal>
+            <Flexbox align={'center'} padding={8} width={20}>
+              <div className={styles.line}></div>
+            </Flexbox>
+            <Markdown className={styles.content} variant={'chat'}>
+              {content}
+            </Markdown>
+          </Flexbox>
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default History;

package/src/features/Conversation/types/index.tsx

@@ -9,7 +9,7 @@ import { type ActionsBarProps } from '../components/ChatItem/ActionsBar';
 
 export type OnActionsClick = (action: ActionEvent, message: ChatMessage) => void;
 export type OnAvatarsClick = (role: RenderRole) => ChatItemProps['onAvatarClick'];
-export type RenderRole = LLMRoleType | 'default' | string;
+export type RenderRole = LLMRoleType | 'default' | 'history' | string;
 export type RenderMessage = FC<ChatMessage & { editableContent: ReactNode }>;
 export type RenderBelowMessage = FC<ChatMessage>;
 export type RenderMessageExtra = FC<ChatMessage>;

package/src/locales/default/chat.ts

@@ -125,6 +125,7 @@ export default {
   },
   tokenDetails: {
     chats: '会话消息',
+    historySummary: '历史总结',
     rest: '剩余可用',
     systemRole: '角色设定',
     title: '上下文明细',

package/src/locales/default/setting.ts

@@ -177,8 +177,8 @@ export default {
       desc: '会话过程中是否自动创建话题，仅在临时话题中生效',
       title: '自动创建话题',
     },
-    enableCompressThreshold: {
-      title: '是否开启历史消息长度压缩阈值',
+    enableCompressHistory: {
+      title: '开启历史消息自动总结',
     },
     enableHistoryCount: {
       alias: '不限制',
@@ -380,6 +380,11 @@ export default {
       placeholder: '请输入自定义提示词',
       title: '自定义提示词',
     },
+    historyCompress: {
+      label: '会话历史模型',
+      modelDesc: '指定用于压缩会话历史的模型',
+      title: '自动总结会话历史',
+    },
     queryRewrite: {
       label: '提问重写模型',
       modelDesc: '指定用于优化用户提问的模型',

package/src/prompts/chatMessages/index.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest';
+
+import { ChatMessage } from '@/types/message';
+
+import { chatHistoryPrompts } from './index';
+
+describe('chatHistoryPrompts', () => {
+  // Test with empty messages array
+  it('should return empty chat history with empty messages', () => {
+    const messages: ChatMessage[] = [];
+    const result = chatHistoryPrompts(messages);
+
+    expect(result).toBe(`<chat_history>
+
+</chat_history>`);
+  });
+
+  // Test with single message
+  it('should format single message correctly', () => {
+    const messages = [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+    ] as ChatMessage[];
+    const result = chatHistoryPrompts(messages);
+
+    expect(result).toBe(`<chat_history>
+<user>Hello</user>
+</chat_history>`);
+  });
+
+  // Test with multiple messages
+  it('should format multiple messages correctly', () => {
+    const messages = [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        content: 'Hi there!',
+      },
+      {
+        role: 'user',
+        content: 'How are you?',
+      },
+    ] as ChatMessage[];
+    const result = chatHistoryPrompts(messages);
+
+    expect(result).toBe(`<chat_history>
+<user>Hello</user>
+<assistant>Hi there!</assistant>
+<user>How are you?</user>
+</chat_history>`);
+  });
+
+  // Test with messages containing special characters
+  it('should handle messages with special characters', () => {
+    const messages = [
+      {
+        role: 'user',
+        content: 'Hello & goodbye',
+      },
+      {
+        role: 'assistant',
+        content: '<test> & </test>',
+      },
+    ] as ChatMessage[];
+
+    const result = chatHistoryPrompts(messages);
+
+    expect(result).toBe(`<chat_history>
+<user>Hello & goodbye</user>
+<assistant><test> & </test></assistant>
+</chat_history>`);
+  });
+
+  // Test with messages containing multiple lines
+  it('should handle multi-line messages correctly', () => {
+    const messages = [
+      {
+        role: 'user',
+        content: 'Line 1\nLine 2',
+      },
+    ] as ChatMessage[];
+
+    const result = chatHistoryPrompts(messages);
+
+    expect(result).toBe(`<chat_history>
+<user>Line 1\nLine 2</user>
+</chat_history>`);
+  });
+});

package/src/prompts/chatMessages/index.ts

@@ -0,0 +1,11 @@
+import { ChatMessage } from '@/types/message';
+
+const chatMessage = (message: ChatMessage) => {
+  return `<${message.role}>${message.content}</${message.role}>`;
+};
+
+export const chatHistoryPrompts = (messages: ChatMessage[]) => {
+  return `<chat_history>
+${messages.map((m) => chatMessage(m)).join('\n')}
+</chat_history>`;
+};

package/src/prompts/systemRole/index.ts

@@ -0,0 +1,22 @@
+const historySummaryPrompt = (historySummary: string) => `<chat_history_summary>
+<docstring>Users may have lots of chat messages,here is the summary of the hisotry:</docstring>
+<summary>${historySummary}</summary>
+</chat_history_summary>
+`;
+
+/**
+ * Lobe Chat will inject some system instructions here
+ */
+export const BuiltinSystemRolePrompts = ({
+  welcome,
+  plugins,
+  historySummary,
+}: {
+  historySummary?: string;
+  plugins?: string;
+  welcome?: string;
+}) => {
+  return [welcome, plugins, historySummary ? historySummaryPrompt(historySummary) : '']
+    .filter(Boolean)
+    .join('\n\n');
+};

package/src/server/routers/lambda/topic.ts

@@ -121,7 +121,14 @@ export const topicRouter = router({
         value: z.object({
           favorite: z.boolean().optional(),
           messages: z.array(z.string()).optional(),
+          metadata: z
+            .object({
+              model: z.string().optional(),
+              provider: z.string().optional(),
+            })
+            .optional(),
           sessionId: z.string().optional(),
+          summary: z.string().optional(),
           title: z.string().optional(),
         }),
       }),