mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-03 20:48:07 +00:00
130 lines
3.3 KiB
Vue
130 lines
3.3 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
import { useMapGetter } from 'dashboard/composables/store';
|
|
import { useAlert } from 'dashboard/composables';
|
|
import { useI18n } from 'vue-i18n';
|
|
import wootConstants from 'dashboard/constants/globals';
|
|
|
|
import Banner from 'dashboard/components/ui/Banner.vue';
|
|
|
|
const props = defineProps({
|
|
message: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
isOnPrivateNote: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const store = useStore();
|
|
const { t } = useI18n();
|
|
|
|
const currentChat = useMapGetter('getSelectedChat');
|
|
const currentUser = useMapGetter('getCurrentUser');
|
|
|
|
const assignedAgent = computed({
|
|
get() {
|
|
return currentChat.value?.meta?.assignee;
|
|
},
|
|
set(agent) {
|
|
const agentId = agent ? agent.id : 0;
|
|
store.dispatch('setCurrentChatAssignee', agent);
|
|
store.dispatch('assignAgent', {
|
|
conversationId: currentChat.value?.id,
|
|
agentId,
|
|
});
|
|
},
|
|
});
|
|
|
|
const isUserTyping = computed(
|
|
() => props.message !== '' && !props.isOnPrivateNote
|
|
);
|
|
const isUnassigned = computed(() => !assignedAgent.value);
|
|
const isAssignedToOtherAgent = computed(
|
|
() => assignedAgent.value?.id !== currentUser.value?.id
|
|
);
|
|
|
|
const showSelfAssignBanner = computed(() => {
|
|
return (
|
|
isUserTyping.value && (isUnassigned.value || isAssignedToOtherAgent.value)
|
|
);
|
|
});
|
|
|
|
const showBotHandoffBanner = computed(
|
|
() =>
|
|
isUserTyping.value &&
|
|
currentChat.value?.status === wootConstants.STATUS_TYPE.PENDING
|
|
);
|
|
|
|
const botHandoffActionLabel = computed(() => {
|
|
return assignedAgent.value?.id === currentUser.value?.id
|
|
? t('CONVERSATION.BOT_HANDOFF_REOPEN_ACTION')
|
|
: t('CONVERSATION.BOT_HANDOFF_ACTION');
|
|
});
|
|
|
|
const selfAssignConversation = async () => {
|
|
const { avatar_url, ...rest } = currentUser.value || {};
|
|
assignedAgent.value = { ...rest, thumbnail: avatar_url };
|
|
};
|
|
|
|
const needsAssignmentToCurrentUser = computed(() => {
|
|
return isUnassigned.value || isAssignedToOtherAgent.value;
|
|
});
|
|
|
|
const onClickSelfAssign = async () => {
|
|
try {
|
|
await selfAssignConversation();
|
|
useAlert(t('CONVERSATION.CHANGE_AGENT'));
|
|
} catch (error) {
|
|
useAlert(t('CONVERSATION.CHANGE_AGENT_FAILED'));
|
|
}
|
|
};
|
|
|
|
const reopenConversation = async () => {
|
|
await store.dispatch('toggleStatus', {
|
|
conversationId: currentChat.value?.id,
|
|
status: wootConstants.STATUS_TYPE.OPEN,
|
|
});
|
|
};
|
|
|
|
const onClickBotHandoff = async () => {
|
|
try {
|
|
await reopenConversation();
|
|
|
|
if (needsAssignmentToCurrentUser.value) {
|
|
await selfAssignConversation();
|
|
}
|
|
|
|
useAlert(t('CONVERSATION.BOT_HANDOFF_SUCCESS'));
|
|
} catch (error) {
|
|
useAlert(t('CONVERSATION.BOT_HANDOFF_ERROR'));
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Banner
|
|
v-if="showSelfAssignBanner && !showBotHandoffBanner"
|
|
action-button-variant="ghost"
|
|
color-scheme="secondary"
|
|
class="mx-2 mb-2 rounded-lg !py-2"
|
|
:banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
|
|
has-action-button
|
|
:action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
|
|
@primary-action="onClickSelfAssign"
|
|
/>
|
|
<Banner
|
|
v-if="showBotHandoffBanner"
|
|
action-button-variant="ghost"
|
|
color-scheme="secondary"
|
|
class="mx-2 mb-2 rounded-lg !py-2"
|
|
:banner-message="$t('CONVERSATION.BOT_HANDOFF_MESSAGE')"
|
|
has-action-button
|
|
:action-button-label="botHandoffActionLabel"
|
|
@primary-action="onClickBotHandoff"
|
|
/>
|
|
</template>
|