@lobehub/chat 1.32.4 → 1.32.5

package/src/features/Portal/components/Header.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { XIcon } from 'lucide-react';
+import { ReactNode, memo } from 'react';
+
+import SidebarHeader from '@/components/SidebarHeader';
+import { useChatStore } from '@/store/chat';
+
+const Header = memo<{ title: ReactNode }>(({ title }) => {
+  const [toggleInspector] = useChatStore((s) => [s.togglePortal]);
+
+  return (
+    <SidebarHeader
+      actions={
+        <ActionIcon
+          icon={XIcon}
+          onClick={() => {
+            toggleInspector(false);
+          }}
+        />
+      }
+      style={{ paddingBlock: 8, paddingInline: 8 }}
+      title={title}
+    />
+  );
+});
+
+export default Header;

package/src/features/Portal/router.tsx

@@ -4,13 +4,32 @@ import { memo } from 'react';
 
 import { Artifacts } from './Artifacts';
 import { FilePreview } from './FilePreview';
-import { HomeBody, HomeHeader } from './Home';
+import { HomeBody, HomeTitle } from './Home';
 import { MessageDetail } from './MessageDetail';
 import { Plugins } from './Plugins';
+import Header from './components/Header';
 import { PortalImpl } from './type';
 
 const items: PortalImpl[] = [MessageDetail, Artifacts, Plugins, FilePreview];
 
+export const PortalTitle = memo(() => {
+  const enabledList: boolean[] = [];
+
+  for (const item of items) {
+    const enabled = item.useEnable();
+    enabledList.push(enabled);
+  }
+
+  for (const [i, element] of enabledList.entries()) {
+    const Title = items[i].Title;
+    if (element) {
+      return <Title />;
+    }
+  }
+
+  return <HomeTitle />;
+});
+
 export const PortalHeader = memo(() => {
   const enabledList: boolean[] = [];
 
@@ -21,12 +40,12 @@ export const PortalHeader = memo(() => {
 
   for (const [i, element] of enabledList.entries()) {
     const Header = items[i].Header;
-    if (element) {
+    if (element && Header) {
       return <Header />;
     }
   }
 
-  return <HomeHeader />;
+  return <Header title={<PortalTitle />} />;
 });
 
 const PortalBody = memo(() => {

package/src/features/Portal/type.ts

@@ -2,6 +2,8 @@ import { FC } from 'react';
 
 export interface PortalImpl {
   Body: FC;
-  Header: FC;
+  Header?: FC;
+  Title: FC;
+  onClose?: () => void;
   useEnable: () => boolean;
 }

package/src/features/{Conversation/components → ShareModal/ShareImage}/ChatList/index.tsx

@@ -1,18 +1,17 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { ChatItem } from '@/features/Conversation';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 
-import Item from '../ChatItem';
-
 const ChatList = memo(() => {
-  const ids = useChatStore(chatSelectors.currentChatIDsWithGuideMessage);
+  const ids = useChatStore(chatSelectors.mainDisplayChatIDs);
 
   return (
     <Flexbox height={'100%'} style={{ paddingTop: 24, position: 'relative' }}>
       {ids.map((id, index) => (
-        <Item id={id} index={index} key={id} />
+        <ChatItem id={id} index={index} key={id} />
       ))}
     </Flexbox>
   );

package/src/features/ShareModal/ShareImage/Preview.tsx

@@ -6,7 +6,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import PluginTag from '@/app/(main)/chat/(workspace)/features/PluginTag';
 import { ProductLogo } from '@/components/Branding';
-import ChatList from '@/features/Conversation/components/ChatList';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useSessionStore } from '@/store/session';
@@ -14,6 +13,7 @@ import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selector
 
 import pkg from '../../../../package.json';
 import { useContainerStyles } from '../style';
+import ChatList from './ChatList';
 import { useStyles } from './style';
 import { FieldType } from './type';
 

package/src/features/ShareModal/ShareJSON/index.tsx

@@ -46,7 +46,7 @@ const ShareImage = memo(() => {
   ];
 
   const systemRole = useAgentStore(agentSelectors.currentAgentSystemRole);
-  const messages = useChatStore(chatSelectors.currentChats, isEqual);
+  const messages = useChatStore(chatSelectors.activeBaseChats, isEqual);
   const data = generateMessages({ ...fieldValue, messages, systemRole });
   const content = JSON.stringify(data, null, 2);
 

package/src/features/ShareModal/ShareText/index.tsx

@@ -62,7 +62,7 @@ const ShareText = memo(() => {
   ];
 
   const [systemRole] = useAgentStore((s) => [agentSelectors.currentAgentSystemRole(s)]);
-  const messages = useChatStore(chatSelectors.currentChats, isEqual);
+  const messages = useChatStore(chatSelectors.activeBaseChats, isEqual);
   const topic = useChatStore(topicSelectors.currentActiveTopic, isEqual);
 
   const title = topic?.title || t('shareModal.exportTitle');

package/src/layout/GlobalProvider/Debug.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import Script from 'next/script';
+import React, { memo } from 'react';
+
+const Debug = memo(() => {
+  const searchParams = useSearchParams();
+
+  const debug = searchParams.get('debug');
+
+  return !!debug && <Script src="https://unpkg.com/react-scan/dist/auto.global.js" />;
+});
+
+export default Debug;

package/src/layout/GlobalProvider/index.tsx

@@ -18,6 +18,7 @@ import { getAntdLocale } from '@/utils/locale';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import AppTheme from './AppTheme';
+import Debug from './Debug';
 import Locale from './Locale';
 import QueryProvider from './Query';
 import StoreInitialization from './StoreInitialization';
@@ -85,6 +86,7 @@ const GlobalLayout = async ({ children }: PropsWithChildren) => {
             <StoreInitialization />
           </ServerConfigStoreProvider>
           <DebugUI />
+          <Debug />
         </AppTheme>
       </Locale>
     </StyleRegistry>

package/src/store/chat/slices/aiChat/actions/generateAIChat.ts

@@ -148,7 +148,7 @@ export const generateAIChat: StateCreator<
     // if autoCreateTopic is enabled, check to whether we need to create a topic
     if (!onlyAddUserMessage && !activeTopicId && agentConfig.enableAutoCreateTopic) {
       // check activeTopic and then auto create topic
-      const chats = chatSelectors.currentChats(get());
+      const chats = chatSelectors.activeBaseChats(get());
 
       // we will add two messages (user and assistant), so the finial length should +2
       const featureLength = chats.length + 2;
@@ -207,7 +207,7 @@ export const generateAIChat: StateCreator<
     }
 
     // Get the current messages to generate AI response
-    const messages = chatSelectors.currentChats(get());
+    const messages = chatSelectors.mainDisplayChats(get());
     const userFiles = chatSelectors.currentUserFiles(get()).map((f) => f.id);
 
     await internal_coreProcessMessage(messages, id, {
@@ -223,7 +223,7 @@ export const generateAIChat: StateCreator<
 
       // check activeTopic and then auto update topic title
       if (newTopicId) {
-        const chats = chatSelectors.currentChats(get());
+        const chats = chatSelectors.activeBaseChats(get());
         await get().summaryTopicTitle(newTopicId, chats);
         return;
       }
@@ -231,7 +231,7 @@ export const generateAIChat: StateCreator<
       const topic = topicSelectors.currentActiveTopic(get());
 
       if (topic && !topic.title) {
-        const chats = chatSelectors.currentChats(get());
+        const chats = chatSelectors.activeBaseChats(get());
         await get().summaryTopicTitle(topic.id, chats);
       }
     };
@@ -484,7 +484,7 @@ export const generateAIChat: StateCreator<
 
   internal_resendMessage: async (messageId, traceId) => {
     // 1. 构造所有相关的历史记录
-    const chats = chatSelectors.currentChats(get());
+    const chats = chatSelectors.mainDisplayChats(get());
 
     const currentIndex = chats.findIndex((c) => c.id === messageId);
     if (currentIndex < 0) return;

package/src/store/chat/slices/message/action.ts

@@ -128,7 +128,7 @@ export const chatMessage: StateCreator<
     if (message.tools) {
       const toolMessageIds = message.tools.flatMap((tool) => {
         const messages = chatSelectors
-          .currentChats(get())
+          .activeBaseChats(get())
           .filter((m) => m.tool_call_id === tool.id);
 
         return messages.map((m) => m.id);
@@ -252,7 +252,7 @@ export const chatMessage: StateCreator<
 
     if (!activeId) return;
 
-    const messages = messagesReducer(chatSelectors.currentChats(get()), payload);
+    const messages = messagesReducer(chatSelectors.activeBaseChats(get()), payload);
 
     const nextMap = { ...get().messagesMap, [chatSelectors.currentChatKey(get())]: messages };
 

package/src/store/chat/slices/message/selectors.test.ts

@@ -232,62 +232,6 @@ describe('chatSelectors', () => {
     });
   });
 
-  describe('currentChatsWithGuideMessage', () => {
-    it('should return existing messages except tool message', () => {
-      const state = merge(initialStore, {
-        messagesMap: {
-          [messageMapKey('someActiveId')]: mockMessages,
-        },
-        activeId: 'someActiveId',
-      });
-      const chats = chatSelectors.currentChatsWithGuideMessage({} as MetaData)(state);
-      expect(chats).toEqual(mockedChats.slice(0, 2));
-    });
-
-    it('should add a guide message if the chat is brand new', () => {
-      const state = merge(initialStore, { messages: [], activeId: 'someActiveId' });
-      const metaData = { title: 'Mock Agent', description: 'Mock Description' };
-
-      const chats = chatSelectors.currentChatsWithGuideMessage(metaData)(state);
-
-      expect(chats).toHaveLength(1);
-      expect(chats[0].content).toBeDefined();
-      expect(chats[0].meta.avatar).toEqual(DEFAULT_INBOX_AVATAR);
-      expect(chats[0].meta).toEqual(expect.objectContaining(metaData));
-    });
-
-    it('should use inbox message for INBOX_SESSION_ID', () => {
-      const state = merge(initialStore, { messages: [], activeId: INBOX_SESSION_ID });
-      const metaData = { title: 'Mock Agent', description: 'Mock Description' };
-
-      const chats = chatSelectors.currentChatsWithGuideMessage(metaData)(state);
-
-      expect(chats[0].content).toEqual(''); // Assuming translation returns a string containing this
-    });
-
-    it('should use agent default message for non-inbox sessions', () => {
-      const state = merge(initialStore, { messages: [], activeId: 'someActiveId' });
-      const metaData = { title: 'Mock Agent' };
-
-      const chats = chatSelectors.currentChatsWithGuideMessage(metaData)(state);
-
-      expect(chats[0].content).toMatch('agentDefaultMessage'); // Assuming translation returns a string containing this
-    });
-
-    it('should use agent default message without edit button for non-inbox sessions when agent is not editable', () => {
-      act(() => {
-        createServerConfigStore().setState({ featureFlags: { edit_agent: false } });
-      });
-
-      const state = merge(initialStore, { messages: [], activeId: 'someActiveId' });
-      const metaData = { title: 'Mock Agent' };
-
-      const chats = chatSelectors.currentChatsWithGuideMessage(metaData)(state);
-
-      expect(chats[0].content).toMatch('agentDefaultMessageWithoutEdit');
-    });
-  });
-
   describe('chatsMessageString', () => {
     it('should concatenate the contents of all messages returned by currentChatsWithHistoryConfig', () => {
       // Prepare a state with a few messages
@@ -415,36 +359,6 @@ describe('chatSelectors', () => {
     });
   });
 
-  describe('currentChatIDsWithGuideMessage', () => {
-    it('should return message IDs including guide message for empty chat', () => {
-      const state: Partial<ChatStore> = {
-        activeId: 'test-id',
-        messagesMap: {
-          [messageMapKey('test-id')]: [],
-        },
-      };
-      const result = chatSelectors.currentChatIDsWithGuideMessage(state as ChatStore);
-      expect(result).toHaveLength(1);
-      expect(result[0]).toBe('default');
-    });
-
-    it('should return existing message IDs for non-empty chat', () => {
-      const messages = [
-        { id: '1', role: 'user', content: 'Hello' },
-        { id: '2', role: 'assistant', content: 'Hi' },
-      ] as ChatMessage[];
-      const state: Partial<ChatStore> = {
-        activeId: 'test-id',
-        messagesMap: {
-          [messageMapKey('test-id')]: messages,
-        },
-      };
-      const result = chatSelectors.currentChatIDsWithGuideMessage(state as ChatStore);
-      expect(result).toHaveLength(2);
-      expect(result).toEqual(['1', '2']);
-    });
-  });
-
   describe('isToolCallStreaming', () => {
     it('should return true when tool call is streaming for given message and index', () => {
       const state: Partial<ChatStore> = {

package/src/store/chat/slices/message/selectors.ts

@@ -1,19 +1,13 @@
-import { t } from 'i18next';
-
-import { DEFAULT_INBOX_AVATAR, DEFAULT_USER_AVATAR } from '@/const/meta';
+import { DEFAULT_USER_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { messageMapKey } from '@/store/chat/utils/messageMapKey';
-import { featureFlagsSelectors } from '@/store/serverConfig';
-import { createServerConfigStore } from '@/store/serverConfig/store';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
 import { userProfileSelectors } from '@/store/user/selectors';
 import { ChatFileItem, ChatMessage } from '@/types/message';
-import { MetaData } from '@/types/meta';
-import { merge } from '@/utils/merge';
 
 import { chatHelpers } from '../../helpers';
 import type { ChatStoreState } from '../../initialState';
@@ -38,8 +32,10 @@ const getMeta = (message: ChatMessage) => {
 
 const currentChatKey = (s: ChatStoreState) => messageMapKey(s.activeId, s.activeTopicId);
 
-// 当前激活的消息列表
-const currentChats = (s: ChatStoreState): ChatMessage[] => {
+/**
+ * Current active raw message list, include thread messages
+ */
+const activeBaseChats = (s: ChatStoreState): ChatMessage[] => {
   if (!s.activeId) return [];
 
   const messages = s.messagesMap[currentChatKey(s)] || [];
@@ -47,14 +43,54 @@ const currentChats = (s: ChatStoreState): ChatMessage[] => {
   return messages.map((i) => ({ ...i, meta: getMeta(i) }));
 };
 
+/**
+ * 排除掉所有 tool 消息，在展示时需要使用
+ */
+const activeBaseChatsWithoutTool = (s: ChatStoreState) => {
+  const messages = activeBaseChats(s);
+
+  return messages.filter((m) => m.role !== 'tool');
+};
+
+/**
+ * Main display chats
+ * 根据当前不同的状态，返回不同的消息列表
+ */
+const mainDisplayChats = (s: ChatStoreState): ChatMessage[] => {
+  // 如果没有 activeThreadId，则返回所有的主消息
+  return activeBaseChats(s);
+  // const mains = activeBaseChats(s).filter((m) => !m.threadId);
+  // if (!s.activeThreadId) return mains;
+  //
+  // const thread = s.threadMaps[s.activeTopicId!]?.find((t) => t.id === s.activeThreadId);
+  //
+  // if (!thread) return mains;
+  //
+  // const sourceIndex = mains.findIndex((m) => m.id === thread.sourceMessageId);
+  // const sliced = mains.slice(0, sourceIndex + 1);
+  //
+  // return [...sliced, ...activeBaseChats(s).filter((m) => m.threadId === s.activeThreadId)];
+};
+
+const mainDisplayChatIDs = (s: ChatStoreState) => {
+  return mainDisplayChats(s).map((s) => s.id);
+};
+
+const currentChatsWithHistoryConfig = (s: ChatStoreState): ChatMessage[] => {
+  const chats = activeBaseChats(s);
+  const config = agentSelectors.currentAgentChatConfig(useAgentStore.getState());
+
+  return chatHelpers.getSlicedMessagesWithConfig(chats, config);
+};
+
 const currentToolMessages = (s: ChatStoreState) => {
-  const messages = currentChats(s);
+  const messages = activeBaseChats(s);
 
   return messages.filter((m) => m.role === 'tool');
 };
 
 const currentUserMessages = (s: ChatStoreState) => {
-  const messages = currentChats(s);
+  const messages = activeBaseChats(s);
 
   return messages.filter((m) => m.role === 'user');
 };
@@ -68,84 +104,29 @@ const currentUserFiles = (s: ChatStoreState) => {
     .filter(Boolean) as ChatFileItem[];
 };
 
-const initTime = Date.now();
-
 const showInboxWelcome = (s: ChatStoreState): boolean => {
   const isInbox = s.activeId === INBOX_SESSION_ID;
   if (!isInbox) return false;
 
-  const data = currentChats(s);
+  const data = activeBaseChats(s);
   return data.length === 0;
 };
 
-// Custom message for new assistant initialization
-const currentChatsWithGuideMessage =
-  (meta: MetaData) =>
-  (s: ChatStoreState): ChatMessage[] => {
-    // skip tool message
-    const data = currentChats(s).filter((m) => m.role !== 'tool');
-
-    const { isAgentEditable } = featureFlagsSelectors(createServerConfigStore().getState());
-
-    const isBrandNewChat = data.length === 0;
-
-    if (!isBrandNewChat) return data;
-
-    const [activeId, isInbox] = [s.activeId, s.activeId === INBOX_SESSION_ID];
-
-    const inboxMsg = '';
-    const agentSystemRoleMsg = t('agentDefaultMessageWithSystemRole', {
-      name: meta.title || t('defaultAgent'),
-      ns: 'chat',
-      systemRole: meta.description,
-    });
-    const agentMsg = t(isAgentEditable ? 'agentDefaultMessage' : 'agentDefaultMessageWithoutEdit', {
-      name: meta.title || t('defaultAgent'),
-      ns: 'chat',
-      url: `/chat/settings?session=${activeId}`,
-    });
-
-    const emptyInboxGuideMessage = {
-      content: isInbox ? inboxMsg : !!meta.description ? agentSystemRoleMsg : agentMsg,
-      createdAt: initTime,
-      extra: {},
-      id: 'default',
-      meta: merge({ avatar: DEFAULT_INBOX_AVATAR }, meta),
-      role: 'assistant',
-      updatedAt: initTime,
-    } as ChatMessage;
-
-    return [emptyInboxGuideMessage];
-  };
-
-const currentChatIDsWithGuideMessage = (s: ChatStoreState) => {
-  const meta = sessionMetaSelectors.currentAgentMeta(useSessionStore.getState());
-
-  return currentChatsWithGuideMessage(meta)(s).map((s) => s.id);
-};
-
-const currentChatsWithHistoryConfig = (s: ChatStoreState): ChatMessage[] => {
-  const chats = currentChats(s);
-  const config = agentSelectors.currentAgentChatConfig(useAgentStore.getState());
-
-  return chatHelpers.getSlicedMessagesWithConfig(chats, config);
-};
-
 const chatsMessageString = (s: ChatStoreState): string => {
   const chats = currentChatsWithHistoryConfig(s);
   return chats.map((m) => m.content).join('');
 };
 
 const getMessageById = (id: string) => (s: ChatStoreState) =>
-  chatHelpers.getMessageById(currentChats(s), id);
+  chatHelpers.getMessageById(activeBaseChats(s), id);
 
 const getMessageByToolCallId = (id: string) => (s: ChatStoreState) => {
-  const messages = currentChats(s);
+  const messages = activeBaseChats(s);
   return messages.find((m) => m.tool_call_id === id);
 };
 const getTraceIdByMessageId = (id: string) => (s: ChatStoreState) => getMessageById(id)(s)?.traceId;
 
-const latestMessage = (s: ChatStoreState) => currentChats(s).at(-1);
+const latestMessage = (s: ChatStoreState) => activeBaseChats(s).at(-1);
 
 const currentChatLoadingState = (s: ChatStoreState) => !s.messagesInit;
 
@@ -187,12 +168,11 @@ const isSendButtonDisabledByMessage = (s: ChatStoreState) =>
   isInRAGFlow(s);
 
 export const chatSelectors = {
+  activeBaseChats,
+  activeBaseChatsWithoutTool,
   chatsMessageString,
-  currentChatIDsWithGuideMessage,
   currentChatKey,
   currentChatLoadingState,
-  currentChats,
-  currentChatsWithGuideMessage,
   currentChatsWithHistoryConfig,
   currentToolMessages,
   currentUserFiles,
@@ -211,5 +191,7 @@ export const chatSelectors = {
   isSendButtonDisabledByMessage,
   isToolCallStreaming,
   latestMessage,
+  mainDisplayChatIDs,
+  mainDisplayChats,
   showInboxWelcome,
 };

package/src/store/chat/slices/plugin/action.test.ts

@@ -149,7 +149,7 @@ describe('ChatPluginAction', () => {
     it('should update message content and trigger the ai message', async () => {
       // 设置模拟函数的返回值
       const mockCurrentChats: any[] = [];
-      vi.spyOn(chatSelectors, 'currentChats').mockReturnValue(mockCurrentChats);
+      vi.spyOn(chatSelectors, 'activeBaseChats').mockReturnValue(mockCurrentChats);
 
       // 设置初始状态
       const initialState = {
@@ -184,7 +184,7 @@ describe('ChatPluginAction', () => {
     it('should update message content and not trigger ai message', async () => {
       // 设置模拟函数的返回值
       const mockCurrentChats: any[] = [];
-      vi.spyOn(chatSelectors, 'currentChats').mockReturnValue(mockCurrentChats);
+      vi.spyOn(chatSelectors, 'activeBaseChats').mockReturnValue(mockCurrentChats);
 
       // 设置初始状态
       const initialState = {

package/src/store/chat/slices/plugin/action.ts

@@ -202,7 +202,7 @@ export const chatPlugin: StateCreator<
 
   triggerAIMessage: async ({ parentId, traceId }) => {
     const { internal_coreProcessMessage } = get();
-    const chats = chatSelectors.currentChats(get());
+    const chats = chatSelectors.activeBaseChats(get());
     await internal_coreProcessMessage(chats, parentId ?? chats.at(-1)!.id, { traceId });
   },
 

package/src/store/chat/slices/topic/action.ts

@@ -79,7 +79,7 @@ export const chatTopic: StateCreator<
   createTopic: async () => {
     const { activeId, internal_createTopic } = get();
 
-    const messages = chatSelectors.currentChats(get());
+    const messages = chatSelectors.activeBaseChats(get());
 
     set({ creatingTopic: true }, false, n('creatingTopic/start'));
     const topicId = await internal_createTopic({
@@ -94,7 +94,7 @@ export const chatTopic: StateCreator<
 
   saveToTopic: async () => {
     // if there is no message, stop
-    const messages = chatSelectors.currentChats(get());
+    const messages = chatSelectors.activeBaseChats(get());
     if (messages.length === 0) return;
 
     const { activeId, summaryTopicTitle, internal_createTopic } = get();