feat: add message history dialog

5 files changed, 58 insertions, 15 deletions

diff --git a/scss/partials/_window.scss b/scss/partials/_window.scss
index 8dd31dc6..82ff23e4 100644
--- a/scss/partials/_window.scss
+++ b/scss/partials/_window.scss
@@ -530,6 +530,16 @@
   .jsxc-version::before {
     @extend %jsxc-icon-font;
     content: map-get($jsxc-icons-map, "edit");
+    cursor: pointer;
+  }
+}
+
+ul.jsxc-message-history {
+  padding: 0.5em 0 2em;
+  width: 250px;
+
+  .jsxc-version {
+    display: none;
   }
 }
 
diff --git a/src/plugins/LastMessageCorrectionPlugin.ts b/src/plugins/LastMessageCorrectionPlugin.ts
index 6613a27e..39786f53 100644
--- a/src/plugins/LastMessageCorrectionPlugin.ts
+++ b/src/plugins/LastMessageCorrectionPlugin.ts
@@ -143,11 +143,7 @@ export default class LastMessageCorrectionPlugin extends AbstractPlugin {
       if (firstIncomingMessage && firstIncomingMessage.getAttrId() === attrIdToBeReplaced) {
          message.setOriginal(firstIncomingMessage);
 
-         contact.getTranscript().pushMessage(message);
-
          firstIncomingMessage.getLastVersion().setReplacedBy(message);
-
-         return [contact, undefined, stanza];
       }
 
       return [contact, message, stanza];
diff --git a/src/ui/ChatWindowMessage.ts b/src/ui/ChatWindowMessage.ts
index 8547fc5f..5bafa4ab 100644
--- a/src/ui/ChatWindowMessage.ts
+++ b/src/ui/ChatWindowMessage.ts
@@ -6,6 +6,7 @@ import Log from '../util/Log';
 import LinkHandlerGeo from '@src/LinkHandlerGeo';
 import Color from '@util/Color';
 import Translation from '@util/Translation';
+import messageHistory from './dialogs/messageHistory';
 
 let chatWindowMessageTemplate = require('../../template/chat-window-message.hbs');
 
@@ -14,8 +15,15 @@ export default class ChatWindowMessage {
 
    private message: IMessage;
 
-   constructor(private originalMessage: IMessage, private chatWindow: ChatWindow) {
-      this.message = originalMessage.getLastVersion();
+   constructor(private originalMessage: IMessage, private chatWindow: ChatWindow, useLastVersion: boolean = true) {
+      this.message = useLastVersion ? originalMessage.getLastVersion() : originalMessage;
+
+      let template = chatWindowMessageTemplate({
+         id: this.message.getCssId(),
+         direction: this.message.getDirectionString(),
+      });
+
+      this.element = $(template);
 
       this.generateElement();
       this.registerHooks();
@@ -59,13 +67,6 @@ export default class ChatWindowMessage {
    }
 
    private async generateElement() {
-      let template = chatWindowMessageTemplate({
-         id: this.message.getCssId(),
-         direction: this.message.getDirectionString(),
-      });
-
-      this.element = $(template);
-
       let bodyElement = $(await this.message.getProcessedBody());
 
       LinkHandlerGeo.get().detect(bodyElement);
@@ -95,6 +96,14 @@ export default class ChatWindowMessage {
          this.element.addClass('jsxc-edited');
       }
 
+      this.element.find('.jsxc-version').on('click', () => {
+         if (!this.element.hasClass('jsxc-edited')) {
+            return;
+         }
+
+         messageHistory(this.originalMessage, this.chatWindow);
+      });
+
       if (this.message.getErrorMessage()) {
          this.element.addClass('jsxc-error');
          this.element.find('.jsxc-error-content').text(Translation.t(this.message.getErrorMessage()));
@@ -230,8 +239,7 @@ export default class ChatWindowMessage {
 
    private registerHooks() {
       this.message.registerHook('replacedBy', () => {
-         const messageReplacement = this.message.getReplacedBy();
-         const chatWindowMessageReplacement = new ChatWindowMessage(messageReplacement, this.chatWindow);
+         const chatWindowMessageReplacement = new ChatWindowMessage(this.originalMessage, this.chatWindow);
 
          this.element.replaceWith(chatWindowMessageReplacement.getElement());
       });
diff --git a/src/ui/dialogs/messageHistory.ts b/src/ui/dialogs/messageHistory.ts
new file mode 100644
index 00000000..e2652e79
--- /dev/null
+++ b/src/ui/dialogs/messageHistory.ts
@@ -0,0 +1,22 @@
+import Dialog from '../Dialog';
+import { IMessage } from '@src/Message.interface';
+import ChatWindowMessage from '@ui/ChatWindowMessage';
+import ChatWindow from '@ui/ChatWindow';
+
+const messageHistoryTemplate = require('../../../template/messageHistory.hbs');
+
+export default function messageHistory(message: IMessage, chatWindow: ChatWindow) {
+   const content = messageHistoryTemplate({});
+
+   const dialog = new Dialog(content);
+   const dom = dialog.open();
+
+   while (message) {
+      const messageElement = new ChatWindowMessage(message, chatWindow, false);
+
+      dom.find('ul').append('<li>');
+      dom.find('ul > li:last-child').append(messageElement.getElement());
+
+      message = message.getReplacedBy();
+   }
+}
diff --git a/template/messageHistory.hbs b/template/messageHistory.hbs
new file mode 100644
index 00000000..dd465ebe
--- /dev/null
+++ b/template/messageHistory.hbs
@@ -0,0 +1,7 @@
+<h3>{{t "Message_history"}}</h3>
+
+<ul class="jsxc-message-history"></ul>
+
+<div class="col-sm-offset-4 col-sm-8">
+    <button class="jsxc-button jsxc-button--default jsxc-js-close" type="button">{{t "Close"}}</button>
+</div>