@lobehub/lobehub 2.0.0-next.8 → 2.0.0-next.9

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/V1Mobile/index.tsx

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
 import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 import ActionBar from './ActionBar';
 import Files from './Files';
@@ -37,7 +37,7 @@ const MobileChatInput = memo(() => {
   const { isLoading } = useInitAgentConfig();
 
   const [loading, value, onInput, onStop] = useChatStore((s) => [
-    chatSelectors.isAIGenerating(s),
+    messageStateSelectors.isAIGenerating(s),
     s.inputMessage,
     s.updateInputMessage,
     s.stopGenerateMessage,

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/V1Mobile/useSend.ts

@@ -6,7 +6,7 @@ import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
 import { getAgentStoreState } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
+import { chatSelectors, messageStateSelectors, topicSelectors } from '@/store/chat/selectors';
 import { fileChatSelectors, useFileStore } from '@/store/file';
 import { getUserStoreState } from '@/store/user';
 
@@ -26,17 +26,19 @@ export const useSendMessage = () => {
   const clearChatUploadFileList = useFileStore((s) => s.clearChatUploadFileList);
 
   const isUploadingFiles = useFileStore(fileChatSelectors.isUploadingFiles);
-  const isSendButtonDisabledByMessage = useChatStore(chatSelectors.isSendButtonDisabledByMessage);
+  const isSendButtonDisabledByMessage = useChatStore(
+    messageStateSelectors.isSendButtonDisabledByMessage,
+  );
 
   const canSend = !isUploadingFiles && !isSendButtonDisabledByMessage;
 
   const send = useCallback(async (params: UseSendMessageParams = {}) => {
     const store = useChatStore.getState();
-    if (chatSelectors.isAIGenerating(store)) return;
+    if (messageStateSelectors.isAIGenerating(store)) return;
 
     // if uploading file or send button is disabled by message, then we should not send the message
     const isUploadingFiles = fileChatSelectors.isUploadingFiles(useFileStore.getState());
-    const isSendButtonDisabledByMessage = chatSelectors.isSendButtonDisabledByMessage(
+    const isSendButtonDisabledByMessage = messageStateSelectors.isSendButtonDisabledByMessage(
       useChatStore.getState(),
     );
 

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/useSend.ts

@@ -5,7 +5,12 @@ import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
 import { getAgentStoreState } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { getChatStoreState, useChatStore } from '@/store/chat';
-import { aiChatSelectors, chatSelectors, topicSelectors } from '@/store/chat/selectors';
+import {
+  aiChatSelectors,
+  chatSelectors,
+  messageStateSelectors,
+  topicSelectors,
+} from '@/store/chat/selectors';
 import { fileChatSelectors, useFileStore } from '@/store/file';
 import { mentionSelectors, useMentionStore } from '@/store/mention';
 import { useSessionStore } from '@/store/session';
@@ -38,8 +43,8 @@ export const useSend = () => {
     s.addAIMessage,
     s.stopGenerateMessage,
     s.cancelSendMessageInServer,
-    chatSelectors.isAIGenerating(s),
-    chatSelectors.isSendButtonDisabledByMessage(s),
+    messageStateSelectors.isAIGenerating(s),
+    messageStateSelectors.isSendButtonDisabledByMessage(s),
     aiChatSelectors.isCurrentSendMessageLoading(s),
   ]);
   const { analytics } = useAnalytics();
@@ -68,7 +73,7 @@ export const useSend = () => {
       return;
     }
 
-    if (chatSelectors.isAIGenerating(store)) return;
+    if (messageStateSelectors.isAIGenerating(store)) return;
 
     const inputMessage = store.inputMessage;
     // 发送时再取一次最新的文件列表，防止闭包拿到旧值
@@ -127,7 +132,7 @@ export const useSend = () => {
 
   const stop = () => {
     const store = getChatStoreState();
-    const generating = chatSelectors.isAIGenerating(store);
+    const generating = messageStateSelectors.isAIGenerating(store);
 
     if (generating) {
       stopGenerateMessage();
@@ -165,8 +170,8 @@ export const useSendGroupMessage = () => {
     s.sendGroupMessage,
     s.updateInputMessage,
     s.stopGenerateMessage,
-    chatSelectors.isSendButtonDisabledByMessage(s),
-    chatSelectors.isCreatingMessage(s),
+    messageStateSelectors.isSendButtonDisabledByMessage(s),
+    messageStateSelectors.isCreatingMessage(s),
   ]);
 
   const isSupervisorThinking = useChatStore((s) =>
@@ -205,7 +210,7 @@ export const useSendGroupMessage = () => {
 
       if (
         chatSelectors.isSupervisorLoading(store.activeId)(store) ||
-        chatSelectors.isCreatingMessage(store)
+        messageStateSelectors.isCreatingMessage(store)
       )
         return;
 
@@ -287,8 +292,8 @@ export const useSendGroupMessage = () => {
 
   const stop = useCallback(() => {
     const store = getChatStoreState();
-    const isAgentGenerating = chatSelectors.isAIGenerating(store);
-    const isCreating = chatSelectors.isCreatingMessage(store);
+    const isAgentGenerating = messageStateSelectors.isAIGenerating(store);
+    const isCreating = messageStateSelectors.isCreatingMessage(store);
 
     if (isAgentGenerating) {
       stopGenerateMessage();

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

@@ -8,7 +8,7 @@ import { isDesktop } from '@/const/version';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
@@ -33,7 +33,9 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const openSessionInNewWindow = useGlobalStore((s) => s.openSessionInNewWindow);
 
   const [active] = useSessionStore((s) => [s.activeId === id]);
-  const [loading] = useChatStore((s) => [chatSelectors.isAIGenerating(s) && id === s.activeId]);
+  const [loading] = useChatStore((s) => [
+    messageStateSelectors.isAIGenerating(s) && id === s.activeId,
+  ]);
 
   const [pin, title, avatar, avatarBackground, updateAt, members, model, group, sessionType] =
     useSessionStore((s) => {

package/src/components/Thinking/index.tsx

@@ -1,8 +1,8 @@
 import { ChatCitationItem } from '@lobechat/types';
-import { ActionIcon, CopyButton, Icon, Markdown, ScrollShadow } from '@lobehub/ui';
+import { CopyButton, Icon, Markdown, ScrollShadow } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { AnimatePresence, motion } from 'framer-motion';
-import { AtomIcon, ChevronDown, ChevronRight } from 'lucide-react';
+import { AtomIcon } from 'lucide-react';
 import { rgba } from 'polished';
 import { CSSProperties, RefObject, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,8 +24,10 @@ const useStyles = createStyles(({ css, token }) => ({
     color: ${token.colorTextTertiary};
   `,
   header: css`
+    min-height: 32px;
     padding-block: 4px;
     padding-inline: 8px 4px;
+
     transition: background 0.2s ${token.motionEaseOut};
     transition: all 0.2s ${token.motionEaseOut};
 
@@ -165,7 +167,6 @@ const Thinking = memo<ThinkingProps>((props) => {
               <CopyButton content={content} size={'small'} title={t('copy', { ns: 'common' })} />
             </div>
           )}
-          <ActionIcon icon={showDetail ? ChevronDown : ChevronRight} size={'small'} />
         </Flexbox>
       </Flexbox>
       <AnimatePresence initial={false}>

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

@@ -34,8 +34,8 @@ const AgentPlugin = memo(() => {
     s.toggleAgentPlugin,
   ]);
 
-  const { showDalle, showMarket } = useServerConfigStore(featureFlagsSelectors);
-  const installedPlugins = useToolStore(toolSelectors.metaList(showDalle), isEqual);
+  const { showMarket } = useServerConfigStore(featureFlagsSelectors);
+  const installedPlugins = useToolStore(toolSelectors.metaList, isEqual);
 
   const { isLoading } = useFetchInstalledPlugins();
 

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

@@ -8,7 +8,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 { messageStateSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';
@@ -43,7 +43,7 @@ const BrowserSTT = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
 
   const [loading, updateInputMessage] = useChatStore((s) => [
-    chatSelectors.isAIGenerating(s),
+    messageStateSelectors.isAIGenerating(s),
     s.updateInputMessage,
   ]);
 

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

@@ -11,7 +11,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 { messageStateSelectors } from '@/store/chat/slices/message/selectors';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';
@@ -54,7 +54,7 @@ const OpenaiSTT = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
 
   const [loading, updateInputMessage] = useChatStore((s) => [
-    chatSelectors.isAIGenerating(s),
+    messageStateSelectors.isAIGenerating(s),
     s.updateInputMessage,
   ]);
 

package/src/features/ChatInput/ActionBar/Tools/useControls.tsx

@@ -9,7 +9,6 @@ import { useCheckPluginsIsInstalled } from '@/hooks/useCheckPluginsIsInstalled';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 import { builtinToolSelectors, pluginSelectors } from '@/store/tool/selectors';
 
@@ -24,12 +23,11 @@ export const useControls = ({
 }) => {
   const { t } = useTranslation('setting');
   const list = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
-  const { showDalle } = useServerConfigStore(featureFlagsSelectors);
   const [checked, togglePlugin] = useAgentStore((s) => [
     agentSelectors.currentAgentPlugins(s),
     s.togglePlugin,
   ]);
-  const builtinList = useToolStore(builtinToolSelectors.metaList(showDalle), isEqual);
+  const builtinList = useToolStore(builtinToolSelectors.metaList, isEqual);
   const enablePluginCount = useAgentStore(
     (s) =>
       agentSelectors

package/src/features/Conversation/Error/ErrorJsonViewer.tsx

@@ -4,18 +4,19 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 interface ErrorJSONViewerProps {
+  block?: boolean;
   error?: ChatMessageError | null;
   id: string;
 }
 
-const ErrorJsonViewer = memo<ErrorJSONViewerProps>(({ error, id }) => {
+const ErrorJsonViewer = memo<ErrorJSONViewerProps>(({ error, id, block }) => {
   const errorBody = error?.body || error;
 
   if (!errorBody) return;
 
   return (
-    <Flexbox id={id} style={{ maxWidth: 600 }}>
-      <Highlighter actionIconSize={'small'} language={'json'}>
+    <Flexbox id={id} style={{ maxWidth: block ? '100%' : 600, width: block ? '100%' : undefined }}>
+      <Highlighter actionIconSize={'small'} language={'json'} wrap>
         {JSON.stringify(errorBody, null, 2)}
       </Highlighter>
     </Flexbox>

package/src/features/Conversation/Error/OllamaBizError/index.tsx

@@ -1,4 +1,4 @@
-import { UIChatMessage } from '@lobechat/types';
+import { ChatMessageError } from '@lobechat/types';
 import { Skeleton } from 'antd';
 import dynamic from 'next/dynamic';
 import { memo } from 'react';
@@ -24,7 +24,12 @@ interface OllamaErrorResponse {
 
 const UNRESOLVED_MODEL_REGEXP = /model "([\w+,-_]+)" not found/;
 
-const OllamaBizError = memo<UIChatMessage>(({ error, id }) => {
+interface OllamaBizErrorProps {
+  error?: ChatMessageError | null;
+  id: string;
+}
+
+const OllamaBizError = memo<OllamaBizErrorProps>(({ error, id }) => {
   const errorBody: OllamaErrorResponse = (error as any)?.body;
 
   const errorMessage = errorBody.error?.message;

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

@@ -1,5 +1,5 @@
 import { AgentRuntimeErrorType, ILobeAgentRuntimeErrorType } from '@lobechat/model-runtime';
-import { ChatErrorType, ChatMessageError, ErrorType, UIChatMessage } from '@lobechat/types';
+import { ChatErrorType, ChatMessageError, ErrorType } from '@lobechat/types';
 import { IPluginErrorType } from '@lobehub/chat-plugin-sdk';
 import type { AlertProps } from '@lobehub/ui';
 import { Skeleton } from 'antd';
@@ -15,6 +15,11 @@ import ErrorJsonViewer from './ErrorJsonViewer';
 import InvalidAccessCode from './InvalidAccessCode';
 import { ErrorActionContainer } from './style';
 
+interface ErrorMessageData {
+  error?: ChatMessageError | null;
+  id: string;
+}
+
 const loading = () => <Skeleton active />;
 
 const OllamaBizError = dynamic(() => import('./OllamaBizError'), { loading, ssr: false });
@@ -87,7 +92,12 @@ export const useErrorContent = (error: any) => {
   }, [error]);
 };
 
-const ErrorMessageExtra = memo<{ data: UIChatMessage }>(({ data }) => {
+interface ErrorExtraProps {
+  block?: boolean;
+  data: ErrorMessageData;
+}
+
+const ErrorMessageExtra = memo<ErrorExtraProps>(({ data, block }) => {
   const error = data.error as ChatMessageError;
   if (!error?.type) return;
 
@@ -123,10 +133,10 @@ const ErrorMessageExtra = memo<{ data: UIChatMessage }>(({ data }) => {
     return <ChatInvalidAPIKey id={data.id} provider={data.error?.body?.provider} />;
   }
 
-  return <ErrorJsonViewer error={data.error} id={data.id} />;
+  return <ErrorJsonViewer block={block} error={data.error} id={data.id} />;
 });
 
-export default memo<{ data: UIChatMessage }>(({ data }) => (
+export default memo<ErrorExtraProps>(({ data, block }) => (
   <Suspense
     fallback={
       <ErrorActionContainer>
@@ -134,6 +144,6 @@ export default memo<{ data: UIChatMessage }>(({ data }) => (
       </ErrorActionContainer>
     }
   >
-    <ErrorMessageExtra data={data} />
+    <ErrorMessageExtra block={block} data={data} />
   </Suspense>
 ));

package/src/features/Conversation/MarkdownElements/LobeArtifact/Render/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
+import { chatPortalSelectors, messageStateSelectors } from '@/store/chat/selectors';
 import { dotLoading } from '@/styles/loading';
 
 import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
@@ -66,7 +66,7 @@ const Render = memo<ArtifactProps>(({ identifier, title, type, language, childre
   const { message } = App.useApp();
   const [isGenerating, isArtifactTagClosed, openArtifact, closeArtifact] = useChatStore((s) => {
     return [
-      chatSelectors.isMessageGenerating(id)(s),
+      messageStateSelectors.isMessageGenerating(id)(s),
       chatPortalSelectors.isArtifactTagClosed(id)(s),
       s.openArtifact,
       s.closeArtifact,

package/src/features/Conversation/Messages/Assistant/Extra/index.tsx

@@ -8,7 +8,7 @@ import TTS from '@/features/Conversation/components/Extras/TTS';
 import Translate from '@/features/Conversation/components/Extras/Translate';
 import Usage from '@/features/Conversation/components/Extras/Usage';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 interface AssistantMessageExtraProps {
   content: string;
@@ -20,7 +20,7 @@ interface AssistantMessageExtraProps {
 
 export const AssistantMessageExtra = memo<AssistantMessageExtraProps>(
   ({ extra, id, content, metadata, tools }) => {
-    const loading = useChatStore(chatSelectors.isMessageGenerating(id));
+    const loading = useChatStore(messageStateSelectors.isMessageGenerating(id));
 
     return (
       <Flexbox gap={8} style={{ marginTop: !!tools?.length ? 8 : 4 }}>

package/src/features/Conversation/Messages/Assistant/MessageContent.tsx

@@ -4,7 +4,7 @@ import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
-import { aiChatSelectors, chatSelectors } from '@/store/chat/selectors';
+import { aiChatSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import { DefaultMessage } from '../Default';
 import ImageFileListViewer from '../User/ImageFileListViewer';
@@ -19,8 +19,10 @@ export const AssistantMessageContent = memo<
     editableContent: ReactNode;
   }
 >(({ id, tools, content, chunksList, search, imageList, ...props }) => {
-  const editing = useChatStore(chatSelectors.isMessageEditing(id));
-  const generating = useChatStore(chatSelectors.isMessageGenerating(id));
+  const [editing, generating] = useChatStore((s) => [
+    messageStateSelectors.isMessageEditing(id)(s),
+    messageStateSelectors.isMessageGenerating(id)(s),
+  ]);
 
   const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
 

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/BuiltinPluginTitle.tsx

@@ -5,7 +5,7 @@ import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 import { shinyTextStylish } from '@/styles/loading';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -38,7 +38,7 @@ const BuiltinPluginTitle = memo<BuiltinPluginTitleProps>(
     const { styles } = useStyles();
 
     const isLoading = useChatStore(
-      chatSelectors.isToolApiNameShining(messageId, index, toolCallId),
+      messageStateSelectors.isToolApiNameShining(messageId, index, toolCallId),
     );
 
     return (

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/ToolTitle.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 import { shinyTextStylish } from '@/styles/loading';
@@ -43,7 +43,9 @@ const ToolTitle = memo<ToolTitleProps>(({ identifier, messageId, index, apiName,
   const { t } = useTranslation('plugin');
   const { styles } = useStyles();
 
-  const isLoading = useChatStore(chatSelectors.isToolApiNameShining(messageId, index, toolCallId));
+  const isLoading = useChatStore(
+    messageStateSelectors.isToolApiNameShining(messageId, index, toolCallId),
+  );
 
   const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 

package/src/features/Conversation/Messages/Assistant/Tool/Render/CustomRender.tsx

@@ -10,7 +10,7 @@ import { Flexbox } from 'react-layout-kit';
 import PluginResult from '@/features/Conversation/Messages/Assistant/Tool/Inspector/PluginResult';
 import PluginRender from '@/features/PluginsUI/Render';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 import Arguments from './Arguments';
 import KeyValueEditor from './KeyValueEditor';
@@ -43,7 +43,7 @@ const CustomRender = memo<CustomRenderProps>(
     tool_call_id,
   }) => {
     const { t } = useTranslation(['tool', 'common']);
-    const [loading] = useChatStore((s) => [chatSelectors.isPluginApiInvoking(id)(s)]);
+    const [loading] = useChatStore((s) => [messageStateSelectors.isPluginApiInvoking(id)(s)]);
     const [isEditing, setIsEditing] = useState(false);
     const { message } = App.useApp();
     const [updatePluginArguments, reInvokeToolMessage] = useChatStore((s) => [

package/src/features/Conversation/Messages/Assistant/Tool/Render/index.tsx

@@ -3,7 +3,7 @@ import isEqual from 'fast-deep-equal';
 import { Suspense, memo } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { chatSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import CustomRender from './CustomRender';
 import ErrorResponse from './ErrorResponse';
@@ -31,7 +31,7 @@ const Render = memo<RenderProps>(
     identifier,
     apiName,
   }) => {
-    const loading = useChatStore(chatSelectors.isToolCallStreaming(messageId, toolIndex));
+    const loading = useChatStore(messageStateSelectors.isToolCallStreaming(messageId, toolIndex));
     const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(toolCallId), isEqual);
 
     if (loading || !toolMessage) return null;

package/src/features/Conversation/Messages/Assistant/Tool/index.tsx

@@ -3,7 +3,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import AnimatedCollapsed from '@/components/AnimatedCollapsed';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 import Inspectors from './Inspector';
 import Render from './Render';
@@ -24,7 +24,7 @@ const Tool = memo<InspectorProps>(
   ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, payload, type }) => {
     const [showDetail, setShowDetail] = useState(type !== 'mcp');
     const [showPluginRender, setShowPluginRender] = useState(false);
-    const isLoading = useChatStore(chatSelectors.isInToolsCalling(messageId, index));
+    const isLoading = useChatStore(messageStateSelectors.isInToolsCalling(messageId, index));
 
     useEffect(() => {
       if (type !== 'mcp') return;

package/src/features/Conversation/Messages/Assistant/index.tsx

@@ -19,7 +19,7 @@ import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/slices/message/selectors';
 import { chatGroupSelectors, useChatGroupStore } from '@/store/chatGroup';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
@@ -81,9 +81,9 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
   );
 
   const [generating, isInRAGFlow, editing] = useChatStore((s) => [
-    chatSelectors.isMessageGenerating(id)(s),
-    chatSelectors.isMessageInRAGFlow(id)(s),
-    chatSelectors.isMessageEditing(id)(s),
+    messageStateSelectors.isMessageGenerating(id)(s),
+    messageStateSelectors.isMessageInRAGFlow(id)(s),
+    messageStateSelectors.isMessageEditing(id)(s),
   ]);
 
   const { styles } = useStyles({

package/src/features/Conversation/Messages/Default.tsx

@@ -4,7 +4,7 @@ import { ReactNode, memo } from 'react';
 import BubblesLoading from '@/components/BubblesLoading';
 import { LOADING_FLAT } from '@/const/message';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 export const DefaultMessage = memo<
   UIChatMessage & {
@@ -13,7 +13,7 @@ export const DefaultMessage = memo<
     isToolCallGenerating?: boolean;
   }
 >(({ id, editableContent, content, isToolCallGenerating, addIdOnDOM = true }) => {
-  const editing = useChatStore(chatSelectors.isMessageEditing(id));
+  const editing = useChatStore(messageStateSelectors.isMessageEditing(id));
 
   if (isToolCallGenerating) return;
 

package/src/features/Conversation/Messages/User/Extra.tsx

@@ -5,7 +5,7 @@ import ExtraContainer from '@/features/Conversation/components/Extras/ExtraConta
 import TTS from '@/features/Conversation/components/Extras/TTS';
 import Translate from '@/features/Conversation/components/Extras/Translate';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 interface UserMessageExtraProps {
   content: string;
@@ -13,7 +13,7 @@ interface UserMessageExtraProps {
   id: string;
 }
 export const UserMessageExtra = memo<UserMessageExtraProps>(({ extra, id, content }) => {
-  const loading = useChatStore(chatSelectors.isMessageGenerating(id));
+  const loading = useChatStore(messageStateSelectors.isMessageGenerating(id));
 
   const showTranslate = !!extra?.translate;
   const showTTS = !!extra?.tts;

package/src/features/Conversation/Messages/User/index.tsx

@@ -15,7 +15,7 @@ import { useUserAvatar } from '@/hooks/useUserAvatar';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
@@ -55,9 +55,9 @@ const UserMessage = memo<UserMessageProps>((props) => {
   const displayMode = useAgentStore(agentChatConfigSelectors.displayMode);
 
   const [editing, generating, isInRAGFlow] = useChatStore((s) => [
-    chatSelectors.isMessageEditing(id)(s),
-    chatSelectors.isMessageGenerating(id)(s),
-    chatSelectors.isMessageInRAGFlow(id)(s),
+    messageStateSelectors.isMessageEditing(id)(s),
+    messageStateSelectors.isMessageGenerating(id)(s),
+    messageStateSelectors.isMessageInRAGFlow(id)(s),
   ]);
 
   const loading = isInRAGFlow || generating;

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

@@ -1,17 +1,17 @@
 'use client';
 
+import { isDesktop } from '@lobechat/const';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { isDesktop } from '@/const/version';
 import {
   removeVirtuosoVisibleItem,
   upsertVirtuosoVisibleItem,
 } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { chatSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import History from '../components/History';
 import { InPortalThreadContext } from '../context/InPortalThreadContext';
@@ -57,7 +57,7 @@ const Item = memo<ChatListItemProps>(
 
     const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
 
-    const [isMessageLoading] = useChatStore((s) => [chatSelectors.isMessageLoading(id)(s)]);
+    const [isMessageLoading] = useChatStore((s) => [messageStateSelectors.isMessageLoading(id)(s)]);
 
     // ======================= Performance Optimization ======================= //
     // these useMemo/useCallback are all for the performance optimization

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

@@ -1,7 +1,7 @@
 import { memo, useEffect } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { chatSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import BackBottom from './BackBottom';
 
@@ -11,7 +11,7 @@ interface AutoScrollProps {
   onScrollToBottom: (type: 'auto' | 'click') => void;
 }
 const AutoScroll = memo<AutoScrollProps>(({ atBottom, isScrolling, onScrollToBottom }) => {
-  const trackVisibility = useChatStore(chatSelectors.isAIGenerating);
+  const trackVisibility = useChatStore(messageStateSelectors.isAIGenerating);
   const str = useChatStore(chatSelectors.mainAIChatsMessageString);
   const reasoningStr = useChatStore(chatSelectors.mainAILatestMessageReasoningContent);