🎋 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/Providers/MessageContext.tsx

@@ -1,10 +1,15 @@
 import { createContext, useContext } from 'react';
+
 type MessageContext = {
   messageId: string;
   nextType?: string;
   partIndex?: number;
   isExpanded: boolean;
   conversationId?: string | null;
+  /** Submission state for cursor display - only true for latest message when submitting */
+  isSubmitting?: boolean;
+  /** Whether this is the latest message in the conversation */
+  isLatestMessage?: boolean;
 };
 
 export const MessageContext = createContext<MessageContext>({} as MessageContext);

client/src/Providers/MessagesViewContext.tsx

@@ -0,0 +1,150 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useAddedChatContext } from './AddedChatContext';
+import { useChatContext } from './ChatContext';
+
+interface MessagesViewContextValue {
+  /** Core conversation data */
+  conversation: ReturnType<typeof useChatContext>['conversation'];
+  conversationId: string | null | undefined;
+
+  /** Submission and control states */
+  isSubmitting: ReturnType<typeof useChatContext>['isSubmitting'];
+  isSubmittingFamily: boolean;
+  abortScroll: ReturnType<typeof useChatContext>['abortScroll'];
+  setAbortScroll: ReturnType<typeof useChatContext>['setAbortScroll'];
+
+  /** Message operations */
+  ask: ReturnType<typeof useChatContext>['ask'];
+  regenerate: ReturnType<typeof useChatContext>['regenerate'];
+  handleContinue: ReturnType<typeof useChatContext>['handleContinue'];
+
+  /** Message state management */
+  index: ReturnType<typeof useChatContext>['index'];
+  latestMessage: ReturnType<typeof useChatContext>['latestMessage'];
+  setLatestMessage: ReturnType<typeof useChatContext>['setLatestMessage'];
+  getMessages: ReturnType<typeof useChatContext>['getMessages'];
+  setMessages: ReturnType<typeof useChatContext>['setMessages'];
+}
+
+const MessagesViewContext = createContext<MessagesViewContextValue | undefined>(undefined);
+
+export function MessagesViewProvider({ children }: { children: React.ReactNode }) {
+  const chatContext = useChatContext();
+  const addedChatContext = useAddedChatContext();
+
+  const {
+    ask,
+    index,
+    regenerate,
+    isSubmitting: isSubmittingRoot,
+    conversation,
+    latestMessage,
+    setAbortScroll,
+    handleContinue,
+    setLatestMessage,
+    abortScroll,
+    getMessages,
+    setMessages,
+  } = chatContext;
+
+  const { isSubmitting: isSubmittingAdditional } = addedChatContext;
+
+  /** Memoize conversation-related values */
+  const conversationValues = useMemo(
+    () => ({
+      conversation,
+      conversationId: conversation?.conversationId,
+    }),
+    [conversation],
+  );
+
+  /** Memoize submission states */
+  const submissionStates = useMemo(
+    () => ({
+      isSubmitting: isSubmittingRoot,
+      isSubmittingFamily: isSubmittingRoot || isSubmittingAdditional,
+      abortScroll,
+      setAbortScroll,
+    }),
+    [isSubmittingRoot, isSubmittingAdditional, abortScroll, setAbortScroll],
+  );
+
+  /** Memoize message operations (these are typically stable references) */
+  const messageOperations = useMemo(
+    () => ({
+      ask,
+      regenerate,
+      getMessages,
+      setMessages,
+      handleContinue,
+    }),
+    [ask, regenerate, handleContinue, getMessages, setMessages],
+  );
+
+  /** Memoize message state values */
+  const messageState = useMemo(
+    () => ({
+      index,
+      latestMessage,
+      setLatestMessage,
+    }),
+    [index, latestMessage, setLatestMessage],
+  );
+
+  /** Combine all values into final context value */
+  const contextValue = useMemo<MessagesViewContextValue>(
+    () => ({
+      ...conversationValues,
+      ...submissionStates,
+      ...messageOperations,
+      ...messageState,
+    }),
+    [conversationValues, submissionStates, messageOperations, messageState],
+  );
+
+  return (
+    <MessagesViewContext.Provider value={contextValue}>{children}</MessagesViewContext.Provider>
+  );
+}
+
+export function useMessagesViewContext() {
+  const context = useContext(MessagesViewContext);
+  if (!context) {
+    throw new Error('useMessagesViewContext must be used within MessagesViewProvider');
+  }
+  return context;
+}
+
+/** Hook for components that only need conversation data */
+export function useMessagesConversation() {
+  const { conversation, conversationId } = useMessagesViewContext();
+  return useMemo(() => ({ conversation, conversationId }), [conversation, conversationId]);
+}
+
+/** Hook for components that only need submission states */
+export function useMessagesSubmission() {
+  const { isSubmitting, isSubmittingFamily, abortScroll, setAbortScroll } =
+    useMessagesViewContext();
+  return useMemo(
+    () => ({ isSubmitting, isSubmittingFamily, abortScroll, setAbortScroll }),
+    [isSubmitting, isSubmittingFamily, abortScroll, setAbortScroll],
+  );
+}
+
+/** Hook for components that only need message operations */
+export function useMessagesOperations() {
+  const { ask, regenerate, handleContinue, getMessages, setMessages } = useMessagesViewContext();
+  return useMemo(
+    () => ({ ask, regenerate, handleContinue, getMessages, setMessages }),
+    [ask, regenerate, handleContinue, getMessages, setMessages],
+  );
+}
+
+/** Hook for components that only need message state */
+export function useMessagesState() {
+  const { index, latestMessage, setLatestMessage } = useMessagesViewContext();
+  return useMemo(
+    () => ({ index, latestMessage, setLatestMessage }),
+    [index, latestMessage, setLatestMessage],
+  );
+}

client/src/Providers/index.ts

@@ -26,4 +26,5 @@ export * from './SidePanelContext';
 export * from './MCPPanelContext';
 export * from './ArtifactsContext';
 export * from './PromptGroupsContext';
+export * from './MessagesViewContext';
 export { default as BadgeRowProvider } from './BadgeRowContext';