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

🖼️ chore: Linting & Transition Styling in UI Components (#7467)

Browse source 
* chore: linting

* 🔧 fix: Correctly parse dimensions for image width and height in OpenAIImageGen component

* style: overlay class for DialogImage component to improve visibility

* style: Update transition timing function for PixelCard component to rely on style props
This commit is contained in:
Danny Avila 2025-05-20 09:24:52 -04:00 • committed by GitHub
parent 59109cd2dd
commit af96666ff4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 18 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

26
client/src/components/Chat/Input/Files/FileRow.tsx
View file

@ -75,20 +75,20 @@ export default function FileRow({
const renderFiles = () => { const renderFiles = () => {
const rowStyle = isRTL const rowStyle = isRTL
? { ? {
display: 'flex', display: 'flex',
flexDirection: 'row-reverse', flexDirection: 'row-reverse',
flexWrap: 'wrap', flexWrap: 'wrap',
gap: '4px', gap: '4px',
width: '100%', width: '100%',
maxWidth: '100%', maxWidth: '100%',
} }
: { : {
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',
gap: '4px', gap: '4px',
width: '100%', width: '100%',
maxWidth: '100%', maxWidth: '100%',
}; };
return ( return (
<div style={rowStyle as React.CSSProperties}> <div style={rowStyle as React.CSSProperties}>

2
client/src/components/Chat/Messages/Content/DialogImage.tsx
View file

@ -8,7 +8,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
showCloseButton={false} showCloseButton={false}
className="h-full w-full rounded-none bg-transparent" className="h-full w-full rounded-none bg-transparent"
disableScroll={false} disableScroll={false}
overlayClassName="bg-surface-secondary" overlayClassName="bg-surface-primary opacity-95 z-50"
> >
<div className="absolute left-0 right-0 top-0 flex items-center justify-between p-4"> <div className="absolute left-0 right-0 top-0 flex items-center justify-between p-4">
<Button <Button

4
client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
View file

@ -194,8 +194,8 @@ export default function OpenAIImageGen({
<Image <Image
altText={filename} altText={filename}
imagePath={filepath ?? ''} imagePath={filepath ?? ''}
width={dimensions.width} width={Number(dimensions.width?.split('px')[0])}
height={dimensions.height} height={Number(dimensions.height?.split('px')[0])}
placeholderDimensions={{ width: dimensions.width, height: dimensions.height }} placeholderDimensions={{ width: dimensions.width, height: dimensions.height }}
/> />
</div> </div>

3
client/src/components/ui/PixelCard.tsx
View file

@ -350,12 +350,13 @@ export default function PixelCard({
> >
<div <div
className={cn( className={cn(
'ease-[cubic-bezier(0.5,1,0.89,1)] relative isolate grid select-none place-items-center overflow-hidden rounded-lg border border-border-light shadow-md transition-colors duration-200', 'relative isolate grid select-none place-items-center overflow-hidden rounded-lg border border-border-light shadow-md transition-colors duration-200 ease-in-out',
className, className,
)} )}
style={{ style={{
width: '100%', width: '100%',
height: '100%', height: '100%',
transitionTimingFunction: 'cubic-bezier(0.5, 1, 0.89, 1)',
}} }}
onMouseEnter={hoverIn} onMouseEnter={hoverIn}
onMouseLeave={hoverOut} onMouseLeave={hoverOut}