fix: session rename create new session instead of remaining existing one (#11576)

keval718 · autofix-ci[bot] · web-flow · commit d3a08d0f2e1e · 2026-02-03T18:06:28.000-05:00
* fix(frontend): resolve session rename bugs and prevent message loss

* fix(playground): Fix session rename not showing messages immediately

* [autofix.ci] apply automated fixes

* fix(playground): Eliminate duplicate logic in session-selector

---------

Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/chat-header.tsx b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/chat-header.tsx
@@ -119,6 +119,7 @@ export function ChatHeader({
         onMessageLogs={onMessageLogs}
         onClearChat={handleClearChat}
         onDelete={handleDeleteSessionInternal}
+        showRename={!isDefaultSession}
         showClearChat={isDefaultSession}
         showDelete={!isDefaultSession}
         side="bottom"
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/chat-sidebar.tsx b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/chat-sidebar.tsx
@@ -13,6 +13,7 @@ interface ChatSidebarProps {
   currentSessionId?: string;
   onDeleteSession?: (sessionId: string) => void;
   onOpenLogs?: (sessionId: string) => void;
+  renameLocalSession?: (oldSessionId: string, newSessionId: string) => void;
 }
 
 export function ChatSidebar({
@@ -22,9 +23,13 @@ export function ChatSidebar({
   currentSessionId,
   onDeleteSession,
   onOpenLogs,
+  renameLocalSession,
 }: ChatSidebarProps) {
   const currentFlowId = useGetFlowId();
-  const { handleDelete } = useEditSessionInfo({ flowId: currentFlowId });
+  const { handleDelete, handleRename } = useEditSessionInfo({
+    flowId: currentFlowId,
+    renameLocalSession,
+  });
 
   const sessionIds = useMemo(() => sessions, [sessions]);
 
@@ -81,6 +86,7 @@ export function ChatSidebar({
               isVisible={visibleSession === session}
               updateVisibleSession={handleSessionClick}
               inspectSession={onOpenLogs}
+              handleRename={handleRename}
               setActiveSession={() => {
                 // TODO: Implement active session
               }}
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/session-more-menu.tsx b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/session-more-menu.tsx
@@ -15,6 +15,7 @@ export interface SessionMoreMenuProps {
   onDelete: () => void;
   onClearChat?: () => void;
   showMessageLogs?: boolean;
+  showRename?: boolean;
   showDelete?: boolean;
   showClearChat?: boolean;
   // Positioning props
@@ -36,6 +37,7 @@ export function SessionMoreMenu({
   onDelete,
   onClearChat,
   showMessageLogs = true,
+  showRename = true,
   showDelete = true,
   showClearChat = false,
   side = "bottom",
@@ -102,15 +104,17 @@ export function SessionMoreMenu({
           sideOffset={sideOffset}
           className={cn("p-0", contentClassName)}
         >
-          <SelectItem value="rename" className="session-more-menu-item">
-            <div className="flex items-center">
-              <ForwardedIconComponent
-                name="SquarePen"
-                className="mr-2 h-4 w-4"
-              />
-              Rename
-            </div>
-          </SelectItem>
+          {showRename && (
+            <SelectItem value="rename" className="session-more-menu-item">
+              <div className="flex items-center">
+                <ForwardedIconComponent
+                  name="SquarePen"
+                  className="mr-2 h-4 w-4"
+                />
+                Rename
+              </div>
+            </SelectItem>
+          )}
           {showMessageLogs && (
             <SelectItem value="messageLogs" className="session-more-menu-item">
               <div className="flex items-center">
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/session-selector.tsx b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/session-selector.tsx
@@ -18,6 +18,7 @@ export interface SessionSelectorProps {
   setSelectedView?: (view: { type: string; id: string } | undefined) => void;
   playgroundPage?: boolean;
   setActiveSession?: (session: string) => void;
+  handleRename?: (oldSessionId: string, newSessionId: string) => Promise<void>;
 }
 
 export function SessionSelector({
@@ -32,6 +33,7 @@ export function SessionSelector({
   setSelectedView,
   playgroundPage = false,
   setActiveSession,
+  handleRename,
 }: SessionSelectorProps) {
   const [isEditing, setIsEditing] = useState(false);
   const { mutate: updateSessionName } = useUpdateSessionName();
@@ -43,29 +45,47 @@ export function SessionSelector({
     setIsEditing(true);
   };
 
-  const handleRenameSave = (newSessionId: string) => {
+  const handleRenameSave = async (newSessionId: string) => {
     setIsEditing(false);
     const trimmed = newSessionId.trim();
     if (!trimmed || trimmed === session) return;
-    updateSessionName(
-      { old_session_id: session, new_session_id: trimmed },
-      {
-        onSuccess: () => {
-          if (isVisible) {
+
+    // Use handleRename if provided (from sidebar), otherwise use mutation directly (from header)
+    if (handleRename) {
+      await handleRename(session, trimmed);
+      updateVisibleSession(trimmed);
+      if (
+        selectedView?.type === "Session" &&
+        selectedView?.id === session &&
+        setSelectedView
+      ) {
+        setSelectedView({ type: "Session", id: trimmed });
+      }
+    } else {
+      // Wait for the mutation to complete before updating visible session
+      await updateSessionName(
+        { old_session_id: session, new_session_id: trimmed },
+        {
+          onSuccess: () => {
+            // Update visible session after rename is complete
             updateVisibleSession(trimmed);
-          }
-          if (
-            selectedView?.type === "Session" &&
-            selectedView?.id === session &&
-            setSelectedView
-          ) {
-            setSelectedView({ type: "Session", id: trimmed });
-          }
+            if (
+              selectedView?.type === "Session" &&
+              selectedView?.id === session &&
+              setSelectedView
+            ) {
+              setSelectedView({ type: "Session", id: trimmed });
+            }
+          },
         },
-      },
-    );
+      );
+    }
   };
 
+  // Default session (flowId) cannot be renamed or deleted
+  const isDefaultSession = session === currentFlowId;
+  const canModifySession = !isDefaultSession;
+
   return (
     <div
       data-testid="session-selector"
@@ -100,7 +120,7 @@ export function SessionSelector({
             <ShadTooltip styleClasses="z-50" content={session}>
               <div className="relative w-full overflow-hidden">
                 <span className="w-full truncate bg-transparent text-mmd">
-                  {session === currentFlowId ? "Default Session" : session}
+                  {isDefaultSession ? "Default Session" : session}
                 </span>
               </div>
             </ShadTooltip>
@@ -111,7 +131,8 @@ export function SessionSelector({
           onRename={handleEditClick}
           onMessageLogs={() => inspectSession?.(session)}
           onDelete={() => deleteSession(session)}
-          showDelete={session !== currentFlowId}
+          showRename={canModifySession}
+          showDelete={canModifySession}
           side="bottom"
           align="end"
           sideOffset={4}
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/hooks/use-edit-session-info.ts b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/hooks/use-edit-session-info.ts
@@ -3,12 +3,17 @@ import { useGetSessionsFromFlowQuery } from "@/controllers/API/queries/messages/
 import { useUpdateSessionName } from "@/controllers/API/queries/messages/use-rename-session";
 import { usePlaygroundStore } from "@/stores/playgroundStore";
 
+const LOCAL_SESSIONS_STORAGE_KEY = (flowId: string) =>
+  `langflow_local_sessions_${flowId}`;
+
 export const useEditSessionInfo = ({
   flowId,
   dbSessions: providedDbSessions,
+  renameLocalSession,
 }: {
   flowId?: string;
   dbSessions?: string[];
+  renameLocalSession?: (oldSessionId: string, newSessionId: string) => void;
 }) => {
   const setSelectedSession = usePlaygroundStore(
     (state) => state.setSelectedSession,
@@ -41,12 +46,18 @@ export const useEditSessionInfo = ({
   };
 
   const handleRename = async (sessionId: string, newSessionId: string) => {
-    if (dbSessions.includes(sessionId)) {
-      await updateSessionName({
-        old_session_id: sessionId,
-        new_session_id: newSessionId,
-      });
+    // Update session name via API or sessionStorage
+    await updateSessionName({
+      old_session_id: sessionId,
+      new_session_id: newSessionId,
+    });
+
+    // Update local sessions list using the provided function
+    if (renameLocalSession) {
+      renameLocalSession(sessionId, newSessionId);
     }
+
+    // Update selected session if the renamed session is currently selected
     if (flowId && sessionId === selectedSession) {
       setSelectedSession(newSessionId);
     }
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/hooks/use-get-add-sessions.ts b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/hooks/use-get-add-sessions.ts
@@ -11,6 +11,7 @@ interface UseGetAddSessionsProps {
 type UseGetAddSessionsReturnType = (props: UseGetAddSessionsProps) => {
   addNewSession: (allSessions?: string[]) => string;
   removeLocalSession: (sessionId: string) => void;
+  renameLocalSession: (oldSessionId: string, newSessionId: string) => void;
   sessions: string[];
   fetchedSessions: string[];
 };
@@ -138,11 +139,22 @@ export const useGetAddSessions: UseGetAddSessionsReturnType = ({
     });
   };
 
+  const renameLocalSession = (oldSessionId: string, newSessionId: string) => {
+    setLocalSessions((prev) => {
+      const updated = new Set(prev);
+      // Remove old session name and add new one
+      const hadOld = updated.delete(oldSessionId);
+      updated.add(newSessionId);
+      return updated;
+    });
+  };
+
   const stableSessions = useMemo(() => [...sessions], [sessions]);
 
   return {
     addNewSession,
     removeLocalSession,
+    renameLocalSession,
     sessions: stableSessions,
     fetchedSessions,
   };
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/hooks/use-chat-history.ts b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/hooks/use-chat-history.ts
@@ -29,7 +29,9 @@ export const useChatHistory = (visibleSession: string | null) => {
     queryFn: () => {
       // Return cached data immediately - this makes the query active and reactive
       // We're using useQuery purely as a subscription mechanism, not for fetching
-      return queryClient.getQueryData<Message[]>(sessionCacheKey) || [];
+      const cachedData =
+        queryClient.getQueryData<Message[]>(sessionCacheKey) || [];
+      return cachedData;
     },
     staleTime: Infinity, // Never refetch - updates come from setQueryData, not server
     gcTime: 5 * 60 * 1000, // Keep in cache for 5 minutes (allows cleanup of old sessions)
@@ -69,12 +71,13 @@ export const useChatHistory = (visibleSession: string | null) => {
         // In the default session, we show messages that have the same session_id as the flow_id
         // OR messages that have NO session_id (legacy behavior)
         if (visibleSession === currentFlowId) {
-          return (
+          const matches =
             isCurrentFlow &&
-            (message.session_id === visibleSession || !message.session_id)
-          );
+            (message.session_id === visibleSession || !message.session_id);
+          return matches;
         }
-        return isCurrentFlow && message.session_id === visibleSession;
+        const matches = isCurrentFlow && message.session_id === visibleSession;
+        return matches;
       })
       .map((message: Message) => {
         let files = message.files;
@@ -111,7 +114,8 @@ export const useChatHistory = (visibleSession: string | null) => {
         };
       });
 
-    return [...filteredMessages].sort(sortSenderMessages);
+    const sorted = [...filteredMessages].sort(sortSenderMessages);
+    return sorted;
   }, [messages, visibleSession, currentFlowId]);
 
   return chatHistory;
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/hooks/use-send-message.ts b/src/frontend/src/components/core/playgroundComponent/chat-view/hooks/use-send-message.ts
@@ -33,13 +33,6 @@ export const useSendMessage = ({ sessionId }: UseSendMessageProps = {}) => {
     }): Promise<void> => {
       // Resolve session: sessionId prop > selectedSession > flowId (default)
       const actualSession = sessionId ?? selectedSession ?? flowId;
-
-      console.debug("[useSendMessage] invoked", {
-        sessionId: actualSession,
-        chatInputId,
-        hasFiles: Boolean(files?.length),
-      });
-
       // Add placeholder user message immediately
       addUserMessage({
         id: null,
diff --git a/src/frontend/src/components/core/playgroundComponent/sliding-container/components/flow-page-sliding-container.tsx b/src/frontend/src/components/core/playgroundComponent/sliding-container/components/flow-page-sliding-container.tsx
@@ -37,14 +37,20 @@ export function FlowPageSlidingContainerContent({
   );
   const [openLogsModal, setOpenLogsModal] = useState(false);
 
-  const { sessions, addNewSession, removeLocalSession, fetchedSessions } =
-    useGetAddSessions({
-      flowId: currentFlowId,
-      currentSessionId,
-    });
+  const {
+    sessions,
+    addNewSession,
+    removeLocalSession,
+    renameLocalSession,
+    fetchedSessions,
+  } = useGetAddSessions({
+    flowId: currentFlowId,
+    currentSessionId,
+  });
   const { handleDelete } = useEditSessionInfo({
     flowId: currentFlowId,
     dbSessions: fetchedSessions,
+    renameLocalSession,
   });
 
   // Ensure currentFlowId is always first in sessions list
@@ -157,6 +163,7 @@ export function FlowPageSlidingContainerContent({
                 currentSessionId={currentSessionId}
                 onDeleteSession={handleDeleteSession}
                 onOpenLogs={handleOpenLogs}
+                renameLocalSession={renameLocalSession}
               />
             </div>
           </div>
diff --git a/src/frontend/src/controllers/API/queries/messages/use-rename-session.ts b/src/frontend/src/controllers/API/queries/messages/use-rename-session.ts
diff --git a/src/frontend/src/stores/messagesStore.ts b/src/frontend/src/stores/messagesStore.ts
diff --git a/src/frontend/src/types/zustand/messages/index.ts b/src/frontend/src/types/zustand/messages/index.ts
