Compare commits

...

2 commits

Author SHA1 Message Date
Muhsin
5237fee661 Add message helper 2022-12-21 16:36:27 +05:30
Muhsin
a151b86637 Add variable support in the editor 2022-12-21 16:17:07 +05:30
6 changed files with 306 additions and 9 deletions

View file

@ -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);

View file

@ -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>

View file

@ -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>

View file

@ -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()]
: '';
});
};

View file

@ -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 '
);
});
});

View file

@ -21,14 +21,18 @@
<div class="medium-12 columns">
<label :class="{ error: $v.content.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
<textarea
v-model.trim="content"
rows="5"
type="text"
<label class="editor-wrap">
<woot-message-editor
v-model="content"
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>