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

api/app/clients/BaseClient.js

@@ -52,15 +52,23 @@ class BaseClient {
     if (opts && typeof opts === 'object') {
       this.setOptions(opts);
     }
+
+    const { isEdited, isContinued } = opts;
     const user = opts.user ?? null;
+    const saveOptions = this.getSaveOptions();
+    this.abortController = opts.abortController ?? new AbortController();
     const conversationId = opts.conversationId ?? crypto.randomUUID();
     const parentMessageId = opts.parentMessageId ?? '00000000-0000-0000-0000-000000000000';
     const userMessageId = opts.overrideParentMessageId ?? crypto.randomUUID();
-    const responseMessageId = opts.responseMessageId ?? crypto.randomUUID();
-    const saveOptions = this.getSaveOptions();
-    const head = opts.isEdited ? responseMessageId : parentMessageId;
+    let responseMessageId = opts.responseMessageId ?? crypto.randomUUID();
+    let head = isEdited ? responseMessageId : parentMessageId;
     this.currentMessages = (await this.loadHistory(conversationId, head)) ?? [];
-    this.abortController = opts.abortController ?? new AbortController();
+
+    if (isEdited && !isContinued) {
+      responseMessageId = crypto.randomUUID();
+      head = responseMessageId;
+      this.currentMessages[this.currentMessages.length - 1].messageId = head;
+    }
 
     return {
       ...opts,
@@ -397,11 +405,16 @@ class BaseClient {
     const { user, head, isEdited, conversationId, responseMessageId, saveOptions, userMessage } =
       await this.handleStartMethods(message, opts);
 
+    const { generation = '' } = opts;
+
     this.user = user;
     // It's not necessary to push to currentMessages
     // depending on subclass implementation of handling messages
     // When this is an edit, all messages are already in currentMessages, both user and response
-    if (!isEdited) {
+    if (isEdited) {
+      /* TODO: edge case where latest message doesn't exist */
+      this.currentMessages[this.currentMessages.length - 1].text = generation;
+    } else {
       this.currentMessages.push(userMessage);
     }
 
@@ -419,7 +432,7 @@ class BaseClient {
 
     if (this.options.debug) {
       console.debug('payload');
-      // console.debug(payload);
+      console.debug(payload);
     }
 
     if (tokenCountMap) {
@@ -442,7 +455,6 @@ class BaseClient {
       await this.saveMessageToDatabase(userMessage, saveOptions, user);
     }
 
-    const generation = isEdited ? this.currentMessages[this.currentMessages.length - 1].text : '';
     const responseMessage = {
       messageId: responseMessageId,
       conversationId,

api/app/titleConvo.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+const throttle = require('lodash/throttle');
 const { genAzureChatCompletion, getAzureCredentials } = require('../utils/');
 
 const titleConvo = async ({ text, response, openAIApiKey, azure = false }) => {
@@ -52,6 +52,6 @@ const titleConvo = async ({ text, response, openAIApiKey, azure = false }) => {
   return title;
 };
 
-const throttledTitleConvo = _.throttle(titleConvo, 1000);
+const throttledTitleConvo = throttle(titleConvo, 1000);
 
 module.exports = throttledTitleConvo;

api/app/titleConvoBing.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+const throttle = require('lodash/throttle');
 
 const titleConvo = async ({ text, response }) => {
   let title = 'New Chat';
@@ -32,6 +32,6 @@ const titleConvo = async ({ text, response }) => {
   return title;
 };
 
-const throttledTitleConvo = _.throttle(titleConvo, 3000);
+const throttledTitleConvo = throttle(titleConvo, 3000);
 
 module.exports = throttledTitleConvo;