🎋 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/components/Chat/Messages/Content/ContentParts.tsx

@@ -26,6 +26,7 @@ type ContentPartsProps = {
   isCreatedByUser: boolean;
   isLast: boolean;
   isSubmitting: boolean;
+  isLatestMessage?: boolean;
   edit?: boolean;
   enterEdit?: (cancel?: boolean) => void | null | undefined;
   siblingIdx?: number;
@@ -45,6 +46,7 @@ const ContentParts = memo(
     isCreatedByUser,
     isLast,
     isSubmitting,
+    isLatestMessage,
     edit,
     enterEdit,
     siblingIdx,
@@ -55,6 +57,8 @@ const ContentParts = memo(
     const [isExpanded, setIsExpanded] = useState(showThinking);
     const attachmentMap = useMemo(() => mapAttachments(attachments ?? []), [attachments]);
 
+    const effectiveIsSubmitting = isLatestMessage ? isSubmitting : false;
+
     const hasReasoningParts = useMemo(() => {
       const hasThinkPart = content?.some((part) => part?.type === ContentTypes.THINK) ?? false;
       const allThinkPartsHaveContent =
@@ -134,7 +138,9 @@ const ContentParts = memo(
                   })
                 }
                 label={
-                  isSubmitting && isLast ? localize('com_ui_thinking') : localize('com_ui_thoughts')
+                  effectiveIsSubmitting && isLast
+                    ? localize('com_ui_thinking')
+                    : localize('com_ui_thoughts')
                 }
               />
             </div>
@@ -155,12 +161,14 @@ const ContentParts = memo(
                     conversationId,
                     partIndex: idx,
                     nextType: content[idx + 1]?.type,
+                    isSubmitting: effectiveIsSubmitting,
+                    isLatestMessage,
                   }}
                 >
                   <Part
                     part={part}
                     attachments={attachments}
-                    isSubmitting={isSubmitting}
+                    isSubmitting={effectiveIsSubmitting}
                     key={`part-${messageId}-${idx}`}
                     isCreatedByUser={isCreatedByUser}
                     isLast={idx === content.length - 1}

client/src/components/Chat/Messages/Content/EditMessage.tsx

@@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { TextareaAutosize, TooltipAnchor } from '@librechat/client';
 import { useUpdateMessageMutation } from 'librechat-data-provider/react-query';
 import type { TEditProps } from '~/common';
-import { useChatContext, useAddedChatContext } from '~/Providers';
+import { useMessagesOperations, useMessagesConversation, useAddedChatContext } from '~/Providers';
 import { cn, removeFocusRings } from '~/utils';
 import { useLocalize } from '~/hooks';
 import Container from './Container';
@@ -22,7 +22,8 @@ const EditMessage = ({
   const { addedIndex } = useAddedChatContext();
   const saveButtonRef = useRef<HTMLButtonElement | null>(null);
   const submitButtonRef = useRef<HTMLButtonElement | null>(null);
-  const { getMessages, setMessages, conversation } = useChatContext();
+  const { conversation } = useMessagesConversation();
+  const { getMessages, setMessages } = useMessagesOperations();
   const [latestMultiMessage, setLatestMultiMessage] = useRecoilState(
     store.latestMessageFamily(addedIndex),
   );

client/src/components/Chat/Messages/Content/MessageContent.tsx

@@ -5,7 +5,7 @@ import type { TMessage } from 'librechat-data-provider';
 import type { TMessageContentProps, TDisplayProps } from '~/common';
 import Error from '~/components/Messages/Content/Error';
 import Thinking from '~/components/Artifacts/Thinking';
-import { useChatContext } from '~/Providers';
+import { useMessageContext } from '~/Providers';
 import MarkdownLite from './MarkdownLite';
 import EditMessage from './EditMessage';
 import { useLocalize } from '~/hooks';
@@ -70,16 +70,12 @@ export const ErrorMessage = ({
 };
 
 const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplayProps) => {
-  const { isSubmitting, latestMessage } = useChatContext();
+  const { isSubmitting = false, isLatestMessage = false } = useMessageContext();
   const enableUserMsgMarkdown = useRecoilValue(store.enableUserMsgMarkdown);
   const showCursorState = useMemo(
     () => showCursor === true && isSubmitting,
     [showCursor, isSubmitting],
   );
-  const isLatestMessage = useMemo(
-    () => message.messageId === latestMessage?.messageId,
-    [message.messageId, latestMessage?.messageId],
-  );
 
   let content: React.ReactElement;
   if (!isCreatedByUser) {

client/src/components/Chat/Messages/Content/Part.tsx

@@ -85,13 +85,14 @@ const Part = memo(
 
       const isToolCall =
         'args' in toolCall && (!toolCall.type || toolCall.type === ToolCallTypes.TOOL_CALL);
-      if (isToolCall && toolCall.name === Tools.execute_code && toolCall.args) {
+      if (isToolCall && toolCall.name === Tools.execute_code) {
         return (
           <ExecuteCode
-            args={typeof toolCall.args === 'string' ? toolCall.args : ''}
+            attachments={attachments}
+            isSubmitting={isSubmitting}
             output={toolCall.output ?? ''}
             initialProgress={toolCall.progress ?? 0.1}
-            attachments={attachments}
+            args={typeof toolCall.args === 'string' ? toolCall.args : ''}
           />
         );
       } else if (

client/src/components/Chat/Messages/Content/Parts/EditTextPart.tsx

@@ -6,8 +6,8 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { useUpdateMessageContentMutation } from 'librechat-data-provider/react-query';
 import type { Agents } from 'librechat-data-provider';
 import type { TEditProps } from '~/common';
+import { useMessagesOperations, useMessagesConversation, useAddedChatContext } from '~/Providers';
 import Container from '~/components/Chat/Messages/Content/Container';
-import { useChatContext, useAddedChatContext } from '~/Providers';
 import { cn, removeFocusRings } from '~/utils';
 import { useLocalize } from '~/hooks';
 import store from '~/store';
@@ -25,7 +25,8 @@ const EditTextPart = ({
 }) => {
   const localize = useLocalize();
   const { addedIndex } = useAddedChatContext();
-  const { ask, getMessages, setMessages, conversation } = useChatContext();
+  const { conversation } = useMessagesConversation();
+  const { ask, getMessages, setMessages } = useMessagesOperations();
   const [latestMultiMessage, setLatestMultiMessage] = useRecoilState(
     store.latestMessageFamily(addedIndex),
   );

client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx

@@ -45,26 +45,28 @@ export function useParseArgs(args?: string): ParsedArgs | null {
 }
 
 export default function ExecuteCode({
+  isSubmitting,
   initialProgress = 0.1,
   args,
   output = '',
   attachments,
 }: {
   initialProgress: number;
+  isSubmitting: boolean;
   args?: string;
   output?: string;
   attachments?: TAttachment[];
 }) {
   const localize = useLocalize();
-  const showAnalysisCode = useRecoilValue(store.showCode);
-  const [showCode, setShowCode] = useState(showAnalysisCode);
-  const codeContentRef = useRef<HTMLDivElement>(null);
-  const [contentHeight, setContentHeight] = useState<number | undefined>(0);
-  const [isAnimating, setIsAnimating] = useState(false);
   const hasOutput = output.length > 0;
   const outputRef = useRef<string>(output);
-  const prevShowCodeRef = useRef<boolean>(showCode);
+  const codeContentRef = useRef<HTMLDivElement>(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const showAnalysisCode = useRecoilValue(store.showCode);
+  const [showCode, setShowCode] = useState(showAnalysisCode);
+  const [contentHeight, setContentHeight] = useState<number | undefined>(0);
 
+  const prevShowCodeRef = useRef<boolean>(showCode);
   const { lang, code } = useParseArgs(args) ?? ({} as ParsedArgs);
   const progress = useProgress(initialProgress);
 
@@ -136,6 +138,8 @@ export default function ExecuteCode({
     };
   }, [showCode, isAnimating]);
 
+  const cancelled = !isSubmitting && progress < 1;
+
   return (
     <>
       <div className="relative my-2.5 flex size-5 shrink-0 items-center gap-2.5">
@@ -143,9 +147,12 @@ export default function ExecuteCode({
           progress={progress}
           onClick={() => setShowCode((prev) => !prev)}
           inProgressText={localize('com_ui_analyzing')}
-          finishedText={localize('com_ui_analyzing_finished')}
+          finishedText={
+            cancelled ? localize('com_ui_cancelled') : localize('com_ui_analyzing_finished')
+          }
           hasInput={!!code?.length}
           isExpanded={showCode}
+          error={cancelled}
         />
       </div>
       <div

client/src/components/Chat/Messages/Content/Parts/Text.tsx

@@ -2,7 +2,7 @@ import { memo, useMemo, ReactElement } from 'react';
 import { useRecoilValue } from 'recoil';
 import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
 import Markdown from '~/components/Chat/Messages/Content/Markdown';
-import { useChatContext, useMessageContext } from '~/Providers';
+import { useMessageContext } from '~/Providers';
 import { cn } from '~/utils';
 import store from '~/store';
 
@@ -18,14 +18,9 @@ type ContentType =
   | ReactElement;
 
 const TextPart = memo(({ text, isCreatedByUser, showCursor }: TextPartProps) => {
-  const { messageId } = useMessageContext();
-  const { isSubmitting, latestMessage } = useChatContext();
+  const { isSubmitting = false, isLatestMessage = false } = useMessageContext();
   const enableUserMsgMarkdown = useRecoilValue(store.enableUserMsgMarkdown);
   const showCursorState = useMemo(() => showCursor && isSubmitting, [showCursor, isSubmitting]);
-  const isLatestMessage = useMemo(
-    () => messageId === latestMessage?.messageId,
-    [messageId, latestMessage?.messageId],
-  );
 
   const content: ContentType = useMemo(() => {
     if (!isCreatedByUser) {