mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-09-21 21:50:49 +02:00
🔧 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
This commit is contained in:
parent
449d9b7613
commit
fc8d24fa5b
4 changed files with 31 additions and 20 deletions
|
@ -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",
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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),
|
||||
[],
|
||||
);
|
||||
|
||||
|
|
22
package-lock.json
generated
22
package-lock.json
generated
|
@ -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",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue