@lobehub/lobehub 2.0.0-next.4 → 2.0.0-next.40

package/src/app/[variants]/(main)/chat/_layout/Desktop/SessionPanel.tsx

@@ -3,7 +3,7 @@
 import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
 import { createStyles, useResponsive, useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { PropsWithChildren, memo, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 
 import { withSuspense } from '@/components/withSuspense';
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
@@ -12,6 +12,7 @@ import { usePinnedAgentState } from '@/hooks/usePinnedAgentState';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
+import SessionPanelContent from '../../components/SessionPanel';
 import { TOOGLE_PANEL_BUTTON_ID } from '../../features/TogglePanelButton';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -33,7 +34,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const SessionPanel = memo<PropsWithChildren>(({ children }) => {
+const SessionPanel = memo(() => {
   const isSingleMode = useIsSingleMode();
 
   const { md = true } = useResponsive();
@@ -75,11 +76,15 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
 
   const { appearance } = useThemeMode();
 
-  const SessionPanel = useMemo(() => {
+  const PanelContent = useMemo(() => {
     if (isSingleMode) {
-      // 在单一模式下，仍然渲染 children 以确保 SessionHydration 等逻辑组件正常工作
+      // 在单一模式下，仍然渲染 SessionPanelContent 以确保 SessionHydration 等逻辑组件正常工作
       // 但使用隐藏样式而不是 return null
-      return <div style={{ display: 'none' }}>{children}</div>;
+      return (
+        <div style={{ display: 'none' }}>
+          <SessionPanelContent mobile={false} />
+        </div>
+      );
     }
 
     return (
@@ -98,13 +103,13 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
         size={{ height: '100%', width: sessionsWidth }}
       >
         <DraggablePanelContainer style={{ flex: 'none', height: '100%', minWidth: FOLDER_WIDTH }}>
-          {children}
+          <SessionPanelContent mobile={false} />
         </DraggablePanelContainer>
       </DraggablePanel>
     );
   }, [sessionsWidth, md, isPinned, sessionExpandable, tmpWidth, appearance, isSingleMode]);
 
-  return SessionPanel;
+  return PanelContent;
 });
 
 export default withSuspense(SessionPanel);

package/src/app/[variants]/(main)/chat/_layout/Desktop/index.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { isDesktop } from '@/const/version';
-import InitClientDB from '@/features/InitClientDB';
 import ProtocolUrlHandler from '@/features/ProtocolUrlHandler';
 
 import { LayoutProps } from '../type';
@@ -10,7 +9,7 @@ import RegisterHotkeys from './RegisterHotkeys';
 import SessionPanel from './SessionPanel';
 import Workspace from './Workspace';
 
-const Layout = ({ children, session }: LayoutProps) => {
+const Layout = ({ children }: LayoutProps) => {
   return (
     <>
       <Flexbox
@@ -19,10 +18,9 @@ const Layout = ({ children, session }: LayoutProps) => {
         style={{ maxWidth: '100%', overflow: 'hidden', position: 'relative' }}
         width={'100%'}
       >
-        <SessionPanel>{session}</SessionPanel>
+        <SessionPanel />
         <Workspace>{children}</Workspace>
       </Flexbox>
-      {!isDesktop && <InitClientDB bottom={60} />}
       {/* ↓ cloud slot ↓ */}
 
       {/* ↑ cloud slot ↑ */}

package/src/app/[variants]/(main)/chat/_layout/FeatureFlagsProvider.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { PropsWithChildren, createContext, useContext } from 'react';
+
+interface FeatureFlags {
+  hideDocs?: boolean;
+  showChangelog?: boolean;
+}
+
+const FeatureFlagsContext = createContext<FeatureFlags>({});
+
+export const useFeatureFlags = () => useContext(FeatureFlagsContext);
+
+export const FeatureFlagsProvider = ({
+  children,
+  hideDocs,
+  showChangelog,
+}: PropsWithChildren<FeatureFlags>) => {
+  return (
+    <FeatureFlagsContext.Provider value={{ hideDocs, showChangelog }}>
+      {children}
+    </FeatureFlagsContext.Provider>
+  );
+};

package/src/app/[variants]/(main)/chat/_layout/Mobile.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { createStyles } from 'antd-style';
-import { Suspense, memo } from 'react';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { withSuspense } from '@/components/withSuspense';
-import InitClientDB from '@/features/InitClientDB';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 
+import SessionPanelContent from '../components/SessionPanel';
 import { LayoutProps } from './type';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -18,7 +18,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Layout = memo<LayoutProps>(({ children, session }) => {
+const Layout = memo<LayoutProps>(({ children }) => {
   const showMobileWorkspace = useShowMobileWorkspace();
   const { styles } = useStyles();
 
@@ -30,7 +30,7 @@ const Layout = memo<LayoutProps>(({ children, session }) => {
         style={showMobileWorkspace ? { display: 'none' } : undefined}
         width="100%"
       >
-        {session}
+        <SessionPanelContent mobile />
       </Flexbox>
       <Flexbox
         className={styles.main}
@@ -40,9 +40,6 @@ const Layout = memo<LayoutProps>(({ children, session }) => {
       >
         {children}
       </Flexbox>
-      <Suspense>
-        <InitClientDB bottom={100} />
-      </Suspense>
     </>
   );
 });

package/src/app/[variants]/(main)/chat/_layout/type.ts

@@ -2,5 +2,4 @@ import { ReactNode } from 'react';
 
 export interface LayoutProps {
   children: ReactNode;
-  session: ReactNode;
 }

package/src/app/[variants]/(main)/chat/components/ConversationArea.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+
+import ChatHydration from './conversation/features/ChatHydration';
+import ChatInput from './conversation/features/ChatInput';
+import ChatList from './conversation/features/ChatList';
+import ChatMinimap from './conversation/features/ChatMinimap';
+import ThreadHydration from './conversation/features/ThreadHydration';
+import ZenModeToast from './conversation/features/ZenModeToast';
+
+interface ConversationAreaProps {
+  mobile?: boolean;
+}
+
+const ConversationArea = memo<ConversationAreaProps>(({ mobile = false }) => {
+  return (
+    <>
+      <ZenModeToast />
+      <ChatList mobile={mobile} />
+      <ChatInput mobile={mobile} />
+      <ChatHydration />
+      <ThreadHydration />
+      {!mobile && <ChatMinimap />}
+    </>
+  );
+});
+
+ConversationArea.displayName = 'ConversationArea';
+
+export default ConversationArea;

package/src/app/[variants]/(main)/chat/components/MainChatPage.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { memo } from 'react';
+
+import TelemetryNotification from '../components/features/TelemetryNotification';
+import PageTitle from '../features/PageTitle';
+import WorkspaceLayout from './WorkspaceLayout';
+
+interface MainChatPageProps {
+  mobile?: boolean;
+}
+
+const MainChatPage = memo<MainChatPageProps>(({ mobile }) => {
+  return (
+    <>
+      <PageTitle />
+      <WorkspaceLayout mobile={mobile} />
+      <TelemetryNotification mobile={mobile} />
+    </>
+  );
+});
+
+MainChatPage.displayName = 'MainChatPage';
+
+export default MainChatPage;

package/src/app/[variants]/(main)/chat/components/PortalPanel.tsx

@@ -0,0 +1,28 @@
+import { Suspense, lazy, memo } from 'react';
+
+import Loading from '@/components/Loading/BrandTextLoading';
+
+import DesktopLayout from './portal/_layout/Desktop';
+import MobileLayout from './portal/_layout/Mobile';
+
+const PortalBody = lazy(() => import('@/features/Portal/router'));
+
+interface PortalPanelProps {
+  mobile?: boolean;
+}
+
+const PortalPanel = memo<PortalPanelProps>(({ mobile }) => {
+  const Layout = mobile ? MobileLayout : DesktopLayout;
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <Layout>
+        <PortalBody />
+      </Layout>
+    </Suspense>
+  );
+});
+
+PortalPanel.displayName = 'PortalPanel';
+
+export default PortalPanel;

package/src/app/[variants]/(main)/chat/components/SessionPanel.tsx

@@ -0,0 +1,33 @@
+import { Suspense, lazy, memo } from 'react';
+
+import CircleLoading from '@/components/Loading/CircleLoading';
+
+import DesktopLayout from '../session/layout/Desktop';
+import MobileLayout from '../session/layout/Mobile';
+import SessionHydration from '../session/features/SessionHydration';
+import SkeletonList from '../session/features/SkeletonList';
+
+const SessionListContent = lazy(() => import('../session/features/SessionListContent'));
+
+interface SessionPanelProps {
+  mobile?: boolean;
+}
+
+const SessionPanel = memo<SessionPanelProps>(({ mobile }) => {
+  const Layout = mobile ? MobileLayout : DesktopLayout;
+
+  return (
+    <Suspense fallback={<CircleLoading />}>
+      <Layout>
+        <Suspense fallback={<SkeletonList />}>
+          <SessionListContent />
+        </Suspense>
+      </Layout>
+      <SessionHydration />
+    </Suspense>
+  );
+});
+
+SessionPanel.displayName = 'SessionPanel';
+
+export default SessionPanel;

package/src/app/[variants]/(main)/chat/{settings/page.tsx → components/SettingsPage.tsx}

@@ -6,9 +6,14 @@ import isEqual from 'fast-deep-equal';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import MobileContentLayout from '@/components/server/MobileNavLayout';
 import PageTitle from '@/components/PageTitle';
+import SafeSpacing from '@/components/SafeSpacing';
+import { HEADER_HEIGHT } from '@/const/layoutTokens';
 import { useCategory } from '@/features/AgentSetting/AgentCategory/useCategory';
 import AgentSettings from '@/features/AgentSetting/AgentSettings';
+import Footer from '@/features/Setting/Footer';
+import SettingContainer from '@/features/Setting/SettingContainer';
 import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
@@ -16,7 +21,14 @@ import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 
-const EditPage = memo(() => {
+import DesktopHeader from '../settings/_layout/Desktop/Header';
+import MobileHeader from '../settings/_layout/Mobile/Header';
+
+interface SettingsPageProps {
+  mobile?: boolean;
+}
+
+const SettingsPage = memo<SettingsPageProps>(({ mobile = false }) => {
   const { t } = useTranslation('setting');
   const [tab, setTab] = useState(ChatSettingsTabs.Prompt);
   const theme = useTheme();
@@ -34,7 +46,7 @@ const EditPage = memo(() => {
 
   const { isLoading } = useInitAgentConfig();
 
-  return (
+  const content = (
     <>
       <PageTitle title={t('header.sessionWithName', { name: title })} />
       <Tabs
@@ -57,6 +69,26 @@ const EditPage = memo(() => {
       />
     </>
   );
+
+  if (mobile) {
+    return (
+      <MobileContentLayout header={<MobileHeader />}>
+        {content}
+        <Footer />
+      </MobileContentLayout>
+    );
+  }
+
+  return (
+    <>
+      <DesktopHeader />
+      <SettingContainer addonAfter={<Footer />} addonBefore={<SafeSpacing height={HEADER_HEIGHT} />}>
+        {content}
+      </SettingContainer>
+    </>
+  );
 });
 
-export default EditPage;
+SettingsPage.displayName = 'SettingsPage';
+
+export default SettingsPage;

package/src/app/[variants]/(main)/chat/components/TopicSidebar.tsx

@@ -0,0 +1,30 @@
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+
+import DesktopLayout from './topic/_layout/Desktop';
+import MobileLayout from './topic/_layout/Mobile';
+import SkeletonList from './topic/features/SkeletonList';
+import Topic from './topic/features/Topic';
+
+const ConfigSwitcher = dynamic(() => import('./topic/features/ConfigSwitcher'), {
+  loading: () => <SkeletonList />,
+});
+
+interface TopicSidebarProps {
+  mobile?: boolean;
+}
+
+const TopicSidebar = memo<TopicSidebarProps>(({ mobile }) => {
+  const Layout = mobile ? MobileLayout : DesktopLayout;
+
+  return (
+    <Layout>
+      <ConfigSwitcher />
+      <Topic />
+    </Layout>
+  );
+});
+
+TopicSidebar.displayName = 'TopicSidebar';
+
+export default TopicSidebar;

package/src/app/[variants]/(main)/chat/components/WorkspaceLayout.tsx

@@ -0,0 +1,73 @@
+import { Suspense, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import MainInterfaceTracker from '@/components/Analytics/MainInterfaceTracker';
+import BrandTextLoading from '@/components/Loading/BrandTextLoading';
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
+import ChatHeaderDesktop from '../components/layout/Desktop/ChatHeader';
+import Portal from '../components/layout/Desktop/Portal';
+import TopicPanel from '../components/layout/Desktop/TopicPanel';
+import ChatHeaderMobile from '../components/layout/Mobile/ChatHeader';
+import TopicModal from '../components/layout/Mobile/TopicModal';
+import ConversationArea from './ConversationArea';
+import PortalPanel from './PortalPanel';
+import TopicSidebar from './TopicSidebar';
+
+interface WorkspaceLayoutProps {
+  mobile?: boolean;
+}
+
+const DesktopWorkspace = memo(() => (
+  <>
+    <ChatHeaderDesktop />
+    <Flexbox
+      height={'100%'}
+      horizontal
+      style={{ overflow: 'hidden', position: 'relative' }}
+      width={'100%'}
+    >
+      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
+        <ConversationArea mobile={false} />
+      </Flexbox>
+      <Portal>
+        <Suspense fallback={<BrandTextLoading />}>
+          <PortalPanel mobile={false} />
+        </Suspense>
+      </Portal>
+      <TopicPanel>
+        <TopicSidebar mobile={false} />
+      </TopicPanel>
+    </Flexbox>
+    <MainInterfaceTracker />
+  </>
+));
+
+DesktopWorkspace.displayName = 'DesktopWorkspace';
+
+const MobileWorkspace = memo(() => (
+  <>
+    <MobileContentLayout header={<ChatHeaderMobile />} style={{ overflowY: 'hidden' }}>
+      <ConversationArea mobile />
+    </MobileContentLayout>
+    <TopicModal>
+      <TopicSidebar mobile />
+    </TopicModal>
+    <PortalPanel mobile />
+    <MainInterfaceTracker />
+  </>
+));
+
+MobileWorkspace.displayName = 'MobileWorkspace';
+
+const WorkspaceLayout = memo<WorkspaceLayoutProps>(({ mobile }) => {
+  if (mobile) {
+    return <MobileWorkspace />;
+  }
+
+  return <DesktopWorkspace />;
+});
+
+WorkspaceLayout.displayName = 'WorkspaceLayout';
+
+export default WorkspaceLayout;

package/src/app/[variants]/(main)/chat/{(workspace)/@conversation → components/conversation}/features/ChatInput/Desktop/MessageFromUrl.tsx

@@ -8,7 +8,7 @@ import { useChatStore } from '@/store/chat';
 import { useSend } from '../useSend';
 
 const MessageFromUrl = () => {
-  const updateInputMessage = useChatStore((s) => s.updateInputMessage);
+  const updateMessageInput = useChatStore((s) => s.updateMessageInput);
   const { send: sendMessage } = useSend();
   const searchParams = useSearchParams();
 
@@ -21,10 +21,10 @@ const MessageFromUrl = () => {
       const newUrl = `${window.location.pathname}?${params.toString()}`;
       window.history.replaceState({}, '', newUrl);
 
-      updateInputMessage(message);
+      updateMessageInput(message);
       sendMessage();
     }
-  }, [searchParams, updateInputMessage, sendMessage]);
+  }, [searchParams, updateMessageInput, sendMessage]);
 
   return null;
 };

package/src/app/[variants]/(main)/chat/{(workspace)/@conversation → components/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,9 +37,9 @@ const MobileChatInput = memo(() => {
   const { isLoading } = useInitAgentConfig();
 
   const [loading, value, onInput, onStop] = useChatStore((s) => [
-    chatSelectors.isAIGenerating(s),
+    messageStateSelectors.isAIGenerating(s),
     s.inputMessage,
-    s.updateInputMessage,
+    s.updateMessageInput,
     s.stopGenerateMessage,
   ]);
 

package/src/app/[variants]/(main)/chat/{(workspace)/@conversation → components/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';
 
@@ -16,9 +16,9 @@ export type UseSendMessageParams = Pick<
 >;
 
 export const useSendMessage = () => {
-  const [sendMessage, updateInputMessage] = useChatStore((s) => [
+  const [sendMessage, updateMessageInput] = useChatStore((s) => [
     s.sendMessage,
-    s.updateInputMessage,
+    s.updateMessageInput,
   ]);
   const { analytics } = useAnalytics();
   const checkGeminiChineseWarning = useGeminiChineseWarning();
@@ -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(),
     );
 
@@ -64,7 +66,7 @@ export const useSendMessage = () => {
       ...params,
     });
 
-    updateInputMessage('');
+    updateMessageInput('');
     clearChatUploadFileList();
 
     // 获取分析数据

package/src/app/[variants]/(main)/chat/{(workspace)/@conversation → components/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();
@@ -156,17 +161,17 @@ export const useSendGroupMessage = () => {
   const [
     isContentEmpty,
     sendGroupMessage,
-    updateInputMessage,
+    updateMessageInput,
     stopGenerateMessage,
     isSendButtonDisabledByMessage,
     isCreatingMessage,
   ] = useChatStore((s) => [
     !s.inputMessage,
     s.sendGroupMessage,
-    s.updateInputMessage,
+    s.updateMessageInput,
     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;
 
@@ -250,7 +255,7 @@ export const useSendGroupMessage = () => {
       mainInputEditor.setExpand(false);
       mainInputEditor.clearContent();
       mainInputEditor.focus();
-      updateInputMessage('');
+      updateMessageInput('');
       // clear mentioned users after sending
       mentionState.clearMentionedUsers();
 
@@ -279,7 +284,7 @@ export const useSendGroupMessage = () => {
       canNotSend,
       fileList,
       clearChatUploadFileList,
-      updateInputMessage,
+      updateMessageInput,
       analytics,
       checkGeminiChineseWarning,
     ],
@@ -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();
@@ -309,8 +314,8 @@ export const useSendGroupMessage = () => {
       generating: isSupervisorThinking || isCreatingMessage,
       send: handleSend,
       stop,
-      updateInputMessage,
+      updateMessageInput,
     }),
-    [canNotSend, isSupervisorThinking, isCreatingMessage, handleSend, stop, updateInputMessage],
+    [canNotSend, isSupervisorThinking, isCreatingMessage, handleSend, stop, updateMessageInput],
   );
 };