@seamly/web-ui 20.2.0 → 20.4.0

package/src/javascripts/ui/hooks/file-upload-hooks.js

@@ -1,9 +1,8 @@
 import { useCallback, useContext } from 'preact/hooks'
-import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
 import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
-
 import { seamlyActions } from 'ui/utils/seamly-utils'
+import { useSeamlyStateContext } from './seamly-state-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
 
 const { CLEAR_ALL_UPLOADS } = seamlyActions
 

package/src/javascripts/ui/hooks/focus-helper-hooks.js

@@ -1,11 +1,11 @@
 import { useCallback, useRef } from 'preact/hooks'
-import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
 import {
   focusElement,
   runIfElementContainsOrHasFocus,
 } from 'ui/utils/general-utils'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { seamlyActions } from 'ui/utils/seamly-utils'
+import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
 
 const { SET_SEAMLY_CONTAINER_ELEMENT } = seamlyActions
 

package/src/javascripts/ui/hooks/seamly-entry-hooks.js

@@ -1,10 +1,10 @@
 import { useRef, useCallback, useEffect } from 'preact/hooks'
 import { seamlyActions, actionTypes } from 'ui/utils/seamly-utils'
+import { typingTimeout } from 'config'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyOptions } from './seamly-option-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { typingTimeout } from 'config'
 
 const {
   SET_BLOCK_AUTO_ENTRY_SWITCH,

package/src/javascripts/ui/hooks/seamly-option-hooks.js

@@ -1,10 +1,10 @@
 import { useCallback } from 'preact/hooks'
 import { useI18n } from 'domains/i18n'
+import { seamlyActions } from 'ui/utils/seamly-utils'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyObjectStore } from './seamly-api-hooks'
 import { useElementFocusingById } from './focus-helper-hooks'
-import { seamlyActions } from 'ui/utils/seamly-utils'
 
 const {
   SET_USER_SELECTED_OPTION,

package/src/javascripts/ui/hooks/seamly-state-hooks.js

@@ -71,6 +71,9 @@ export const useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles
 
 export const useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents
 
+export const useLoadedImageEventIds = () =>
+  useSeamlyStateContext().loadedImageEventIds
+
 export const useSkiplink = () => useSeamlyStateContext().skiplinkTargetId
 
 export const useSeamlyParticipant = (participantId) =>

package/src/javascripts/ui/hooks/use-seamly-chat.js

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'preact/hooks'
 import { useI18n } from 'domains/i18n'
+import { seamlyActions } from 'ui/utils/seamly-utils'
+import { useVisibility, visibilityStates } from 'domains/visibility'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useEvents } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useLiveRegion } from './live-region-hooks'
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import { useVisibility, visibilityStates } from 'domains/visibility'
 import { useConfig } from '../../domains/config'
 
 const { SET_IS_LOADING } = seamlyActions

package/src/javascripts/ui/hooks/use-seamly-commands.js

@@ -1,20 +1,20 @@
 import { useCallback, useContext } from 'preact/hooks'
-import {
-  useSeamlyApiContext,
-  useSeamlyHasConversation,
-} from './seamly-api-hooks'
-import { useSeamlyUnreadCount } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
 import { randomId } from 'lib/id'
 import { userParticipantId } from 'config'
 import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
-import { useStableCallback } from './utility-hooks'
 import { Actions as InterruptActions } from 'domains/interrupt'
 import { useConfig } from 'domains/config'
 import * as AppActions from 'domains/app/actions'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useVisibility } from 'domains/visibility'
+import { useStableCallback } from './utility-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
+import { useSeamlyUnreadCount } from './seamly-state-hooks'
+import {
+  useSeamlyApiContext,
+  useSeamlyHasConversation,
+} from './seamly-api-hooks'
 
 const { ADD_EVENT, SET_INITIAL_STATE } = seamlyActions
 

package/src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js

@@ -1,9 +1,5 @@
 import { useCallback, useRef } from 'preact/hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyCommands from './use-seamly-commands'
 import { useI18n } from 'domains/i18n'
-import { useLiveRegion } from './live-region-hooks'
 import {
   getTimeFromSeconds,
   millisecondsToSeconds,
@@ -11,6 +7,10 @@ import {
 import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
 import { screenReaderDebounceDelaySeconds } from 'config'
 import { useVisibility } from 'domains/visibility'
+import { useLiveRegion } from './live-region-hooks'
+import useSeamlyCommands from './use-seamly-commands'
+import { useSeamlyStateContext } from './seamly-state-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
 
 const {
   CLEAR_IDLE_DETACH_COUNTDOWN,

package/src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js

@@ -1,9 +1,9 @@
+import { useI18n } from 'domains/i18n'
+import { actionTypes, dismissTypes, seamlyActions } from 'ui/utils/seamly-utils'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { useI18n } from 'domains/i18n'
 import { useLiveRegion } from './live-region-hooks'
-import { actionTypes, dismissTypes, seamlyActions } from 'ui/utils/seamly-utils'
 
 const { CLEAR_RESUME_CONVERSATION_PROMPT } = seamlyActions
 

package/src/javascripts/ui/hooks/use-single-file-upload.js

@@ -1,6 +1,6 @@
-import { useFileUploads } from './seamly-hooks'
 import { Selectors } from 'domains/forms'
 import { useSelectorWithProps } from 'domains/redux'
+import { useFileUploads } from './seamly-hooks'
 
 const useSingleFileUpload = (formId, name) => {
   const fileList = useSelectorWithProps(

package/src/javascripts/ui/utils/general-utils.js

@@ -103,7 +103,7 @@ export const formatBytes = (bytes, decimals = 2) => {
 
   const i = Math.floor(Math.log(bytes) / Math.log(k))
 
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+  return parseFloat((bytes / k ** i).toFixed(dm)) + ' ' + sizes[i]
 }
 
 export const getUrlParams = () => {

package/src/javascripts/ui/utils/seamly-utils.js

@@ -42,6 +42,7 @@ export const actionTypes = {
   interactivityUpdate: 'interactivity_update',
   dismiss: 'dismiss',
   sendTranscript: 'send_transcript',
+  setTopic: 'set_topic',
   setTranslation: 'set_translation',
   clickCta: 'click_cta',
   clickCard: 'click_card',
@@ -72,6 +73,7 @@ export const seamlyActions = {
   CLEAR_EVENTS: 'CLEAR_EVENTS',
   SET_HISTORY: 'SET_HISTORY',
   SET_EVENTS_READ: 'SET_EVENTS_READ',
+  SET_LOADED_IMAGE_EVENT_IDS: 'SET_LOADED_IMAGE_EVENT_IDS',
   ACK_EVENT: 'ACK_EVENT',
   SET_IS_LOADING: 'SET_IS_LOADING',
   CLEAR_PARTICIPANTS: 'CLEAR_PARTICIPANTS',
@@ -120,6 +122,7 @@ const {
   CLEAR_EVENTS,
   SET_HISTORY,
   SET_EVENTS_READ,
+  SET_LOADED_IMAGE_EVENT_IDS,
   ACK_EVENT,
   SET_IS_LOADING,
   CLEAR_PARTICIPANTS,
@@ -383,7 +386,7 @@ export const seamlyStateReducer = (state, action) => {
         : state
 
     case CLEAR_EVENTS:
-      return { ...state, unreadEvents: 0, events: [] }
+      return { ...state, unreadEvents: 0, loadedImageEventIds: [], events: [] }
     case SET_EVENTS_READ:
       return {
         ...state,
@@ -403,6 +406,11 @@ export const seamlyStateReducer = (state, action) => {
           return event
         }),
       }
+    case SET_LOADED_IMAGE_EVENT_IDS:
+      return {
+        ...state,
+        loadedImageEventIds: [...state.loadedImageEventIds, action.eventId],
+      }
     case SET_HISTORY:
       const {
         events: history,

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

@@ -4,7 +4,7 @@
   75%,
   100% {
     transform: scaleY(0.45);
-    border-radius: 50% 50%;
+    border-radius: 50%;
   }
 
   37.5% {

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

@@ -22,23 +22,28 @@ $brand3: #4a48c1 !default; // 'tertiary'
 $interaction: $brand3 !default;
 $interaction-dark: $brand2 !default;
 
+// NEGATIVE
 $negative: #db1639 !default;
 $negative-dark: #ad001f !default;
 
+// GREYS
 $grey-a: #eff3f6 !default;
 $grey-b: #dee3e5 !default;
 $grey-c: #a3b4bf !default;
 $grey-d: #6a7f8c !default;
 $grey-e: #3d4166 !default;
 
+// DISABLED
 $disabled: #5e727b; // 5:1
 
+// BLACK & WHITE
 $white: #fff !default;
 $black: #000 !default;
 
 // BACKGROUND COLORS
 $chat-bg: $white !default;
 
+// THREADLIST
 $threadlist-agent-text-bgcolor: $grey-a;
 $threadlist-user-text-bgcolor: $brand2;
 
@@ -51,11 +56,13 @@ $fontsize-large: 18px !default;
 $fontsize-xlarge: 21px !default;
 $fontsize-xxlarge: 24px !default;
 
+// FONT-WEIGHTS
 $fontweight-light: 300 !default;
 $fontweight-regular: 400 !default;
 $fontweight-semibold: 600 !default;
 $fontweight-bold: 700 !default;
 
+// FONT-FAMILY
 $fontfamily-default: arial, helvetica, sans-serif !default;
 
 // SPACER
@@ -73,34 +80,42 @@ $borderradius-large: $borderradius * 2 !default;
 $chat-window-width: $spacer * 18 !default;
 $chat-window-height: $spacer * 36 !default;
 
+// CHAT INLINE
 $chat-inline-height: $spacer * 32 !default;
 $chat-inline-maxheight: 90vh !default;
 
+// CHAT SUGGESTION
 $chat-suggestions-maxheight: $spacer * 16 !default;
 
+// VIEWPORT SIZES
 $viewport-width: 100vw !default;
 $viewport-height: 100vh !default;
 
+// ICON SIZES
 $iconsize-small: 16px !default;
 $iconsize: 24px !default;
 $iconsize-large: 32px !default;
 
+// BUTTON SIZED
 $buttonsize-small: 32px !default;
 $buttonsize: 40px !default;
 
+// AVATAR SIZES
 $avatarsize: 32px !default;
 $avatarsize-large: 48px !default;
 
+// DIVIDER
 $dividersize: 32px !default;
 
+// MESSAGE COUNT
 $messagecountsize: $spacer * 1.25;
 
 // Z-INDEX
 $z-index: 1 !default;
 
 // BOX SHADOWS
-$boxshadow: 0 $spacer * 0.25 $spacer * 1.5 hsla(204, 26%, 28%, 0.15),
-  0 $spacer * 0.15 $spacer * 0.5 hsla(204, 26%, 28%, 0.2) !default;
+$boxshadow: 0 $spacer * 0.25 $spacer * 1.5 hsl(204deg 26% 28% / 15%),
+  0 $spacer * 0.15 $spacer * 0.5 hsl(204deg 26% 28% / 20%) !default;
 $boxshadow-soft: 0 0 $spacer 0 rgba($black, 0.1) !default;
 
 // TRANSITIONS

package/src/stylesheets/2-tools/_functions.scss

@@ -1,15 +1,15 @@
-// SET TEXT COLOR
+/** SET TEXT COLOR */
 @function set-text-color($color) {
-  @if (lightness($color) > 66.66) {
+  @if lightness($color) > 66.66 {
     @return $grey-e;
   } @else {
     @return $white;
   }
 }
 
-// SET BORDER COLOR
+/** SET BORDER COLOR */
 @function set-border-color($color) {
-  @if (lightness($color) > 66.66) {
+  @if lightness($color) > 66.66 {
     @return $grey-c;
   } @else {
     @return $white;

package/src/stylesheets/2-tools/_mixins.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable selector-max-universal */
-// BOX-SIZING
+/** BOX-SIZING */
 @mixin boxSizing($value: border-box) {
   box-sizing: $value;
 
@@ -10,14 +10,15 @@
   }
 }
 
-// RESPONSIVE APP SIZING
+/** RESPONSIVE APP SIZING */
 @mixin responsiveAppSizing() {
   max-width: calc(#{$viewport-width} - #{$spacer * 2});
   max-height: calc(#{$viewport-height * 0.85} - #{$spacer * 2});
 
   @include media('>phablet-l') {
     max-height: calc(#{$viewport-height} - #{$spacer * 2});
-    // iOS Safari needs a bit more space
+
+    /** iOS Safari needs a bit more space */
     @supports (-webkit-overflow-scrolling: touch) {
       max-height: calc(#{$viewport-height * 0.9} - #{$spacer * 2});
     }
@@ -27,39 +28,40 @@
     right: $spacer;
     bottom: $spacer;
     max-height: calc(#{$viewport-height} - #{$spacer * 2});
-    // iOS Safari needs a bit more space
+
+    /** iOS Safari needs a bit more space */
     @supports (-webkit-overflow-scrolling: touch) {
       max-height: calc(#{$viewport-height * 0.9} - #{$spacer * 2});
     }
   }
 }
 
-// UNLIST
+/** UNLIST */
 @mixin unList() {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-// STYLE PLACEHOLDER
+/** STYLE PLACEHOLDER */
 @mixin stylePlaceholder() {
-  &::-webkit-input-placeholder {
-    // Chrome/Opera/Safari
+  &::input-placeholder {
+    /** Chrome/Opera/Safari */
     @content;
   }
 
-  &::-moz-placeholder {
-    // Firefox 19+
+  &::placeholder {
+    /** Firefox 19+ */
     @content;
   }
 
-  &:-ms-input-placeholder {
-    // IE 10+
+  &:input-placeholder {
+    /** IE 10+ */
     @content;
   }
 
-  &:-moz-placeholder {
-    // Firefox 18-
+  &:placeholder {
+    /** Firefox 18- */
     @content;
   }
 }

package/src/stylesheets/3-chat/_chat.scss

@@ -27,7 +27,7 @@
 }
 
 .#{$n}-chat--layout-window {
-  @include responsiveAppSizing();
+  @include responsiveAppSizing;
 
   display: none;
   position: fixed;

package/src/stylesheets/5-components/_choice-prompt.scss

@@ -50,7 +50,7 @@
 }
 
 .#{$n}-button--choose-again .#{$n}-icon path {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .#{$n}-button--choose-again[aria-expanded='true'] .#{$n}-icon {

package/src/stylesheets/5-components/_collapse-button.scss

@@ -10,7 +10,7 @@
   height: $buttonsize;
   padding: 0;
   border: 0 none;
-  border-radius: 50% 50%;
+  border-radius: 50%;
   background-color: $white;
   box-shadow: $boxshadow;
 }

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

@@ -26,7 +26,7 @@
   font-size: $fontsize-default;
   resize: none;
 
-  @include stylePlaceholder() {
+  @include stylePlaceholder {
     overflow: visible;
     color: $grey-c;
     line-height: $spacer;

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

@@ -24,8 +24,8 @@ $loader-quarter-duration: $loader-animation-duration * 0.2;
   animation-iteration-count: infinite;
   animation-direction: normal;
   animation-fill-mode: forwards;
-  border-radius: 50% 50%;
-  background-color: currentColor;
+  border-radius: 50%;
+  background-color: currentcolor;
 
   &.#{$n}-one {
     animation-delay: $loader-quarter-duration;

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

@@ -131,7 +131,7 @@
     height: $iconsize-small * 0.6;
     transform: translate(-50%, -50%);
     transform-origin: 50% 50%;
-    border-radius: 50% 50%;
+    border-radius: 50%;
     background-color: $grey-c;
   }
 }

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

@@ -10,8 +10,10 @@
   height: $messagecountsize;
   transform: scale(1);
   transform-origin: 50% 50%;
-  transition: transform 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  border-radius: 50% 50%;
+  transition: transform 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    opacity $transition;
+  border-radius: 50%;
+  opacity: 1;
   background-color: $negative;
   color: $white;
   font-size: $fontsize-small;
@@ -20,6 +22,7 @@
 
   &:empty {
     transform: scale(0);
-    transition: transform $transition;
+    transition: transform $transition, opacity $transition;
+    opacity: 0;
   }
 }

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

@@ -1,7 +1,6 @@
 .#{$n}-message {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   width: 80%;
 }
 

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

@@ -97,7 +97,7 @@
   height: $buttonsize;
   padding: 0;
   border: 0 none;
-  border-radius: 50% 50%;
+  border-radius: 50%;
   background-color: $white;
   color: transparent;
   font-size: 0;

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

@@ -34,7 +34,7 @@
 }
 
 .#{$n}-chat__options__button .#{$n}-icon path {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 // CONTEXT MENU
@@ -174,7 +174,7 @@
 }
 
 .#{$n}-options__close .#{$n}-icon path {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .#{$n}-options__form {
@@ -232,7 +232,7 @@
     border: $thin-border solid $grey-b;
   }
 
-  @include stylePlaceholder() {
+  @include stylePlaceholder {
     overflow: visible;
     color: $grey-c;
     line-height: $spacer;

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

@@ -63,26 +63,25 @@
 
 .#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__list {
   flex: 1 1 100%;
-  flex-direction: column;
-  flex-wrap: nowrap;
+  flex-flow: column nowrap;
   height: 100%;
   max-height: 100%;
   overflow-y: auto;
 }
 
-.#{$n}-suggestions-item {
+.#{$n}-suggestions__item {
   display: block;
   flex: 0 0 auto;
   max-width: 100%;
   margin: 0 $spacer * 0.25 $spacer * 0.25 0;
 }
 
-.#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions-item {
+.#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__item {
   width: 100%;
   margin-right: 0;
 }
 
-.#{$n}-suggestions-item .#{$n}-icon {
+.#{$n}-suggestions__item .#{$n}-icon {
   display: none;
 }
 

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

@@ -116,7 +116,7 @@
 }
 
 .#{$n}-upload__label .#{$n}-icon path {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .#{$n}-upload__label--text {

package/src/stylesheets/7-deprecated/1-settings/_animations.scss

@@ -8,7 +8,7 @@
   75%,
   100% {
     transform: scaleY(0.45);
-    border-radius: 50% 50%;
+    border-radius: 50%;
   }
 
   37.5% {

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

@@ -21,22 +21,28 @@ $brand3: #4a48c1 !default; // 'tertiary'
 // UI COLORS
 $interaction: $brand3 !default;
 
+// Highlight color
 $highlight: #ffc700 !default;
 
+// Positive colors
 $positive: #00875e !default;
 $positive-light: #19b183 !default;
 
+// Negative colors
 $negative: #db1639 !default;
 $negative-dark: #ad001f !default;
 
+// Greys
 $grey-a: #eff3f6 !default;
 $grey-b: #dee3e5 !default;
 $grey-c: #a3b4bf !default;
 $grey-d: #6a7f8c !default;
 $grey-e: #3d4166 !default;
 
+// Disabled color
 $disabled: #5e727b; // 5:1
 
+// BLACK & WHITE
 $white: #fff !default;
 $black: #000 !default;
 
@@ -51,8 +57,10 @@ $fontsize-default: 16px !default;
 $fontsize-large: 18px !default;
 $fontsize-xlarge: 21px !default;
 
+// FONT-WEIGHT
 $fontweight-bold: 700 !default;
 
+// FONT-FAMILY
 $fontfamily-default: arial, helvetica, sans-serif !default;
 
 // SPACER
@@ -69,26 +77,21 @@ $borderradius-small: $borderradius * 0.5 !default;
 // DIMENSIONS
 $app-initial-width: 195px !default;
 $app-started-width: 375px !default;
-
 $app-full-height: 720px !default;
 $app-collapsed-height: 54px !default;
-
 $app-inline-height: 480px !default;
-
 $post-full-height: 170px !default;
 $post-collapsed-height: 65px !default;
-
 $viewport-width: 100vw !default;
 $viewport-height: 100vh !default;
-
 $badge-touch-size: 32px !default;
 
 // Z-INDEX
 $z-index: 1 !default;
 
 // BOX SHADOWS
-$boxshadow: 0 $spacer * 0.25 $spacer * 1.5 hsla(204, 26%, 28%, 0.15),
-  0 $spacer * 0.15 $spacer * 0.5 hsla(204, 26%, 28%, 0.2) !default;
+$boxshadow: 0 $spacer * 0.25 $spacer * 1.5 hsl(204deg 26% 28% / 15%),
+  0 $spacer * 0.15 $spacer * 0.5 hsl(204deg 26% 28% / 20%) !default;
 $boxshadow-soft: 0 0 $spacer 0 rgba($black, 0.1) !default;
 
 // TRANSITIONS