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

📧 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

46
client/src/components/Chat/Input/MentionItem.tsx Normal file
View file

@ -0,0 +1,46 @@
import React from 'react';
import { Clock4 } from 'lucide-react';
import { cn } from '~/utils';
export default function MentionItem({
name,
onClick,
index,
icon,
isActive,
description,
}: {
name: string;
onClick: () => void;
index: number;
icon?: React.ReactNode;
isActive?: boolean;
description?: string;
}) {
return (
<div tabIndex={index} onClick={onClick} id={`mention-item-${index}`} className="cursor-pointer">
<div
className={cn(
'hover:bg-token-main-surface-secondary 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 dark:hover:bg-gray-600',
index === 0 ? 'dark:bg-gray-600' : '',
isActive ? 'dark:bg-gray-600' : '',
)}
>
{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>
{description ? (
<span className="text-token-text-tertiary flex-grow truncate text-sm font-light sm:max-w-xs lg:max-w-md">
{description}
</span>
) : null}
</div>
<span className="shrink-0 self-center">
<Clock4 size={16} className="icon-sm" />
</span>
</div>
</div>
</div>
);
}