dka/LibreChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve styling and animations in Artifacts, ArtifactsSubMenu, and MCPSubMenu components; update border-radius in style.css

Browse Source
This commit is contained in:
Marco Beretta
2025-09-25 23:19:47 +02:00
parent 78a0dd2884
commit e6c1f7eb5a
7 changed files with 123 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/components/Chat/Input/Artifacts.tsx
View File

@@ -79,19 +79,17 @@ function Artifacts() {
)}
onClick={(e) => e.stopPropagation()}
>
<ChevronDown className="ml-1 h-4 w-4 text-text-secondary md:ml-0" />
<ChevronDown className="ml-0.5 h-4 w-4 text-text-secondary" />
</Ariakit.MenuButton>
<Ariakit.Menu
gutter={8}
gutter={4}
className={cn(
'animate-popover z-50 flex max-h-[300px]',
'flex-col overflow-auto overscroll-contain rounded-xl',
'bg-surface-secondary px-1.5 py-1 text-text-primary shadow-lg',
'border border-border-light',
'min-w-[250px] outline-none',
'animate-popover-top-left z-50 flex min-w-[250px] flex-col rounded-xl',
'border border-border-light bg-surface-secondary shadow-lg',
)}
portal
portal={true}
unmountOnHide={true}
>
<div className="px-2 py-1.5">
<div className="mb-2 text-xs font-medium text-text-secondary">
@@ -106,18 +104,16 @@ function Artifacts() {
event.stopPropagation();
handleShadcnToggle();
}}
disabled={isCustomEnabled}
className={cn(
'mb-1 flex items-center justify-between rounded-lg px-2 py-2',
'cursor-pointer outline-none transition-colors',
'hover:bg-black/[0.075] dark:hover:bg-white/10',
'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
isCustomEnabled && 'cursor-not-allowed opacity-50',
'mb-1 flex items-center justify-between gap-2 rounded-lg px-2 py-2',
'cursor-pointer bg-surface-secondary text-text-primary outline-none transition-colors',
'hover:bg-surface-hover data-[active-item]:bg-surface-hover',
isShadcnEnabled && 'bg-surface-active',
)}
>
<div className="flex items-center gap-2">
<span className="text-sm">{localize('com_ui_include_shadcnui' as any)}</span>
<div className="ml-auto flex items-center">
<Ariakit.MenuItemCheck checked={isShadcnEnabled} />
<span className="text-sm">{localize('com_ui_include_shadcnui' as any)}</span>
</div>
</Ariakit.MenuItem>
@@ -130,15 +126,15 @@ function Artifacts() {
handleCustomToggle();
}}
className={cn(
'flex items-center justify-between rounded-lg px-2 py-2',
'cursor-pointer outline-none transition-colors',
'hover:bg-black/[0.075] dark:hover:bg-white/10',
'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
'mb-1 flex items-center justify-between gap-2 rounded-lg px-2 py-2',
'cursor-pointer bg-surface-secondary text-text-primary outline-none transition-colors',
'hover:bg-surface-hover data-[active-item]:bg-surface-hover',
isCustomEnabled && 'bg-surface-active',
)}
>
<div className="flex items-center gap-2">
<span className="text-sm">{localize('com_ui_custom_prompt_mode' as any)}</span>
<div className="ml-auto flex items-center">
<Ariakit.MenuItemCheck checked={isCustomEnabled} />
<span className="text-sm">{localize('com_ui_custom_prompt_mode' as any)}</span>
</div>
</Ariakit.MenuItem>
</div>

30
client/src/components/Chat/Input/ArtifactsSubMenu.tsx
View File

@@ -90,8 +90,8 @@ const ArtifactsSubMenu = React.forwardRef<HTMLDivElement, ArtifactsSubMenuProps>
portal={true}
unmountOnHide={true}
className={cn(
'animate-popover-left z-50 ml-3 flex min-w-[250px] flex-col rounded-xl',
'border border-border-light bg-surface-secondary px-1.5 py-1 shadow-lg',
'animate-popover-left z-50 ml-3 mt-6 flex min-w-[250px] flex-col rounded-xl',
'border border-border-light bg-surface-secondary shadow-lg',
)}
>
<div className="px-2 py-1.5">
@@ -107,18 +107,16 @@ const ArtifactsSubMenu = React.forwardRef<HTMLDivElement, ArtifactsSubMenuProps>
event.stopPropagation();
handleShadcnToggle();
}}
disabled={isCustomEnabled}
className={cn(
'mb-1 flex items-center justify-between rounded-lg px-2 py-2',
'cursor-pointer text-text-primary outline-none transition-colors',
'hover:bg-black/[0.075] dark:hover:bg-white/10',
'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
isCustomEnabled && 'cursor-not-allowed opacity-50',
'mb-1 flex items-center justify-between gap-2 rounded-lg px-2 py-2',
'cursor-pointer bg-surface-secondary text-text-primary outline-none transition-colors',
'hover:bg-surface-hover data-[active-item]:bg-surface-hover',
isShadcnEnabled && 'bg-surface-active',
)}
>
<div className="flex items-center gap-2">
<span className="text-sm">{localize('com_ui_include_shadcnui' as any)}</span>
<div className="ml-auto flex items-center">
<Ariakit.MenuItemCheck checked={isShadcnEnabled} />
<span className="text-sm">{localize('com_ui_include_shadcnui' as any)}</span>
</div>
</Ariakit.MenuItem>
@@ -131,15 +129,15 @@ const ArtifactsSubMenu = React.forwardRef<HTMLDivElement, ArtifactsSubMenuProps>
handleCustomToggle();
}}
className={cn(
'flex items-center justify-between rounded-lg px-2 py-2',
'cursor-pointer text-text-primary outline-none transition-colors',
'hover:bg-black/[0.075] dark:hover:bg-white/10',
'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
'mb-1 flex items-center justify-between gap-2 rounded-lg px-2 py-2',
'cursor-pointer bg-surface-secondary text-text-primary outline-none transition-colors',
'hover:bg-surface-hover data-[active-item]:bg-surface-hover',
isCustomEnabled && 'bg-surface-active',
)}
>
<div className="flex items-center gap-2">
<span className="text-sm">{localize('com_ui_custom_prompt_mode' as any)}</span>
<div className="ml-auto flex items-center">
<Ariakit.MenuItemCheck checked={isCustomEnabled} />
<span className="text-sm">{localize('com_ui_custom_prompt_mode' as any)}</span>
</div>
</Ariakit.MenuItem>
</div>

1
client/src/components/Chat/Input/ChatForm.tsx
View File

@@ -247,6 +247,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
)}
>
<TextareaHeader addedConvo={addedConvo} setAddedConvo={setAddedConvo} />
{/* WIP */}
<EditBadges
isEditingChatBadges={isEditingBadges}
handleCancelBadges={handleCancelBadges}

2
client/src/components/Chat/Input/MCPSubMenu.tsx
View File

@@ -108,10 +108,10 @@ const MCPSubMenu = React.forwardRef<HTMLDivElement, MCPSubMenuProps>(
'w-full min-w-0 justify-between text-sm',
isServerInitializing &&
'opacity-50 hover:bg-transparent dark:hover:bg-transparent',
isSelected && 'bg-surface-active',
)}
>
<div className="flex flex-grow items-center gap-2">
<Ariakit.MenuItemCheck checked={isSelected} />
<span>{serverName}</span>
</div>
{statusIcon && <div className="ml-2 flex items-center">{statusIcon}</div>}

2
client/src/components/Chat/Input/ToolsDropdown.tsx
View File

@@ -310,7 +310,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
)}
>
<div className="flex w-full items-center justify-center gap-2">
<Settings2 className="icon-md" />
<Settings2 className="icon-md" strokeWidth={4} />
</div>
</Ariakit.MenuButton>
}

7
client/src/components/Nav/AccountSettings.tsx
View File

@@ -25,7 +25,7 @@ function AccountSettings() {
<Select.Select
aria-label={localize('com_nav_account_settings')}
data-testid="nav-user"
className="mt-text-sm flex h-auto w-full items-center gap-2 rounded-xl p-2 text-sm transition-all duration-200 ease-in-out hover:bg-surface-hover"
className="mt-text-sm flex h-auto w-full items-center gap-2 rounded-xl p-2 text-sm transition-all duration-200 ease-in-out hover:bg-surface-hover aria-[expanded=true]:bg-surface-hover"
>
<div className="-ml-0.9 -mt-0.8 h-8 w-8 flex-shrink-0">
<div className="relative flex">
@@ -40,11 +40,10 @@ function AccountSettings() {
</div>
</Select.Select>
<Select.SelectPopover
className="popover-ui w-[235px]"
className="popover-ui w-[305px] rounded-lg md:w-[235px]"
style={{
transformOrigin: 'bottom',
marginRight: '0px',
translate: '0px',
translate: '0 -4px',
}}
>
<div className="text-token-text-secondary ml-3 mr-2 py-2 text-sm" role="note">

88
client/src/style.css
View File

@@ -2581,7 +2581,7 @@ html {
flex-direction: column;
overflow: auto;
overscroll-behavior: contain;
border-radius: 1rem;
border-radius: 0.7rem;
border-width: 1px;
border-style: solid;
border-color: var(--border-light);
@@ -2654,6 +2654,7 @@ html {
translate: 0;
}
.animate-popover-top,
.animate-popover {
transform-origin: top;
opacity: 0;
@@ -2662,12 +2663,13 @@ html {
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(0.95) translateY(-0.5rem);
}
.animate-popover-top[data-enter],
.animate-popover[data-enter] {
opacity: 1;
transform: scale(1) translateY(0);
}
/* Left (existing) */
.animate-popover-left {
transform-origin: left;
opacity: 0;
@@ -2676,12 +2678,92 @@ html {
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(0.95) translateX(-0.5rem);
}
.animate-popover-left[data-enter] {
opacity: 1;
transform: scale(1) translateX(0);
}
/* Right */
.animate-popover-right {
transform-origin: right;
opacity: 0;
transition:
opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(0.95) translateX(0.5rem);
}
.animate-popover-right[data-enter] {
opacity: 1;
transform: scale(1) translateX(0);
}
/* Bottom */
.animate-popover-bottom {
transform-origin: bottom;
opacity: 0;
transition:
opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(0.95) translateY(0.5rem);
}
.animate-popover-bottom[data-enter] {
opacity: 1;
transform: scale(1) translateY(0);
}
/* Corners */
.animate-popover-top-left {
transform-origin: top left;
opacity: 0;
transition:
opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(0.95) translate(-0.5rem, -0.5rem);
}
.animate-popover-top-left[data-enter] {
opacity: 1;
transform: scale(1) translate(0, 0);
}
.animate-popover-top-right {
transform-origin: top right;
opacity: 0;
transition:
opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(0.95) translate(0.5rem, -0.5rem);
}
.animate-popover-top-right[data-enter] {
opacity: 1;
transform: scale(1) translate(0, 0);
}
.animate-popover-bottom-left {
transform-origin: bottom left;
opacity: 0;
transition:
opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(0.95) translate(-0.5rem, 0.5rem);
}
.animate-popover-bottom-left[data-enter] {
opacity: 1;
transform: scale(1) translate(0, 0);
}
.animate-popover-bottom-right {
transform-origin: bottom right;
opacity: 0;
transition:
opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(0.95) translate(0.5rem, 0.5rem);
}
.animate-popover-bottom-right[data-enter] {
opacity: 1;
transform: scale(1) translate(0, 0);
}
/** Note: ensure KaTeX can spread across visible space */
.message-content pre:has(> span.katex) {
overflow: visible !important;