🧹 chore: pre-release cleanup 2 (#3600)

* refactor: scrollToEnd

* fix(validateConvoAccess): search conversation by ID for proper validation

* feat: Add unique index for conversationId and user in convoSchema

* refactor: Update font sizes 1 rem -> font-size-base in style.css

* fix: Assistants map type issues

* refactor: Remove obsolete scripts

* fix: Update DropdownNoState component to handle both string and OptionType values

* refactor: Remove config/loader.js file

* fix: remove crypto.randomBytes(); refactor: Create reusable function for generating token and hash

Author: danny-avila

api/models/Conversation.js

@@ -2,6 +2,20 @@ const Conversation = require('./schema/convoSchema');
 const { getMessages, deleteMessages } = require('./Message');
 const logger = require('~/config/winston');
 
+/**
+ * Searches for a conversation by conversationId and returns a lean document with only conversationId and user.
+ * @param {string} conversationId - The conversation's ID.
+ * @returns {Promise<{conversationId: string, user: string} | null>} The conversation object with selected fields or null if not found.
+ */
+const searchConversation = async (conversationId) => {
+  try {
+    return await Conversation.findOne({ conversationId }, 'conversationId user').lean();
+  } catch (error) {
+    logger.error('[searchConversation] Error searching conversation', error);
+    throw new Error('Error searching conversation');
+  }
+};
+
 /**
  * Retrieves a single conversation for a given user and conversation ID.
  * @param {string} user - The user's ID.
@@ -19,6 +33,7 @@ const getConvo = async (user, conversationId) => {
 
 module.exports = {
   Conversation,
+  searchConversation,
   /**
    * Saves a conversation to the database.
    * @param {Object} req - The request object.

api/models/schema/convoSchema.js

@@ -61,6 +61,7 @@ if (process.env.MEILI_HOST && process.env.MEILI_MASTER_KEY) {
 }
 
 convoSchema.index({ createdAt: 1, updatedAt: 1 });
+convoSchema.index({ conversationId: 1, user: 1 }, { unique: true });
 
 const Conversation = mongoose.models.Conversation || mongoose.model('Conversation', convoSchema);
 

api/server/middleware/validate/convoAccess.js

@@ -1,8 +1,8 @@
 const { Constants, ViolationTypes, Time } = require('librechat-data-provider');
+const { searchConversation } = require('~/models/Conversation');
 const denyRequest = require('~/server/middleware/denyRequest');
 const { logViolation, getLogStores } = require('~/cache');
 const { isEnabled } = require('~/server/utils');
-const { getConvo } = require('~/models');
 
 const { USE_REDIS, CONVO_ACCESS_VIOLATION_SCORE: score = 0 } = process.env ?? {};
 
@@ -42,7 +42,7 @@ const validateConvoAccess = async (req, res, next) => {
       }
     }
 
-    const conversation = await getConvo(userId, conversationId);
+    const conversation = await searchConversation(conversationId);
 
     if (!conversation) {
       return next();

api/server/services/AuthService.js

@@ -1,4 +1,5 @@
 const bcrypt = require('bcryptjs');
+const { webcrypto } = require('node:crypto');
 const { SystemRoles, errorsToString } = require('librechat-data-provider');
 const {
   findUser,
@@ -53,14 +54,23 @@ const logoutUser = async (userId, refreshToken) => {
   }
 };
 
+/**
+ * Creates Token and corresponding Hash for verification
+ * @returns {[string, string]}
+ */
+const createTokenHash = () => {
+  const token = Buffer.from(webcrypto.getRandomValues(new Uint8Array(32))).toString('hex');
+  const hash = bcrypt.hashSync(token, 10);
+  return [token, hash];
+};
+
 /**
  * Send Verification Email
  * @param {Partial<MongoUser> & { _id: ObjectId, email: string, name: string}} user
  * @returns {Promise<void>}
  */
 const sendVerificationEmail = async (user) => {
-  let verifyToken = crypto.randomBytes(32).toString('hex');
-  const hash = bcrypt.hashSync(verifyToken, 10);
+  const [verifyToken, hash] = createTokenHash();
 
   const verificationLink = `${
     domains.client
@@ -226,8 +236,7 @@ const requestPasswordReset = async (req) => {
     await token.deleteOne();
   }
 
-  let resetToken = crypto.randomBytes(32).toString('hex');
-  const hash = bcrypt.hashSync(resetToken, 10);
+  const [resetToken, hash] = createTokenHash();
 
   await new Token({
     userId: user._id,
@@ -365,8 +374,7 @@ const resendVerificationEmail = async (req) => {
       return { status: 200, message: genericVerificationMessage };
     }
 
-    let verifyToken = crypto.randomBytes(32).toString('hex');
-    const hash = bcrypt.hashSync(verifyToken, 10);
+    const [verifyToken, hash] = createTokenHash();
 
     const verificationLink = `${
       domains.client

client/src/components/Chat/Landing.tsx

@@ -31,10 +31,10 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
   endpoint = getIconEndpoint({ endpointsConfig, iconURL, endpoint });
 
   const isAssistant = isAssistantsEndpoint(endpoint);
-  const assistant = isAssistant && assistantMap[endpoint][assistant_id ?? ''];
-  const assistantName = (assistant && assistant.name) || '';
-  const assistantDesc = (assistant && assistant.description) || '';
-  const avatar = (assistant && (assistant.metadata?.avatar as string)) || '';
+  const assistant = isAssistant ? assistantMap?.[endpoint][assistant_id ?? ''] : undefined;
+  const assistantName = assistant && assistant.name;
+  const assistantDesc = assistant && assistant.description;
+  const avatar = assistant && (assistant.metadata?.avatar as string);
 
   const containerClassName =
     'shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black';

client/src/components/Chat/Messages/MessageParts.tsx

@@ -1,9 +1,9 @@
 import { useRecoilValue } from 'recoil';
 import type { TMessageProps } from '~/common';
 import Icon from '~/components/Chat/Messages/MessageIcon';
+import { useMessageHelpers, useLocalize } from '~/hooks';
 import ContentParts from './Content/ContentParts';
 import SiblingSwitch from './SiblingSwitch';
-import { useMessageHelpers } from '~/hooks';
 // eslint-disable-next-line import/no-cycle
 import MultiMessage from './MultiMessage';
 import HoverButtons from './HoverButtons';
@@ -12,6 +12,7 @@ import { cn } from '~/utils';
 import store from '~/store';
 
 export default function Message(props: TMessageProps) {
+  const localize = useLocalize();
   const { message, siblingIdx, siblingCount, setSiblingIdx, currentEditId, setCurrentEditId } =
     props;
 
@@ -31,7 +32,6 @@ export default function Message(props: TMessageProps) {
     regenerateMessage,
   } = useMessageHelpers(props);
   const fontSize = useRecoilValue(store.fontSize);
-
   const { content, children, messageId = null, isCreatedByUser, error, unfinished } = message ?? {};
 
   if (!message) {
@@ -59,12 +59,13 @@ export default function Message(props: TMessageProps) {
             <div
               className={cn(
                 'relative flex w-full flex-col',
-                isCreatedByUser != null ? '' : 'agent-turn',
+                isCreatedByUser === true ? '' : 'agent-turn',
               )}
             >
               <div className={cn('select-none font-semibold', fontSize)}>
-                {/* TODO: LOCALIZE */}
-                {isCreatedByUser != null ? 'You' : (assistant && assistant.name) ?? 'Assistant'}
+                {isCreatedByUser === true
+                  ? localize('com_user_message')
+                  : (assistant && assistant.name) ?? localize('com_ui_assistant')}
               </div>
               <div className="flex-col gap-1 md:gap-3">
                 <div className="flex max-w-full flex-grow flex-col gap-0">
@@ -76,7 +77,7 @@ export default function Message(props: TMessageProps) {
                     message={message}
                     messageId={messageId}
                     enterEdit={enterEdit}
-                    error={!!error}
+                    error={!!(error ?? false)}
                     isSubmitting={isSubmitting}
                     unfinished={unfinished ?? false}
                     isCreatedByUser={isCreatedByUser ?? true}

client/src/components/Endpoints/ConvoIcon.tsx

@@ -1,3 +1,4 @@
+import React, { useMemo } from 'react';
 import { isAssistantsEndpoint } from 'librechat-data-provider';
 import type {
   TAssistantsMap,
@@ -20,7 +21,7 @@ export default function ConvoIcon({
 }: {
   conversation: TConversation | TPreset | null;
   endpointsConfig: TEndpointsConfig;
-  assistantMap: TAssistantsMap;
+  assistantMap: TAssistantsMap | undefined;
   containerClassName?: string;
   context?: 'message' | 'nav' | 'landing' | 'menu-item';
   className?: string;
@@ -29,11 +30,19 @@ export default function ConvoIcon({
   const iconURL = conversation?.iconURL;
   let endpoint = conversation?.endpoint;
   endpoint = getIconEndpoint({ endpointsConfig, iconURL, endpoint });
-  const assistant =
-    isAssistantsEndpoint(endpoint) && assistantMap?.[endpoint]?.[conversation?.assistant_id ?? ''];
-  const assistantName = (assistant && assistant?.name) || '';
+  const assistant = useMemo(() => {
+    if (!isAssistantsEndpoint(conversation?.endpoint)) {
+      return undefined;
+    }
 
-  const avatar = (assistant && (assistant?.metadata?.avatar as string)) || '';
+    const endpointKey = conversation?.endpoint ?? '';
+    const assistantId = conversation?.assistant_id ?? '';
+
+    return assistantMap?.[endpointKey] ? assistantMap[endpointKey][assistantId] : undefined;
+  }, [conversation?.endpoint, conversation?.assistant_id, assistantMap]);
+  const assistantName = assistant && (assistant.name ?? '');
+
+  const avatar = (assistant && (assistant.metadata?.avatar as string)) || '';
   const endpointIconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
   const iconKey = getIconKey({ endpoint, endpointsConfig, endpointIconURL });
   const Icon = icons[iconKey];

client/src/components/SidePanel/Builder/ActionsInput.tsx

@@ -62,12 +62,12 @@ export default function ActionsInput({
   const [functions, setFunctions] = useState<FunctionTool[] | null>(null);
 
   useEffect(() => {
-    if (!action?.metadata?.raw_spec) {
+    if (!action?.metadata.raw_spec) {
       return;
     }
     setInputValue(action.metadata.raw_spec);
     debouncedValidation(action.metadata.raw_spec, handleResult);
-  }, [action?.metadata?.raw_spec]);
+  }, [action?.metadata.raw_spec]);
 
   useEffect(() => {
     if (!validationResult || !validationResult.status || !validationResult.spec) {
@@ -100,7 +100,7 @@ export default function ActionsInput({
     },
     onError(error) {
       showToast({
-        message: (error as Error)?.message ?? localize('com_assistants_update_actions_error'),
+        message: (error as Error).message ?? localize('com_assistants_update_actions_error'),
         status: 'error',
       });
     },
@@ -180,7 +180,7 @@ export default function ActionsInput({
       assistant_id,
       endpoint,
       version,
-      model: assistantMap[endpoint][assistant_id].model,
+      model: assistantMap?.[endpoint][assistant_id].model ?? '',
     });
   });
 
@@ -195,16 +195,32 @@ export default function ActionsInput({
     debouncedValidation(newValue, handleResult);
   };
 
+  const submitContext = () => {
+    if (updateAction.isLoading) {
+      return <Spinner className="icon-md" />;
+    } else if (action?.action_id.length ?? 0) {
+      return localize('com_ui_update');
+    } else {
+      return localize('com_ui_create');
+    }
+  };
+
   return (
     <>
       <div className="">
         <div className="mb-1 flex flex-wrap items-center justify-between gap-4">
-          <label className="text-token-text-primary whitespace-nowrap font-medium">Schema</label>
+          <label
+            htmlFor="example-schema"
+            className="text-token-text-primary whitespace-nowrap font-medium"
+          >
+            Schema
+          </label>
           <div className="flex items-center gap-2">
             {/* <button className="btn btn-neutral border-token-border-light relative h-8 min-w-[100px] rounded-lg font-medium">
               <div className="flex w-full items-center justify-center text-xs">Import from URL</div>
             </button> */}
             <select
+              id="example-schema"
               onChange={(e) => console.log(e.target.value)}
               className="border-token-border-medium h-8 min-w-[100px] rounded-lg border bg-transparent px-2 py-0 text-sm"
             >
@@ -250,23 +266,15 @@ export default function ActionsInput({
         </div>
       )}
       <div className="mt-4">
-        <div className="mb-1.5 flex items-center">
-          <span className="" data-state="closed">
-            <label className="text-token-text-primary block font-medium">
-              {localize('com_ui_privacy_policy')}
-            </label>
-          </span>
-        </div>
         <div className="rounded-md border border-gray-300 px-3 py-2 shadow-none focus-within:border-gray-800 focus-within:ring-1 focus-within:ring-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:focus-within:border-gray-500 dark:focus-within:ring-gray-500">
-          <label
-            htmlFor="privacyPolicyUrl"
-            className="block text-xs font-medium text-gray-900 dark:text-gray-100"
-          />
+          <label htmlFor="privacyPolicyUrl" className="block text-xs text-text-secondary">
+            Privacy Policy URL
+          </label>
           <div className="relative">
             <input
               name="privacyPolicyUrl"
               id="privacyPolicyUrl"
-              className="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 shadow-none outline-none focus-within:shadow-none focus-within:outline-none focus-within:ring-0 focus:border-none focus:ring-0 dark:bg-gray-700 dark:text-gray-100 sm:text-sm"
+              className="block w-full border-0 bg-transparent p-0 placeholder-text-secondary shadow-none outline-none focus-within:shadow-none focus-within:outline-none focus-within:ring-0 focus:border-none focus:ring-0 sm:text-sm"
               placeholder="https://api.example-weather-app.com/privacy"
               // value=""
             />
@@ -280,13 +288,7 @@ export default function ActionsInput({
           className="focus:shadow-outline mt-1 flex min-w-[100px] items-center justify-center rounded bg-green-500 px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500 focus:outline-none focus:ring-0 disabled:bg-green-400"
           type="button"
         >
-          {updateAction.isLoading ? (
-            <Spinner className="icon-md" />
-          ) : action?.action_id ? (
-            localize('com_ui_update')
-          ) : (
-            localize('com_ui_create')
-          )}
+          {submitContext()}
         </button>
       </div>
     </>

client/src/components/SidePanel/Builder/AssistantAvatar.tsx

@@ -51,15 +51,15 @@ function Avatar({
   const { showToast } = useToastContext();
 
   const activeModel = useMemo(() => {
-    return assistantsMap[endpoint][assistant_id ?? '']?.model ?? '';
+    return assistantsMap?.[endpoint][assistant_id ?? '']?.model ?? '';
   }, [assistantsMap, endpoint, assistant_id]);
 
   const { mutate: uploadAvatar } = useUploadAssistantAvatarMutation({
     onMutate: () => {
       setProgress(0.4);
     },
     onSuccess: (data, vars) => {
-      if (!vars.postCreation) {
+      if (vars.postCreation !== true) {
         showToast({ message: localize('com_ui_upload_success') });
       } else if (lastSeenCreatedId.current !== createMutation.data?.id) {
         lastSeenCreatedId.current = createMutation.data?.id ?? '';
@@ -136,9 +136,9 @@ function Avatar({
       createMutation.isSuccess &&
       input &&
       previewUrl &&
-      previewUrl?.includes('base64')
+      previewUrl.includes('base64')
     );
-    if (sharedUploadCondition && lastSeenCreatedId.current === createMutation.data?.id) {
+    if (sharedUploadCondition && lastSeenCreatedId.current === createMutation.data.id) {
       return;
     }
 
@@ -149,8 +149,8 @@ function Avatar({
       formData.append('file', input, input.name);
       formData.append('assistant_id', createMutation.data.id);
 
-      if (typeof createMutation.data?.metadata === 'object') {
-        formData.append('metadata', JSON.stringify(createMutation.data?.metadata));
+      if (typeof createMutation.data.metadata === 'object') {
+        formData.append('metadata', JSON.stringify(createMutation.data.metadata));
       }
 
       uploadAvatar({