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

🎨 style: Address Minor UI Refresh Issues (#6552)

Browse source 
* 🎨 style: Adjust isSelected svg layout of ModelSpecItem

* style: fix modelSpec URL image beeing off-center; style: selected svg centered vertically

* style: Update CustomMenu component to use rounded-lg and enhance focus styles

* style: SidePanel top padding same as NewChat

* fix: prevent unnecessary space rendering in SplitText component

* style: Fix class names and enhance layout in Badge components

* feat: disable temporary chat when in chat

* style: handle > 1 lines in title Landing

* feat: enhance dynamic margin calculation based on line count and content height in Landing component
This commit is contained in:
Marco Beretta 2025-03-26 23:57:29 +01:00 • committed by GitHub
parent 6b58547c63
commit 3ba7c4eb19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 147 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

24
client/src/components/ui/Badge.tsx
View file

@ -1,3 +1,5 @@
import type React from 'react';
import { X, Plus } from 'lucide-react';
import { motion } from 'framer-motion';
import type { ButtonHTMLAttributes } from 'react';
@ -7,10 +9,12 @@ import { cn } from '~/utils';
interface BadgeProps extends ButtonHTMLAttributes<HTMLButtonElement> {
icon?: LucideIcon;
label: string;
id?: string;
isActive?: boolean;
isEditing?: boolean;
isDragging?: boolean;
isAvailable: boolean;
isInChat?: boolean;
onBadgeAction?: () => void;
onToggle?: () => void;
}
@ -18,18 +22,27 @@ interface BadgeProps extends ButtonHTMLAttributes<HTMLButtonElement> {
export default function Badge({
icon: Icon,
label,
id,
isActive = false,
isEditing = false,
isDragging = false,
isAvailable = true,
isInChat = false,
onBadgeAction,
onToggle,
className,
...props
}: BadgeProps) {
const isMoveable = isEditing && isAvailable;
const isDisabled = id === '1' && isInChat;
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
if (isDisabled) {
e.preventDefault();
e.stopPropagation();
return;
}
if (!isEditing && onToggle) {
if (typeof window !== 'undefined' && window.innerWidth >= 768) {
e.preventDefault();
@ -44,27 +57,30 @@ export default function Badge({
onClick={handleClick}
className={cn(
'group relative inline-flex items-center gap-1.5 rounded-full px-4 py-1.5',
'border border-border-medium text-sm font-medium transition-shadow',
'border border-border-medium text-sm font-medium transition-shadow md:w-full',
'size-9 p-2 md:p-3',
isActive
? 'bg-surface-active shadow-md'
: 'bg-surface-chat shadow-sm hover:bg-surface-hover hover:shadow-md',
'active:scale-95 active:shadow-inner',
isMoveable && 'cursor-move',
isDisabled && 'cursor-not-allowed opacity-50 hover:shadow-sm',
className,
)}
animate={{
scale: isDragging ? 1.1 : 1,
boxShadow: isDragging ? '0 10px 25px rgba(0,0,0,0.1)' : undefined,
}}
whileTap={{ scale: isDragging ? 1.1 : 0.97 }}
whileTap={{ scale: isDragging ? 1.1 : isDisabled ? 1 : 0.97 }}
transition={{ type: 'tween', duration: 0.1, ease: 'easeOut' }}
{...props}
>
{Icon && <Icon className="relative h-4 w-4" />}
{Icon && <Icon className={cn('relative h-5 w-5 md:h-4 md:w-4', !label && 'mx-auto')} />}
<span className="relative hidden md:inline">{label}</span>
{isEditing && !isDragging && (
<motion.button
className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-surface-secondary-alt text-text-primary"
className="absolute -right-1 -top-1 flex h-6 w-6 items-center justify-center rounded-full bg-surface-secondary-alt text-text-primary shadow-sm md:h-5 md:w-5"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.8 }}