File size: 1,762 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import { useRef, useEffect, memo } from 'react';
import { ResizableHandleAlt, ResizablePanel } from '@librechat/client';
import type { ImperativePanelHandle } from 'react-resizable-panels';
interface ArtifactsPanelProps {
artifacts: React.ReactNode | null;
currentLayout: number[];
minSizeMain: number;
shouldRender: boolean;
onRenderChange: (shouldRender: boolean) => void;
}
/**
* ArtifactsPanel component - memoized to prevent unnecessary re-renders
* Only re-renders when artifacts visibility or layout changes
*/
const ArtifactsPanel = memo(function ArtifactsPanel({
artifacts,
currentLayout,
minSizeMain,
shouldRender,
onRenderChange,
}: ArtifactsPanelProps) {
const artifactsPanelRef = useRef<ImperativePanelHandle>(null);
useEffect(() => {
if (artifacts != null) {
onRenderChange(true);
requestAnimationFrame(() => {
requestAnimationFrame(() => {
artifactsPanelRef.current?.expand();
});
});
} else if (shouldRender) {
onRenderChange(false);
}
}, [artifacts, shouldRender, onRenderChange]);
if (!shouldRender) {
return null;
}
return (
<>
{artifacts != null && (
<ResizableHandleAlt withHandle className="bg-border-medium text-text-primary" />
)}
<ResizablePanel
ref={artifactsPanelRef}
defaultSize={artifacts != null ? currentLayout[1] : 0}
minSize={minSizeMain}
maxSize={70}
collapsible={true}
collapsedSize={0}
order={2}
id="artifacts-panel"
>
<div className="h-full min-w-[400px] overflow-hidden">{artifacts}</div>
</ResizablePanel>
</>
);
});
ArtifactsPanel.displayName = 'ArtifactsPanel';
export default ArtifactsPanel;
|