@seamly/web-ui 20.8.1 → 21.0.0

package/src/javascripts/ui/components/conversation/use-chat-scroll.ts

@@ -0,0 +1,108 @@
+import { RefObject } from 'preact'
+import {
+  MutableRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'preact/hooks'
+import { useSelector } from 'react-redux'
+import { timeout } from 'ui/hooks/focus-helper-hooks'
+import {
+  useEvents,
+  useLoadedImageEventIds,
+  useSeamlyIsLoading,
+} from 'ui/hooks/seamly-state-hooks'
+import { RootState } from 'domains/store'
+import { selectUnreadEventIds } from 'domains/store/selectors'
+import { useVisibility } from 'domains/visibility/hooks'
+
+/**
+ * Threshold defines how close to the bottom user needs to scroll for it to be treated as the bottom of the conversation.
+ */
+const THRESHOLD = 10
+
+const useChatScroll = (
+  eventRefs: Record<string, RefObject<HTMLElement>>,
+): {
+  containerRef: MutableRef<HTMLDivElement>
+  unreadIds: string[]
+  scrollToRef: () => void
+  scrollToBottom: () => void
+} => {
+  const containerRef = useRef<HTMLDivElement>()
+  const [hasScrolledToBottom, setHasScrolledToBottom] = useState(true)
+  const unreadIds = useSelector(selectUnreadEventIds)
+  const events = useEvents()
+  const isLoading = useSeamlyIsLoading()
+  const { isOpen } = useVisibility()
+  const loadedImageEventIds = useLoadedImageEventIds()
+  const isLastEventFromClient = useSelector(
+    (state: RootState) => state.state.isLastEventFromClient,
+  )
+
+  useEffect(() => {
+    const element = containerRef.current
+    const onScroll = () => {
+      const { scrollHeight, scrollTop, clientHeight } = element
+      const hasScrolledUp =
+        Math.abs(scrollHeight - scrollTop - clientHeight) > THRESHOLD
+
+      setHasScrolledToBottom(!hasScrolledUp)
+    }
+
+    element.addEventListener('scroll', onScroll)
+
+    return () => element.removeEventListener('scroll', onScroll)
+  }, [])
+
+  const scrollToBottom = useCallback(() => {
+    requestAnimationFrame(async () => {
+      await timeout(30)
+      containerRef.current?.scrollTo({
+        top: containerRef.current?.scrollHeight,
+        left: 0,
+        behavior: 'auto',
+      })
+    })
+  }, [])
+
+  useEffect(() => {
+    if (isLastEventFromClient) {
+      scrollToBottom()
+    }
+  }, [isLastEventFromClient, scrollToBottom])
+
+  useEffect(() => {
+    if (hasScrolledToBottom) {
+      scrollToBottom()
+    }
+  }, [
+    hasScrolledToBottom,
+    unreadIds,
+    events,
+    isLoading,
+    isOpen,
+    loadedImageEventIds,
+    scrollToBottom,
+  ])
+
+  const scrollToRef = () => {
+    const ref = eventRefs[unreadIds?.at(0)]?.current
+    // We scroll to the oldest unread event
+    containerRef.current?.scrollTo({
+      top: ref?.offsetTop,
+      behavior: 'auto',
+      left: 0,
+    })
+  }
+
+  return {
+    containerRef,
+    unreadIds,
+    scrollToRef,
+    scrollToBottom,
+  }
+}
+
+export default useChatScroll

package/src/javascripts/ui/components/core/{seamly-activity-monitor.js → seamly-activity-monitor.tsx}

@@ -1,23 +1,30 @@
-import { useRef, useCallback } from 'preact/hooks'
+import { useCallback, useRef } from 'preact/hooks'
+import { activitySendDelay } from 'config'
 import {
   useSeamlyCommands,
   useSeamlyIdleDetachCountdown,
 } from 'ui/hooks/seamly-hooks'
-import { activitySendDelay } from 'config'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 import SeamlyActivityEventContext from './seamly-activity-event-context'
 
 const SeamlyActivityMonitor = ({ children }) => {
+  const { isMinimized } = useVisibility()
   const prevSendTimestamp = useRef(0)
   const { sendAction } = useSeamlyCommands()
   const { hasCountdown, isActive, stopCountdown } =
     useSeamlyIdleDetachCountdown()
 
   const onActivityHandler = useCallback(() => {
+    if (isMinimized) {
+      return
+    }
+
     const timeStamp = new Date().getTime()
 
     const sendActive = () => {
-      sendAction({ type: 'interactivity_update' })
+      sendAction({ type: actionTypes.interactivityUpdate })
       prevSendTimestamp.current = timeStamp
     }
 
@@ -29,7 +36,7 @@ const SeamlyActivityMonitor = ({ children }) => {
     if (timeStamp - prevSendTimestamp.current > activitySendDelay) {
       sendActive()
     }
-  }, [sendAction, hasCountdown, isActive, stopCountdown])
+  }, [sendAction, hasCountdown, isActive, stopCountdown, isMinimized])
 
   // It is important to use keyUp here as focus may be set from outside the
   // chat container via keyboard. In this case the keyDown handler would not
@@ -37,7 +44,7 @@ const SeamlyActivityMonitor = ({ children }) => {
   return (
     <div
       className={className('activity-monitor')}
-      tabIndex="-1"
+      tabIndex={-1}
       onMouseDown={onActivityHandler}
       onKeyUp={onActivityHandler}
       onTouchStart={onActivityHandler}

package/src/javascripts/ui/components/core/seamly-api-context.ts

@@ -0,0 +1,7 @@
+import { API } from 'api'
+import { Events } from 'minivents'
+import { createContext } from 'preact'
+
+export const SeamlyApiContext = createContext<API>(null)
+
+export const SeamlyEventBusContext = createContext<Events>(null)

package/src/javascripts/ui/components/core/seamly-chat.tsx

@@ -0,0 +1,8 @@
+import useSeamlyChat from 'ui/hooks/use-seamly-chat'
+
+const SeamlyChat = ({ children }) => {
+  useSeamlyChat()
+  return <>{children}</>
+}
+
+export default SeamlyChat

package/src/javascripts/ui/components/core/{seamly-core.js → seamly-core.tsx}

@@ -1,6 +1,11 @@
-import { catchError } from 'domains/errors'
+import { API } from 'api'
+import { Events } from 'minivents'
+import { FunctionComponent } from 'preact'
 import { useErrorBoundary } from 'preact/hooks'
 import { Provider } from 'react-redux'
+import SeamlyChat from 'ui/components/core/seamly-chat'
+import { catchError } from 'domains/errors'
+import { Store } from 'domains/store'
 import ComponentFilter from '../conversation/component-filter'
 import SeamlyActivityMonitor from './seamly-activity-monitor'
 import { SeamlyApiContext, SeamlyEventBusContext } from './seamly-api-context'
@@ -13,25 +18,33 @@ import SeamlyLiveRegion from './seamly-live-region'
 import SeamlyNewNotifications from './seamly-new-notifications'
 import SeamlyReadState from './seamly-read-state'
 
-const SeamlyCore = ({ store, children, eventBus, api }) => {
-  useErrorBoundary((error) => store.dispatch(catchError(error)))
+const SeamlyCore: FunctionComponent<{
+  store: Store
+  eventBus: Events
+  api: API
+}> = ({ store, children, eventBus, api }) => {
+  useErrorBoundary((error) => {
+    store.dispatch(catchError(error))
+  })
 
   return (
     <Provider store={store}>
       <SeamlyEventBusContext.Provider value={eventBus}>
         <SeamlyApiContext.Provider value={api}>
           <SeamlyLiveRegion>
-            <ComponentFilter>
-              <SeamlyInitializer />
-              <SeamlyEventSubscriber eventBus={eventBus} />
-              <SeamlyReadState />
-              <SeamlyNewNotifications />
-              <SeamlyIdleDetachCounter />
-              <SeamlyActivityMonitor>
-                <SeamlyInstanceFunctionsLoader />
-                <SeamlyFileUpload>{children}</SeamlyFileUpload>
-              </SeamlyActivityMonitor>
-            </ComponentFilter>
+            <SeamlyChat>
+              <ComponentFilter>
+                <SeamlyInitializer />
+                <SeamlyEventSubscriber />
+                <SeamlyReadState />
+                <SeamlyNewNotifications />
+                <SeamlyIdleDetachCounter />
+                <SeamlyActivityMonitor>
+                  <SeamlyInstanceFunctionsLoader />
+                  <SeamlyFileUpload>{children}</SeamlyFileUpload>
+                </SeamlyActivityMonitor>
+              </ComponentFilter>
+            </SeamlyChat>
           </SeamlyLiveRegion>
         </SeamlyApiContext.Provider>
       </SeamlyEventBusContext.Provider>

package/src/javascripts/ui/components/core/seamly-event-subscriber.ts

@@ -0,0 +1,340 @@
+import { useContext, useEffect, useRef } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
+import SeamlyOfflineError from 'api/errors/seamly-offline-error'
+import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
+import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
+import {
+  useEvents,
+  useSeamlyApiContext,
+  useSeamlyCommands,
+  useSeamlyIdleDetachCountdown,
+} from 'ui/hooks/seamly-hooks'
+import { featureKeys } from 'ui/utils/seamly-utils'
+import { setHasResponded } from 'domains/app/slice'
+import { clearInterrupt, setInterrupt } from 'domains/interrupt/slice'
+import {
+  ackEvent,
+  addEvent,
+  clearEvents,
+  initResumeConversationPrompt,
+  setActiveService,
+  setFeatureEnabledState,
+  setHeaderSubTitle,
+  setHistory,
+  setIsLoading,
+  setParticipant,
+  setServiceDataItem,
+  setServiceEntryMetadata,
+} from 'domains/store/slice'
+import type { AckEvent, ChannelEvent } from 'domains/store/store.types'
+import { setTranslationProposalPrompt } from 'domains/translations/slice'
+
+const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video']
+
+const SeamlyEventSubscriber = () => {
+  const api = useSeamlyApiContext()
+
+  const dispatch = useDispatch()
+  const events = useEvents()
+  const eventBus = useContext(SeamlyEventBusContext)
+  const prevEmittedEventId = useRef(null)
+  const { initCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
+  const { emitEvent } = useSeamlyCommands()
+
+  useEffect(() => {
+    if (api.connectionInfo && api.conversation.socket) {
+      const { socket } = api.conversation
+      socket.onError((err) => {
+        const seamlyOfflineError = new SeamlyOfflineError(err)
+        dispatch(
+          setInterrupt({
+            name: seamlyOfflineError.name,
+            message: seamlyOfflineError.message,
+            langKey: seamlyOfflineError.langKey,
+            originalEvent: seamlyOfflineError.originalEvent,
+            originalError: seamlyOfflineError.originalError,
+          }),
+        )
+        dispatch(clearEvents())
+      })
+
+      socket.onOpen(() => {
+        dispatch(clearInterrupt())
+      })
+    }
+  }, [api, api.connectionInfo, api.conversation.socket, dispatch])
+
+  useEffect(() => {
+    if (api.connectionInfo && api.conversation.channel) {
+      const { channel } = api.conversation
+      return () => {
+        channel?.leave()
+      }
+    }
+    return () => {}
+  }, [api, api.connectionInfo, api.conversation])
+
+  useEffect(() => {
+    api.conversation.onConnection((connectionState) => {
+      if (connectionState === 'join_channel_erred') {
+        const seamlyGeneralError = new SeamlyGeneralError()
+        dispatch(
+          setInterrupt({
+            name: seamlyGeneralError.name,
+            message: seamlyGeneralError.message,
+            langKey: seamlyGeneralError.langKey,
+            originalEvent: seamlyGeneralError.originalEvent,
+            originalError: seamlyGeneralError.originalError,
+            action: seamlyGeneralError.action,
+          }),
+        )
+      }
+    })
+  }, [api.conversation, dispatch])
+
+  useEffect(() => {
+    if (api.connectionInfo && api.conversation.channel) {
+      const { channel } = api.conversation
+
+      const updateParticipant = (event) => {
+        const { payload } = event
+
+        if (!payload || !payload.participant) {
+          return
+        }
+
+        const { fromClient, participant } = payload
+
+        if (
+          !fromClient &&
+          typeof participant !== 'string' &&
+          participant?.name
+        ) {
+          dispatch(setHeaderSubTitle(participant.name))
+        }
+
+        dispatch(
+          setParticipant({
+            participant,
+            fromClient,
+          }),
+        )
+
+        if (typeof participant !== 'string' && participant.introduction) {
+          dispatch(
+            addEvent({
+              ...event,
+              payload: {
+                ...payload,
+                type: 'participant',
+              },
+            }),
+          )
+        }
+      }
+
+      channel.onMessage = (type, payload) => {
+        const event = { type, payload }
+
+        switch (type) {
+          case 'ui':
+            if (payload.state && payload.state.hasOwnProperty('loading')) {
+              dispatch(setIsLoading(payload.state.loading))
+            }
+            switch (payload.type) {
+              case 'idle_detach_countdown':
+                initCountdown(payload.body.duration)
+                break
+              case 'idle_detach_countdown_elapsed':
+                endCountdown(undefined, true)
+                break
+              case 'resume_conversation_prompt':
+                dispatch(initResumeConversationPrompt())
+                break
+              case 'translation_proposal':
+                dispatch(setTranslationProposalPrompt(payload.body))
+                break
+              case 'user_first_response':
+                dispatch(setHasResponded(true))
+                // @ts-ignore
+                eventBus.emit('system.userFirstResponse', payload.body)
+                break
+            }
+            break
+          case 'message':
+            updateParticipant(payload)
+            switch (payload.type) {
+              case 'text':
+              case 'choice_prompt':
+              case 'splash':
+              case 'image':
+              case 'upload':
+              case 'video':
+              case 'cta':
+              case 'custom':
+              case 'carousel':
+              case 'card':
+                if (payload.service && payload.service.serviceSessionId) {
+                  dispatch(setActiveService(payload.service.serviceSessionId))
+                }
+
+                dispatch(addEvent(event as ChannelEvent))
+                break
+            }
+            break
+          case 'participant':
+            updateParticipant(event)
+            break
+          case 'service_data':
+            if (payload.persist) {
+              dispatch(setServiceDataItem(payload))
+            }
+            break
+          case 'ack':
+            dispatch(ackEvent(event as AckEvent))
+            break
+          case 'system':
+            if (payload.type === 'service_changed') {
+              const { serviceSettings, ...eventPayload } = payload
+              const { entry } = serviceSettings
+              const { upload } = entry.options
+
+              dispatch(
+                setFeatureEnabledState({
+                  key: featureKeys.uploads,
+                  enabled: !!(upload && upload.enabled),
+                }),
+              )
+
+              dispatch(setServiceEntryMetadata(entry))
+              if (payload.serviceSessionId) {
+                dispatch(setActiveService(payload.serviceSessionId))
+              }
+
+              emitEvent('system.serviceChanged', eventPayload)
+            }
+            break
+          case 'info':
+            if (
+              payload.type === 'divider' ||
+              payload.type === 'text' ||
+              payload.type === 'translation'
+            ) {
+              dispatch(addEvent(event as ChannelEvent))
+            }
+            break
+          case 'error':
+            switch (payload.type) {
+              case 'find_conversation_erred':
+                const seamlySessionExpiredError = new SeamlySessionExpiredError(
+                  event,
+                )
+                dispatch(
+                  setInterrupt({
+                    name: seamlySessionExpiredError.name,
+                    action: seamlySessionExpiredError.action,
+                    message: seamlySessionExpiredError.message,
+                    originalEvent: seamlySessionExpiredError.originalEvent,
+                    originalError: seamlySessionExpiredError.originalError,
+                  }),
+                )
+                break
+              case 'conversation_erred':
+                const seamlyGeneralError = new SeamlyGeneralError(event)
+                dispatch(
+                  setInterrupt({
+                    name: seamlyGeneralError.name,
+                    message: seamlyGeneralError.message,
+                    langKey: seamlyGeneralError.langKey,
+                    originalEvent: seamlyGeneralError.originalEvent,
+                    originalError: seamlyGeneralError.originalError,
+                    action: seamlyGeneralError.action,
+                  }),
+                )
+                break
+            }
+        }
+
+        return payload
+      }
+    }
+  }, [
+    api,
+    api.connectionInfo,
+    api.conversation.channel,
+    dispatch,
+    emitEvent,
+    endCountdown,
+    eventBus,
+    initCountdown,
+  ])
+
+  useEffect(() => {
+    if (api.connectionInfo && api.conversation.channel) {
+      const { channel } = api.conversation
+
+      channel.on('message', (payload) => {
+        if (!EMITTABLE_MESSAGE_TYPES.includes(payload.type)) {
+          return payload
+        }
+
+        // This check dedupes the sending of messages via
+        // the bus if a duplicate connection exists in an
+        // error situation.
+        if (payload.id !== prevEmittedEventId.current) {
+          // @ts-ignore
+          eventBus.emit('message', payload)
+        }
+        prevEmittedEventId.current = payload.id
+        return payload
+      })
+    }
+  }, [api, api.connectionInfo, api.conversation.channel, eventBus])
+
+  useEffect(() => {
+    if (api.connectionInfo && api.conversation.channel) {
+      const { channel } = api.conversation
+
+      const syncChannelRef = channel.on('sync', (payload) => {
+        const lastEvent = events[events.length - 1]
+        const payloadLastEventId = payload?.lastEvent?.id
+
+        if (lastEvent && payloadLastEventId === lastEvent.payload.id) {
+          return payload
+        }
+
+        return api
+          .getConversation()
+          .then((history) => {
+            if (!history) {
+              return
+            }
+            dispatch(setHistory(history))
+          })
+          .catch((error) => {
+            dispatch(
+              setInterrupt({
+                name: error?.name,
+                message: error?.message,
+                langKey: error?.langKey,
+                action: error?.action,
+                originalEvent: error?.originalEvent,
+                originalError: error?.originalError,
+              }),
+            )
+          })
+      })
+
+      return () => {
+        channel.off('sync', syncChannelRef)
+      }
+    }
+
+    return () => undefined
+  }, [api, api.connectionInfo, api.conversation.channel, events, dispatch])
+
+  return null
+}
+
+export default SeamlyEventSubscriber

package/src/javascripts/ui/components/core/seamly-file-upload.js

@@ -1,3 +1,5 @@
+import { useDispatch } from 'react-redux'
+import { useSeamlyApiContext, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import {
   registerUpload,
@@ -6,8 +8,6 @@ import {
   setUploadProgress,
 } from 'domains/store/slice'
 import { randomId } from 'lib/id'
-import { useDispatch } from 'react-redux'
-import { useSeamlyApiContext, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import SeamlyFileUploadContext from './seamly-file-upload-context'
 
 const SeamlyFileUpload = ({ children }) => {

package/src/javascripts/ui/components/core/seamly-idle-detach-counter.js

@@ -1,5 +1,5 @@
-import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
 import useInterval from 'ui/hooks/use-interval'
+import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
 
 const SeamlyIdleDetachCounter = () => {
   const { hasCountdown, isActive, remaining, decrementCountdown } =

package/src/javascripts/ui/components/core/seamly-instance-functions-loader.js

@@ -1,18 +1,21 @@
 import { useContext, useEffect, useRef } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import { userParticipantId } from 'config'
 import {
-  useSeamlyCommands,
-  useSeamlyUnreadCount,
-  useSeamlyLayoutMode,
-  useSeamlyConversationUrl,
   useSeamlyActivityEventHandler,
   useSeamlyApiContext,
+  useSeamlyCommands,
+  useSeamlyConversationUrl,
+  useSeamlyLayoutMode,
+  useSeamlyUnreadCount,
 } from 'ui/hooks/seamly-hooks'
-import { actionTypes } from 'ui/utils/seamly-utils'
-import { useTranslations } from 'domains/translations/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { actionTypes, sourceTypes } from 'ui/utils/seamly-utils'
 import { useConfig } from 'domains/config/hooks'
-import { useVisibility } from 'domains/visibility/hooks'
+import { updateConfig } from 'domains/config/slice'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useTranslations } from 'domains/translations/hooks'
 import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
 import { SeamlyEventBusContext } from './seamly-api-context'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {
@@ -35,6 +38,7 @@ function useSeamlyInstanceFunction(functionName, fn, deps = []) {
 const SeamlyInstanceFunctionsLoader = () => {
   const config = useConfig()
   const { sendMessage, sendContext, sendAction } = useSeamlyCommands()
+  const dispatch = useDispatch()
   const { setVisibility, visible } = useVisibility()
   const currentVisibility = useRef(visible)
   const eventBus = useContext(SeamlyEventBusContext)
@@ -101,11 +105,20 @@ const SeamlyInstanceFunctionsLoader = () => {
   )
   useSeamlyInstanceFunction(
     'setTopic',
-    ({ name, fallbackMessage }) => {
+    ({ name, fallbackMessage, userTriggered }) => {
+      if (userTriggered) {
+        dispatch(updateConfig({ showSuggestions: false }))
+      }
+
       if (name && fallbackMessage) {
+        const participant = userTriggered ? userParticipantId : undefined
         sendAction({
           type: actionTypes.setTopic,
-          body: { name, fallbackMessage },
+          body: {
+            name,
+            fallbackMessage,
+            participant,
+          },
         })
       } else {
         console.warn(
@@ -120,7 +133,7 @@ const SeamlyInstanceFunctionsLoader = () => {
     'setTranslation',
     ({ enabled, locale }) => {
       if (enabled) {
-        enableTranslations(locale)
+        enableTranslations(locale, sourceTypes.windowApi)
       } else {
         disableTranslations()
       }

package/src/javascripts/ui/components/core/seamly-live-region.js

@@ -1,14 +1,14 @@
 import {
-  useState,
-  useEffect,
-  useRef,
   useCallback,
   useContext,
+  useEffect,
+  useRef,
+  useState,
 } from 'preact/hooks'
 import { ariaLiveLevels } from 'ui/utils/seamly-utils'
 import { className } from 'lib/css'
-import { SeamlyLiveRegionContext } from './seamly-live-region-context'
 import { SeamlyEventBusContext } from './seamly-api-context'
+import { SeamlyLiveRegionContext } from './seamly-live-region-context'
 
 const SeamlyLiveRegion = ({ children }) => {
   const eventBus = useContext(SeamlyEventBusContext)