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

feat: Enhance artifact panel animations and improve UI responsiveness

Browse source 
- Updated Thinking component button styles for smoother transitions.
- Implemented dynamic rendering for artifacts panel with animation effects.
- Refactored localization keys for consistency across multiple languages.
- Added new CSS animations for iOS-inspired smooth transitions.
- Improved Tailwind CSS configuration to support enhanced animation effects.
This commit is contained in:
Marco Beretta 2025-10-24 11:08:57 +02:00
parent 44fa479bd4
commit 7e1d02bcc3
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
35 changed files with 416 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

79
client/tailwind.config.cjs
View file

@ -47,6 +47,69 @@ module.exports = {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(100%)' },
},
// iOS-inspired smooth animations
'artifact-slide-up': {
'0%': {
transform: 'translateY(100%) scale(0.95)',
opacity: '0',
},
'100%': {
transform: 'translateY(0) scale(1)',
opacity: '1',
},
},
'artifact-slide-down': {
'0%': {
transform: 'translateY(0) scale(1)',
opacity: '1',
},
'100%': {
transform: 'translateY(100%) scale(0.95)',
opacity: '0',
},
},
'artifact-slide-in-desktop': {
'0%': {
transform: 'translateX(20px)',
opacity: '0',
},
'100%': {
transform: 'translateX(0)',
opacity: '1',
},
},
'artifact-slide-out-desktop': {
'0%': {
transform: 'translateX(0)',
opacity: '1',
},
'100%': {
transform: 'translateX(20px)',
opacity: '0',
},
},
'backdrop-fade-in': {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
'backdrop-fade-out': {
'0%': { opacity: '1' },
'100%': { opacity: '0' },
},
'tab-slide': {
'0%': { transform: 'translateX(var(--tab-slide-from))' },
'100%': { transform: 'translateX(var(--tab-slide-to))' },
},
'thinking-appear': {
'0%': {
opacity: '0',
transform: 'scale(0.9) translateY(4px)',
},
'100%': {
opacity: '1',
transform: 'scale(1) translateY(0)',
},
},
},
animation: {
'fade-in': 'fadeIn 0.5s ease-out forwards',
@ -56,6 +119,22 @@ module.exports = {
'slide-in-left': 'slide-in-left 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',
'slide-out-left': 'slide-out-left 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',
'slide-out-right': 'slide-out-right 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',
// iOS-inspired smooth animations
'artifact-slide-up': 'artifact-slide-up 0.45s cubic-bezier(0.32, 0.72, 0, 1)',
'artifact-slide-down': 'artifact-slide-down 0.35s cubic-bezier(0.32, 0.72, 0, 1)',
'artifact-slide-in-desktop':
'artifact-slide-in-desktop 0.5s cubic-bezier(0.32, 0.72, 0, 1)',
'artifact-slide-out-desktop':
'artifact-slide-out-desktop 0.35s cubic-bezier(0.32, 0.72, 0, 1)',
'backdrop-fade-in': 'backdrop-fade-in 0.3s cubic-bezier(0.32, 0.72, 0, 1)',
'backdrop-fade-out': 'backdrop-fade-out 0.25s cubic-bezier(0.32, 0.72, 0, 1)',
'tab-slide': 'tab-slide 0.35s cubic-bezier(0.32, 0.72, 0, 1)',
'thinking-appear': 'thinking-appear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
},
transitionTimingFunction: {
ios: 'cubic-bezier(0.32, 0.72, 0, 1)',
'ios-spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
'ios-decelerate': 'cubic-bezier(0, 0, 0.2, 1)',
},
colors: {
gray: {