feat: Edit AI Messages, Edit Messages in Place (#825)

* refactor: replace lodash import with specific function import

fix(api): esm imports to cjs

* refactor(Messages.tsx): convert to TS, out-source scrollToDiv logic to a custom hook
fix(ScreenshotContext.tsx): change Ref to RefObject in ScreenshotContextType
feat(useScrollToRef.ts): add useScrollToRef hook for scrolling to a ref with throttle
fix(Chat.tsx): update import path for Messages component
fix(Search.tsx): update import path for Messages component

* chore(types.ts): add TAskProps and TOptions types
refactor(useMessageHandler.ts): use TAskFunction type for ask function signature

* refactor(Message/Content): convert to TS, move Plugin component to Content dir

* feat(MessageContent.tsx): add MessageContent component for displaying and editing message content
feat(index.ts): export MessageContent component from Messages/Content directory

* wip(Message.jsx): conversion and use of new component in progress

* refactor: convert Message.jsx to TS and fix typing/imports based on changes

* refactor: add typed props and refactor MultiMessage to TS, fix typing issues resulting from the conversion

* edit message in progress

* feat: complete edit AI message logic, refactor continue logic

* feat(middleware): add validateMessageReq middleware
feat(routes): add validation for message requests using validateMessageReq middleware
feat(routes): add create, read, update, and delete routes for messages

* feat: complete frontend logic for editing messages in place
feat(messages.js): update route for updating a specific message
- Change the route for updating a message to include the messageId in the URL
- Update the request handler to use the messageId from the request parameters and the text from the request body
- Call the updateMessage function with the updated parameters

feat(MessageContent.tsx): add functionality to update a message
- Import the useUpdateMessageMutation hook from the data provider
- Destructure the conversationId, parentMessageId, and messageId from the message object
- Create a mutation function using the useUpdateMessageMutation hook
- Implement the updateMessage function to call the mutation function with the updated message parameters
- Update the messages state to reflect the updated message text

feat(api-endpoints.ts): update messages endpoint to include messageId
- Update the messages endpoint to include the messageId as an optional parameter

feat(data-service.ts): add updateMessage function
- Implement the updateMessage function to make a PUT request to

* fix(messages.js): make updateMessage function asynchronous and await its execution

* style(EditIcon): make icon active for AI message

* feat(gptPlugins/anthropic): add edit support

* fix(validateMessageReq.js): handle case when conversationId is 'new' and return empty array
feat(Message.tsx): pass message prop to SiblingSwitch component
refactor(SiblingSwitch.tsx): convert to TS

* fix(useMessageHandler.ts): remove message from currentMessages if isContinued is true
feat(useMessageHandler.ts): add support for submission messages in setMessages
fix(useServerStream.ts): remove unnecessary conditional in setMessages
fix(useServerStream.ts): remove isContinued variable from submission

* fix(continue): switch to continued message generation when continuing an earlier branch in conversation

* fix(abortMiddleware.js): fix condition to check partialText length
chore(abortMiddleware.js): add error logging when abortMessage fails

* refactor(MessageHeader.tsx): convert to TS
fix(Plugin.tsx): add default value for className prop in Plugin component

* refactor(MultiMessage.tsx): remove commented out code
docs(MultiMessage.tsx): update comment to clarify when siblingIdx is reset

* fix(GenerationButtons): optimistic state for continue button

* fix(MessageContent.tsx): add data-testid attribute to message text editor
fix(messages.spec.ts): update waitForServerStream function to include edit endpoint check
feat(messages.spec.ts): add test case for editing messages

* fix(HoverButtons & Message & useGenerations): Refactor edit functionality and related conditions

- Update enterEdit function signature and prop
- Create and utilize hideEditButton variable
- Enhance conditions for edit button visibility and active state
- Update button event handlers
- Introduce isEditableEndpoint in useGenerations and refine continueSupported condition.

* fix(useGenerations.ts): fix condition for hideEditButton to include error and searchResult
chore(data-provider): bump version to 0.1.6
fix(types.ts): add status property to TError type

* chore: bump @dqbd/tiktoken to 1.0.7

* fix(abortMiddleware.js): add required isCreatedByUser property to the error response object

* refactor(Message.tsx): remove unnecessary props from SiblingSwitch component, as setLatestMessage is firing on every switch already
refactor(SiblingSwitch.tsx): remove unused imports and code

* chore(BaseClient.js): move console.debug statements back inside if block

client/src/hooks/ScreenshotContext.tsx

@@ -1,8 +1,8 @@
-import { createContext, useRef, useContext, Ref } from 'react';
+import { createContext, useRef, useContext, RefObject } from 'react';
 import { toCanvas } from 'html-to-image';
 
 type ScreenshotContextType = {
-  ref?: Ref<HTMLElement>;
+  ref?: RefObject<HTMLDivElement>;
 };
 
 const ScreenshotContext = createContext<ScreenshotContextType>({});

client/src/hooks/index.ts

@@ -7,5 +7,6 @@ export { default as useLocalize } from './useLocalize';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useSetOptions } from './useSetOptions';
 export { default as useGenerations } from './useGenerations';
+export { default as useScrollToRef } from './useScrollToRef';
 export { default as useServerStream } from './useServerStream';
 export { default as useMessageHandler } from './useMessageHandler';

client/src/hooks/useGenerations.ts

@@ -18,12 +18,17 @@ export default function useGenerations({
   const latestMessage = useRecoilValue(store.latestMessage);
 
   const { error, messageId, searchResult, finish_reason, isCreatedByUser } = message ?? {};
+  const isEditableEndpoint = !!['azureOpenAI', 'openAI', 'gptPlugins', 'anthropic'].find(
+    (e) => e === endpoint,
+  );
 
   const continueSupported =
     latestMessage?.messageId === messageId &&
     finish_reason &&
     finish_reason !== 'stop' &&
-    !!['azureOpenAI', 'openAI', 'gptPlugins', 'anthropic'].find((e) => e === endpoint);
+    !isEditing &&
+    !searchResult &&
+    isEditableEndpoint;
 
   const branchingSupported =
     // 5/21/23: Bing is allowing editing and Message regenerating
@@ -37,19 +42,15 @@ export default function useGenerations({
       'anthropic',
     ].find((e) => e === endpoint);
 
-  const editEnabled =
-    !error &&
-    isCreatedByUser && // TODO: allow AI editing
-    !searchResult &&
-    !isEditing &&
-    branchingSupported;
-
   const regenerateEnabled =
     !isCreatedByUser && !searchResult && !isEditing && !isSubmitting && branchingSupported;
 
+  const hideEditButton =
+    error || searchResult || !branchingSupported || (!isEditableEndpoint && !isCreatedByUser);
+
   return {
     continueSupported,
-    editEnabled,
     regenerateEnabled,
+    hideEditButton,
   };
 }

client/src/hooks/useMessageHandler.ts

@@ -2,28 +2,31 @@ import { v4 } from 'uuid';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { parseConvo, getResponseSender } from 'librechat-data-provider';
 import type { TMessage, TSubmission } from 'librechat-data-provider';
+import type { TAskFunction } from '~/common';
 import store from '~/store';
 
-type TAskProps = {
-  text: string;
-  parentMessageId?: string | null;
-  conversationId?: string | null;
-  messageId?: string | null;
-};
-
 const useMessageHandler = () => {
+  const latestMessage = useRecoilValue(store.latestMessage);
+  const setSiblingIdx = useSetRecoilState(
+    store.messagesSiblingIdxFamily(latestMessage?.parentMessageId),
+  );
   const currentConversation = useRecoilValue(store.conversation) || { endpoint: null };
   const setSubmission = useSetRecoilState(store.submission);
   const isSubmitting = useRecoilValue(store.isSubmitting);
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
-  const latestMessage = useRecoilValue(store.latestMessage);
   const [messages, setMessages] = useRecoilState(store.messages);
   const { endpoint } = currentConversation;
   const { getToken } = store.useToken(endpoint ?? '');
 
-  const ask = (
-    { text, parentMessageId = null, conversationId = null, messageId = null }: TAskProps,
-    { isRegenerate = false, isEdited = false } = {},
+  const ask: TAskFunction = (
+    { text, parentMessageId = null, conversationId = null, messageId = null },
+    {
+      editedText = null,
+      editedMessageId = null,
+      isRegenerate = false,
+      isContinued = false,
+      isEdited = false,
+    } = {},
   ) => {
     if (!!isSubmitting || text === '') {
       return;
@@ -40,11 +43,12 @@ const useMessageHandler = () => {
       return;
     }
 
-    if (isEdited && !latestMessage) {
-      console.error('cannot edit AI message without latestMessage!');
+    if (isContinued && !latestMessage) {
+      console.error('cannot continue AI message without latestMessage!');
       return;
     }
 
+    const isEditOrContinue = isEdited || isContinued;
     const { userProvide } = endpointsConfig[endpoint] ?? {};
 
     // set the endpoint option
@@ -77,15 +81,17 @@ const useMessageHandler = () => {
       isCreatedByUser: true,
       parentMessageId,
       conversationId,
-      messageId: isEdited && messageId ? messageId : fakeMessageId,
+      messageId: isContinued && messageId ? messageId : fakeMessageId,
       error: false,
     };
 
     // construct the placeholder response message
-    const generation = latestMessage?.text ?? '';
-    const responseText = isEdited ? generation : '<span className="result-streaming">█</span>';
+    const generation = editedText ?? latestMessage?.text ?? '';
+    const responseText = isEditOrContinue
+      ? generation
+      : '<span className="result-streaming">█</span>';
 
-    const responseMessageId = isEdited ? latestMessage?.messageId : null;
+    const responseMessageId = editedMessageId ?? latestMessage?.messageId ?? null;
     const initialResponse: TMessage = {
       sender: responseSender,
       text: responseText,
@@ -98,6 +104,10 @@ const useMessageHandler = () => {
       error: false,
     };
 
+    if (isContinued) {
+      currentMessages = currentMessages.filter((msg) => msg.messageId !== responseMessageId);
+    }
+
     const submission: TSubmission = {
       conversation: {
         ...currentConversation,
@@ -111,7 +121,8 @@ const useMessageHandler = () => {
         overrideParentMessageId: isRegenerate ? messageId : null,
       },
       messages: currentMessages,
-      isEdited,
+      isEdited: isEditOrContinue,
+      isContinued,
       isRegenerate,
       initialResponse,
     };
@@ -119,12 +130,9 @@ const useMessageHandler = () => {
     console.log('User Input:', text, submission);
 
     if (isRegenerate) {
-      setMessages([
-        ...(isEdited ? currentMessages.slice(0, -1) : currentMessages),
-        initialResponse,
-      ]);
+      setMessages([...submission.messages, initialResponse]);
     } else {
-      setMessages([...currentMessages, currentMsg, initialResponse]);
+      setMessages([...submission.messages, currentMsg, initialResponse]);
     }
     setSubmission(submission);
   };
@@ -152,7 +160,7 @@ const useMessageHandler = () => {
     );
 
     if (parentMessage && parentMessage.isCreatedByUser) {
-      ask({ ...parentMessage }, { isRegenerate: true, isEdited: true });
+      ask({ ...parentMessage }, { isContinued: true, isRegenerate: true, isEdited: true });
     } else {
       console.error(
         'Failed to regenerate the message: parentMessage not found, or not created by user.',
@@ -182,6 +190,7 @@ const useMessageHandler = () => {
   const handleContinue = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     continueGeneration();
+    setSiblingIdx(0);
   };
 
   return {

client/src/hooks/useScrollToRef.ts

@@ -0,0 +1,40 @@
+import { RefObject, useCallback } from 'react';
+import throttle from 'lodash/throttle';
+
+export default function useScrollToRef(targetRef: RefObject<HTMLDivElement>, callback: () => void) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const scrollToRef = useCallback(
+    throttle(
+      () => {
+        targetRef.current?.scrollIntoView({ behavior: 'instant' });
+        callback();
+      },
+      450,
+      { leading: true },
+    ),
+    [targetRef],
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const scrollToRefSmooth = useCallback(
+    throttle(
+      () => {
+        targetRef.current?.scrollIntoView({ behavior: 'smooth' });
+        callback();
+      },
+      750,
+      { leading: true },
+    ),
+    [targetRef],
+  );
+
+  const handleSmoothToRef: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+    scrollToRefSmooth();
+  };
+
+  return {
+    scrollToRef,
+    handleSmoothToRef,
+  };
+}

client/src/hooks/useServerStream.ts

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { useResetRecoilState, useSetRecoilState } from 'recoil';
 import { SSE, createPayload, tMessageSchema, tConversationSchema } from 'librechat-data-provider';
-import type { TPlugin, TMessage, TConversation, TSubmission } from 'librechat-data-provider';
+import type { TResPlugin, TMessage, TConversation, TSubmission } from 'librechat-data-provider';
 import { useAuthContext } from '~/hooks/AuthContext';
 import store from '~/store';
 
 type TResData = {
-  plugin: TPlugin;
+  plugin: TResPlugin;
   final?: boolean;
   initial?: boolean;
   requestMessage: TMessage;
@@ -24,18 +24,11 @@ export default function useServerStream(submission: TSubmission | null) {
   const { refreshConversations } = store.useConversations();
 
   const messageHandler = (data: string, submission: TSubmission) => {
-    const {
-      messages,
-      message,
-      plugin,
-      initialResponse,
-      isRegenerate = false,
-      isEdited = false,
-    } = submission;
+    const { messages, message, plugin, initialResponse, isRegenerate = false } = submission;
 
     if (isRegenerate) {
       setMessages([
-        ...(isEdited ? messages.slice(0, -1) : messages),
+        ...messages,
         {
           ...initialResponse,
           text: data,
@@ -65,11 +58,11 @@ export default function useServerStream(submission: TSubmission | null) {
 
   const cancelHandler = (data: TResData, submission: TSubmission) => {
     const { requestMessage, responseMessage, conversation } = data;
-    const { messages, isRegenerate = false, isEdited = false } = submission;
+    const { messages, isRegenerate = false } = submission;
 
     // update the messages
     if (isRegenerate) {
-      setMessages([...(isEdited ? messages.slice(0, -1) : messages), responseMessage]);
+      setMessages([...messages, responseMessage]);
     } else {
       setMessages([...messages, requestMessage, responseMessage]);
     }
@@ -94,17 +87,11 @@ export default function useServerStream(submission: TSubmission | null) {
   };
 
   const createdHandler = (data: TResData, submission: TSubmission) => {
-    const {
-      messages,
-      message,
-      initialResponse,
-      isRegenerate = false,
-      isEdited = false,
-    } = submission;
+    const { messages, message, initialResponse, isRegenerate = false } = submission;
 
     if (isRegenerate) {
       setMessages([
-        ...(isEdited ? messages.slice(0, -1) : messages),
+        ...messages,
         {
           ...initialResponse,
           parentMessageId: message?.overrideParentMessageId ?? null,
@@ -137,11 +124,11 @@ export default function useServerStream(submission: TSubmission | null) {
 
   const finalHandler = (data: TResData, submission: TSubmission) => {
     const { requestMessage, responseMessage, conversation } = data;
-    const { messages, isRegenerate = false, isEdited = false } = submission;
+    const { messages, isRegenerate = false } = submission;
 
     // update the messages
     if (isRegenerate) {
-      setMessages([...(isEdited ? messages.slice(0, -1) : messages), responseMessage]);
+      setMessages([...messages, responseMessage]);
     } else {
       setMessages([...messages, requestMessage, responseMessage]);
     }