fix edit message

packages/messenger-widget/src/hooks/messages/renderer/messageTypes/renderEdit.ts

@@ -1,6 +1,14 @@
 import { MessageModel } from '../../useMessage';
 
-export const renderEdit = (messages: MessageModel[]) => {
+export const renderEdit = (_messages: MessageModel[]) => {
+    //Copy messages object to not mutate the original object
+    const messages: MessageModel[] = [..._messages];
+    //Before processing the messages have to be sorted ASC by timestamp
+    messages.sort(
+        (a, b) =>
+            a.envelop.message.metadata.timestamp -
+            b.envelop.message.metadata.timestamp,
+    );
     //To apply insertions we have to find every message that is an edit and find the original message
     //A message can be edited multiple times so we always have to find the original message
     //A path for a simple edit looks like [NEW, EDIT]

packages/messenger-widget/src/hooks/messages/renderer/renderMessage.ts

@@ -19,20 +19,22 @@ export const renderMessage = (messages: MessageModel[]) => {
     const withDeletes = renderDelete(withReadOpened);
     const withReactions = renderReactions(withDeletes);
     const withReply = renderReply(withReactions);
+    const withReplyC = renderReply(withReactions);
+
+    console.log('withReply', withReply);
+    console.log('withReplyC', withReplyC);
 
-    //Its desirable to have all messages in a conversation sorted by their timestamp. However edited messages are an
-    //exception to this rule, since they should be displayed in the order they were edited.
-    // Therefore we sort the messages by their timestamp and then we eventually replace messages that have been edited
-    //Messages are sorted DESC, so the pagination adds old messages at the end of the array
-    withReply.sort(
-        (a, b) =>
-            b.envelop.message.metadata.timestamp -
-            a.envelop.message.metadata.timestamp,
-    );
     const withoutEdited = renderEdit(withReply);
+    //Sort the messages by timestamp DESC to show them in the right order
+    // withoutEdited.sort(
+    //     (a, b) =>
+    //         b.envelop.message.metadata.timestamp -
+    //         a.envelop.message.metadata.timestamp,
+    // );
 
     //There a several ways a message can added to the client. I.e via Websocket, multiple DS or from the storage.
     //This leads occasionally to duplicates we don't want to display.
     const withoutDuplicates = renderDuplicates(withoutEdited);
-    return withoutDuplicates;
+    //We reverse the array to display the messages in the right order
+    return withoutDuplicates.reverse();
 };