Compare commits
2 commits
develop
...
feat/messa
Author | SHA1 | Date | |
---|---|---|---|
|
5237fee661 | ||
|
a151b86637 |
6 changed files with 306 additions and 9 deletions
|
@ -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);
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
8
app/javascript/dashboard/helper/messageHelper.js
Normal file
8
app/javascript/dashboard/helper/messageHelper.js
Normal 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()]
|
||||
: '';
|
||||
});
|
||||
};
|
49
app/javascript/dashboard/helper/specs/messageHelper.spec.js
Normal file
49
app/javascript/dashboard/helper/specs/messageHelper.spec.js
Normal 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 '
|
||||
);
|
||||
});
|
||||
});
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue