fix: isolate agent v2 chat preview state (#7005)

projects/app/src/components/core/chat/ChatContainer/ChatBox/hooks/useChatGenerate.ts

@@ -587,7 +587,7 @@ export const useChatGenerate = ({
           resumedChatTargetRef.current = `${appId}:${chatId}`;
 
           setChatBoxData((state) =>
-            state.chatId === chatId
+            state.appId === appId && state.chatId === chatId
               ? {
                   ...state,
                   title: temporaryHistoryTitle,
@@ -693,7 +693,7 @@ export const useChatGenerate = ({
             finishChatGenerateStatus({
               status: ChatGenerateStatusEnum.done,
               finishedInActiveChat,
-              shouldUpdateChatBoxData: (state) => state.chatId === chatId
+              shouldUpdateChatBoxData: (state) => state.appId === appId && state.chatId === chatId
             });
           } catch (err: any) {
             if (isAbortByLeave(err)) {
@@ -727,7 +727,7 @@ export const useChatGenerate = ({
             finishChatGenerateStatus({
               status: ChatGenerateStatusEnum.error,
               finishedInActiveChat,
-              shouldUpdateChatBoxData: (state) => state.chatId === chatId
+              shouldUpdateChatBoxData: (state) => state.appId === appId && state.chatId === chatId
             });
           }
 

projects/app/src/pageComponents/app/detail/Edit/ChatAgent/ChatTest.tsx

@@ -83,6 +83,12 @@ const ChatTest = ({ appForm, setAppForm, setRenderEdit, form2WorkflowFn }: Props
     setRenderEdit(!datasetCiteData);
   }, [datasetCiteData, setRenderEdit]);
 
+  useEffect(() => {
+    setActiveTab('chat_debug');
+    setCiteModalData(undefined);
+    setRenderEdit(true);
+  }, [appDetail._id, chatId, setActiveTab, setCiteModalData, setRenderEdit]);
+
   const { ChatContainer, restartChat } = useChatTest({
     ...workflowData,
     chatConfig: appForm.chatConfig,

projects/app/src/pages/app/detail/index.tsx

@@ -10,6 +10,7 @@ import AppContextProvider, { AppContext } from '@/pageComponents/app/detail/cont
 import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
 import { useChatStore } from '@/web/core/chat/context/useChatStore';
 import { TabEnum } from '@/pageComponents/app/detail/context';
+import { ChatSourceEnum } from '@fastgpt/global/core/chat/constants';
 
 const SimpleEdit = dynamic(() => import('@/pageComponents/app/detail/Edit/SimpleApp'));
 const AgentEdit = dynamic(() => import('@/pageComponents/app/detail/Edit/ChatAgent'));
@@ -19,35 +20,45 @@ const MCPTools = dynamic(() => import('@/pageComponents/app/detail/Edit/MCPTools
 const HTTPTools = dynamic(() => import('@/pageComponents/app/detail/Edit/HTTPTools'));
 
 const AppDetail = () => {
-  const { setAppId, setSource } = useChatStore();
+  const { appId: storeAppId, source, setAppId, setSource } = useChatStore();
+  const appId = useContextSelector(AppContext, (e) => e.appId);
   const appDetail = useContextSelector(AppContext, (e) => e.appDetail);
   const route2Tab = useContextSelector(AppContext, (e) => e.route2Tab);
+  const isCurrentAppLoaded = !!appDetail._id && appDetail._id === appId;
+  const isChatStoreReady = source === ChatSourceEnum.test && storeAppId === appDetail._id;
 
   useEffect(() => {
-    setSource('test');
-    if (appDetail._id) {
+    setSource(ChatSourceEnum.test);
+    if (isCurrentAppLoaded) {
       setAppId(appDetail._id);
 
       if (!appDetail.permission.hasWritePer) {
         route2Tab(TabEnum.logs);
       }
     }
-  }, [appDetail._id]);
+  }, [
+    appDetail._id,
+    appDetail.permission.hasWritePer,
+    isCurrentAppLoaded,
+    route2Tab,
+    setAppId,
+    setSource
+  ]);
 
   return (
     <>
       <NextHead title={appDetail.name} icon={appDetail.avatar}></NextHead>
       <Box h={'100%'} position={'relative'} bg={'myGray.25'}>
-        {!appDetail._id ? (
+        {!isCurrentAppLoaded || !isChatStoreReady ? (
           <Loading fixed={false} />
         ) : (
           <>
-            {appDetail.type === AppTypeEnum.simple && <SimpleEdit />}
-            {appDetail.type === AppTypeEnum.chatAgent && <AgentEdit />}
-            {appDetail.type === AppTypeEnum.workflow && <Workflow />}
-            {appDetail.type === AppTypeEnum.workflowTool && <Plugin />}
-            {appDetail.type === AppTypeEnum.mcpToolSet && <MCPTools />}
-            {appDetail.type === AppTypeEnum.httpToolSet && <HTTPTools />}
+            {appDetail.type === AppTypeEnum.simple && <SimpleEdit key={appDetail._id} />}
+            {appDetail.type === AppTypeEnum.chatAgent && <AgentEdit key={appDetail._id} />}
+            {appDetail.type === AppTypeEnum.workflow && <Workflow key={appDetail._id} />}
+            {appDetail.type === AppTypeEnum.workflowTool && <Plugin key={appDetail._id} />}
+            {appDetail.type === AppTypeEnum.mcpToolSet && <MCPTools key={appDetail._id} />}
+            {appDetail.type === AppTypeEnum.httpToolSet && <HTTPTools key={appDetail._id} />}
           </>
         )}
       </Box>

projects/app/src/pages/chat/index.tsx

@@ -32,14 +32,19 @@ const logger = getLogger(LogCategories.MODULE.CHAT.ITEM);
 const Chat = () => {
   const { isPc } = useSystem();
 
-  const { appId } = useChatStore();
+  const { appId, chatId } = useChatStore();
 
   const datasetCiteData = useContextSelector(ChatItemContext, (v) => v.datasetCiteData);
   const setCiteModalData = useContextSelector(ChatItemContext, (v) => v.setCiteModalData);
+  const resetChatItemUIState = useContextSelector(ChatItemContext, (v) => v.resetUIState);
 
   const collapse = useContextSelector(ChatPageContext, (v) => v.collapse);
   const pane = useContextSelector(ChatPageContext, (v) => v.pane);
 
+  useEffect(() => {
+    resetChatItemUIState();
+  }, [appId, chatId, resetChatItemUIState]);
+
   return (
     <Flex h={'100%'}>
       {/* Side bar */}

projects/app/src/web/core/chat/context/chatContext.tsx

@@ -206,8 +206,8 @@ const ChatContextProvider = ({
 
   const onUpdateHistoryTitle = useCallback(
     ({ chatId, newTitle }: { chatId: string; newTitle: string }) => {
-      const { chatId: currentChatId } = useChatStore.getState();
-      if (chatId !== currentChatId) return;
+      const { appId: currentAppId, chatId: currentChatId } = useChatStore.getState();
+      if (currentAppId !== historyAppId || chatId !== currentChatId) return;
 
       setHistories((state) =>
         upsertHistoryTitle({

projects/app/src/web/core/chat/context/chatItemContext.tsx

@@ -94,6 +94,7 @@ type ChatItemContextType = {
   setCiteModalData: React.Dispatch<React.SetStateAction<QuoteDataType | undefined>>;
   isVariableVisible: boolean;
   setIsVariableVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  resetUIState: () => void;
 } & ContextProps;
 
 export const ChatItemContext = createContext<ChatItemContextType>({
@@ -128,6 +129,9 @@ export const ChatItemContext = createContext<ChatItemContextType>({
   isVariableVisible: true,
   setIsVariableVisible: function (value: React.SetStateAction<boolean>): void {
     throw new Error('Function not implemented.');
+  },
+  resetUIState: function (): void {
+    throw new Error('Function not implemented.');
   }
 });
 
@@ -205,6 +209,12 @@ const ChatItemContextProvider = ({
 
   const [datasetCiteData, setCiteModalData] = useState<QuoteDataType>();
 
+  const resetUIState = useCallback(() => {
+    setCiteModalData(undefined);
+    setIsVariableVisible(true);
+    setPluginRunTab(PluginRunBoxTabEnum.input);
+  }, []);
+
   const contextValue = useMemo(() => {
     return {
       chatBoxData,
@@ -228,7 +238,8 @@ const ChatItemContextProvider = ({
       datasetCiteData,
       setCiteModalData,
       isVariableVisible,
-      setIsVariableVisible
+      setIsVariableVisible,
+      resetUIState
     };
   }, [
     chatBoxData,
@@ -248,7 +259,8 @@ const ChatItemContextProvider = ({
     datasetCiteData,
     setCiteModalData,
     isVariableVisible,
-    setIsVariableVisible
+    setIsVariableVisible,
+    resetUIState
   ]);
 
   return <ChatItemContext.Provider value={contextValue}>{children}</ChatItemContext.Provider>;