feat: Implement reply to for reply editor (#8063)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -150,6 +150,8 @@ import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { generateBotMessageContent } from './helpers/botMessageContentHelper';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { ACCOUNT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { LocalStorage } from 'shared/helpers/localStorage';
 
 export default {
   components: {
@@ -502,7 +504,13 @@ export default {
       this.showContextMenu = false;
       this.contextMenuPosition = { x: null, y: null };
     },
-    handleReplyTo() {},
+    handleReplyTo() {
+      const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
+      const { conversation_id: conversationId, id: replyTo } = this.data;
+
+      LocalStorage.updateJsonStore(replyStorageKey, conversationId, replyTo);
+      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.data);
+    },
     setupHighlightTimer() {
       if (Number(this.$route.query.messageId) !== Number(this.data.id)) {
         return;

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -19,6 +19,13 @@
       @click="$emit('click')"
     />
     <div class="reply-box__top">
+      <reply-to-message
+        v-if="shouldShowReplyToMessage"
+        :message-id="inReplyTo.id"
+        :message-content="inReplyTo.content"
+        @dismiss="resetReplyToMessage"
+        @navigate-to-message="navigateToMessage"
+      />
       <canned-response
         v-if="showMentions && hasSlashCommand"
         v-on-clickaway="hideMentions"
@@ -143,6 +150,7 @@ import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 
 import CannedResponse from './CannedResponse.vue';
+import ReplyToMessage from './ReplyToMessage.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview.vue';
 import ReplyTopPanel from 'dashboard/components/widgets/WootWriter/ReplyTopPanel.vue';
@@ -164,7 +172,7 @@ import {
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
@@ -178,6 +186,10 @@ import {
   replaceSignature,
   extractTextFromMarkdown,
 } from 'dashboard/helper/editorHelper';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { LocalStorage } from 'shared/helpers/localStorage';
 
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
@@ -185,6 +197,7 @@ export default {
   components: {
     EmojiInput,
     CannedResponse,
+    ReplyToMessage,
     ResizableTextArea,
     AttachmentPreview,
     ReplyTopPanel,
@@ -214,6 +227,7 @@ export default {
   data() {
     return {
       message: '',
+      inReplyTo: {},
       isFocused: false,
       showEmojiPicker: false,
       attachedFiles: [],
@@ -246,7 +260,19 @@ export default {
       lastEmail: 'getLastEmailInSelectedChat',
       globalConfig: 'globalConfig/get',
       accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
+    shouldShowReplyToMessage() {
+      return (
+        this.inReplyTo?.id &&
+        !this.isPrivate &&
+        this.inboxHasFeature(INBOX_FEATURES.REPLY_TO) &&
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.MESSAGE_REPLY_TO
+        )
+      );
+    },
     showRichContentEditor() {
       if (this.isOnPrivateNote || this.isRichEditorEnabled) {
         return true;
@@ -540,6 +566,9 @@ export default {
       true
     );
 
+    this.fetchAndSetReplyTo();
+    bus.$on(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
+
     // A hacky fix to solve the drag and drop
     // Is showing on top of new conversation modal drag and drop
     // TODO need to find a better solution
@@ -551,6 +580,7 @@ export default {
   destroyed() {
     document.removeEventListener('paste', this.onPaste);
     document.removeEventListener('keydown', this.handleKeyEvents);
+    bus.$off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
   },
   beforeDestroy() {
     bus.$off(
@@ -841,6 +871,7 @@ export default {
       }
       this.attachedFiles = [];
       this.isRecordingAudio = false;
+      this.resetReplyToMessage();
     },
     clearEmailField() {
       this.ccEmails = '';
@@ -972,8 +1003,10 @@ export default {
         sender: this.sender,
       };
 
-      if (this.inReplyTo) {
-        messagePayload.contentAttributes = { in_reply_to: this.inReplyTo };
+      if (this.inReplyTo?.id) {
+        messagePayload.contentAttributes = {
+          in_reply_to: this.inReplyTo.id,
+        };
       }
 
       if (this.attachedFiles && this.attachedFiles.length) {
@@ -1046,6 +1079,30 @@ export default {
       this.bccEmails = bcc.join(', ');
       this.toEmails = to.join(', ');
     },
+    fetchAndSetReplyTo() {
+      const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
+      const replyToMessageId = LocalStorage.getFromJsonStore(
+        replyStorageKey,
+        this.conversationId
+      );
+
+      this.inReplyTo = this.currentChat.messages.find(message => {
+        if (message.id === replyToMessageId) {
+          return true;
+        }
+        return false;
+      });
+    },
+    resetReplyToMessage() {
+      const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
+      LocalStorage.deleteFromJsonStore(replyStorageKey, this.conversationId);
+      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE);
+    },
+    navigateToMessage(messageId) {
+      this.$nextTick(() => {
+        bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId });
+      });
+    },
     onNewConversationModalActive(isActive) {
       // Issue is if the new conversation modal is open and we drag and drop the file
       // then the file is not getting attached to the new conversation modal

app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { computed } from 'vue';
+import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
+
+const { messageContent } = defineProps({
+  messageId: {
+    type: Number,
+    required: true,
+  },
+  messageContent: {
+    type: String,
+    default: '',
+  },
+});
+
+const cleanedContent = computed(() => extractTextFromMarkdown(messageContent));
+</script>
+
+<template>
+  <div
+    class="reply-editor bg-slate-50 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2 cursor-pointer"
+    @click="$emit('navigate-to-message', messageId)"
+  >
+    <fluent-icon class="flex-shrink-0 icon" icon="arrow-reply" icon-size="14" />
+    <div class="flex-grow overflow-hidden text-ellipsis">
+      {{ $t('CONVERSATION.REPLYBOX.REPLYING_TO') }} {{ cleanedContent }}.
+    </div>
+    <woot-button
+      v-tooltip="$t('CONVERSATION.REPLYBOX.DISMISS_REPLY')"
+      color-scheme="secondary"
+      icon="dismiss"
+      variant="clear"
+      size="tiny"
+      class="flex-shrink-0"
+      @click.stop="$emit('dismiss')"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+// TODO: Remove this
+// override for dashboard/assets/scss/widgets/_reply-box.scss
+.reply-editor {
+  .icon {
+    margin-right: 0px !important;
+  }
+}
+</style>

app/javascript/dashboard/constants/localStorage.js

@@ -4,4 +4,5 @@ export const LOCAL_STORAGE_KEYS = {
   DRAFT_MESSAGES: 'draftMessages',
   COLOR_SCHEME: 'color_scheme',
   DISMISSED_LABEL_SUGGESTIONS: 'labelSuggestionsDismissed',
+  MESSAGE_REPLY_TO: 'messageReplyTo',
 };

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -138,6 +138,8 @@
       "PRIVATE_NOTE": "Private Note",
       "SEND": "Send",
       "CREATE": "Add Note",
+      "DISMISS_REPLY": "Dismiss reply",
+      "REPLYING_TO": "Replying to:",
       "TIP_FORMAT_ICON": "Show rich text editor",
       "TIP_EMOJI_ICON": "Show emoji selector",
       "TIP_ATTACH_ICON": "Attach files",

app/javascript/shared/components/EmojiOrIcon.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script>
+// 🚨 This component is deprecated. Please use fluent-icon instead.
 import { hasEmojiSupport } from 'shared/helpers/emoji';
 import { mapGetters } from 'vuex';
 

app/javascript/shared/constants/busEvents.js

@@ -8,6 +8,7 @@ export const BUS_EVENTS = {
   TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
   ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
   WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
+  TOGGLE_REPLY_TO_MESSAGE: 'TOGGLE_REPLY_TO_MESSAGE',
   SHOW_TOAST: 'newToastMessage',
   NEW_CONVERSATION_MODAL: 'newConversationModal',
 };

app/javascript/shared/helpers/localStorage.js

@@ -19,7 +19,7 @@ export const LocalStorage = {
     } else {
       window.localStorage.setItem(key, value);
     }
-    window.localStorage.setItem(key + ':ts', Date.now());
+    window.localStorage.setItem(key + ':ts', Date.now().toString());
   },
 
   setFlag(store, accountId, key, expiry = 24 * 60 * 60 * 1000) {
@@ -46,4 +46,39 @@ export const LocalStorage = {
     window.localStorage.removeItem(key);
     window.localStorage.removeItem(key + ':ts');
   },
+
+  updateJsonStore(storeName, key, value) {
+    try {
+      const storedValue = this.get(storeName) || {};
+      storedValue[key] = value;
+      this.set(storeName, storedValue);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Error updating JSON store in localStorage', e);
+    }
+  },
+
+  getFromJsonStore(storeName, key) {
+    try {
+      const storedValue = this.get(storeName) || {};
+      return storedValue[key] || null;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Error getting value from JSON store in localStorage', e);
+      return null;
+    }
+  },
+
+  deleteFromJsonStore(storeName, key) {
+    try {
+      const storedValue = this.get(storeName);
+      if (storedValue && key in storedValue) {
+        delete storedValue[key];
+        this.set(storeName, storedValue);
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Error deleting entry from JSON store in localStorage', e);
+    }
+  },
 };

app/javascript/shared/helpers/specs/localStorage.spec.js

@@ -0,0 +1,107 @@
+import { LocalStorage } from '../localStorage';
+
+// Mocking localStorage
+const localStorageMock = (() => {
+  let store = {};
+  return {
+    getItem: key => store[key] || null,
+    setItem: (key, value) => {
+      store[key] = String(value);
+    },
+    removeItem: key => delete store[key],
+    clear: () => {
+      store = {};
+    },
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock,
+});
+
+describe('LocalStorage utility', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('set and get methods', () => {
+    LocalStorage.set('testKey', { a: 1 });
+    expect(LocalStorage.get('testKey')).toEqual({ a: 1 });
+  });
+
+  it('remove method', () => {
+    LocalStorage.set('testKey', 'testValue');
+    LocalStorage.remove('testKey');
+    expect(LocalStorage.get('testKey')).toBeNull();
+  });
+
+  it('updateJsonStore method', () => {
+    LocalStorage.updateJsonStore('testStore', 'testKey', 'testValue');
+    expect(LocalStorage.get('testStore')).toEqual({ testKey: 'testValue' });
+  });
+
+  it('getFromJsonStore method', () => {
+    LocalStorage.set('testStore', { testKey: 'testValue' });
+    expect(LocalStorage.getFromJsonStore('testStore', 'testKey')).toBe(
+      'testValue'
+    );
+  });
+
+  it('deleteFromJsonStore method', () => {
+    LocalStorage.set('testStore', { testKey: 'testValue' });
+    LocalStorage.deleteFromJsonStore('testStore', 'testKey');
+    expect(LocalStorage.getFromJsonStore('testStore', 'testKey')).toBeNull();
+  });
+
+  it('setFlag and getFlag methods', () => {
+    const store = 'testStore';
+    const accountId = '123';
+    const key = 'flagKey';
+    const expiry = 1000; // 1 second
+
+    // Set flag and verify it's set
+    LocalStorage.setFlag(store, accountId, key, expiry);
+    expect(LocalStorage.getFlag(store, accountId, key)).toBe(true);
+
+    // Wait for expiry and verify flag is not set
+    return new Promise(resolve => {
+      setTimeout(() => {
+        expect(LocalStorage.getFlag(store, accountId, key)).toBe(false);
+        resolve();
+      }, expiry + 100); // wait a bit more than expiry time to ensure the flag has expired
+    });
+  });
+
+  it('clearAll method', () => {
+    LocalStorage.set('testKey1', 'testValue1');
+    LocalStorage.set('testKey2', 'testValue2');
+    LocalStorage.clearAll();
+    expect(LocalStorage.get('testKey1')).toBeNull();
+    expect(LocalStorage.get('testKey2')).toBeNull();
+  });
+
+  it('set method with non-object value', () => {
+    LocalStorage.set('testKey', 'testValue');
+    expect(LocalStorage.get('testKey')).toBe('testValue');
+  });
+
+  it('set and get methods with null value', () => {
+    LocalStorage.set('testKey', null);
+    expect(LocalStorage.get('testKey')).toBeNull();
+  });
+
+  it('set and get methods with undefined value', () => {
+    LocalStorage.set('testKey', undefined);
+    expect(LocalStorage.get('testKey')).toBe('undefined');
+  });
+
+  it('set and get methods with boolean value', () => {
+    LocalStorage.set('testKey', true);
+    expect(LocalStorage.get('testKey')).toBe(true);
+  });
+
+  it('set and get methods with number value', () => {
+    LocalStorage.set('testKey', 42);
+    expect(LocalStorage.get('testKey')).toBe(42);
+  });
+});