@lobehub/chat 0.155.5 → 0.155.6

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.155.6](https://github.com/lobehub/lobe-chat/compare/v0.155.5...v0.155.6)
+
+<sup>Released on **2024-05-08**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix editing long message issue.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix editing long message issue, closes [#2431](https://github.com/lobehub/lobe-chat/issues/2431) ([380d8da](https://github.com/lobehub/lobe-chat/commit/380d8da))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.155.5](https://github.com/lobehub/lobe-chat/compare/v0.155.4...v0.155.5)
 
 <sup>Released on **2024-05-08**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.155.5",
+  "version": "0.155.6",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx

@@ -13,6 +13,7 @@ import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors, preferenceSelectors } from '@/store/user/selectors';
 import { isMacOS } from '@/utils/platform';
@@ -60,7 +61,7 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
   const { theme, styles } = useStyles();
 
   const [loading, stopGenerateMessage] = useChatStore((s) => [
-    !!s.chatLoadingId,
+    chatSelectors.isAIGenerating(s),
     s.stopGenerateMessage,
   ]);
 

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.test.tsx

@@ -195,7 +195,7 @@ describe('<InputArea />', () => {
     it('does not send message when loading or shift key is pressed', () => {
       const sendMessageMock = vi.fn();
       act(() => {
-        useChatStore.setState({ chatLoadingId: '123', sendMessage: sendMessageMock });
+        useChatStore.setState({ chatLoadingIds: ['123'], sendMessage: sendMessageMock });
       });
 
       render(<InputArea setExpand={setExpandMock} />);
@@ -209,7 +209,7 @@ describe('<InputArea />', () => {
       const sendMessageMock = vi.fn();
       act(() => {
         useChatStore.setState({
-          chatLoadingId: '',
+          chatLoadingIds: [],
           inputMessage: 'abc',
           sendMessage: sendMessageMock,
         });
@@ -228,7 +228,7 @@ describe('<InputArea />', () => {
         const sendMessageMock = vi.fn();
         act(() => {
           useChatStore.setState({
-            chatLoadingId: '',
+            chatLoadingIds: [],
             inputMessage: '123',
             sendMessage: sendMessageMock,
           });
@@ -247,7 +247,7 @@ describe('<InputArea />', () => {
         const updateInputMessageMock = vi.fn();
         act(() => {
           useChatStore.setState({
-            chatLoadingId: '',
+            chatLoadingIds: [],
             inputMessage: 'Test',
             sendMessage: sendMessageMock,
             updateInputMessage: updateInputMessageMock,
@@ -271,7 +271,7 @@ describe('<InputArea />', () => {
         const sendMessageMock = vi.fn();
         act(() => {
           useChatStore.setState({
-            chatLoadingId: '',
+            chatLoadingIds: [],
             inputMessage: '123',
             sendMessage: sendMessageMock,
           });
@@ -295,7 +295,7 @@ describe('<InputArea />', () => {
         const updateInputMessageMock = vi.fn();
         act(() => {
           useChatStore.setState({
-            chatLoadingId: '',
+            chatLoadingIds: [],
             inputMessage: 'Test',
             sendMessage: sendMessageMock,
             updateInputMessage: updateInputMessageMock,

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
 import { isCommandPressed } from '@/utils/keyboard';
@@ -42,7 +43,7 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
   const isChineseInput = useRef(false);
 
   const [loading, value, updateInputMessage] = useChatStore((s) => [
-    !!s.chatLoadingId,
+    chatSelectors.isAIGenerating(s),
     s.inputMessage,
     s.updateInputMessage,
   ]);

package/src/app/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx

@@ -5,6 +5,7 @@ import { shallow } from 'zustand/shallow';
 import ModelTag from '@/components/ModelTag';
 import { useAgentStore } from '@/store/agent';
 import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
@@ -23,7 +24,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [defaultModel] = useAgentStore((s) => [s.defaultAgentConfig.model]);
 
   const [active] = useSessionStore((s) => [s.activeId === id]);
-  const [loading] = useChatStore((s) => [!!s.chatLoadingId && id === s.activeId]);
+  const [loading] = useChatStore((s) => [chatSelectors.isAIGenerating(s) && id === s.activeId]);
 
   const [pin, title, description, avatar, avatarBackground, updateAt, model, group] =
     useSessionStore((s) => {

package/src/components/ModelTag/ModelIcon.tsx

@@ -27,7 +27,7 @@ import {
   Stability,
   Tongyi,
   Wenxin,
-  ZeroOne,
+  Yi,
 } from '@lobehub/icons';
 import { memo } from 'react';
 
@@ -54,7 +54,7 @@ const ModelIcon = memo<ModelIconProps>(({ model, size = 12 }) => {
   if (model.includes('abab')) return <Minimax size={size} />;
   if (model.includes('mistral') || model.includes('mixtral')) return <Mistral size={size} />;
   if (model.includes('pplx') || model.includes('sonar')) return <Perplexity size={size} />;
-  if (model.includes('yi-')) return <ZeroOne size={size} />;
+  if (model.includes('yi-')) return <Yi size={size} />;
   if (model.startsWith('openrouter')) return <OpenRouter size={size} />; // only for Cinematika and Auto
   if (model.startsWith('openchat')) return <OpenChat size={size} />;
   if (model.includes('command')) return <Cohere size={size} />;

package/src/features/ChatInput/STT/browser.tsx

@@ -7,6 +7,7 @@ import { SWRConfiguration } from 'swr';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { ChatMessageError } from '@/types/message';
@@ -40,7 +41,7 @@ const BrowserSTT = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
 
   const [loading, updateInputMessage] = useChatStore((s) => [
-    !!s.chatLoadingId,
+    chatSelectors.isAIGenerating(s),
     s.updateInputMessage,
   ]);
 

package/src/features/ChatInput/STT/openai.tsx

@@ -10,6 +10,7 @@ import { API_ENDPOINTS } from '@/services/_url';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/slices/message/selectors';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { ChatMessageError } from '@/types/message';
@@ -51,7 +52,7 @@ const OpenaiSTT = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
 
   const [loading, updateInputMessage] = useChatStore((s) => [
-    !!s.chatLoadingId,
+    chatSelectors.isAIGenerating(s),
     s.updateInputMessage,
   ]);
 

package/src/features/ChatInput/useChatInput.ts

@@ -4,6 +4,7 @@ import { useCallback, useRef, useState } from 'react';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
 
@@ -18,7 +19,7 @@ export const useChatInput = () => {
   const canUpload = useUserStore(modelProviderSelectors.isModelEnabledUpload(model));
 
   const [loading, value, onInput, onStop] = useChatStore((s) => [
-    !!s.chatLoadingId,
+    chatSelectors.isAIGenerating(s),
     s.inputMessage,
     s.updateInputMessage,
     s.stopGenerateMessage,

package/src/features/ChatInput/useSend.ts

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 
 import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 import { SendMessageParams } from '@/store/chat/slices/message/action';
 import { filesSelectors, useFileStore } from '@/store/file';
 
@@ -17,7 +18,7 @@ export const useSendMessage = () => {
 
   return useCallback((params: UseSendMessageParams = {}) => {
     const store = useChatStore.getState();
-    if (!!store.chatLoadingId) return;
+    if (chatSelectors.isAIGenerating(store)) return;
     if (!store.inputMessage) return;
 
     const imageList = filesSelectors.imageUrlOrBase64List(useFileStore.getState());

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

@@ -1,10 +1,18 @@
 import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
+import { css, cx } from 'antd-style';
 import { LanguagesIcon, Play } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { localeOptions } from '@/locales/resources';
 
+const translateStyle = css`
+  .ant-dropdown-menu-sub {
+    overflow-y: scroll;
+    max-height: 400px;
+  }
+`;
+
 export const useCustomActions = () => {
   const { t } = useTranslation('chat');
 
@@ -16,6 +24,7 @@ export const useCustomActions = () => {
     icon: LanguagesIcon,
     key: 'translate',
     label: t('translate.action'),
+    popupClassName: cx(translateStyle),
   } as ActionIconGroupItems;
 
   const tts = {

package/src/features/Conversation/Extras/Assistant.tsx

@@ -5,6 +5,7 @@ import ModelTag from '@/components/ModelTag';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
 
 import { RenderMessageExtra } from '../types';
@@ -15,7 +16,7 @@ import Translate from './Translate';
 export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
   ({ extra, id, content }) => {
     const model = useAgentStore(agentSelectors.currentAgentModel);
-    const loading = useChatStore((s) => s.chatLoadingId === id);
+    const loading = useChatStore(chatSelectors.isMessageGenerating(id));
 
     const showModelTag = extra?.fromModel && model !== extra?.fromModel;
     const showTranslate = !!extra?.translate;

package/src/features/Conversation/Extras/User.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 
 import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
 
 import { RenderMessageExtra } from '../types';
@@ -9,7 +10,7 @@ import TTS from './TTS';
 import Translate from './Translate';
 
 export const UserMessageExtra: RenderMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
-  const loading = useChatStore((s) => s.chatLoadingId === id);
+  const loading = useChatStore(chatSelectors.isMessageGenerating(id));
 
   const showTranslate = !!extra?.translate;
   const showTTS = !!extra?.tts;

package/src/features/Conversation/components/AutoScroll.tsx

@@ -11,7 +11,7 @@ interface AutoScrollProps {
   onScrollToBottom: (type: 'auto' | 'click') => void;
 }
 const AutoScroll = memo<AutoScrollProps>(({ atBottom, isScrolling, onScrollToBottom }) => {
-  const trackVisibility = useChatStore((s) => !!s.chatLoadingId);
+  const trackVisibility = useChatStore(chatSelectors.isAIGenerating);
   const str = useChatStore(chatSelectors.chatsMessageString);
 
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 import { AlertProps, ChatItem } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ReactNode, memo, useCallback, useMemo, useState } from 'react';
+import { ReactNode, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAgentStore } from '@/store/agent';
@@ -41,7 +41,6 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
   const fontSize = useUserStore((s) => settingsSelectors.currentSettings(s).fontSize);
   const { t } = useTranslation('common');
   const { styles, cx } = useStyles();
-  const [editing, setEditing] = useState(false);
   const [type = 'chat'] = useAgentStore((s) => {
     const config = agentSelectors.currentAgentConfig(s);
     return [config.displayMode];
@@ -58,12 +57,14 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
 
   const historyLength = useChatStore((s) => chatSelectors.currentChats(s).length);
 
-  const [loading, updateMessageContent] = useChatStore((s) => [
-    s.chatLoadingId === id || s.messageLoadingIds.includes(id),
-    s.modifyMessageContent,
-  ]);
-
-  const [isMessageLoading] = useChatStore((s) => [s.messageLoadingIds.includes(id)]);
+  const [isMessageLoading, generating, editing, toggleMessageEditing, updateMessageContent] =
+    useChatStore((s) => [
+      chatSelectors.isMessageLoading(id)(s),
+      chatSelectors.isMessageGenerating(id)(s),
+      chatSelectors.isMessageEditing(id)(s),
+      s.toggleMessageEditing,
+      s.modifyMessageContent,
+    ]);
 
   const onAvatarsClick = useAvatarsClick();
 
@@ -115,14 +116,21 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
       <>
         <HistoryDivider enable={enableHistoryDivider} />
         <ChatItem
-          actions={<ActionsBar index={index} setEditing={setEditing} />}
+          actions={
+            <ActionsBar
+              index={index}
+              setEditing={(edit) => {
+                toggleMessageEditing(id, edit);
+              }}
+            />
+          }
           avatar={item.meta}
           className={cx(styles.message, isMessageLoading && styles.loading)}
           editing={editing}
           error={error}
           errorMessage={<ErrorMessageExtra data={item} />}
           fontSize={fontSize}
-          loading={loading}
+          loading={generating}
           message={item.content}
           messageExtra={<MessageExtra data={item} />}
           onAvatarClick={onAvatarsClick?.(item.role)}
@@ -130,10 +138,12 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
           onDoubleClick={(e) => {
             if (item.id === 'default' || item.error) return;
             if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
-              setEditing(true);
+              toggleMessageEditing(id, true);
             }
           }}
-          onEditingChange={setEditing}
+          onEditingChange={(edit) => {
+            toggleMessageEditing(id, edit);
+          }}
           placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
           primary={item.role === 'user'}
           renderMessage={(editableContent) => (

package/src/libs/agent-runtime/openrouter/index.ts

@@ -36,7 +36,10 @@ export const LobeOpenRouterAI = LobeOpenAICompatibleFactory({
             ? model.top_provider.max_completion_tokens
             : undefined,
         tokens: model.context_length,
-        vision: model.description.includes('vision') || model.id.includes('vision'),
+        vision:
+          model.description.includes('vision') ||
+          model.description.includes('multimodal') ||
+          model.id.includes('vision'),
       };
     },
   },

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;