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

package/src/javascripts/ui/components/conversation/event/chat-scroll/unread-messages-button.tsx

@@ -0,0 +1,30 @@
+import { useContext } from 'preact/hooks'
+import ChatScrollContext from 'ui/components/conversation/event/chat-scroll/chat-scroll-context'
+import Icon from 'ui/components/layout/icon'
+import InOutTransition from 'ui/components/widgets/in-out-transition'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
+
+const UnreadMessagesButton = () => {
+  const { scrollToRef, unreadIds } = useContext(ChatScrollContext)
+  const { isMinimized } = useVisibility()
+  const { t } = useI18n()
+
+  return (
+    <InOutTransition isActive={!!unreadIds.length && !isMinimized}>
+      <div className={className('unread-messages')}>
+        <button
+          type="button"
+          className={className('button', 'button--primary')}
+          onClick={scrollToRef}
+        >
+          {t('message.unreadMessagesCount', { unreadCount: unreadIds.length })}
+          <Icon name="chevronDown" size="32" alt="" />
+        </button>
+      </div>
+    </InOutTransition>
+  )
+}
+
+export default UnreadMessagesButton

package/src/javascripts/ui/components/conversation/event/choice-prompt.js

@@ -1,17 +1,18 @@
 import { toChildArray } from 'preact'
-import { useEffect, useState, useMemo } from 'preact/hooks'
+import { useEffect, useMemo, useState } from 'preact/hooks'
+import MessageContainer from 'ui/components/conversation/message-container'
+import Icon from 'ui/components/layout/icon'
 import {
+  useGeneratedId,
+  useLastMessageEventId,
   useSeamlyCommands,
   useSeamlyServiceInfo,
-  useLastMessageEventId,
-  useGeneratedId,
 } from 'ui/hooks/seamly-hooks'
-import { className } from 'lib/css'
 import { actionTypes } from 'ui/utils/seamly-utils'
-import Icon from 'ui/components/layout/icon'
 import { useI18n } from 'domains/i18n/hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
-import MessageContainer from 'ui/components/conversation/message-container'
+import { className } from 'lib/css'
+import { randomId } from 'lib/id'
 
 export const useChoicePrompt = (event) => {
   const { payload } = event
@@ -46,10 +47,12 @@ export const useChoicePrompt = (event) => {
   }, [payload, lastEventId])
 
   const onChoiceClickHandler = (choice) => {
+    const transactionId = randomId()
+
     if (chooseAgain) {
-      addDivider('new_topic')
+      addDivider('new_topic', transactionId)
     }
-    addMessageBubble(choice.text)
+    addMessageBubble(choice.text, transactionId)
     sendAction({
       type: actionTypes.pickChoice,
       originMessage: payload.id,
@@ -58,6 +61,7 @@ export const useChoicePrompt = (event) => {
         text: choice.text,
         chooseAgain,
       },
+      transactionId,
     })
     setShowOptions(false)
   }

package/src/javascripts/ui/components/conversation/event/conversation-suggestions.js

@@ -1,15 +1,15 @@
-import { useUserHasResponded } from 'domains/app/hooks'
-import { setHasResponded } from 'domains/app/slice'
-import { useConfig } from 'domains/config/hooks'
-import { useI18n } from 'domains/i18n/hooks'
-import { useTranslatedEventData } from 'domains/translations/hooks'
-import { className } from 'lib/css'
 import { useCallback, useMemo, useState } from 'preact/hooks'
 import { useDispatch } from 'react-redux'
 import MessageContainer from 'ui/components/conversation/message-container'
 import SuggestionsList from 'ui/components/suggestions/suggestions-list'
 import { useEvents, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { setHasResponded } from 'domains/app/slice'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useTranslatedEventData } from 'domains/translations/hooks'
+import { className } from 'lib/css'
 
 export const useSuggestions = (event) => {
   const { payload } = event

package/src/javascripts/ui/components/conversation/event/cta.js

@@ -1,9 +1,9 @@
 import { useCallback } from 'preact/hooks'
-import { className } from 'lib/css'
+import MessageContainer from 'ui/components/conversation/message-container'
 import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
-import MessageContainer from 'ui/components/conversation/message-container'
 import { useTranslatedEventData } from 'domains/translations/hooks'
+import { className } from 'lib/css'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
 
 const Cta = ({ event }) => {

package/src/javascripts/ui/components/conversation/event/divider/index.js

@@ -1,5 +1,4 @@
 import { dividerKeys } from 'ui/utils/seamly-utils'
-
 import DefaultDivider from './variants/default'
 import NewTranslationDivider from './variants/new-translation'
 

package/src/javascripts/ui/components/conversation/event/divider/variants/default.js

@@ -1,6 +1,6 @@
+import EventDivider from 'ui/components/conversation/event-divider'
 import { dividerKeys } from 'ui/utils/seamly-utils'
 import { useI18n } from 'domains/i18n/hooks'
-import EventDivider from 'ui/components/conversation/event-divider'
 
 const dividerTypes = {
   [dividerKeys.new_topic]: 'newtopic',

package/src/javascripts/ui/components/conversation/event/divider/variants/new-translation.js

@@ -1,27 +1,29 @@
-import { useI18n } from 'domains/i18n/hooks'
-import EventDivider from 'ui/components/conversation/event-divider'
-import { className } from 'lib/css'
-import {
-  useTranslations,
-  useLocaleNativeName,
-} from 'domains/translations/hooks'
+import { useCallback } from 'preact/hooks'
 import { useDispatch, useSelector } from 'react-redux'
+import EventDivider from 'ui/components/conversation/event-divider'
+import { useEvents } from 'ui/hooks/seamly-state-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useTranslations } from 'domains/translations/hooks'
 import {
-  enableEventsTranslation,
   disableEventsTranslation,
+  enableEventsTranslation,
 } from 'domains/translations/slice'
-import { useCallback } from 'preact/hooks'
-import { useEvents } from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
 
 const NewTranslationDivider = ({ event }) => {
   const { t } = useI18n()
   const events = useEvents()
   const {
-    body: { translationEnabled, translationLocale, text },
+    body: {
+      restartButtonText,
+      translationEnabled,
+      translationLocale,
+      text,
+      title,
+    },
     id,
   } = event.payload
   const { enableTranslations } = useTranslations()
-  const localeNativeName = useLocaleNativeName(translationLocale)
   const translatedEventGroups = useSelector(
     (state) => state.translations.translatedEventGroups,
   )
@@ -41,17 +43,10 @@ const NewTranslationDivider = ({ event }) => {
   }
   return (
     <EventDivider iconName="newTranslation" dividerType="newtranslation">
-      <p className={className('divider__title')}>
-        {t(
-          translationEnabled
-            ? 'translations.divider.startText'
-            : 'translations.divider.stopText',
-          { language: localeNativeName },
-        )}
-      </p>
+      <p className={className('divider__title')}>{title}</p>
+      {text && <p>{text}</p>}
       {translationEnabled ? (
         <>
-          <p>{text}</p>
           <button
             className={className('button', 'button--secondary')}
             onClick={toggleTranslations}
@@ -69,7 +64,7 @@ const NewTranslationDivider = ({ event }) => {
           data-testid="restartTranslationButton"
           onClick={handleRestartButtonclick}
         >
-          {t('translations.divider.restartButtonText')}
+          {restartButtonText}
         </button>
       )}
     </EventDivider>

package/src/javascripts/ui/components/conversation/event/divider/variants/time-indicator.js

@@ -1,9 +1,9 @@
 import { useEffect } from 'preact/hooks'
 import EventDivider from 'ui/components/conversation/event-divider'
-import { className } from 'lib/css'
-import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 import { useFormattedDate } from 'ui/components/conversation/event/hooks/use-formatted-date'
 import { useForceUpdate } from 'ui/hooks/utility-hooks'
+import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
+import { className } from 'lib/css'
 
 const TimeIndicator = ({ event }) => {
   const forceUpdate = useForceUpdate()

package/src/javascripts/ui/components/conversation/event/event-participant.js

@@ -1,7 +1,7 @@
 import { useSeamlyParticipant } from 'ui/hooks/seamly-hooks'
-import { className } from 'lib/css'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 
 const EventParticipant = ({ eventPayload }) => {
   const { t } = useI18n()

package/src/javascripts/ui/components/conversation/event/event.tsx

@@ -0,0 +1,66 @@
+import { FunctionComponent, useContext, useEffect } from 'preact/compat'
+import { useDispatch } from 'react-redux'
+import ChatScrollContext from 'ui/components/conversation/event/chat-scroll/chat-scroll-context'
+import TimeIndicator from 'ui/components/conversation/event/divider/variants/time-indicator'
+import { useSeamlyCommands } from 'ui/hooks/seamly-hooks'
+import useEventComponentMapping from 'ui/hooks/use-event-component-mapping'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import { setEventsRead } from 'domains/store/slice'
+import { useIntersect } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
+
+const Event: FunctionComponent<{
+  event
+  newParticipant: boolean
+}> = ({ event, newParticipant }) => {
+  const { eventRefs, unreadIds } = useContext(ChatScrollContext)
+  const { sendAction } = useSeamlyCommands()
+  const ref = eventRefs[event.payload.id]
+  const { containerRef, isVisible } = useIntersect({
+    containerRef: ref,
+    freezeOnceVisible: true,
+  })
+  const dispatch = useDispatch()
+  const [Component, SubComponent] = useEventComponentMapping(event)
+
+  useEffect(() => {
+    if (isVisible && unreadIds?.includes(event.payload.id)) {
+      const readIds = unreadIds.reduce<string[]>(
+        (arr, id) => (!arr.includes(event.payload.id) ? arr.concat(id) : arr),
+        [],
+      )
+
+      dispatch(setEventsRead(readIds))
+      sendAction({ type: actionTypes.read, events: readIds })
+    }
+  }, [dispatch, event.payload.id, isVisible, sendAction, unreadIds])
+
+  if (!Component) {
+    return null
+  }
+
+  const classNames = ['conversation__item']
+
+  if (event.type === 'info') {
+    classNames.push('conversation__item--source-info')
+  } else if (event.payload.fromClient) {
+    classNames.push('conversation__item--source-user')
+  } else {
+    classNames.push('conversation__item--source-agent')
+  }
+
+  if (newParticipant) {
+    classNames.push('conversation__item--new-participant')
+  }
+
+  return (
+    <li className={className(classNames)} ref={containerRef}>
+      {event.timeIndicator && <TimeIndicator event={event} />}
+      <Component event={event}>
+        <SubComponent event={event} />
+      </Component>
+    </li>
+  )
+}
+
+export default Event

package/src/javascripts/ui/components/conversation/event/hooks/use-event-link-click-handler.js

@@ -1,5 +1,5 @@
-import { actionTypes } from 'ui/utils/seamly-utils'
 import { useSeamlyCommands } from 'ui/hooks/seamly-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
 
 const useEventLinkClickHandler = (eventId) => {
   const { sendAction } = useSeamlyCommands()

package/src/javascripts/ui/components/conversation/event/hooks/use-formatted-date.js

@@ -1,6 +1,6 @@
-import { useI18n } from 'domains/i18n/hooks'
 import { getRelativeDate } from 'ui/utils/general-utils'
 import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
 
 const dateFormatOptions = { month: 'long', day: 'numeric', year: 'numeric' }
 const timeFormatOptions = { hour: 'numeric', minute: 'numeric' }

package/src/javascripts/ui/components/conversation/event/image-lightbox.js

@@ -1,8 +1,8 @@
 import { useState } from 'preact/hooks'
+import Icon from 'ui/components/layout/icon'
 import Lightbox from 'ui/components/widgets/lightbox'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
-import Icon from 'ui/components/layout/icon'
 
 const ImageLightbox = ({ description, url }) => {
   const { t } = useI18n()

package/src/javascripts/ui/components/conversation/event/image.js

@@ -1,8 +1,8 @@
-import { setLoadedImageEventIds } from 'domains/store/slice'
-import { useTranslatedEventData } from 'domains/translations/hooks'
 import { useState } from 'preact/hooks'
 import { useDispatch } from 'react-redux'
 import MessageContainer from 'ui/components/conversation/message-container'
+import { setLoadedImageEventIds } from 'domains/store/slice'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import ImageLightbox from './image-lightbox'
 
 const Image = ({ event, descriptorId, ...props }) => {

package/src/javascripts/ui/components/conversation/event/splash.js

@@ -1,6 +1,6 @@
-import { useTranslatedEventData } from 'domains/translations/hooks'
 import useEventLinkClickHandler from 'ui/components/conversation/event/hooks/use-event-link-click-handler'
 import MessageContainer from 'ui/components/conversation/message-container'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 
 const Splash = ({ event, ...props }) => {
   const { payload } = event

package/src/javascripts/ui/components/conversation/event/translation.js

@@ -1,5 +1,5 @@
-import { useI18n } from 'domains/i18n/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
+import { useI18n } from 'domains/i18n/hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 
 const Translation = ({ event, ...props }) => {

package/src/javascripts/ui/components/conversation/event/upload.js

@@ -1,9 +1,9 @@
 import { useMemo } from 'preact/hooks'
-import { className } from 'lib/css'
+import MessageContainer from 'ui/components/conversation/message-container'
 import Icon from 'ui/components/layout/icon'
 import { useI18n } from 'domains/i18n/hooks'
-import MessageContainer from 'ui/components/conversation/message-container'
 import { useTranslatedEventData } from 'domains/translations/hooks'
+import { className } from 'lib/css'
 
 const UploadContent = ({ children, url, target }) =>
   url ? (

package/src/javascripts/ui/components/conversation/event/video.js

@@ -1,7 +1,7 @@
-import { className } from 'lib/css'
+import MessageContainer from 'ui/components/conversation/message-container'
 import { useSeamlyMessageContainerClassNames } from 'ui/hooks/seamly-hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
-import MessageContainer from 'ui/components/conversation/message-container'
+import { className } from 'lib/css'
 
 const Video = ({ event, descriptorId, ...props }) => {
   const { body } = useTranslatedEventData(event)

package/src/javascripts/ui/components/conversation/event-divider.js

@@ -1,5 +1,5 @@
-import { className } from 'lib/css'
 import Icon from 'ui/components/layout/icon'
+import { className } from 'lib/css'
 
 export default function EventDivider({
   children,

package/src/javascripts/ui/components/conversation/message-container.js

@@ -1,6 +1,6 @@
-import { className } from 'lib/css'
 import { useSeamlyMessageContainerClassNames } from 'ui/hooks/component-helper-hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
+import { className } from 'lib/css'
 import EventParticipant from './event/event-participant'
 
 function MessageContainer({

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>