@seamly/web-ui 20.8.1 → 21.0.0

package/src/javascripts/ui/components/conversation/{conversation.js → conversation.tsx}

@@ -1,15 +1,13 @@
-import { useI18n } from 'domains/i18n/hooks'
-import { useVisibility } from 'domains/visibility/hooks'
-import { className } from 'lib/css'
-import { useLayoutEffect, useRef } from 'preact/hooks'
 import PrivacyDisclaimer from 'ui/components/layout/privacy-disclaimer'
-import { timeout } from 'ui/hooks/focus-helper-hooks'
 import {
   useSeamlyIsLoading,
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
-import { useEvents, useLoadedImageEventIds } from 'ui/hooks/seamly-state-hooks'
+import { useEvents } from 'ui/hooks/seamly-state-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 import ComponentFilter from './component-filter'
 import Event from './event/event'
 import Loader from './loader'
@@ -18,49 +16,41 @@ const Events = () => {
   const events = useEvents()
 
   let prevParticipant = null
-  return events.map((event) => {
-    const { type, payload } = event
-    const { participant, fromClient } = payload
-    let participantChanged = false
-    if (type !== 'participant') {
-      const currentParticipant = fromClient
-        ? 'seamly-client-participant'
-        : participant
-      if (event.type !== 'info' && prevParticipant !== currentParticipant) {
-        participantChanged = true
-      }
-      prevParticipant = currentParticipant
-    }
+  return (
+    <>
+      {events.map((event) => {
+        const { type, payload } = event
+
+        let participantChanged = false
+        if (type !== 'participant' && type !== 'service_data') {
+          const { participant, fromClient } = payload
+          const currentParticipant = fromClient
+            ? 'seamly-client-participant'
+            : participant
+          if (event.type !== 'info' && prevParticipant !== currentParticipant) {
+            participantChanged = true
+          }
+          prevParticipant = currentParticipant
+        }
 
-    return (
-      <Event
-        key={event.payload.key || event.payload.id}
-        event={event}
-        newParticipant={participantChanged}
-      />
-    )
-  })
+        return (
+          <Event
+            key={event.payload.key || event.payload.id}
+            event={event}
+            newParticipant={participantChanged}
+          />
+        )
+      })}
+    </>
+  )
 }
 
 const Conversation = () => {
   const { t } = useI18n()
-  const chatBodyContainer = useRef(null)
-  const events = useEvents()
   const isLoading = useSeamlyIsLoading()
   const { isOpen } = useVisibility()
   const skiplinkTargetId = useSkiplink()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
-  const loadedImageEventIds = useLoadedImageEventIds()
-
-  useLayoutEffect(() => {
-    const containerElement = chatBodyContainer.current
-    if (containerElement) {
-      requestAnimationFrame(async () => {
-        await timeout(30) // Wait for next frame tick
-        containerElement.scrollTop = containerElement.scrollHeight
-      })
-    }
-  }, [events, isLoading, isOpen, loadedImageEventIds])
 
   const onClickHandler = (e) => {
     e.preventDefault()
@@ -78,7 +68,8 @@ const Conversation = () => {
           {t('skiplinkText')}
         </a>
       )}
-      <div className={className('chat__body')} ref={chatBodyContainer}>
+
+      <div className={className('chat__body')}>
         <div className={className('conversation__container')}>
           <PrivacyDisclaimer />
           <ol className={className('conversation')}>

package/src/javascripts/ui/components/conversation/event/card-component.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
-import { className } from 'lib/css'
 import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
-import { cardTypes, actionTypes } from 'ui/utils/seamly-utils'
+import { actionTypes, cardTypes } from 'ui/utils/seamly-utils'
+import { className } from 'lib/css'
 
 const CardComponent = ({
   id,

package/src/javascripts/ui/components/conversation/event/card-message.js

@@ -1,5 +1,5 @@
-import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import CardComponent from './card-component'
 

package/src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js

@@ -1,6 +1,6 @@
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
 import Icon from 'ui/components/layout/icon'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 
 export default function CarouselControls({
   items,

package/src/javascripts/ui/components/conversation/event/carousel-component/index.js

@@ -1,10 +1,10 @@
 import { createRef } from 'preact'
-import { useState, useEffect, useRef, useMemo } from 'preact/hooks'
-import { className } from 'lib/css'
-import { useGeneratedId } from 'ui/hooks/utility-hooks'
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import CarouselMessageSlide from 'ui/components/conversation/event/carousel-message/components/slide'
-import CarouselPagination from './components/pagination'
+import { useGeneratedId } from 'ui/hooks/utility-hooks'
+import { className } from 'lib/css'
 import CarouselControls from './components/controls'
+import CarouselPagination from './components/pagination'
 
 const defaultGetItemKey = (item, idx, prefix) => `${prefix}${idx}`
 const defaultGetItemLabel = (item) => item.label

package/src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js

@@ -1,6 +1,6 @@
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
 import CardComponent from 'ui/components/conversation/event/card-component'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 
 export default function CarouselMessageSlide({
   item: slide,

package/src/javascripts/ui/components/conversation/event/carousel-message/index.js

@@ -1,5 +1,5 @@
-import MessageContainer from 'ui/components/conversation/message-container'
 import CarouselComponent from 'ui/components/conversation/event/carousel-component'
+import MessageContainer from 'ui/components/conversation/message-container'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import CarouselMessageSlide from './components/slide'
 

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

@@ -0,0 +1,12 @@
+import { RefObject, createContext } from 'preact'
+import { MutableRef } from 'preact/hooks'
+
+const ChatScrollContext = createContext<{
+  eventRefs: Record<string, RefObject<HTMLElement>>
+  unreadIds: string[]
+  scrollToRef: () => void
+  scrollToBottom: () => void
+  containerRef: MutableRef<HTMLDivElement>
+}>(null)
+
+export default ChatScrollContext

package/src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-provider.tsx

@@ -0,0 +1,46 @@
+import { RefObject, createRef } from 'preact'
+import { useMemo } from 'preact/hooks'
+import ChatScrollContext from 'ui/components/conversation/event/chat-scroll/chat-scroll-context'
+import UnreadMessagesButton from 'ui/components/conversation/event/chat-scroll/unread-messages-button'
+import useChatScroll from 'ui/components/conversation/use-chat-scroll'
+import { useEvents } from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+
+const ChatScrollProvider = ({ children }) => {
+  const events = useEvents()
+  const eventRefs = useMemo(
+    () =>
+      events.reduce<Record<string, RefObject<HTMLElement>>>((acc, value) => {
+        acc[value.payload.id] = createRef()
+        return acc
+      }, {}),
+    [events],
+  )
+
+  const { scrollToRef, scrollToBottom, containerRef, unreadIds } =
+    useChatScroll(eventRefs)
+
+  return (
+    <ChatScrollContext.Provider
+      value={{
+        eventRefs,
+        unreadIds,
+        scrollToRef,
+        scrollToBottom,
+        containerRef,
+      }}
+    >
+      <div className={className('chat__container')}>
+        <div
+          className={className('chat__container__scroll-area')}
+          ref={containerRef}
+        >
+          {children}
+        </div>
+        <UnreadMessagesButton />
+      </div>
+    </ChatScrollContext.Provider>
+  )
+}
+
+export default ChatScrollProvider

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

@@ -0,0 +1,27 @@
+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 { className } from 'lib/css'
+
+const UnreadMessagesButton = () => {
+  const { scrollToRef, unreadIds } = useContext(ChatScrollContext)
+  const { t } = useI18n()
+  return (
+    <InOutTransition isActive={!!unreadIds.length}>
+      <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({