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

📧 feat: Mention "@" Command Popover (#2635)

Browse source 
* feat: initial mockup

* wip: activesetting, may use or not use

* wip: mention with useCombobox usage

* feat: connect textarea to new mention popover

* refactor: consolidate icon logic for Landing/convos

* refactor: cleanup URL logic

* refactor(useTextarea): key up handler

* wip: render desired mention options

* refactor: improve mention detection

* feat: modular chat the default option

* WIP: first pass mention selection

* feat: scroll mention items with keypad

* chore(showMentionPopoverFamily): add typing to atomFamily

* feat: removeAtSymbol

* refactor(useListAssistantsQuery): use defaultOrderQuery as default param

* feat: assistants mentioning

* fix conversation switch errors

* filter mention selections based on startup settings and available endpoints

* fix: mentions model spec icon URL

* style: archive icon

* fix: convo renaming behavior on click

* fix(Convo): toggle hover state

* style: EditMenu refactor

* fix: archive chats table

* fix: errorsToString import

* chore: remove comments

* chore: remove comment

* feat: mention descriptions

* refactor: make sure continue hover button is always last, add correct fork button alt text
This commit is contained in:
Danny Avila 2024-05-07 13:13:55 -04:00 • committed by GitHub
parent 89b1e33be0
commit b6d6343f54
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
35 changed files with 1048 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

32
client/src/components/Conversations/HoverToggle.tsx Normal file
View file

@ -0,0 +1,32 @@
import React, { useState } from 'react';
import { ToggleContext } from './ToggleContext';
import { cn } from '~/utils';
const HoverToggle = ({
children,
isActiveConvo,
}: {
children: React.ReactNode;
isActiveConvo: boolean;
}) => {
const [isPopoverActive, setIsPopoverActive] = useState(false);
const setPopoverActive = (value: boolean) => setIsPopoverActive(value);
return (
<ToggleContext.Provider value={{ setPopoverActive }}>
<div
className={cn(
'peer absolute bottom-0 right-0 top-0 items-center gap-1.5 rounded-r-lg from-gray-900 pl-2 pr-2 text-gray-500 dark:text-gray-300',
isPopoverActive || isActiveConvo ? 'flex' : 'hidden group-hover:flex',
isActiveConvo
? 'from-gray-50 from-85% to-transparent group-hover:bg-gradient-to-l group-hover:from-gray-200 dark:from-gray-750 dark:group-hover:from-gray-750'
: 'z-50 bg-gray-200 from-gray-50 from-0% to-transparent hover:bg-gray-200 hover:bg-gradient-to-l dark:bg-gray-800 dark:from-gray-750 dark:hover:bg-gray-800',
isPopoverActive && !isActiveConvo ? 'bg-gray-50 dark:bg-gray-750' : '',
)}
>
{children}
</div>
</ToggleContext.Provider>
);
};
export default HoverToggle;