🎋 refactor: Improve Message UI State Handling (#9678)

* refactor: `ExecuteCode` component with submission state handling and cancellation message

* fix: Remove unnecessary argument check for execute_code tool call

* refactor: streamlined messages context

* chore: remove unused Convo prop

* chore: remove unnecessary whitespace in Message component

* refactor: enhance message context with submission state and latest message tracking

* chore: import order

client/src/hooks/Messages/useMessageHelpers.tsx

@@ -2,7 +2,7 @@ import throttle from 'lodash/throttle';
 import { useEffect, useRef, useCallback, useMemo } from 'react';
 import { Constants, isAssistantsEndpoint, isAgentsEndpoint } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
-import { useChatContext, useAssistantsMapContext, useAgentsMapContext } from '~/Providers';
+import { useMessagesViewContext, useAssistantsMapContext, useAgentsMapContext } from '~/Providers';
 import useCopyToClipboard from './useCopyToClipboard';
 import { getTextKey, logger } from '~/utils';
 
@@ -20,9 +20,9 @@ export default function useMessageHelpers(props: TMessageProps) {
     setAbortScroll,
     handleContinue,
     setLatestMessage,
-  } = useChatContext();
-  const assistantMap = useAssistantsMapContext();
+  } = useMessagesViewContext();
   const agentsMap = useAgentsMapContext();
+  const assistantMap = useAssistantsMapContext();
 
   const { text, content, children, messageId = null, isCreatedByUser } = message ?? {};
   const edit = messageId === currentEditId;

client/src/hooks/Messages/useMessageProcess.tsx

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { Constants } from 'librechat-data-provider';
 import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
 import type { TMessage } from 'librechat-data-provider';
-import { useChatContext, useAddedChatContext } from '~/Providers';
+import { useMessagesViewContext } from '~/Providers';
 import { getTextKey, logger } from '~/utils';
 import store from '~/store';
 
@@ -18,14 +18,9 @@ export default function useMessageProcess({ message }: { message?: TMessage | nu
     latestMessage,
     setAbortScroll,
     setLatestMessage,
-    isSubmitting: isSubmittingRoot,
-  } = useChatContext();
-  const { isSubmitting: isSubmittingAdditional } = useAddedChatContext();
+    isSubmittingFamily,
+  } = useMessagesViewContext();
   const latestMultiMessage = useRecoilValue(store.latestMessageFamily(index + 1));
-  const isSubmittingFamily = useMemo(
-    () => isSubmittingRoot || isSubmittingAdditional,
-    [isSubmittingRoot, isSubmittingAdditional],
-  );
 
   useEffect(() => {
     const convoId = conversation?.conversationId;

client/src/hooks/Messages/useMessageScrolling.ts

@@ -2,8 +2,8 @@ import { useRecoilValue } from 'recoil';
 import { Constants } from 'librechat-data-provider';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import type { TMessage } from 'librechat-data-provider';
+import { useMessagesConversation, useMessagesSubmission } from '~/Providers';
 import useScrollToRef from '~/hooks/useScrollToRef';
-import { useChatContext } from '~/Providers';
 import store from '~/store';
 
 const threshold = 0.85;
@@ -15,8 +15,8 @@ export default function useMessageScrolling(messagesTree?: TMessage[] | null) {
   const scrollableRef = useRef<HTMLDivElement | null>(null);
   const messagesEndRef = useRef<HTMLDivElement | null>(null);
   const [showScrollButton, setShowScrollButton] = useState(false);
-  const { conversation, setAbortScroll, isSubmitting, abortScroll } = useChatContext();
-  const { conversationId } = conversation ?? {};
+  const { conversation, conversationId } = useMessagesConversation();
+  const { setAbortScroll, isSubmitting, abortScroll } = useMessagesSubmission();
 
   const timeoutIdRef = useRef<NodeJS.Timeout>();