From fc8d24fa5b4f49adf7e834089cfa381818dc4722 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Sat, 24 May 2025 16:53:46 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix:=20Artifacts=20Display=20Cra?=
 =?UTF-8?q?sh=20on=20Close=20and=20Max=20Width=20(#7540)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔧 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                           |  2 +-
 client/src/components/SidePanel/SidePanel.tsx | 16 +++++++++++---
 .../components/SidePanel/SidePanelGroup.tsx   | 11 +++++-----
 package-lock.json                             | 22 +++++++++----------
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/client/package.json b/client/package.json
index 1b33c3791..3d033cbcd 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/components/SidePanel/SidePanel.tsx b/client/src/components/SidePanel/SidePanel.tsx
index 71cddfc8d..d9b125647 100644
--- a/client/src/components/SidePanel/SidePanel.tsx
+++ b/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}
diff --git a/client/src/components/SidePanel/SidePanelGroup.tsx b/client/src/components/SidePanel/SidePanelGroup.tsx
index e1a7c88c4..9ec1b1003 100644
--- a/client/src/components/SidePanel/SidePanelGroup.tsx
+++ b/client/src/components/SidePanel/SidePanelGroup.tsx
@@ -60,11 +60,12 @@ const SidePanelGroup = ({
 
   const currentLayout = useMemo(() => normalizeLayout(calculateLayout()), [calculateLayout]);
 
-  const throttledSaveLayout = useCallback(
-    throttle((sizes: number[]) => {
-      const normalizedSizes = normalizeLayout(sizes);
-      localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes));
-    }, 350),
+  const throttledSaveLayout = useMemo(
+    () =>
+      throttle((sizes: number[]) => {
+        const normalizedSizes = normalizeLayout(sizes);
+        localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes));
+      }, 350),
     [],
   );
 
diff --git a/package-lock.json b/package-lock.json
index 8f6c00d05..2bc3d00c2 100644
--- a/package-lock.json
+++ b/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",