Merge branch 'main' into re-add-download-audio

2026-01-20 17:26:12 +01:00 · 2024-07-15 18:37:04 +02:00 · 2024-07-15 18:37:04 +02:00 · 32d84c85ea
commit 32d84c85ea
parent d839e4661c 0a1d38e318
408 changed files with 16931 additions and 4946 deletions
--- a/client/src/hooks/AuthContext.tsx
+++ b/client/src/hooks/AuthContext.tsx
@ -3,20 +3,21 @@ import {
  useState,
  useEffect,
  ReactNode,
+  useContext,
  useCallback,
  createContext,
-  useContext,
 } from 'react';
 import { useRecoilState } from 'recoil';
-import { TLoginResponse, setTokenHeader, TLoginUser } from 'librechat-data-provider';
+import { useNavigate } from 'react-router-dom';
+import { setTokenHeader, SystemRoles } from 'librechat-data-provider';
 import {
  useGetUserQuery,
  useLoginUserMutation,
  useRefreshTokenMutation,
 } from 'librechat-data-provider/react-query';
-import { useNavigate } from 'react-router-dom';
+import type { TLoginResponse, TLoginUser } from 'librechat-data-provider';
 import { TAuthConfig, TUserContext, TAuthContext, TResError } from '~/common';
-import { useLogoutUserMutation } from '~/data-provider';
+import { useLogoutUserMutation, useGetRole } from '~/data-provider';
 import useTimeout from './useTimeout';
 import store from '~/store';

@ -33,6 +34,9 @@ const AuthContextProvider = ({
  const [token, setToken] = useState<string | undefined>(undefined);
  const [error, setError] = useState<string | undefined>(undefined);
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const { data: userRole = null } = useGetRole(SystemRoles.USER, {
+    enabled: !!(isAuthenticated && user?.role),
+  });

  const navigate = useNavigate();

@ -173,10 +177,13 @@ const AuthContextProvider = ({
      login,
      logout,
      setError,
+      roles: {
+        [SystemRoles.USER]: userRole,
+      },
      isAuthenticated,
    }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [user, error, isAuthenticated, token],
+    [user, error, isAuthenticated, token, userRole],
  );

  return <AuthContext.Provider value={memoedValue}>{children}</AuthContext.Provider>;
--- a/client/src/hooks/Chat/index.ts
+++ b/client/src/hooks/Chat/index.ts
@ -0,0 +1,4 @@
+export { default as useChatHelpers } from './useChatHelpers';
+export { default as useAddedHelpers } from './useAddedHelpers';
+export { default as useAddedResponse } from './useAddedResponse';
+export { default as useChatFunctions } from './useChatFunctions';
--- a/client/src/hooks/Chat/useAddedHelpers.ts
+++ b/client/src/hooks/Chat/useAddedHelpers.ts
@ -0,0 +1,128 @@
+import { useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { QueryKeys } from 'librechat-data-provider';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import type { TMessage } from 'librechat-data-provider';
+import useChatFunctions from '~/hooks/Chat/useChatFunctions';
+import store from '~/store';
+
+// this to be set somewhere else
+export default function useAddedHelpers({
+  rootIndex = 0,
+  currentIndex,
+  paramId,
+}: {
+  rootIndex?: number;
+  currentIndex: number;
+  paramId?: string;
+}) {
+  const queryClient = useQueryClient();
+
+  const clearAllSubmissions = store.useClearSubmissionState();
+  const [files, setFiles] = useRecoilState(store.filesByIndex(rootIndex));
+  const latestMessage = useRecoilValue(store.latestMessageFamily(rootIndex));
+  const setLatestMultiMessage = useSetRecoilState(store.latestMessageFamily(currentIndex));
+
+  const { useCreateConversationAtom } = store;
+  const { conversation, setConversation } = useCreateConversationAtom(currentIndex);
+  const [isSubmitting, setIsSubmitting] = useRecoilState(store.isSubmittingFamily(currentIndex));
+
+  const setSiblingIdx = useSetRecoilState(
+    store.messagesSiblingIdxFamily(latestMessage?.parentMessageId ?? null),
+  );
+
+  const queryParam = paramId === 'new' ? paramId : conversation?.conversationId ?? paramId ?? '';
+
+  const setMessages = useCallback(
+    (messages: TMessage[]) => {
+      queryClient.setQueryData<TMessage[]>(
+        [QueryKeys.messages, queryParam, currentIndex],
+        messages,
+      );
+      const latestMultiMessage = messages[messages.length - 1];
+      if (latestMultiMessage) {
+        setLatestMultiMessage({ ...latestMultiMessage, depth: -1 });
+      }
+    },
+    [queryParam, queryClient, currentIndex, setLatestMultiMessage],
+  );
+
+  const getMessages = useCallback(() => {
+    return queryClient.getQueryData<TMessage[]>([QueryKeys.messages, queryParam, currentIndex]);
+  }, [queryParam, queryClient, currentIndex]);
+
+  const setSubmission = useSetRecoilState(store.submissionByIndex(currentIndex));
+
+  const { ask, regenerate } = useChatFunctions({
+    index: currentIndex,
+    files,
+    setFiles,
+    getMessages,
+    setMessages,
+    isSubmitting,
+    conversation,
+    setSubmission,
+    latestMessage,
+  });
+
+  const continueGeneration = () => {
+    if (!latestMessage) {
+      console.error('Failed to regenerate the message: latestMessage not found.');
+      return;
+    }
+
+    const messages = getMessages();
+
+    const parentMessage = messages?.find(
+      (element) => element.messageId == latestMessage.parentMessageId,
+    );
+
+    if (parentMessage && parentMessage.isCreatedByUser) {
+      ask({ ...parentMessage }, { isContinued: true, isRegenerate: true, isEdited: true });
+    } else {
+      console.error(
+        'Failed to regenerate the message: parentMessage not found, or not created by user.',
+      );
+    }
+  };
+
+  const stopGenerating = () => clearAllSubmissions();
+
+  const handleStopGenerating = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    stopGenerating();
+  };
+
+  const handleRegenerate = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    const parentMessageId = latestMessage?.parentMessageId;
+    if (!parentMessageId) {
+      console.error('Failed to regenerate the message: parentMessageId not found.');
+      return;
+    }
+    regenerate({ parentMessageId });
+  };
+
+  const handleContinue = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    continueGeneration();
+    setSiblingIdx(0);
+  };
+
+  return {
+    ask,
+    regenerate,
+    getMessages,
+    setMessages,
+    conversation,
+    isSubmitting,
+    setSiblingIdx,
+    latestMessage,
+    stopGenerating,
+    handleContinue,
+    setConversation,
+    setIsSubmitting,
+    handleRegenerate,
+    handleStopGenerating,
+  };
+}
--- a/client/src/hooks/Chat/useAddedResponse.ts
+++ b/client/src/hooks/Chat/useAddedResponse.ts
@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import useGenerateConvo from '~/hooks/Conversations/useGenerateConvo';
+import useAddedHelpers from '~/hooks/Chat/useAddedHelpers';
+
+export default function useAddedResponse({ rootIndex }: { rootIndex: number }) {
+  const currentIndex = useMemo(() => rootIndex + 1, [rootIndex]);
+  const {
+    ask,
+    regenerate,
+    setMessages,
+    getMessages,
+    conversation,
+    isSubmitting,
+    setConversation,
+    setIsSubmitting,
+  } = useAddedHelpers({
+    rootIndex,
+    currentIndex,
+  });
+
+  const { generateConversation } = useGenerateConvo({
+    index: currentIndex,
+    rootIndex,
+    setConversation,
+  });
+
+  return {
+    ask,
+    regenerate,
+    getMessages,
+    setMessages,
+    conversation,
+    isSubmitting,
+    setConversation,
+    setIsSubmitting,
+    generateConversation,
+    addedIndex: currentIndex,
+  };
+}
--- a/client/src/hooks/Chat/useChatFunctions.ts
+++ b/client/src/hooks/Chat/useChatFunctions.ts
@ -0,0 +1,264 @@
+import { v4 } from 'uuid';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  Constants,
+  QueryKeys,
+  ContentTypes,
+  parseCompactConvo,
+  isAssistantsEndpoint,
+} from 'librechat-data-provider';
+import { useSetRecoilState, useResetRecoilState } from 'recoil';
+import type {
+  TMessage,
+  TSubmission,
+  TConversation,
+  TEndpointOption,
+  TEndpointsConfig,
+} from 'librechat-data-provider';
+import type { SetterOrUpdater } from 'recoil';
+import type { TAskFunction, ExtendedFile } from '~/common';
+import useSetFilesToDelete from '~/hooks/Files/useSetFilesToDelete';
+import useGetSender from '~/hooks/Conversations/useGetSender';
+import { getEndpointField, logger } from '~/utils';
+import useUserKey from '~/hooks/Input/useUserKey';
+import store from '~/store';
+
+export default function useChatFunctions({
+  index = 0,
+  files,
+  setFiles,
+  getMessages,
+  setMessages,
+  isSubmitting,
+  conversation,
+  latestMessage,
+  setSubmission,
+  setLatestMessage,
+}: {
+  index?: number;
+  isSubmitting: boolean;
+  paramId?: string | undefined;
+  conversation: TConversation | null;
+  latestMessage: TMessage | null;
+  getMessages: () => TMessage[] | undefined;
+  setMessages: (messages: TMessage[]) => void;
+  files?: Map<string, ExtendedFile>;
+  setFiles?: SetterOrUpdater<Map<string, ExtendedFile>>;
+  setSubmission: SetterOrUpdater<TSubmission | null>;
+  setLatestMessage?: SetterOrUpdater<TMessage | null>;
+}) {
+  const resetLatestMultiMessage = useResetRecoilState(store.latestMessageFamily(index + 1));
+  const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(index));
+  const setFilesToDelete = useSetFilesToDelete();
+  const getSender = useGetSender();
+
+  const queryClient = useQueryClient();
+  const { getExpiry } = useUserKey(conversation?.endpoint ?? '');
+
+  const ask: TAskFunction = (
+    {
+      text,
+      overrideConvoId,
+      overrideUserMessageId,
+      parentMessageId = null,
+      conversationId = null,
+      messageId = null,
+    },
+    {
+      editedText = null,
+      editedMessageId = null,
+      resubmitFiles = false,
+      isRegenerate = false,
+      isContinued = false,
+      isEdited = false,
+      overrideMessages,
+    } = {},
+  ) => {
+    setShowStopButton(false);
+    resetLatestMultiMessage();
+    if (!!isSubmitting || text === '') {
+      return;
+    }
+
+    const endpoint = conversation?.endpoint;
+    if (endpoint === null) {
+      console.error('No endpoint available');
+      return;
+    }
+
+    conversationId = conversationId ?? conversation?.conversationId ?? null;
+    if (conversationId == 'search') {
+      console.error('cannot send any message under search view!');
+      return;
+    }
+
+    if (isContinued && !latestMessage) {
+      console.error('cannot continue AI message without latestMessage!');
+      return;
+    }
+
+    const isEditOrContinue = isEdited || isContinued;
+
+    let currentMessages: TMessage[] | null = overrideMessages ?? getMessages() ?? [];
+
+    // construct the query message
+    // this is not a real messageId, it is used as placeholder before real messageId returned
+    text = text.trim();
+    const intermediateId = overrideUserMessageId ?? v4();
+    parentMessageId = parentMessageId || latestMessage?.messageId || Constants.NO_PARENT;
+
+    if (conversationId == Constants.NEW_CONVO) {
+      parentMessageId = Constants.NO_PARENT;
+      currentMessages = [];
+      conversationId = null;
+    }
+
+    const parentMessage = currentMessages?.find(
+      (msg) => msg.messageId === latestMessage?.parentMessageId,
+    );
+
+    let thread_id = parentMessage?.thread_id ?? latestMessage?.thread_id;
+    if (!thread_id) {
+      thread_id = currentMessages.find((message) => message.thread_id)?.thread_id;
+    }
+
+    const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);
+    const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
+
+    // set the endpoint option
+    const convo = parseCompactConvo({
+      endpoint,
+      endpointType,
+      conversation: conversation ?? {},
+    });
+
+    const { modelDisplayLabel } = endpointsConfig?.[endpoint ?? ''] ?? {};
+    const endpointOption = {
+      ...convo,
+      endpoint,
+      thread_id,
+      endpointType,
+      overrideConvoId,
+      key: getExpiry(),
+      modelDisplayLabel,
+      overrideUserMessageId,
+    } as TEndpointOption;
+    const responseSender = getSender({ model: conversation?.model, ...endpointOption });
+
+    const currentMsg: TMessage = {
+      text,
+      sender: 'User',
+      isCreatedByUser: true,
+      parentMessageId,
+      conversationId,
+      messageId: isContinued && messageId ? messageId : intermediateId,
+      thread_id,
+      error: false,
+    };
+
+    const reuseFiles = (isRegenerate || resubmitFiles) && parentMessage?.files;
+    if (setFiles && reuseFiles && parentMessage.files?.length) {
+      currentMsg.files = parentMessage.files;
+      setFiles(new Map());
+      setFilesToDelete({});
+    } else if (setFiles && files && 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());
+      setFilesToDelete({});
+    }
+
+    // construct the placeholder response message
+    const generation = editedText ?? latestMessage?.text ?? '';
+    const responseText = isEditOrContinue ? generation : '';
+
+    const responseMessageId = editedMessageId ?? latestMessage?.messageId ?? null;
+    const initialResponse: TMessage = {
+      sender: responseSender,
+      text: responseText,
+      endpoint: endpoint ?? '',
+      parentMessageId: isRegenerate ? messageId : intermediateId,
+      messageId: responseMessageId ?? `${isRegenerate ? messageId : intermediateId}_`,
+      thread_id,
+      conversationId,
+      unfinished: false,
+      isCreatedByUser: false,
+      isEdited: isEditOrContinue,
+      iconURL: convo.iconURL,
+      error: false,
+    };
+
+    if (isAssistantsEndpoint(endpoint)) {
+      initialResponse.model = conversation?.assistant_id ?? '';
+      initialResponse.text = '';
+      initialResponse.content = [
+        {
+          type: ContentTypes.TEXT,
+          [ContentTypes.TEXT]: {
+            value: responseText,
+          },
+        },
+      ];
+    } else {
+      setShowStopButton(true);
+    }
+
+    if (isContinued) {
+      currentMessages = currentMessages.filter((msg) => msg.messageId !== responseMessageId);
+    }
+
+    const submission: TSubmission = {
+      conversation: {
+        ...conversation,
+        conversationId,
+      },
+      endpointOption,
+      userMessage: {
+        ...currentMsg,
+        generation,
+        responseMessageId,
+        overrideParentMessageId: isRegenerate ? messageId : null,
+      },
+      messages: currentMessages,
+      isEdited: isEditOrContinue,
+      isContinued,
+      isRegenerate,
+      initialResponse,
+    };
+
+    if (isRegenerate) {
+      setMessages([...submission.messages, initialResponse]);
+    } else {
+      setMessages([...submission.messages, currentMsg, initialResponse]);
+    }
+    if (index === 0 && setLatestMessage) {
+      setLatestMessage(initialResponse);
+    }
+    setSubmission(submission);
+    logger.log('Submission:');
+    logger.dir(submission, { depth: null });
+  };
+
+  const regenerate = ({ parentMessageId }) => {
+    const messages = getMessages();
+    const parentMessage = messages?.find((element) => element.messageId == parentMessageId);
+
+    if (parentMessage && parentMessage.isCreatedByUser) {
+      ask({ ...parentMessage }, { isRegenerate: true });
+    } else {
+      console.error(
+        'Failed to regenerate the message: parentMessage not found or not created by user.',
+      );
+    }
+  };
+
+  return {
+    ask,
+    regenerate,
+  };
+}
--- a/client/src/hooks/Chat/useChatHelpers.ts
+++ b/client/src/hooks/Chat/useChatHelpers.ts
@ -0,0 +1,182 @@
+import { useCallback, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { QueryKeys } from 'librechat-data-provider';
+import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
+import { useGetMessagesByConvoId } from 'librechat-data-provider/react-query';
+import type { TMessage } from 'librechat-data-provider';
+import useChatFunctions from '~/hooks/Chat/useChatFunctions';
+import { useAuthContext } from '~/hooks/AuthContext';
+import useNewConvo from '~/hooks/useNewConvo';
+import store from '~/store';
+
+// this to be set somewhere else
+export default function useChatHelpers(index = 0, paramId?: string) {
+  const clearAllSubmissions = store.useClearSubmissionState();
+  const [files, setFiles] = useRecoilState(store.filesByIndex(index));
+  const [filesLoading, setFilesLoading] = useState(false);
+
+  const queryClient = useQueryClient();
+  const { isAuthenticated } = useAuthContext();
+
+  const { newConversation } = useNewConvo(index);
+  const { useCreateConversationAtom } = store;
+  const { conversation, setConversation } = useCreateConversationAtom(index);
+  const { conversationId } = conversation ?? {};
+
+  const queryParam = paramId === 'new' ? paramId : conversationId ?? paramId ?? '';
+
+  /* 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 ?? '', {
+    enabled: isAuthenticated,
+  });
+
+  const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
+  const [isSubmitting, setIsSubmitting] = useRecoilState(store.isSubmittingFamily(index));
+  const [latestMessage, setLatestMessage] = useRecoilState(store.latestMessageFamily(index));
+  const setSiblingIdx = useSetRecoilState(
+    store.messagesSiblingIdxFamily(latestMessage?.parentMessageId ?? null),
+  );
+
+  const setMessages = useCallback(
+    (messages: TMessage[]) => {
+      queryClient.setQueryData<TMessage[]>([QueryKeys.messages, queryParam], messages);
+      if (queryParam === 'new') {
+        queryClient.setQueryData<TMessage[]>([QueryKeys.messages, conversationId], messages);
+      }
+    },
+    [queryParam, queryClient, conversationId],
+  );
+
+  const getMessages = useCallback(() => {
+    return queryClient.getQueryData<TMessage[]>([QueryKeys.messages, queryParam]);
+  }, [queryParam, queryClient]);
+
+  /* Conversation */
+  // const setActiveConvos = useSetRecoilState(store.activeConversations);
+
+  // const setConversation = useCallback(
+  //   (convoUpdate: TConversation) => {
+  //     _setConversation(prev => {
+  //       const { conversationId: convoId } = prev ?? { conversationId: null };
+  //       const { conversationId: currentId } = convoUpdate;
+  //       if (currentId && convoId && convoId !== 'new' && convoId !== currentId) {
+  //         // for now, we delete the prev convoId from activeConversations
+  //         const newActiveConvos = { [currentId]: true };
+  //         setActiveConvos(newActiveConvos);
+  //       }
+  //       return convoUpdate;
+  //     });
+  //   },
+  //   [_setConversation, setActiveConvos],
+  // );
+
+  const setSubmission = useSetRecoilState(store.submissionByIndex(index));
+
+  const { ask, regenerate } = useChatFunctions({
+    index,
+    files,
+    setFiles,
+    getMessages,
+    setMessages,
+    isSubmitting,
+    conversation,
+    latestMessage,
+    setSubmission,
+    setLatestMessage,
+  });
+
+  const continueGeneration = () => {
+    if (!latestMessage) {
+      console.error('Failed to regenerate the message: latestMessage not found.');
+      return;
+    }
+
+    const messages = getMessages();
+
+    const parentMessage = messages?.find(
+      (element) => element.messageId == latestMessage.parentMessageId,
+    );
+
+    if (parentMessage && parentMessage.isCreatedByUser) {
+      ask({ ...parentMessage }, { isContinued: true, isRegenerate: true, isEdited: true });
+    } else {
+      console.error(
+        'Failed to regenerate the message: parentMessage not found, or not created by user.',
+      );
+    }
+  };
+
+  const stopGenerating = () => clearAllSubmissions();
+
+  const handleStopGenerating = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    stopGenerating();
+  };
+
+  const handleRegenerate = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    const parentMessageId = latestMessage?.parentMessageId;
+    if (!parentMessageId) {
+      console.error('Failed to regenerate the message: parentMessageId not found.');
+      return;
+    }
+    regenerate({ parentMessageId });
+  };
+
+  const handleContinue = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    continueGeneration();
+    setSiblingIdx(0);
+  };
+
+  const [showBingToneSetting, setShowBingToneSetting] = useRecoilState(
+    store.showBingToneSettingFamily(index),
+  );
+  const [showPopover, setShowPopover] = useRecoilState(store.showPopoverFamily(index));
+  const [abortScroll, setAbortScroll] = useRecoilState(store.abortScrollFamily(index));
+  const [preset, setPreset] = useRecoilState(store.presetByIndex(index));
+  const [optionSettings, setOptionSettings] = useRecoilState(store.optionSettingsFamily(index));
+  const [showAgentSettings, setShowAgentSettings] = useRecoilState(
+    store.showAgentSettingsFamily(index),
+  );
+
+  return {
+    newConversation,
+    conversation,
+    setConversation,
+    // getConvos,
+    // setConvos,
+    isSubmitting,
+    setIsSubmitting,
+    getMessages,
+    setMessages,
+    setSiblingIdx,
+    latestMessage,
+    setLatestMessage,
+    resetLatestMessage,
+    ask,
+    index,
+    regenerate,
+    stopGenerating,
+    handleStopGenerating,
+    handleRegenerate,
+    handleContinue,
+    showPopover,
+    setShowPopover,
+    abortScroll,
+    setAbortScroll,
+    showBingToneSetting,
+    setShowBingToneSetting,
+    preset,
+    setPreset,
+    optionSettings,
+    setOptionSettings,
+    showAgentSettings,
+    setShowAgentSettings,
+    files,
+    setFiles,
+    filesLoading,
+    setFilesLoading,
+  };
+}
--- a/client/src/hooks/Conversations/index.ts
+++ b/client/src/hooks/Conversations/index.ts
@ -3,6 +3,7 @@ export { default as usePresets } from './usePresets';
 export { default as useGetSender } from './useGetSender';
 export { default as useDefaultConvo } from './useDefaultConvo';
 export { default as useConversation } from './useConversation';
+export { default as useGenerateConvo } from './useGenerateConvo';
 export { default as useConversations } from './useConversations';
 export { default as useDebouncedInput } from './useDebouncedInput';
 export { default as useNavigateToConvo } from './useNavigateToConvo';
--- a/client/src/hooks/Conversations/useConversation.ts
+++ b/client/src/hooks/Conversations/useConversation.ts
@ -1,5 +1,7 @@
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { QueryKeys } from 'librechat-data-provider';
+import { useQueryClient } from '@tanstack/react-query';
 import { useSetRecoilState, useResetRecoilState, useRecoilCallback } from 'recoil';
 import { useGetEndpointsQuery, useGetModelsQuery } from 'librechat-data-provider/react-query';
 import type {
@ -15,6 +17,7 @@ import store from '~/store';

 const useConversation = () => {
  const navigate = useNavigate();
+  const queryClient = useQueryClient();
  const setConversation = useSetRecoilState(store.conversation);
  const resetLatestMessage = useResetRecoilState(store.latestMessage);
  const setMessages = useSetRecoilState<TMessagesAtom>(store.messages);
@ -59,6 +62,7 @@ const useConversation = () => {
        resetLatestMessage();

        if (conversation.conversationId === 'new' && !modelsData) {
+          queryClient.invalidateQueries([QueryKeys.messages, 'new']);
          navigate('/c/new');
        }
      },
--- a/client/src/hooks/Conversations/useGenerateConvo.ts
+++ b/client/src/hooks/Conversations/useGenerateConvo.ts
@ -0,0 +1,147 @@
+import { useRecoilValue } from 'recoil';
+import { useCallback, useRef, useEffect } from 'react';
+import { LocalStorageKeys, isAssistantsEndpoint } from 'librechat-data-provider';
+import { useGetModelsQuery, useGetEndpointsQuery } from 'librechat-data-provider/react-query';
+import type {
+  TPreset,
+  TModelsConfig,
+  TConversation,
+  TEndpointsConfig,
+} from 'librechat-data-provider';
+import type { SetterOrUpdater } from 'recoil';
+import type { AssistantListItem } from '~/common';
+import { getEndpointField, buildDefaultConvo, getDefaultEndpoint } from '~/utils';
+import useAssistantListMap from '~/hooks/Assistants/useAssistantListMap';
+import { mainTextareaId } from '~/common';
+import store from '~/store';
+
+const useGenerateConvo = ({
+  index = 0,
+  rootIndex,
+  setConversation,
+}: {
+  index?: number;
+  rootIndex: number;
+  setConversation?: SetterOrUpdater<TConversation | null>;
+}) => {
+  const modelsQuery = useGetModelsQuery();
+  const assistantsListMap = useAssistantListMap();
+  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
+
+  const timeoutIdRef = useRef<NodeJS.Timeout>();
+  const rootConvo = useRecoilValue(store.conversationByKeySelector(rootIndex));
+
+  useEffect(() => {
+    if (rootConvo?.conversationId && setConversation) {
+      setConversation((prevState) => {
+        if (!prevState) {
+          return prevState;
+        }
+        const update = {
+          ...prevState,
+          conversationId: rootConvo.conversationId,
+        } as TConversation;
+
+        return update;
+      });
+    }
+  }, [rootConvo?.conversationId, setConversation]);
+
+  const generateConversation = useCallback(
+    ({
+      template = {},
+      preset,
+      modelsData,
+    }: {
+      template?: Partial<TConversation>;
+      preset?: Partial<TPreset>;
+      modelsData?: TModelsConfig;
+    } = {}) => {
+      let conversation = {
+        conversationId: 'new',
+        title: 'New Chat',
+        endpoint: null,
+        ...template,
+        createdAt: '',
+        updatedAt: '',
+      };
+
+      if (rootConvo?.conversationId) {
+        conversation.conversationId = rootConvo.conversationId;
+      }
+
+      const modelsConfig = modelsData ?? modelsQuery.data;
+
+      const defaultEndpoint = getDefaultEndpoint({
+        convoSetup: preset ?? conversation,
+        endpointsConfig,
+      });
+
+      const endpointType = getEndpointField(endpointsConfig, defaultEndpoint, 'type');
+      if (!conversation.endpointType && endpointType) {
+        conversation.endpointType = endpointType;
+      } else if (conversation.endpointType && !endpointType) {
+        conversation.endpointType = undefined;
+      }
+
+      const isAssistantEndpoint = isAssistantsEndpoint(defaultEndpoint);
+      const assistants: AssistantListItem[] = assistantsListMap[defaultEndpoint] ?? [];
+
+      if (
+        conversation.assistant_id &&
+        !assistantsListMap[defaultEndpoint]?.[conversation.assistant_id]
+      ) {
+        conversation.assistant_id = undefined;
+      }
+
+      if (!conversation.assistant_id && isAssistantEndpoint) {
+        conversation.assistant_id =
+          localStorage.getItem(`${LocalStorageKeys.ASST_ID_PREFIX}${index}${defaultEndpoint}`) ??
+          assistants[0]?.id;
+      }
+
+      if (
+        conversation.assistant_id &&
+        isAssistantEndpoint &&
+        conversation.conversationId === 'new'
+      ) {
+        const assistant = assistants.find((asst) => asst.id === conversation.assistant_id);
+        conversation.model = assistant?.model;
+      }
+
+      if (conversation.assistant_id && !isAssistantEndpoint) {
+        conversation.assistant_id = undefined;
+      }
+
+      const models = modelsConfig?.[defaultEndpoint] ?? [];
+      conversation = buildDefaultConvo({
+        conversation,
+        lastConversationSetup: preset as TConversation,
+        endpoint: defaultEndpoint,
+        models,
+      });
+
+      if (preset?.title) {
+        conversation.title = preset.title;
+      }
+
+      if (setConversation) {
+        setConversation(conversation);
+      }
+
+      clearTimeout(timeoutIdRef.current);
+      timeoutIdRef.current = setTimeout(() => {
+        const textarea = document.getElementById(mainTextareaId);
+        if (textarea) {
+          textarea.focus();
+        }
+      }, 150);
+      return conversation;
+    },
+    [assistantsListMap, endpointsConfig, index, modelsQuery.data, rootConvo, setConversation],
+  );
+
+  return { generateConversation };
+};
+
+export default useGenerateConvo;
--- a/client/src/hooks/Conversations/useNavigateToConvo.tsx
+++ b/client/src/hooks/Conversations/useNavigateToConvo.tsx
@ -1,6 +1,6 @@
+import { useSetRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
-import { useSetRecoilState, useResetRecoilState } from 'recoil';
 import { QueryKeys, EModelEndpoint, LocalStorageKeys } from 'librechat-data-provider';
 import type { TConversation, TEndpointsConfig, TModelsConfig } from 'librechat-data-provider';
 import { buildDefaultConvo, getDefaultEndpoint, getEndpointField } from '~/utils';
@ -9,9 +9,10 @@ import store from '~/store';
 const useNavigateToConvo = (index = 0) => {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
-  const { setConversation } = store.useCreateConversationAtom(index);
+  const clearAllConversations = store.useClearConvoState();
+  const clearAllLatestMessages = store.useClearLatestMessages();
  const setSubmission = useSetRecoilState(store.submissionByIndex(index));
-  const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
+  const { setConversation } = store.useCreateConversationAtom(index);

  const navigateToConvo = (conversation: TConversation, _resetLatestMessage = true) => {
    if (!conversation) {
@ -20,7 +21,7 @@ const useNavigateToConvo = (index = 0) => {
    }
    setSubmission(null);
    if (_resetLatestMessage) {
-      resetLatestMessage();
+      clearAllLatestMessages();
    }

    let convo = { ...conversation };
@ -47,6 +48,7 @@ const useNavigateToConvo = (index = 0) => {
        models,
      });
    }
+    clearAllConversations(true);
    setConversation(convo);
    navigate(`/c/${convo.conversationId ?? 'new'}`);
  };
--- a/client/src/hooks/Conversations/usePresets.ts
+++ b/client/src/hooks/Conversations/usePresets.ts
@ -1,9 +1,9 @@
 import filenamify from 'filenamify';
 import exportFromJSON from 'export-from-json';
+import { QueryKeys } from 'librechat-data-provider';
 import { useCallback, useEffect, useRef } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil';
-import { QueryKeys, modularEndpoints, isAssistantsEndpoint } from 'librechat-data-provider';
 import { useCreatePresetMutation, useGetModelsQuery } from 'librechat-data-provider/react-query';
 import type { TPreset, TEndpointsConfig } from 'librechat-data-provider';
 import {
@ -11,7 +11,7 @@ import {
  useDeletePresetMutation,
  useGetPresetsQuery,
 } from '~/data-provider';
-import { cleanupPreset, getEndpointField, removeUnavailableTools } from '~/utils';
+import { cleanupPreset, removeUnavailableTools, getConvoSwitchLogic } from '~/utils';
 import useDefaultConvo from '~/hooks/Conversations/useDefaultConvo';
 import { useChatContext, useToastContext } from '~/Providers';
 import { useAuthContext } from '~/hooks/AuthContext';
@ -124,8 +124,6 @@ export default function usePresets() {

  const getDefaultConversation = useDefaultConvo();

-  const { endpoint } = conversation ?? {};
-
  const importPreset = (jsonPreset: TPreset) => {
    createPresetMutation.mutate(
      { ...jsonPreset },
@ -171,34 +169,38 @@ export default function usePresets() {

    const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);

-    const currentEndpointType = getEndpointField(endpointsConfig, endpoint, 'type');
-    const endpointType = getEndpointField(endpointsConfig, newPreset.endpoint, 'type');
-    const isAssistantSwitch =
-      isAssistantsEndpoint(newPreset.endpoint) &&
-      isAssistantsEndpoint(conversation?.endpoint) &&
-      conversation?.endpoint === newPreset.endpoint;
+    const {
+      shouldSwitch,
+      isNewModular,
+      newEndpointType,
+      isCurrentModular,
+      isExistingConversation,
+    } = getConvoSwitchLogic({
+      newEndpoint: newPreset.endpoint ?? '',
+      modularChat,
+      conversation,
+      endpointsConfig,
+    });

-    if (
-      (modularEndpoints.has(endpoint ?? '') ||
-        modularEndpoints.has(currentEndpointType ?? '') ||
-        isAssistantSwitch) &&
-      (modularEndpoints.has(newPreset?.endpoint ?? '') ||
-        modularEndpoints.has(endpointType ?? '') ||
-        isAssistantSwitch) &&
-      (endpoint === newPreset?.endpoint || modularChat || isAssistantSwitch)
-    ) {
+    const isModular = isCurrentModular && isNewModular && shouldSwitch;
+    if (isExistingConversation && isModular) {
      const currentConvo = getDefaultConversation({
        /* target endpointType is necessary to avoid endpoint mixing */
-        conversation: { ...(conversation ?? {}), endpointType },
-        preset: { ...newPreset, endpointType },
+        conversation: { ...(conversation ?? {}), endpointType: newEndpointType },
+        preset: { ...newPreset, endpointType: newEndpointType },
      });

      /* We don't reset the latest message, only when changing settings mid-converstion */
-      newConversation({ template: currentConvo, preset: currentConvo, keepLatestMessage: true });
+      newConversation({
+        template: currentConvo,
+        preset: currentConvo,
+        keepLatestMessage: true,
+        keepAddedConvos: true,
+      });
      return;
    }

-    newConversation({ preset: newPreset });
+    newConversation({ preset: newPreset, keepAddedConvos: isModular });
  };

  const onChangePreset = (preset: TPreset) => {
--- a/client/src/hooks/Files/useFileHandling.ts
+++ b/client/src/hooks/Files/useFileHandling.ts
@ -165,6 +165,13 @@ const useFileHandling = (params?: UseFileHandling) => {
      formData.append('model', conversation?.model ?? '');
      formData.append('message_file', 'true');
    }
+    if (isAssistantsEndpoint(endpoint) && !formData.get('version')) {
+      const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);
+      const version = endpointsConfig?.[endpoint]?.version ?? defaultAssistantsVersion[endpoint];
+      formData.append('version', version);
+      formData.append('model', conversation?.model ?? '');
+      formData.append('message_file', 'true');
+    }

    formData.append('endpoint', endpoint);

--- a/client/src/hooks/Input/index.ts
+++ b/client/src/hooks/Input/index.ts
@ -1,8 +1,11 @@
+export * from './useAutoSave';
 export { default as useUserKey } from './useUserKey';
 export { default as useDebounce } from './useDebounce';
 export { default as useTextarea } from './useTextarea';
 export { default as useCombobox } from './useCombobox';
+export { default as useHandleKeyUp } from './useHandleKeyUp';
 export { default as useRequiresKey } from './useRequiresKey';
 export { default as useMultipleKeys } from './useMultipleKeys';
 export { default as useSpeechToText } from './useSpeechToText';
 export { default as useTextToSpeech } from './useTextToSpeech';
+export { default as useGetAudioSettings } from './useGetAudioSettings';
--- a/client/src/hooks/Input/useAutoSave.ts
+++ b/client/src/hooks/Input/useAutoSave.ts
@ -1,10 +1,10 @@
 import debounce from 'lodash/debounce';
-import { UseFormSetValue } from 'react-hook-form';
 import { SetterOrUpdater, useRecoilValue } from 'recoil';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { LocalStorageKeys, TFile } from 'librechat-data-provider';
+import type { ExtendedFile } from '~/common';
+import { useChatFormContext } from '~/Providers';
 import { useGetFiles } from '~/data-provider';
-import { ExtendedFile } from '~/common';
 import store from '~/store';

 export const useAutoSave = ({
@ -12,15 +12,14 @@ export const useAutoSave = ({
  textAreaRef,
  files,
  setFiles,
-  setValue,
 }: {
  conversationId?: string | null;
  textAreaRef: React.RefObject<HTMLTextAreaElement>;
  files: Map<string, ExtendedFile>;
  setFiles: SetterOrUpdater<Map<string, ExtendedFile>>;
-  setValue: UseFormSetValue<{ text: string }>;
 }) => {
  // setting for auto-save
+  const { setValue } = useChatFormContext();
  const saveDrafts = useRecoilValue<boolean>(store.saveDrafts);

  const [currentConversationId, setCurrentConversationId] = useState<string | null>(null);
--- a/client/src/hooks/Input/useGetAudioSettings.ts
+++ b/client/src/hooks/Input/useGetAudioSettings.ts
@ -0,0 +1,19 @@
+import { useRecoilState } from 'recoil';
+import store from '~/store';
+
+export enum AudioEndpoints {
+  browser = 'browser',
+  external = 'external',
+}
+
+const useGetAudioSettings = () => {
+  const [engineSTT] = useRecoilState<string>(store.engineSTT);
+  const [engineTTS] = useRecoilState<string>(store.engineTTS);
+
+  const externalSpeechToText = engineSTT === AudioEndpoints.external;
+  const externalTextToSpeech = engineTTS === AudioEndpoints.external;
+
+  return { externalSpeechToText, externalTextToSpeech };
+};
+
+export default useGetAudioSettings;
--- a/client/src/hooks/Input/useHandleKeyUp.ts
+++ b/client/src/hooks/Input/useHandleKeyUp.ts
@ -0,0 +1,115 @@
+import { useSetRecoilState } from 'recoil';
+import { useCallback, useMemo } from 'react';
+import { PermissionTypes, Permissions } from 'librechat-data-provider';
+import type { SetterOrUpdater } from 'recoil';
+import useHasAccess from '~/hooks/Roles/useHasAccess';
+import store from '~/store';
+
+/** Event Keys that shouldn't trigger a command */
+const invalidKeys = {
+  Escape: true,
+  Backspace: true,
+  Enter: true,
+};
+
+/**
+ * Utility function to determine if a command should trigger.
+ */
+const shouldTriggerCommand = (
+  textAreaRef: React.RefObject<HTMLTextAreaElement>,
+  commandChar: string,
+) => {
+  const text = textAreaRef.current?.value;
+  if (!(text && text[text.length - 1] === commandChar)) {
+    return false;
+  }
+
+  const startPos = textAreaRef.current?.selectionStart;
+  if (!startPos) {
+    return false;
+  }
+
+  const isAtStart = startPos === 1;
+  const isPrecededBySpace = textAreaRef.current?.value.charAt(startPos - 2) === ' ';
+
+  const shouldTrigger = isAtStart || isPrecededBySpace;
+  return shouldTrigger;
+};
+
+/**
+ * Custom hook for handling key up events with command triggers.
+ */
+const useHandleKeyUp = ({
+  index,
+  textAreaRef,
+  setShowPlusPopover,
+  setShowMentionPopover,
+}: {
+  index: number;
+  textAreaRef: React.RefObject<HTMLTextAreaElement>;
+  setShowPlusPopover: SetterOrUpdater<boolean>;
+  setShowMentionPopover: SetterOrUpdater<boolean>;
+}) => {
+  const hasAccess = useHasAccess({
+    permissionType: PermissionTypes.PROMPTS,
+    permission: Permissions.USE,
+  });
+  const setShowPromptsPopover = useSetRecoilState(store.showPromptsPopoverFamily(index));
+  const handleAtCommand = useCallback(() => {
+    if (shouldTriggerCommand(textAreaRef, '@')) {
+      setShowMentionPopover(true);
+    }
+  }, [textAreaRef, setShowMentionPopover]);
+
+  const handlePlusCommand = useCallback(() => {
+    if (shouldTriggerCommand(textAreaRef, '+')) {
+      setShowPlusPopover(true);
+    }
+  }, [textAreaRef, setShowPlusPopover]);
+
+  const handlePromptsCommand = useCallback(() => {
+    if (!hasAccess) {
+      return;
+    }
+    if (shouldTriggerCommand(textAreaRef, '/')) {
+      setShowPromptsPopover(true);
+    }
+  }, [textAreaRef, hasAccess, setShowPromptsPopover]);
+
+  const commandHandlers = useMemo(
+    () => ({
+      '@': handleAtCommand,
+      '+': handlePlusCommand,
+      '/': handlePromptsCommand,
+    }),
+    [handleAtCommand, handlePlusCommand, handlePromptsCommand],
+  );
+
+  /**
+   * Main key up handler.
+   */
+  const handleKeyUp = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      const text = textAreaRef.current?.value;
+      if (!text) {
+        return;
+      }
+
+      if (invalidKeys[event.key]) {
+        return;
+      }
+
+      const lastChar = text[text.length - 1];
+      const handler = commandHandlers[lastChar];
+
+      if (handler) {
+        handler();
+      }
+    },
+    [textAreaRef, commandHandlers],
+  );
+
+  return handleKeyUp;
+};
+
+export default useHandleKeyUp;
--- a/client/src/hooks/Input/useMentions.ts
+++ b/client/src/hooks/Input/useMentions.ts
@ -4,14 +4,18 @@ import {
  useGetStartupConfig,
  useGetEndpointsQuery,
 } from 'librechat-data-provider/react-query';
-import { getConfigDefaults, EModelEndpoint, alternateName } from 'librechat-data-provider';
+import {
+  getConfigDefaults,
+  EModelEndpoint,
+  alternateName,
+  isAssistantsEndpoint,
+} from 'librechat-data-provider';
 import type { AssistantsEndpoint, TAssistantsMap, TEndpointsConfig } from 'librechat-data-provider';
 import type { MentionOption } from '~/common';
 import useAssistantListMap from '~/hooks/Assistants/useAssistantListMap';
 import { mapEndpoints, getPresetTitle } from '~/utils';
 import { EndpointIcon } from '~/components/Endpoints';
 import { useGetPresetsQuery } from '~/data-provider';
-import useSelectMention from './useSelectMention';

 const defaultInterface = getConfigDefaults().interface;

@ -40,7 +44,13 @@ const assistantMapFn =
      }),
    });

-export default function useMentions({ assistantMap }: { assistantMap: TAssistantsMap }) {
+export default function useMentions({
+  assistantMap,
+  includeAssistants,
+}: {
+  assistantMap: TAssistantsMap;
+  includeAssistants: boolean;
+}) {
  const { data: presets } = useGetPresetsQuery();
  const { data: modelsConfig } = useGetModelsQuery();
  const { data: startupConfig } = useGetStartupConfig();
@ -85,14 +95,11 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
    [startupConfig],
  );

-  const { onSelectMention } = useSelectMention({
-    modelSpecs,
-    endpointsConfig,
-    presets,
-    assistantMap,
-  });
-
  const options: MentionOption[] = useMemo(() => {
+    let validEndpoints = endpoints;
+    if (!includeAssistants) {
+      validEndpoints = endpoints.filter((endpoint) => !isAssistantsEndpoint(endpoint));
+    }
    const mentions = [
      ...(modelSpecs?.length > 0 ? modelSpecs : []).map((modelSpec) => ({
        value: modelSpec.name,
@ -109,7 +116,7 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
        }),
        type: 'modelSpec' as const,
      })),
-      ...(interfaceConfig.endpointsMenu ? endpoints : []).map((endpoint) => ({
+      ...(interfaceConfig.endpointsMenu ? validEndpoints : []).map((endpoint) => ({
        value: endpoint,
        label: alternateName[endpoint] ?? endpoint ?? '',
        type: 'endpoint' as const,
@ -120,10 +127,10 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
          size: 20,
        }),
      })),
-      ...(endpointsConfig?.[EModelEndpoint.assistants]
+      ...(endpointsConfig?.[EModelEndpoint.assistants] && includeAssistants
        ? assistantListMap[EModelEndpoint.assistants] || []
        : []),
-      ...(endpointsConfig?.[EModelEndpoint.azureAssistants]
+      ...(endpointsConfig?.[EModelEndpoint.azureAssistants] && includeAssistants
        ? assistantListMap[EModelEndpoint.azureAssistants] || []
        : []),
      ...((interfaceConfig.presets ? presets : [])?.map((preset, index) => ({
@ -150,14 +157,17 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
    assistantMap,
    endpointsConfig,
    assistantListMap,
+    includeAssistants,
    interfaceConfig.presets,
    interfaceConfig.endpointsMenu,
  ]);

  return {
    options,
+    presets,
+    modelSpecs,
    modelsConfig,
-    onSelectMention,
+    endpointsConfig,
    assistantListMap,
  };
 }
--- a/client/src/hooks/Input/useSelectMention.ts
+++ b/client/src/hooks/Input/useSelectMention.ts
@ -8,25 +8,26 @@ import type {
  TAssistantsMap,
  TEndpointsConfig,
 } from 'librechat-data-provider';
-import type { MentionOption } from '~/common';
+import type { MentionOption, ConvoGenerator } from '~/common';
 import { getConvoSwitchLogic, getModelSpecIconURL, removeUnavailableTools } from '~/utils';
-import { useDefaultConvo, useNewConvo } from '~/hooks';
 import { useChatContext } from '~/Providers';
+import { useDefaultConvo } from '~/hooks';
 import store from '~/store';

 export default function useSelectMention({
  presets,
  modelSpecs,
-  endpointsConfig,
  assistantMap,
+  endpointsConfig,
+  newConversation,
 }: {
  presets?: TPreset[];
  modelSpecs: TModelSpec[];
-  endpointsConfig: TEndpointsConfig;
  assistantMap: TAssistantsMap;
+  newConversation: ConvoGenerator;
+  endpointsConfig: TEndpointsConfig;
 }) {
  const { conversation } = useChatContext();
-  const { newConversation } = useNewConvo();
  const getDefaultConversation = useDefaultConvo();
  const modularChat = useRecoilValue(store.modularChat);
  const availableTools = useRecoilValue(store.availableTools);
@ -45,12 +46,12 @@ export default function useSelectMention({
      }

      const {
+        template,
        shouldSwitch,
        isNewModular,
+        newEndpointType,
        isCurrentModular,
        isExistingConversation,
-        newEndpointType,
-        template,
      } = getConvoSwitchLogic({
        newEndpoint,
        modularChat,
@ -58,7 +59,8 @@ export default function useSelectMention({
        endpointsConfig,
      });

-      if (isExistingConversation && isCurrentModular && isNewModular && shouldSwitch) {
+      const isModular = isCurrentModular && isNewModular && shouldSwitch;
+      if (isExistingConversation && isModular) {
        template.endpointType = newEndpointType as EModelEndpoint | undefined;

        const currentConvo = getDefaultConversation({
@ -68,11 +70,20 @@ export default function useSelectMention({
        });

        /* We don't reset the latest message, only when changing settings mid-converstion */
-        newConversation({ template: currentConvo, preset, keepLatestMessage: true });
+        newConversation({
+          template: currentConvo,
+          preset,
+          keepLatestMessage: true,
+          keepAddedConvos: true,
+        });
        return;
      }

-      newConversation({ template: { ...(template as Partial<TConversation>) }, preset });
+      newConversation({
+        template: { ...(template as Partial<TConversation>) },
+        preset,
+        keepAddedConvos: isModular,
+      });
    },
    [conversation, getDefaultConversation, modularChat, newConversation, endpointsConfig],
  );
@ -142,12 +153,12 @@ export default function useSelectMention({
      const newEndpoint = newPreset.endpoint ?? '';

      const {
+        template,
        shouldSwitch,
        isNewModular,
+        newEndpointType,
        isCurrentModular,
        isExistingConversation,
-        newEndpointType,
-        template,
      } = getConvoSwitchLogic({
        newEndpoint,
        modularChat,
@ -155,7 +166,8 @@ export default function useSelectMention({
        endpointsConfig,
      });

-      if (isExistingConversation && isCurrentModular && isNewModular && shouldSwitch) {
+      const isModular = isCurrentModular && isNewModular && shouldSwitch;
+      if (isExistingConversation && isModular) {
        template.endpointType = newEndpointType as EModelEndpoint | undefined;

        const currentConvo = getDefaultConversation({
@ -165,19 +177,24 @@ export default function useSelectMention({
        });

        /* We don't reset the latest message, only when changing settings mid-converstion */
-        newConversation({ template: currentConvo, preset: newPreset, keepLatestMessage: true });
+        newConversation({
+          template: currentConvo,
+          preset: newPreset,
+          keepLatestMessage: true,
+          keepAddedConvos: true,
+        });
        return;
      }

-      newConversation({ preset: newPreset });
+      newConversation({ preset: newPreset, keepAddedConvos: true });
    },
    [
-      availableTools,
-      conversation,
-      getDefaultConversation,
      modularChat,
+      conversation,
+      availableTools,
      newConversation,
      endpointsConfig,
+      getDefaultConversation,
    ],
  );

--- a/client/src/hooks/Input/useSpeechToText.ts
+++ b/client/src/hooks/Input/useSpeechToText.ts
@ -1,17 +1,16 @@
 import { useState, useEffect } from 'react';
 import useSpeechToTextBrowser from './useSpeechToTextBrowser';
 import useSpeechToTextExternal from './useSpeechToTextExternal';
-import { useRecoilState } from 'recoil';
-import store from '~/store';
+import useGetAudioSettings from './useGetAudioSettings';

 const useSpeechToText = (handleTranscriptionComplete: (text: string) => void) => {
-  const [endpointSTT] = useRecoilState<string>(store.endpointSTT);
-  const useExternalSpeechToText = endpointSTT === 'external';
+  const { externalSpeechToText } = useGetAudioSettings();
  const [animatedText, setAnimatedText] = useState('');

  const {
    isListening: speechIsListeningBrowser,
    isLoading: speechIsLoadingBrowser,
+    interimTranscript: interimTranscriptBrowser,
    text: speechTextBrowser,
    startRecording: startSpeechRecordingBrowser,
    stopRecording: stopSpeechRecordingBrowser,
@ -26,21 +25,21 @@ const useSpeechToText = (handleTranscriptionComplete: (text: string) => void) =>
    clearText,
  } = useSpeechToTextExternal(handleTranscriptionComplete);

-  const isListening = useExternalSpeechToText
-    ? speechIsListeningExternal
-    : speechIsListeningBrowser;
-  const isLoading = useExternalSpeechToText ? speechIsLoadingExternal : speechIsLoadingBrowser;
-  const speechTextForm = useExternalSpeechToText ? speechTextExternal : speechTextBrowser;
-  const startRecording = useExternalSpeechToText
+  const isListening = externalSpeechToText ? speechIsListeningExternal : speechIsListeningBrowser;
+  const isLoading = externalSpeechToText ? speechIsLoadingExternal : speechIsLoadingBrowser;
+  const speechTextForm = externalSpeechToText ? speechTextExternal : speechTextBrowser;
+  const startRecording = externalSpeechToText
    ? startSpeechRecordingExternal
    : startSpeechRecordingBrowser;
-  const stopRecording = useExternalSpeechToText
+  const stopRecording = externalSpeechToText
    ? stopSpeechRecordingExternal
    : stopSpeechRecordingBrowser;
  const speechText =
    isListening || (speechTextExternal && speechTextExternal.length > 0)
      ? speechTextExternal
      : speechTextForm || '';
+  // for a future real-time STT external
+  const interimTranscript = externalSpeechToText ? '' : interimTranscriptBrowser;

  const animateTextTyping = (text: string) => {
    const totalDuration = 2000;
@ -65,17 +64,18 @@ const useSpeechToText = (handleTranscriptionComplete: (text: string) => void) =>
  };

  useEffect(() => {
-    if (speechText) {
+    if (speechText && externalSpeechToText) {
      animateTextTyping(speechText);
    }
-  }, [speechText]);
+  }, [speechText, externalSpeechToText]);

  return {
    isListening,
    isLoading,
    startRecording,
    stopRecording,
-    speechText: animatedText,
+    interimTranscript,
+    speechText: externalSpeechToText ? animatedText : speechText,
    clearText,
  };
 };
--- a/client/src/hooks/Input/useSpeechToTextBrowser.ts
+++ b/client/src/hooks/Input/useSpeechToTextBrowser.ts
@ -1,34 +1,57 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { useToastContext } from '~/Providers';
 import store from '~/store';
 import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
+import useGetAudioSettings from './useGetAudioSettings';

 const useSpeechToTextBrowser = () => {
  const { showToast } = useToastContext();
-  const [endpointSTT] = useRecoilState<string>(store.endpointSTT);
+  const [languageSTT] = useRecoilState<string>(store.languageSTT);
+  const [autoTranscribeAudio] = useRecoilState<boolean>(store.autoTranscribeAudio);
+  const { externalSpeechToText } = useGetAudioSettings();
+  const [isListening, setIsListening] = useState(false);

-  const { transcript, listening, resetTranscript, browserSupportsSpeechRecognition } =
-    useSpeechRecognition();
+  const {
+    interimTranscript,
+    finalTranscript,
+    listening,
+    browserSupportsSpeechRecognition,
+    isMicrophoneAvailable,
+  } = useSpeechRecognition();

  const toggleListening = () => {
-    if (browserSupportsSpeechRecognition) {
-      if (listening) {
-        SpeechRecognition.stopListening();
-      } else {
-        SpeechRecognition.startListening();
-      }
-    } else {
+    if (!browserSupportsSpeechRecognition) {
      showToast({
        message: 'Browser does not support SpeechRecognition',
        status: 'error',
      });
+      return;
+    }
+
+    if (!isMicrophoneAvailable) {
+      showToast({
+        message: 'Microphone is not available',
+        status: 'error',
+      });
+      return;
+    }
+
+    if (listening) {
+      setIsListening(false);
+      SpeechRecognition.stopListening();
+    } else {
+      setIsListening(true);
+      SpeechRecognition.startListening({
+        language: languageSTT,
+        continuous: autoTranscribeAudio,
+      });
    }
  };

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.shiftKey && e.altKey && e.code === 'KeyL' && endpointSTT === 'browser') {
+      if (e.shiftKey && e.altKey && e.code === 'KeyL' && !externalSpeechToText) {
        toggleListening();
      }
    };
@ -37,15 +60,19 @@ const useSpeechToTextBrowser = () => {
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

+  useEffect(() => {
+    if (!listening) {
+      setIsListening(false);
+    }
+  }, [listening]);
+
  return {
-    isListening: listening,
+    isListening,
    isLoading: false,
-    text: transcript,
+    interimTranscript,
+    text: finalTranscript,
    startRecording: toggleListening,
-    stopRecording: () => {
-      SpeechRecognition.stopListening();
-      resetTranscript();
-    },
+    stopRecording: toggleListening,
  };
 };

--- a/client/src/hooks/Input/useSpeechToTextExternal.ts
+++ b/client/src/hooks/Input/useSpeechToTextExternal.ts
@ -3,11 +3,12 @@ import { useRecoilState } from 'recoil';
 import { useSpeechToTextMutation } from '~/data-provider';
 import { useToastContext } from '~/Providers';
 import store from '~/store';
+import useGetAudioSettings from './useGetAudioSettings';

 const useSpeechToTextExternal = (onTranscriptionComplete: (text: string) => void) => {
  const { showToast } = useToastContext();
-  const [endpointSTT] = useRecoilState<string>(store.endpointSTT);
-  const [speechToText] = useRecoilState<boolean>(store.SpeechToText);
+  const { externalSpeechToText } = useGetAudioSettings();
+  const [speechToText] = useRecoilState<boolean>(store.speechToText);
  const [autoTranscribeAudio] = useRecoilState<boolean>(store.autoTranscribeAudio);
  const [autoSendText] = useRecoilState<boolean>(store.autoSendText);
  const [text, setText] = useState<string>('');
@ -196,7 +197,7 @@ const useSpeechToTextExternal = (onTranscriptionComplete: (text: string) => void
  };

  const handleKeyDown = async (e: KeyboardEvent) => {
-    if (e.shiftKey && e.altKey && e.code === 'KeyL' && endpointSTT !== 'browser') {
+    if (e.shiftKey && e.altKey && e.code === 'KeyL' && !externalSpeechToText) {
      if (!window.MediaRecorder) {
        showToast({ message: 'MediaRecorder is not supported in this browser', status: 'error' });
        return;
--- a/client/src/hooks/Input/useTextToSpeech.ts
+++ b/client/src/hooks/Input/useTextToSpeech.ts
@ -4,12 +4,10 @@ import type { TMessage } from 'librechat-data-provider';
 import useTextToSpeechExternal from './useTextToSpeechExternal';
 import useTextToSpeechBrowser from './useTextToSpeechBrowser';
 import { usePauseGlobalAudio } from '../Audio';
-import { useRecoilState } from 'recoil';
-import store from '~/store';
+import useGetAudioSettings from './useGetAudioSettings';

 const useTextToSpeech = (message: TMessage, isLast: boolean, index = 0) => {
-  const [endpointTTS] = useRecoilState<string>(store.endpointTTS);
-  const useExternalTextToSpeech = endpointTTS === 'external';
+  const { externalTextToSpeech } = useGetAudioSettings();

  const {
    generateSpeechLocal: generateSpeechLocal,
@ -26,9 +24,9 @@ const useTextToSpeech = (message: TMessage, isLast: boolean, index = 0) => {
  } = useTextToSpeechExternal(message.messageId, isLast, index);
  const { pauseGlobalAudio } = usePauseGlobalAudio(index);

-  const generateSpeech = useExternalTextToSpeech ? generateSpeechExternal : generateSpeechLocal;
-  const cancelSpeech = useExternalTextToSpeech ? cancelSpeechExternal : cancelSpeechLocal;
-  const isSpeaking = useExternalTextToSpeech ? isSpeakingExternal : isSpeakingLocal;
+  const generateSpeech = externalTextToSpeech ? generateSpeechExternal : generateSpeechLocal;
+  const cancelSpeech = externalTextToSpeech ? cancelSpeechExternal : cancelSpeechLocal;
+  const isSpeaking = externalTextToSpeech ? isSpeakingExternal : isSpeakingLocal;

  const isMouseDownRef = useRef(false);
  const timerRef = useRef<number | undefined>(undefined);
--- a/client/src/hooks/Input/useTextToSpeechBrowser.ts
+++ b/client/src/hooks/Input/useTextToSpeechBrowser.ts
@ -1,12 +1,24 @@
+import { useRecoilState } from 'recoil';
 import { useState } from 'react';
+import store from '~/store';

 function useTextToSpeechBrowser() {
+  const [cloudBrowserVoices] = useRecoilState(store.cloudBrowserVoices);
  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [voiceName] = useRecoilState(store.voice);

  const generateSpeechLocal = (text: string) => {
    const synth = window.speechSynthesis;
+    const voices = synth.getVoices().filter((v) => cloudBrowserVoices || v.localService === true);
+    const voice = voices.find((v) => v.name === voiceName);
+
+    if (!voice) {
+      return;
+    }
+
    synth.cancel();
    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.voice = voice;
    utterance.onend = () => {
      setIsSpeaking(false);
    };
--- a/client/src/hooks/Input/useTextarea.ts
+++ b/client/src/hooks/Input/useTextarea.ts
@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce';
 import { useEffect, useRef, useCallback } from 'react';
+import { useRecoilValue, useRecoilState } from 'recoil';
 import { isAssistantsEndpoint } from 'librechat-data-provider';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
 import type { TEndpointOption } from 'librechat-data-provider';
 import type { KeyboardEvent } from 'react';
 import { forceResize, insertTextAtCursor, getAssistantName } from '~/utils';
@ -40,8 +40,7 @@ export default function useTextarea({
    setFilesLoading,
    setShowBingToneSetting,
  } = useChatContext();
-
-  const setShowMentionPopover = useSetRecoilState(store.showMentionPopoverFamily(index));
+  const [activePrompt, setActivePrompt] = useRecoilState(store.activePromptByIndex(index));

  const { conversationId, jailbreak, endpoint = '', assistant_id } = conversation || {};
  const isNotAppendable =
@ -53,6 +52,14 @@ export default function useTextarea({
    isAssistantsEndpoint(endpoint) && assistantMap?.[endpoint ?? '']?.[assistant_id ?? ''];
  const assistantName = (assistant && assistant?.name) || '';

+  useEffect(() => {
+    if (activePrompt && textAreaRef.current) {
+      insertTextAtCursor(textAreaRef.current, activePrompt);
+      forceResize(textAreaRef.current);
+      setActivePrompt(undefined);
+    }
+  }, [activePrompt, setActivePrompt, textAreaRef]);
+
  // auto focus to input, when enter a conversation.
  useEffect(() => {
    if (!conversationId) {
@ -119,7 +126,7 @@ export default function useTextarea({

      if (textAreaRef.current?.getAttribute('placeholder') !== placeholder) {
        textAreaRef.current?.setAttribute('placeholder', placeholder);
-        forceResize(textAreaRef);
+        forceResize(textAreaRef.current);
      }
    };

@ -139,23 +146,6 @@ export default function useTextarea({
    assistantMap,
  ]);

-  const handleKeyUp = useCallback(() => {
-    const text = textAreaRef.current?.value;
-    if (!(text && text[text.length - 1] === '@')) {
-      return;
-    }
-
-    const startPos = textAreaRef.current?.selectionStart;
-    if (!startPos) {
-      return;
-    }
-
-    const isAtStart = startPos === 1;
-    const isPrecededBySpace = textAreaRef.current?.value.charAt(startPos - 2) === ' ';
-
-    setShowMentionPopover(isAtStart || isPrecededBySpace);
-  }, [textAreaRef, setShowMentionPopover]);
-
  const handleKeyDown = useCallback(
    (e: KeyEvent) => {
      if (e.key === 'Enter' && isSubmitting) {
@ -173,10 +163,16 @@ export default function useTextarea({
        e.preventDefault();
      }

-      if (e.key === 'Enter' && !enterToSend && !isCtrlEnter && textAreaRef.current) {
+      if (
+        e.key === 'Enter' &&
+        !enterToSend &&
+        !isCtrlEnter &&
+        textAreaRef.current &&
+        !isComposing?.current
+      ) {
        e.preventDefault();
        insertTextAtCursor(textAreaRef.current, '\n');
-        forceResize(textAreaRef);
+        forceResize(textAreaRef.current);
        return;
      }

@ -229,7 +225,6 @@ export default function useTextarea({
  return {
    textAreaRef,
    handlePaste,
-    handleKeyUp,
    handleKeyDown,
    handleCompositionStart,
    handleCompositionEnd,
--- a/client/src/hooks/Input/useUserKey.ts
+++ b/client/src/hooks/Input/useUserKey.ts
@ -21,16 +21,17 @@ const useUserKey = (endpoint: string) => {

  const updateKey = useUpdateUserKeysMutation();
  const checkUserKey = useUserKeyQuery(keyName);
+
  const getExpiry = useCallback(() => {
    if (checkUserKey.data) {
-      return checkUserKey.data.expiresAt;
+      return checkUserKey.data?.expiresAt || 'never';
    }
  }, [checkUserKey.data]);

  const checkExpiry = useCallback(() => {
    const expiresAt = getExpiry();
    if (!expiresAt) {
-      return false;
+      return true;
    }

    const expiresAtDate = new Date(expiresAt);
@ -41,8 +42,8 @@ const useUserKey = (endpoint: string) => {
  }, [getExpiry]);

  const saveUserKey = useCallback(
-    (userKey: string, expiresAt: number) => {
-      const dateStr = new Date(expiresAt).toISOString();
+    (userKey: string, expiresAt: number | null) => {
+      const dateStr = expiresAt ? new Date(expiresAt).toISOString() : '';
      updateKey.mutate({
        name: keyName,
        value: userKey,
--- a/client/src/hooks/Messages/index.ts
+++ b/client/src/hooks/Messages/index.ts
@ -1,5 +1,8 @@
 export { default as useAvatar } from './useAvatar';
 export { default as useProgress } from './useProgress';
+export { default as useSubmitMessage } from './useSubmitMessage';
+export { default as useMessageActions } from './useMessageActions';
+export { default as useMessageProcess } from './useMessageProcess';
 export { default as useMessageHelpers } from './useMessageHelpers';
 export { default as useCopyToClipboard } from './useCopyToClipboard';
 export { default as useMessageScrolling } from './useMessageScrolling';
--- a/client/src/hooks/Messages/useAvatar.ts
+++ b/client/src/hooks/Messages/useAvatar.ts
@ -1,50 +1,45 @@
-import { useState, useEffect } from 'react';
+import { useMemo } from 'react';
 import { createAvatar } from '@dicebear/core';
 import { initials } from '@dicebear/collection';
 import type { TUser } from 'librechat-data-provider';

+const avatarCache: Record<string, string> = {};
+
 const useAvatar = (user: TUser | undefined) => {
-  const [avatarSrc, setAvatarSrc] = useState('');
-
-  useEffect(() => {
-    if (avatarSrc.length) {
-      return;
-    }
-
-    if (user?.avatar) {
-      return;
-    }
-
+  return useMemo(() => {
    if (!user?.username) {
-      return;
+      return '';
    }

-    const generateAvatar = async () => {
-      if (!user) {
-        return;
-      }
+    if (user.avatar) {
+      return user.avatar;
+    }

-      const { username } = user;
+    const { username } = user;

-      const avatar = createAvatar(initials, {
-        seed: username,
-        fontFamily: ['Verdana'],
-        fontSize: 36,
+    if (avatarCache[username]) {
+      return avatarCache[username];
+    }
+
+    const avatar = createAvatar(initials, {
+      seed: username,
+      fontFamily: ['Verdana'],
+      fontSize: 36,
+    });
+
+    let avatarDataUri = '';
+    avatar
+      .toDataUri()
+      .then((dataUri) => {
+        avatarDataUri = dataUri;
+        avatarCache[username] = dataUri; // Store in cache
+      })
+      .catch((error) => {
+        console.error('Failed to generate avatar:', error);
      });

-      try {
-        const avatarDataUri = await avatar.toDataUri();
-        setAvatarSrc(avatarDataUri);
-      } catch (error) {
-        console.error('Failed to generate avatar:', error);
-        setAvatarSrc('');
-      }
-    };
-
-    generateAvatar();
-  }, [user, avatarSrc.length]);
-
-  return avatarSrc;
+    return avatarDataUri;
+  }, [user]);
 };

 export default useAvatar;
--- a/client/src/hooks/Messages/useCopyToClipboard.ts
+++ b/client/src/hooks/Messages/useCopyToClipboard.ts
@ -19,7 +19,7 @@ export default function useCopyToClipboard({
          return acc;
        }, '');
      }
-      copy(messageText ?? '');
+      copy(messageText ?? '', { format: 'text/plain' });

      setTimeout(() => {
        setIsCopied(false);
--- a/client/src/hooks/Messages/useMessageActions.tsx
+++ b/client/src/hooks/Messages/useMessageActions.tsx
@ -0,0 +1,95 @@
+import { useRecoilValue } from 'recoil';
+import { useCallback, useMemo } from 'react';
+import { isAssistantsEndpoint } from 'librechat-data-provider';
+import type { TMessageProps } from '~/common';
+import { useChatContext, useAddedChatContext, useAssistantsMapContext } from '~/Providers';
+import useCopyToClipboard from './useCopyToClipboard';
+import { useAuthContext } from '~/hooks/AuthContext';
+import useLocalize from '~/hooks/useLocalize';
+import store from '~/store';
+
+export type TMessageActions = Pick<
+  TMessageProps,
+  'message' | 'currentEditId' | 'setCurrentEditId'
+> & {
+  isMultiMessage?: boolean;
+};
+export default function useMessageActions(props: TMessageActions) {
+  const localize = useLocalize();
+  const { user } = useAuthContext();
+  const UsernameDisplay = useRecoilValue<boolean>(store.UsernameDisplay);
+  const { message, currentEditId, setCurrentEditId, isMultiMessage } = props;
+
+  const {
+    ask,
+    index,
+    regenerate,
+    latestMessage,
+    handleContinue,
+    setLatestMessage,
+    conversation: rootConvo,
+    isSubmitting: isSubmittingRoot,
+  } = useChatContext();
+  const { conversation: addedConvo, isSubmitting: isSubmittingAdditional } = useAddedChatContext();
+  const conversation = useMemo(
+    () => (isMultiMessage ? addedConvo : rootConvo),
+    [isMultiMessage, addedConvo, rootConvo],
+  );
+  const assistantMap = useAssistantsMapContext();
+
+  const { text, content, messageId = null, isCreatedByUser } = message ?? {};
+  const edit = useMemo(() => messageId === currentEditId, [messageId, currentEditId]);
+
+  const enterEdit = useCallback(
+    (cancel?: boolean) => setCurrentEditId && setCurrentEditId(cancel ? -1 : messageId),
+    [messageId, setCurrentEditId],
+  );
+
+  const assistant = useMemo(
+    () =>
+      isAssistantsEndpoint(conversation?.endpoint) &&
+      assistantMap?.[conversation?.endpoint ?? '']?.[message?.model ?? ''],
+    [assistantMap, conversation?.endpoint, message?.model],
+  );
+
+  const isSubmitting = useMemo(
+    () => (isMultiMessage ? isSubmittingAdditional : isSubmittingRoot),
+    [isMultiMessage, isSubmittingAdditional, isSubmittingRoot],
+  );
+
+  const regenerateMessage = useCallback(() => {
+    if ((isSubmitting && isCreatedByUser) || !message) {
+      return;
+    }
+
+    regenerate(message);
+  }, [isSubmitting, isCreatedByUser, message, regenerate]);
+
+  const copyToClipboard = useCopyToClipboard({ text, content });
+
+  const messageLabel = useMemo(() => {
+    if (message?.isCreatedByUser) {
+      return UsernameDisplay ? user?.name || user?.username : localize('com_user_message');
+    } else if (assistant) {
+      return assistant.name ?? 'Assistant';
+    } else {
+      return message?.sender;
+    }
+  }, [message, assistant, UsernameDisplay, user, localize]);
+
+  return {
+    ask,
+    edit,
+    index,
+    assistant,
+    enterEdit,
+    conversation,
+    messageLabel,
+    isSubmitting,
+    latestMessage,
+    handleContinue,
+    copyToClipboard,
+    setLatestMessage,
+    regenerateMessage,
+  };
+}
--- a/client/src/hooks/Messages/useMessageProcess.tsx
+++ b/client/src/hooks/Messages/useMessageProcess.tsx
@ -0,0 +1,88 @@
+import { useRecoilValue } from 'recoil';
+import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
+import type { TMessage } from 'librechat-data-provider';
+import { useChatContext, useAddedChatContext } from '~/Providers';
+import { getLatestText, getLengthAndFirstFiveChars } from '~/utils';
+import store from '~/store';
+
+export default function useMessageProcess({ message }: { message?: TMessage | null }) {
+  const latestText = useRef<string | number>('');
+  const hasNoChildren = useMemo(() => !message?.children?.length, [message]);
+  const [siblingMessage, setSiblingMessage] = useState<TMessage | null>(null);
+
+  const {
+    index,
+    conversation,
+    latestMessage,
+    setAbortScroll,
+    setLatestMessage,
+    isSubmitting: isSubmittingRoot,
+  } = useChatContext();
+  const { isSubmitting: isSubmittingAdditional } = useAddedChatContext();
+  const latestMultiMessage = useRecoilValue(store.latestMessageFamily(index + 1));
+  const isSubmittingFamily = useMemo(
+    () => isSubmittingRoot || isSubmittingAdditional,
+    [isSubmittingRoot, isSubmittingAdditional],
+  );
+
+  useEffect(() => {
+    if (conversation?.conversationId === 'new') {
+      return;
+    }
+    if (!message) {
+      return;
+    }
+    if (!hasNoChildren) {
+      return;
+    }
+
+    const text = getLatestText(message);
+    const textKey = `${message?.messageId ?? ''}${getLengthAndFirstFiveChars(text)}`;
+
+    if (textKey === latestText.current) {
+      return;
+    }
+
+    latestText.current = textKey;
+    setLatestMessage({ ...message });
+  }, [hasNoChildren, message, setLatestMessage, conversation?.conversationId]);
+
+  const handleScroll = useCallback(() => {
+    if (isSubmittingFamily) {
+      setAbortScroll(true);
+    } else {
+      setAbortScroll(false);
+    }
+  }, [isSubmittingFamily, setAbortScroll]);
+
+  const showSibling = useMemo(
+    () =>
+      (hasNoChildren && latestMultiMessage && !latestMultiMessage?.children?.length) ||
+      siblingMessage,
+    [hasNoChildren, latestMultiMessage, siblingMessage],
+  );
+
+  useEffect(() => {
+    if (
+      hasNoChildren &&
+      latestMultiMessage &&
+      latestMultiMessage.conversationId === message?.conversationId
+    ) {
+      const newSibling = Object.assign({}, latestMultiMessage, {
+        parentMessageId: message?.parentMessageId,
+        depth: message?.depth,
+      });
+      setSiblingMessage(newSibling);
+    }
+  }, [hasNoChildren, latestMultiMessage, message, setSiblingMessage, latestMessage]);
+
+  return {
+    showSibling,
+    handleScroll,
+    conversation,
+    siblingMessage,
+    setSiblingMessage,
+    isSubmittingFamily,
+    latestMultiMessage,
+  };
+}
--- a/client/src/hooks/Messages/useSubmitMessage.ts
+++ b/client/src/hooks/Messages/useSubmitMessage.ts
@ -0,0 +1,96 @@
+import { v4 } from 'uuid';
+import { useCallback } from 'react';
+import { Constants } from 'librechat-data-provider';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useChatContext, useChatFormContext, useAddedChatContext } from '~/Providers';
+import { useAuthContext } from '~/hooks/AuthContext';
+import { replaceSpecialVars } from '~/utils';
+import store from '~/store';
+
+const appendIndex = (index: number, value?: string) => {
+  if (!value) {
+    return value;
+  }
+  return `${value}${Constants.COMMON_DIVIDER}${index}`;
+};
+
+export default function useSubmitMessage(helpers?: { clearDraft?: () => void }) {
+  const { user } = useAuthContext();
+  const methods = useChatFormContext();
+  const { ask, index, getMessages, setMessages, latestMessage } = useChatContext();
+  const { addedIndex, ask: askAdditional, conversation: addedConvo } = useAddedChatContext();
+
+  const autoSendPrompts = useRecoilValue(store.autoSendPrompts);
+  const activeConvos = useRecoilValue(store.allConversationsSelector);
+  const setActivePrompt = useSetRecoilState(store.activePromptByIndex(index));
+
+  const submitMessage = useCallback(
+    (data?: { text: string }) => {
+      if (!data) {
+        return console.warn('No data provided to submitMessage');
+      }
+      const rootMessages = getMessages();
+      const isLatestInRootMessages = rootMessages?.some(
+        (message) => message?.messageId === latestMessage?.messageId,
+      );
+      if (!isLatestInRootMessages && latestMessage) {
+        setMessages([...(rootMessages || []), latestMessage]);
+      }
+
+      const hasAdded = addedIndex && activeConvos[addedIndex] && addedConvo;
+      const isNewMultiConvo =
+        hasAdded &&
+        activeConvos.every((convoId) => convoId === Constants.NEW_CONVO) &&
+        !rootMessages?.length;
+      const overrideConvoId = isNewMultiConvo ? v4() : undefined;
+      const overrideUserMessageId = hasAdded ? v4() : undefined;
+      const rootIndex = addedIndex - 1;
+      ask({
+        text: data.text,
+        overrideConvoId: appendIndex(rootIndex, overrideConvoId),
+        overrideUserMessageId: appendIndex(rootIndex, overrideUserMessageId),
+      });
+      if (hasAdded) {
+        askAdditional(
+          {
+            text: data.text,
+            overrideConvoId: appendIndex(addedIndex, overrideConvoId),
+            overrideUserMessageId: appendIndex(addedIndex, overrideUserMessageId),
+          },
+          { overrideMessages: rootMessages },
+        );
+      }
+      methods.reset();
+      helpers?.clearDraft && helpers.clearDraft();
+    },
+    [
+      ask,
+      methods,
+      helpers,
+      addedIndex,
+      addedConvo,
+      setMessages,
+      getMessages,
+      activeConvos,
+      askAdditional,
+      latestMessage,
+    ],
+  );
+
+  const submitPrompt = useCallback(
+    (text: string) => {
+      const parsedText = replaceSpecialVars({ text, user });
+      if (autoSendPrompts) {
+        submitMessage({ text: parsedText });
+        return;
+      }
+
+      const currentText = methods.getValues('text');
+      const newText = currentText ? `\n${parsedText}` : parsedText;
+      setActivePrompt(newText);
+    },
+    [autoSendPrompts, submitMessage, setActivePrompt, methods, user],
+  );
+
+  return { submitMessage, submitPrompt };
+}
--- a/client/src/hooks/Nav/index.ts
+++ b/client/src/hooks/Nav/index.ts
@ -1 +1,2 @@
 export { default as useNavScrolling } from './useNavScrolling';
+export * from './useNavHelpers';
--- a/client/src/hooks/Nav/useNavHelpers.ts
+++ b/client/src/hooks/Nav/useNavHelpers.ts
@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import type { Location } from 'react-router-dom';
+
+export function useCustomLink<T = HTMLAnchorElement>(
+  route: string,
+  callback?: (event: React.MouseEvent<T>) => void,
+) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const clickHandler = useCallback(
+    (event: React.MouseEvent<T>) => {
+      if (callback) {
+        callback(event);
+      }
+      if (event.button === 0 && !(event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        navigate(route, { state: { prevLocation: location } });
+      }
+    },
+    [navigate, route, callback, location],
+  );
+  return clickHandler;
+}
+
+export const usePreviousLocation = () => {
+  const location = useLocation();
+  const previousLocationRef: React.MutableRefObject<Location<unknown> | undefined> = useRef();
+
+  useEffect(() => {
+    previousLocationRef.current = location.state?.prevLocation;
+  }, [location]);
+
+  return previousLocationRef;
+};
--- a/client/src/hooks/Nav/useNavScrolling.ts
+++ b/client/src/hooks/Nav/useNavScrolling.ts
@ -1,7 +1,6 @@
 import throttle from 'lodash/throttle';
 import React, { useCallback, useEffect, useRef } from 'react';
 import type { FetchNextPageOptions, InfiniteQueryObserverResult } from '@tanstack/react-query';
-import type { ConversationListResponse } from 'librechat-data-provider';

 export default function useNavScrolling<TData>({
  hasNextPage,
--- a/client/src/hooks/Nav/useSideNavLinks.ts
+++ b/client/src/hooks/Nav/useSideNavLinks.ts
@ -1,15 +1,23 @@
 import { useMemo } from 'react';
 import {
  ArrowRightToLine,
+  MessageSquareQuote,
  // Settings2,
 } from 'lucide-react';
-import { EModelEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
+import {
+  EModelEndpoint,
+  isAssistantsEndpoint,
+  PermissionTypes,
+  Permissions,
+} from 'librechat-data-provider';
 import type { TConfig, TInterfaceConfig } from 'librechat-data-provider';
 import type { NavLink } from '~/common';
 import PanelSwitch from '~/components/SidePanel/Builder/PanelSwitch';
+import PromptsAccordion from '~/components/Prompts/PromptsAccordion';
 // import Parameters from '~/components/SidePanel/Parameters/Panel';
 import FilesPanel from '~/components/SidePanel/Files/Panel';
 import { Blocks, AttachmentIcon } from '~/components/svg';
+import { useHasAccess } from '~/hooks';

 export default function useSideNavLinks({
  hidePanel,
@ -24,17 +32,13 @@ export default function useSideNavLinks({
  endpoint?: EModelEndpoint | null;
  interfaceConfig: Partial<TInterfaceConfig>;
 }) {
+  const hasAccessToPrompts = useHasAccess({
+    permissionType: PermissionTypes.PROMPTS,
+    permission: Permissions.USE,
+  });
+
  const Links = useMemo(() => {
    const links: NavLink[] = [];
-    // if (!isAssistantsEndpoint(endpoint)) {
-    //   links.push({
-    //     title: 'com_sidepanel_parameters',
-    //     label: '',
-    //     icon: Settings2,
-    //     id: 'parameters',
-    //     Component: Parameters,
-    //   });
-    // }
    if (
      isAssistantsEndpoint(endpoint) &&
      assistants &&
@ -51,6 +55,16 @@ export default function useSideNavLinks({
      });
    }

+    if (hasAccessToPrompts) {
+      links.push({
+        title: 'com_ui_prompts',
+        label: '',
+        icon: MessageSquareQuote,
+        id: 'prompts',
+        Component: PromptsAccordion,
+      });
+    }
+
    links.push({
      title: 'com_sidepanel_attach_files',
      label: '',
@ -68,7 +82,14 @@ export default function useSideNavLinks({
    });

    return links;
-  }, [assistants, keyProvided, hidePanel, endpoint, interfaceConfig.parameters]);
+  }, [
+    assistants,
+    keyProvided,
+    hidePanel,
+    endpoint,
+    interfaceConfig.parameters,
+    hasAccessToPrompts,
+  ]);

  return Links;
 }
--- a/client/src/hooks/Prompts/index.ts
+++ b/client/src/hooks/Prompts/index.ts
@ -0,0 +1,2 @@
+export { default as useCategories } from './useCategories';
+export { default as usePromptGroupsNav } from './usePromptGroupsNav';
--- a/client/src/hooks/Prompts/useCategories.tsx
+++ b/client/src/hooks/Prompts/useCategories.tsx
@ -0,0 +1,35 @@
+import { useGetCategories } from '~/data-provider';
+import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
+import useLocalize from '~/hooks/useLocalize';
+
+const loadingCategories = [
+  {
+    label: 'Loading...',
+    value: '',
+  },
+];
+
+const emptyCategory = {
+  label: '-',
+  value: '',
+};
+
+const useCategories = (className = '') => {
+  const localize = useLocalize();
+  const { data: categories = loadingCategories } = useGetCategories({
+    select: (data) =>
+      data.map((category) => ({
+        label: category.label
+          ? localize(`com_ui_${category.label}`) || category.label
+          : localize('com_ui_select_a_category'),
+        value: category.value,
+        icon: category.value ? (
+          <CategoryIcon category={category.value} className={className} />
+        ) : null,
+      })),
+  });
+
+  return { categories, emptyCategory };
+};
+
+export default useCategories;
--- a/client/src/hooks/Prompts/usePromptGroupsNav.ts
+++ b/client/src/hooks/Prompts/usePromptGroupsNav.ts
@ -0,0 +1,75 @@
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { useMemo, useRef, useEffect, useCallback } from 'react';
+import { usePromptGroupsInfiniteQuery } from '~/data-provider';
+import debounce from 'lodash/debounce';
+import store from '~/store';
+import { useQueryClient } from '@tanstack/react-query';
+import { QueryKeys } from 'librechat-data-provider';
+
+export default function usePromptGroupsNav() {
+  const queryClient = useQueryClient();
+  const category = useRecoilValue(store.promptsCategory);
+  const [name, setName] = useRecoilState(store.promptsName);
+  const [pageSize, setPageSize] = useRecoilState(store.promptsPageSize);
+  const [pageNumber, setPageNumber] = useRecoilState(store.promptsPageNumber);
+
+  const maxPageNumberReached = useRef(1);
+
+  useEffect(() => {
+    if (pageNumber > 1 && pageNumber > maxPageNumberReached.current) {
+      maxPageNumberReached.current = pageNumber;
+    }
+  }, [pageNumber]);
+
+  const groupsQuery = usePromptGroupsInfiniteQuery({
+    name,
+    pageSize,
+    category,
+    pageNumber: pageNumber + '',
+  });
+
+  useEffect(() => {
+    maxPageNumberReached.current = 1;
+    setPageNumber(1);
+    queryClient.resetQueries([QueryKeys.promptGroups, name, category, pageSize]);
+  }, [pageSize, name, category, setPageNumber]);
+
+  const promptGroups = useMemo(() => {
+    return groupsQuery?.data?.pages?.[pageNumber - 1 + '']?.promptGroups || [];
+  }, [groupsQuery.data, pageNumber]);
+
+  const nextPage = () => {
+    setPageNumber((prev) => prev + 1);
+    groupsQuery.hasNextPage && groupsQuery.fetchNextPage();
+  };
+
+  const prevPage = () => {
+    setPageNumber((prev) => prev - 1);
+    groupsQuery.hasPreviousPage && groupsQuery.fetchPreviousPage();
+  };
+
+  const isFetching = groupsQuery.isFetchingNextPage;
+  const hasNextPage = !!groupsQuery.hasNextPage || maxPageNumberReached.current > pageNumber;
+  const hasPreviousPage = !!groupsQuery.hasPreviousPage || pageNumber > 1;
+
+  const debouncedSetName = useCallback(
+    debounce((nextValue: string) => {
+      setName(nextValue);
+    }, 850),
+    [setName],
+  );
+
+  return {
+    name,
+    setName: debouncedSetName,
+    nextPage,
+    prevPage,
+    isFetching,
+    pageSize,
+    setPageSize,
+    hasNextPage,
+    groupsQuery,
+    promptGroups,
+    hasPreviousPage,
+  };
+}
--- a/client/src/hooks/Roles/index.ts
+++ b/client/src/hooks/Roles/index.ts
@ -0,0 +1 @@
+export { default as useHasAccess } from './useHasAccess';
--- a/client/src/hooks/Roles/useHasAccess.ts
+++ b/client/src/hooks/Roles/useHasAccess.ts
@ -0,0 +1,34 @@
+import { useMemo, useCallback } from 'react';
+import { SystemRoles, PermissionTypes, Permissions } from 'librechat-data-provider';
+import { useAuthContext } from '~/hooks/AuthContext';
+
+const useHasAccess = ({
+  permissionType,
+  permission,
+}: {
+  permissionType: PermissionTypes;
+  permission: Permissions;
+}) => {
+  const { isAuthenticated, user, roles } = useAuthContext();
+
+  const checkAccess = useCallback(
+    ({ user, permissionType, permission }) => {
+      if (isAuthenticated && user?.role === SystemRoles.ADMIN) {
+        return true;
+      } else if (isAuthenticated && user?.role && roles && roles[user.role]) {
+        return roles[user.role]?.[permissionType]?.[permission] === true;
+      }
+      return false;
+    },
+    [isAuthenticated, roles],
+  );
+
+  const hasAccess = useMemo(
+    () => checkAccess({ user, permissionType, permission }),
+    [user, permissionType, permission, checkAccess],
+  );
+
+  return hasAccess;
+};
+
+export default useHasAccess;
--- a/client/src/hooks/SSE/useEventHandlers.ts
+++ b/client/src/hooks/SSE/useEventHandlers.ts
@ -0,0 +1,544 @@
+import { v4 } from 'uuid';
+import { useParams } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import {
+  QueryKeys,
+  Constants,
+  EndpointURLs,
+  tPresetSchema,
+  tMessageSchema,
+  tConvoUpdateSchema,
+} from 'librechat-data-provider';
+import type {
+  TMessage,
+  TConversation,
+  TSubmission,
+  ConversationData,
+} from 'librechat-data-provider';
+import type { SetterOrUpdater, Resetter } from 'recoil';
+import type { TResData, ConvoGenerator } from '~/common';
+import {
+  addConversation,
+  deleteConversation,
+  updateConversation,
+  getConversationById,
+} from '~/utils';
+import useContentHandler from '~/hooks/SSE/useContentHandler';
+import type { TGenTitleMutation } from '~/data-provider';
+import { useAuthContext } from '~/hooks/AuthContext';
+
+type TSyncData = {
+  sync: boolean;
+  thread_id: string;
+  messages?: TMessage[];
+  requestMessage: TMessage;
+  responseMessage: TMessage;
+  conversationId: string;
+};
+
+export type EventHandlerParams = {
+  isAddedRequest?: boolean;
+  genTitle?: TGenTitleMutation;
+  setCompleted: React.Dispatch<React.SetStateAction<Set<unknown>>>;
+  setMessages: (messages: TMessage[]) => void;
+  getMessages: () => TMessage[] | undefined;
+  setIsSubmitting: SetterOrUpdater<boolean>;
+  setConversation?: SetterOrUpdater<TConversation | null>;
+  newConversation?: ConvoGenerator;
+  setShowStopButton: SetterOrUpdater<boolean>;
+  resetLatestMessage?: Resetter;
+};
+
+export default function useEventHandlers({
+  genTitle,
+  setMessages,
+  getMessages,
+  setCompleted,
+  isAddedRequest,
+  setConversation,
+  setIsSubmitting,
+  newConversation,
+  setShowStopButton,
+  resetLatestMessage,
+}: EventHandlerParams) {
+  const queryClient = useQueryClient();
+
+  const { conversationId: paramId } = useParams();
+  const { token } = useAuthContext();
+
+  const contentHandler = useContentHandler({ setMessages, getMessages });
+
+  const messageHandler = useCallback(
+    (data: string, submission: TSubmission) => {
+      const {
+        messages,
+        userMessage,
+        plugin,
+        plugins,
+        initialResponse,
+        isRegenerate = false,
+      } = submission;
+
+      if (isRegenerate) {
+        setMessages([
+          ...messages,
+          {
+            ...initialResponse,
+            text: data,
+            plugin: plugin ?? null,
+            plugins: plugins ?? [],
+            // unfinished: true
+          },
+        ]);
+      } else {
+        setMessages([
+          ...messages,
+          userMessage,
+          {
+            ...initialResponse,
+            text: data,
+            plugin: plugin ?? null,
+            plugins: plugins ?? [],
+            // unfinished: true
+          },
+        ]);
+      }
+    },
+    [setMessages],
+  );
+
+  const cancelHandler = useCallback(
+    (data: TResData, submission: TSubmission) => {
+      const { requestMessage, responseMessage, conversation } = data;
+      const { messages, isRegenerate = false } = submission;
+
+      const convoUpdate = conversation ?? submission.conversation;
+
+      // update the messages
+      if (isRegenerate) {
+        const messagesUpdate = [...messages, responseMessage].filter((msg) => msg);
+        setMessages(messagesUpdate);
+      } else {
+        const messagesUpdate = [...messages, requestMessage, responseMessage].filter((msg) => msg);
+        setMessages(messagesUpdate);
+      }
+
+      const isNewConvo = conversation.conversationId !== submission.conversation.conversationId;
+      if (isNewConvo) {
+        queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
+          if (!convoData) {
+            return convoData;
+          }
+          return deleteConversation(convoData, submission.conversation.conversationId as string);
+        });
+      }
+
+      // refresh title
+      if (genTitle && isNewConvo && requestMessage?.parentMessageId === Constants.NO_PARENT) {
+        setTimeout(() => {
+          genTitle.mutate({ conversationId: convoUpdate.conversationId as string });
+        }, 2500);
+      }
+
+      if (setConversation && !isAddedRequest) {
+        setConversation((prevState) => {
+          const update = {
+            ...prevState,
+            ...convoUpdate,
+          };
+
+          return update;
+        });
+      }
+
+      setIsSubmitting(false);
+    },
+    [setMessages, setConversation, genTitle, isAddedRequest, queryClient, setIsSubmitting],
+  );
+
+  const syncHandler = useCallback(
+    (data: TSyncData, submission: TSubmission) => {
+      const { conversationId, thread_id, responseMessage, requestMessage } = data;
+      const { initialResponse, messages: _messages, userMessage } = submission;
+
+      const messages = _messages.filter((msg) => msg.messageId !== userMessage.messageId);
+
+      setMessages([
+        ...messages,
+        requestMessage,
+        {
+          ...initialResponse,
+          ...responseMessage,
+        },
+      ]);
+
+      let update = {} as TConversation;
+      if (setConversation && !isAddedRequest) {
+        setConversation((prevState) => {
+          let title = prevState?.title;
+          const parentId = requestMessage.parentMessageId;
+          if (parentId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
+            const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
+            const cachedConvo = getConversationById(convos, conversationId);
+            title = cachedConvo?.title;
+          }
+
+          update = tConvoUpdateSchema.parse({
+            ...prevState,
+            conversationId,
+            thread_id,
+            title,
+            messages: [requestMessage.messageId, responseMessage.messageId],
+          }) as TConversation;
+
+          return update;
+        });
+
+        queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
+          if (!convoData) {
+            return convoData;
+          }
+          if (requestMessage.parentMessageId === Constants.NO_PARENT) {
+            return addConversation(convoData, update);
+          } else {
+            return updateConversation(convoData, update);
+          }
+        });
+      } else if (setConversation) {
+        setConversation((prevState) => {
+          update = tConvoUpdateSchema.parse({
+            ...prevState,
+            conversationId,
+            thread_id,
+            messages: [requestMessage.messageId, responseMessage.messageId],
+          }) as TConversation;
+          return update;
+        });
+      }
+
+      setShowStopButton(true);
+      if (resetLatestMessage) {
+        resetLatestMessage();
+      }
+    },
+    [
+      setMessages,
+      setConversation,
+      queryClient,
+      isAddedRequest,
+      setShowStopButton,
+      resetLatestMessage,
+    ],
+  );
+
+  const createdHandler = useCallback(
+    (data: TResData, submission: TSubmission) => {
+      const { messages, userMessage, isRegenerate = false } = submission;
+      const initialResponse = {
+        ...submission.initialResponse,
+        parentMessageId: userMessage?.messageId,
+        messageId: userMessage?.messageId + '_',
+      };
+      if (isRegenerate) {
+        setMessages([...messages, initialResponse]);
+      } else {
+        setMessages([...messages, userMessage, initialResponse]);
+      }
+
+      const { conversationId, parentMessageId } = userMessage;
+
+      let update = {} as TConversation;
+      if (setConversation && !isAddedRequest) {
+        setConversation((prevState) => {
+          let title = prevState?.title;
+          const parentId = isRegenerate ? userMessage?.overrideParentMessageId : parentMessageId;
+          if (parentId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
+            const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
+            const cachedConvo = getConversationById(convos, conversationId);
+            title = cachedConvo?.title;
+          }
+
+          update = tConvoUpdateSchema.parse({
+            ...prevState,
+            conversationId,
+            title,
+          }) as TConversation;
+
+          return update;
+        });
+
+        queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
+          if (!convoData) {
+            return convoData;
+          }
+          if (parentMessageId === Constants.NO_PARENT) {
+            return addConversation(convoData, update);
+          } else {
+            return updateConversation(convoData, update);
+          }
+        });
+      } else if (setConversation) {
+        setConversation((prevState) => {
+          update = tConvoUpdateSchema.parse({
+            ...prevState,
+            conversationId,
+          }) as TConversation;
+          return update;
+        });
+      }
+
+      if (resetLatestMessage) {
+        resetLatestMessage();
+      }
+    },
+    [setMessages, setConversation, queryClient, isAddedRequest, resetLatestMessage],
+  );
+
+  const finalHandler = useCallback(
+    (data: TResData, submission: TSubmission) => {
+      const { requestMessage, responseMessage, conversation, runMessages } = data;
+      const { messages, conversation: submissionConvo, isRegenerate = false } = submission;
+
+      setShowStopButton(false);
+      setCompleted((prev) => new Set(prev.add(submission?.initialResponse?.messageId)));
+
+      const currentMessages = getMessages();
+      // Early return if messages are empty; i.e., the user navigated away
+      if (!currentMessages?.length) {
+        return setIsSubmitting(false);
+      }
+
+      // update the messages; if assistants endpoint, client doesn't receive responseMessage
+      if (runMessages) {
+        setMessages([...runMessages]);
+      } else if (isRegenerate && responseMessage) {
+        setMessages([...messages, responseMessage]);
+      } else if (responseMessage) {
+        setMessages([...messages, requestMessage, responseMessage]);
+      }
+
+      const isNewConvo = conversation.conversationId !== submissionConvo.conversationId;
+      if (isNewConvo) {
+        queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
+          if (!convoData) {
+            return convoData;
+          }
+          return deleteConversation(convoData, submissionConvo.conversationId as string);
+        });
+      }
+
+      // refresh title
+      if (
+        genTitle &&
+        isNewConvo &&
+        requestMessage &&
+        requestMessage.parentMessageId === Constants.NO_PARENT
+      ) {
+        setTimeout(() => {
+          genTitle.mutate({ conversationId: conversation.conversationId as string });
+        }, 2500);
+      }
+
+      if (setConversation && !isAddedRequest) {
+        setConversation((prevState) => {
+          const update = {
+            ...prevState,
+            ...conversation,
+          };
+
+          if (prevState?.model && prevState.model !== submissionConvo.model) {
+            update.model = prevState.model;
+          }
+
+          return update;
+        });
+      }
+
+      setIsSubmitting(false);
+    },
+    [
+      genTitle,
+      queryClient,
+      getMessages,
+      setMessages,
+      setCompleted,
+      isAddedRequest,
+      setConversation,
+      setIsSubmitting,
+      setShowStopButton,
+    ],
+  );
+
+  const errorHandler = useCallback(
+    ({ data, submission }: { data?: TResData; submission: TSubmission }) => {
+      const { messages, userMessage, initialResponse } = submission;
+
+      setCompleted((prev) => new Set(prev.add(initialResponse.messageId)));
+
+      const conversationId = userMessage?.conversationId ?? submission?.conversationId;
+
+      const parseErrorResponse = (data: TResData | Partial<TMessage>) => {
+        const metadata = data['responseMessage'] ?? data;
+        const errorMessage = {
+          ...initialResponse,
+          ...metadata,
+          error: true,
+          parentMessageId: userMessage?.messageId,
+        };
+
+        if (!errorMessage.messageId) {
+          errorMessage.messageId = v4();
+        }
+
+        return tMessageSchema.parse(errorMessage);
+      };
+
+      if (!data) {
+        const convoId = conversationId ?? v4();
+        const errorResponse = parseErrorResponse({
+          text: 'Error connecting to server, try refreshing the page.',
+          ...submission,
+          conversationId: convoId,
+        });
+        setMessages([...messages, userMessage, errorResponse]);
+        if (newConversation) {
+          newConversation({
+            template: { conversationId: convoId },
+            preset: tPresetSchema.parse(submission?.conversation),
+          });
+        }
+        setIsSubmitting(false);
+        return;
+      }
+
+      if (!conversationId && !data.conversationId) {
+        const convoId = v4();
+        const errorResponse = parseErrorResponse(data);
+        setMessages([...messages, userMessage, errorResponse]);
+        if (newConversation) {
+          newConversation({
+            template: { conversationId: convoId },
+            preset: tPresetSchema.parse(submission?.conversation),
+          });
+        }
+        setIsSubmitting(false);
+        return;
+      } else if (!data.conversationId) {
+        const errorResponse = parseErrorResponse(data);
+        setMessages([...messages, userMessage, errorResponse]);
+        setIsSubmitting(false);
+        return;
+      }
+
+      console.log('Error:', data);
+      const errorResponse = tMessageSchema.parse({
+        ...data,
+        error: true,
+        parentMessageId: userMessage?.messageId,
+      });
+
+      setMessages([...messages, userMessage, errorResponse]);
+      if (data.conversationId && paramId === 'new' && newConversation) {
+        newConversation({
+          template: { conversationId: data.conversationId },
+          preset: tPresetSchema.parse(submission?.conversation),
+        });
+      }
+
+      setIsSubmitting(false);
+      return;
+    },
+    [setMessages, paramId, setIsSubmitting, setCompleted, newConversation],
+  );
+
+  const abortConversation = useCallback(
+    async (conversationId = '', submission: TSubmission, messages?: TMessage[]) => {
+      const runAbortKey = `${conversationId}:${messages?.[messages.length - 1]?.messageId ?? ''}`;
+      console.log({ conversationId, submission, messages, runAbortKey });
+      const { endpoint: _endpoint, endpointType } = submission?.conversation || {};
+      const endpoint = endpointType ?? _endpoint;
+      try {
+        const response = await fetch(`${EndpointURLs[endpoint ?? '']}/abort`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({
+            abortKey: runAbortKey,
+            endpoint,
+          }),
+        });
+
+        // Check if the response is JSON
+        const contentType = response.headers.get('content-type');
+        if (contentType && contentType.includes('application/json')) {
+          const data = await response.json();
+          console.log(`[aborted] RESPONSE STATUS: ${response.status}`, data);
+          if (response.status === 404) {
+            setIsSubmitting(false);
+            return;
+          }
+          if (data.final) {
+            finalHandler(data, submission);
+          } else {
+            cancelHandler(data, submission);
+          }
+        } else if (response.status === 204) {
+          const responseMessage = {
+            ...submission.initialResponse,
+          };
+
+          const data = {
+            requestMessage: submission.userMessage,
+            responseMessage: responseMessage,
+            conversation: submission.conversation,
+          };
+          console.log(`[aborted] RESPONSE STATUS: ${response.status}`, data);
+          setIsSubmitting(false);
+        } else {
+          throw new Error(
+            'Unexpected response from server; Status: ' +
+              response.status +
+              ' ' +
+              response.statusText,
+          );
+        }
+      } catch (error) {
+        console.error('Error cancelling request');
+        console.error(error);
+        const convoId = conversationId ?? v4();
+        const text =
+          submission.initialResponse?.text?.length > 45 ? submission.initialResponse?.text : '';
+        const errorMessage = {
+          ...submission,
+          ...submission.initialResponse,
+          text: text ?? (error as Error).message ?? 'Error cancelling request',
+          unfinished: !!text.length,
+          error: true,
+        };
+        const errorResponse = tMessageSchema.parse(errorMessage);
+        setMessages([...submission.messages, submission.userMessage, errorResponse]);
+        if (newConversation) {
+          newConversation({
+            template: { conversationId: convoId },
+            preset: tPresetSchema.parse(submission?.conversation),
+          });
+        }
+        setIsSubmitting(false);
+      }
+    },
+    [token, setIsSubmitting, finalHandler, cancelHandler, setMessages, newConversation],
+  );
+
+  return {
+    syncHandler,
+    finalHandler,
+    errorHandler,
+    messageHandler,
+    contentHandler,
+    createdHandler,
+    abortConversation,
+  };
+}
--- a/client/src/hooks/SSE/useSSE.ts
+++ b/client/src/hooks/SSE/useSSE.ts
@ -1,72 +1,44 @@
 import { v4 } from 'uuid';
 import { useSetRecoilState } from 'recoil';
-import { useParams } from 'react-router-dom';
-import { useQueryClient } from '@tanstack/react-query';
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState } from 'react';
 import {
  /* @ts-ignore */
  SSE,
-  QueryKeys,
-  Constants,
-  EndpointURLs,
  createPayload,
-  tPresetSchema,
-  tMessageSchema,
-  LocalStorageKeys,
-  tConvoUpdateSchema,
  removeNullishValues,
  isAssistantsEndpoint,
 } from 'librechat-data-provider';
 import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider/react-query';
-import type {
-  TResPlugin,
-  TMessage,
-  TConversation,
-  TSubmission,
-  ConversationData,
-} from 'librechat-data-provider';
-import {
-  addConversation,
-  deleteConversation,
-  updateConversation,
-  getConversationById,
-} from '~/utils';
+import type { TSubmission } from 'librechat-data-provider';
+import type { EventHandlerParams } from './useEventHandlers';
+import type { TResData } from '~/common';
 import { useGenTitleMutation } from '~/data-provider';
-import useContentHandler from './useContentHandler';
-import { useAuthContext } from '../AuthContext';
-import useChatHelpers from '../useChatHelpers';
+import { useAuthContext } from '~/hooks/AuthContext';
+import useEventHandlers from './useEventHandlers';
 import store from '~/store';

-type TResData = {
-  plugin?: TResPlugin;
-  final?: boolean;
-  initial?: boolean;
-  previousMessages?: TMessage[];
-  requestMessage: TMessage;
-  responseMessage: TMessage;
-  conversation: TConversation;
-  conversationId?: string;
-  runMessages?: TMessage[];
-};
+type ChatHelpers = Pick<
+  EventHandlerParams,
+  | 'setMessages'
+  | 'getMessages'
+  | 'setConversation'
+  | 'setIsSubmitting'
+  | 'newConversation'
+  | 'resetLatestMessage'
+>;

-type TSyncData = {
-  sync: boolean;
-  thread_id: string;
-  messages?: TMessage[];
-  requestMessage: TMessage;
-  responseMessage: TMessage;
-  conversationId: string;
-};
-
-export default function useSSE(submission: TSubmission | null, index = 0) {
-  const queryClient = useQueryClient();
+export default function useSSE(
+  submission: TSubmission | null,
+  chatHelpers: ChatHelpers,
+  isAddedRequest = false,
+  runIndex = 0,
+) {
  const genTitle = useGenTitleMutation();
-  const setActiveRunId = useSetRecoilState(store.activeRunFamily(index));
+  const setActiveRunId = useSetRecoilState(store.activeRunFamily(runIndex));

-  const { conversationId: paramId } = useParams();
  const { token, isAuthenticated } = useAuthContext();
  const [completed, setCompleted] = useState(new Set());
-  const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(index));
+  const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(runIndex));

  const {
    setMessages,
@ -75,435 +47,34 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
    setIsSubmitting,
    newConversation,
    resetLatestMessage,
-  } = useChatHelpers(index, paramId);
-  const contentHandler = useContentHandler({ setMessages, getMessages });
+  } = chatHelpers;
+
+  const {
+    syncHandler,
+    finalHandler,
+    errorHandler,
+    messageHandler,
+    contentHandler,
+    createdHandler,
+    abortConversation,
+  } = useEventHandlers({
+    genTitle,
+    setMessages,
+    getMessages,
+    setCompleted,
+    isAddedRequest,
+    setConversation,
+    setIsSubmitting,
+    newConversation,
+    setShowStopButton,
+    resetLatestMessage,
+  });

  const { data: startupConfig } = useGetStartupConfig();
  const balanceQuery = useGetUserBalance({
    enabled: !!isAuthenticated && startupConfig?.checkBalance,
  });

-  const messageHandler = useCallback(
-    (data: string, submission: TSubmission) => {
-      const {
-        messages,
-        userMessage,
-        plugin,
-        plugins,
-        initialResponse,
-        isRegenerate = false,
-      } = submission;
-
-      if (isRegenerate) {
-        setMessages([
-          ...messages,
-          {
-            ...initialResponse,
-            text: data,
-            plugin: plugin ?? null,
-            plugins: plugins ?? [],
-            // unfinished: true
-          },
-        ]);
-      } else {
-        setMessages([
-          ...messages,
-          userMessage,
-          {
-            ...initialResponse,
-            text: data,
-            plugin: plugin ?? null,
-            plugins: plugins ?? [],
-            // unfinished: true
-          },
-        ]);
-      }
-    },
-    [setMessages],
-  );
-
-  const cancelHandler = useCallback(
-    (data: TResData, submission: TSubmission) => {
-      const { requestMessage, responseMessage, conversation } = data;
-      const { messages, isRegenerate = false } = submission;
-
-      const convoUpdate = conversation ?? submission.conversation;
-
-      // update the messages
-      if (isRegenerate) {
-        const messagesUpdate = [...messages, responseMessage].filter((msg) => msg);
-        setMessages(messagesUpdate);
-      } else {
-        const messagesUpdate = [...messages, requestMessage, responseMessage].filter((msg) => msg);
-        setMessages(messagesUpdate);
-      }
-
-      const isNewConvo = conversation.conversationId !== submission.conversation.conversationId;
-      if (isNewConvo) {
-        queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
-          if (!convoData) {
-            return convoData;
-          }
-          return deleteConversation(convoData, submission.conversation.conversationId as string);
-        });
-      }
-
-      // refresh title
-      if (isNewConvo && requestMessage?.parentMessageId === Constants.NO_PARENT) {
-        setTimeout(() => {
-          genTitle.mutate({ conversationId: convoUpdate.conversationId as string });
-        }, 2500);
-      }
-
-      setConversation((prevState) => {
-        const update = {
-          ...prevState,
-          ...convoUpdate,
-        };
-
-        return update;
-      });
-
-      setIsSubmitting(false);
-    },
-    [setMessages, setConversation, genTitle, queryClient, setIsSubmitting],
-  );
-
-  const syncHandler = useCallback(
-    (data: TSyncData, submission: TSubmission) => {
-      const { conversationId, thread_id, responseMessage, requestMessage } = data;
-      const { initialResponse, messages: _messages, userMessage } = submission;
-
-      const messages = _messages.filter((msg) => msg.messageId !== userMessage.messageId);
-
-      setMessages([
-        ...messages,
-        requestMessage,
-        {
-          ...initialResponse,
-          ...responseMessage,
-        },
-      ]);
-
-      let update = {} as TConversation;
-      setConversation((prevState) => {
-        let title = prevState?.title;
-        const parentId = requestMessage.parentMessageId;
-        if (parentId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
-          const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
-          const cachedConvo = getConversationById(convos, conversationId);
-          title = cachedConvo?.title;
-        }
-
-        update = tConvoUpdateSchema.parse({
-          ...prevState,
-          conversationId,
-          thread_id,
-          title,
-          messages: [requestMessage.messageId, responseMessage.messageId],
-        }) as TConversation;
-
-        return update;
-      });
-
-      queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
-        if (!convoData) {
-          return convoData;
-        }
-        if (requestMessage.parentMessageId === Constants.NO_PARENT) {
-          return addConversation(convoData, update);
-        } else {
-          return updateConversation(convoData, update);
-        }
-      });
-
-      setShowStopButton(true);
-
-      resetLatestMessage();
-    },
-    [setMessages, setConversation, queryClient, setShowStopButton, resetLatestMessage],
-  );
-
-  const createdHandler = useCallback(
-    (data: TResData, submission: TSubmission) => {
-      const { messages, userMessage, isRegenerate = false } = submission;
-      const initialResponse = {
-        ...submission.initialResponse,
-        parentMessageId: userMessage?.messageId,
-        messageId: userMessage?.messageId + '_',
-      };
-      if (isRegenerate) {
-        setMessages([...messages, initialResponse]);
-      } else {
-        setMessages([...messages, userMessage, initialResponse]);
-      }
-
-      const { conversationId, parentMessageId } = userMessage;
-
-      let update = {} as TConversation;
-      setConversation((prevState) => {
-        let title = prevState?.title;
-        const parentId = isRegenerate ? userMessage?.overrideParentMessageId : parentMessageId;
-        if (parentId !== Constants.NO_PARENT && title?.toLowerCase()?.includes('new chat')) {
-          const convos = queryClient.getQueryData<ConversationData>([QueryKeys.allConversations]);
-          const cachedConvo = getConversationById(convos, conversationId);
-          title = cachedConvo?.title;
-        }
-
-        update = tConvoUpdateSchema.parse({
-          ...prevState,
-          conversationId,
-          title,
-        }) as TConversation;
-
-        return update;
-      });
-
-      queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
-        if (!convoData) {
-          return convoData;
-        }
-        if (parentMessageId === Constants.NO_PARENT) {
-          return addConversation(convoData, update);
-        } else {
-          return updateConversation(convoData, update);
-        }
-      });
-      resetLatestMessage();
-    },
-    [setMessages, setConversation, queryClient, resetLatestMessage],
-  );
-
-  const finalHandler = useCallback(
-    (data: TResData, submission: TSubmission) => {
-      const { requestMessage, responseMessage, conversation, runMessages } = data;
-      const { messages, conversation: submissionConvo, isRegenerate = false } = submission;
-
-      setShowStopButton(false);
-      setCompleted((prev) => new Set(prev.add(submission?.initialResponse?.messageId)));
-
-      const currentMessages = getMessages();
-      // Early return if messages are empty; i.e., the user navigated away
-      if (!currentMessages?.length) {
-        return setIsSubmitting(false);
-      }
-
-      // update the messages; if assistants endpoint, client doesn't receive responseMessage
-      if (runMessages) {
-        setMessages([...runMessages]);
-      } else if (isRegenerate && responseMessage) {
-        setMessages([...messages, responseMessage]);
-      } else if (responseMessage) {
-        setMessages([...messages, requestMessage, responseMessage]);
-      }
-
-      const isNewConvo = conversation.conversationId !== submissionConvo.conversationId;
-      if (isNewConvo) {
-        queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
-          if (!convoData) {
-            return convoData;
-          }
-          return deleteConversation(convoData, submissionConvo.conversationId as string);
-        });
-      }
-
-      // refresh title
-      if (isNewConvo && requestMessage && requestMessage.parentMessageId === Constants.NO_PARENT) {
-        setTimeout(() => {
-          genTitle.mutate({ conversationId: conversation.conversationId as string });
-        }, 2500);
-      }
-
-      setConversation((prevState) => {
-        const update = {
-          ...prevState,
-          ...conversation,
-        };
-
-        if (prevState?.model && prevState.model !== submissionConvo.model) {
-          update.model = prevState.model;
-        }
-
-        return update;
-      });
-
-      setIsSubmitting(false);
-    },
-    [
-      genTitle,
-      queryClient,
-      getMessages,
-      setMessages,
-      setConversation,
-      setIsSubmitting,
-      setShowStopButton,
-    ],
-  );
-
-  const errorHandler = useCallback(
-    ({ data, submission }: { data?: TResData; submission: TSubmission }) => {
-      const { messages, userMessage, initialResponse } = submission;
-
-      setCompleted((prev) => new Set(prev.add(initialResponse.messageId)));
-
-      const conversationId = userMessage?.conversationId ?? submission?.conversationId;
-
-      const parseErrorResponse = (data: TResData | Partial<TMessage>) => {
-        const metadata = data['responseMessage'] ?? data;
-        const errorMessage = {
-          ...initialResponse,
-          ...metadata,
-          error: true,
-          parentMessageId: userMessage?.messageId,
-        };
-
-        if (!errorMessage.messageId) {
-          errorMessage.messageId = v4();
-        }
-
-        return tMessageSchema.parse(errorMessage);
-      };
-
-      if (!data) {
-        const convoId = conversationId ?? v4();
-        const errorResponse = parseErrorResponse({
-          text: 'Error connecting to server, try refreshing the page.',
-          ...submission,
-          conversationId: convoId,
-        });
-        setMessages([...messages, userMessage, errorResponse]);
-        newConversation({
-          template: { conversationId: convoId },
-          preset: tPresetSchema.parse(submission?.conversation),
-        });
-        setIsSubmitting(false);
-        return;
-      }
-
-      if (!conversationId && !data.conversationId) {
-        const convoId = v4();
-        const errorResponse = parseErrorResponse(data);
-        setMessages([...messages, userMessage, errorResponse]);
-        newConversation({
-          template: { conversationId: convoId },
-          preset: tPresetSchema.parse(submission?.conversation),
-        });
-        setIsSubmitting(false);
-        return;
-      } else if (!data.conversationId) {
-        const errorResponse = parseErrorResponse(data);
-        setMessages([...messages, userMessage, errorResponse]);
-        setIsSubmitting(false);
-        return;
-      }
-
-      console.log('Error:', data);
-      const errorResponse = tMessageSchema.parse({
-        ...data,
-        error: true,
-        parentMessageId: userMessage?.messageId,
-      });
-
-      setMessages([...messages, userMessage, errorResponse]);
-      if (data.conversationId && paramId === 'new') {
-        newConversation({
-          template: { conversationId: data.conversationId },
-          preset: tPresetSchema.parse(submission?.conversation),
-        });
-      }
-
-      setIsSubmitting(false);
-      return;
-    },
-    [setMessages, paramId, setIsSubmitting, newConversation],
-  );
-
-  const abortConversation = useCallback(
-    async (conversationId = '', submission: TSubmission) => {
-      let runAbortKey = '';
-      try {
-        const conversation = (JSON.parse(
-          localStorage.getItem(LocalStorageKeys.LAST_CONVO_SETUP) ?? '',
-        ) ?? {}) as TConversation;
-        const { conversationId, messages } = conversation;
-        runAbortKey = `${conversationId}:${messages?.[messages.length - 1]}`;
-      } catch (error) {
-        console.error('Error getting last conversation setup');
-        console.error(error);
-      }
-      const { endpoint: _endpoint, endpointType } = submission?.conversation || {};
-      const endpoint = endpointType ?? _endpoint;
-      try {
-        const response = await fetch(`${EndpointURLs[endpoint ?? '']}/abort`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-          body: JSON.stringify({
-            abortKey: isAssistantsEndpoint(_endpoint) ? runAbortKey : conversationId,
-            endpoint,
-          }),
-        });
-
-        // Check if the response is JSON
-        const contentType = response.headers.get('content-type');
-        if (contentType && contentType.includes('application/json')) {
-          const data = await response.json();
-          console.log('aborted', data);
-          if (response.status === 404) {
-            setIsSubmitting(false);
-            return;
-          }
-          if (data.final) {
-            finalHandler(data, submission);
-          } else {
-            cancelHandler(data, submission);
-          }
-        } else if (response.status === 204) {
-          const responseMessage = {
-            ...submission.initialResponse,
-          };
-
-          const data = {
-            requestMessage: submission.userMessage,
-            responseMessage: responseMessage,
-            conversation: submission.conversation,
-          };
-          console.log('aborted', data);
-        } else {
-          throw new Error(
-            'Unexpected response from server; Status: ' +
-              response.status +
-              ' ' +
-              response.statusText,
-          );
-        }
-      } catch (error) {
-        console.error('Error cancelling request');
-        console.error(error);
-        const convoId = conversationId ?? v4();
-        const text =
-          submission.initialResponse?.text?.length > 45 ? submission.initialResponse?.text : '';
-        const errorMessage = {
-          ...submission,
-          ...submission.initialResponse,
-          text: text ?? (error as Error).message ?? 'Error cancelling request',
-          unfinished: !!text.length,
-          error: true,
-        };
-        const errorResponse = tMessageSchema.parse(errorMessage);
-        setMessages([...submission.messages, submission.userMessage, errorResponse]);
-        newConversation({
-          template: { conversationId: convoId },
-          preset: tPresetSchema.parse(submission?.conversation),
-        });
-        setIsSubmitting(false);
-      }
-    },
-    [token, setIsSubmitting, finalHandler, cancelHandler, setMessages, newConversation],
-  );
-
  useEffect(() => {
    if (submission === null || Object.keys(submission).length === 0) {
      return;
@ -571,16 +142,6 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
      }
    };

-    // events.onaudio = (e: MessageEvent) => {
-    //   const data = JSON.parse(e.data);
-    //   console.log('audio', data);
-    //   if (data.audio) {
-    //     audioSource.addBase64Data(data.audio);
-    //   }
-    // };
-
-    // events.onend = () => audioSource.close();
-
    events.onopen = () => console.log('connection is opened');

    events.oncancel = async () => {
@ -595,9 +156,12 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
      }

      setCompleted((prev) => new Set(prev.add(streamKey)));
+      const latestMessages = getMessages();
+      const conversationId = latestMessages?.[latestMessages?.length - 1]?.conversationId;
      return await abortConversation(
-        userMessage?.conversationId ?? submission?.conversationId,
+        conversationId ?? userMessage?.conversationId ?? submission?.conversationId,
        submission,
+        latestMessages,
      );
    };

--- a/client/src/hooks/ThemeContext.tsx
+++ b/client/src/hooks/ThemeContext.tsx
@ -30,6 +30,14 @@ const defaultContextValue: ProviderValue = {
    return;
  },
 };
+
+export const isDark = (theme: string): boolean => {
+  if (theme === 'system') {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+  return theme === 'dark';
+};
+
 export const ThemeContext = createContext<ProviderValue>(defaultContextValue);

 export const ThemeProvider = ({ initialTheme, children }) => {
@ -37,14 +45,10 @@ export const ThemeProvider = ({ initialTheme, children }) => {

  const rawSetTheme = (rawTheme: string) => {
    const root = window.document.documentElement;
-    let isDark = rawTheme === 'dark';
+    const darkMode = isDark(rawTheme);

-    if (rawTheme === 'system') {
-      isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-
-    root.classList.remove(isDark ? 'light' : 'dark');
-    root.classList.add(isDark ? 'dark' : 'light');
+    root.classList.remove(darkMode ? 'light' : 'dark');
+    root.classList.add(darkMode ? 'dark' : 'light');

    localStorage.setItem('color-theme', rawTheme);
  };
--- a/client/src/hooks/index.ts
+++ b/client/src/hooks/index.ts
@ -1,4 +1,5 @@
 export * from './Assistants';
+export * from './Chat';
 export * from './Config';
 export * from './Conversations';
 export * from './Nav';
@ -6,6 +7,8 @@ export * from './Files';
 export * from './Input';
 export * from './Messages';
 export * from './Plugins';
+export * from './Prompts';
+export * from './Roles';
 export * from './SSE';

 export * from './AuthContext';
@ -17,11 +20,10 @@ export { default as useTimeout } from './useTimeout';
 export { default as useNewConvo } from './useNewConvo';
 export { default as useLocalize } from './useLocalize';
 export { default as useMediaQuery } from './useMediaQuery';
-export { default as useChatHelpers } from './useChatHelpers';
 export { default as useScrollToRef } from './useScrollToRef';
 export { default as useLocalStorage } from './useLocalStorage';
 export { default as useDelayedRender } from './useDelayedRender';
 export { default as useOnClickOutside } from './useOnClickOutside';
-export { default as useGenerationsByLatest } from './useGenerationsByLatest';
 export { default as useSpeechToText } from './Input/useSpeechToText';
 export { default as useTextToSpeech } from './Input/useTextToSpeech';
+export { default as useGenerationsByLatest } from './useGenerationsByLatest';
--- a/client/src/hooks/useChatHelpers.ts
+++ b/client/src/hooks/useChatHelpers.ts
@ -1,373 +0,0 @@
-import { v4 } from 'uuid';
-import { useCallback, useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import {
-  Constants,
-  QueryKeys,
-  ContentTypes,
-  parseCompactConvo,
-  isAssistantsEndpoint,
-} from 'librechat-data-provider';
-import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
-import { useGetMessagesByConvoId } from 'librechat-data-provider/react-query';
-import type {
-  TMessage,
-  TSubmission,
-  TEndpointOption,
-  TEndpointsConfig,
-} from 'librechat-data-provider';
-import type { TAskFunction } from '~/common';
-import useSetFilesToDelete from './Files/useSetFilesToDelete';
-import useGetSender from './Conversations/useGetSender';
-import { useAuthContext } from './AuthContext';
-import useUserKey from './Input/useUserKey';
-import { getEndpointField } from '~/utils';
-import useNewConvo from './useNewConvo';
-import store from '~/store';
-
-// this to be set somewhere else
-export default function useChatHelpers(index = 0, paramId: string | undefined) {
-  const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(index));
-  const [files, setFiles] = useRecoilState(store.filesByIndex(index));
-  const [filesLoading, setFilesLoading] = useState(false);
-  const setFilesToDelete = useSetFilesToDelete();
-  const getSender = useGetSender();
-
-  const queryClient = useQueryClient();
-  const { isAuthenticated } = useAuthContext();
-
-  const { newConversation } = useNewConvo(index);
-  const { useCreateConversationAtom } = store;
-  const { conversation, setConversation } = useCreateConversationAtom(index);
-  const { conversationId, endpoint } = conversation ?? {};
-
-  const queryParam = paramId === 'new' ? paramId : conversationId ?? paramId ?? '';
-
-  /* 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 ?? '', {
-    enabled: isAuthenticated,
-  });
-
-  const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
-  const [isSubmitting, setIsSubmitting] = useRecoilState(store.isSubmittingFamily(index));
-  const [latestMessage, setLatestMessage] = useRecoilState(store.latestMessageFamily(index));
-  const setSiblingIdx = useSetRecoilState(
-    store.messagesSiblingIdxFamily(latestMessage?.parentMessageId ?? null),
-  );
-
-  const setMessages = useCallback(
-    (messages: TMessage[]) => {
-      queryClient.setQueryData<TMessage[]>([QueryKeys.messages, queryParam], messages);
-    },
-    // [conversationId, queryClient],
-    [queryParam, queryClient],
-  );
-
-  const getMessages = useCallback(() => {
-    return queryClient.getQueryData<TMessage[]>([QueryKeys.messages, queryParam]);
-  }, [queryParam, queryClient]);
-
-  /* Conversation */
-  // const setActiveConvos = useSetRecoilState(store.activeConversations);
-
-  // const setConversation = useCallback(
-  //   (convoUpdate: TConversation) => {
-  //     _setConversation(prev => {
-  //       const { conversationId: convoId } = prev ?? { conversationId: null };
-  //       const { conversationId: currentId } = convoUpdate;
-  //       if (currentId && convoId && convoId !== 'new' && convoId !== currentId) {
-  //         // for now, we delete the prev convoId from activeConversations
-  //         const newActiveConvos = { [currentId]: true };
-  //         setActiveConvos(newActiveConvos);
-  //       }
-  //       return convoUpdate;
-  //     });
-  //   },
-  //   [_setConversation, setActiveConvos],
-  // );
-  const { getExpiry } = useUserKey(endpoint ?? '');
-  const setSubmission = useSetRecoilState(store.submissionByIndex(index));
-
-  const ask: TAskFunction = (
-    { text, parentMessageId = null, conversationId = null, messageId = null },
-    {
-      editedText = null,
-      editedMessageId = null,
-      resubmitFiles = false,
-      isRegenerate = false,
-      isContinued = false,
-      isEdited = false,
-    } = {},
-  ) => {
-    setShowStopButton(false);
-    if (!!isSubmitting || text === '') {
-      return;
-    }
-
-    if (endpoint === null) {
-      console.error('No endpoint available');
-      return;
-    }
-
-    conversationId = conversationId ?? conversation?.conversationId ?? null;
-    if (conversationId == 'search') {
-      console.error('cannot send any message under search view!');
-      return;
-    }
-
-    if (isContinued && !latestMessage) {
-      console.error('cannot continue AI message without latestMessage!');
-      return;
-    }
-
-    const isEditOrContinue = isEdited || isContinued;
-
-    let currentMessages: TMessage[] | null = getMessages() ?? [];
-
-    // construct the query message
-    // this is not a real messageId, it is used as placeholder before real messageId returned
-    text = text.trim();
-    const fakeMessageId = v4();
-    parentMessageId = parentMessageId || latestMessage?.messageId || Constants.NO_PARENT;
-
-    if (conversationId == 'new') {
-      parentMessageId = Constants.NO_PARENT;
-      currentMessages = [];
-      conversationId = null;
-    }
-
-    const parentMessage = currentMessages?.find(
-      (msg) => msg.messageId === latestMessage?.parentMessageId,
-    );
-
-    let thread_id = parentMessage?.thread_id ?? latestMessage?.thread_id;
-    if (!thread_id) {
-      thread_id = currentMessages.find((message) => message.thread_id)?.thread_id;
-    }
-
-    const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);
-    const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
-
-    // set the endpoint option
-    const convo = parseCompactConvo({
-      endpoint,
-      endpointType,
-      conversation: conversation ?? {},
-    });
-
-    const { modelDisplayLabel } = endpointsConfig?.[endpoint ?? ''] ?? {};
-    const endpointOption = {
-      ...convo,
-      endpoint,
-      endpointType,
-      modelDisplayLabel,
-      key: getExpiry(),
-      thread_id,
-    } as TEndpointOption;
-    const responseSender = getSender({ model: conversation?.model, ...endpointOption });
-
-    const currentMsg: TMessage = {
-      text,
-      sender: 'User',
-      isCreatedByUser: true,
-      parentMessageId,
-      conversationId,
-      messageId: isContinued && messageId ? messageId : fakeMessageId,
-      thread_id,
-      error: false,
-    };
-
-    const reuseFiles = (isRegenerate || resubmitFiles) && parentMessage?.files;
-    if (reuseFiles && parentMessage.files?.length) {
-      currentMsg.files = parentMessage.files;
-      setFiles(new Map());
-      setFilesToDelete({});
-    } 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());
-      setFilesToDelete({});
-    }
-
-    // construct the placeholder response message
-    const generation = editedText ?? latestMessage?.text ?? '';
-    const responseText = isEditOrContinue ? generation : '';
-
-    const responseMessageId = editedMessageId ?? latestMessage?.messageId ?? null;
-    const initialResponse: TMessage = {
-      sender: responseSender,
-      text: responseText,
-      endpoint: endpoint ?? '',
-      parentMessageId: isRegenerate ? messageId : fakeMessageId,
-      messageId: responseMessageId ?? `${isRegenerate ? messageId : fakeMessageId}_`,
-      thread_id,
-      conversationId,
-      unfinished: false,
-      isCreatedByUser: false,
-      isEdited: isEditOrContinue,
-      iconURL: convo.iconURL,
-      error: false,
-    };
-
-    if (isAssistantsEndpoint(endpoint)) {
-      initialResponse.model = conversation?.assistant_id ?? '';
-      initialResponse.text = '';
-      initialResponse.content = [
-        {
-          type: ContentTypes.TEXT,
-          [ContentTypes.TEXT]: {
-            value: responseText,
-          },
-        },
-      ];
-    } else {
-      setShowStopButton(true);
-    }
-
-    if (isContinued) {
-      currentMessages = currentMessages.filter((msg) => msg.messageId !== responseMessageId);
-    }
-
-    const submission: TSubmission = {
-      conversation: {
-        ...conversation,
-        conversationId,
-      },
-      endpointOption,
-      userMessage: {
-        ...currentMsg,
-        generation,
-        responseMessageId,
-        overrideParentMessageId: isRegenerate ? messageId : null,
-      },
-      messages: currentMessages,
-      isEdited: isEditOrContinue,
-      isContinued,
-      isRegenerate,
-      initialResponse,
-    };
-
-    if (isRegenerate) {
-      setMessages([...submission.messages, initialResponse]);
-    } else {
-      setMessages([...submission.messages, currentMsg, initialResponse]);
-    }
-    setLatestMessage(initialResponse);
-    setSubmission(submission);
-  };
-
-  const regenerate = ({ parentMessageId }) => {
-    const messages = getMessages();
-    const parentMessage = messages?.find((element) => element.messageId == parentMessageId);
-
-    if (parentMessage && parentMessage.isCreatedByUser) {
-      ask({ ...parentMessage }, { isRegenerate: true });
-    } else {
-      console.error(
-        'Failed to regenerate the message: parentMessage not found or not created by user.',
-      );
-    }
-  };
-
-  const continueGeneration = () => {
-    if (!latestMessage) {
-      console.error('Failed to regenerate the message: latestMessage not found.');
-      return;
-    }
-
-    const messages = getMessages();
-
-    const parentMessage = messages?.find(
-      (element) => element.messageId == latestMessage.parentMessageId,
-    );
-
-    if (parentMessage && parentMessage.isCreatedByUser) {
-      ask({ ...parentMessage }, { isContinued: true, isRegenerate: true, isEdited: true });
-    } else {
-      console.error(
-        'Failed to regenerate the message: parentMessage not found, or not created by user.',
-      );
-    }
-  };
-
-  const stopGenerating = () => {
-    setSubmission(null);
-  };
-
-  const handleStopGenerating = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    stopGenerating();
-  };
-
-  const handleRegenerate = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    const parentMessageId = latestMessage?.parentMessageId;
-    if (!parentMessageId) {
-      console.error('Failed to regenerate the message: parentMessageId not found.');
-      return;
-    }
-    regenerate({ parentMessageId });
-  };
-
-  const handleContinue = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    continueGeneration();
-    setSiblingIdx(0);
-  };
-
-  const [showBingToneSetting, setShowBingToneSetting] = useRecoilState(
-    store.showBingToneSettingFamily(index),
-  );
-  const [showPopover, setShowPopover] = useRecoilState(store.showPopoverFamily(index));
-  const [abortScroll, setAbortScroll] = useRecoilState(store.abortScrollFamily(index));
-  const [preset, setPreset] = useRecoilState(store.presetByIndex(index));
-  const [optionSettings, setOptionSettings] = useRecoilState(store.optionSettingsFamily(index));
-  const [showAgentSettings, setShowAgentSettings] = useRecoilState(
-    store.showAgentSettingsFamily(index),
-  );
-
-  return {
-    newConversation,
-    conversation,
-    setConversation,
-    // getConvos,
-    // setConvos,
-    isSubmitting,
-    setIsSubmitting,
-    getMessages,
-    setMessages,
-    setSiblingIdx,
-    latestMessage,
-    setLatestMessage,
-    resetLatestMessage,
-    ask,
-    index,
-    regenerate,
-    stopGenerating,
-    handleStopGenerating,
-    handleRegenerate,
-    handleContinue,
-    showPopover,
-    setShowPopover,
-    abortScroll,
-    setAbortScroll,
-    showBingToneSetting,
-    setShowBingToneSetting,
-    preset,
-    setPreset,
-    optionSettings,
-    setOptionSettings,
-    showAgentSettings,
-    setShowAgentSettings,
-    files,
-    setFiles,
-    filesLoading,
-    setFilesLoading,
-  };
-}
--- a/client/src/hooks/useNewConvo.ts
+++ b/client/src/hooks/useNewConvo.ts
@ -6,13 +6,7 @@ import {
 } from 'librechat-data-provider/react-query';
 import { useNavigate } from 'react-router-dom';
 import { FileSources, LocalStorageKeys, isAssistantsEndpoint } from 'librechat-data-provider';
-import {
-  useRecoilState,
-  useRecoilValue,
-  useSetRecoilState,
-  useRecoilCallback,
-  useResetRecoilState,
-} from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState, useRecoilCallback } from 'recoil';
 import type {
  TPreset,
  TSubmission,
@ -38,12 +32,14 @@ import store from '~/store';
 const useNewConvo = (index = 0) => {
  const navigate = useNavigate();
  const { data: startupConfig } = useGetStartupConfig();
+  const clearAllConversations = store.useClearConvoState();
  const defaultPreset = useRecoilValue(store.defaultPreset);
+  const clearAllLatestMessages = store.useClearLatestMessages();
  const { setConversation } = store.useCreateConversationAtom(index);
  const [files, setFiles] = useRecoilState(store.filesByIndex(index));
  const setSubmission = useSetRecoilState<TSubmission | null>(store.submissionByIndex(index));
-  const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
+
  const modelsQuery = useGetModelsQuery();
  const timeoutIdRef = useRef<NodeJS.Timeout>();
  const assistantsListMap = useAssistantListMap();
@ -67,6 +63,7 @@ const useNewConvo = (index = 0) => {
        modelsData?: TModelsConfig,
        buildDefault?: boolean,
        keepLatestMessage?: boolean,
+        keepAddedConvos?: boolean,
      ) => {
        const modelsConfig = modelsData ?? modelsQuery.data;
        const { endpoint = null } = conversation;
@ -139,10 +136,13 @@ const useNewConvo = (index = 0) => {
          });
        }

+        if (!keepAddedConvos) {
+          clearAllConversations(true);
+        }
        setConversation(conversation);
        setSubmission({} as TSubmission);
        if (!keepLatestMessage) {
-          resetLatestMessage();
+          clearAllLatestMessages();
        }

        if (conversation.conversationId === 'new' && !modelsData) {
@ -171,12 +171,14 @@ const useNewConvo = (index = 0) => {
      modelsData,
      buildDefault = true,
      keepLatestMessage = false,
+      keepAddedConvos = false,
    }: {
      template?: Partial<TConversation>;
      preset?: Partial<TPreset>;
      modelsData?: TModelsConfig;
      buildDefault?: boolean;
      keepLatestMessage?: boolean;
+      keepAddedConvos?: boolean;
    } = {}) => {
      pauseGlobalAudio();

@ -217,7 +219,14 @@ const useNewConvo = (index = 0) => {
        }
      }

-      switchToConversation(conversation, preset, modelsData, buildDefault, keepLatestMessage);
+      switchToConversation(
+        conversation,
+        preset,
+        modelsData,
+        buildDefault,
+        keepLatestMessage,
+        keepAddedConvos,
+      );
    },
    [
      pauseGlobalAudio,
				`@ -0,0 +1 @@`
				`export { default as useHasAccess } from './useHasAccess';`