feat: Vision Support + New UI (#1203)

* feat: add timer duration to showToast, show toast for preset selection

* refactor: replace old /chat/ route with /c/. e2e tests will fail here

* refactor: move typedefs to root of /api/ and add a few to assistant types in TS

* refactor: reorganize data-provider imports, fix dependency cycle, strategize new plan to separate react dependent packages

* feat: add dataService for uploading images

* feat(data-provider): add mutation keys

* feat: file resizing and upload

* WIP: initial API image handling

* fix: catch JSON.parse of localStorage tools

* chore: experimental: use module-alias for absolute imports

* refactor: change temp_file_id strategy

* fix: updating files state by using Map and defining react query callbacks in a way that keeps them during component unmount, initial delete handling

* feat: properly handle file deletion

* refactor: unexpose complete filepath and resize from server for higher fidelity

* fix: make sure resized height, width is saved, catch bad requests

* refactor: use absolute imports

* fix: prevent setOptions from being called more than once for OpenAIClient, made note to fix for PluginsClient

* refactor: import supportsFiles and models vars from schemas

* fix: correctly replace temp file id

* refactor(BaseClient): use absolute imports, pass message 'opts' to buildMessages method, count tokens for nested objects/arrays

* feat: add validateVisionModel to determine if model has vision capabilities

* chore(checkBalance): update jsdoc

* feat: formatVisionMessage: change message content format dependent on role and image_urls passed

* refactor: add usage to File schema, make create and updateFile, correctly set and remove TTL

* feat: working vision support
TODO: file size, type, amount validations, making sure they are styled right, and making sure you can add images from the clipboard/dragging

* feat: clipboard support for uploading images

* feat: handle files on drop to screen, refactor top level view code to Presentation component so the useDragHelpers hook  has ChatContext

* fix(Images): replace uploaded images in place

* feat: add filepath validation to protect sensitive files

* fix: ensure correct file_ids are push and not the Map key values

* fix(ToastContext): type issue

* feat: add basic file validation

* fix(useDragHelpers): correct context issue with `files` dependency

* refactor: consolidate setErrors logic to setError

* feat: add dialog Image overlay on image click

* fix: close endpoints menu on click

* chore: set detail to auto, make note for configuration

* fix: react warning (button desc. of button)

* refactor: optimize filepath handling, pass file_ids to images for easier re-use

* refactor: optimize image file handling, allow re-using files in regen, pass more file metadata in messages

* feat: lazy loading images including use of upload preview

* fix: SetKeyDialog closing, stopPropagation on Dialog content click

* style(EndpointMenuItem): tighten up the style, fix dark theme showing in lightmode, make menu more ux friendly

* style: change maxheight of all settings textareas to 138px from 300px

* style: better styling for textarea and enclosing buttons

* refactor(PresetItems): swap back edit and delete icons

* feat: make textarea placeholder dynamic to endpoint

* style: show user hover buttons only on hover when message is streaming

* fix: ordered list not going past 9, fix css

* feat: add User/AI labels; style: hide loading spinner

* feat: add back custom footer, change original footer text

* feat: dynamic landing icons based on endpoint

* chore: comment out assistants route

* fix: autoScroll to newest on /c/ view

* fix: Export Conversation on new UI

* style: match message style of official more closely

* ci: fix api jest unit tests, comment out e2e tests for now as they will fail until addressed

* feat: more file validation and use blob in preview field, not filepath, to fix temp deletion

* feat: filefilter for multer

* feat: better AI labels based on custom name, model, and endpoint instead of  `ChatGPT`

client/src/components/Chat/Menus/Endpoints/MenuItem.tsx

@@ -49,7 +49,7 @@ const MenuItem: FC<MenuItemProps> = ({
     <>
       <div
         role="menuitem"
-        className="group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
+        className="group m-1.5 flex max-h-[40px] cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
         tabIndex={-1}
         {...rest}
         onClick={() => onSelectEndpoint(endpoint)}
@@ -75,7 +75,9 @@ const MenuItem: FC<MenuItemProps> = ({
                   className={cn(
                     'invisible flex gap-x-1 group-hover:visible',
                     selected ? 'visible' : '',
-                    expiryTime ? 'w-full rounded-lg p-2 hover:bg-gray-900' : '',
+                    expiryTime
+                      ? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-900'
+                      : '',
                   )}
                   onClick={(e) => {
                     e.preventDefault();
@@ -108,7 +110,7 @@ const MenuItem: FC<MenuItemProps> = ({
             )}
             {(!userProvidesKey || expiryTime) && (
               <div className="text-token-text-primary hidden gap-x-1 group-hover:flex ">
-                <div className="">New Chat</div>
+                {!userProvidesKey && <div className="">New Chat</div>}
                 <svg
                   width="24"
                   height="24"

client/src/components/Chat/Menus/Endpoints/MenuItems.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
-import { EModelEndpoint, useGetEndpointsQuery } from 'librechat-data-provider';
+import { Close } from '@radix-ui/react-popover';
+import { EModelEndpoint, useGetEndpointsQuery, alternateName } from 'librechat-data-provider';
 import MenuSeparator from '../UI/MenuSeparator';
-import { alternateName } from '~/common';
 import MenuItem from './MenuItem';
 
 const EndpointItems: FC<{
@@ -20,18 +20,20 @@ const EndpointItems: FC<{
           }
           const userProvidesKey = endpointsConfig?.[endpoint]?.userProvide;
           return (
-            <div key={`endpoint-${endpoint}`}>
-              <MenuItem
-                key={`endpoint-item-${endpoint}`}
-                title={alternateName[endpoint] || endpoint}
-                value={endpoint}
-                selected={selected === endpoint}
-                data-testid={`endpoint-item-${endpoint}`}
-                userProvidesKey={!!userProvidesKey}
-                // description="With DALL·E, browsing and analysis"
-              />
-              {i !== endpoints.length - 1 && <MenuSeparator />}
-            </div>
+            <Close asChild key={`endpoint-${endpoint}`}>
+              <div key={`endpoint-${endpoint}`}>
+                <MenuItem
+                  key={`endpoint-item-${endpoint}`}
+                  title={alternateName[endpoint] || endpoint}
+                  value={endpoint}
+                  selected={selected === endpoint}
+                  data-testid={`endpoint-item-${endpoint}`}
+                  userProvidesKey={!!userProvidesKey}
+                  // description="With DALL·E, browsing and analysis"
+                />
+                {i !== endpoints.length - 1 && <MenuSeparator />}
+              </div>
+            </Close>
           );
         })}
     </>

client/src/components/Chat/Menus/EndpointsMenu.tsx

@@ -1,10 +1,9 @@
 import { Content, Portal, Root } from '@radix-ui/react-popover';
-import { useGetEndpointsQuery } from 'librechat-data-provider';
+import { useGetEndpointsQuery, alternateName } from 'librechat-data-provider';
 import type { FC } from 'react';
 import EndpointItems from './Endpoints/MenuItems';
 import { useChatContext } from '~/Providers';
 import TitleButton from './UI/TitleButton';
-import { alternateName } from '~/common';
 import { mapEndpoints } from '~/utils';
 
 const EndpointsMenu: FC = () => {

client/src/components/Chat/Menus/Presets/PresetItems.tsx

@@ -98,20 +98,20 @@ const PresetItems: FC<{
                       className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                       onClick={(e) => {
                         e.preventDefault();
-                        e.stopPropagation();
-                        onDeletePreset(preset);
+                        onChangePreset(preset);
                       }}
                     >
-                      <TrashIcon />
+                      <EditIcon />
                     </button>
                     <button
                       className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                       onClick={(e) => {
                         e.preventDefault();
-                        onChangePreset(preset);
+                        e.stopPropagation();
+                        onDeletePreset(preset);
                       }}
                     >
-                      <EditIcon />
+                      <TrashIcon />
                     </button>
                   </div>
                 </MenuItem>

client/src/components/Chat/Menus/PresetsMenu.tsx

@@ -10,13 +10,14 @@ import {
 import type { TPreset } from 'librechat-data-provider';
 import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
 import { useLocalize, useDefaultConvo, useNavigateToConvo } from '~/hooks';
+import { useChatContext, useToastContext } from '~/Providers';
 import { EditPresetDialog, PresetItems } from './Presets';
 import { cleanupPreset, cn } from '~/utils';
-import { useChatContext } from '~/Providers';
 import store from '~/store';
 
 const PresetsMenu: FC = () => {
   const localize = useLocalize();
+  const { showToast } = useToastContext();
   const { conversation, newConversation, setPreset } = useChatContext();
   const { navigateToConvo } = useNavigateToConvo();
   const getDefaultConversation = useDefaultConvo();
@@ -52,6 +53,12 @@ const PresetsMenu: FC = () => {
       return;
     }
 
+    showToast({
+      message: localize('com_endpoint_preset_selected'),
+      showIcon: false,
+      duration: 750,
+    });
+
     if (
       modularEndpoints.has(endpoint ?? '') &&
       modularEndpoints.has(newPreset?.endpoint ?? '') &&
@@ -95,7 +102,7 @@ const PresetsMenu: FC = () => {
           )}
           id="presets-button"
           data-testid="presets-button"
-          title={localize('com_ui_presets')}
+          title={localize('com_endpoint_examples')}
         >
           <BookCopy className="icon-sm" id="presets-button" />
         </button>