⬇️ fix: JSON LibreChat Imports (#2897)

* chore: remove unused code

* refactor: Update NewChatButtonIcon component to use JSX syntax

The NewChatButtonIcon component in the Nav folder has been updated to use JSX syntax instead of calling the Icon function directly. This change improves code readability and maintainability.

* remove use memo

* refactor: allow passing `select` to messages db query

* fix: initial fix for non-recursive messages

* ci: first pass, importers test rewrite

* fix(groupConversationsByDate): handle edge case of conversation.updatedAt being null

* fix: correctly handle non-recursive uploads

* feat: imports non-recursive conversations with branches correctly

* feat: support retaining original options on import

* refactor: Allow `messageTree` field for Import of non-recursive conversations

client/src/components/Nav/NavLinks.tsx

@@ -1,10 +1,8 @@
-import { useLocation } from 'react-router-dom';
-import { Fragment, useState, memo } from 'react';
 import { FileText } from 'lucide-react';
+import { useRecoilState } from 'recoil';
+import { Fragment, useState, memo } from 'react';
 import { Menu, Transition } from '@headlessui/react';
-import { useRecoilValue, useRecoilState } from 'recoil';
 import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider/react-query';
-import type { TConversation } from 'librechat-data-provider';
 import FilesView from '~/components/Chat/Input/Files/FilesView';
 import { useAuthContext } from '~/hooks/AuthContext';
 import useAvatar from '~/hooks/Messages/useAvatar';
@@ -19,7 +17,6 @@ import store from '~/store';
 
 function NavLinks() {
   const localize = useLocalize();
-  const location = useLocation();
   const { user, isAuthenticated } = useAuthContext();
   const { data: startupConfig } = useGetStartupConfig();
   const balanceQuery = useGetUserBalance({
@@ -28,18 +25,8 @@ function NavLinks() {
   const [showSettings, setShowSettings] = useState(false);
   const [showFiles, setShowFiles] = useRecoilState(store.showFiles);
 
-  const activeConvo = useRecoilValue(store.conversationByIndex(0));
-  const globalConvo = useRecoilValue(store.conversation) ?? ({} as TConversation);
-
   const avatarSrc = useAvatar(user);
 
-  let conversation: TConversation | null | undefined;
-  if (location.state?.from?.pathname.includes('/chat')) {
-    conversation = globalConvo;
-  } else {
-    conversation = activeConvo;
-  }
-
   return (
     <>
       <Menu as="div" className="group relative">

client/src/components/Nav/NewChat.tsx

@@ -38,16 +38,16 @@ const NewChatButtonIcon = ({ conversation }: { conversation: TConversation | nul
         <ConvoIconURL preset={conversation} endpointIconURL={iconURL} context="nav" />
       ) : (
         <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black dark:bg-white">
-          {endpoint &&
-            Icon &&
-            Icon({
-              size: 41,
-              context: 'nav',
-              className: 'h-2/3 w-2/3',
-              endpoint,
-              endpointType,
-              iconURL: endpointIconURL,
-            })}
+          {endpoint && Icon && (
+            <Icon
+              size={41}
+              context="nav"
+              className="h-2/3 w-2/3"
+              endpoint={endpoint}
+              endpointType={endpointType}
+              iconURL={endpointIconURL}
+            />
+          )}
         </div>
       )}
     </div>

client/src/components/ui/Combobox.tsx

@@ -35,19 +35,12 @@ export default function ComboboxComponent({
   isCollapsed: boolean;
   SelectIcon?: React.ReactNode;
 }) {
-  const options: OptionWithIcon[] = useMemo(() => {
-    if (!items) {
-      return [];
+  const options: OptionWithIcon[] = (items ?? []).map((option: string | OptionWithIcon) => {
+    if (typeof option === 'string') {
+      return { label: option, value: option };
     }
-
-    return items.map((option: string | OptionWithIcon) => {
-      if (typeof option === 'string') {
-        return { label: option, value: option };
-      }
-
-      return option;
-    });
-  }, [items]);
+    return option;
+  });
 
   const { open, setOpen, setSearchValue, matches } = useCombobox({
     value: selectedValue,