Merge branch 'develop' into spike/permissions-for-agents
# Conflicts: # app/models/account_user.rb
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
/* global axios */
|
||||
import ApiClient from '../ApiClient';
|
||||
|
||||
class MicrosoftClient extends ApiClient {
|
||||
constructor() {
|
||||
super('google', { accountScoped: true });
|
||||
}
|
||||
|
||||
generateAuthorization(payload) {
|
||||
return axios.post(`${this.url}/authorization`, payload);
|
||||
}
|
||||
}
|
||||
|
||||
export default new MicrosoftClient();
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<button
|
||||
class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
|
||||
class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
|
||||
|
||||
@@ -257,7 +257,16 @@ export default {
|
||||
html_content: { full: fullHTMLContent } = {},
|
||||
text_content: { full: fullTextContent } = {},
|
||||
} = this.contentAttributes.email || {};
|
||||
return fullHTMLContent || fullTextContent || '';
|
||||
|
||||
if (fullHTMLContent) {
|
||||
return fullHTMLContent;
|
||||
}
|
||||
|
||||
if (fullTextContent) {
|
||||
return fullTextContent.replace(/\n/g, '<br>');
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
displayQuotedButton() {
|
||||
if (this.emailMessageContent.includes('<blockquote')) {
|
||||
|
||||
@@ -121,7 +121,7 @@ export const generateConditionOptions = (options, key = 'id') => {
|
||||
};
|
||||
|
||||
// Add the "None" option to the agent list
|
||||
export const agentList = agents => [
|
||||
export const addNoneToList = agents => [
|
||||
{
|
||||
id: 'nil',
|
||||
name: 'None',
|
||||
@@ -137,8 +137,8 @@ export const getActionOptions = ({
|
||||
type,
|
||||
}) => {
|
||||
const actionsMap = {
|
||||
assign_agent: agentList(agents),
|
||||
assign_team: teams,
|
||||
assign_agent: addNoneToList(agents),
|
||||
assign_team: addNoneToList(teams),
|
||||
send_email_to_team: teams,
|
||||
add_label: generateConditionOptions(labels, 'title'),
|
||||
remove_label: generateConditionOptions(labels, 'title'),
|
||||
|
||||
@@ -367,8 +367,14 @@
|
||||
"DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
|
||||
"EMAIL_PLACEHOLDER": "Enter email address",
|
||||
"SIGN_IN": "Sign in with Microsoft",
|
||||
"HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
|
||||
"ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
|
||||
},
|
||||
"GOOGLE": {
|
||||
"TITLE": "Google Email",
|
||||
"DESCRIPTION": "Click on the Sign in with Google button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
|
||||
"SIGN_IN": "Sign in with Google",
|
||||
"EMAIL_PLACEHOLDER": "Enter email address",
|
||||
"ERROR_MESSAGE": "There was an error connecting to Google, please try again"
|
||||
}
|
||||
},
|
||||
"DETAILS": {
|
||||
@@ -736,6 +742,7 @@
|
||||
},
|
||||
"EMAIL_PROVIDERS": {
|
||||
"MICROSOFT": "Microsoft",
|
||||
"GOOGLE": "Google",
|
||||
"OTHER_PROVIDERS": "Other Providers"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -541,7 +541,8 @@ export default {
|
||||
this.isALineChannel ||
|
||||
this.isAPIInbox ||
|
||||
(this.isAnEmailChannel && !this.inbox.provider) ||
|
||||
(this.isAnEmailChannel && this.inbox.provider === 'microsoft') ||
|
||||
this.isAMicrosoftInbox ||
|
||||
this.isAGoogleInbox ||
|
||||
this.isAWhatsAppChannel ||
|
||||
this.isAWebWidgetInbox
|
||||
) {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
:header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
|
||||
:header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
|
||||
/>
|
||||
<div class="grid grid-cols-4 max-w-3xl mx-0 mt-6">
|
||||
<div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
|
||||
<channel-selector
|
||||
v-for="emailProvider in emailProviderList"
|
||||
:key="emailProvider.key"
|
||||
@@ -20,58 +20,59 @@
|
||||
</div>
|
||||
</div>
|
||||
<microsoft v-else-if="provider === 'microsoft'" />
|
||||
<google v-else-if="provider === 'google'" />
|
||||
<forward-to-option v-else-if="provider === 'other_provider'" />
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import ForwardToOption from './emailChannels/ForwardToOption.vue';
|
||||
import Microsoft from './emailChannels/Microsoft.vue';
|
||||
import { mapGetters } from 'vuex';
|
||||
import Google from './emailChannels/Google.vue';
|
||||
import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
|
||||
import PageHeader from '../../SettingsSubPageHeader.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChannelSelector,
|
||||
ForwardToOption,
|
||||
Microsoft,
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return { provider: '' };
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
globalConfig: 'globalConfig/get',
|
||||
isAChatwootInstance: 'globalConfig/isAChatwootInstance',
|
||||
}),
|
||||
emailProviderList() {
|
||||
return [
|
||||
{
|
||||
title: this.$t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'),
|
||||
isEnabled: !!this.globalConfig.azureAppId,
|
||||
key: 'microsoft',
|
||||
src: '/assets/images/dashboard/channels/microsoft.png',
|
||||
},
|
||||
{
|
||||
title: this.$t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS'),
|
||||
isEnabled: true,
|
||||
key: 'other_provider',
|
||||
src: '/assets/images/dashboard/channels/email.png',
|
||||
},
|
||||
].filter(provider => {
|
||||
if (this.isAChatwootInstance) {
|
||||
return true;
|
||||
}
|
||||
return provider.isEnabled;
|
||||
});
|
||||
import { useStoreGetters } from 'dashboard/composables/store';
|
||||
import { useI18n } from 'dashboard/composables/useI18n';
|
||||
|
||||
const provider = ref('');
|
||||
|
||||
const getters = useStoreGetters();
|
||||
const { t } = useI18n();
|
||||
|
||||
const globalConfig = getters['globalConfig/get'];
|
||||
const isAChatwootInstance = getters['globalConfig/isAChatwootInstance'];
|
||||
|
||||
const emailProviderList = computed(() => {
|
||||
return [
|
||||
{
|
||||
title: t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'),
|
||||
isEnabled: !!globalConfig.value.azureAppId,
|
||||
key: 'microsoft',
|
||||
src: '/assets/images/dashboard/channels/microsoft.png',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick(emailProvider) {
|
||||
if (emailProvider.isEnabled) {
|
||||
this.provider = emailProvider.key;
|
||||
}
|
||||
{
|
||||
title: t('INBOX_MGMT.EMAIL_PROVIDERS.GOOGLE'),
|
||||
isEnabled: !!window.chatwootConfig.googleOAuthClientId,
|
||||
key: 'google',
|
||||
src: '/assets/images/dashboard/channels/google.png',
|
||||
},
|
||||
},
|
||||
};
|
||||
{
|
||||
title: t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS'),
|
||||
isEnabled: true,
|
||||
key: 'other_provider',
|
||||
src: '/assets/images/dashboard/channels/email.png',
|
||||
},
|
||||
].filter(providerConfig => {
|
||||
if (isAChatwootInstance.value) {
|
||||
return true;
|
||||
}
|
||||
return providerConfig.isEnabled;
|
||||
});
|
||||
});
|
||||
|
||||
function onClick(emailProvider) {
|
||||
if (emailProvider.isEnabled) {
|
||||
this.provider = emailProvider.key;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
import OAuthChannel from './OAuthChannel.vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
defineComponent({
|
||||
name: 'GoogleOAuthChannel',
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<OAuthChannel
|
||||
provider="google"
|
||||
:title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
|
||||
:description="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
|
||||
:input-placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
|
||||
:submit-button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
|
||||
:error-message="$t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE')"
|
||||
/>
|
||||
</template>
|
||||
+16
-68
@@ -1,71 +1,19 @@
|
||||
<template>
|
||||
<div
|
||||
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
|
||||
>
|
||||
<settings-sub-page-header
|
||||
:header-title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
|
||||
:header-content="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
|
||||
/>
|
||||
<form
|
||||
class="microsoft--sign-in-form"
|
||||
@submit.prevent="requestAuthorization"
|
||||
>
|
||||
<woot-input
|
||||
v-model.trim="email"
|
||||
type="text"
|
||||
:placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
|
||||
@blur="$v.email.$touch"
|
||||
/>
|
||||
<woot-submit-button
|
||||
icon="brand-twitter"
|
||||
type="submit"
|
||||
:button-text="$t('INBOX_MGMT.ADD.MICROSOFT.SIGN_IN')"
|
||||
:loading="isRequestingAuthorization"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import microsoftClient from 'dashboard/api/channel/microsoftClient';
|
||||
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
|
||||
import { required, email } from 'vuelidate/lib/validators';
|
||||
<script setup>
|
||||
import OAuthChannel from './OAuthChannel.vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default {
|
||||
components: { SettingsSubPageHeader },
|
||||
mixins: [alertMixin],
|
||||
data() {
|
||||
return { email: '', isRequestingAuthorization: false };
|
||||
},
|
||||
validations: {
|
||||
email: { required, email },
|
||||
},
|
||||
methods: {
|
||||
async requestAuthorization() {
|
||||
try {
|
||||
this.$v.$touch();
|
||||
if (this.$v.$invalid) return;
|
||||
|
||||
this.isRequestingAuthorization = true;
|
||||
const response = await microsoftClient.generateAuthorization({
|
||||
email: this.email,
|
||||
});
|
||||
const {
|
||||
data: { url },
|
||||
} = response;
|
||||
window.location.href = url;
|
||||
} catch (error) {
|
||||
this.showAlert(this.$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE'));
|
||||
} finally {
|
||||
this.isRequestingAuthorization = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
defineComponent({
|
||||
name: 'MicrosoftOAuthChannel',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.microsoft--sign-in-form {
|
||||
@apply mt-6;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<OAuthChannel
|
||||
provider="microsoft"
|
||||
:title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
|
||||
:description="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
|
||||
:input-placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
|
||||
:submit-button-text="$t('INBOX_MGMT.ADD.MICROSOFT.SIGN_IN')"
|
||||
:error-message="$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
import microsoftClient from 'dashboard/api/channel/microsoftClient';
|
||||
import googleClient from 'dashboard/api/channel/googleClient';
|
||||
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
|
||||
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: String,
|
||||
required: true,
|
||||
validate: value => ['microsoft', 'google'].includes(value),
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
submitButtonText: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
errorMessage: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
inputPlaceholder: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const isRequestingAuthorization = ref(false);
|
||||
const email = ref('');
|
||||
|
||||
const client = computed(() => {
|
||||
if (props.provider === 'microsoft') {
|
||||
return microsoftClient;
|
||||
}
|
||||
|
||||
return googleClient;
|
||||
});
|
||||
|
||||
async function requestAuthorization() {
|
||||
try {
|
||||
isRequestingAuthorization.value = true;
|
||||
const response = await client.value.generateAuthorization({
|
||||
email: email.value,
|
||||
});
|
||||
const {
|
||||
data: { url },
|
||||
} = response;
|
||||
|
||||
window.location.href = url;
|
||||
} catch (error) {
|
||||
useAlert(props.errorMessage);
|
||||
} finally {
|
||||
isRequestingAuthorization.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
|
||||
>
|
||||
<settings-sub-page-header
|
||||
:header-title="title"
|
||||
:header-content="description"
|
||||
/>
|
||||
<form class="mt-6" @submit.prevent="requestAuthorization">
|
||||
<woot-input
|
||||
v-model="email"
|
||||
type="email"
|
||||
:placeholder="inputPlaceholder"
|
||||
/>
|
||||
<woot-submit-button
|
||||
icon="brand-twitter"
|
||||
type="submit"
|
||||
:button-text="submitButtonText"
|
||||
:loading="isRequestingAuthorization"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,24 +1,30 @@
|
||||
<script setup>
|
||||
import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
const toggleSupportWidgetVisibility = () => {
|
||||
if (window.$chatwoot) {
|
||||
window.$chatwoot.toggleBubbleVisibility('show');
|
||||
}
|
||||
};
|
||||
|
||||
const setupListenerForWidgetEvent = () => {
|
||||
window.addEventListener('chatwoot:on-message', () => {
|
||||
toggleSupportWidgetVisibility();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
toggleSupportWidgetVisibility();
|
||||
setupListenerForWidgetEvent();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="suspended-page">
|
||||
<div class="items-center bg-slate-50 flex justify-center h-full w-full">
|
||||
<empty-state
|
||||
:title="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.TITLE')"
|
||||
:message="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.MESSAGE')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
|
||||
export default {
|
||||
components: { EmptyState },
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.suspended-page {
|
||||
align-items: center;
|
||||
background: var(--s-50);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -62,6 +62,7 @@ const runSDK = ({ baseUrl, websiteToken }) => {
|
||||
type: getBubbleView(chatwootSettings.type),
|
||||
launcherTitle: chatwootSettings.launcherTitle || '',
|
||||
showPopoutButton: chatwootSettings.showPopoutButton || false,
|
||||
showUnreadMessagesDialog: chatwootSettings.showUnreadMessagesDialog ?? true,
|
||||
widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard',
|
||||
resetTriggered: false,
|
||||
darkMode: getDarkMode(chatwootSettings.darkMode),
|
||||
|
||||
@@ -160,6 +160,7 @@ export const IFrameHelper = {
|
||||
showPopoutButton: window.$chatwoot.showPopoutButton,
|
||||
widgetStyle: window.$chatwoot.widgetStyle,
|
||||
darkMode: window.$chatwoot.darkMode,
|
||||
showUnreadMessagesDialog: window.$chatwoot.showUnreadMessagesDialog,
|
||||
campaignsSnoozedTill,
|
||||
});
|
||||
IFrameHelper.onLoad({
|
||||
|
||||
@@ -47,6 +47,9 @@ export default {
|
||||
isAMicrosoftInbox() {
|
||||
return this.isAnEmailChannel && this.inbox.provider === 'microsoft';
|
||||
},
|
||||
isAGoogleInbox() {
|
||||
return this.isAnEmailChannel && this.inbox.provider === 'google';
|
||||
},
|
||||
isAPIInbox() {
|
||||
return this.channelType === INBOX_TYPES.API;
|
||||
},
|
||||
|
||||
@@ -6,12 +6,16 @@ import { validateRouteAccess } from '../helpers/RouteHelper';
|
||||
|
||||
export const router = new VueRouter({ mode: 'history', routes });
|
||||
|
||||
const sensitiveRouteNames = ['auth_password_edit'];
|
||||
|
||||
export const initalizeRouter = () => {
|
||||
router.beforeEach((to, _, next) => {
|
||||
AnalyticsHelper.page(to.name || '', {
|
||||
path: to.path,
|
||||
name: to.name,
|
||||
});
|
||||
if (!sensitiveRouteNames.includes(to.name)) {
|
||||
AnalyticsHelper.page(to.name || '', {
|
||||
path: to.path,
|
||||
name: to.name,
|
||||
});
|
||||
}
|
||||
|
||||
return validateRouteAccess(to, next, window.chatwootConfig);
|
||||
});
|
||||
|
||||
@@ -71,6 +71,7 @@ export default {
|
||||
messageCount: 'conversation/getMessageCount',
|
||||
unreadMessageCount: 'conversation/getUnreadMessageCount',
|
||||
isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
|
||||
showUnreadMessagesDialog: 'appConfig/getShowUnreadMessagesDialog',
|
||||
}),
|
||||
isIFrame() {
|
||||
return IFrameHelper.isIFrame();
|
||||
@@ -209,8 +210,13 @@ export default {
|
||||
},
|
||||
setUnreadView() {
|
||||
const { unreadMessageCount } = this;
|
||||
|
||||
if (this.isIFrame && unreadMessageCount > 0 && !this.isWidgetOpen) {
|
||||
if (!this.showUnreadMessagesDialog) {
|
||||
this.handleUnreadNotificationDot();
|
||||
} else if (
|
||||
this.isIFrame &&
|
||||
unreadMessageCount > 0 &&
|
||||
!this.isWidgetOpen
|
||||
) {
|
||||
this.replaceRoute('unread-messages').then(() => {
|
||||
this.setIframeHeight(true);
|
||||
IFrameHelper.sendMessage({ event: 'setUnreadMode' });
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
/>
|
||||
<div
|
||||
v-if="hasAttachments"
|
||||
class="chat-bubble has-attachment agent"
|
||||
class="chat-bubble has-attachment space-y-2 agent"
|
||||
:class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
|
||||
>
|
||||
<div
|
||||
@@ -44,6 +44,14 @@
|
||||
:readable-time="readableTime"
|
||||
@error="onImageLoadError"
|
||||
/>
|
||||
|
||||
<video-bubble
|
||||
v-if="attachment.file_type === 'video' && !hasVideoError"
|
||||
:url="attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onVideoLoadError"
|
||||
/>
|
||||
|
||||
<audio v-else-if="attachment.file_type === 'audio'" controls>
|
||||
<source :src="attachment.data_url" />
|
||||
</audio>
|
||||
@@ -84,6 +92,7 @@ import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
|
||||
import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
|
||||
import timeMixin from 'dashboard/mixins/time';
|
||||
import ImageBubble from 'widget/components/ImageBubble.vue';
|
||||
import VideoBubble from 'widget/components/VideoBubble.vue';
|
||||
import FileBubble from 'widget/components/FileBubble.vue';
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import { MESSAGE_TYPE } from 'widget/helpers/constants';
|
||||
@@ -100,6 +109,7 @@ export default {
|
||||
components: {
|
||||
AgentMessageBubble,
|
||||
ImageBubble,
|
||||
VideoBubble,
|
||||
Thumbnail,
|
||||
UserMessage,
|
||||
FileBubble,
|
||||
@@ -120,6 +130,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
hasImageError: false,
|
||||
hasVideoError: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -215,15 +226,20 @@ export default {
|
||||
watch: {
|
||||
message() {
|
||||
this.hasImageError = false;
|
||||
this.hasVideoError = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.hasImageError = false;
|
||||
this.hasVideoError = false;
|
||||
},
|
||||
methods: {
|
||||
onImageLoadError() {
|
||||
this.hasImageError = true;
|
||||
},
|
||||
onVideoLoadError() {
|
||||
this.hasVideoError = true;
|
||||
},
|
||||
toggleReply() {
|
||||
emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
|
||||
},
|
||||
|
||||
@@ -39,6 +39,14 @@
|
||||
:readable-time="readableTime"
|
||||
@error="onImageLoadError"
|
||||
/>
|
||||
|
||||
<video-bubble
|
||||
v-if="attachment.file_type === 'video' && !hasVideoError"
|
||||
:url="attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onVideoLoadError"
|
||||
/>
|
||||
|
||||
<file-bubble
|
||||
v-else
|
||||
:url="attachment.data_url"
|
||||
@@ -72,6 +80,7 @@
|
||||
import UserMessageBubble from 'widget/components/UserMessageBubble.vue';
|
||||
import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
|
||||
import ImageBubble from 'widget/components/ImageBubble.vue';
|
||||
import VideoBubble from 'widget/components/VideoBubble.vue';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
import FileBubble from 'widget/components/FileBubble.vue';
|
||||
import timeMixin from 'dashboard/mixins/time';
|
||||
@@ -88,6 +97,7 @@ export default {
|
||||
UserMessageBubble,
|
||||
MessageReplyButton,
|
||||
ImageBubble,
|
||||
VideoBubble,
|
||||
FileBubble,
|
||||
FluentIcon,
|
||||
ReplyToChip,
|
||||
@@ -107,6 +117,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
hasImageError: false,
|
||||
hasVideoError: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -143,10 +154,12 @@ export default {
|
||||
watch: {
|
||||
message() {
|
||||
this.hasImageError = false;
|
||||
this.hasVideoError = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.hasImageError = false;
|
||||
this.hasVideoError = false;
|
||||
},
|
||||
methods: {
|
||||
async retrySendMessage() {
|
||||
@@ -158,6 +171,9 @@ export default {
|
||||
onImageLoadError() {
|
||||
this.hasImageError = true;
|
||||
},
|
||||
onVideoLoadError() {
|
||||
this.hasVideoError = true;
|
||||
},
|
||||
toggleReply() {
|
||||
this.$emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
|
||||
},
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
url: { type: String, default: '' },
|
||||
readableTime: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const emits = defineEmits(['error']);
|
||||
|
||||
const onVideoError = () => {
|
||||
emits('error');
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="block relative max-w-full">
|
||||
<video
|
||||
class="w-full max-w-[250px] h-auto"
|
||||
:src="url"
|
||||
controls
|
||||
@error="onVideoError"
|
||||
/>
|
||||
<span
|
||||
class="text-xs absolute text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
|
||||
>
|
||||
{{ readableTime }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
const state = {
|
||||
hideMessageBubble: false,
|
||||
isCampaignViewClicked: false,
|
||||
showUnreadMessagesDialog: true,
|
||||
isWebWidgetTriggered: false,
|
||||
isWidgetOpen: false,
|
||||
position: 'right',
|
||||
@@ -29,6 +30,7 @@ export const getters = {
|
||||
getReferrerHost: $state => $state.referrerHost,
|
||||
isWidgetStyleFlat: $state => $state.widgetStyle === 'flat',
|
||||
darkMode: $state => $state.darkMode,
|
||||
getShowUnreadMessagesDialog: $state => $state.showUnreadMessagesDialog,
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
@@ -38,6 +40,7 @@ export const actions = {
|
||||
showPopoutButton,
|
||||
position,
|
||||
hideMessageBubble,
|
||||
showUnreadMessagesDialog,
|
||||
widgetStyle = 'rounded',
|
||||
darkMode = 'light',
|
||||
}
|
||||
@@ -46,6 +49,7 @@ export const actions = {
|
||||
hideMessageBubble: !!hideMessageBubble,
|
||||
position: position || 'right',
|
||||
showPopoutButton: !!showPopoutButton,
|
||||
showUnreadMessagesDialog: !!showUnreadMessagesDialog,
|
||||
widgetStyle,
|
||||
darkMode,
|
||||
});
|
||||
@@ -75,6 +79,7 @@ export const mutations = {
|
||||
$state.widgetStyle = data.widgetStyle;
|
||||
$state.darkMode = data.darkMode;
|
||||
$state.locale = data.locale || $state.locale;
|
||||
$state.showUnreadMessagesDialog = data.showUnreadMessagesDialog;
|
||||
},
|
||||
[TOGGLE_WIDGET_OPEN]($state, isWidgetOpen) {
|
||||
$state.isWidgetOpen = isWidgetOpen;
|
||||
|
||||
@@ -13,4 +13,10 @@ describe('#getters', () => {
|
||||
expect(getters.getReferrerHost(state)).toEqual('www.chatwoot.com');
|
||||
});
|
||||
});
|
||||
describe('#getShowUnreadMessagesDialog', () => {
|
||||
it('returns correct value', () => {
|
||||
const state = { showUnreadMessagesDialog: true };
|
||||
expect(getters.getShowUnreadMessagesDialog(state)).toEqual(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user