🎋 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
2026-01-05 10:08:52 +01:00 · 2025-09-17 13:07:56 -04:00 · 2025-09-17 13:07:56 -04:00 · 45ab4d4503
commit 45ab4d4503
parent 0ceef12eea
23 changed files with 242 additions and 88 deletions
--- a/client/src/components/Chat/Messages/Content/ContentParts.tsx
+++ b/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}
--- a/client/src/components/Chat/Messages/Content/EditMessage.tsx
+++ b/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),
  );
--- a/client/src/components/Chat/Messages/Content/MessageContent.tsx
+++ b/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) {
--- a/client/src/components/Chat/Messages/Content/Part.tsx
+++ b/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 (
--- a/client/src/components/Chat/Messages/Content/Parts/EditTextPart.tsx
+++ b/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),
  );
--- a/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
+++ b/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
--- a/client/src/components/Chat/Messages/Content/Parts/Text.tsx
+++ b/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) {
--- a/client/src/components/Chat/Messages/HoverButtons.tsx
+++ b/client/src/components/Chat/Messages/HoverButtons.tsx
@ -21,7 +21,7 @@ type THoverButtons = {
  latestMessage: TMessage | null;
  isLast: boolean;
  index: number;
-  handleFeedback: ({ feedback }: { feedback: TFeedback | undefined }) => void;
+  handleFeedback?: ({ feedback }: { feedback: TFeedback | undefined }) => void;
 };

 type HoverButtonProps = {
@ -238,7 +238,7 @@ const HoverButtons = ({
      />

      {/* Feedback Buttons */}
-      {!isCreatedByUser && (
+      {!isCreatedByUser && handleFeedback != null && (
        <Feedback handleFeedback={handleFeedback} feedback={message.feedback} isLast={isLast} />
      )}

--- a/client/src/components/Chat/Messages/Message.tsx
+++ b/client/src/components/Chat/Messages/Message.tsx
@ -73,7 +73,7 @@ export default function Message(props: TMessageProps) {
            </div>
          </div>
        ) : (
-          <div className="m-auto justify-center p-4 py-2 md:gap-6 ">
+          <div className="m-auto justify-center p-4 py-2 md:gap-6">
            <MessageRender {...props} />
          </div>
        )}
--- a/client/src/components/Chat/Messages/MessageParts.tsx
+++ b/client/src/components/Chat/Messages/MessageParts.tsx
@ -125,6 +125,7 @@ export default function Message(props: TMessageProps) {
                    setSiblingIdx={setSiblingIdx}
                    isCreatedByUser={message.isCreatedByUser}
                    conversationId={conversation?.conversationId}
+                    isLatestMessage={messageId === latestMessage?.messageId}
                    content={message.content as Array<TMessageContentParts | undefined>}
                  />
                </div>
--- a/client/src/components/Chat/Messages/MessagesView.tsx
+++ b/client/src/components/Chat/Messages/MessagesView.tsx
@ -4,11 +4,12 @@ import { CSSTransition } from 'react-transition-group';
 import type { TMessage } from 'librechat-data-provider';
 import { useScreenshot, useMessageScrolling, useLocalize } from '~/hooks';
 import ScrollToBottom from '~/components/Messages/ScrollToBottom';
+import { MessagesViewProvider } from '~/Providers';
 import MultiMessage from './MultiMessage';
 import { cn } from '~/utils';
 import store from '~/store';

-export default function MessagesView({
+function MessagesViewContent({
  messagesTree: _messagesTree,
 }: {
  messagesTree?: TMessage[] | null;
@ -92,3 +93,11 @@ export default function MessagesView({
    </>
  );
 }
+
+export default function MessagesView({ messagesTree }: { messagesTree?: TMessage[] | null }) {
+  return (
+    <MessagesViewProvider>
+      <MessagesViewContent messagesTree={messagesTree} />
+    </MessagesViewProvider>
+  );
+}
--- a/client/src/components/Chat/Messages/MultiMessage.tsx
+++ b/client/src/components/Chat/Messages/MultiMessage.tsx
@ -27,7 +27,7 @@ export default function MultiMessage({
  useEffect(() => {
    // reset siblingIdx when the tree changes, mostly when a new message is submitting.
    setSiblingIdx(0);
-  }, [messagesTree?.length]);
+  }, [messagesTree?.length, setSiblingIdx]);

  useEffect(() => {
    if (messagesTree?.length && siblingIdx >= messagesTree.length) {
--- a/client/src/components/Chat/Messages/ui/MessageRender.tsx
+++ b/client/src/components/Chat/Messages/ui/MessageRender.tsx
@ -71,6 +71,9 @@ const MessageRender = memo(
    const showCardRender = isLast && !isSubmittingFamily && isCard;
    const isLatestCard = isCard && !isSubmittingFamily && isLatestMessage;

+    /** Only pass isSubmitting to the latest message to prevent unnecessary re-renders */
+    const effectiveIsSubmitting = isLatestMessage ? isSubmitting : false;
+
    const iconData: TMessageIcon = useMemo(
      () => ({
        endpoint: msg?.endpoint ?? conversation?.endpoint,
@ -166,6 +169,8 @@ const MessageRender = memo(
                  messageId: msg.messageId,
                  conversationId: conversation?.conversationId,
                  isExpanded: false,
+                  isSubmitting: effectiveIsSubmitting,
+                  isLatestMessage,
                }}
              >
                {msg.plugin && <Plugin plugin={msg.plugin} />}
@ -177,7 +182,7 @@ const MessageRender = memo(
                  message={msg}
                  enterEdit={enterEdit}
                  error={!!(msg.error ?? false)}
-                  isSubmitting={isSubmitting}
+                  isSubmitting={effectiveIsSubmitting}
                  unfinished={msg.unfinished ?? false}
                  isCreatedByUser={msg.isCreatedByUser ?? true}
                  siblingIdx={siblingIdx ?? 0}
@ -186,7 +191,7 @@ const MessageRender = memo(
              </MessageContext.Provider>
            </div>

-            {hasNoChildren && (isSubmittingFamily === true || isSubmitting) ? (
+            {hasNoChildren && (isSubmittingFamily === true || effectiveIsSubmitting) ? (
              <PlaceholderRow isCard={isCard} />
            ) : (
              <SubRow classes="text-xs">