feat: Shows error message with retry for widget messages (#3594)
- Adds error message retry option for widget bubbles - Adds a fallback for widget images with file type bubble
This commit is contained in:
Nithin David Thomas
GitHub
parent
0130e08016
commit
307118b235
9 changed files with 168 additions and 34 deletions
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"arrow-clockwise-outline": "M12 4.75a7.25 7.25 0 1 0 7.201 6.406c-.068-.588.358-1.156.95-1.156.515 0 .968.358 1.03.87a9.25 9.25 0 1 1-3.432-6.116V4.25a1 1 0 1 1 2.001 0v2.698l.034.052h-.034v.25a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h.666A7.219 7.219 0 0 0 12 4.75Z",
|
||||
"arrow-right-outline": "M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z",
|
||||
"attach-outline": "M11.772 3.743a6 6 0 0 1 8.66 8.302l-.19.197-8.8 8.798-.036.03a3.723 3.723 0 0 1-5.489-4.973.764.764 0 0 1 .085-.13l.054-.06.086-.088.142-.148.002.003 7.436-7.454a.75.75 0 0 1 .977-.074l.084.073a.75.75 0 0 1 .074.976l-.073.084-7.594 7.613a2.23 2.23 0 0 0 3.174 3.106l8.832-8.83A4.502 4.502 0 0 0 13 4.644l-.168.16-.013.014-9.536 9.536a.75.75 0 0 1-1.133-.977l.072-.084 9.549-9.55h.002Z",
|
||||
"chevron-right-outline": "M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z",
|
||||
|
|
|
|||
|
|
@ -98,9 +98,21 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.in-progress {
|
||||
.in-progress,
|
||||
.is-failed {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.is-failed {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.chat-bubble.user {
|
||||
background: $color-error !important;
|
||||
// TODO: Remove the important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -27,16 +27,14 @@
|
|||
:class="wrapClass"
|
||||
>
|
||||
<div v-for="attachment in message.attachments" :key="attachment.id">
|
||||
<file-bubble
|
||||
v-if="attachment.file_type !== 'image'"
|
||||
:url="attachment.data_url"
|
||||
/>
|
||||
<image-bubble
|
||||
v-else
|
||||
v-if="attachment.file_type === 'image' && !hasImageError"
|
||||
:url="attachment.data_url"
|
||||
:thumb="attachment.thumb_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onImageLoadError"
|
||||
/>
|
||||
<file-bubble v-else :url="attachment.data_url" />
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="message.showAvatar || hasRecordedResponse" class="agent-name">
|
||||
|
|
@ -83,6 +81,11 @@ export default {
|
|||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hasImageError: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
shouldDisplayAgentMessage() {
|
||||
if (
|
||||
|
|
@ -170,5 +173,18 @@ export default {
|
|||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
message() {
|
||||
this.hasImageError = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.hasImageError = false;
|
||||
},
|
||||
methods: {
|
||||
onImageLoadError() {
|
||||
this.hasImageError = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,12 @@
|
|||
class="image"
|
||||
>
|
||||
<div class="wrap">
|
||||
<img :src="thumb" alt="Picture message" />
|
||||
<img
|
||||
:src="thumb"
|
||||
alt="Picture message"
|
||||
@click="onClick"
|
||||
@error="onImgError"
|
||||
/>
|
||||
<span class="time">{{ readableTime }}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -15,6 +20,11 @@
|
|||
<script>
|
||||
export default {
|
||||
props: ['url', 'thumb', 'readableTime'],
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.$emit('error');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<div class="user-message-wrap">
|
||||
<div class="user-message">
|
||||
<div class="message-wrap" :class="{ 'in-progress': isInProgress }">
|
||||
<div
|
||||
class="message-wrap"
|
||||
:class="{ 'in-progress': isInProgress, 'is-failed': isFailed }"
|
||||
>
|
||||
<user-message-bubble
|
||||
v-if="showTextBubble"
|
||||
:message="message.content"
|
||||
|
|
@ -14,19 +17,33 @@
|
|||
:style="{ backgroundColor: widgetColor }"
|
||||
>
|
||||
<div v-for="attachment in message.attachments" :key="attachment.id">
|
||||
<file-bubble
|
||||
v-if="attachment.file_type !== 'image'"
|
||||
:url="attachment.data_url"
|
||||
:is-in-progress="isInProgress"
|
||||
/>
|
||||
<image-bubble
|
||||
v-else
|
||||
v-if="attachment.file_type === 'image' && !hasImageError"
|
||||
:url="attachment.data_url"
|
||||
:thumb="attachment.thumb_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onImageLoadError"
|
||||
/>
|
||||
<file-bubble
|
||||
v-else
|
||||
:url="attachment.data_url"
|
||||
:is-in-progress="isInProgress"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="isFailed"
|
||||
class="flex justify-end align-middle px-4 py-2 text-red-700"
|
||||
>
|
||||
<button
|
||||
v-if="!hasAttachments"
|
||||
:title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
|
||||
class="inline-flex justify-center items-center ml-2"
|
||||
@click="retrySendMessage"
|
||||
>
|
||||
<fluent-icon icon="arrow-clockwise" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,6 +52,7 @@
|
|||
<script>
|
||||
import UserMessageBubble from 'widget/components/UserMessageBubble';
|
||||
import ImageBubble from 'widget/components/ImageBubble';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index';
|
||||
import FileBubble from 'widget/components/FileBubble';
|
||||
import timeMixin from 'dashboard/mixins/time';
|
||||
import messageMixin from '../mixins/messageMixin';
|
||||
|
|
@ -46,6 +64,7 @@ export default {
|
|||
UserMessageBubble,
|
||||
ImageBubble,
|
||||
FileBubble,
|
||||
FluentIcon,
|
||||
},
|
||||
mixins: [timeMixin, messageMixin],
|
||||
props: {
|
||||
|
|
@ -54,6 +73,11 @@ export default {
|
|||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hasImageError: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
widgetColor: 'appConfig/getWidgetColor',
|
||||
|
|
@ -71,6 +95,35 @@ export default {
|
|||
const { created_at: createdAt = '' } = this.message;
|
||||
return this.messageStamp(createdAt);
|
||||
},
|
||||
isFailed() {
|
||||
const { status = '' } = this.message;
|
||||
return status === 'failed';
|
||||
},
|
||||
errorMessage() {
|
||||
const { meta } = this.message;
|
||||
return meta
|
||||
? meta.error
|
||||
: this.$t('COMPONENTS.MESSAGE_BUBBLE.ERROR_MESSAGE');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
message() {
|
||||
this.hasImageError = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.hasImageError = false;
|
||||
},
|
||||
methods: {
|
||||
async retrySendMessage() {
|
||||
await this.$store.dispatch(
|
||||
'conversation/sendMessageWithData',
|
||||
this.message
|
||||
);
|
||||
},
|
||||
onImageLoadError() {
|
||||
this.hasImageError = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@
|
|||
},
|
||||
"FORM_BUBBLE": {
|
||||
"SUBMIT": "Submit"
|
||||
},
|
||||
"MESSAGE_BUBBLE": {
|
||||
"RETRY": "Send message again",
|
||||
"ERROR_MESSAGE": "Couldn't send, try again"
|
||||
}
|
||||
},
|
||||
"TEAM_AVAILABILITY": {
|
||||
|
|
|
|||
|
|
@ -24,15 +24,35 @@ export const actions = {
|
|||
commit('setConversationUIFlag', { isCreating: false });
|
||||
}
|
||||
},
|
||||
sendMessage: async ({ commit }, params) => {
|
||||
sendMessage: async ({ dispatch }, params) => {
|
||||
const { content } = params;
|
||||
commit('pushMessageToConversation', createTemporaryMessage({ content }));
|
||||
await sendMessageAPI(content);
|
||||
const message = createTemporaryMessage({ content });
|
||||
|
||||
dispatch('sendMessageWithData', message);
|
||||
},
|
||||
sendMessageWithData: async ({ commit }, message) => {
|
||||
const { id, content, meta = {} } = message;
|
||||
|
||||
commit('pushMessageToConversation', message);
|
||||
commit('updateMessageMeta', { id, meta: { ...meta, error: '' } });
|
||||
try {
|
||||
const { data } = await sendMessageAPI(content);
|
||||
|
||||
commit('deleteMessage', message.id);
|
||||
commit('pushMessageToConversation', { ...data, status: 'sent' });
|
||||
} catch (error) {
|
||||
commit('pushMessageToConversation', { ...message, status: 'failed' });
|
||||
commit('updateMessageMeta', {
|
||||
id,
|
||||
meta: { ...meta, error: '' },
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
sendAttachment: async ({ commit }, params) => {
|
||||
const {
|
||||
attachment: { thumbUrl, fileType },
|
||||
meta = {},
|
||||
} = params;
|
||||
const attachment = {
|
||||
thumb_url: thumbUrl,
|
||||
|
|
@ -50,7 +70,13 @@ export const actions = {
|
|||
message: data,
|
||||
tempId: tempMessage.id,
|
||||
});
|
||||
commit('pushMessageToConversation', { ...data, status: 'sent' });
|
||||
} catch (error) {
|
||||
commit('pushMessageToConversation', { ...tempMessage, status: 'failed' });
|
||||
commit('updateMessageMeta', {
|
||||
id: tempMessage.id,
|
||||
meta: { ...meta, error: '' },
|
||||
});
|
||||
// Show error
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -72,6 +72,16 @@ export const mutations = {
|
|||
};
|
||||
},
|
||||
|
||||
updateMessageMeta($state, { id, meta }) {
|
||||
const message = $state.conversations[id];
|
||||
if (!message) return;
|
||||
|
||||
const newMeta = message.meta ? { ...message.meta, ...meta } : { ...meta };
|
||||
Vue.set(message, 'meta', {
|
||||
...newMeta,
|
||||
});
|
||||
},
|
||||
|
||||
deleteMessage($state, id) {
|
||||
const messagesInbox = $state.conversations;
|
||||
Vue.delete(messagesInbox, id);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ jest.mock('../../../../helpers/uuid');
|
|||
jest.mock('widget/helpers/axios');
|
||||
|
||||
const commit = jest.fn();
|
||||
const dispatch = jest.fn();
|
||||
|
||||
describe('#actions', () => {
|
||||
describe('#createConversation', () => {
|
||||
|
|
@ -92,7 +93,7 @@ describe('#actions', () => {
|
|||
});
|
||||
|
||||
describe('#sendMessage', () => {
|
||||
it('sends correct mutations', () => {
|
||||
it('sends correct mutations', async () => {
|
||||
const mockDate = new Date(1466424490000);
|
||||
getUuid.mockImplementationOnce(() => '1111');
|
||||
const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
|
||||
|
|
@ -109,15 +110,16 @@ describe('#actions', () => {
|
|||
search: '?param=1',
|
||||
},
|
||||
}));
|
||||
actions.sendMessage({ commit }, { content: 'hello' });
|
||||
await actions.sendMessage({ commit, dispatch }, { content: 'hello' });
|
||||
spy.mockRestore();
|
||||
windowSpy.mockRestore();
|
||||
expect(commit).toBeCalledWith('pushMessageToConversation', {
|
||||
id: '1111',
|
||||
expect(dispatch).toBeCalledWith('sendMessageWithData', {
|
||||
attachments: undefined,
|
||||
content: 'hello',
|
||||
status: 'in_progress',
|
||||
created_at: 1466424490,
|
||||
id: '1111',
|
||||
message_type: 0,
|
||||
status: 'in_progress',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -130,7 +132,7 @@ describe('#actions', () => {
|
|||
const thumbUrl = '';
|
||||
const attachment = { thumbUrl, fileType: 'file' };
|
||||
|
||||
actions.sendAttachment({ commit }, { attachment });
|
||||
actions.sendAttachment({ commit, dispatch }, { attachment });
|
||||
spy.mockRestore();
|
||||
expect(commit).toBeCalledWith('pushMessageToConversation', {
|
||||
id: '1111',
|
||||
|
|
|
|||
Loading…
Reference in a new issue