📧 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/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>
   );
 }