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: Enhance UI/UX for Font Size, Mentions, and Prompts (#3575)

Browse source 
* style: fix prompts icon shrinking in command popover

* fix: scroll into view behavior for mentions

* fix: always apply default font size if not found

* refactor: Update useMessageScrolling threshold and debounceRate
This commit is contained in:
Danny Avila 2024-08-08 10:02:30 -04:00 • committed by GitHub
parent 2bb0842650
commit b3821c1404
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 36 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

24
client/src/components/Chat/Input/MentionItem.tsx
View file

@ -9,37 +9,37 @@ export default function MentionItem({
icon,
isActive,
description,
type = 'mention',
}: {
name: string;
onClick: () => void;
index: number;
type?: 'prompt' | 'mention' | 'add-convo';
icon?: React.ReactNode;
isActive?: boolean;
description?: string;
}) {
return (
<div tabIndex={index} onClick={onClick} id={`mention-item-${index}`} className="cursor-pointer">
<button tabIndex={index} onClick={onClick} id={`${type}-item-${index}`} className="w-full">
<div
className={cn(
'text-token-text-primary bg-token-main-surface-secondary group flex h-10 items-center gap-2 rounded-lg px-2 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-600',
isActive ? 'bg-gray-100 dark:bg-gray-600' : '',
'text-token-text-primary bg-token-main-surface-secondary group flex h-10 items-center gap-2 rounded-lg px-2 text-sm font-medium hover:bg-surface-secondary',
isActive ? 'bg-surface-active' : 'bg-transparent',
)}
>
{icon ? icon : null}
<div className="flex h-fit grow flex-row justify-between space-x-2 overflow-hidden text-ellipsis whitespace-nowrap">
<div className="flex flex-row space-x-2">
<span className="shrink-0 truncate">{name}</span>
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center">{icon}</div>
<div className="flex min-w-0 flex-grow items-center justify-between">
<div className="truncate">
<span className="font-medium">{name}</span>
{description ? (
<span className="text-token-text-tertiary flex-grow truncate text-sm font-light sm:max-w-xs lg:max-w-md">
<span className="text-token-text-tertiary ml-2 text-sm font-light">
{description}
</span>
) : null}
</div>
<span className="shrink-0 self-center">
<Clock4 size={16} className="icon-sm" />
</span>
<Clock4 size={16} className="ml-2 flex-shrink-0" />
</div>
</div>
</div>
</button>
);
}