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

* 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

client/src/components/Conversations/ArchiveButton.tsx

@@ -59,7 +59,7 @@ export default function ArchiveButton({
     );
   };
   const classProp: { className?: string } = {
-    className: 'p-1 hover:text-black dark:hover:text-white',
+    className: 'z-50 hover:text-black dark:hover:text-white',
   };
   if (twcss) {
     classProp.className = twcss;
@@ -69,7 +69,7 @@ export default function ArchiveButton({
       <TooltipProvider delayDuration={250}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <span>{icon}</span>
+            <span className="h-5 w-5">{icon}</span>
           </TooltipTrigger>
           <TooltipContent side="top" sideOffset={0}>
             {localize(`com_ui_${label}`)}

client/src/components/Conversations/Convo.tsx

@@ -4,18 +4,19 @@ import { useState, useRef, useMemo } from 'react';
 import { EModelEndpoint, LocalStorageKeys } from 'librechat-data-provider';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { MouseEvent, FocusEvent, KeyboardEvent } from 'react';
-import { MinimalIcon, ConvoIconURL } from '~/components/Endpoints';
 import { useUpdateConversationMutation } from '~/data-provider';
+import EndpointIcon from '~/components/Endpoints/EndpointIcon';
 import { useConversations, useNavigateToConvo } from '~/hooks';
-import { getEndpointField, getIconEndpoint } from '~/utils';
 import { NotificationSeverity } from '~/common';
+import { ArchiveIcon } from '~/components/svg';
 import { useToastContext } from '~/Providers';
-import DeleteButton from './DeleteButton';
-import RenameButton from './RenameButton';
-import store from '~/store';
 import EditMenuButton from './EditMenuButton';
 import ArchiveButton from './ArchiveButton';
-import { Archive } from 'lucide-react';
+import DeleteButton from './DeleteButton';
+import RenameButton from './RenameButton';
+import HoverToggle from './HoverToggle';
+import { cn } from '~/utils';
+import store from '~/store';
 
 type KeyEvent = KeyboardEvent<HTMLInputElement>;
 
@@ -102,128 +103,91 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
     );
   };
 
-  const iconURL = conversation.iconURL ?? '';
-  let endpoint = conversation.endpoint;
-  endpoint = getIconEndpoint({ endpointsConfig, iconURL, endpoint });
-
-  const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
-  const endpointIconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
-
-  let icon: React.ReactNode | null = null;
-  if (iconURL && iconURL.includes('http')) {
-    icon = ConvoIconURL({
-      preset: conversation,
-      context: 'menu-item',
-      endpointIconURL,
-    });
-  } else {
-    icon = MinimalIcon({
-      size: 20,
-      iconURL: endpointIconURL,
-      endpoint,
-      endpointType,
-      model: conversation.model,
-      error: false,
-      className: 'mr-0',
-      isCreatedByUser: false,
-      chatGptLabel: undefined,
-      modelLabel: undefined,
-      jailbreak: undefined,
-    });
-  }
-
   const handleKeyDown = (e: KeyEvent) => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Escape') {
+      setTitleInput(title);
+      setRenaming(false);
+    } else if (e.key === 'Enter') {
       onRename(e);
     }
   };
 
-  const activeConvo =
+  const isActiveConvo =
     currentConvoId === conversationId ||
     (isLatestConvo && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new');
 
-  const aProps = {
-    className:
-      'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-200 dark:bg-gray-700 py-2 px-2',
-  };
-
-  if (!activeConvo) {
-    aProps.className =
-      'group relative grow overflow-hidden whitespace-nowrap rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 py-2 px-2';
-  }
-
   return (
-    <a
-      href={`/c/${conversationId}`}
-      data-testid="convo-item"
-      onClick={clickHandler}
-      {...aProps}
-      title={title}
-    >
-      {icon}
-      <div className="relative line-clamp-1 max-h-5 flex-1 grow overflow-hidden">
-        {renaming === true ? (
+    <div className="hover:bg-token-sidebar-surface-secondary group relative rounded-lg active:opacity-90">
+      {renaming ? (
+        <div className="absolute bottom-0 left-0 right-0 top-0 z-50 flex w-full items-center rounded-lg bg-gray-200 dark:bg-gray-700">
           <input
             ref={inputRef}
             type="text"
-            className="m-0 mr-0 w-full border border-blue-500 bg-transparent p-0 text-sm leading-tight outline-none"
+            className="w-full border border-blue-500 bg-transparent p-0 text-sm leading-tight outline-none"
             value={titleInput}
             onChange={(e) => setTitleInput(e.target.value)}
             onBlur={onRename}
             onKeyDown={handleKeyDown}
           />
-        ) : (
-          title
-        )}
-      </div>
-      {activeConvo ? (
-        <div
-          className={`absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l ${
-            !renaming ? 'from-gray-200 from-60% to-transparent dark:from-gray-700' : ''
-          }`}
-        ></div>
-      ) : (
-        <div className="absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-0% to-transparent group-hover:w-1 group-hover:from-60%"></div>
-      )}
-      {activeConvo ? (
-        <div className="visible absolute right-1 z-10 flex items-center from-gray-900 text-gray-500 dark:text-gray-300">
-          {!renaming && (
-            <EditMenuButton>
-              <div className="flex flex-col gap-4 p-3">
-                <div className="flex items-center gap-2">
-                  <RenameButton
-                    renaming={renaming}
-                    onRename={onRename}
-                    renameHandler={renameHandler}
-                    twcss="flex items-center gap-2"
-                    appendLabel={true}
-                  />
-                </div>
-                <div className="flex items-center gap-2 text-red-500">
-                  <DeleteButton
-                    conversationId={conversationId}
-                    retainView={retainView}
-                    renaming={renaming}
-                    title={title}
-                    twcss="flex items-center gap-2"
-                    appendLabel={true}
-                  />
-                </div>
-              </div>
-            </EditMenuButton>
-          )}
-          {!renaming && (
-            <ArchiveButton
-              conversationId={conversationId}
-              retainView={retainView}
-              shouldArchive={true}
-              icon={<Archive className="h-5 w-5 hover:text-gray-400" />}
-            />
-          )}
         </div>
       ) : (
-        <div className="absolute bottom-0 right-0 top-0 w-14 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 dark:from-gray-750 dark:group-hover:from-gray-800" />
+        <HoverToggle isActiveConvo={isActiveConvo}>
+          <EditMenuButton>
+            <RenameButton
+              renaming={renaming}
+              onRename={onRename}
+              renameHandler={renameHandler}
+              appendLabel={true}
+            />
+            <DeleteButton
+              conversationId={conversationId}
+              retainView={retainView}
+              renaming={renaming}
+              title={title}
+              appendLabel={true}
+              className="group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600"
+            />
+          </EditMenuButton>
+          <ArchiveButton
+            conversationId={conversationId}
+            retainView={retainView}
+            shouldArchive={true}
+            icon={<ArchiveIcon className="w-full hover:text-gray-400" />}
+          />
+        </HoverToggle>
       )}
-    </a>
+      <a
+        href={`/c/${conversationId}`}
+        data-testid="convo-item"
+        onClick={clickHandler}
+        className={cn(
+          isActiveConvo
+            ? 'group relative mt-2 flex cursor-pointer items-center gap-2 break-all rounded-lg rounded-lg bg-gray-200 px-2 py-2 active:opacity-50 dark:bg-gray-700'
+            : 'group relative mt-2 flex grow cursor-pointer items-center gap-2 overflow-hidden whitespace-nowrap break-all rounded-lg rounded-lg px-2 py-2 hover:bg-gray-200 active:opacity-50 dark:hover:bg-gray-800',
+          !isActiveConvo && !renaming ? 'peer-hover:bg-gray-200 dark:peer-hover:bg-gray-800' : '',
+        )}
+        title={title}
+      >
+        <EndpointIcon
+          conversation={conversation}
+          endpointsConfig={endpointsConfig}
+          size={20}
+          context="menu-item"
+        />
+        {!renaming && (
+          <div className="relative line-clamp-1 max-h-5 flex-1 grow overflow-hidden">{title}</div>
+        )}
+        {isActiveConvo ? (
+          <div
+            className={cn(
+              'absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l',
+              !renaming ? 'from-gray-200 from-60% to-transparent dark:from-gray-700' : '',
+            )}
+          />
+        ) : (
+          <div className="absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-0% to-transparent group-hover:w-1 group-hover:from-60%" />
+        )}
+      </a>
+    </div>
   );
 }

client/src/components/Conversations/DeleteButton.tsx

@@ -22,8 +22,8 @@ export default function DeleteButton({
   renaming,
   retainView,
   title,
-  twcss,
   appendLabel = false,
+  className = '',
 }) {
   const localize = useLocalize();
   const queryClient = useQueryClient();
@@ -45,13 +45,6 @@ export default function DeleteButton({
     deleteConvoMutation.mutate({ conversationId, thread_id, source: 'button' });
   }, [conversationId, deleteConvoMutation, queryClient]);
 
-  const classProp: { className?: string } = {
-    className: 'p-1 hover:text-black dark:hover:text-white',
-  };
-  if (twcss) {
-    classProp.className = twcss;
-  }
-
   const renderDeleteButton = () => {
     if (appendLabel) {
       return (
@@ -79,7 +72,7 @@ export default function DeleteButton({
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <button {...classProp}>{renaming ? <CrossIcon /> : renderDeleteButton()}</button>
+        <button className={className}>{renaming ? <CrossIcon /> : renderDeleteButton()}</button>
       </DialogTrigger>
       <DialogTemplate
         showCloseButton={false}

client/src/components/Conversations/EditMenuButton.tsx

@@ -1,34 +1,36 @@
 import type { FC } from 'react';
 import { DotsIcon } from '~/components/svg';
 import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
+import { useToggle } from './ToggleContext';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
 
 type EditMenuButtonProps = {
   children: React.ReactNode;
 };
 const EditMenuButton: FC<EditMenuButtonProps> = ({ children }: EditMenuButtonProps) => {
   const localize = useLocalize();
+  const { setPopoverActive } = useToggle();
 
   return (
-    <Root>
+    <Root onOpenChange={(open) => setPopoverActive(open)}>
       <Trigger asChild>
         <div
           className={cn(
             'pointer-cursor relative flex flex-col text-left focus:outline-none focus:ring-0 focus:ring-offset-0 sm:text-sm',
             'hover:text-gray-400 radix-state-open:text-gray-400 dark:hover:text-gray-400 dark:radix-state-open:text-gray-400',
-            'z-50 flex h-[40px] min-w-4 flex-none items-center justify-center pr-2 focus:ring-0 focus:ring-offset-0',
+            'z-50 flex h-[40px] min-w-4 flex-none items-center justify-center focus:ring-0 focus:ring-offset-0',
           )}
           id="edit-menu-button"
           data-testid="edit-menu-button"
-          title={localize('com_endpoint_examples')}
+          title={localize('com_ui_more_options')}
         >
-          <TooltipProvider delayDuration={250}>
+          <TooltipProvider delayDuration={500}>
             <Tooltip>
               <TooltipTrigger asChild>
                 <button type="button" className="">
-                  <DotsIcon className="h-4 w-4 flex-shrink-0 text-gray-500 hover:text-gray-400 dark:text-gray-300 dark:hover:text-gray-400" />
+                  <DotsIcon className="h-[18px] w-[18px] flex-shrink-0 text-gray-500 hover:text-gray-400 dark:text-gray-300 dark:hover:text-gray-400" />
                 </button>
               </TooltipTrigger>
               <TooltipContent side="top" sideOffset={0}>
@@ -42,7 +44,11 @@ const EditMenuButton: FC<EditMenuButtonProps> = ({ children }: EditMenuButtonPro
         <Content
           side="bottom"
           align="start"
-          className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white md:min-w-[200px]"
+          className={cn(
+            'popover radix-side-bottom:animate-slideUpAndFade radix-side-left:animate-slideRightAndFade radix-side-right:animate-slideLeftAndFade radix-side-top:animate-slideDownAndFade overflow-hidden rounded-lg shadow-lg',
+            'border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-700 dark:text-white',
+            'flex min-w-[200px] max-w-xs flex-wrap',
+          )}
         >
           {children}
         </Content>

client/src/components/Conversations/Fork.tsx

@@ -182,7 +182,7 @@ export default function Fork({
             }
           }}
           type="button"
-          title={localize('com_ui_continue')}
+          title={localize('com_ui_fork')}
         >
           <GitFork className="h-4 w-4 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
         </button>

client/src/components/Conversations/HoverToggle.tsx

@@ -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;

client/src/components/Conversations/RenameButton.tsx

@@ -6,7 +6,6 @@ interface RenameButtonProps {
   renaming: boolean;
   renameHandler: (e: MouseEvent<HTMLButtonElement>) => void;
   onRename: (e: MouseEvent<HTMLButtonElement>) => void;
-  twcss?: string;
   appendLabel?: boolean;
 }
 
@@ -14,19 +13,16 @@ export default function RenameButton({
   renaming,
   renameHandler,
   onRename,
-  twcss,
   appendLabel = false,
 }: RenameButtonProps): ReactElement {
   const localize = useLocalize();
   const handler = renaming ? onRename : renameHandler;
-  const classProp: { className?: string } = {
-    className: 'p-1 hover:text-black dark:hover:text-white',
-  };
-  if (twcss) {
-    classProp.className = twcss;
-  }
+
   return (
-    <button {...classProp} onClick={handler}>
+    <button
+      className="group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600"
+      onClick={handler}
+    >
       {renaming ? (
         <CheckMark />
       ) : appendLabel ? (

client/src/components/Conversations/ToggleContext.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+const defaultFunction: (value: boolean) => void = () => ({});
+export const ToggleContext = createContext({
+  setPopoverActive: defaultFunction,
+});
+
+export const useToggle = () => useContext(ToggleContext);