feat: Tag agents in a private note (#1688)

Co-authored-by: Sojan <sojan@pepalo.com>
2021-01-27 00:04:11 +05:30
parent b894b13e14
commit b93388b330
20 changed files with 424 additions and 93 deletions
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -1,55 +1,113 @@
 <template>
-  <div ref="editor" class="editor-root"></div>
+  <div class="editor-root">
+    <tag-agents
+      v-if="showUserMentions && isPrivate"
+      :search-key="mentionSearchKey"
+      @click="insertMentionNode"
+    />
+    <div ref="editor"></div>
+  </div>
 </template>

 <script>
-import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
-import {
-  schema,
-  defaultMarkdownParser,
-  defaultMarkdownSerializer,
-} from 'prosemirror-markdown';
-import { wootWriterSetup } from '@chatwoot/prosemirror-schema';
+import { defaultMarkdownSerializer } from 'prosemirror-markdown';

 const TYPING_INDICATOR_IDLE_TIME = 4000;

-const createState = (content, placeholder) =>
-  EditorState.create({
-    doc: defaultMarkdownParser.parse(content),
-    plugins: wootWriterSetup({ schema, placeholder }),
+import {
+  addMentionsToMarkdownSerializer,
+  addMentionsToMarkdownParser,
+  schemaWithMentions,
+} from '@chatwoot/prosemirror-schema/src/mentions/schema';
+import {
+  suggestionsPlugin,
+  triggerCharacters,
+} from '@chatwoot/prosemirror-schema/src/mentions/plugin';
+import TagAgents from '../conversation/TagAgents.vue';
+import { EditorState } from 'prosemirror-state';
+import { defaultMarkdownParser } from 'prosemirror-markdown';
+import { wootWriterSetup } from '@chatwoot/prosemirror-schema';
+
+const createState = (content, placeholder, plugins = []) => {
+  return EditorState.create({
+    doc: addMentionsToMarkdownParser(defaultMarkdownParser).parse(content),
+    plugins: wootWriterSetup({
+      schema: schemaWithMentions,
+      placeholder,
+      plugins,
+    }),
  });
+};

 export default {
  name: 'WootMessageEditor',
+  components: { TagAgents },
  props: {
    value: { type: String, default: '' },
    placeholder: { type: String, default: '' },
+    isPrivate: { type: Boolean, default: false },
  },
  data() {
    return {
      lastValue: null,
+      showUserMentions: false,
+      mentionSearchKey: '',
+      editorView: null,
+      range: null,
    };
  },
+  computed: {
+    plugins() {
+      return [
+        suggestionsPlugin({
+          matcher: triggerCharacters('@'),
+          onEnter: args => {
+            this.showUserMentions = true;
+            this.range = args.range;
+            this.editorView = args.view;
+            return false;
+          },
+          onChange: args => {
+            this.editorView = args.view;
+            this.range = args.range;
+
+            this.mentionSearchKey = args.text.replace('@', '');
+            return false;
+          },
+          onExit: () => {
+            this.mentionSearchKey = '';
+            this.showUserMentions = false;
+            this.editorView = null;
+            return false;
+          },
+          onKeyDown: ({ event }) => {
+            return event.keyCode === 13 && this.showUserMentions;
+          },
+        }),
+      ];
+    },
+  },
  watch: {
+    showUserMentions(updatedValue) {
+      this.$emit('toggle-user-mention', this.isPrivate && updatedValue);
+    },
    value(newValue) {
      if (newValue !== this.lastValue) {
-        this.state = createState(newValue, this.placeholder);
+        this.state = createState(newValue, this.placeholder, this.plugins);
        this.view.updateState(this.state);
      }
    },
  },
  created() {
-    this.state = createState(this.value, this.placeholder);
+    this.state = createState(this.value, this.placeholder, this.plugins);
  },
  mounted() {
    this.view = new EditorView(this.$refs.editor, {
      state: this.state,
      dispatchTransaction: tx => {
        this.state = this.state.apply(tx);
-        this.view.updateState(this.state);
-        this.lastValue = defaultMarkdownSerializer.serialize(this.state.doc);
-        this.$emit('input', this.lastValue);
+        this.emitOnChange();
      },
      handleDOMEvents: {
        keyup: () => {
@@ -65,6 +123,33 @@ export default {
    });
  },
  methods: {
+    insertMentionNode(mentionItem) {
+      if (!this.view) {
+        return null;
+      }
+      const node = this.view.state.schema.nodes.mention.create({
+        userId: mentionItem.key,
+        userFullName: mentionItem.label,
+      });
+
+      const tr = this.view.state.tr.replaceWith(
+        this.range.from,
+        this.range.to,
+        node
+      );
+      this.state = this.view.state.apply(tr);
+      return this.emitOnChange();
+    },
+    emitOnChange() {
+      this.view.updateState(this.state);
+      this.lastValue = addMentionsToMarkdownSerializer(
+        defaultMarkdownSerializer
+      ).serialize(this.state.doc);
+      this.$emit('input', this.lastValue);
+    },
+    hideMentions() {
+      this.showUserMentions = false;
+    },
    resetTyping() {
      this.$emit('typing-off');
      this.idleTimer = null;
@@ -115,4 +200,14 @@ export default {
  max-height: 12rem;
  overflow: auto;
 }
+
+.is-private {
+  .prosemirror-mention-node {
+    font-weight: var(--font-weight-medium);
+    background: var(--s-300);
+    border-radius: var(--border-radius-small);
+    padding: 1px 4px;
+    color: var(--white);
+  }
+}
 </style>
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -22,7 +22,7 @@
        </file-upload>
      </button>
      <button
-        v-if="enableRichEditor"
+        v-if="enableRichEditor && !isOnPrivateNote"
        class="button clear button--emoji"
        :title="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
        @click="toggleFormatMode"
@@ -102,6 +102,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    isOnPrivateNote: {
+      type: Boolean,
+      default: false,
+    },
    enableRichEditor: {
      type: Boolean,
      default: false,
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -8,9 +8,9 @@
    />
    <div class="reply-box__top">
      <canned-response
-        v-if="showCannedResponsesList"
-        v-on-clickaway="hideCannedResponse"
-        :search-key="cannedResponseSearchKey"
+        v-if="showMentions && hasSlashCommand"
+        v-on-clickaway="hideMentions"
+        :search-key="mentionSearchKey"
        @click="replaceText"
      />
      <emoji-input
@@ -19,7 +19,7 @@
        :on-click="emojiOnClick"
      />
      <resizable-text-area
-        v-if="!isFormatMode"
+        v-if="!showRichContentEditor"
        ref="messageInput"
        v-model="message"
        class="input"
@@ -34,12 +34,14 @@
        v-else
        v-model="message"
        class="input"
+        :is-private="isOnPrivateNote"
        :placeholder="messagePlaceHolder"
        :min-height="4"
        @typing-off="onTypingOff"
        @typing-on="onTypingOn"
        @focus="onFocus"
        @blur="onBlur"
+        @toggle-user-mention="toggleUserMention"
      />
    </div>
    <div v-if="hasAttachments" class="attachment-preview-box">
@@ -58,7 +60,8 @@
      :on-send="sendMessage"
      :is-send-disabled="isReplyButtonDisabled"
      :set-format-mode="setFormatMode"
-      :is-format-mode="isFormatMode"
+      :is-on-private-note="isOnPrivateNote"
+      :is-format-mode="showRichContentEditor"
      :enable-rich-editor="isRichEditorEnabled"
      :enter-to-send-enabled="enterToSendEnabled"
      @toggleEnterToSend="toggleEnterToSend"
@@ -108,15 +111,23 @@ export default {
      message: '',
      isFocused: false,
      showEmojiPicker: false,
-      showCannedResponsesList: false,
+      showMentions: false,
      attachedFiles: [],
      isUploading: false,
      replyType: REPLY_EDITOR_MODES.REPLY,
      isFormatMode: false,
-      cannedResponseSearchKey: '',
+      mentionSearchKey: '',
+      hasUserMention: false,
+      hasSlashCommand: false,
    };
  },
  computed: {
+    showRichContentEditor() {
+      if (this.isOnPrivateNote) {
+        return true;
+      }
+      return this.isFormatMode;
+    },
    ...mapGetters({
      currentChat: 'getSelectedChat',
      uiSettings: 'getUISettings',
@@ -126,7 +137,7 @@ export default {
    },
    isPrivate() {
      if (this.currentChat.can_reply) {
-        return this.replyType === REPLY_EDITOR_MODES.NOTE;
+        return this.isOnPrivateNote;
      }
      return true;
    },
@@ -208,18 +219,17 @@ export default {
    },
    isRichEditorEnabled() {
      return (
-        this.isAWebWidgetInbox ||
-        this.isAnEmailChannel ||
-        this.replyType === REPLY_EDITOR_MODES.NOTE
+        this.isAWebWidgetInbox || this.isAnEmailChannel || this.isOnPrivateNote
      );
    },
+    isOnPrivateNote() {
+      return this.replyType === REPLY_EDITOR_MODES.NOTE;
+    },
  },
  watch: {
    currentChat(conversation) {
      const { can_reply: canReply } = conversation;
-      const isUserReplyingOnPrivate =
-        this.replyType === REPLY_EDITOR_MODES.NOTE;
-      if (isUserReplyingOnPrivate) {
+      if (this.isOnPrivateNote) {
        return;
      }

@@ -230,18 +240,15 @@ export default {
      }
    },
    message(updatedMessage) {
-      const isSlashCommand = updatedMessage[0] === '/';
+      this.hasSlashCommand = updatedMessage[0] === '/';
      const hasNextWord = updatedMessage.includes(' ');
-      const isShortCodeActive = isSlashCommand && !hasNextWord;
+      const isShortCodeActive = this.hasSlashCommand && !hasNextWord;
      if (isShortCodeActive) {
-        this.cannedResponseSearchKey = updatedMessage.substr(
-          1,
-          updatedMessage.length
-        );
-        this.showCannedResponsesList = true;
+        this.mentionSearchKey = updatedMessage.substr(1, updatedMessage.length);
+        this.showMentions = true;
      } else {
-        this.cannedResponseSearchKey = '';
-        this.showCannedResponsesList = false;
+        this.mentionSearchKey = '';
+        this.showMentions = false;
      }
    },
  },
@@ -252,13 +259,19 @@ export default {
    document.removeEventListener('keydown', this.handleKeyEvents);
  },
  methods: {
+    toggleUserMention(currentMentionState) {
+      this.hasUserMention = currentMentionState;
+    },
    handleKeyEvents(e) {
      if (isEscape(e)) {
        this.hideEmojiPicker();
-        this.hideCannedResponse();
+        this.hideMentions();
      } else if (isEnter(e)) {
        const hasSendOnEnterEnabled =
-          (this.isFormatMode && this.enterToSendEnabled) || !this.isFormatMode;
+          (this.showRichContentEditor &&
+            this.enterToSendEnabled &&
+            !this.hasUserMention) ||
+          !this.showRichContentEditor;
        const shouldSendMessage =
          hasSendOnEnterEnabled && !hasPressedShift(e) && this.isFocused;
        if (shouldSendMessage) {
@@ -279,7 +292,7 @@ export default {
      if (this.isReplyButtonDisabled) {
        return;
      }
-      if (!this.showCannedResponsesList) {
+      if (!this.showMentions) {
        const newMessage = this.message;
        const messagePayload = this.getMessagePayload(newMessage);
        this.clearMessage();
@@ -318,8 +331,8 @@ export default {
        this.toggleEmojiPicker();
      }
    },
-    hideCannedResponse() {
-      this.showCannedResponsesList = false;
+    hideMentions() {
+      this.showMentions = false;
    },
    onTypingOn() {
      this.toggleTyping('on');
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -0,0 +1,49 @@
+<template>
+  <mention-box :items="items" @mention-select="handleMentionClick" />
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import MentionBox from '../mentions/MentionBox.vue';
+
+export default {
+  components: { MentionBox },
+  props: {
+    searchKey: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    ...mapGetters({
+      agents: 'agents/getVerifiedAgents',
+    }),
+    items() {
+      if (!this.searchKey) {
+        return this.agents.map(agent => ({
+          label: agent.name,
+          key: agent.id,
+          description: agent.email,
+        }));
+      }
+
+      return this.agents
+        .filter(agent =>
+          agent.name
+            .toLocaleLowerCase()
+            .includes(this.searchKey.toLocaleLowerCase())
+        )
+        .map(agent => ({
+          label: agent.name,
+          key: agent.id,
+          description: agent.email,
+        }));
+    },
+  },
+  methods: {
+    handleMentionClick(item = {}) {
+      this.$emit('click', item);
+    },
+  },
+};
+</script>
--- a/app/javascript/dashboard/i18n/locale/en/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
@@ -68,7 +68,8 @@
    "TYPE_LABEL": {
      "conversation_creation": "New conversation",
      "conversation_assignment": "Conversation Assigned",
-      "assigned_conversation_new_message": "New Message"
+      "assigned_conversation_new_message": "New Message",
+      "conversation_mention": "Mention"
    }
  }
 }
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -27,6 +27,7 @@
        "NOTE": "Update your email notification preferences here",
        "CONVERSATION_ASSIGNMENT": "Send email notifications when a conversation is assigned to me",
        "CONVERSATION_CREATION": "Send email notifications when a new conversation is created",
+        "CONVERSATION_MENTION": "Send email notifications when you are mentioned in a conversation",
        "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in an assigned conversation"
      },
      "API": {
@@ -38,6 +39,7 @@
        "NOTE": "Update your push notification preferences here",
        "CONVERSATION_ASSIGNMENT": "Send push notifications when a conversation is assigned to me",
        "CONVERSATION_CREATION": "Send push notifications when a new conversation is created",
+        "CONVERSATION_MENTION": "Send push notifications when you are mentioned in a conversation",
        "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Send push notifications when a new message is created in an assigned conversation",
        "HAS_ENABLED_PUSH": "You have enabled push for this browser.",
        "REQUEST_PUSH": "Enable push notifications"
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -17,27 +17,23 @@
          @click="() => onClickNotification(notificationItem)"
        >
          <td>
-            <div class="notification--thumbnail">
-              <thumbnail
-                :src="notificationItem.primary_actor.meta.sender.thumbnail"
-                size="36px"
-                :username="notificationItem.primary_actor.meta.sender.name"
-                :status="
-                  notificationItem.primary_actor.meta.sender.availability_status
-                "
-              />
-              <div>
-                <h4 class="notification--name">
-                  {{ `#${notificationItem.id}` }}
-                </h4>
-                <p class="notification--title">
-                  {{ notificationItem.push_message_title }}
-                </p>
-              </div>
+            <div class="">
+              <h5 class="notification--title">
+                {{
+                  `#${
+                    notificationItem.primary_actor
+                      ? notificationItem.primary_actor.id
+                      : 'deleted'
+                  }`
+                }}
+              </h5>
+              <span class="notification--message-title">
+                {{ notificationItem.push_message_title }}
+              </span>
            </div>
          </td>
-          <td>
-            <span class="label">
+          <td class="text-right">
+            <span class="notification--type">
              {{
                $t(
                  `NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
@@ -45,8 +41,18 @@
              }}
            </span>
          </td>
-          <td>
-            {{ dynamicTime(notificationItem.created_at) }}
+          <td class="thumbnail--column">
+            <thumbnail
+              v-if="notificationItem.primary_actor.meta.assignee"
+              :src="notificationItem.primary_actor.meta.assignee.thumbnail"
+              size="36px"
+              :username="notificationItem.primary_actor.meta.assignee.name"
+            />
+          </td>
+          <td class="text-right timestamp--column">
+            <span class="notification--created-at">
+              {{ dynamicTime(notificationItem.created_at) }}
+            </span>
          </td>
          <td>
            <div
@@ -118,13 +124,8 @@ export default {
 <style lang="scss" scoped>
@import '~dashboard/assets/scss/mixins';

-.notification--name {
-  font-size: var(--font-size-small);
-  margin-bottom: 0;
-}
-
 .notification--title {
-  font-size: var(--font-size-mini);
+  font-size: var(--font-size-small);
  margin: 0;
 }

@@ -132,7 +133,7 @@ export default {
  @include scroll-on-hover;
  flex: 1 1;
  height: 100%;
-  padding: var(--space-normal);
+  padding: var(--space-large) var(--space-larger);
 }

 .notifications-table {
@@ -153,14 +154,10 @@ export default {
          padding-left: var(--space-medium);
        }
      }
-    }
-  }
-  .notification--thumbnail {
-    display: flex;
-    align-items: center;

-    .user-thumbnail-box {
-      margin-right: var(--space-small);
+      &:last-child {
+        border-bottom: 0;
+      }
    }
  }
 }
@@ -179,4 +176,25 @@ export default {
  border-radius: 50%;
  background: var(--color-woot);
 }
+
+.notification--created-at {
+  color: var(--s-700);
+  font-size: var(--font-size-mini);
+}
+
+.notification--type {
+  font-size: var(--font-size-mini);
+}
+
+.thumbnail--column {
+  width: 5.2rem;
+}
+
+.timestamp--column {
+  width: 12rem;
+}
+
+.notification--message-title {
+  color: var(--s-700);
+}
 </style>
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
@@ -44,6 +44,23 @@
          </label>
        </div>

+        <div>
+          <input
+            v-model="selectedEmailFlags"
+            class="notification--checkbox"
+            type="checkbox"
+            value="email_conversation_mention"
+            @input="handleEmailInput"
+          />
+          <label for="conversation_mention">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.CONVERSATION_MENTION'
+              )
+            }}
+          </label>
+        </div>
+
        <div>
          <input
            v-model="selectedEmailFlags"
@@ -123,6 +140,23 @@
          </label>
        </div>

+        <div>
+          <input
+            v-model="selectedPushFlags"
+            class="notification--checkbox"
+            type="checkbox"
+            value="push_conversation_mention"
+            @input="handlePushInput"
+          />
+          <label for="conversation_mention">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.CONVERSATION_MENTION'
+              )
+            }}
+          </label>
+        </div>
+
        <div>
          <input
            v-model="selectedPushFlags"
--- a/app/javascript/dashboard/store/modules/notifications/mutations.js
+++ b/app/javascript/dashboard/store/modules/notifications/mutations.js
@@ -23,7 +23,7 @@ export const mutations = {
    Vue.set($state.meta, 'unreadCount', unreadCount);
  },
  [types.SET_NOTIFICATIONS_UNREAD_COUNT]: ($state, count) => {
-    Vue.set($state.meta, 'unreadCount', count);
+    Vue.set($state.meta, 'unreadCount', count < 0 ? 0 : count);
  },
  [types.SET_NOTIFICATIONS]: ($state, data) => {
    data.forEach(notification => {
--- a/app/javascript/dashboard/store/modules/specs/notifications/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/notifications/mutations.spec.js
@@ -40,6 +40,12 @@ describe('#mutations', () => {
      mutations[types.SET_NOTIFICATIONS_UNREAD_COUNT](state, 3);
      expect(state.meta).toEqual({ unreadCount: 3 });
    });
+
+    it('set notifications unread count to 0 if invalid', () => {
+      const state = { meta: { unreadCount: 4 } };
+      mutations[types.SET_NOTIFICATIONS_UNREAD_COUNT](state, -1);
+      expect(state.meta).toEqual({ unreadCount: 0 });
+    });
  });

  describe('#SET_NOTIFICATIONS', () => {
--- a/app/javascript/shared/helpers/MessageFormatter.js
+++ b/app/javascript/shared/helpers/MessageFormatter.js
@@ -10,9 +10,11 @@ const TWITTER_HASH_REGEX = /(^|\s)#(\w+)/g;
 const TWITTER_HASH_REPLACEMENT =
  '$1<a href="https://twitter.com/hashtag/$2" target="_blank" rel="noreferrer nofollow noopener">#$2</a>';

+const USER_MENTIONS_REGEX = /mention:\/\/(user|team)\/(\d+)\/([\w\s]+)/gm;
+
 class MessageFormatter {
  constructor(message, isATweet = false) {
-    this.message = DOMPurify.sanitize(escapeHtml(message) || '');
+    this.message = DOMPurify.sanitize(escapeHtml(message || ''));
    this.isATweet = isATweet;
    this.marked = marked;

@@ -21,6 +23,10 @@ class MessageFormatter {
        return `<strong>${text}</strong>`;
      },
      link(url, title, text) {
+        const mentionRegex = new RegExp(USER_MENTIONS_REGEX);
+        if (url.match(mentionRegex)) {
+          return `<span class="prosemirror-mention-node">${text}</span>`;
+        }
        return `<a rel="noreferrer noopener nofollow" href="${url}" class="link" title="${title ||
          ''}" target="_blank">${text}</a>`;
      },