@lobehub/chat 0.155.4 → 0.155.6

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

@@ -365,6 +365,31 @@ describe('chatMessage actions', () => {
     });
   });
 
+  describe('toggleMessageEditing action', () => {
+    it('should add message id to messageEditingIds when editing is true', () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'message-id';
+
+      act(() => {
+        result.current.toggleMessageEditing(messageId, true);
+      });
+
+      expect(result.current.messageEditingIds).toContain(messageId);
+    });
+
+    it('should remove message id from messageEditingIds when editing is false', () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'abc';
+
+      act(() => {
+        result.current.toggleMessageEditing(messageId, true);
+        result.current.toggleMessageEditing(messageId, false);
+      });
+
+      expect(result.current.messageEditingIds).not.toContain(messageId);
+    });
+  });
+
   describe('internal_resendMessage action', () => {
     it('should resend a message by id and refresh messages', async () => {
       const { result } = renderHook(() => useChatStore());
@@ -701,7 +726,7 @@ describe('chatMessage actions', () => {
 
       const state = useChatStore.getState();
       expect(state.abortController).toBeInstanceOf(AbortController);
-      expect(state.chatLoadingId).toEqual('message-id');
+      expect(state.chatLoadingIds).toEqual(['message-id']);
     });
 
     it('should clear loading state and abort controller when loading is false', () => {
@@ -720,7 +745,7 @@ describe('chatMessage actions', () => {
 
       const state = useChatStore.getState();
       expect(state.abortController).toBeUndefined();
-      expect(state.chatLoadingId).toBeUndefined();
+      expect(state.chatLoadingIds).toEqual([]);
     });
 
     it('should attach beforeunload event listener when loading starts', () => {
@@ -760,4 +785,29 @@ describe('chatMessage actions', () => {
       expect(state.abortController).toEqual(abortController);
     });
   });
+
+  describe('internal_toggleMessageLoading action', () => {
+    it('should add message id to messageLoadingIds when loading is true', () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'message-id';
+
+      act(() => {
+        result.current.internal_toggleMessageLoading(true, messageId);
+      });
+
+      expect(result.current.messageLoadingIds).toContain(messageId);
+    });
+
+    it('should remove message id from messageLoadingIds when loading is false', () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'ddd-id';
+
+      act(() => {
+        result.current.internal_toggleMessageLoading(true, messageId);
+        result.current.internal_toggleMessageLoading(false, messageId);
+      });
+
+      expect(result.current.messageLoadingIds).not.toContain(messageId);
+    });
+  });
 });

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

@@ -72,7 +72,7 @@ export interface ChatMessageAction {
   stopGenerateMessage: () => void;
   copyMessage: (id: string, content: string) => Promise<void>;
   refreshMessages: () => Promise<void>;
-
+  toggleMessageEditing: (id: string, editing: boolean) => void;
   // =========  ↓ Internal Method ↓  ========== //
   // ========================================== //
   // ========================================== //
@@ -137,6 +137,18 @@ const preventLeavingFn = (e: BeforeUnloadEvent) => {
   e.returnValue = '你有正在生成中的请求，确定要离开吗？';
 };
 
+const toggleBooleanList = (ids: string[], id: string, loading: boolean) => {
+  return produce(ids, (draft) => {
+    if (loading) {
+      draft.push(id);
+    } else {
+      const index = draft.indexOf(id);
+
+      if (index >= 0) draft.splice(index, 1);
+    }
+  });
+};
+
 export const chatMessage: StateCreator<
   ChatStore,
   [['zustand/devtools', never]],
@@ -244,7 +256,13 @@ export const chatMessage: StateCreator<
 
     get().internal_traceMessage(id, { eventType: TraceEventType.CopyMessage });
   },
-
+  toggleMessageEditing: (id, editing) => {
+    set(
+      { messageEditingIds: toggleBooleanList(get().messageEditingIds, id, editing) },
+      false,
+      'toggleMessageEditing',
+    );
+  },
   stopGenerateMessage: () => {
     const { abortController, internal_toggleChatLoading } = get();
     if (!abortController) return;
@@ -518,11 +536,28 @@ export const chatMessage: StateCreator<
       window.addEventListener('beforeunload', preventLeavingFn);
 
       const abortController = new AbortController();
-      set({ abortController, chatLoadingId: id }, false, action);
+      set(
+        {
+          abortController,
+          chatLoadingIds: toggleBooleanList(get().messageLoadingIds, id!, loading),
+        },
+        false,
+        action,
+      );
 
       return abortController;
     } else {
-      set({ abortController: undefined, chatLoadingId: undefined }, false, action);
+      if (!id) {
+        set({ abortController: undefined, chatLoadingIds: [] }, false, action);
+      } else
+        set(
+          {
+            abortController: undefined,
+            chatLoadingIds: toggleBooleanList(get().messageLoadingIds, id, loading),
+          },
+          false,
+          action,
+        );
 
       window.removeEventListener('beforeunload', preventLeavingFn);
     }
@@ -530,15 +565,7 @@ export const chatMessage: StateCreator<
   internal_toggleMessageLoading: (loading, id) => {
     set(
       {
-        messageLoadingIds: produce(get().messageLoadingIds, (draft) => {
-          if (loading) {
-            draft.push(id);
-          } else {
-            const index = draft.indexOf(id);
-
-            if (index >= 0) draft.splice(index, 1);
-          }
-        }),
+        messageLoadingIds: toggleBooleanList(get().messageLoadingIds, id, loading),
       },
       false,
       'internal_toggleMessageLoading',

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

@@ -7,8 +7,18 @@ export interface ChatMessageState {
    * @description 当前正在编辑或查看的会话
    */
   activeId: string;
-  chatLoadingId?: string;
+  /**
+   * is the AI message is generating
+   */
+  chatLoadingIds: string[];
   inputMessage: string;
+  /**
+   * is the message is editing
+   */
+  messageEditingIds: string[];
+  /**
+   * is the message is creating or updating in the service
+   */
   messageLoadingIds: string[];
   messages: ChatMessage[];
   /**
@@ -19,7 +29,9 @@ export interface ChatMessageState {
 
 export const initialMessageState: ChatMessageState = {
   activeId: 'inbox',
+  chatLoadingIds: [],
   inputMessage: '',
+  messageEditingIds: [],
   messageLoadingIds: [],
   messages: [],
   messagesInit: false,

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

@@ -107,7 +107,7 @@ describe('chatSelectors', () => {
     it('should return the properties of a function message', () => {
       const state = merge(initialStore, {
         messages: mockMessages,
-        chatLoadingId: 'msg3', // Assuming this id represents a loading state
+        chatLoadingIds: ['msg3'], // Assuming this id represents a loading state
       });
       const props = chatSelectors.getFunctionMessageProps(mockMessages[2])(state);
       expect(props).toEqual({

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

@@ -123,7 +123,7 @@ const getFunctionMessageProps =
     command: plugin,
     content,
     id: plugin?.identifier,
-    loading: id === s.chatLoadingId,
+    loading: s.chatLoadingIds.includes(id),
     type: plugin?.type as LobePluginType,
   });
 
@@ -134,6 +134,11 @@ const latestMessage = (s: ChatStore) => currentChats(s).at(-1);
 
 const currentChatLoadingState = (s: ChatStore) => !s.messagesInit;
 
+const isMessageEditing = (id: string) => (s: ChatStore) => s.messageEditingIds.includes(id);
+const isMessageLoading = (id: string) => (s: ChatStore) => s.messageLoadingIds.includes(id);
+const isMessageGenerating = (id: string) => (s: ChatStore) => s.chatLoadingIds.includes(id);
+const isAIGenerating = (s: ChatStore) => s.chatLoadingIds.length > 0;
+
 export const chatSelectors = {
   chatsMessageString,
   currentChatIDsWithGuideMessage,
@@ -145,6 +150,10 @@ export const chatSelectors = {
   getFunctionMessageProps,
   getMessageById,
   getTraceIdByMessageId,
+  isAIGenerating,
+  isMessageEditing,
+  isMessageGenerating,
+  isMessageLoading,
   latestMessage,
   showInboxWelcome,
 };

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

@@ -131,7 +131,11 @@ describe('ChatPluginAction', () => {
       });
       expect(storeState.refreshMessages).toHaveBeenCalled();
       expect(storeState.triggerAIMessage).toHaveBeenCalled();
-      expect(storeState.internal_toggleChatLoading).toHaveBeenCalledWith(false);
+      expect(storeState.internal_toggleChatLoading).toHaveBeenCalledWith(
+        false,
+        'message-id',
+        'plugin/fetchPlugin/end',
+      );
     });
 
     it('should handle errors when the plugin API call fails', async () => {
@@ -159,7 +163,11 @@ describe('ChatPluginAction', () => {
       expect(chatService.runPluginApi).toHaveBeenCalledWith(pluginPayload, { trace: {} });
       expect(messageService.updateMessageError).toHaveBeenCalledWith(messageId, error);
       expect(storeState.refreshMessages).toHaveBeenCalled();
-      expect(storeState.internal_toggleChatLoading).toHaveBeenCalledWith(false);
+      expect(storeState.internal_toggleChatLoading).toHaveBeenCalledWith(
+        false,
+        'message-id',
+        'plugin/fetchPlugin/end',
+      );
       expect(storeState.triggerAIMessage).not.toHaveBeenCalled(); // 确保在错误情况下不调用此方法
     });
   });

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

@@ -135,7 +135,11 @@ export const chatPlugin: StateCreator<
     let data: string;
 
     try {
-      const abortController = internal_toggleChatLoading(true, id, n('fetchPlugin') as string);
+      const abortController = internal_toggleChatLoading(
+        true,
+        id,
+        n('fetchPlugin/start') as string,
+      );
 
       const message = chatSelectors.getMessageById(id)(get());
 
@@ -162,7 +166,7 @@ export const chatPlugin: StateCreator<
       data = '';
     }
 
-    internal_toggleChatLoading(false);
+    internal_toggleChatLoading(false, id, n('fetchPlugin/end') as string);
     // 如果报错则结束了
     if (!data) return;
 

package/src/store/global/action.ts

@@ -97,6 +97,8 @@ export const globalActionSlice: StateCreator<
         onSuccess: (preference) => {
           const nextPreference = merge(get().preference, preference);
 
+          set({ isPreferenceInit: true });
+
           if (isEqual(get().preference, nextPreference)) return;
 
           set({ preference: nextPreference }, false, n('initPreference'));

package/src/store/global/initialState.ts

@@ -50,6 +50,7 @@ export interface GlobalPreferenceState {
 export interface GlobalCommonState {
   hasNewVersion?: boolean;
   isMobile?: boolean;
+  isPreferenceInit?: boolean;
   latestVersion?: string;
   router?: AppRouterInstance;
   sidebarKey: SidebarTabKey;
@@ -59,6 +60,7 @@ export type GlobalState = GlobalCommonState & GlobalPreferenceState;
 
 export const initialState: GlobalState = {
   isMobile: false,
+  isPreferenceInit: false,
   preference: {
     expandSessionGroupKeys: [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default],
     inputHeight: 200,

package/src/styles/global.ts

@@ -1,22 +1,25 @@
 import { Theme, css } from 'antd-style';
 
-export default ({ prefixCls, token }: { prefixCls: string; token: Theme }) => css`
+// fix ios input keyboard
+// overflow: hidden;
+// ref: https://zhuanlan.zhihu.com/p/113855026
+export default ({ token }: { prefixCls: string; token: Theme }) => css`
   html,
   body,
-  #__next,
-  .${prefixCls}-app {
+  #__next {
     position: relative;
+
     overscroll-behavior: none;
-    height: 100% !important;
-    max-height: 100dvh !important;
+
+    height: 100%;
+    min-height: 100dvh;
+    max-height: 100dvh;
+
+    background: ${token.colorBgLayout};
   }
 
   * {
     scrollbar-color: ${token.colorFill} transparent;
     scrollbar-width: thin;
   }
-
-  p {
-    margin-bottom: 0;
-  }
 `;

package/src/styles/mobileHeader.ts

@@ -8,7 +8,7 @@ export const mobileHeaderSticky: CSSProperties = {
 };
 
 export const mobileHeaderFixed: CSSProperties = {
-  position: 'fixed',
+  position: 'absolute',
   top: 0,
   width: '100%',
   zIndex: 100,

package/src/app/(main)/(mobile)/me/features/AvatarBanner.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import { PropsWithChildren, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import UserAvatar from '@/features/User/UserAvatar';
-
-import { useStyles } from './style';
-
-export const AVATAR_SIZE = 80;
-
-const AvatarBanner = memo<PropsWithChildren>(({ children }) => {
-  const { styles } = useStyles();
-
-  return (
-    <>
-      <Flexbox align={'center'} className={styles.bannerBox} justify={'center'}>
-        <div className={styles.bannerImg}>
-          <UserAvatar shape={'square'} size={AVATAR_SIZE} />
-        </div>
-      </Flexbox>
-      <Flexbox className={styles.info}>{children}</Flexbox>
-    </>
-  );
-});
-
-export default AvatarBanner;

package/src/app/(main)/(mobile)/me/features/style.ts

@@ -1,29 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  bannerBox: css`
-    position: relative;
-
-    overflow: hidden;
-    flex: none;
-
-    width: 100%;
-    height: 100px;
-
-    background: ${token.colorFill};
-  `,
-  bannerImg: css`
-    position: absolute;
-    scale: 8;
-    filter: blur(6px) saturate(2);
-  `,
-  info: css`
-    position: relative;
-
-    margin-top: ${-token.borderRadiusLG}px;
-
-    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
-    border-top-left-radius: ${token.borderRadiusLG}px;
-    border-top-right-radius: ${token.borderRadiusLG}px;
-  `,
-}));

package/src/app/(main)/chat/(desktop)/features/Conversation.tsx

@@ -1,19 +0,0 @@
-import { memo } from 'react';
-
-import RawConversation from '@/features/Conversation';
-
-import TelemetryNotification from '../../features/TelemetryNotification';
-import ChatInput from './ChatInput';
-import HotKeys from './HotKeys';
-
-const Conversation = memo(() => {
-  return (
-    <>
-      <RawConversation chatInput={<ChatInput />} />
-      <HotKeys />
-      <TelemetryNotification />
-    </>
-  );
-});
-
-export default Conversation;

package/src/app/(main)/chat/(desktop)/index.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import ClientResponsiveContent from '@/components/client/ClientResponsiveContent';
-
-import ChatHeader from './features/ChatHeader';
-import Conversation from './features/Conversation';
-import SideBar from './features/SideBar';
-
-const Desktop = memo(() => (
-  <>
-    <ChatHeader />
-    <Flexbox flex={1} height={'calc(100% - 64px)'} horizontal>
-      <Conversation />
-      <SideBar />
-    </Flexbox>
-  </>
-));
-
-export default ClientResponsiveContent({ Desktop, Mobile: () => import('../(mobile)') });

package/src/app/(main)/chat/(mobile)/features/SessionList.tsx

@@ -1,17 +0,0 @@
-import { memo } from 'react';
-
-import SessionListContent from '../../features/SessionListContent';
-import SessionSearchBar from '../../features/SessionSearchBar';
-
-const Sessions = memo(() => {
-  return (
-    <>
-      <div style={{ padding: '8px 16px' }}>
-        <SessionSearchBar mobile />
-      </div>
-      <SessionListContent />
-    </>
-  );
-});
-
-export default Sessions;

package/src/app/(main)/chat/(mobile)/features/TopicList.tsx

@@ -1,29 +0,0 @@
-import { Modal } from '@lobehub/ui';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useGlobalStore } from '@/store/global';
-
-import TopicListContent from '../../features/TopicListContent';
-
-const Topics = memo(() => {
-  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
-    s.preference.mobileShowTopic,
-    s.toggleMobileTopic,
-  ]);
-
-  const { t } = useTranslation('chat');
-
-  return (
-    <Modal
-      allowFullscreen
-      onCancel={() => toggleConfig(false)}
-      open={showAgentSettings}
-      title={t('topic.title')}
-    >
-      <TopicListContent mobile />
-    </Modal>
-  );
-});
-
-export default Topics;

package/src/app/(main)/chat/(mobile)/index.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { memo, useEffect } from 'react';
-
-import MobileContentLayout from '@/components/server/MobileNavLayout';
-
-import SessionHeader from './features/SessionHeader';
-import SessionList from './features/SessionList';
-
-const ChatMobilePage = memo(() => {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.prefetch('/chat/mobile');
-    router.prefetch('/settings');
-  }, []);
-
-  return (
-    <MobileContentLayout header={<SessionHeader />} withNav>
-      <SessionList />
-    </MobileContentLayout>
-  );
-});
-
-export default ChatMobilePage;

package/src/app/(main)/chat/(mobile)/mobile/ChatHeader/index.tsx

@@ -1,56 +0,0 @@
-import { MobileNavBar } from '@lobehub/ui';
-import { useRouter } from 'next/navigation';
-import { memo, useState } from 'react';
-
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
-
-import SettingButton from '../../../features/SettingButton';
-import ShareButton from '../../../features/ShareButton';
-import ChatHeaderTitle from './ChatHeaderTitle';
-
-const MobileHeader = memo(() => {
-  const router = useRouter();
-  const [open, setOpen] = useState(false);
-
-  const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
-
-  // const items: MenuProps['items'] = [
-  //   {
-  //     icon: <Icon icon={Share2} />,
-  //     key: 'share',
-  //     label: t('share', { ns: 'common' }),
-  //     onClick: () => setOpen(true),
-  //   },
-  //   !isInbox && {
-  //     icon: <Icon icon={Settings} />,
-  //     key: 'settings',
-  //     label: t('header.session', { ns: 'setting' }),
-  //     onClick: () => router.push(pathString('/chat/settings', { hash: location.hash })),
-  //   },
-  // ].filter(Boolean) as MenuProps['items'];
-
-  return (
-    <MobileNavBar
-      center={<ChatHeaderTitle />}
-      onBackClick={() => router.push('/chat')}
-      right={
-        <>
-          <ShareButton mobile open={open} setOpen={setOpen} />
-          {isAgentEditable && <SettingButton mobile />}
-          {/*<Dropdown*/}
-          {/*  menu={{*/}
-          {/*    items,*/}
-          {/*  }}*/}
-          {/*  trigger={['click']}*/}
-          {/*>*/}
-          {/*  <ActionIcon icon={MoreHorizontal} />*/}
-          {/*</Dropdown>*/}
-        </>
-      }
-      showBackButton
-      style={{ width: '100%' }}
-    />
-  );
-});
-
-export default MobileHeader;

package/src/app/(main)/chat/(mobile)/mobile/page.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { memo } from 'react';
-
-import MobileContentLayout from '@/components/server/MobileNavLayout';
-import Conversation from '@/features/Conversation';
-
-import SessionHydration from '../../components/SessionHydration';
-import TelemetryNotification from '../../features/TelemetryNotification';
-import ChatInput from '../features/ChatInput';
-import ChatHeader from './ChatHeader';
-
-const TopicList = dynamic(() => import('../features/TopicList'));
-
-const Chat = memo(() => {
-  return (
-    <MobileContentLayout header={<ChatHeader />}>
-      <Conversation chatInput={<ChatInput />} mobile />
-      <TopicList />
-      <TelemetryNotification mobile />
-      <SessionHydration />
-    </MobileContentLayout>
-  );
-});
-export default Chat;

package/src/app/(main)/chat/_layout/Desktop/SessionList.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import { DraggablePanelBody } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-
-import FolderPanel from '@/features/FolderPanel';
-
-import SessionListContent from '../../features/SessionListContent';
-import Header from './SessionHeader';
-
-const useStyles = createStyles(({ stylish, css, cx }) =>
-  cx(
-    stylish.noScrollbar,
-    css`
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      padding: 8px 8px 0;
-    `,
-  ),
-);
-
-const Sessions = memo(() => {
-  const { styles } = useStyles();
-
-  return (
-    <FolderPanel>
-      <Header />
-      <DraggablePanelBody className={styles}>
-        <SessionListContent />
-      </DraggablePanelBody>
-    </FolderPanel>
-  );
-});
-
-Sessions.displayName = 'SessionsList';
-
-export default Sessions;

package/src/app/(main)/chat/_layout/Mobile/index.tsx

@@ -1,9 +0,0 @@
-import { LayoutProps } from '../type';
-
-const Layout = ({ children }: LayoutProps) => {
-  return children;
-};
-
-Layout.displayName = 'MobileChatLayout';
-
-export default Layout;