@seamly/web-ui 20.8.1 → 21.0.1-beta.1

package/src/javascripts/ui/hooks/use-seamly-actions.ts

@@ -1,48 +1,48 @@
+import { useDispatch } from 'react-redux'
 import {
+  ackEvent,
   addEvent,
+  clearAllUploads,
   clearEvents,
-  setHistory,
-  setEventsRead,
-  setLoadedImageEventIds,
-  ackEvent,
-  setIsLoading,
-  setParticipant,
-  setHeaderTitle,
-  setHeaderSubTitle,
-  resetHistoryLoadedFlag,
-  setActiveService,
-  initIdleDetachCountdown,
-  decrementIdleDetachCountdownCounter,
-  stopIdleDetachCountdownCounter,
+  clearFeatures,
   clearIdleDetachCountdown,
-  initResumeConversationPrompt,
   clearResumeConversationPrompt,
-  setServiceDataItem,
-  setFeatures,
+  decrementIdleDetachCountdownCounter,
+  hideOption,
+  initIdleDetachCountdown,
+  initResumeConversationPrompt,
+  registerUpload,
+  resetHistoryLoadedFlag,
+  setActiveEntryType,
+  setActiveService,
+  setBlockAutoEntrySwitch,
+  setEventsRead,
   setFeatureEnabledState,
-  clearFeatures,
+  setFeatures,
+  setHeaderSubTitle,
+  setHeaderTitle,
+  setHistory,
   setInitialState,
-  setUserSelectedOptions,
-  setUserSelectedOption,
-  showOption,
-  hideOption,
+  setIsLoading,
+  setLoadedImageEventIds,
+  setParticipant,
+  setSeamlyContainerElement,
+  setServiceDataItem,
   setServiceEntryMetadata,
-  setBlockAutoEntrySwitch,
-  setActiveEntryType,
-  setUserEntryType,
-  registerUpload,
-  setUploadProgress,
   setUploadComplete,
   setUploadError,
-  clearAllUploads,
-  setSeamlyContainerElement,
+  setUploadProgress,
+  setUserEntryType,
+  setUserSelectedOption,
+  setUserSelectedOptions,
+  showOption,
+  stopIdleDetachCountdownCounter,
 } from 'domains/store/slice'
 import {
   ChannelEvent,
   HistoryResponse,
   ParticipantEvent,
 } from 'domains/store/store.types'
-import { useDispatch } from 'react-redux'
 
 export const useSeamlyActions = () => {
   const dispatch = useDispatch()

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

@@ -1,20 +1,19 @@
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import { useDispatch, useSelector } from 'react-redux'
+import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
 import { useI18n } from 'domains/i18n/hooks'
 import { setIsLoading } from 'domains/store/slice'
-import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
-import { useCallback, useEffect, useRef } from 'preact/hooks'
-import { useDispatch, useSelector } from 'react-redux'
 import { selectShowInlineView } from '../../domains/visibility/selectors'
 import { useLiveRegion } from './live-region-hooks'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useEvents, useSeamlyLayoutMode } from './seamly-state-hooks'
-import useSeamlyCommands from './use-seamly-commands'
 
 const useSeamlyChat = () => {
   const events = useEvents()
   const { t } = useI18n()
-  const { isInline, isWindow } = useSeamlyLayoutMode()
-  const { isOpen, isVisible, setVisibility } = useVisibility()
+  const { isInline, isWindow, isApp } = useSeamlyLayoutMode()
+  const { isOpen, isVisible } = useVisibility()
   const showInlineView = useSelector(selectShowInlineView)
   const dispatch = useDispatch()
   const spinnerTimeout = useRef(null)
@@ -22,7 +21,7 @@ const useSeamlyChat = () => {
   const hasConversation = useSeamlyHasConversation()
   const prevIsOpen = useRef(null)
   const prevIsVisible = useRef(null)
-  const startCalled = useRef(false)
+  const connectCalled = useRef(false)
   const { sendAssertive } = useLiveRegion()
 
   useEffect(() => {
@@ -80,22 +79,22 @@ const useSeamlyChat = () => {
     // This is needed to reset the ref to allow connect and start to happen again.
     // Mostly due to Interrupt situations and a reset being called.
     if (!apiConfigReady || !apiConnected) {
-      startCalled.current = false
+      connectCalled.current = false
     }
   }, [apiConfigReady, apiConnected])
 
   const connectAndStart = useCallback(async () => {
     // We don't connect if we are already connected to the api to avoid multiple in-flight connection processes.
     if (!apiConnected) {
+      connectCalled.current = true
       await connect()
     }
 
-    // We only start a conversation when the chat interface is either 'open' or if using the inline view if it's 'open' or 'minimized'.
-    if (isOpen || (isVisible && isInline)) {
+    // We only start a conversation when the chat interface is either app, 'open' or if using the inline view if it's 'open' or 'minimized'.
+    if (isApp || isOpen || (isVisible && isInline)) {
       start()
-      startCalled.current = true
     }
-  }, [apiConnected, connect, isInline, isOpen, isVisible, start])
+  }, [apiConnected, connect, isApp, isInline, isOpen, isVisible, start])
 
   useEffect(() => {
     // We dont't connect or start when the apiConfig is not ready yet.
@@ -104,9 +103,9 @@ const useSeamlyChat = () => {
     // Lastly we check if the inline view is not scrolled in to view.
     if (
       !apiConfigReady ||
-      startCalled.current ||
+      connectCalled.current ||
       (isWindow && !isOpen && !hasConversation()) ||
-      (isInline && !showInlineView)
+      (isInline && (!isVisible || !showInlineView))
     ) {
       return
     }
@@ -127,18 +126,9 @@ const useSeamlyChat = () => {
     isInline,
     isOpen,
     isWindow,
+    isVisible,
     showInlineView,
   ])
-
-  const openChat = () => {
-    setVisibility(visibilityStates.open)
-  }
-
-  const closeChat = () => {
-    setVisibility(visibilityStates.minimized)
-  }
-
-  return { openChat, closeChat }
 }
 
 export default useSeamlyChat

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

@@ -1,18 +1,17 @@
+import { useCallback, useContext } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 import { userParticipantId } from 'config'
-import { useUserHasResponded } from 'domains/app/hooks'
+import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
+import { actionTypes } from 'ui/utils/seamly-utils'
 import * as AppActions from 'domains/app/actions'
+import { useUserHasResponded } from 'domains/app/hooks'
 import { setHasResponded } from 'domains/app/slice'
 import { useConfig } from 'domains/config/hooks'
 import { setInterrupt } from 'domains/interrupt/slice'
 import { addEvent, setInitialState } from 'domains/store/slice'
 import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
-
 import { randomId } from 'lib/id'
-import { useCallback, useContext } from 'preact/hooks'
-import { useDispatch } from 'react-redux'
-import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
-import { actionTypes } from 'ui/utils/seamly-utils'
 import {
   useSeamlyApiContext,
   useSeamlyHasConversation,
@@ -120,8 +119,13 @@ const useSeamlyCommands = () => {
   )
 
   const addMessageBubble = useCallback(
-    (text) => {
-      dispatch(addEvent({ type: 'message', payload: getTextMessageBase(text) }))
+    (text, transactionId = randomId()) => {
+      dispatch(
+        addEvent({
+          type: 'message',
+          payload: { ...getTextMessageBase(text), transactionId },
+        }),
+      )
     },
     [dispatch, getTextMessageBase],
   )
@@ -148,13 +152,13 @@ const useSeamlyCommands = () => {
   )
 
   const addDivider = useCallback(
-    (subtype) => {
+    (subtype, transactionId = randomId()) => {
       const payload = {
         body: { subtype, type: 'divider' },
         fromClient: false,
         fromHistory: true,
         id: randomId(),
-        transactionId: randomId(),
+        transactionId,
         type: 'divider',
       }
 
@@ -205,11 +209,12 @@ const useSeamlyCommands = () => {
       .catch((error) => {
         dispatch(
           setInterrupt({
-            name: error.name,
-            message: error.message,
-            langKey: error.langKey,
-            originalEvent: error.originalEvent,
-            originalError: error.originalError,
+            name: error?.name,
+            message: error?.message,
+            langKey: error?.langKey,
+            action: error?.action,
+            originalEvent: error?.originalEvent,
+            originalError: error?.originalError,
           }),
         )
       })

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

@@ -1,19 +1,19 @@
+import { useCallback, useRef } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 import { screenReaderDebounceDelaySeconds } from 'config'
+import {
+  getTimeFromSeconds,
+  millisecondsToSeconds,
+} from 'ui/utils/general-utils'
+import { actionTypes } from 'ui/utils/seamly-utils'
 import { useI18n } from 'domains/i18n/hooks'
-import { useVisibility } from 'domains/visibility/hooks'
 import {
   clearIdleDetachCountdown,
   decrementIdleDetachCountdownCounter,
   initIdleDetachCountdown,
   stopIdleDetachCountdownCounter,
 } from 'domains/store/slice'
-import { useCallback, useRef } from 'preact/hooks'
-import { useDispatch } from 'react-redux'
-import {
-  getTimeFromSeconds,
-  millisecondsToSeconds,
-} from 'ui/utils/general-utils'
-import { actionTypes } from 'ui/utils/seamly-utils'
+import { useVisibility } from 'domains/visibility/hooks'
 import { useLiveRegion } from './live-region-hooks'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'

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

@@ -1,7 +1,7 @@
-import { useI18n } from 'domains/i18n/hooks'
-import { clearResumeConversationPrompt } from 'domains/store/slice'
 import { useDispatch } from 'react-redux'
 import { actionTypes, dismissTypes } from 'ui/utils/seamly-utils'
+import { useI18n } from 'domains/i18n/hooks'
+import { clearResumeConversationPrompt } from 'domains/store/slice'
 import { useLiveRegion } from './live-region-hooks'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'

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

@@ -1,5 +1,5 @@
-import { getControlValueByName } from 'domains/forms/selectors'
 import { useSelector } from 'react-redux'
+import { getControlValueByName } from 'domains/forms/selectors'
 import { useFileUploads } from './seamly-hooks'
 
 const useSingleFileUpload = (formId, name) => {

package/src/javascripts/ui/hooks/utility-hooks.js

@@ -1,4 +1,3 @@
-import { randomId } from 'lib/id'
 import {
   useCallback,
   useMemo,
@@ -6,6 +5,7 @@ import {
   useRef,
   useState,
 } from 'preact/hooks'
+import { randomId } from 'lib/id'
 
 export const useForceUpdate = () => {
   // This is an escape hatch mentioned in the React docs:

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

@@ -105,29 +105,6 @@ export const formatBytes = (bytes, decimals = 2) => {
   return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
 }
 
-export const getUrlParams = () => {
-  const { search } = window.location
-
-  if (!search) {
-    return {}
-  }
-
-  const hashes = search.slice(search.indexOf('?') + 1).split('&')
-
-  return hashes.reduce((acc, hash) => {
-    const [key, val] = hash.split('=')
-    return { ...acc, [key]: decodeURIComponent(val) }
-  }, {})
-}
-
-export const getUrlSearchString = (params) => {
-  return Object.keys(params).reduce(
-    (search, key) =>
-      `${search}${search ? '&' : ''}${key}=${encodeURIComponent(params[key])}`,
-    '',
-  )
-}
-
 export const keyCodes = {
   27: 'Escape',
   35: 'End',

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

@@ -46,9 +46,18 @@ export const actionTypes = {
   clickCard: 'click_card',
 }
 
+export const TRANSLATION_PROPOSAL = 'translation_proposal'
+
 export const dismissTypes = {
   resumeConversationPrompt: 'resume_conversation_prompt',
-}
+  translationProposal: TRANSLATION_PROPOSAL,
+} as const
+
+export const sourceTypes = {
+  translationProposal: TRANSLATION_PROPOSAL,
+  translationChoice: 'translation_choice',
+  windowApi: 'window_api',
+} as const
 
 export const ariaLiveLevels = {
   assertive: 'assertive',

package/src/javascripts/ui/utils/seamly-utils.types.ts

@@ -0,0 +1,9 @@
+// Generic ValueOf type to force value of objects
+// example:
+// export const objectType = {
+//   infoKey: 'info_key',
+//   messageKey: 'message_key',
+// } as const <- important for Typescript
+// const forceValueOf = ValueOf<typeof objectType> = objectType.infoKey GOOD
+// const forceValueOf = ValueOf<typeof objectType> = "anything else" ERR
+export type ValueOf<T> = T[keyof T]

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

@@ -81,7 +81,7 @@ $chat-window-width: $spacer * 18 !default;
 $chat-window-height: $spacer * 36 !default;
 
 // CHAT INLINE
-$chat-inline-height: $spacer * 32 !default;
+$chat-inline-height: $spacer * 36 !default;
 $chat-inline-maxheight: 90vh !default;
 
 // CHAT SUGGESTION

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

@@ -71,6 +71,8 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
   transition: flex $transition, width $transition, height $transition,
     border-radius $transition;
   border: $thin-border solid set-border-color($chat-bg);
@@ -106,21 +108,34 @@
 .#{$n}-chat__container {
   display: flex;
   position: relative;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+  flex-grow: 1;
+  justify-content: center;
+
+  &__scroll-area {
+    overscroll-behavior: contain;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    will-change: scroll-position;
+  }
+
+  &__header {
+    display: flex;
+    position: sticky;
+    z-index: 1;
+    top: 0;
+  }
 }
 
 .#{$n}-chat__body {
   display: flex;
   position: relative;
-  flex-grow: 4;
+  flex-grow: 1;
   padding: 0;
-  overflow-y: auto;
-}
-
-.#{$n}-chat--layout-window .#{$n}-chat__body {
-  overscroll-behavior: contain;
 }
 
 .#{$n}-chat__entry {

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

@@ -1,39 +1,95 @@
 .#{$n}-chat-status {
   display: flex;
-  position: absolute;
   z-index: 1;
   top: $spacer;
-  left: $spacer;
+  right: 0;
+  left: 0;
   align-items: center;
-  justify-content: space-between;
-  width: calc(100% - #{$spacer * 2});
-  height: $buttonsize;
+  width: 100%;
   min-height: $buttonsize;
-  padding: $spacer * 0.25 $spacer;
-  border-radius: $borderradius-large;
+  margin: $spacer;
+  padding: $spacer * 0.5;
+  border-radius: $borderradius;
   background-color: $white;
   box-shadow: $boxshadow;
+
+  &--condensed {
+    padding: $spacer * 0.25;
+
+    .#{$n}-chat-status__title {
+      padding-left: $spacer * 0.25;
+    }
+
+    .#{$n}-chat-status__close {
+      min-height: $buttonsize-small;
+      padding-right: $spacer * 0.25;
+    }
+  }
 }
 
-&.#{$n}-app--collapsed .#{$n}-chat-status {
-  display: none;
+.#{$n}-chat--layout-window {
+  .#{$n}-chat-status {
+    margin-right: $buttonsize + $spacer * 2;
+  }
 }
 
-.#{$n}-chat--layout-window .#{$n}-chat-status {
-  width: calc(100% - #{$spacer * 2.5 + $buttonsize});
+.#{$n}-chat-status__body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: flex-start;
+  justify-content: flex-start;
 }
 
 .#{$n}-chat-status__title {
   display: flex;
-  flex: 1;
-  align-items: center;
   margin: 0 $spacer * 0.5 0 0;
   color: $grey-e;
-  font-size: $fontsize-small;
+  font-size: $fontsize-medium;
   font-weight: $fontweight-bold;
   line-height: 1.25;
+
+  + .#{$n}-chat-status__button {
+    margin-top: $spacer * 0.5;
+  }
+}
+
+.#{$n}-chat-status .#{$n}-icon {
+  flex: 0 0 $iconsize-small;
+  width: $iconsize-small;
+  height: $iconsize-small;
 }
 
-.#{$n}-chat-status .#{$n}-button--tertiary {
-  color: $interaction;
+.#{$n}-chat-status__button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: $buttonsize-small;
+  padding: $spacer * 0.25 $spacer * 0.5;
+  color: $white;
+
+  .#{$n}-icon {
+    margin-right: $spacer * 0.25;
+
+    svg {
+      width: 100%;
+      height: 100%;
+
+      path {
+        fill: $white;
+      }
+    }
+  }
+}
+
+.#{$n}-chat-status__close {
+  display: inline-flex;
+  align-self: flex-start;
+  justify-content: center;
+  min-height: $buttonsize-small - $spacer * 0.5;
+  color: $brand3;
+
+  .#{$n}-icon {
+    align-self: center;
+  }
 }

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

@@ -34,7 +34,7 @@
 }
 
 .#{$n}-chat-status
-  ~ .#{$n}-chat__container
+  ~ .#{$n}-chat__container__scroll-area
   .#{$n}-disclaimer
   + .#{$n}-conversation {
   padding-top: 0;
@@ -66,3 +66,37 @@
     margin-bottom: 0;
   }
 }
+
+.#{$n}-unread-messages {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  align-items: center;
+  justify-content: center;
+  margin: $spacer;
+  opacity: 0;
+
+  > .#{$n}-button {
+    display: flex;
+    align-items: center;
+
+    > .#{$n}-icon {
+      width: $spacer;
+      height: $spacer;
+      margin-left: calc($spacer / 2);
+
+      svg path {
+        fill: $white;
+      }
+    }
+  }
+}
+
+.#{$n}-unread-messages.#{$n}-transition--visible {
+  display: flex;
+}
+
+.#{$n}-unread-messages.#{$n}-transition--in {
+  transition: opacity $transition 1000ms;
+  opacity: 1;
+}

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

@@ -11,11 +11,6 @@
   padding-right: $buttonsize + $spacer * 2;
 }
 
-.#{$n}-chat-status ~ .#{$n}-chat__container .#{$n}-disclaimer {
-  margin-top: $buttonsize + $spacer * 2;
-  padding: $spacer * 0.5 $spacer;
-}
-
 .#{$n}-disclaimer__title {
   margin: 0 0 $spacer * 0.25;
   padding-right: $spacer;

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

@@ -94,6 +94,7 @@
 .#{$n}-options {
   display: none;
   position: absolute;
+  z-index: 10;
   right: $spacer * 0.5;
   bottom: calc(100% + (#{$spacer} * 0.5));
   flex-direction: column;
@@ -101,8 +102,6 @@
   max-width: $spacer * 15;
   margin: 0;
   padding: 0;
-  transform: scaleY(0) translateY($spacer * 5);
-  transform-origin: 100% 100%;
   transition: transform 0.2s ease-in-out, opacity 0.2s ease;
   border: $thin-border solid $grey-b;
   border-radius: $borderradius-small;
@@ -121,6 +120,20 @@
   right: $spacer * 0.5;
 }
 
+.#{$n}-options--top {
+  top: initial;
+  bottom: calc(100% + $spacer * 0.5);
+  transform: scaleY(0) translateY($spacer * 5);
+  transform-origin: 100% 100%;
+}
+
+.#{$n}-options--bottom {
+  top: calc(100% + $spacer * 0.5);
+  bottom: initial;
+  transform: scaleY(0) translateY(-$spacer * 5);
+  transform-origin: 0 0;
+}
+
 .#{$n}-options__dialog.#{$n}-transition--visible .#{$n}-options {
   display: flex;
 }
@@ -201,10 +214,6 @@
   }
 }
 
-.#{$n}-options__body div {
-  width: 100%;
-}
-
 .#{$n}-options__wrapper h3 {
   margin: 0;
   color: $brand2;
@@ -216,6 +225,7 @@
   display: block;
   width: 100%;
   margin-bottom: $spacer * 0.5;
+  padding: 0 $spacer;
   font-size: $fontsize-medium;
 }