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

🎨 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

16
client/src/components/Chat/Input/BadgeRow.tsx
View file

@ -17,11 +17,13 @@ import store from '~/store';
interface BadgeRowProps {
onChange: (badges: Pick<BadgeItem, 'id'>[]) => void;
onToggle?: (badgeId: string, currentActive: boolean) => void;
isInChat: boolean;
}
interface BadgeWrapperProps {
badge: BadgeItem;
isEditing: boolean;
isInChat: boolean;
onToggle: (badge: BadgeItem) => void;
onDelete: (id: string) => void;
onMouseDown: (e: React.MouseEvent, badge: BadgeItem, isActive: boolean) => void;
@ -30,7 +32,7 @@ interface BadgeWrapperProps {
const BadgeWrapper = React.memo(
forwardRef<HTMLDivElement, BadgeWrapperProps>(
({ badge, isEditing, onToggle, onDelete, onMouseDown, badgeRefs }, ref) => {
({ badge, isEditing, isInChat, onToggle, onDelete, onMouseDown, badgeRefs }, ref) => {
const isActive = badge.atom ? useRecoilValue(badge.atom) : false;
return (
@ -49,11 +51,13 @@ const BadgeWrapper = React.memo(
className={isEditing ? 'ios-wiggle badge-icon h-full' : 'badge-icon h-full'}
>
<Badge
id={badge.id}
icon={badge.icon as LucideIcon}
label={badge.label}
isActive={isActive}
isEditing={isEditing}
isAvailable={badge.isAvailable}
isInChat={isInChat}
onToggle={() => onToggle(badge)}
onBadgeAction={() => onDelete(badge.id)}
/>
@ -64,6 +68,7 @@ const BadgeWrapper = React.memo(
(prevProps, nextProps) =>
prevProps.badge.id === nextProps.badge.id &&
prevProps.isEditing === nextProps.isEditing &&
prevProps.isInChat === nextProps.isInChat &&
prevProps.onToggle === nextProps.onToggle &&
prevProps.onDelete === nextProps.onDelete &&
prevProps.onMouseDown === nextProps.onMouseDown &&
@ -121,7 +126,7 @@ const dragReducer = (state: DragState, action: DragAction): DragState => {
}
};
export function BadgeRow({ onChange, onToggle }: BadgeRowProps) {
export function BadgeRow({ onChange, onToggle, isInChat }: BadgeRowProps) {
const [orderedBadges, setOrderedBadges] = useState<BadgeItem[]>([]);
const [dragState, dispatch] = useReducer(dragReducer, {
draggedBadge: null,
@ -301,17 +306,20 @@ export function BadgeRow({ onChange, onToggle }: BadgeRowProps) {
{dragState.draggedBadge && dragState.insertIndex === index && ghostBadge && (
<div className="badge-icon h-full">
<Badge
id={ghostBadge.id}
icon={ghostBadge.icon as LucideIcon}
label={ghostBadge.label}
isActive={dragState.draggedBadgeActive}
isEditing={isEditing}
isAvailable={ghostBadge.isAvailable}
isInChat={isInChat}
/>
</div>
)}
<BadgeWrapper
badge={badge}
isEditing={isEditing}
isInChat={isInChat}
onToggle={handleBadgeToggle}
onDelete={handleDelete}
onMouseDown={handleMouseDown}
@ -322,11 +330,13 @@ export function BadgeRow({ onChange, onToggle }: BadgeRowProps) {
{dragState.draggedBadge && dragState.insertIndex === tempBadges.length && ghostBadge && (
<div className="badge-icon h-full">
<Badge
id={ghostBadge.id}
icon={ghostBadge.icon as LucideIcon}
label={ghostBadge.label}
isActive={dragState.draggedBadgeActive}
isEditing={isEditing}
isAvailable={ghostBadge.isAvailable}
isInChat={isInChat}
/>
</div>
)}
@ -343,10 +353,12 @@ export function BadgeRow({ onChange, onToggle }: BadgeRowProps) {
}}
>
<Badge
id={ghostBadge.id}
icon={ghostBadge.icon as LucideIcon}
label={ghostBadge.label}
isActive={dragState.draggedBadgeActive}
isAvailable={ghostBadge.isAvailable}
isInChat={isInChat}
isEditing
isDragging
/>