Chatwoot/app/javascript/widget/assets/scss/views/_conversation.scss

255 lines
4.3 KiB
SCSS
Raw Normal View History

.file-uploads .attachment-button+label {
cursor: pointer;
}
.conversation-wrap {
.agent-message {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-start;
margin: 0 0 $space-micro $space-small;
max-width: 88%;
.avatar-wrap {
flex-shrink: 0;
height: $space-medium;
width: $space-medium;
.user-thumbnail-box {
margin-top: -$space-large;
}
}
.message-wrap {
flex-grow: 1;
flex-shrink: 0;
margin-left: $space-small;
max-width: 90%;
}
}
&.is-typing .messages-wrap div:last-child {
.agent-message {
.agent-name {
display: none;
}
.user-thumbnail-box {
margin-top: 0;
}
}
}
.agent-name {
color: $color-body;
font-size: $font-size-small;
font-weight: $font-weight-medium;
margin: $space-small 0;
padding-left: $space-micro;
}
.has-attachment {
overflow: hidden;
:not([audio]) {
padding: 0;
}
&.has-text {
margin-top: $space-smaller;
}
}
.agent-message-wrap {
+.agent-message-wrap {
margin-top: $space-micro;
.agent-message .chat-bubble {
border-top-left-radius: $space-smaller;
}
}
+.user-message-wrap {
margin-top: $space-normal;
}
&.has-response+.user-message-wrap {
margin-top: $space-micro;
.chat-bubble {
border-top-right-radius: $space-smaller;
}
}
&.has-response+.agent-message-wrap {
margin-top: $space-normal;
}
}
.user-message {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0 $space-smaller $space-micro auto;
max-width: 85%;
text-align: right;
.message-wrap {
margin-right: $space-small;
max-width: 100%;
}
.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
}
}
}
.user.has-attachment {
.icon-wrap {
color: $color-white;
}
.download {
color: $color-white;
}
}
.user-message-wrap {
+.user-message-wrap {
margin-top: $space-micro;
.user-message .chat-bubble {
border-top-right-radius: $space-smaller;
}
}
+.agent-message-wrap {
margin-top: $space-normal;
}
}
p:not(:last-child) {
margin-bottom: $space-normal;
}
}
.unread-messages {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin-top: 0;
overflow-y: auto;
padding-bottom: $space-small;
width: 100%;
.chat-bubble-wrap {
margin-bottom: $space-smaller;
&:first-child {
margin-top: auto;
}
.chat-bubble {
border: 1px solid $color-border-dark;
}
+.chat-bubble-wrap {
.chat-bubble {
border-top-left-radius: $space-smaller;
}
}
&:last-child .chat-bubble {
border-bottom-left-radius: $space-two;
}
}
}
.is-widget-right .unread-wrap {
overflow: hidden;
text-align: right;
.chat-bubble-wrap {
.chat-bubble {
border-bottom-right-radius: $space-smaller;
border-radius: $space-two;
}
+.chat-bubble-wrap {
.chat-bubble {
border-top-right-radius: $space-smaller;
}
}
&:last-child .chat-bubble {
border-bottom-right-radius: $space-two;
}
}
.close-unread-wrap {
text-align: right;
}
}
.chat-bubble {
@include light-shadow;
background: $color-woot;
border-radius: $space-two;
color: $color-white;
display: inline-block;
font-size: $font-size-default;
line-height: 1.5;
padding: $space-slab $space-normal;
text-align: left;
word-break: break-word;
:not([audio]) {
max-width: 100%;
}
>a {
color: $color-primary;
word-break: break-all;
}
.link {
text-decoration: underline;
}
&.user {
border-bottom-right-radius: $space-smaller;
>a {
color: $color-white;
}
}
&.agent {
background: $color-white;
border-bottom-left-radius: $space-smaller;
color: $color-body;
.link {
color: $color-woot;
word-break: break-word;
}
}
}