Merge branch 'develop' into feat/support-variables-in-message

This commit is contained in:
Muhsin Keloth 2022-12-22 22:54:44 +05:30 committed by GitHub
commit 289ad1e7f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 163 additions and 98 deletions

View file

@ -10,11 +10,11 @@ import 'videojs-record/dist/css/videojs.record.css';
import videojs from 'video.js';
import inboxMixin from '../../../../shared/mixins/inboxMixin';
import alertMixin from '../../../../shared/mixins/alertMixin';
import Recorder from 'opus-recorder';
import encoderWorker from 'opus-recorder/dist/encoderWorker.min';
import waveWorker from 'opus-recorder/dist/waveWorker.min';
import WaveSurfer from 'wavesurfer.js';
import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
@ -29,14 +29,19 @@ WaveSurfer.microphone = MicrophonePlugin;
export default {
name: 'WootAudioRecorder',
mixins: [inboxMixin, alertMixin],
mixins: [alertMixin],
props: {
audioRecordFormat: {
type: String,
default: AUDIO_FORMATS.WEBM,
},
},
data() {
return {
player: false,
recordingDateStarted: new Date(0),
initialTimeDuration: '00:00',
recorderOptions: {
debug: true,
controls: true,
bigPlayButton: false,
fluid: false,
@ -71,6 +76,9 @@ export default {
record: {
audio: true,
video: false,
maxLength: 900,
timeSlice: 1000,
maxFileSize: 15 * 1024 * 1024,
...(this.audioRecordFormat === AUDIO_FORMATS.WEBM && {
monitorGain: 0,
recordingGain: 1,
@ -80,11 +88,10 @@ export default {
streamPages: true,
maxFramesPerPage: 1,
encoderFrameSize: 1,
encoderPath: 'opus-recorder/dist/waveWorker.min.js',
encoderPath: waveWorker,
}),
...(this.audioRecordFormat === AUDIO_FORMATS.OGG && {
displayMilliseconds: false,
maxLength: 300,
audioEngine: 'opus-recorder',
audioWorkerURL: encoderWorker,
audioChannels: 1,
@ -100,12 +107,6 @@ export default {
isRecording() {
return this.player && this.player.record().isRecording();
},
audioRecordFormat() {
if (this.isAWebWidgetInbox) {
return AUDIO_FORMATS.WEBM;
}
return AUDIO_FORMATS.OGG;
},
},
mounted() {
window.Recorder = Recorder;

View file

@ -21,7 +21,11 @@
/>
</h3>
<div class="conversation--header--actions">
<inbox-name :inbox="inbox" class="margin-right-small" />
<inbox-name
v-if="hasMultipleInboxes"
:inbox="inbox"
class="margin-right-small"
/>
<span
v-if="isSnoozed"
class="snoozed--display-text margin-right-small"
@ -145,6 +149,9 @@ export default {
const { inbox_id: inboxId } = this.chat;
return this.$store.getters['inboxes/getInbox'](inboxId);
},
hasMultipleInboxes() {
return this.$store.getters['inboxes/getInboxes'].length > 1;
},
},
methods: {

View file

@ -15,7 +15,6 @@
v-if="data.content"
:message="message"
:is-email="isEmailContentType"
:readable-time="readableTime"
:display-quoted-button="displayQuotedButton"
/>
<span
@ -29,7 +28,6 @@
<bubble-image
v-if="attachment.file_type === 'image' && !hasImageError"
:url="attachment.data_url"
:readable-time="readableTime"
@error="onImageLoadError"
/>
<audio v-else-if="attachment.file_type === 'audio'" controls>
@ -38,7 +36,6 @@
<bubble-video
v-else-if="attachment.file_type === 'video'"
:url="attachment.data_url"
:readable-time="readableTime"
/>
<bubble-location
v-else-if="attachment.file_type === 'location'"
@ -46,11 +43,7 @@
:longitude="attachment.coordinates_long"
:name="attachment.fallback_title"
/>
<bubble-file
v-else
:url="attachment.data_url"
:readable-time="readableTime"
/>
<bubble-file v-else :url="attachment.data_url" />
</div>
</div>
<bubble-actions
@ -65,10 +58,9 @@
:is-private="data.private"
:message-type="data.message_type"
:message-status="status"
:readable-time="readableTime"
:source-id="data.source_id"
:inbox-id="data.inbox_id"
:message-read="showReadTicks"
:created-at="createdAt"
/>
</div>
<spinner v-if="isPending" size="tiny" />
@ -119,8 +111,6 @@
</template>
<script>
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
import timeMixin from '../../../mixins/time';
import BubbleMailHead from './bubble/MailHead';
import BubbleText from './bubble/Text';
import BubbleImage from './bubble/Image';
@ -149,7 +139,7 @@ export default {
ContextMenu,
Spinner,
},
mixins: [alertMixin, timeMixin, messageFormatterMixin, contentTypeMixin],
mixins: [alertMixin, messageFormatterMixin, contentTypeMixin],
props: {
data: {
type: Object,
@ -167,10 +157,6 @@ export default {
type: Boolean,
default: false,
},
hasUserReadMessage: {
type: Boolean,
default: false,
},
isWebWidgetInbox: {
type: Boolean,
default: false,
@ -273,11 +259,8 @@ export default {
'has-tweet-menu': this.isATweet,
};
},
readableTime() {
return this.messageStamp(
this.contentAttributes.external_created_at || this.data.created_at,
'LLL d, h:mm a'
);
createdAt() {
return this.contentAttributes.external_created_at || this.data.created_at;
},
isBubble() {
return [0, 1, 3].includes(this.data.message_type);
@ -288,14 +271,6 @@ export default {
isOutgoing() {
return this.data.message_type === MESSAGE_TYPE.OUTGOING;
},
showReadTicks() {
return (
(this.isOutgoing || this.isTemplate) &&
this.hasUserReadMessage &&
this.isWebWidgetInbox &&
!this.data.private
);
},
isTemplate() {
return this.data.message_type === MESSAGE_TYPE.TEMPLATE;
},

View file

@ -40,9 +40,6 @@
:is-a-tweet="isATweet"
:is-a-whatsapp-channel="isAWhatsAppChannel"
:has-instagram-story="hasInstagramStory"
:has-user-read-message="
hasUserReadMessage(message.created_at, getLastSeenAt)
"
:is-web-widget-inbox="isAWebWidgetInbox"
/>
<li v-show="unreadMessageCount != 0" class="unread--toast">
@ -63,9 +60,6 @@
:is-a-tweet="isATweet"
:is-a-whatsapp-channel="isAWhatsAppChannel"
:has-instagram-story="hasInstagramStory"
:has-user-read-message="
hasUserReadMessage(message.created_at, getLastSeenAt)
"
:is-web-widget-inbox="isAWebWidgetInbox"
/>
</ul>

View file

@ -37,6 +37,7 @@
<woot-audio-recorder
v-if="showAudioRecorderEditor"
ref="audioRecorderInput"
:audio-record-format="audioRecordFormat"
@state-recorder-progress-changed="onStateProgressRecorderChanged"
@state-recorder-changed="onStateRecorderChanged"
@finish-record="onFinishRecorder"
@ -147,6 +148,7 @@ import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
import {
MAXIMUM_FILE_UPLOAD_SIZE,
MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
AUDIO_FORMATS,
} from 'shared/constants/messages';
import { BUS_EVENTS } from 'shared/constants/busEvents';
@ -462,6 +464,12 @@ export default {
editorStateId() {
return `draft-${this.conversationIdByRoute}-${this.replyType}`;
},
audioRecordFormat() {
if (this.isAWebWidgetInbox) {
return AUDIO_FORMATS.WEBM;
}
return AUDIO_FORMATS.OGG;
},
},
watch: {
currentChat(conversation) {

View file

@ -1,8 +1,14 @@
<template>
<div class="message-text--metadata">
<span class="time" :class="{ delivered: messageRead }">{{
readableTime
}}</span>
<span
class="time"
:class="{
'has-status-icon':
showSentIndicator || showDeliveredIndicator || showReadIndicator,
}"
>
{{ readableTime }}
</span>
<span v-if="showReadIndicator" class="read-indicator-wrap">
<fluent-icon
v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
@ -11,7 +17,7 @@
size="14"
/>
</span>
<span v-if="showDeliveredIndicator" class="read-indicator-wrap">
<span v-else-if="showDeliveredIndicator" class="read-indicator-wrap">
<fluent-icon
v-tooltip.top-start="$t('CHAT_LIST.DELIVERED')"
icon="checkmark-double"
@ -19,7 +25,7 @@
size="14"
/>
</span>
<span v-if="showSentIndicator" class="read-indicator-wrap">
<span v-else-if="showSentIndicator" class="read-indicator-wrap">
<fluent-icon
v-tooltip.top-start="$t('CHAT_LIST.SENT')"
icon="checkmark"
@ -74,17 +80,19 @@
import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
import { BUS_EVENTS } from 'shared/constants/busEvents';
import inboxMixin from 'shared/mixins/inboxMixin';
import { mapGetters } from 'vuex';
import timeMixin from '../../../../mixins/time';
export default {
mixins: [inboxMixin],
mixins: [inboxMixin, timeMixin],
props: {
sender: {
type: Object,
default: () => ({}),
},
readableTime: {
type: String,
default: '',
createdAt: {
type: Number,
default: 0,
},
storySender: {
type: String,
@ -130,12 +138,9 @@ export default {
type: [String, Number],
default: 0,
},
messageRead: {
type: Boolean,
default: false,
},
},
computed: {
...mapGetters({ currentChat: 'getSelectedChat' }),
inbox() {
return this.$store.getters['inboxes/getInbox'](this.inboxId);
},
@ -145,6 +150,9 @@ export default {
isOutgoing() {
return MESSAGE_TYPE.OUTGOING === this.messageType;
},
isTemplate() {
return MESSAGE_TYPE.TEMPLATE === this.messageType;
},
isDelivered() {
return MESSAGE_STATUS.DELIVERED === this.messageStatus;
},
@ -154,6 +162,9 @@ export default {
isSent() {
return MESSAGE_STATUS.SENT === this.messageStatus;
},
readableTime() {
return this.messageStamp(this.createdAt, 'LLL d, h:mm a');
},
screenName() {
const { additional_attributes: additionalAttributes = {} } =
this.sender || {};
@ -174,28 +185,52 @@ export default {
const { storySender, storyId } = this;
return `https://www.instagram.com/stories/${storySender}/${storyId}`;
},
showStatusIndicators() {
if ((this.isOutgoing || this.isTemplate) && !this.private) {
return true;
}
return false;
},
showSentIndicator() {
return (
this.isOutgoing &&
this.sourceId &&
(this.isAnEmailChannel || (this.isAWhatsAppChannel && this.isSent))
);
if (!this.showStatusIndicators) {
return false;
}
if (this.isAnEmailChannel) {
return !!this.sourceId;
}
if (this.isAWhatsAppChannel) {
return this.sourceId && this.isSent;
}
return false;
},
showDeliveredIndicator() {
return (
this.isOutgoing &&
this.sourceId &&
this.isAWhatsAppChannel &&
this.isDelivered
);
if (!this.showStatusIndicators) {
return false;
}
if (this.isAWhatsAppChannel) {
return this.sourceId && this.isDelivered;
}
return false;
},
showReadIndicator() {
return (
this.isOutgoing &&
this.sourceId &&
this.isAWhatsAppChannel &&
this.isRead
);
if (!this.showStatusIndicators) {
return false;
}
if (this.isAWebWidgetInbox) {
const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
return contactLastSeenAt >= this.createdAt;
}
if (this.isAWhatsAppChannel) {
return this.sourceId && this.isRead;
}
return false;
},
},
methods: {
@ -218,12 +253,13 @@ export default {
.action--icon {
color: var(--white);
&.read-tick {
color: var(--v-100);
}
&.read-indicator {
color: var(--g-300);
color: var(--g-200);
}
}
@ -288,8 +324,9 @@ export default {
position: absolute;
right: var(--space-small);
white-space: nowrap;
&.delivered {
right: var(--space-medium);
&.has-status-icon {
right: var(--space-large);
line-height: 2;
}
}

View file

@ -35,10 +35,6 @@ export default {
type: String,
default: '',
},
readableTime: {
type: String,
default: '',
},
isEmail: {
type: Boolean,
default: true,

View file

@ -34,9 +34,6 @@ export default {
lastNonActivityMessageFromAPI
);
},
hasUserReadMessage(createdAt, contactLastSeen) {
return !(contactLastSeen - createdAt < 0);
},
readMessages(m) {
return m.messages.filter(
chat => chat.created_at * 1000 <= m.agent_last_seen_at * 1000

View file

@ -66,7 +66,7 @@
@click="replaceTextWithCannedResponse"
/>
</div>
<div v-if="isAnEmailInbox || isAnWebWidgetInbox">
<div v-if="isEmailOrWebWidgetInbox">
<label>
{{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
<reply-email-head
@ -80,6 +80,7 @@
class="message-editor"
:class="{ editor_warning: $v.message.$error }"
:placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
@toggle-canned-menu="toggleCannedMenu"
@blur="$v.message.$touch"
/>
<span v-if="$v.message.$error" class="editor-warning__message">
@ -229,13 +230,16 @@ export default {
this.selectedInbox.inbox.channel_type === INBOX_TYPES.WEB
);
},
isEmailOrWebWidgetInbox() {
return this.isAnEmailInbox || this.isAnWebWidgetInbox;
},
hasWhatsappTemplates() {
return !!this.selectedInbox.inbox?.message_templates;
},
},
watch: {
message(value) {
this.hasSlashCommand = value[0] === '/';
this.hasSlashCommand = value[0] === '/' && !this.isEmailOrWebWidgetInbox;
const hasNextWord = value.includes(' ');
const isShortCodeActive = this.hasSlashCommand && !hasNextWord;
if (isShortCodeActive) {
@ -259,6 +263,9 @@ export default {
this.message = message;
}, 50);
},
toggleCannedMenu(value) {
this.showCannedMenu = value;
},
prepareWhatsAppMessagePayload({ message: content, templateParams }) {
const payload = {
inboxId: this.targetInbox.inbox.id,
@ -315,12 +322,10 @@ export default {
}
.canned-response {
position: relative;
top: var(--space-medium);
::v-deep .mention--box {
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
top: var(--space-jumbo) !important;
}
}
@ -355,4 +360,14 @@ export default {
.row.gutter-small {
gap: var(--space-small);
}
::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: 18rem !important;
width: 90%;
}
</style>

View file

@ -227,6 +227,26 @@ export default {
},
},
watch: {
'$route.name'() {
const routeName = this.$route?.name;
const routeParams = this.$route?.params;
const updateMetaInAllPortals = routeName === 'list_all_portals';
const updateMetaInEditArticle =
routeName === 'edit_article' && routeParams?.recentlyCreated;
const updateMetaInLocaleArticles =
routeName === 'list_all_locale_articles' &&
routeParams?.recentlyDeleted;
if (
updateMetaInAllPortals ||
updateMetaInEditArticle ||
updateMetaInLocaleArticles
) {
this.fetchPortalAndItsCategories();
}
},
},
mounted() {
window.addEventListener('resize', this.handleResize);
this.handleResize();

View file

@ -236,8 +236,10 @@ export default {
});
},
articleCount() {
const { all_articles_count: count } = this.portal.meta;
return count;
const { allowed_locales: allowedLocales } = this.portal.config;
return allowedLocales.reduce((acc, locale) => {
return acc + locale.articles_count;
}, 0);
},
},
methods: {

View file

@ -105,7 +105,10 @@ export default {
return this.portal?.config?.allowed_locales;
},
articlesCount() {
return this.portal?.meta?.all_articles_count;
const { allowed_locales: allowedLocales } = this.portal.config;
return allowedLocales.reduce((acc, locale) => {
return acc + locale.articles_count;
}, 0);
},
},
mounted() {

View file

@ -151,6 +151,7 @@ export default {
params: {
portalSlug: this.selectedPortalSlug,
locale: this.locale,
recentlyDeleted: true,
},
});
} catch (error) {

View file

@ -87,6 +87,7 @@ export default {
articleSlug: articleId,
portalSlug: this.selectedPortalSlug,
locale: this.locale,
recentlyCreated: true,
},
});
} catch (error) {

View file

@ -15,7 +15,7 @@ DeviseTokenAuth.setup do |config|
# Sets the max number of concurrent devices per user, which is 10 by default.
# After this limit is reached, the oldest tokens will be removed.
# config.max_number_of_devices = 10
config.max_number_of_devices = 25
# Sometimes it's necessary to make several requests to the API at the same
# time. In this case, each request in the batch will need to share the same

View file

@ -6,7 +6,7 @@ const vue = require('./loaders/vue');
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
environment.loaders.prepend('vue', vue);
environment.loaders.append('opus', {
environment.loaders.append('opus-ogg', {
test: /encoderWorker\.min\.js$/,
loader: 'file-loader',
options: {
@ -14,6 +14,14 @@ environment.loaders.append('opus', {
},
});
environment.loaders.append('opus-wav', {
test: /waveWorker\.min\.js$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
});
environment.loaders.append('audio', {
test: /\.(mp3)(\?.*)?$/,
loader: 'url-loader',