📧 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/Chat/Landing.tsx

@@ -2,11 +2,10 @@ import { EModelEndpoint } from 'librechat-data-provider';
 import { useGetEndpointsQuery, useGetStartupConfig } from 'librechat-data-provider/react-query';
 import type { ReactNode } from 'react';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
-import { getEndpointField, getIconEndpoint, getIconKey } from '~/utils';
 import { useChatContext, useAssistantsMapContext } from '~/Providers';
-import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
-import { icons } from './Menus/Endpoints/Icons';
+import ConvoIcon from '~/components/Endpoints/ConvoIcon';
 import { BirthdayIcon } from '~/components/svg';
+import { getIconEndpoint, cn } from '~/utils';
 import { useLocalize } from '~/hooks';
 
 export default function Landing({ Header }: { Header?: ReactNode }) {
@@ -31,52 +30,35 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
   const iconURL = conversation?.iconURL;
   endpoint = getIconEndpoint({ endpointsConfig, iconURL, endpoint });
 
-  const endpointIconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
-  const iconKey = getIconKey({ endpoint, endpointsConfig, endpointIconURL });
-  const Icon = icons[iconKey];
-
   const assistant = endpoint === EModelEndpoint.assistants && assistantMap?.[assistant_id ?? ''];
   const assistantName = (assistant && assistant?.name) || '';
   const assistantDesc = (assistant && assistant?.description) || '';
   const avatar = (assistant && (assistant?.metadata?.avatar as string)) || '';
 
-  let className =
+  const containerClassName =
     'shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black';
 
-  if (assistantName && avatar) {
-    className = 'shadow-stroke overflow-hidden rounded-full';
-  }
-
   return (
     <TooltipProvider delayDuration={50}>
       <Tooltip>
         <div className="relative h-full">
           <div className="absolute left-0 right-0">{Header && Header}</div>
           <div className="flex h-full flex-col items-center justify-center">
-            <div className="relative mb-3 h-[72px] w-[72px]">
-              {iconURL && iconURL.includes('http') ? (
-                <ConvoIconURL
-                  preset={conversation}
-                  endpointIconURL={endpointIconURL}
-                  assistantName={assistantName}
-                  assistantAvatar={avatar}
-                  context="landing"
-                />
-              ) : (
-                <div className={className}>
-                  {endpoint &&
-                    Icon &&
-                    Icon({
-                      size: 41,
-                      context: 'landing',
-                      className: 'h-2/3 w-2/3',
-                      iconURL: endpointIconURL,
-                      assistantName,
-                      endpoint,
-                      avatar,
-                    })}
-                </div>
+            <div
+              className={cn(
+                'relative h-[72px] w-[72px]',
+                assistantName && avatar ? 'mb-0' : 'mb-3',
               )}
+            >
+              <ConvoIcon
+                conversation={conversation}
+                assistantMap={assistantMap}
+                endpointsConfig={endpointsConfig}
+                containerClassName={containerClassName}
+                context="landing"
+                className="h-2/3 w-2/3"
+                size={41}
+              />
               <TooltipTrigger>
                 {(startupConfig?.showBirthdayIcon ?? false) && (
                   <BirthdayIcon className="absolute bottom-12 right-5" />