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

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/data-provider/src/api-endpoints.ts

@@ -6,8 +6,8 @@ export const userPlugins = () => {
   return '/api/user/plugins';
 };
 
-export const messages = (id: string) => {
-  return `/api/messages/${id}`;
+export const messages = (conversationId: string, messageId?: string) => {
+  return `/api/messages/${conversationId}${messageId ? `/${messageId}` : ''}`;
 };
 
 export const abortRequest = (endpoint: string) => {

packages/data-provider/src/createPayload.ts

@@ -2,7 +2,7 @@ import { tConversationSchema } from './schemas';
 import { TSubmission, EModelEndpoint } from './types';
 
 export default function createPayload(submission: TSubmission) {
-  const { conversation, message, endpointOption, isEdited } = submission;
+  const { conversation, message, endpointOption, isEdited, isContinued } = submission;
   const { conversationId } = tConversationSchema.parse(conversation);
   const { endpoint } = endpointOption as { endpoint: EModelEndpoint };
 
@@ -26,6 +26,7 @@ export default function createPayload(submission: TSubmission) {
   const payload = {
     ...message,
     ...endpointOption,
+    isContinued: isEdited && isContinued,
     conversationId,
   };
 

packages/data-provider/src/data-service.ts

@@ -24,8 +24,8 @@ export function clearAllConversations(): Promise<unknown> {
   return request.post(endpoints.deleteConversation(), { arg: {} });
 }
 
-export function getMessagesByConvoId(id: string): Promise<s.TMessage[]> {
-  return request.get(endpoints.messages(id));
+export function getMessagesByConvoId(conversationId: string): Promise<s.TMessage[]> {
+  return request.get(endpoints.messages(conversationId));
 }
 
 export function getConversationById(id: string): Promise<s.TConversation> {
@@ -38,6 +38,15 @@ export function updateConversation(
   return request.post(endpoints.updateConversation(), { arg: payload });
 }
 
+export function updateMessage(payload: t.TUpdateMessageRequest): Promise<unknown> {
+  const { conversationId, messageId, text } = payload;
+  if (!conversationId) {
+    throw new Error('conversationId is required');
+  }
+
+  return request.put(endpoints.messages(conversationId, messageId), { text });
+}
+
 export function getPresets(): Promise<s.TPreset[]> {
   return request.get(endpoints.presets());
 }

packages/data-provider/src/react-query-service.ts

@@ -110,6 +110,17 @@ export const useUpdateConversationMutation = (
   );
 };
 
+export const useUpdateMessageMutation = (
+  id: string,
+): UseMutationResult<unknown, unknown, t.TUpdateMessageRequest, unknown> => {
+  const queryClient = useQueryClient();
+  return useMutation((payload: t.TUpdateMessageRequest) => dataService.updateMessage(payload), {
+    onSuccess: () => {
+      queryClient.invalidateQueries([QueryKeys.messages, id]);
+    },
+  });
+};
+
 export const useDeleteConversationMutation = (
   id?: string,
 ): UseMutationResult<

packages/data-provider/src/schemas.ts

@@ -32,6 +32,20 @@ export const tPluginSchema = z.object({
 
 export type TPlugin = z.infer<typeof tPluginSchema>;
 
+export type TInput = {
+  inputStr: string;
+};
+
+export type TResPlugin = {
+  plugin: string;
+  input: string;
+  thought: string;
+  loading?: boolean;
+  outputs?: string;
+  latest?: string;
+  inputs?: TInput[];
+};
+
 export const tExampleSchema = z.object({
   input: z.object({
     content: z.string(),
@@ -57,7 +71,9 @@ export const tMessageSchema = z.object({
   parentMessageId: z.string().nullable(),
   responseMessageId: z.string().nullable().optional(),
   overrideParentMessageId: z.string().nullable().optional(),
-  plugin: tPluginSchema.nullable().optional(),
+  bg: z.string().nullable().optional(),
+  model: z.string().nullable().optional(),
+  title: z.string().nullable().optional(),
   sender: z.string(),
   text: z.string(),
   generation: z.string().nullable().optional(),
@@ -78,7 +94,10 @@ export const tMessageSchema = z.object({
   finish_reason: z.string().optional(),
 });
 
-export type TMessage = z.input<typeof tMessageSchema>;
+export type TMessage = z.input<typeof tMessageSchema> & {
+  children?: TMessage[];
+  plugin?: TResPlugin | null;
+};
 
 export const tConversationSchema = z.object({
   conversationId: z.string().nullable(),

packages/data-provider/src/types.ts

@@ -1,4 +1,4 @@
-import type { TPlugin, TMessage, TConversation, TEndpointOption } from './schemas';
+import type { TResPlugin, TMessage, TConversation, TEndpointOption } from './schemas';
 
 export * from './schemas';
 
@@ -7,9 +7,10 @@ export type TMessages = TMessage[];
 export type TMessagesAtom = TMessages | null;
 
 export type TSubmission = {
-  plugin?: TPlugin;
+  plugin?: TResPlugin;
   message: TMessage;
   isEdited?: boolean;
+  isContinued?: boolean;
   messages: TMessage[];
   isRegenerate?: boolean;
   conversationId?: string;
@@ -37,6 +38,7 @@ export type TError = {
     data?: {
       message?: string;
     };
+    status?: number;
   };
 };
 
@@ -60,6 +62,12 @@ export type TGetConversationsResponse = {
   pages: string | number;
 };
 
+export type TUpdateMessageRequest = {
+  conversationId: string;
+  messageId: string;
+  text: string;
+};
+
 export type TUpdateConversationRequest = {
   conversationId: string;
   title: string;