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

refactor: Improve button class handling and blur effect constants in Artifact components

Browse source
This commit is contained in:
Marco Beretta 2025-10-25 14:21:01 +02:00
parent cf9de4d4a5
commit 6fb76c7d60
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
3 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

14
client/src/components/Artifacts/ArtifactButton.tsx
View file

@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
import { useRecoilState, useSetRecoilState, useResetRecoilState } from 'recoil';
import type { Artifact } from '~/common';
import FilePreview from '~/components/Chat/Input/Files/FilePreview';
import { getFileType, logger } from '~/utils';
import { cn, getFileType, logger } from '~/utils';
import { useLocalize } from '~/hooks';
import store from '~/store';
@ -77,11 +77,13 @@ const ArtifactButton = ({ artifact }: { artifact: Artifact | null }) => {
}, 15);
};
const buttonClass =
`relative overflow-hidden rounded-xl transition-all duration-300 hover:border-border-medium hover:bg-surface-hover hover:shadow-lg active:scale-[0.98] ` +
(isSelected
? 'border-border-medium bg-surface-hover shadow-lg'
: 'border-border-light bg-surface-tertiary shadow-sm');
const buttonClass = cn(
'relative overflow-hidden rounded-xl transition-all duration-300 hover:border-border-medium hover:bg-surface-hover hover:shadow-lg active:scale-[0.98]',
{
'border-border-medium bg-surface-hover shadow-lg': isSelected,
'border-border-light bg-surface-tertiary shadow-sm': !isSelected,
},
);
const actionLabel = isSelected
? localize('com_ui_click_to_close')

6
client/src/components/Artifacts/ArtifactCodeEditor.tsx
View file

@ -1,5 +1,6 @@
import debounce from 'lodash/debounce';
import React, { useMemo, useState, useEffect, useCallback } from 'react';
import debounce from 'lodash/debounce';
import { KeyBinding } from '@codemirror/view';
import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
import {
useSandpack,
@ -118,8 +119,7 @@ const CodeEditor = ({
showInlineErrors={true}
readOnly={readOnly === true}
extensions={[autocompletion()]}
// @ts-ignore
extensionsKeymap={[completionKeymap]}
extensionsKeymap={Array.from<KeyBinding>(completionKeymap)}
className="hljs language-javascript bg-black"
/>
);

14
client/src/components/Artifacts/Artifacts.tsx
View file

@ -67,10 +67,10 @@ export default function Artifacts() {
if (height <= minHeightForBlur) {
setBlurAmount(0);
} else if (height >= maxHeightForBlur) {
setBlurAmount(32);
setBlurAmount(MAX_BLUR_AMOUNT);
} else {
const progress = (height - minHeightForBlur) / (maxHeightForBlur - minHeightForBlur);
setBlurAmount(Math.round(progress * 32));
setBlurAmount(Math.round(progress * MAX_BLUR_AMOUNT));
}
}, [height, isMobile]);
@ -151,7 +151,15 @@ export default function Artifacts() {
}
};
const backdropOpacity = blurAmount > 0 ? Math.min(0.3, blurAmount / 53.33) : 0;
// Matches the maximum blur applied when the sheet is fully expanded
const MAX_BLUR_AMOUNT = 32;
// Ensures the backdrop caps at 30% opacity when blur reaches its maximum
const MAX_BACKDROP_OPACITY = 0.3;
const backdropOpacity =
blurAmount > 0
? (Math.min(blurAmount, MAX_BLUR_AMOUNT) / MAX_BLUR_AMOUNT) * MAX_BACKDROP_OPACITY
: 0;
return (
<Tabs.Root value={activeTab} onValueChange={setActiveTab} asChild>