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/Nav/ExportConversation/ExportConversation.jsx

@@ -1,12 +1,10 @@
 import { useState, forwardRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Download } from 'lucide-react';
-import { cn } from '~/utils/';
-
-import ExportModel from './ExportModel';
-
-import store from '~/store';
+import ExportModal from './ExportModal';
 import { useLocalize } from '~/hooks';
+import { cn } from '~/utils/';
+import store from '~/store';
 
 const ExportConversation = forwardRef(() => {
   const [open, setOpen] = useState(false);
@@ -38,7 +36,7 @@ const ExportConversation = forwardRef(() => {
         {localize('com_nav_export_conversation')}
       </button>
 
-      <ExportModel open={open} onOpenChange={setOpen} />
+      <ExportModal open={open} onOpenChange={setOpen} />
     </>
   );
 });

client/src/components/Nav/ExportConversation/ExportModal.jsx

@@ -1,27 +1,33 @@
-import { useEffect, useState } from 'react';
-import { useRecoilValue, useRecoilCallback } from 'recoil';
-import filenamify from 'filenamify';
-import exportFromJSON from 'export-from-json';
 import download from 'downloadjs';
-import { Dialog, DialogButton, Input, Label, Checkbox, Dropdown } from '~/components/ui/';
+import filenamify from 'filenamify';
+import { useRecoilCallback } from 'recoil';
+import { useEffect, useState } from 'react';
+import exportFromJSON from 'export-from-json';
 import DialogTemplate from '~/components/ui/DialogTemplate';
+import { useGetMessagesByConvoId } from 'librechat-data-provider';
+import { Dialog, DialogButton, Input, Label, Checkbox, Dropdown } from '~/components/ui/';
 import { cn, defaultTextProps, removeFocusOutlines, cleanupPreset } from '~/utils/';
 import { useScreenshot, useLocalize } from '~/hooks';
+import { buildTree } from '~/utils';
 import store from '~/store';
 
-export default function ExportModel({ open, onOpenChange }) {
+export default function ExportModal({ open, onOpenChange, conversation }) {
   const { captureScreenshot } = useScreenshot();
   const localize = useLocalize();
 
   const [filename, setFileName] = useState('');
-  const [type, setType] = useState('');
+  const [type, setType] = useState('Select a file type');
 
   const [includeOptions, setIncludeOptions] = useState(true);
   const [exportBranches, setExportBranches] = useState(false);
   const [recursive, setRecursive] = useState(true);
 
-  const conversation = useRecoilValue(store.conversation) || {};
-  const messagesTree = useRecoilValue(store.messagesTree) || [];
+  const { data: messagesTree = null } = useGetMessagesByConvoId(conversation.conversationId ?? '', {
+    select: (data) => {
+      const dataTree = buildTree(data, false);
+      return dataTree?.length === 0 ? null : dataTree ?? null;
+    },
+  });
 
   const getSiblingIdx = useRecoilCallback(
     ({ snapshot }) =>
@@ -357,22 +363,11 @@ export default function ExportModel({ open, onOpenChange }) {
                   )}
                 />
               </div>
-              <div className="col-span-1 flex flex-col items-start justify-start gap-2">
+              <div className="col-span-1 flex w-full flex-col items-start justify-start gap-2">
                 <Label htmlFor="type" className="text-left text-sm font-medium">
                   {localize('com_nav_export_type')}
                 </Label>
-                <Dropdown
-                  id="type"
-                  value={type}
-                  onChange={_setType}
-                  options={typeOptions}
-                  className={cn(
-                    defaultTextProps,
-                    'flex h-10 max-h-10 w-full resize-none',
-                    removeFocusOutlines,
-                  )}
-                  containerClassName="flex w-full resize-none"
-                />
+                <Dropdown id="type" value={type} onChange={_setType} options={typeOptions} />
               </div>
             </div>
             <div className="grid w-full gap-6 sm:grid-cols-2">

client/src/components/Nav/ExportConversation/index.ts

@@ -1,2 +1,2 @@
 export { default as ExportConversation } from './ExportConversation';
-export { default as ExportModel } from './ExportModel';
+export { default as ExportModal } from './ExportModal';

client/src/components/Nav/NavLinks.tsx

@@ -1,21 +1,23 @@
 import { Download } from 'lucide-react';
 import { useRecoilValue } from 'recoil';
-import { Fragment, useState } from 'react';
+import { Fragment, useState, memo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Menu, Transition } from '@headlessui/react';
 import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider';
 import type { TConversation } from 'librechat-data-provider';
-import { Menu, Transition } from '@headlessui/react';
-import { ExportModel } from './ExportConversation';
-import Settings from './Settings';
-import NavLink from './NavLink';
-import Logout from './Logout';
+import { ExportModal } from './ExportConversation';
 import { LinkIcon, GearIcon } from '~/components';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { useLocalize } from '~/hooks';
+import Settings from './Settings';
+import NavLink from './NavLink';
+import Logout from './Logout';
 import { cn } from '~/utils/';
-
 import store from '~/store';
 
-export default function NavLinks() {
+function NavLinks() {
+  const localize = useLocalize();
+  const location = useLocation();
   const { user, isAuthenticated } = useAuthContext();
   const { data: startupConfig } = useGetStartupConfig();
   const balanceQuery = useGetUserBalance({
@@ -23,14 +25,23 @@ export default function NavLinks() {
   });
   const [showExports, setShowExports] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
-  const localize = useLocalize();
 
-  const conversation = useRecoilValue(store.conversation) ?? ({} as TConversation);
+  let conversation;
+  const activeConvo = useRecoilValue(store.conversationByIndex(0));
+  const globalConvo = useRecoilValue(store.conversation) ?? ({} as TConversation);
+  if (location.state?.from?.pathname.includes('/chat')) {
+    conversation = globalConvo;
+  } else {
+    conversation = activeConvo;
+  }
 
   const exportable =
-    conversation?.conversationId &&
-    conversation?.conversationId !== 'new' &&
-    conversation?.conversationId !== 'search';
+    conversation &&
+    conversation.conversationId &&
+    conversation.conversationId !== 'new' &&
+    conversation.conversationId !== 'search';
+
+  console.log('NavLinks', conversation, exportable);
 
   const clickHandler = () => {
     if (exportable) {
@@ -124,8 +135,12 @@ export default function NavLinks() {
           </>
         )}
       </Menu>
-      {showExports && <ExportModel open={showExports} onOpenChange={setShowExports} />}
+      {showExports && (
+        <ExportModal open={showExports} onOpenChange={setShowExports} conversation={conversation} />
+      )}
       {showSettings && <Settings open={showSettings} onOpenChange={setShowSettings} />}
     </>
   );
 }
+
+export default memo(NavLinks);