Add message helper

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -6,10 +6,15 @@
       @click="insertMentionNode"
     />
     <canned-response
-      v-if="showCannedMenu && !isPrivate"
+      v-if="shouldShowCannedResponses"
       :search-key="cannedSearchTerm"
       @click="insertCannedResponse"
     />
+    <variable-list
+      v-if="shouldShowVariables"
+      :search-key="variableSearchTerm"
+      @click="insertVariable"
+    />
     <div ref="editor" />
   </div>
 </template>
@@ -34,6 +39,7 @@ import { wootWriterSetup } from '@chatwoot/prosemirror-schema';
 
 import TagAgents from '../conversation/TagAgents';
 import CannedResponse from '../conversation/CannedResponse';
+import VariableList from '../conversation/VariableList';
 
 const TYPING_INDICATOR_IDLE_TIME = 4000;
 
@@ -64,7 +70,7 @@ const createState = (content, placeholder, plugins = []) => {
 
 export default {
   name: 'WootMessageEditor',
-  components: { TagAgents, CannedResponse },
+  components: { TagAgents, CannedResponse, VariableList },
   mixins: [eventListenerMixins, uiSettingsMixin],
   props: {
     value: { type: String, default: '' },
@@ -74,13 +80,17 @@ export default {
     enableSuggestions: { type: Boolean, default: true },
     overrideLineBreaks: { type: Boolean, default: false },
     updateSelectionWith: { type: String, default: '' },
+    enableVariables: { type: Boolean, default: false },
+    enableCannedResponses: { type: Boolean, default: true },
   },
   data() {
     return {
       showUserMentions: false,
       showCannedMenu: false,
+      showVariables: false,
       mentionSearchKey: '',
       cannedSearchTerm: '',
+      variableSearchTerm: '',
       editorView: null,
       range: null,
       state: undefined,
@@ -92,6 +102,14 @@ export default {
         defaultMarkdownSerializer
       ).serialize(this.editorView.state.doc);
     },
+    shouldShowVariables() {
+      return this.enableVariables && this.showVariables && !this.isPrivate;
+    },
+    shouldShowCannedResponses() {
+      return (
+        this.enableCannedResponses && this.showCannedMenu && !this.isPrivate
+      );
+    },
     plugins() {
       if (!this.enableSuggestions) {
         return [];
@@ -111,6 +129,7 @@ export default {
             this.range = args.range;
 
             this.mentionSearchKey = args.text.replace('@', '');
+
             return false;
           },
           onExit: () => {
@@ -150,6 +169,34 @@ export default {
             return event.keyCode === 13 && this.showCannedMenu;
           },
         }),
+        suggestionsPlugin({
+          matcher: triggerCharacters('{{'),
+          suggestionClass: '',
+          onEnter: args => {
+            if (this.isPrivate) {
+              return false;
+            }
+            this.showVariables = true;
+            this.range = args.range;
+            this.editorView = args.view;
+            return false;
+          },
+          onChange: args => {
+            this.editorView = args.view;
+            this.range = args.range;
+
+            this.variableSearchTerm = args.text.replace('{{', '');
+            return false;
+          },
+          onExit: () => {
+            this.variableSearchTerm = '';
+            this.showVariables = false;
+            return false;
+          },
+          onKeyDown: ({ event }) => {
+            return event.keyCode === 13 && this.showVariables;
+          },
+        }),
       ];
     },
   },
@@ -304,6 +351,33 @@ export default {
       AnalyticsHelper.track(ANALYTICS_EVENTS.INSERTED_A_CANNED_RESPONSE);
       return false;
     },
+    insertVariable(variable) {
+      if (!this.editorView) {
+        return null;
+      }
+
+      let from = this.range.from - 1;
+      let node = addMentionsToMarkdownParser(defaultMarkdownParser).parse(
+        variable
+      );
+
+      if (node.childCount === 1) {
+        node = this.editorView.state.schema.text(`{{ ${variable} }}`);
+        from = this.range.from;
+      }
+
+      const tr = this.editorView.state.tr.replaceWith(
+        from,
+        this.range.to,
+        node
+      );
+
+      this.state = this.editorView.state.apply(tr);
+      this.emitOnChange();
+
+      tr.scrollIntoView();
+      return false;
+    },
 
     emitOnChange() {
       this.editorView.updateState(this.state);

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

@@ -0,0 +1,62 @@
+<template>
+  <variable :items="items" @mention-select="handleVariableClick" />
+</template>
+
+<script>
+const variables = [
+  {
+    label: 'Conversation Id',
+    key: 'conversation.id',
+  },
+  {
+    label: 'Contact Id',
+    key: 'contact.id',
+  },
+  {
+    label: 'Contact name',
+    key: 'contact.name',
+  },
+  {
+    label: 'Contact email',
+    key: 'contact.email',
+  },
+  {
+    label: 'Contact phone',
+    key: 'contact.phone',
+  },
+  {
+    label: 'Agent name',
+    key: 'agent.name',
+  },
+  {
+    label: 'Agent email',
+    key: 'agent.email',
+  },
+];
+import Variable from '../variable/Variable.vue';
+
+export default {
+  components: { Variable },
+  props: {
+    searchKey: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    items() {
+      return variables.filter(variable => {
+        return (
+          variable.label.includes(this.searchKey) ||
+          variable.key.includes(this.searchKey)
+        );
+      });
+    },
+  },
+  methods: {
+    handleVariableClick(item = {}) {
+      this.$emit('click', item.key);
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/variable/Variable.vue

@@ -0,0 +1,86 @@
+<template>
+  <ul
+    v-if="items.length"
+    class="vertical dropdown menu mention--box"
+    :style="{ top: getTopPadding() + 'rem' }"
+  >
+    <li
+      v-for="(item, index) in items"
+      :id="`mention-item-${index}`"
+      :key="item.key"
+      :class="{ active: index === selectedIndex }"
+      @click="onListItemSelection(index)"
+      @mouseover="onHover(index)"
+    >
+      <a class="text-truncate">
+        <strong>{{ item.label }}</strong>
+      </a>
+    </li>
+  </ul>
+</template>
+
+<script>
+import mentionSelectionKeyboardMixin from '../mentions/mentionSelectionKeyboardMixin';
+export default {
+  mixins: [mentionSelectionKeyboardMixin],
+  props: {
+    items: {
+      type: Array,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      selectedIndex: 0,
+    };
+  },
+  watch: {
+    items(newItems) {
+      if (newItems.length < this.selectedIndex + 1) {
+        this.selectedIndex = 0;
+      }
+    },
+  },
+  methods: {
+    getTopPadding() {
+      if (this.items.length <= 4) {
+        return -(this.items.length * 2.9 + 1.7);
+      }
+      return -14;
+    },
+    handleKeyboardEvent(e) {
+      this.processKeyDownEvent(e);
+      this.$el.scrollTop = 29 * this.selectedIndex;
+    },
+    onHover(index) {
+      this.selectedIndex = index;
+    },
+    onListItemSelection(index) {
+      this.selectedIndex = index;
+      this.onSelect();
+    },
+    onSelect() {
+      this.$emit('mention-select', this.items[this.selectedIndex]);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.mention--box {
+  background: var(--white);
+  border-bottom: var(--space-small) solid var(--white);
+  border-top: 1px solid var(--color-border);
+  left: 0;
+  max-height: 14rem;
+  overflow: auto;
+  padding-top: var(--space-small);
+  position: absolute;
+  width: 100%;
+  z-index: 100;
+
+  .active a {
+    background: var(--w-500);
+  }
+}
+</style>

app/javascript/dashboard/helper/messageHelper.js

@@ -0,0 +1,8 @@
+export const findReplaceMessageVariables = ({ message, replacementList }) => {
+  const regex = /{{(.*?)}}/g;
+  return message.replace(regex, (match, replace) => {
+    return replacementList[replace.trim()]
+      ? replacementList[replace.trim().toLowerCase()]
+      : '';
+  });
+};

app/javascript/dashboard/helper/specs/messageHelper.spec.js

@@ -0,0 +1,49 @@
+import { findReplaceMessageVariables } from '../messageHelper';
+
+const replacementList = {
+  'contact.name': 'John',
+  'contact.email': 'john.p@example.com',
+  'contact.phone': '1234567890',
+  'conversation.id': 1,
+  'agent.name': 'Samuel',
+  'agent.email': 'samuel@gmail.com',
+};
+
+describe('#findReplaceMessageVariables', () => {
+  it('returns the message with variable name', () => {
+    const message = 'hey {{contact.name}} how may I help you?';
+    expect(findReplaceMessageVariables({ message, replacementList })).toBe(
+      'hey John how may I help you?'
+    );
+  });
+
+  it('returns the message with variable name having white space', () => {
+    const message = 'hey {{contact.name}} how may I help you?';
+    expect(findReplaceMessageVariables({ message, replacementList })).toBe(
+      'hey John how may I help you?'
+    );
+  });
+
+  it('returns the message with variable email', () => {
+    const message =
+      'No issues. We will send the reset instructions to your email at {{contact.email}}';
+    expect(findReplaceMessageVariables({ message, replacementList })).toBe(
+      'No issues. We will send the reset instructions to your email at john.p@example.com'
+    );
+  });
+
+  it('returns the message with multiple variables', () => {
+    const message =
+      'hey {{ contact.name }}, no issues. We will send the reset instructions to your email at {{contact.email}}';
+    expect(findReplaceMessageVariables({ message, replacementList })).toBe(
+      'hey John, no issues. We will send the reset instructions to your email at john.p@example.com'
+    );
+  });
+
+  it('returns the message if the variable is not present in replacementList', () => {
+    const message = 'Please dm me at {{contact.twitter}}';
+    expect(findReplaceMessageVariables({ message, replacementList })).toBe(
+      'Please dm me at '
+    );
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -21,14 +21,18 @@
         <div class="medium-12 columns">
           <label :class="{ error: $v.content.$error }">
             {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
-            <textarea
+            <label class="editor-wrap">
-              v-model.trim="content"
+              <woot-message-editor
-              rows="5"
+                v-model="content"
-              type="text"
+                class="message-editor"
+                :class="{ editor_warning: $v.content.$error }"
+                :enable-variables="true"
+                :enable-canned-responses="false"
                 :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
-              @input="$v.content.$touch"
+                @blur="$v.content.$touch"
               />
             </label>
+          </label>
         </div>
         <div class="modal-footer">
           <div class="medium-12 columns">
@@ -56,12 +60,14 @@ import { required, minLength } from 'vuelidate/lib/validators';
 
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
 import Modal from '../../../../components/Modal';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     WootSubmitButton,
     Modal,
+    WootMessageEditor,
   },
   mixins: [alertMixin],
   props: {
@@ -125,3 +131,15 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+::v-deep .mention--box {
+  border-left: 1px solid var(--color-border);
+  border-right: 1px solid var(--color-border);
+  left: 0;
+  margin: auto;
+  right: 0;
+  top: 17rem !important;
+  width: 90%;
+}
+</style>