Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-04-05 15:27:20 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

🔄 refactor: Migrate to react-resizable-panels v4 with Artifacts Header polish (#12356)
Some checks are pending
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

Browse source 
* chore: Update react-resizable-panels dependency to version 4.7.4

- Upgraded the "react-resizable-panels" package in package-lock.json, package.json, and client package.json files to ensure compatibility with the latest features and improvements.
- Adjusted peer dependencies for React and ReactDOM to align with the new version requirements.

* refactor: Update Share and SidePanel components to `react-resizable-panels` v4

- Refactored the ShareArtifactsContainer to utilize a new layout change handler, enhancing artifact panel resizing functionality.
- Updated ArtifactsPanel to use the new `usePanelRef` hook, improving panel reference management.
- Simplified SidePanelGroup by removing unnecessary layout normalization and integrating default layout handling with localStorage.
- Removed the deprecated `normalizeLayout` utility function to streamline the codebase.
- Adjusted Resizable components to ensure consistent sizing and layout behavior across panels.

* style: Enhance scrollbar appearance across application

- Added custom scrollbar styles to both artifacts and markdown files, improving aesthetics and user experience.
- Implemented dark mode adjustments for scrollbar visibility, ensuring consistency across different color schemes.

* style: Standardize button sizes and layout in Artifacts components

- Updated button dimensions to a consistent height of 9 units across various components including Artifacts, Code, and DownloadArtifact.
- Adjusted padding and layout properties in the Artifacts header for improved visual consistency.
- Enhanced the Radio component to accept a new `buttonClassName` prop for better customization of button styles.

* chore: import order
This commit is contained in:
Danny Avila 2026-03-22 02:21:27 -04:00 • committed by GitHub
parent 733a9364c0
commit 676641f3da
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 92 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/src/utils/artifacts.ts
View file

@ -189,6 +189,14 @@ export const sharedFiles = {
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<style>
::-webkit-scrollbar{height:.1em;width:.5rem}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1);border-radius:9999px}
::-webkit-scrollbar-track{background-color:transparent;border-radius:9999px}
@media(prefers-color-scheme:dark){::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.1)}}
*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}
@media(prefers-color-scheme:dark){*{scrollbar-color:hsla(0,0%,100%,.1) transparent}}
</style>
</head>
<body>
<div id="root"></div>

18
client/src/utils/index.ts
View file

@ -113,24 +113,6 @@ export const extractContent = (
return '';
};
export const normalizeLayout = (layout: number[]) => {
const sum = layout.reduce((acc, size) => acc + size, 0);
if (Math.abs(sum - 100) < 0.01) {
return layout.map((size) => Number(size.toFixed(2)));
}
const factor = 100 / sum;
const normalizedLayout = layout.map((size) => Number((size * factor).toFixed(2)));
const adjustedSum = normalizedLayout.reduce(
(acc, size, index) => (index === layout.length - 1 ? acc : acc + size),
0,
);
normalizedLayout[normalizedLayout.length - 1] = Number((100 - adjustedSum).toFixed(2));
return normalizedLayout;
};
export const handleUIAction = async (result: UIActionResult, ask: TAskFunction) => {
const supportedTypes = ['intent', 'tool', 'prompt'];

12
client/src/utils/markdown.ts
View file

@ -211,6 +211,18 @@ const markdownCSS = `
background-color: #21262d;
}
}
/* Scrollbar */
::-webkit-scrollbar { height: 0.1em; width: 0.5rem; }
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.1); border-radius: 9999px; }
::-webkit-scrollbar-track { background-color: transparent; border-radius: 9999px; }
@media (prefers-color-scheme: dark) {
::-webkit-scrollbar-thumb { background-color: hsla(0,0%,100%,0.1); }
}
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.1) transparent; }
@media (prefers-color-scheme: dark) {
* { scrollbar-color: hsla(0,0%,100%,0.1) transparent; }
}
`;
/**