⚡ refactor: Latest Message Tracking with Robust Text Key Generation (#10059)

* chore: enhance logging for latest message actions in message components

* fix: Extract previous convoId from latest text in message helpers and process hooks

- Updated `useMessageHelpers` and `useMessageProcess` to extract `convoId` from the previous text key for improved message handling.
- Refactored `getLengthAndLastTenChars` to `getLengthAndLastNChars` for better flexibility in character length retrieval.
- Introduced `getLatestContentForKey` function to streamline content extraction from messages.

* chore: Enhance logging for clearing latest messages in conversation hooks

* refactor: Update message key formatting for improved URL parameter handling

- Modified `getLatestContentForKey` to change the format from `${text}-${i}` to `${text}&i=${i}` for better URL parameter structure.
- Adjusted `getTextKey` to increase character length retrieval from 12 to 16 in `getLengthAndLastNChars` for enhanced text processing.

* refactor: Simplify convoId extraction and enhance message formatting

- Updated `useMessageHelpers` and `useMessageProcess` to extract `convoId` using a new format for improved clarity.
- Refactored `getLatestContentForKey` to streamline content formatting and ensure consistent use of `Constants.COMMON_DIVIDER` for better message structure.
- Removed redundant length and last character extraction logic from `getLengthAndLastNChars` for cleaner code.

* chore: linting

* chore: Simplify pre-commit hook by removing unnecessary lines

client/src/hooks/Conversations/useNavigateToConvo.tsx

@@ -51,6 +51,7 @@ const useNavigateToConvo = (index = 0) => {
     hasSetConversation.current = true;
     setSubmission(null);
     if (resetLatestMessage) {
+      logger.log('latest_message', 'Clearing all latest messages');
       clearAllLatestMessages();
     }
 

client/src/hooks/Messages/useMessageHelpers.tsx

@@ -3,8 +3,8 @@ import { useEffect, useRef, useCallback, useMemo } from 'react';
 import { Constants, isAssistantsEndpoint, isAgentsEndpoint } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
 import { useMessagesViewContext, useAssistantsMapContext, useAgentsMapContext } from '~/Providers';
+import { getTextKey, TEXT_KEY_DIVIDER, logger } from '~/utils';
 import useCopyToClipboard from './useCopyToClipboard';
-import { getTextKey, logger } from '~/utils';
 
 export default function useMessageHelpers(props: TMessageProps) {
   const latestText = useRef<string | number>('');
@@ -49,15 +49,27 @@ export default function useMessageHelpers(props: TMessageProps) {
       messageId: message.messageId,
       convoId,
     };
+
+    /* Extracted convoId from previous textKey (format: messageId|||length|||lastChars|||convoId) */
+    let previousConvoId: string | null = null;
+    if (
+      latestText.current &&
+      typeof latestText.current === 'string' &&
+      latestText.current.length > 0
+    ) {
+      const parts = latestText.current.split(TEXT_KEY_DIVIDER);
+      previousConvoId = parts[parts.length - 1] || null;
+    }
+
     if (
       textKey !== latestText.current ||
-      (latestText.current && convoId !== latestText.current.split(Constants.COMMON_DIVIDER)[2])
+      (convoId != null && previousConvoId != null && convoId !== previousConvoId)
     ) {
-      logger.log('[useMessageHelpers] Setting latest message: ', logInfo);
+      logger.log('latest_message', '[useMessageHelpers] Setting latest message: ', logInfo);
       latestText.current = textKey;
       setLatestMessage({ ...message });
     } else {
-      logger.log('No change in latest message', logInfo);
+      logger.log('latest_message', 'No change in latest message', logInfo);
     }
   }, [isLast, message, setLatestMessage, conversation?.conversationId]);
 

client/src/hooks/Messages/useMessageProcess.tsx

@@ -3,8 +3,8 @@ 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 { getTextKey, TEXT_KEY_DIVIDER, logger } from '~/utils';
 import { useMessagesViewContext } from '~/Providers';
-import { getTextKey, logger } from '~/utils';
 import store from '~/store';
 
 export default function useMessageProcess({ message }: { message?: TMessage | null }) {
@@ -43,11 +43,21 @@ export default function useMessageProcess({ message }: { message?: TMessage | nu
       messageId: message.messageId,
       convoId,
     };
+
+    /* Extracted convoId from previous textKey (format: messageId|||length|||lastChars|||convoId) */
+    let previousConvoId: string | null = null;
+    if (
+      latestText.current &&
+      typeof latestText.current === 'string' &&
+      latestText.current.length > 0
+    ) {
+      const parts = latestText.current.split(TEXT_KEY_DIVIDER);
+      previousConvoId = parts[parts.length - 1] || null;
+    }
+
     if (
       textKey !== latestText.current ||
-      (convoId != null &&
-        latestText.current &&
-        convoId !== latestText.current.split(Constants.COMMON_DIVIDER)[2])
+      (convoId != null && previousConvoId != null && convoId !== previousConvoId)
     ) {
       logger.log('latest_message', '[useMessageProcess] Setting latest message; logInfo:', logInfo);
       latestText.current = textKey;

client/src/hooks/SSE/useEventHandlers.ts

@@ -339,6 +339,7 @@ export default function useEventHandlers({
 
       setShowStopButton(true);
       if (resetLatestMessage) {
+        logger.log('latest_message', 'syncHandler: resetting latest message');
         resetLatestMessage();
       }
     },
@@ -418,6 +419,7 @@ export default function useEventHandlers({
       }
 
       if (resetLatestMessage) {
+        logger.log('latest_message', 'createdHandler: resetting latest message');
         resetLatestMessage();
       }
       scrollToEnd(() => setAbortScroll(false));

client/src/hooks/useNewConvo.ts

@@ -179,6 +179,7 @@ const useNewConvo = (index = 0) => {
         }
         setSubmission({} as TSubmission);
         if (!(keepLatestMessage ?? false)) {
+          logger.log('latest_message', 'Clearing all latest messages');
           clearAllLatestMessages();
         }
         if (isCancelled) {