🌿 feat: Fork Messages/Conversations (#2617)

* typedef for ImportBatchBuilder

* feat: first pass, fork conversations

* feat: fork - getMessagesUpToTargetLevel

* fix: additional tests and fix getAllMessagesUpToParent

* chore: arrow function return

* refactor: fork 3 options

* chore: remove unused genbuttons

* chore: remove unused hover buttons code

* feat: fork first pass

* wip: fork remember setting

* style: user icon

* chore: move clear chats to data tab

* WIP: fork UI options

* feat: data-provider fork types/services/vars and use generic MutationOptions

* refactor: use single param for fork option, use enum, fix mongo errors, use Date.now(), add records flag for testing, use endpoint from original convo and messages, pass originalConvo to finishConversation

* feat: add fork mutation hook and consolidate type imports

* refactor: use enum

* feat: first pass, fork mutation

* chore: add enum for target level fork option

* chore: add enum for target level fork option

* show toast when checking remember selection

* feat: splitAtTarget

* feat: split at target option

* feat: navigate to new fork, show toasts, set result query data

* feat: hover info for all fork options

* refactor: add Messages settings tab

* fix(Fork): remember text info

* ci: test for single message and is target edge case

* feat: additional tests for getAllMessagesUpToParent

* ci: additional tests and cycle detection for getMessagesUpToTargetLevel

* feat: circular dependency checks for getAllMessagesUpToParent

* fix: getMessagesUpToTargetLevel circular dep. check

* ci: more tests for getMessagesForConversation

* style: hover text for checkbox fork items

* refactor: add statefulness to conversation import

client/src/components/Nav/SettingsTabs/Data/ImportConversations.tsx

@@ -1,15 +1,17 @@
+import { useState } from 'react';
 import { Import } from 'lucide-react';
-import { cn } from '~/utils';
 import { useUploadConversationsMutation } from '~/data-provider';
 import { useLocalize, useConversations } from '~/hooks';
-import { useState } from 'react';
 import { useToastContext } from '~/Providers';
+import { Spinner } from '~/components/svg';
+import { cn } from '~/utils';
 
 function ImportConversations() {
   const localize = useLocalize();
 
   const { showToast } = useToastContext();
   const [, setErrors] = useState<string[]>([]);
+  const [allowImport, setAllowImport] = useState(true);
   const setError = (error: string) => setErrors((prevErrors) => [...prevErrors, error]);
   const { refreshConversations } = useConversations();
 
@@ -17,9 +19,11 @@ function ImportConversations() {
     onSuccess: () => {
       refreshConversations();
       showToast({ message: localize('com_ui_import_conversation_success') });
+      setAllowImport(true);
     },
     onError: (error) => {
       console.error('Error: ', error);
+      setAllowImport(true);
       setError(
         (error as { response: { data: { message?: string } } })?.response?.data?.message ??
           'An error occurred while uploading the file.',
@@ -33,6 +37,9 @@ function ImportConversations() {
         showToast({ message: localize('com_ui_import_conversation_error'), status: 'error' });
       }
     },
+    onMutate: () => {
+      setAllowImport(false);
+    },
   });
 
   const startUpload = async (file: File) => {
@@ -43,8 +50,6 @@ function ImportConversations() {
   };
 
   const handleFiles = async (_file: File) => {
-    console.log('Handling files...');
-
     /* Process files */
     try {
       await startUpload(_file);
@@ -55,7 +60,6 @@ function ImportConversations() {
   };
 
   const handleFileChange = (event) => {
-    console.log('file change');
     const file = event.target.files[0];
     if (file) {
       handleFiles(file);
@@ -67,12 +71,17 @@ function ImportConversations() {
       <span>{localize('com_ui_import_conversation_info')}</span>
       <label
         htmlFor={'import-conversations-file'}
-        className="flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-gray-100 hover:text-green-700 dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-green-500"
+        className="flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-3 text-xs font-medium font-normal transition-colors hover:bg-gray-100 hover:text-green-700 dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-green-500"
       >
-        <Import className="mr-1 flex w-[22px] items-center stroke-1" />
+        {allowImport ? (
+          <Import className="mr-1 flex h-4 w-4 items-center stroke-1" />
+        ) : (
+          <Spinner className="mr-1 w-4" />
+        )}
         <span>{localize('com_ui_import_conversation')}</span>
         <input
           id={'import-conversations-file'}
+          disabled={!allowImport}
           value=""
           type="file"
           className={cn('hidden')}