Skip to content
Permalink
Browse files

feat(chat): Add support for delivery failure and unsupported type mes…

…sages (#3047)
  • Loading branch information...
Ayesha Mazumdar
Ayesha Mazumdar committed Jan 31, 2018
1 parent 97d13bb commit 14aa268cc06b72a25503c8e9e91d5e9281d8c5fd
Showing with 920 additions and 98 deletions.
  1. +4 −4 test/__tests__/__snapshots__/Chat_Consecutive_Inbound_message.json
  2. +5 −5 test/__tests__/__snapshots__/Chat_Inbound_message.json
  3. +235 −0 test/__tests__/__snapshots__/Chat_Inbound_message_unsupported_type.json
  4. +4 −4 test/__tests__/__snapshots__/Chat_Inbound_message_with_avatar.json
  5. +1 −1 test/__tests__/__snapshots__/Chat_Outbound_message_another_agent.json
  6. +1 −1 test/__tests__/__snapshots__/Chat_Outbound_message_current_agent.json
  7. +296 −0 test/__tests__/__snapshots__/Chat_Outbound_message_with_delivery_failure.json
  8. +1 −1 test/__tests__/__snapshots__/Chat_consecutive_outbound_messages.json
  9. +1 −1 test/__tests__/__snapshots__/Chat_event_with_agent_message.json
  10. +5 −5 test/__tests__/__snapshots__/Chat_full_list.json
  11. +5 −5 test/__tests__/__snapshots__/Chat_list.json
  12. +14 −14 test/__tests__/__snapshots__/Chat_past_chat.json
  13. +15 −0 ...ts__/Chat_message_body_renders_an_inbound_chat_message_body_with_an_unsupported_message_type.json
  14. +22 −0 ..._snapshots__/Chat_message_body_renders_an_outbound_chat_message_body_with_a_delivery_failure.json
  15. +8 −0 ...onents/chat/__tests__/__snapshots__/Chat_message_renders_a_chat_message_with_a_role_of_alert.json
  16. +23 −0 ui/components/chat/__tests__/index.spec.js
  17. +73 −3 ui/components/chat/base/_index.scss
  18. +63 −19 ui/components/chat/base/example.jsx
  19. +80 −22 ui/components/chat/docs.mdx
  20. +50 −2 ui/components/chat/index.jsx
  21. +11 −11 ui/components/chat/past/example.jsx
  22. +3 −0 ui/components/chat/tokens/background-color.yml

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,8 @@
{
"snapshot": {
"html": "<div class=\"slds-chat-message\" role=\"alert\"></div>",
"style": [
"animation-delay: 0s; animation-direction: normal; animation-duration: 0s; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation-play-state: running; animation-timing-function: ease; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border-bottom-color: rgb(62, 62, 60); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom-style: none; border-bottom-width: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(62, 62, 60); border-left-style: none; border-left-width: 0px; border-right-color: rgb(62, 62, 60); border-right-style: none; border-right-width: 0px; border-top-color: rgb(62, 62, 60); border-top-left-radius: 0px; border-top-right-radius: 0px; border-top-style: none; border-top-width: 0px; bottom: auto; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(62, 62, 60); content: ; cursor: auto; direction: ltr; display: flex; empty-cells: show; float: none; font-family: \"Salesforce Sans\", Arial, sans-serif; font-kerning: auto; font-size: 13px; font-stretch: 100%; font-style: normal; font-variant: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: 400; height: 0px; image-rendering: auto; isolation: auto; justify-items: normal; justify-self: auto; left: auto; letter-spacing: normal; line-height: 19.5px; list-style-image: none; list-style-position: outside; list-style-type: disc; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset-distance: 0px; offset-path: none; offset-rotate: auto 0deg; opacity: 1; orphans: 2; outline-color: rgb(62, 62, 60); outline-offset: 0px; outline-style: none; outline-width: 0px; overflow-anchor: auto; overflow-wrap: normal; overflow-x: visible; overflow-y: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; pointer-events: auto; position: static; resize: none; right: auto; scroll-behavior: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none solid rgb(62, 62, 60); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: rgb(62, 62, 60); text-decoration-skip: objects; text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: 100%; text-overflow: clip; text-transform: none; top: auto; touch-action: auto; transition-delay: 0s; transition-duration: 0s; transition-property: all; transition-timing-function: ease; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 1280px; will-change: auto; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-border-horizontal-spacing: 0px; -webkit-border-image: none; -webkit-border-vertical-spacing: 0px; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; column-count: auto; column-gap: normal; column-rule-color: rgb(62, 62, 60); column-rule-style: none; column-rule-width: 0px; column-span: none; column-width: auto; align-content: normal; align-items: normal; align-self: auto; flex-basis: auto; flex-grow: 0; flex-shrink: 1; flex-direction: row; flex-wrap: nowrap; justify-content: normal; -webkit-font-smoothing: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-column-end: auto; grid-column-start: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; grid-row-end: auto; grid-row-start: auto; grid-column-gap: 0px; grid-row-gap: 0px; -webkit-highlight: none; hyphens: manual; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: auto; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-clip: border-box; -webkit-mask-composite: source-over; -webkit-mask-image: none; -webkit-mask-origin: border-box; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; order: 0; perspective: none; perspective-origin: 640px 0px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(62, 62, 60); -webkit-text-emphasis-position: over; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgb(62, 62, 60); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgb(62, 62, 60); -webkit-text-stroke-width: 0px; transform: none; transform-origin: 640px 0px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: auto; -webkit-writing-mode: horizontal-tb; -webkit-app-region: no-drag; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: sRGB; color-interpolation-filters: linearRGB; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker-end: none; marker-mid: none; marker-start: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: fill stroke markers; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto; caret-color: rgb(62, 62, 60); line-break: auto;"
]
}
}
@@ -196,6 +196,29 @@ describe('Chat message body', () => {
<a href="#">filename_of_attachment.jpg</a>
</ChatMessageBody>
));

it('renders an inbound chat message body with an unsupported message type', () =>
matchesMarkupAndStyle(
<ChatMessageBody
type="unsupported-type"
name="Ayesha Mazumdar"
timeStamp="4:59 PM"
>
Message type is not supported
</ChatMessageBody>
));

it('renders an outbound chat message body with a delivery failure', () =>
matchesMarkupAndStyle(
<ChatMessageBody
type="delivery-failure"
deliveryFailureReason="Message was not delivered because Andy stopped receiving messages."
name="Ayesha Mazumdar"
timeStamp="4:59 PM"
>
It might be the cause of the problem
</ChatMessageBody>
));
});

describe('Chat Icon', () => {
@@ -100,7 +100,7 @@
* @summary Used to style icons with a chat log
*
* @selector .slds-chat-icon
* @restrict .slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container
* @restrict .slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container
*/
.slds-chat-icon {
margin-right: $spacing-x-small;
@@ -110,7 +110,6 @@
}
}


/**
* Chat logs are mainly made up of chat messages between an agent and a customer
*
@@ -192,7 +191,9 @@

.slds-chat-message__text_inbound,
.slds-chat-message__text_outbound,
.slds-chat-message__text_outbound-agent {
.slds-chat-message__text_outbound-agent,
.slds-chat-message__text_unsupported-type,
.slds-chat-message__text_delivery-failure {
border-radius: $border-radius-large $border-radius-large 0;
color: $color-text-inverse;
min-height: 2rem;
@@ -243,6 +244,55 @@
}
}

/**
* @summary Used for an inbound message that is not a supported message type
*
* @selector .slds-chat-message__text_unsupported-type
* @restrict .slds-chat-message__text
* @modifier
*/
.slds-chat-message__text_unsupported-type {
background-color: $chat-message-color-background-status;
border-radius: $border-radius-large $border-radius-large $border-radius-large 0;
border: $color-border-warning $border-width-thin solid;
color: $color-text-default;

.slds-chat-icon.slds-icon-utility-warning {

.slds-icon {
fill: $color-text-warning;
}
}
}

/**
* @summary Used for an inbound message that fails to deliver
*
* @selector .slds-chat-message__text_delivery-failure
* @restrict .slds-chat-message__text
* @modifier
*/
.slds-chat-message__text_delivery-failure {
background-color: $chat-message-color-background-status;
border: $color-border-destructive $border-width-thin solid;
color: $color-text-default;

.slds-chat-message__text_delivery-failure-reason {
display: flex;
padding: $spacing-x-small $spacing-x-small 0;
margin: $spacing-x-small #{-$spacing-x-small} 0;
color: $color-text-error;
border-top: $color-border-destructive $border-width-thin solid;
}

.slds-chat-icon.slds-icon-utility-error {

.slds-icon {
fill: $color-text-error;
}
}
}

/**
* @summary Used when sneak peek is enabled for customer messages
*
@@ -271,6 +321,26 @@
margin: $spacing-xxx-small 0 0 $spacing-x-small;
}

/**
* @summary Used to style chat message resend action
*
* @selector .slds-chat-message__action
* @restrict .slds-chat-message .slds-button
*/
.slds-chat-message__action {
font-size: $font-size-text-x-small;
margin-left: $spacing-x-small;
line-height: $line-height-heading;

.slds-chat-icon.slds-icon-utility-redo {

.slds-icon {
@include square($square-icon-small-content);
fill: $color-text-link;
}
}
}


/**
* During any chat, certain events can occur which need to be displayed to the user
@@ -28,7 +28,7 @@ export default (
name="Taylor Watson-Rice"
timeStamp="4:59 PM"
>
Hi, my Alexa only speaks French
Hi, my CloudWidget only speaks French
</ChatMessageBody>
</ChatMessage>
</ChatListItem>
@@ -51,10 +51,10 @@ export const states = [
name="Taylor Watson-Rice"
timeStamp="4:59 PM"
>
Hi, my Alexa only speaks French and I'm having a lot of trouble.
I've followed this article but it doesn't work{' '}
Hi, my CloudWidget only speaks French and I'm having a lot of
trouble. I've followed this article but it doesn't work{' '}
<a href="javascript:void(0)">
https://www.somehelpsite.com/alexa-speaks-french
https://www.somehelpsite.com/CloudWidget-speaks-french
</a>
</ChatMessageBody>
</ChatMessage>
@@ -89,8 +89,8 @@ export const states = [
<ChatMessage>
<ChatAvatar initials="TW" name="Taylor Watson-Rice" />
<ChatMessageBody isTyping hasSneakPeek type="inbound">
Hi, my Alexa only speaks French and I'm having a lot of trouble
trying to make i
Hi, my CloudWidget only speaks French and I'm having a lot of
trouble trying to make i
</ChatMessageBody>
</ChatMessage>
</ChatListItem>
@@ -140,10 +140,10 @@ export const states = [
name="Amber Cann"
timeStamp="4:59 PM"
>
Hi Taylor, thank you for contacting Amazon Support. Can you
Hi Taylor, thank you for contacting Widget Support. Can you
please tell me what language you are trying to program on your
Amazon Echo?{' '}
<a href="javascript:void(0)">http://www/amazon.com</a>
CloudWidget?{' '}
<a href="javascript:void(0)">http://www/cloud.widget</a>
</ChatMessageBody>
</ChatMessage>
</ChatListItem>
@@ -172,6 +172,50 @@ export const states = [
</Chat>
)
},
{
id: 'inbound-unsupported-type',
label: 'Inbound Unsupported Type',
element: (
<Chat>
<ChatList>
<ChatListItem type="inbound">
<ChatMessage>
<ChatAvatar initials="JD" name="Jason Dewar" />
<ChatMessageBody
type="unsupported-type"
name="Jason Dewar"
timeStamp="4:59 PM"
>
Message type is not supported
</ChatMessageBody>
</ChatMessage>
</ChatListItem>
</ChatList>
</Chat>
)
},
{
id: 'outbound-delivery-failure',
label: 'Outbound Delivery Failure',
element: (
<Chat>
<ChatList>
<ChatListItem type="outbound">
<ChatMessage>
<ChatMessageBody
type="delivery-failure"
deliveryFailureReason="Message was not delivered because Andy stopped receiving messages."
name="Jason Dewar"
timeStamp="4:59 PM"
>
It might be the cause of the problem
</ChatMessageBody>
</ChatMessage>
</ChatListItem>
</ChatList>
</Chat>
)
},
{
id: 'event',
label: 'Event',
@@ -195,7 +239,7 @@ export const states = [
<ChatList>
<ChatListItem type="event">
<ChatEvent
agentMessage="Andy needs help changing the language on his Amazon Echo"
agentMessage="Andy needs help changing the language on his CloudWidget"
symbol="change_owner"
timeStamp="5:19 PM"
>
@@ -273,7 +317,7 @@ export const examples = [
<ChatMessage>
<ChatAvatar initials="TW" name="Taylor Watson-Rice" />
<ChatMessageBody type="inbound">
Hi, my Alexa only speaks French
Hi, my CloudWidget only speaks French
</ChatMessageBody>
</ChatMessage>
</ChatListItem>
@@ -301,9 +345,9 @@ export const examples = [
<ChatListItem type="outbound">
<ChatMessage>
<ChatMessageBody type="outbound">
Hi Andy, thank you for contacting Amazon Support. Can you please
tell me what language you are trying to program on your Amazon
Echo?
Hi Andy, thank you for contacting Widget Support. Can you please
tell me what language you are trying to program on your
CloudWidget?
</ChatMessageBody>
</ChatMessage>
</ChatListItem>
@@ -343,16 +387,16 @@ export const examples = [
name="Andy Martinez"
timeStamp="4:59 PM"
>
Hi, my Alexa only speaks French
Hi, my CloudWidget only speaks French
</ChatMessageBody>
</ChatMessage>
</ChatListItem>
<ChatListItem type="outbound">
<ChatMessage>
<ChatMessageBody type="outbound-agent">
Hi Andy, thank you for contacting Amazon Support. Can you please
tell me what language you are trying to program on your Amazon
Echo?
Hi Andy, thank you for contacting Widget Support. Can you please
tell me what language you are trying to program on your
CloudWidget?
</ChatMessageBody>
</ChatMessage>
</ChatListItem>
@@ -393,7 +437,7 @@ export const examples = [
</ChatListItem>
<ChatListItem type="event">
<ChatEvent
agentMessage="Andy needs help changing the language on his Amazon Echo"
agentMessage="Andy needs help changing the language on his CloudWidget"
symbol="change_owner"
timeStamp="5:19 PM"
>
Oops, something went wrong.

0 comments on commit 14aa268

Please sign in to comment.
You can’t perform that action at this time.