[Bug] Remove toggle_typing API call for channels except Facebook (#211)
This commit is contained in:
parent
127dd4cf61
commit
2ebc07b381
8 changed files with 81 additions and 78 deletions
|
@ -1,10 +1,7 @@
|
||||||
.emoji-dialog {
|
.emoji-dialog {
|
||||||
@include elegant-card;
|
@include elegant-card;
|
||||||
background: $color-white;
|
background: $color-white;
|
||||||
border-radius: 2px;
|
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
height: 20rem;
|
|
||||||
padding-bottom: $space-two;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: -22rem;
|
top: -22rem;
|
||||||
|
@ -19,7 +16,7 @@
|
||||||
|
|
||||||
.emojione {
|
.emojione {
|
||||||
@include margin($zero);
|
@include margin($zero);
|
||||||
font-size: $font-size-small;
|
font-size: $font-size-medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-row {
|
.emoji-row {
|
||||||
|
@ -27,7 +24,6 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
padding-bottom: 0;
|
|
||||||
|
|
||||||
.emoji {
|
.emoji {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
@ -67,7 +63,7 @@
|
||||||
padding: $space-smaller 0 0;
|
padding: $space-smaller 0 0;
|
||||||
|
|
||||||
> li {
|
> li {
|
||||||
@include padding($space-small $space-small);
|
@include padding($space-smaller $space-small);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -99,8 +95,3 @@
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-dialog .emoji-row,
|
|
||||||
.emoji-dialog .emoji-row .emoji:hover {
|
|
||||||
background: $color-extra-light-blue;
|
|
||||||
}
|
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
>
|
>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<img
|
<img
|
||||||
v-if="badge === 'Facebook'"
|
v-if="badge === 'Channel::FacebookPage'"
|
||||||
id="badge"
|
id="badge"
|
||||||
class="source-badge"
|
class="source-badge"
|
||||||
:style="badgeStyle"
|
:style="badgeStyle"
|
||||||
|
|
|
@ -1,17 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<ul
|
||||||
<ul class="vertical dropdown menu canned" id="canned-list" v-bind:style="{ top: getTopPadding() + 'rem'}">
|
v-if="cannedMessages.length"
|
||||||
|
id="canned-list"
|
||||||
|
class="vertical dropdown menu canned"
|
||||||
|
:style="{ top: getTopPadding() + 'rem' }"
|
||||||
|
>
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in cannedMessages"
|
v-for="(item, index) in cannedMessages"
|
||||||
:id="`canned-${index}`"
|
:id="`canned-${index}`"
|
||||||
:class="{'active': index === selectedIndex}"
|
:key="item.short_code"
|
||||||
v-on:click="onListItemSelection(index)"
|
:class="{ active: index === selectedIndex }"
|
||||||
v-on:mouseover="onHover(index)"
|
@click="onListItemSelection(index)"
|
||||||
|
@mouseover="onHover(index)"
|
||||||
>
|
>
|
||||||
<a><strong>{{item.short_code}}</strong> - {{item.content}}</a>
|
<a class="text-truncate">
|
||||||
|
<strong>{{ item.short_code }}</strong> - {{ item.content }}
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -30,9 +36,11 @@ export default {
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
/* eslint-disable no-confusing-arrow */
|
|
||||||
document.addEventListener('keydown', this.keyListener);
|
document.addEventListener('keydown', this.keyListener);
|
||||||
},
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
document.removeEventListener('keydown', this.keyListener);
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getTopPadding() {
|
getTopPadding() {
|
||||||
if (this.cannedMessages.length <= 4) {
|
if (this.cannedMessages.length <= 4) {
|
||||||
|
@ -41,10 +49,10 @@ export default {
|
||||||
return -14;
|
return -14;
|
||||||
},
|
},
|
||||||
isUp(e) {
|
isUp(e) {
|
||||||
return e.keyCode === 38 || (e.ctrlKey && e.keyCode === 80); // UP, Ctrl-P
|
return e.keyCode === 38 || (e.ctrlKey && e.keyCode === 80); // UP, Ctrl-P
|
||||||
},
|
},
|
||||||
isDown(e) {
|
isDown(e) {
|
||||||
return e.keyCode === 40 || (e.ctrlKey && e.keyCode === 78); // DOWN, Ctrl-N
|
return e.keyCode === 40 || (e.ctrlKey && e.keyCode === 78); // DOWN, Ctrl-N
|
||||||
},
|
},
|
||||||
isEnter(e) {
|
isEnter(e) {
|
||||||
return e.keyCode === 13;
|
return e.keyCode === 13;
|
||||||
|
@ -67,7 +75,8 @@ export default {
|
||||||
if (this.isEnter(e)) {
|
if (this.isEnter(e)) {
|
||||||
this.onKeyenter(this.cannedMessages[this.selectedIndex].content);
|
this.onKeyenter(this.cannedMessages[this.selectedIndex].content);
|
||||||
}
|
}
|
||||||
this.$el.querySelector('#canned-list').scrollTop = 34 * this.selectedIndex;
|
this.$el.querySelector('#canned-list').scrollTop =
|
||||||
|
34 * this.selectedIndex;
|
||||||
},
|
},
|
||||||
onHover(index) {
|
onHover(index) {
|
||||||
this.selectedIndex = index;
|
this.selectedIndex = index;
|
||||||
|
@ -77,8 +86,13 @@ export default {
|
||||||
this.onClick(this.cannedMessages[this.selectedIndex].content);
|
this.onClick(this.cannedMessages[this.selectedIndex].content);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
|
||||||
document.removeEventListener('keydown', this.keyListener);
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.text-truncate {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="reply-box">
|
<div class="reply-box">
|
||||||
<div class="reply-box__top" :class="{ 'is-private': isPrivate }">
|
<div class="reply-box__top" :class="{ 'is-private': isPrivate }">
|
||||||
<canned-response
|
<canned-response
|
||||||
v-if="showCannedModal"
|
v-if="showCannedResponsesList"
|
||||||
v-on-clickaway="hideCannedResponse"
|
v-on-clickaway="hideCannedResponse"
|
||||||
data-dropdown-menu
|
data-dropdown-menu
|
||||||
:on-keyenter="replaceText"
|
:on-keyenter="replaceText"
|
||||||
|
@ -88,12 +88,22 @@ export default {
|
||||||
message: '',
|
message: '',
|
||||||
isPrivate: false,
|
isPrivate: false,
|
||||||
showEmojiPicker: false,
|
showEmojiPicker: false,
|
||||||
showCannedModal: false,
|
showCannedResponsesList: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: mapGetters({
|
computed: {
|
||||||
currentChat: 'getSelectedChat',
|
...mapGetters({
|
||||||
}),
|
currentChat: 'getSelectedChat',
|
||||||
|
}),
|
||||||
|
channelType() {
|
||||||
|
const {
|
||||||
|
meta: {
|
||||||
|
sender: { channel },
|
||||||
|
},
|
||||||
|
} = this.currentChat;
|
||||||
|
return channel;
|
||||||
|
},
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
EmojiInput,
|
EmojiInput,
|
||||||
CannedResponse,
|
CannedResponse,
|
||||||
|
@ -107,7 +117,7 @@ export default {
|
||||||
const hasNextWord = val.indexOf(' ') > -1;
|
const hasNextWord = val.indexOf(' ') > -1;
|
||||||
const isShortCodeActive = isSlashCommand && !hasNextWord;
|
const isShortCodeActive = isSlashCommand && !hasNextWord;
|
||||||
if (isShortCodeActive) {
|
if (isShortCodeActive) {
|
||||||
this.showCannedModal = true;
|
this.showCannedResponsesList = true;
|
||||||
if (val.length > 1) {
|
if (val.length > 1) {
|
||||||
const searchKey = val.substr(1, val.length);
|
const searchKey = val.substr(1, val.length);
|
||||||
this.$store.dispatch('getCannedResponse', {
|
this.$store.dispatch('getCannedResponse', {
|
||||||
|
@ -117,26 +127,28 @@ export default {
|
||||||
this.$store.dispatch('getCannedResponse');
|
this.$store.dispatch('getCannedResponse');
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.showCannedModal = false;
|
this.showCannedResponsesList = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
/* eslint-disable no-confusing-arrow */
|
document.addEventListener('keydown', this.handleKeyEvents);
|
||||||
document.addEventListener('keydown', e => {
|
},
|
||||||
|
destroyed() {
|
||||||
|
document.removeEventListener('keydown', this.handleKeyEvents);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleKeyEvents(e) {
|
||||||
if (this.isEscape(e)) {
|
if (this.isEscape(e)) {
|
||||||
this.hideEmojiPicker();
|
this.hideEmojiPicker();
|
||||||
this.hideCannedResponse();
|
this.hideCannedResponse();
|
||||||
}
|
} else if (this.isEnter(e)) {
|
||||||
if (this.isEnter(e)) {
|
|
||||||
if (!e.shiftKey) {
|
if (!e.shiftKey) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.sendMessage();
|
this.sendMessage();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
},
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
isEnter(e) {
|
isEnter(e) {
|
||||||
return e.keyCode === 13;
|
return e.keyCode === 13;
|
||||||
},
|
},
|
||||||
|
@ -144,11 +156,11 @@ export default {
|
||||||
return e.keyCode === 27; // ESCAPE
|
return e.keyCode === 27; // ESCAPE
|
||||||
},
|
},
|
||||||
sendMessage() {
|
sendMessage() {
|
||||||
const messageHasOnlyNewLines = !this.message.replace(/\n/g, '').length;
|
const isMessageEmpty = !this.message.replace(/\n/g, '').length;
|
||||||
if (messageHasOnlyNewLines) {
|
if (isMessageEmpty) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (this.message.length !== 0 && !this.showCannedModal) {
|
if (!this.showCannedResponsesList) {
|
||||||
this.$store
|
this.$store
|
||||||
.dispatch('sendMessage', {
|
.dispatch('sendMessage', {
|
||||||
conversationId: this.currentChat.id,
|
conversationId: this.currentChat.id,
|
||||||
|
@ -165,7 +177,7 @@ export default {
|
||||||
replaceText(message) {
|
replaceText(message) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.message = message;
|
this.message = message;
|
||||||
}, 200);
|
}, 100);
|
||||||
},
|
},
|
||||||
makePrivate() {
|
makePrivate() {
|
||||||
this.isPrivate = true;
|
this.isPrivate = true;
|
||||||
|
@ -192,7 +204,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hideCannedResponse() {
|
hideCannedResponse() {
|
||||||
this.showCannedModal = false;
|
this.showCannedResponsesList = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
onBlur() {
|
onBlur() {
|
||||||
|
@ -203,18 +215,22 @@ export default {
|
||||||
this.toggleTyping('on');
|
this.toggleTyping('on');
|
||||||
},
|
},
|
||||||
markSeen() {
|
markSeen() {
|
||||||
this.$store.dispatch('markSeen', {
|
if (this.channelType !== 'Channel::FacebookPage') {
|
||||||
inboxId: this.currentChat.inbox_id,
|
this.$store.dispatch('markSeen', {
|
||||||
contactId: this.currentChat.meta.sender.id,
|
inboxId: this.currentChat.inbox_id,
|
||||||
});
|
contactId: this.currentChat.meta.sender.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleTyping(status) {
|
toggleTyping(status) {
|
||||||
this.$store.dispatch('toggleTyping', {
|
if (this.channelType !== 'Channel::FacebookPage') {
|
||||||
status,
|
this.$store.dispatch('toggleTyping', {
|
||||||
inboxId: this.currentChat.inbox_id,
|
status,
|
||||||
contactId: this.currentChat.meta.sender.id,
|
inboxId: this.currentChat.inbox_id,
|
||||||
});
|
contactId: this.currentChat.meta.sender.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
disableButton() {
|
disableButton() {
|
||||||
const messageHasOnlyNewLines = !this.message.replace(/\n/g, '').length;
|
const messageHasOnlyNewLines = !this.message.replace(/\n/g, '').length;
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
},
|
},
|
||||||
"FOOTER": {
|
"FOOTER": {
|
||||||
"MSG_INPUT": "Shift + enter for new line. Start with '/' to select a Canned Response.",
|
"MSG_INPUT": "Shift + enter for new line. Start with '/' to select a Canned Response.",
|
||||||
"PRIVATE_MSG_INPUT": "Shift + enter for new line.This will be visible only to Agents"
|
"PRIVATE_MSG_INPUT": "Shift + enter for new line. This will be visible only to Agents"
|
||||||
},
|
},
|
||||||
"REPLYBOX": {
|
"REPLYBOX": {
|
||||||
"SEND": "Send",
|
"SEND": "Send",
|
||||||
|
|
|
@ -9,6 +9,10 @@ module Channel
|
||||||
has_one :inbox, as: :channel, dependent: :destroy
|
has_one :inbox, as: :channel, dependent: :destroy
|
||||||
has_secure_token :website_token
|
has_secure_token :website_token
|
||||||
|
|
||||||
|
def name
|
||||||
|
'Website'
|
||||||
|
end
|
||||||
|
|
||||||
def create_contact_inbox
|
def create_contact_inbox
|
||||||
ActiveRecord::Base.transaction do
|
ActiveRecord::Base.transaction do
|
||||||
contact = inbox.account.contacts.create!(name: ::Haikunator.haikunate(1000))
|
contact = inbox.account.contacts.create!(name: ::Haikunator.haikunate(1000))
|
||||||
|
|
|
@ -1,22 +0,0 @@
|
||||||
class FacebookPage < ApplicationRecord
|
|
||||||
validates :account_id, presence: true
|
|
||||||
validates_uniqueness_of :page_id, scope: :account_id
|
|
||||||
mount_uploader :avatar, AvatarUploader
|
|
||||||
belongs_to :account
|
|
||||||
|
|
||||||
has_one :inbox, as: :channel, dependent: :destroy
|
|
||||||
|
|
||||||
before_destroy :unsubscribe
|
|
||||||
|
|
||||||
def name
|
|
||||||
'Facebook'
|
|
||||||
end
|
|
||||||
|
|
||||||
private
|
|
||||||
|
|
||||||
def unsubscribe
|
|
||||||
Facebook::Messenger::Subscriptions.unsubscribe(access_token: page_access_token)
|
|
||||||
rescue StandardError => e
|
|
||||||
true
|
|
||||||
end
|
|
||||||
end
|
|
|
@ -12,7 +12,7 @@ json.data do
|
||||||
json.id conversation.contact.id
|
json.id conversation.contact.id
|
||||||
json.name conversation.contact.name
|
json.name conversation.contact.name
|
||||||
json.thumbnail conversation.contact.avatar.thumb.url
|
json.thumbnail conversation.contact.avatar.thumb.url
|
||||||
json.channel conversation.inbox.try(:channel).try(:name)
|
json.channel conversation.inbox.try(:channel_type)
|
||||||
end
|
end
|
||||||
json.assignee conversation.assignee
|
json.assignee conversation.assignee
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue