5f2b2f4221
## Summary - add an assignee_agent_bot_id column as an initital step to prototype this before fully switching to polymorphic assignee - update assignment APIs and conversation list / show endpoints to reflect assignee as agent bot - ensure webhook payloads contains agent bot assignee [Codex Task](https://chatgpt.com/codex/tasks/task_e_6912833377e48326b6641b9eee32d50f) --------- Co-authored-by: Pranav <pranav@chatwoot.com>
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 : null;
|
|
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>
|