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/ChatView.tsx

@@ -2,12 +2,12 @@ import { memo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useParams } from 'react-router-dom';
 import { useGetMessagesByConvoId } from 'librechat-data-provider';
-import { useChatHelpers, useDragHelpers, useSSE } from '~/hooks';
+import { useChatHelpers, useSSE } from '~/hooks';
 // import GenerationButtons from './Input/GenerationButtons';
-import DragDropOverlay from './Input/Files/DragDropOverlay';
 import MessagesView from './Messages/MessagesView';
 // import OptionsBar from './Input/OptionsBar';
 import { ChatContext } from '~/Providers';
+import Presentation from './Presentation';
 import ChatForm from './Input/ChatForm';
 import { Spinner } from '~/components';
 import { buildTree } from '~/utils';
@@ -16,15 +16,7 @@ import Header from './Header';
 import Footer from './Footer';
 import store from '~/store';
 
-function ChatView({
-  // messagesTree,
-  // isLoading,
-  index = 0,
-}: {
-  // messagesTree?: TMessage[] | null;
-  // isLoading: boolean;
-  index?: number;
-}) {
+function ChatView({ index = 0 }: { index?: number }) {
   const { conversationId } = useParams();
   const submissionAtIndex = useRecoilValue(store.submissionByIndex(0));
   useSSE(submissionAtIndex);
@@ -35,36 +27,28 @@ function ChatView({
       return dataTree?.length === 0 ? null : dataTree ?? null;
     },
   });
+
   const chatHelpers = useChatHelpers(index, conversationId);
-  const { isOver, canDrop, drop } = useDragHelpers(chatHelpers.setFiles);
-  const isActive = canDrop && isOver;
+
   return (
     <ChatContext.Provider value={chatHelpers}>
-      <div
-        ref={drop}
-        className="relative flex w-full grow overflow-hidden bg-white dark:bg-gray-800"
-      >
-        <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white pt-0 dark:bg-gray-800">
-          <div className="flex h-full flex-col" role="presentation" tabIndex={0}>
-            {isLoading && conversationId !== 'new' ? (
-              <div className="flex h-screen items-center justify-center">
-                <Spinner className="dark:text-white" />
-              </div>
-            ) : messagesTree && messagesTree.length !== 0 ? (
-              <MessagesView messagesTree={messagesTree} Header={<Header />} />
-            ) : (
-              <Landing Header={<Header />} />
-            )}
-            {/* <OptionsBar messagesTree={messagesTree} /> */}
-            {/* <GenerationButtons endpoint={chatHelpers.conversation.endpoint ?? ''} /> */}
-            <div className="gizmo:border-t-0 gizmo:pl-0 gizmo:md:pl-0 w-full border-t pt-2 dark:border-white/20 md:w-[calc(100%-.5rem)] md:border-t-0 md:border-transparent md:pl-2 md:pt-0 md:dark:border-transparent">
-              <ChatForm index={index} />
-              <Footer />
-            </div>
-            {isActive && <DragDropOverlay />}
+      <Presentation>
+        {isLoading && conversationId !== 'new' ? (
+          <div className="flex h-screen items-center justify-center">
+            <Spinner className="opacity-0" />
           </div>
+        ) : messagesTree && messagesTree.length !== 0 ? (
+          <MessagesView messagesTree={messagesTree} Header={<Header />} />
+        ) : (
+          <Landing Header={<Header />} />
+        )}
+        {/* <OptionsBar messagesTree={messagesTree} /> */}
+        {/* <GenerationButtons endpoint={chatHelpers.conversation.endpoint ?? ''} /> */}
+        <div className="w-full border-t-0 pl-0 pt-2 dark:border-white/20 md:w-[calc(100%-.5rem)] md:border-t-0 md:border-transparent md:pl-0 md:pt-0 md:dark:border-transparent">
+          <ChatForm index={index} />
+          <Footer />
         </div>
-      </div>
+      </Presentation>
     </ChatContext.Provider>
   );
 }