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/hooks/useChatHelpers.ts

@@ -22,16 +22,12 @@ import useUserKey from './useUserKey';
 import store from '~/store';
 
 // this to be set somewhere else
-export default function useChatHelpers(index = 0, paramId) {
+export default function useChatHelpers(index = 0, paramId: string | undefined) {
+  const [files, setFiles] = useState(new Map<string, ExtendedFile>());
+  const [filesLoading, setFilesLoading] = useState(false);
+
   const queryClient = useQueryClient();
   const { isAuthenticated } = useAuthContext();
-  // const tempConvo = {
-  //   endpoint: null,
-  //   conversationId: null,
-  //   jailbreak: false,
-  //   examples: [],
-  //   tools: [],
-  // };
 
   const { newConversation } = useNewConvo(index);
   const { useCreateConversationAtom } = store;
@@ -40,10 +36,6 @@ export default function useChatHelpers(index = 0, paramId) {
 
   const queryParam = paramId === 'new' ? paramId : conversationId ?? paramId ?? '';
 
-  // if (!queryParam && paramId && paramId !== 'new') {
-
-  // }
-
   /* Messages: here simply to fetch, don't export and use `getMessages()` instead */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { data: _messages } = useGetMessagesByConvoId(conversationId ?? '', {
@@ -97,10 +89,6 @@ export default function useChatHelpers(index = 0, paramId) {
     [queryClient],
   );
 
-  // const getConvos = useCallback(() => {
-  //   return queryClient.getQueryData<TGetConversationsResponse>([QueryKeys.allConversations, { pageNumber: '1', active: true }]);
-  // }, [queryClient]);
-
   const invalidateConvos = useCallback(() => {
     queryClient.invalidateQueries([QueryKeys.allConversations, { active: true }]);
   }, [queryClient]);
@@ -195,6 +183,24 @@ export default function useChatHelpers(index = 0, paramId) {
       error: false,
     };
 
+    const parentMessage = currentMessages?.find(
+      (msg) => msg.messageId === latestMessage?.parentMessageId,
+    );
+    const reuseFiles = isRegenerate && parentMessage?.files;
+    if (reuseFiles && parentMessage.files?.length) {
+      currentMsg.files = parentMessage.files;
+      setFiles(new Map());
+    } else if (files.size > 0) {
+      currentMsg.files = Array.from(files.values()).map((file) => ({
+        file_id: file.file_id,
+        filepath: file.filepath,
+        type: file.type || '', // Ensure type is not undefined
+        height: file.height,
+        width: file.width,
+      }));
+      setFiles(new Map());
+    }
+
     // construct the placeholder response message
     const generation = editedText ?? latestMessage?.text ?? '';
     const responseText = isEditOrContinue
@@ -311,7 +317,6 @@ export default function useChatHelpers(index = 0, paramId) {
   );
   const [showPopover, setShowPopover] = useRecoilState(store.showPopoverFamily(index));
   const [abortScroll, setAbortScroll] = useRecoilState(store.abortScrollFamily(index));
-  const [autoScroll, setAutoScroll] = useRecoilState(store.autoScrollFamily(index));
   const [preset, setPreset] = useRecoilState(store.presetByIndex(index));
   const [textareaHeight, setTextareaHeight] = useRecoilState(store.textareaHeightFamily(index));
   const [optionSettings, setOptionSettings] = useRecoilState(store.optionSettingsFamily(index));
@@ -319,8 +324,6 @@ export default function useChatHelpers(index = 0, paramId) {
     store.showAgentSettingsFamily(index),
   );
 
-  const [files, setFiles] = useState<ExtendedFile[]>([]);
-
   return {
     newConversation,
     conversation,
@@ -347,8 +350,6 @@ export default function useChatHelpers(index = 0, paramId) {
     setShowPopover,
     abortScroll,
     setAbortScroll,
-    autoScroll,
-    setAutoScroll,
     showBingToneSetting,
     setShowBingToneSetting,
     preset,
@@ -362,5 +363,7 @@ export default function useChatHelpers(index = 0, paramId) {
     files,
     setFiles,
     invalidateConvos,
+    filesLoading,
+    setFilesLoading,
   };
 }