🔧 fix: Artifacts Display Crash on Close and Max Width (#7540)

* 🔧 chore: Update react-resizable-panels dependency to version 3.0.2 in package.json and package-lock.json

* fix: Simplify order assignment in SidePanel component based on hasArtifacts condition, fixed frontend crash when artifacts are closed

* refactor: Change throttledSaveLayout to use useMemo for improved performance in SidePanelGroup component

* refactor: Update dependencies in SidePanel component's useEffect hooks for improved responsiveness

client/package.json

@@ -87,7 +87,7 @@
     "react-i18next": "^15.4.0",
     "react-lazy-load-image-component": "^1.6.0",
     "react-markdown": "^9.0.1",
-    "react-resizable-panels": "^2.1.8",
+    "react-resizable-panels": "^3.0.2",
     "react-router-dom": "^6.11.2",
     "react-speech-recognition": "^3.10.0",
     "react-textarea-autosize": "^8.4.0",

client/src/components/SidePanel/SidePanel.tsx

@@ -78,7 +78,7 @@ const SidePanel = ({
     setFullCollapse(true);
     localStorage.setItem('fullPanelCollapse', 'true');
     panelRef.current?.collapse();
-  }, []);
+  }, [panelRef, setMinSize, setIsCollapsed, setFullCollapse, setCollapsedSize]);
 
   const Links = useSideNavLinks({
     endpoint,
@@ -107,7 +107,17 @@ const SidePanel = ({
     } else {
       panelRef.current?.expand();
     }
-  }, [isCollapsed, newUser, setNewUser, navCollapsedSize]);
+  }, [
+    newUser,
+    panelRef,
+    setNewUser,
+    setMinSize,
+    isCollapsed,
+    setIsCollapsed,
+    setFullCollapse,
+    setCollapsedSize,
+    navCollapsedSize,
+  ]);
 
   return (
     <>
@@ -137,7 +147,7 @@ const SidePanel = ({
       <ResizablePanel
         tagName="nav"
         id="controls-nav"
-        order={hasArtifacts != null ? 3 : 2}
+        order={hasArtifacts ? 3 : 2}
         aria-label={localize('com_ui_controls')}
         role="navigation"
         collapsedSize={collapsedSize}

client/src/components/SidePanel/SidePanelGroup.tsx

@@ -60,11 +60,12 @@ const SidePanelGroup = ({
 
   const currentLayout = useMemo(() => normalizeLayout(calculateLayout()), [calculateLayout]);
 
-  const throttledSaveLayout = useCallback(
+  const throttledSaveLayout = useMemo(
-    throttle((sizes: number[]) => {
+    () =>
-      const normalizedSizes = normalizeLayout(sizes);
+      throttle((sizes: number[]) => {
-      localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes));
+        const normalizedSizes = normalizeLayout(sizes);
-    }, 350),
+        localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes));
+      }, 350),
     [],
   );
 

package-lock.json

@@ -2579,7 +2579,7 @@
         "react-i18next": "^15.4.0",
         "react-lazy-load-image-component": "^1.6.0",
         "react-markdown": "^9.0.1",
-        "react-resizable-panels": "^2.1.8",
+        "react-resizable-panels": "^3.0.2",
         "react-router-dom": "^6.11.2",
         "react-speech-recognition": "^3.10.0",
         "react-textarea-autosize": "^8.4.0",
@@ -4623,6 +4623,16 @@
         "node": ">=0.10.0"
       }
     },
+    "client/node_modules/react-resizable-panels": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.2.tgz",
+      "integrity": "sha512-j4RNII75fnHkLnbsTb5G5YsDvJsSEZrJK2XSF2z0Tc2jIonYlIVir/Yh/5LvcUFCfs1HqrMAoiBFmIrRjC4XnA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "client/node_modules/ts-jest": {
       "version": "29.2.5",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.2.5.tgz",
@@ -39588,16 +39598,6 @@
         }
       }
     },
-    "node_modules/react-resizable-panels": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.8.tgz",
-      "integrity": "sha512-oDvD0sw34Ecx00cQFLiRJpAE2fCgNLBr8DMrBzkrsaUiLpAycIQoY3eAWfMblDql3pTIMZ60wJ/P89RO1htM2w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
-        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      }
-    },
     "node_modules/react-router": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz",