@seamly/web-ui 20.8.1 → 21.0.0

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

@@ -1,10 +1,10 @@
-import { setSeamlyContainerElement } from 'domains/store/slice'
 import { useCallback, useRef } from 'preact/hooks'
 import { useDispatch } from 'react-redux'
 import {
   focusElement,
   runIfElementContainsOrHasFocus,
 } from 'ui/utils/general-utils'
+import { setSeamlyContainerElement } from 'domains/store/slice'
 import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
 
 export const timeout = (ms = 0) =>

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

@@ -1,14 +1,14 @@
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 import { typingTimeout } from 'config'
+import { useSeamlyCommands, useSeamlyOptions } from 'ui/hooks/seamly-hooks'
+import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
 import {
-  setBlockAutoEntrySwitch,
   setActiveEntryType,
+  setBlockAutoEntrySwitch,
   setUserEntryType,
 } from 'domains/store/slice'
-import { useSeamlyCommands, useSeamlyOptions } from 'ui/hooks/seamly-hooks'
-import { useRef, useEffect, useCallback } from 'preact/hooks'
-import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
-import { useDispatch } from 'react-redux'
-import { actionTypes } from 'ui/utils/seamly-utils'
 
 export const useSeamlyTyping = () => {
   const { sendAction } = useSeamlyCommands()

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

@@ -1,6 +1,7 @@
 import { useEffect } from 'preact/hooks'
 // Import extracted hooks here for use inside this file
 import { useSeamlyApiContext } from './seamly-api-hooks'
+
 // Export extracted hooks here,
 // although this is a redundant, it prevents a bazillion code changes for now.
 // TODO: Remove exports and import them from the correct files
@@ -56,16 +57,16 @@ export const useSeamlyEventStream = (nextFn, filterFn) => {
   const api = useSeamlyApiContext()
 
   useEffect(() => {
-    if (api.stream) {
-      if (filterFn) {
-        api.stream().filter(filterFn).subscribe({
-          next: nextFn,
-        })
-      } else {
-        api.stream().subscribe({
-          next: nextFn,
-        })
+    if (api.connectionInfo && api.conversation?.channel) {
+      const { channel } = api.conversation
+
+      channel.onMessage = (type, payload) => {
+        if (!filterFn || filterFn({ type, payload })) {
+          nextFn({ type, payload })
+        }
+
+        return payload
       }
     }
-  }, [api, nextFn, filterFn])
+  }, [nextFn, filterFn, api.connectionInfo, api.conversation])
 }

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

@@ -1,15 +1,15 @@
+import { useCallback } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import { useElementFocusingById } from 'ui/hooks/focus-helper-hooks'
+import { useSeamlyObjectStore } from 'ui/hooks/seamly-api-hooks'
+import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import {
   hideOption as dispatchHideOption,
+  showOption as dispatchShowOption,
   setUserSelectedOption as dispatchUserSelectedOption,
   setUserSelectedOptions as dispatchUserSelectedOptions,
-  showOption as dispatchShowOption,
 } from 'domains/store/slice'
-import { useCallback } from 'preact/hooks'
-import { useDispatch } from 'react-redux'
-import { useElementFocusingById } from 'ui/hooks/focus-helper-hooks'
-import { useSeamlyObjectStore } from 'ui/hooks/seamly-api-hooks'
-import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
 
 export const useSeamlyOptions = () => {
   const { t } = useI18n()

package/src/javascripts/ui/hooks/{seamly-state-hooks.js → seamly-state-hooks.ts}

@@ -1,11 +1,13 @@
-import * as ConfigSelectors from 'domains/config/selectors'
-import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 import { createSelector } from '@reduxjs/toolkit'
+import { useSelector } from 'react-redux'
+import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 import { selectUserHasResponded } from 'domains/app/selectors'
 import { useConfig } from 'domains/config/hooks'
-import { useSelector } from 'react-redux'
+import * as ConfigSelectors from 'domains/config/selectors'
+import type { RootState } from 'domains/store'
+import type { ChannelEvent, ServiceDataEvent } from 'domains/store/store.types'
 
-export const selectState = ({ state }) => state
+export const selectState = ({ state }: RootState) => state
 export const useSeamlyStateContext = () => useSelector(selectState)
 
 export const selectEventsWithSuggestion = createSelector(
@@ -22,7 +24,7 @@ export const selectEventsWithSuggestion = createSelector(
       return events
     }
 
-    const suggestionsEvent = {
+    const suggestionsEvent: ServiceDataEvent = {
       type: 'service_data',
       payload: serviceData.suggestion,
     }
@@ -34,7 +36,7 @@ export const selectEventsWithSuggestion = createSelector(
 export const selectEvents = createSelector(
   selectEventsWithSuggestion,
   ConfigSelectors.selectConfig,
-  (events, config) => {
+  (events, config): ChannelEvent[] => {
     const { enabled, threshold } = config?.messages?.timeIndicator ?? {}
     if (!enabled) {
       return events
@@ -128,6 +130,7 @@ export const useSeamlyLayoutMode = () => {
   return {
     isInline: layoutMode === 'inline',
     isWindow: layoutMode === 'window',
+    isApp: layoutMode === 'app',
     isResolving: !layoutMode,
   }
 }

package/src/javascripts/ui/hooks/use-click-outside.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'preact/hooks'
+
+const useClickOutside = (callback: Function) => {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const handler = ({ target }: TouchEvent | MouseEvent): void => {
+      if (
+        ref.current &&
+        target instanceof HTMLElement &&
+        !ref.current.contains(target)
+      ) {
+        callback()
+      }
+    }
+
+    document.addEventListener('click', handler, true)
+    document.addEventListener('touchstart', handler, true)
+
+    return () => {
+      document.removeEventListener('click', handler, true)
+      document.removeEventListener('touchstart', handler, true)
+    }
+  }, [callback, ref])
+
+  return ref
+}
+
+export default useClickOutside

package/src/javascripts/ui/hooks/use-event-component-mapping.js

@@ -4,22 +4,23 @@ import { payloadTypes } from 'ui/utils/seamly-utils'
 
 const useEventComponentMapping = (event) => {
   const components = useContext(ComponentContext)
-
+  const componentType = components[event.type]
+  let Component = componentType[event.payload.type]
   let SubComponent = null
 
   if (event.payload.type === payloadTypes.choicePrompt) {
-    SubComponent = components[event.type][event.payload.body.prompt.type]
+    SubComponent = componentType[event.payload.body.prompt.type]
+  }
+
+  if (event.type === 'participant') {
+    Component = componentType[event.type]
   }
 
-  const Component =
-    components[event.type][event.payload.type] || components.fallback
+  if (Component && typeof Component !== 'function') {
+    Component = Component[event.payload.body.type]
+  }
 
-  return [
-    Component && typeof Component !== 'function'
-      ? Component[event.payload.body.type] || components.fallback
-      : Component,
-    SubComponent,
-  ]
+  return [Component || components.fallback, SubComponent]
 }
 
 export default useEventComponentMapping

package/src/javascripts/ui/hooks/use-interval.js

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'preact/hooks'
+import { useEffect, useRef } from 'preact/hooks'
 
 const useInterval = (callback, delay) => {
   const savedCallback = useRef(callback)

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,9 +1,8 @@
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import { useDispatch, useSelector } from 'react-redux'
 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'
@@ -13,8 +12,8 @@ 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,17 +108,33 @@
 .#{$n}-chat__container {
   display: flex;
   position: relative;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+  flex-grow: 1;
+  justify-content: center;
+
+  &__scroll-area {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    will-change: transform;
+  }
+
+  &__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 {