@seamly/web-ui 20.0.0-beta.2 → 20.0.0-beta.5

package/src/javascripts/ui/components/view/index.js

@@ -1,9 +1,14 @@
+import { useCallback, useMemo } from 'preact/hooks'
 import { useConfig } from '../../../domains/config'
 import AppView from './app-view'
 import InlineView from './inline-view'
 import WindowView from './window-view'
-import { useSeamlyStateContext } from '../../hooks/seamly-state-hooks'
-import { visibilityStates } from '../../../domains/visibility'
+import { useVisibility } from '../../../domains/visibility'
+import { className } from '../../../lib/css'
+import { useSeamlyAppContainerClassNames } from '../../hooks/component-helper-hooks'
+import { useUserHasResponded } from '../../../domains/app'
+import { useI18n } from '../../../domains/i18n'
+import { useSeamlyContainerElement } from '../../hooks/focus-helper-hooks'
 
 const ViewComponentsMap = {
   app: AppView,
@@ -12,16 +17,67 @@ const ViewComponentsMap = {
 }
 
 const View = () => {
-  const { layoutMode } = useConfig()
-  const { visible } = useSeamlyStateContext()
+  const [, setSeamlyContainerElement] = useSeamlyContainerElement()
+  const { namespace, layoutMode, zIndex } = useConfig()
+  const { isOpen, isVisible } = useVisibility()
+  const appContainerClassNames = useSeamlyAppContainerClassNames()
+  const userResponded = useUserHasResponded()
+  const { locale } = useI18n()
   const ViewComponent = ViewComponentsMap[layoutMode]
 
+  const containerElementRef = useCallback(
+    (container) => {
+      setSeamlyContainerElement(container)
+    },
+    [setSeamlyContainerElement],
+  )
+
+  const blockLang = useMemo(() => {
+    if (locale) {
+      const htmlElementLang = document
+        .querySelector('html')
+        .getAttribute('lang')
+      if (htmlElementLang !== locale) {
+        return locale
+      }
+    }
+    return undefined
+  }, [locale])
+
   if (!ViewComponent) {
     console.warn('"layoutMode" should be one of "app", "inline" or "window"')
     return null
   }
 
-  return visible !== visibilityStates.hidden && <ViewComponent />
+  const defaultClassNames = [
+    `app--layout-${layoutMode}`,
+    `namespace--${namespace}`,
+  ]
+
+  const classNames = ['app', ...defaultClassNames, ...appContainerClassNames]
+
+  if (!isOpen && layoutMode !== 'app') {
+    classNames.push('app--collapsed')
+  }
+
+  if (userResponded) {
+    classNames.push('app--user-responded')
+  }
+
+  return (
+    isVisible && (
+      <div
+        className={className(classNames)}
+        lang={blockLang}
+        tabIndex="-1"
+        data-nosnippet
+        style={{ zIndex }}
+        ref={containerElementRef}
+      >
+        <ViewComponent />
+      </div>
+    )
+  )
 }
 
 export default View

package/src/javascripts/ui/components/view/inline-view.js

@@ -1,5 +1,5 @@
 import { className } from '../../../lib/css'
-import AppFrame from '../layout/app-frame'
+import Chat from '../layout/chat'
 import Interrupt from '../layout/interrupt'
 import Conversation from '../conversation/conversation'
 import EntryContainer from '../entry/entry-container'
@@ -11,10 +11,16 @@ import Suggestions from '../suggestions'
 import InOutTransition, {
   transitionStartStates,
 } from '../widgets/in-out-transition'
+import { useInterrupt } from '../../../domains/interrupt'
 
 const InlineView = () => {
   useSeamlyChat()
   const { isOpen } = useVisibility()
+  const { hasInterrupt, meta } = useInterrupt()
+
+  if (hasInterrupt && !isOpen) {
+    return <Interrupt {...meta} />
+  }
 
   return (
     <>
@@ -22,7 +28,12 @@ const InlineView = () => {
         isActive={!isOpen}
         transitionStartState={transitionStartStates.rendered}
       >
-        <div className={className('unstarted-wrapper')}>
+        <div
+          className={className(
+            'unstarted-wrapper',
+            'unstarted-wrapper--inline',
+          )}
+        >
           <PreChatMessages />
           <Suggestions />
         </div>
@@ -31,12 +42,12 @@ const InlineView = () => {
         isActive={isOpen}
         transitionStartState={transitionStartStates.rendered}
       >
-        <AppFrame>
+        <Chat>
           <ChatFrame interruptComponent={Interrupt}>
             {isOpen && <Conversation />}
             <EntryContainer />
           </ChatFrame>
-        </AppFrame>
+        </Chat>
       </InOutTransition>
     </>
   )

package/src/javascripts/ui/components/view/window-view/index.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'preact/hooks'
 import { useSeamlyChat } from '../../../hooks/seamly-hooks'
 import { useVisibility } from '../../../../domains/visibility'
-import AppFrame from '../../layout/app-frame'
+import Chat from '../../layout/chat'
 import ChatFrame from '../../layout/chat-frame'
 import Interrupt from '../../layout/interrupt'
 import Conversation from '../../conversation/conversation'
@@ -14,7 +14,7 @@ import InOutTransition, {
 import PreChatMessages from '../../layout/pre-chat-messages'
 import { useUserHasResponded } from '../../../../domains/app'
 import { className } from '../../../../lib/css'
-import Splash from '../../conversation/event/splash'
+import Text from '../../conversation/event/text'
 import { useI18n } from '../../../../domains/i18n'
 
 const WindowView = () => {
@@ -60,20 +60,20 @@ const WindowView = () => {
             'unstarted-wrapper--continue',
           )}
         >
-          <Splash event={continueChatEvent} />
+          <Text event={continueChatEvent} />
         </div>
       </InOutTransition>
       <InOutTransition
         isActive={isOpen}
         transitionStartState={transitionStartStates.notRendered}
       >
-        <AppFrame>
+        <Chat>
           {isOpen && <CollapseButton onClick={closeChat} />}
           <ChatFrame interruptComponent={Interrupt}>
             <Conversation />
             <EntryContainer />
           </ChatFrame>
-        </AppFrame>
+        </Chat>
       </InOutTransition>
     </>
   )

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/_error.scss

@@ -3,17 +3,15 @@
 
 // BASE
 // ----
-.#{$n}-error__message {
-  display: flex;
-  align-items: flex-start;
+.#{$n}-error {
+  display: block;
   width: 100%;
-  margin: 0 0 $spacer * 0.5;
-  padding: $spacer * 0.25 $spacer * 0.5;
-  border-radius: $borderradius-small;
-  background-color: rgba($negative, 0.1);
-  color: $negative-dark;
-  font-size: $fontsize-small;
-  font-weight: $fontweight-bold;
+  margin: 0 0 $spacer * 0.25;
+
+  &:empty {
+    display: none;
+    margin: 0;
+  }
 
   .#{$n}-icon {
     flex: 0 0 16px;
@@ -21,4 +19,16 @@
     height: 16px;
     margin-right: $spacer * 0.25;
   }
+
+  .#{$n}-error__message {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    padding: $spacer * 0.25 $spacer * 0.5;
+    border-radius: $borderradius-small;
+    background-color: rgba($negative, 0.1);
+    color: $negative-dark;
+    font-size: $fontsize-small;
+    font-weight: $fontweight-bold;
+  }
 }

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;
 }