Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-16 08:20:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🚪 fix: ArtifactsPanel and SidePanel Rendering and Collapsing Behavior (#10537)
Some checks failed
Docker Dev Branch Images Build / build (Dockerfile, lc-dev, node) (push) Waiting to run
Details
Docker Dev Branch Images Build / build (Dockerfile.multi, lc-dev-api, api-build) (push) Waiting to run
Details
Docker Dev Images Build / build (Dockerfile, librechat-dev, node) (push) Waiting to run
Details
Docker Dev Images Build / build (Dockerfile.multi, librechat-dev-api, api-build) (push) Waiting to run
Details
Sync Locize Translations & Create Translation PR / Sync Translation Keys with Locize (push) Waiting to run
Details
Sync Locize Translations & Create Translation PR / Create Translation PR on Version Published (push) Blocked by required conditions
Details
Publish `librechat-data-provider` to NPM / build (push) Has been cancelled
Details
Publish `@librechat/data-schemas` to NPM / build-and-publish (push) Has been cancelled
Details
Publish `librechat-data-provider` to NPM / publish-npm (push) Has been cancelled
Details

Browse source 
* 🚪 fix: ArtifactsPanel and SidePanel Rendering and Collapsing Behavior

* refactor: improve side panel behavior when artifacts panel renders null
This commit is contained in:
Danny Avila 2025-11-16 13:55:35 -05:00 • committed by GitHub
parent 0a2f40cc50
commit 1b2f1ff09b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 6 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/SidePanel/ArtifactsPanel.tsx
View file

@ -2,8 +2,6 @@ import { useRef, useEffect, memo } from 'react';
import { ResizableHandleAlt, ResizablePanel } from '@librechat/client'; import { ResizableHandleAlt, ResizablePanel } from '@librechat/client';
import type { ImperativePanelHandle } from 'react-resizable-panels'; import type { ImperativePanelHandle } from 'react-resizable-panels';
const ANIMATION_DURATION = 500;
interface ArtifactsPanelProps { interface ArtifactsPanelProps {
artifacts: React.ReactNode | null; artifacts: React.ReactNode | null;
currentLayout: number[]; currentLayout: number[];
@ -24,14 +22,9 @@ const ArtifactsPanel = memo(function ArtifactsPanel({
onRenderChange, onRenderChange,
}: ArtifactsPanelProps) { }: ArtifactsPanelProps) {
const artifactsPanelRef = useRef<ImperativePanelHandle>(null); const artifactsPanelRef = useRef<ImperativePanelHandle>(null);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => { useEffect(() => {
if (artifacts != null) { if (artifacts != null) {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = null;
}
onRenderChange(true); onRenderChange(true);
requestAnimationFrame(() => { requestAnimationFrame(() => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
@ -39,17 +32,8 @@ const ArtifactsPanel = memo(function ArtifactsPanel({
}); });
}); });
} else if (shouldRender) { } else if (shouldRender) {
artifactsPanelRef.current?.collapse(); onRenderChange(false);
timeoutRef.current = setTimeout(() => {
onRenderChange(false);
}, ANIMATION_DURATION);
} }
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, [artifacts, shouldRender, onRenderChange]); }, [artifacts, shouldRender, onRenderChange]);
if (!shouldRender) { if (!shouldRender) {

3
client/src/components/SidePanel/SidePanel.tsx
View file

@ -162,6 +162,9 @@ const SidePanel = ({
transition: 'width 0.2s ease, visibility 0s linear 0.2s', transition: 'width 0.2s ease, visibility 0s linear 0.2s',
}} }}
onExpand={() => { onExpand={() => {
if (isCollapsed && (fullCollapse || collapsedSize === 0)) {
return;
}
setIsCollapsed(false); setIsCollapsed(false);
localStorage.setItem('react-resizable-panels:collapsed', 'false'); localStorage.setItem('react-resizable-panels:collapsed', 'false');
}} }}

4
client/src/components/SidePanel/SidePanelGroup.tsx
View file

@ -138,9 +138,9 @@ const SidePanelGroup = memo(
setCollapsedSize={setCollapsedSize} setCollapsedSize={setCollapsedSize}
fullCollapse={fullCollapse} fullCollapse={fullCollapse}
setFullCollapse={setFullCollapse} setFullCollapse={setFullCollapse}
defaultSize={currentLayout[currentLayout.length - 1]}
hasArtifacts={artifacts != null}
interfaceConfig={interfaceConfig} interfaceConfig={interfaceConfig}
hasArtifacts={shouldRenderArtifacts}
defaultSize={currentLayout[currentLayout.length - 1]}
/> />
)} )}
</ResizablePanelGroup> </ResizablePanelGroup>