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

🌿 refactor: Unmount Fork Popover on Hide for Performance (#7189)

Browse source
This commit is contained in:
Danny Avila 2025-05-02 02:43:59 -04:00 • committed by GitHub
parent 5efad8f646
commit 5d6d13efe8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 37 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/src/components/Conversations/Fork.tsx
View file

@ -95,6 +95,7 @@ const PopoverButton: React.FC<PopoverButtonProps> = ({
gutter={16} gutter={16}
className="z-[999] w-80 rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md" className="z-[999] w-80 rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
portal={true} portal={true}
unmountOnHide={true}
> >
<div className="space-y-2"> <div className="space-y-2">
<p className="flex flex-col gap-2 text-sm text-text-secondary"> <p className="flex flex-col gap-2 text-sm text-text-secondary">
@ -179,12 +180,16 @@ export default function Fork({
return ( return (
<> <>
<Ariakit.PopoverAnchor store={popoverStore}> <Ariakit.PopoverAnchor
store={popoverStore}
render={
<button <button
className={cn( className={cn(
'hover-button active rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible', 'hover-button active rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
'data-[state=open]:active focus:opacity-100 data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200', 'data-[state=open]:active focus:opacity-100 data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200',
!isLast ? 'data-[state=open]:opacity-100 md:opacity-0 md:group-hover:opacity-100' : '', !isLast
? 'data-[state=open]:opacity-100 md:opacity-0 md:group-hover:opacity-100'
: '',
)} )}
onClick={(e) => { onClick={(e) => {
if (rememberGlobal) { if (rememberGlobal) {
@ -205,7 +210,8 @@ export default function Fork({
> >
<GitFork className="h-4 w-4 hover:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" /> <GitFork className="h-4 w-4 hover:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
</button> </button>
</Ariakit.PopoverAnchor> }
/>
<Ariakit.Popover <Ariakit.Popover
store={popoverStore} store={popoverStore}
gutter={5} gutter={5}
@ -216,6 +222,7 @@ export default function Fork({
zIndex: 50, zIndex: 50,
}} }}
portal={true} portal={true}
unmountOnHide={true}
> >
<div className="flex h-8 w-full items-center justify-center text-sm text-text-primary"> <div className="flex h-8 w-full items-center justify-center text-sm text-text-primary">
{localize(activeSetting)} {localize(activeSetting)}
@ -240,6 +247,7 @@ export default function Fork({
gutter={19} gutter={19}
className="z-[999] w-80 rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md" className="z-[999] w-80 rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
portal={true} portal={true}
unmountOnHide={true}
> >
<div className="flex flex-col gap-2 space-y-2 text-sm text-text-secondary"> <div className="flex flex-col gap-2 space-y-2 text-sm text-text-secondary">
<span>{localize('com_ui_fork_info_1')}</span> <span>{localize('com_ui_fork_info_1')}</span>
@ -336,6 +344,7 @@ export default function Fork({
gutter={32} gutter={32}
className="z-[999] w-80 select-none rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md" className="z-[999] w-80 select-none rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
portal={true} portal={true}
unmountOnHide={true}
> >
<div className="space-y-2"> <div className="space-y-2">
<p className="text-sm text-text-secondary">{localize('com_ui_fork_info_start')}</p> <p className="text-sm text-text-secondary">{localize('com_ui_fork_info_start')}</p>
@ -386,6 +395,7 @@ export default function Fork({
gutter={14} gutter={14}
className="z-[999] w-80 rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md" className="z-[999] w-80 rounded-md border border-border-medium bg-surface-secondary p-4 text-text-primary shadow-md"
portal={true} portal={true}
unmountOnHide={true}
> >
<div className="space-y-2"> <div className="space-y-2">
<p className="text-sm text-text-secondary">{localize('com_ui_fork_info_remember')}</p> <p className="text-sm text-text-secondary">{localize('com_ui_fork_info_remember')}</p>