@seamly/web-ui 20.0.0-beta.3 → 20.0.0-beta.6

package/src/stylesheets/1-settings/_config.scss

@@ -37,7 +37,7 @@ $white: #fff !default;
 $black: #000 !default;
 
 // BACKGROUND COLORS
-$app-bg: $white !default;
+$chat-bg: $white !default;
 
 $threadlist-agent-text-bgcolor: $grey-a;
 $threadlist-user-text-bgcolor: $brand2;
@@ -70,13 +70,13 @@ $borderradius-small: $borderradius * 0.5 !default;
 $borderradius-large: $borderradius * 2 !default;
 
 // DIMENSIONS
-$app-window-width: $spacer * 18 !default;
-$app-window-height: $spacer * 36 !default;
+$chat-window-width: $spacer * 18 !default;
+$chat-window-height: $spacer * 36 !default;
 
-$app-inline-height: $spacer * 32 !default;
-$app-inline-maxheight: 90vh !default;
+$chat-inline-height: $spacer * 32 !default;
+$chat-inline-maxheight: 90vh !default;
 
-$app-suggestions-maxheight: $spacer * 16 !default;
+$chat-suggestions-maxheight: $spacer * 16 !default;
 
 $viewport-width: 100vw !default;
 $viewport-height: 100vh !default;

package/src/stylesheets/{3-app/_app.scss → 3-chat/_chat.scss}

@@ -1,4 +1,4 @@
-.#{$n}-app {
+.#{$n}-chat {
   @include boxSizing;
 
   display: flex;
@@ -7,12 +7,12 @@
   transition: margin $transition, height $transition, transform $transition,
     opacity $transition;
   outline: 0;
-  color: set-text-color($app-bg);
+  color: set-text-color($chat-bg);
   font-family: $fontfamily-default;
   font-size: $fontsize-small;
 }
 
-.#{$n}-app--layout-inline {
+.#{$n}-chat--layout-inline {
   height: fit-content;
   background-color: initial;
   box-shadow: none;
@@ -22,19 +22,11 @@
   }
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--collapsed .#{$n}-app-wrapper {
+.#{$n}-chat--layout-inline.#{$n}-chat--collapsed .#{$n}-chat-wrapper {
   height: auto;
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--user-responded {
-  transition: none;
-}
-
-.#{$n}-app--layout-inline.#{$n}-app--user-responded .#{$n}-app-wrapper {
-  transition: none;
-}
-
-.#{$n}-app--layout-window {
+.#{$n}-chat--layout-window {
   @include responsiveAppSizing();
 
   display: none;
@@ -42,23 +34,23 @@
   z-index: $z-index;
   right: $spacer;
   bottom: $spacer;
-  width: $app-window-width;
+  width: $chat-window-width;
   max-width: calc(100% - #{$spacer * 2});
-  height: $app-window-height;
+  height: $chat-window-height;
   transform: scale(0);
   opacity: 0;
 }
 
-.#{$n}-app--layout-window.#{$n}-transition--visible {
+.#{$n}-chat--layout-window.#{$n}-transition--visible {
   display: flex;
 }
 
-.#{$n}-app--layout-window.#{$n}-transition--in {
+.#{$n}-chat--layout-window.#{$n}-transition--in {
   transform: scale(1);
   opacity: 1;
 }
 
-.#{$n}-app--layout-app {
+.#{$n}-chat--layout-app {
   position: fixed;
   z-index: $z-index;
   top: 0;
@@ -71,7 +63,7 @@
   max-height: 100%;
 }
 
-.#{$n}-app-wrapper {
+.#{$n}-chat-wrapper {
   display: flex;
   position: relative;
   z-index: 1;
@@ -81,18 +73,13 @@
   overflow: hidden;
   transition: flex $transition, width $transition, height $transition,
     border-radius $transition;
-  border: $thin-border solid set-border-color($app-bg);
+  border: $thin-border solid set-border-color($chat-bg);
   border-radius: $borderradius;
-  background-color: $app-bg;
+  background-color: $chat-bg;
   box-shadow: $boxshadow-soft;
 }
 
-.#{$n}-app--layout-app .#{$n}-app-wrapper {
-  border: 0 none;
-  border-radius: 0;
-}
-
-.#{$n}-app--layout-inline .#{$n}-app-wrapper {
+.#{$n}-chat--layout-inline .#{$n}-chat-wrapper {
   width: 100%;
   height: 0;
 
@@ -111,12 +98,12 @@
   }
 }
 
-.#{$n}-app--layout-inline.#{$n}-transition--in .#{$n}-app-wrapper {
-  height: $app-inline-height;
-  max-height: $app-inline-maxheight;
+.#{$n}-chat--layout-inline.#{$n}-transition--in .#{$n}-chat-wrapper {
+  height: $chat-inline-height;
+  max-height: $chat-inline-maxheight;
 }
 
-.#{$n}-app__container {
+.#{$n}-chat__container {
   display: flex;
   position: relative;
   flex-direction: column;
@@ -124,7 +111,7 @@
   height: 100%;
 }
 
-.#{$n}-app__body {
+.#{$n}-chat__body {
   display: flex;
   position: relative;
   flex-grow: 4;
@@ -132,11 +119,11 @@
   overflow-y: auto;
 }
 
-.#{$n}-app--layout-window .#{$n}-app__body {
+.#{$n}-chat--layout-window .#{$n}-chat__body {
   overscroll-behavior: contain;
 }
 
-.#{$n}-app__entry {
+.#{$n}-chat__entry {
   position: relative;
   flex: 0 0 auto;
   padding: $spacer * 0.5;
@@ -147,7 +134,7 @@
   }
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--collapsed .#{$n}-app__entry {
+.#{$n}-chat--layout-inline.#{$n}-chat--collapsed .#{$n}-chat__entry {
   border: 0 none;
 }
 

package/src/stylesheets/5-components/_chat-status.scss

@@ -15,14 +15,10 @@
   box-shadow: $boxshadow;
 }
 
-&.#{$n}-app--layout-window .#{$n}-chat-status {
+.#{$n}-chat--layout-window .#{$n}-chat-status {
   width: calc(100% - #{$spacer * 2.5 + $buttonsize});
 }
 
-&.#{$n}-app--collapsed .#{$n}-chat-status {
-  display: none;
-}
-
 .#{$n}-chat-status__title {
   display: flex;
   flex: 1;

package/src/stylesheets/5-components/_conversation.scss

@@ -29,18 +29,18 @@
   }
 }
 
-.#{$n}-chat-status ~ .#{$n}-app__container .#{$n}-conversation {
+.#{$n}-chat-status ~ .#{$n}-chat__container .#{$n}-conversation {
   padding-top: $buttonsize + $spacer * 2;
 }
 
 .#{$n}-chat-status
-  ~ .#{$n}-app__container
+  ~ .#{$n}-chat__container
   .#{$n}-disclaimer
   + .#{$n}-conversation {
   padding-top: 0;
 }
 
-&.#{$n}-app--layout-inline .#{$n}-conversation {
+.#{$n}-chat--layout-inline .#{$n}-conversation {
   position: relative;
 }
 

package/src/stylesheets/5-components/_disclaimer.scss

@@ -7,19 +7,15 @@
   background-color: $grey-a;
 }
 
-&.#{$n}-app--layout-window .#{$n}-disclaimer {
+.#{$n}-chat--layout-window .#{$n}-disclaimer {
   padding-right: $buttonsize + $spacer * 2;
 }
 
-.#{$n}-chat-status ~ .#{$n}-app__container .#{$n}-disclaimer {
+.#{$n}-chat-status ~ .#{$n}-chat__container .#{$n}-disclaimer {
   margin-top: $buttonsize + $spacer * 2;
   padding: $spacer * 0.5 $spacer;
 }
 
-&.#{$n}-app--collapsed .#{$n}-disclaimer {
-  display: none;
-}
-
 .#{$n}-disclaimer__title {
   margin: 0 0 $spacer * 0.25;
   padding-right: $spacer;

package/src/stylesheets/5-components/_interrupt.scss

@@ -8,17 +8,32 @@
   background: $white;
 }
 
+&.#{$n}-app--layout-inline.#{$n}-app--collapsed .#{$n}-interrupt {
+  position: static;
+  width: 100%;
+  border-radius: $borderradius;
+
+  @include media('>desktop') {
+    width: 67%;
+  }
+}
+
 .#{$n}-interrupt__body {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  align-items: center;
+  align-items: left;
   justify-content: center;
-  margin: $spacer * 0.5;
   padding: $spacer * 2;
+  text-align: left;
+}
+
+.#{$n}-chat .#{$n}-interrupt__body {
+  margin: $spacer * 0.5;
 }
 
 .#{$n}-interrupt__title {
+  margin: 0 0 $spacer;
   font-size: $fontsize-default;
   font-weight: bold;
 }
@@ -26,6 +41,10 @@
 .#{$n}-interrupt__message {
   margin-bottom: $spacer * 2;
   font-size: $fontsize-default;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .#{$n}-interrupt__actions {

package/src/stylesheets/5-components/_message-body.scss

@@ -17,6 +17,28 @@
   }
 }
 
+.#{$n}-unstarted-wrapper.#{$n}-unstarted-wrapper--window .#{$n}-message__body {
+  margin-left: auto;
+  padding: $spacer * 0.5 $spacer * 0.75;
+  border: $thin-border solid $white;
+  border-radius: $borderradius;
+  background-color: $threadlist-agent-text-bgcolor;
+  font-size: $fontsize-medium;
+}
+
+.#{$n}-unstarted-wrapper--continue .#{$n}-message__body {
+  transform: scale(0);
+  transform-origin: 100% 100%;
+  transition: transform $transition, opacity $transition;
+  opacity: 0;
+}
+
+.#{$n}-unstarted-wrapper--continue.#{$n}-transition--in .#{$n}-message__body {
+  transform: scale(1);
+  transition: transform $transition-delay, opacity $transition-delay;
+  opacity: 1;
+}
+
 .#{$n}-conversation__item--source-info .#{$n}-message__body {
   flex: 0 0 100%;
   width: 100%;
@@ -82,7 +104,7 @@
   }
 }
 
-.cvco-message--source-user .#{$n}-message__body a {
+.#{$n}-message--source-user .#{$n}-message__body a {
   color: $white;
 }
 

package/src/stylesheets/5-components/_message-count.scss

@@ -1,6 +1,7 @@
 .#{$n}-message-count {
   display: flex;
   position: absolute;
+  z-index: 1;
   top: $spacer * -0.5;
   right: $spacer * -0.5;
   align-items: center;

package/src/stylesheets/5-components/_message.scss

@@ -5,6 +5,10 @@
   width: 80%;
 }
 
+.#{$n}-unstarted-wrapper--window .#{$n}-message {
+  width: 100%;
+}
+
 .#{$n}-message.#{$n}-message--type-suggestions {
   width: 100%;
 }

package/src/stylesheets/5-components/_modal.scss

@@ -17,7 +17,7 @@
   padding: $spacer;
   transform: scale(1);
   opacity: 1;
-  background-color: rgba($app-bg, 0.8);
+  background-color: rgba($chat-bg, 0.8);
 }
 
 .#{$n}-modal__float {
@@ -29,7 +29,7 @@
   border: $thin-border solid $grey-b;
   border-radius: $borderradius;
   outline: 0;
-  background-color: $app-bg;
+  background-color: $chat-bg;
   box-shadow: $boxshadow-soft;
 }
 

package/src/stylesheets/5-components/_options.scss

@@ -1,4 +1,4 @@
-.#{$n}-app__options {
+.#{$n}-chat__options {
   display: flex;
   position: relative;
   flex: 0;
@@ -9,15 +9,11 @@
   border-top: $thin-border solid $grey-b;
 }
 
-.#{$n}-app__options-item--left {
+.#{$n}-chat__options-item--left {
   margin-right: auto;
 }
 
-&.#{$n}-app--collapsed .#{$n}-app__options {
-  display: none;
-}
-
-.#{$n}-app__options__button {
+.#{$n}-chat__options__button {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -25,23 +21,19 @@
   border-radius: $borderradius-small;
 }
 
-&.#{$n}-app--collapsed .#{$n}-app__options-button {
-  display: none;
-}
-
-.#{$n}-app__options__button .#{$n}-icon {
+.#{$n}-chat__options__button .#{$n}-icon {
   flex: 0 0 $iconsize-small;
   width: $iconsize-small;
   height: $iconsize-small;
   margin-right: $spacer * 0.25;
 }
 
-.#{$n}-app__options__button .#{$n}-icon svg {
+.#{$n}-chat__options__button .#{$n}-icon svg {
   width: 100%;
   height: 100%;
 }
 
-.#{$n}-app__options__button .#{$n}-icon path {
+.#{$n}-chat__options__button .#{$n}-icon path {
   fill: currentColor;
 }
 

package/src/stylesheets/5-components/_pre-chat-messages.scss

@@ -5,26 +5,33 @@
   padding: 0;
 }
 
-.#{$n}-pre-chat-messages--window {
-  position: fixed;
-  z-index: $z-index;
-  right: $spacer;
-  bottom: $spacer + $avatarsize-large;
-  max-width: calc(100% - #{$spacer * 2});
+.#{$n}-unstarted-wrapper .#{$n}-pre-chat-messages {
+  display: none;
+}
+
+.#{$n}-unstarted-wrapper.#{$n}-transition--visible .#{$n}-pre-chat-messages {
+  display: block;
+}
+
+.#{$n}-unstarted-wrapper--inline .#{$n}-pre-chat-messages {
+  transition: opacity $transition;
+  opacity: 0;
+}
 
-  @include media('>phablet-l') {
-    max-width: $spacer * 14;
-  }
+.#{$n}-unstarted-wrapper--inline.#{$n}-transition--in .#{$n}-pre-chat-messages {
+  transition: opacity $transition-delay;
+  opacity: 1;
 }
 
-.#{$n}-pre-chat-messages__message {
-  margin-bottom: $spacer * 0.5;
+.#{$n}-unstarted-wrapper--window .#{$n}-pre-chat-messages {
+  transform: scale(0);
+  transform-origin: 100% 100%;
+  transition: transform $transition, opacity $transition;
+  opacity: 0;
 }
 
-.#{$n}-pre-chat-messages--window .#{$n}-message__body {
-  padding: $spacer * 0.5 $spacer * 0.75;
-  border: $thin-border solid $white;
-  border-radius: $borderradius;
-  background-color: $threadlist-agent-text-bgcolor;
-  font-size: $fontsize-medium;
+.#{$n}-unstarted-wrapper--window.#{$n}-transition--in .#{$n}-pre-chat-messages {
+  transform: scale(1);
+  transition: transform $transition-delay, opacity $transition-delay;
+  opacity: 1;
 }

package/src/stylesheets/5-components/_suggestions.scss

@@ -4,9 +4,9 @@
   overscroll-behavior: contain;
 }
 
-.#{$n}-app--layout-inline > .#{$n}-suggestions {
+.#{$n}-chat--layout-inline > .#{$n}-suggestions {
   flex-direction: column;
-  max-height: $app-suggestions-maxheight;
+  max-height: $chat-suggestions-maxheight;
   padding: $spacer;
   overflow: hidden;
   transition: max-height $transition, padding $transition, transform $transition,
@@ -30,9 +30,9 @@
   @include media('>phablet-l') {
     flex: 0 0 50%;
     width: 50%;
-    height: $app-inline-height;
+    height: $chat-inline-height;
     min-height: 100%;
-    max-height: $app-inline-maxheight;
+    max-height: $chat-inline-maxheight;
     transform: translateX(-100%);
   }
 
@@ -61,7 +61,7 @@
   overscroll-behavior: contain;
 }
 
-.#{$n}-app--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__list {
+.#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__list {
   flex: 1 1 100%;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -77,7 +77,7 @@
   margin: 0 $spacer * 0.25 $spacer * 0.25 0;
 }
 
-.#{$n}-app--layout-inline > .#{$n}-suggestions .#{$n}-suggestions-item {
+.#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions-item {
   width: 100%;
   margin-right: 0;
 }

package/src/stylesheets/5-components/_unstarted.scss

@@ -1,50 +1,36 @@
-.#{$n}-unstarted-wrapper {
+.#{$n}-unstarted-wrapper:empty {
+  display: none;
+}
+
+.#{$n}-unstarted-wrapper--window {
+  position: fixed;
+  z-index: $z-index;
+  right: $spacer * 1.5;
+  bottom: $spacer * 1.5 + $avatarsize-large;
+  max-width: calc(100% - #{$spacer * 3});
+
+  @include media('>phablet-l') {
+    max-width: $spacer * 14;
+  }
+}
+
+.#{$n}-unstarted-wrapper--inline {
   display: none;
   width: 100%;
+  max-height: 0;
   overflow: hidden;
   transition: margin $transition, max-height $transition;
 
-  &:not(&.#{$n}-unstarted-wrapper--window) {
-    max-height: 0;
-
-    @include media('>desktop') {
-      width: 67%;
-    }
+  @include media('>desktop') {
+    width: 67%;
   }
 }
 
-.#{$n}-unstarted-wrapper.#{$n}-transition--visible {
+.#{$n}-unstarted-wrapper--inline.#{$n}-transition--visible {
   display: block;
 }
 
-.#{$n}-unstarted-wrapper:not(.#{$n}-unstarted-wrapper--window).#{$n}-transition--in {
+.#{$n}-unstarted-wrapper--inline.#{$n}-transition--in {
   max-height: $spacer * 30;
   margin-bottom: $spacer;
 }
-
-.#{$n}-unstarted-wrapper .#{$n}-pre-chat-messages,
-.#{$n}-unstarted-wrapper .#{$n}-cvco-suggestions {
-  display: none;
-  transition: transform $transition, opacity $transition;
-  opacity: 0;
-}
-
-.#{$n}-unstarted-wrapper.#{$n}-transition--visible .#{$n}-pre-chat-messages,
-.#{$n}-unstarted-wrapper.#{$n}-transition--visible .#{$n}-cvco-suggestions {
-  display: block;
-}
-
-.#{$n}-unstarted-wrapper.#{$n}-transition--in .#{$n}-pre-chat-messages,
-.#{$n}-unstarted-wrapper.#{$n}-transition--in .#{$n}-cvco-suggestions {
-  transition: transform $transition-delay, opacity $transition-delay;
-  opacity: 1;
-}
-
-.#{$n}-unstarted-wrapper--window .#{$n}-pre-chat-messages {
-  transform: scale(0);
-  transform-origin: 100% 100%;
-}
-
-.#{$n}-unstarted-wrapper--window.#{$n}-transition--in .#{$n}-pre-chat-messages {
-  transform: scale(1);
-}