@seamly/web-ui 18.2.0 → 19.0.0-beta.1

package/src/javascripts/style-guide/states.js

@@ -1,4 +1,10 @@
-import { visibilityStates, randomId } from '@seamly/web-ui'
+import {
+  visibilityStates,
+  randomId,
+  SeamlyOfflineError,
+  SeamlyGeneralError,
+  SeamlyConfigurationError,
+} from '@seamly/web-ui'
 import { addTranslationData } from './state-helpers'
 
 const baseState = {
@@ -8,6 +14,7 @@ const baseState = {
     accountConfig: {},
     hideOnNoUserResponse: false,
     showFaq: false,
+    showDisclaimer: false,
   },
   initialState: {},
   unreadEvents: 0,
@@ -27,14 +34,12 @@ const baseState = {
     subTitle: 'Test subtitle',
   },
   interrupt: {
-    hasInterrupt: false,
-    meta: {},
+    error: undefined,
   },
   historyLoaded: false,
   skiplinkTargetId: randomId(),
   optionsButtonId: randomId(),
   cobrowseContainerId: randomId(),
-  showDisclaimer: false,
   serviceData: {},
   options: {
     features: {},
@@ -117,8 +122,7 @@ const newTranslationDividerStart = {
     body: {
       language: 'Nederlands',
       subtype: 'new_translation',
-      text:
-        '[NL] Automatic translation to Dutch started. Please note that automatic translations may contain errors.',
+      text: '[NL] Automatic translation to Dutch started. Please note that automatic translations may contain errors.',
       translationEnabled: true,
       translationLocale: 'nl',
     },
@@ -329,8 +333,7 @@ const longTextMessage = {
   type: 'message',
   payload: {
     body: {
-      text:
-        'What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am.',
+      text: 'What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am.',
       type: 'text',
       variables: {},
     },
@@ -422,8 +425,7 @@ const textMessageWithLongLink = {
       variables: {
         link_1: {
           id: '1',
-          name:
-            'click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee',
+          name: 'click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee',
           newTab: false,
           type: 'link',
           url: 'https://google.com',
@@ -450,8 +452,7 @@ const textMesageWithBullets = {
   type: 'message',
   payload: {
     body: {
-      text:
-        '<ul>\n<li>Bullets</li>\n<li>bullets</li>\n<li>bullets</li>\n</ul>\n',
+      text: '<ul>\n<li>Bullets</li>\n<li>bullets</li>\n<li>bullets</li>\n</ul>\n',
       type: 'text',
       variables: {},
     },
@@ -478,7 +479,7 @@ const imageMessage = {
       description: 'Plaatje',
       isZoomable: false,
       type: 'image',
-      url: 'https://via.placeholder.com/150',
+      url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-square-small.jpg',
     },
     fromClient: false,
     fromHistory: true,
@@ -503,7 +504,7 @@ const imageMessageWithLightbox = {
       description: 'Plaatje',
       isZoomable: true,
       type: 'image',
-      url: 'https://via.placeholder.com/150',
+      url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-portrait.jpg',
     },
     fromClient: false,
     fromHistory: true,
@@ -553,8 +554,7 @@ const choicePromptMessage = {
       choices: [
         {
           id: '703db9b3-2157-4d4a-9f9b-c382c6a10531',
-          text:
-            'Dialog (this is intentionally made longer for testing purposes)',
+          text: 'Dialog (this is intentionally made longer for testing purposes)',
           type: 'choice',
         },
         {
@@ -631,8 +631,7 @@ const userMessageLong = {
   type: 'message',
   payload: {
     body: {
-      text:
-        'This is what the user typed. And sometimes the user has quite a lot to say and then we get longer lines that need to wrap well and not break the styling so here goes with just such a line right here!!',
+      text: 'This is what the user typed. And sometimes the user has quite a lot to say and then we get longer lines that need to wrap well and not break the styling so here goes with just such a line right here!!',
       type: 'text',
       variables: {},
     },
@@ -653,10 +652,9 @@ const fileDownloadPayload = {
   meta: {},
   body: {
     contentType: 'image/jpg',
-    deleteAt: 1000 * (Date.now() + 3600000),
     filename: 'placeholder.jpg',
     filesize: 991078,
-    url: 'https://via.placeholder.com/150',
+    url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-square-small.jpg',
   },
 }
 
@@ -676,7 +674,6 @@ const deletedFileDownloadAgentMessage = {
     ...fileDownloadAgentMessage.payload,
     body: {
       ...fileDownloadAgentMessage.payload.body,
-      deleteAt: 1000 * (Date.now() - 3600000),
     },
     id: randomId(),
   },
@@ -692,18 +689,6 @@ const fileDownloadUserMessage = {
   },
 }
 
-const deletedFileDownloadUserMessage = {
-  ...fileDownloadUserMessage,
-  payload: {
-    id: randomId(),
-    ...fileDownloadUserMessage.payload,
-    body: {
-      ...fileDownloadUserMessage.payload.body,
-      deleteAt: 1000 * (Date.now() - 3600000),
-    },
-  },
-}
-
 const emptyUrlFileDownloadUserMessage = {
   ...fileDownloadUserMessage,
   payload: {
@@ -811,7 +796,7 @@ const cardAskText = {
       description:
         'Pizza Margherita is a **typical Neapolitan pizza**.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
       image:
-        'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
+        'https://developers.seamly.ai/clients/web-ui/static/photos/card-square.jpg',
       title: 'Pizza Margherita',
     },
   },
@@ -830,7 +815,7 @@ const cardNavigate = {
       buttonText: 'Order now!',
       description: 'Pizza Margherita is a **typical Neapolitan pizza**.',
       image:
-        'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
+        'https://developers.seamly.ai/clients/web-ui/static/photos/card-landscape.jpg',
       title: 'Pizza Margherita',
     },
   },
@@ -847,7 +832,7 @@ const cardTopic = {
       },
       buttonText: 'Set topic! (title & description optional)',
       image:
-        'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
+        'https://developers.seamly.ai/clients/web-ui/static/photos/card-portrait.jpg',
     },
   },
 }
@@ -893,7 +878,6 @@ const standardState = {
       textMessageWithLongLink,
       imageMessageWithLightbox,
       fileDownloadUserMessage,
-      deletedFileDownloadUserMessage,
       emptyUrlFileDownloadUserMessage,
       textMesageWithBullets,
       choicePromptMessage,
@@ -910,7 +894,6 @@ const standardState = {
       userMessage,
       userMessageLong,
       fileDownloadUserMessage,
-      deletedFileDownloadUserMessage,
       emptyUrlFileDownloadUserMessage,
     ],
   },
@@ -1116,8 +1099,7 @@ const standardState = {
           occurredAt: Date.now() * 1000,
           id: randomId(),
           body: {
-            text:
-              'Above me should be a time indicator showing me the dialog continues today',
+            text: 'Above me should be a time indicator showing me the dialog continues today',
             type: 'text',
             variables: {},
           },
@@ -1167,14 +1149,7 @@ const standardState = {
     description: '',
     ...baseState,
     interrupt: {
-      hasInterrupt: true,
-      meta: {
-        title: 'Connection issues',
-        message:
-          'There might be a problem with your or our network connection. The chat session should resume as soon the connection is available again.',
-        srText:
-          'The chat has connection issues. There might be a problem with your or our network connection. The chat session should resume as soon as the connection is available again.',
-      },
+      error: new SeamlyOfflineError(),
     },
   },
   generalErrorInterrupt: {
@@ -1184,15 +1159,7 @@ const standardState = {
     description: '',
     ...baseState,
     interrupt: {
-      hasInterrupt: true,
-      meta: {
-        title: 'Something went wrong',
-        message: 'Do you want to start a new chat session?',
-        buttonText: 'Restart chat',
-        action: 'reset',
-        srText:
-          'Something went wrong with the chat session. You can restart the chat.',
-      },
+      error: new SeamlyGeneralError(),
     },
   },
   configErrorInterrupt: {
@@ -1202,13 +1169,7 @@ const standardState = {
     description: '',
     ...baseState,
     interrupt: {
-      hasInterrupt: true,
-      meta: {
-        title: 'Chat configuration error.',
-        message: 'We are sorry this happened, please retry at a later time.',
-        srText:
-          'A chat configuration error occurred. Our apologies, please retry at a later time.',
-      },
+      error: new SeamlyConfigurationError(),
     },
   },
   privacyDisclaimer: {
@@ -1220,11 +1181,10 @@ const standardState = {
       ...baseState.config,
       showDisclaimer: true,
     },
-    showDisclaimer: true,
   },
-  cobrowserBar: {
+  chatStatusBar: {
     category: categoryKeys.features,
-    headingText: `Cobrowse bar`,
+    headingText: `Chat status bar`,
     description: '',
     ...baseState,
     options: {
@@ -1758,7 +1718,6 @@ const standardState = {
       textMessageWithLongLink,
       imageMessageWithLightbox,
       fileDownloadUserMessage,
-      deletedFileDownloadUserMessage,
       emptyUrlFileDownloadUserMessage,
       textMesageWithBullets,
       choicePromptMessage,
@@ -1796,9 +1755,8 @@ const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
     }, {}),
   }
   return Object.keys(intermediateState).reduce((acc, key) => {
-    const { headingText, category, description, ...rest } = intermediateState[
-      key
-    ]
+    const { headingText, category, description, ...rest } =
+      intermediateState[key]
     return {
       ...acc,
       [key]: {

package/src/javascripts/style-guide/style-guide-engine.js

@@ -1,6 +1,5 @@
 import { render } from 'preact'
-import { Engine } from '@seamly/web-ui'
-import en from '@seamly/web-ui/translations/en'
+import { API, Engine } from '@seamly/web-ui'
 import StyleGuideApp from './components/app'
 
 class SeamlyStyleGuideInstance extends Engine {
@@ -9,31 +8,33 @@ class SeamlyStyleGuideInstance extends Engine {
     this.styleGuideConfig = styleGuideConfig || {}
   }
 
-  render() {
+  async render() {
     const restComponents = {
-      ...(this.customComponents || {}),
+      ...(this.config.customComponents || {}),
       view: undefined,
     }
 
+    const api = new API({
+      namespace: this.config.namespace,
+      config: this.config.api,
+    })
+    api.URLS = {
+      translations: '/client/wilson/translations/{version}/{locale}.json',
+    }
+    const translations = await api.getTranslations('en-GB')
+
     const renderConfig = {
       ...this.config,
       customComponents: Object.keys(restComponents).length
         ? restComponents
         : undefined,
-      translations: this.config.translations || {
-        ...en,
-        disclaimer: {
-          ...en.disclaimer,
-          content:
-            'This chat session will be saved to help us improve our service delivery. <a href="https://seamly.ai/">More information</a>',
-        },
-      },
     }
 
     render(
       <StyleGuideApp
         config={renderConfig}
         styleGuideConfig={this.styleGuideConfig}
+        translations={translations}
       />,
       this.parentElement,
     )

package/src/javascripts/ui/components/chat-app.js

@@ -1,9 +1,9 @@
 import View from './layout/view'
 import SeamlyCore from './core/seamly-core'
 
-const ChatApp = ({ config, eventBus }) => {
+const ChatApp = (props) => {
   return (
-    <SeamlyCore config={config} eventBus={eventBus}>
+    <SeamlyCore {...props}>
       <View />
     </SeamlyCore>
   )

package/src/javascripts/ui/components/conversation/component-filter.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'preact/hooks'
-import { useSeamlyConfig } from '../../hooks/seamly-hooks'
+import { useConfig } from '../../../domains/config'
 import ComponentContext from './component-context'
 import ChoicePrompt from './event/choice-prompt'
 import Text from './event/text'
@@ -37,7 +37,7 @@ const eventTypeMapping = {
 }
 
 const ComponentFilter = ({ children }) => {
-  const { customComponents } = useSeamlyConfig()
+  const { customComponents } = useConfig()
 
   const resolvedComponents = useMemo(() => {
     // Calculates a combined component mapping object based on the defaults with

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

@@ -33,7 +33,7 @@ const Conversation = () => {
 
   const renderEvents = () => {
     let prevParticipant = null
-    return events.map(event => {
+    return events.map((event) => {
       const { type, payload } = event
       const { participant, fromClient } = payload
       let participantChanged = false
@@ -56,7 +56,7 @@ const Conversation = () => {
     })
   }
 
-  const onClickHandler = e => {
+  const onClickHandler = (e) => {
     e.preventDefault()
     focusSkiplinkTarget()
   }

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'preact/hooks'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import { className } from '../../../../lib/css'
 import parseBody from '../../../../lib/parse-body'
 import { useGeneratedId, useSeamlyCommands } from '../../../hooks/seamly-hooks'
@@ -9,11 +9,15 @@ const CardComponent = ({
   action,
   buttonText,
   description,
+  hasFocus,
   image,
   title,
+  isCarouselItem,
 }) => {
+  const cardRef = useRef(null)
   const { sendMessage, sendAction, emitEvent } = useSeamlyCommands()
   const descriptionId = useGeneratedId()
+  const isMounted = useRef()
 
   const CardActionComponent =
     action.type === cardTypes.navigate ? 'a' : 'button'
@@ -53,18 +57,35 @@ const CardComponent = ({
     [action, handleClick, emitCardEvent],
   )
 
+  useEffect(() => {
+    if (isCarouselItem) {
+      if (hasFocus && isMounted.current) {
+        window.requestAnimationFrame(() => cardRef.current.focus())
+      } else {
+        cardRef.current.blur()
+      }
+    }
+    isMounted.current = true
+  }, [hasFocus, isCarouselItem])
+
   return (
-    <div className={className('card__wrapper')} id={id}>
+    <div
+      className={className('card__wrapper')}
+      id={id}
+      tabIndex="-1" // set tabIndex of -1 so card can be focussed
+      ref={cardRef}
+    >
       <img className={className('card__image')} src={image} alt="" />
       <div className={className('card__content')} id={id}>
         {title && <h2 className={className('card__title')}>{title}</h2>}
         {description && (
-          <p
+          <div
             className={className('card__description')}
             dangerouslySetInnerHTML={{ __html: parseBody(description) }}
           />
         )}
         <CardActionComponent
+          tabIndex={isCarouselItem && !hasFocus ? '-1' : undefined} // disable to prevent tabbing through cards
           className={className('button', 'button--primary')}
           aria-describedby={descriptionId}
           {...actionProps}

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

@@ -10,7 +10,7 @@ export default function CarouselPagination({
 }) {
   const itemCount = items.length
   const handlePaginate = useCallback(
-    event => {
+    (event) => {
       const slideIndex = Number(event.target.dataset.item || '0')
       const nextIndex = Math.min(itemCount - 1, Math.max(0, slideIndex))
       if (nextIndex !== currentIndex) {
@@ -27,7 +27,7 @@ export default function CarouselPagination({
           const isActive = currentIndex === idx
           return (
             <li
-              key={getItemKey(item, idx)}
+              key={getItemKey(item, idx, 'pagination-item-')}
               className={className(
                 'carousel-pagination__item',
                 isActive ? 'is-active' : undefined,

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

@@ -6,8 +6,8 @@ import CarouselPagination from './components/pagination'
 import CarouselControls from './components/controls'
 import CarouselMessageSlide from '../carousel-message/components/slide'
 
-const defaultGetItemKey = (item, idx) => idx
-const defaultGetItemLabel = item => item.label
+const defaultGetItemKey = (item, idx, prefix) => `${prefix}${idx}`
+const defaultGetItemLabel = (item) => item.label
 
 export default function CarouselComponent({
   currentIndex: originalIndex,
@@ -66,7 +66,7 @@ export default function CarouselComponent({
             const isActive = currentIndex === idx
             return (
               <div
-                key={idx}
+                key={getItemKey(item, idx, 'item-')}
                 ref={slideRefs.current[idx]}
                 className={className(
                   'carousel__slide',
@@ -78,6 +78,7 @@ export default function CarouselComponent({
                   item={item}
                   items={items}
                   currentIndex={currentIndex}
+                  isActive={isActive}
                 />
               </div>
             )

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

@@ -6,6 +6,7 @@ export default function CarouselMessageSlide({
   item: slide,
   items,
   currentIndex,
+  isActive,
 }) {
   const { t } = useI18n()
 
@@ -19,7 +20,7 @@ export default function CarouselMessageSlide({
         total: items.length,
       })}
     >
-      <CardComponent {...slide} />
+      <CardComponent {...slide} isCarouselItem={true} hasFocus={isActive} />
     </div>
   )
 }

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

@@ -2,8 +2,8 @@ import MessageContainer from '../../message-container'
 import CarouselComponent from '../carousel-component'
 import CarouselMessageSlide from './components/slide'
 
-const getItemKey = item => item.title
-const getItemLabel = item => item.title
+const getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`
+const getItemLabel = (item) => item.title
 const CarouselMessage = ({ event }) => {
   const slides = event.payload.body.cards
 

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

@@ -13,7 +13,7 @@ import { useI18n } from '../../../../domains/i18n'
 import { useTranslatedEventData } from '../../../../domains/translations'
 import MessageContainer from '../message-container'
 
-export const useChoicePrompt = event => {
+export const useChoicePrompt = (event) => {
   const { payload } = event
   const [showOptions, setShowOptions] = useState(false)
   const { sendAction, addMessageBubble, addDivider } = useSeamlyCommands()
@@ -45,7 +45,7 @@ export const useChoicePrompt = event => {
     setShowOptions(payload.id === lastEventId)
   }, [payload, lastEventId])
 
-  const onChoiceClickHandler = choice => {
+  const onChoiceClickHandler = (choice) => {
     if (chooseAgain) {
       addDivider('new_topic')
     }
@@ -63,7 +63,7 @@ export const useChoicePrompt = event => {
   }
 
   const onChooseAgainClickHandler = () => {
-    setShowOptions(s => !s)
+    setShowOptions((s) => !s)
   }
 
   return {
@@ -91,7 +91,7 @@ const ChoicePrompt = ({ event, children, ...props }) => {
 
   return (
     <>
-      {toChildArray(children).map(child => {
+      {toChildArray(children).map((child) => {
         child.props = {
           ...child.props,
           event: subEvent,
@@ -126,7 +126,7 @@ const ChoicePrompt = ({ event, children, ...props }) => {
           {...props}
         >
           <ul className={className('choice-prompt', 'choice-prompt--many')}>
-            {body.choices.map(choice => (
+            {body.choices.map((choice) => (
               <li
                 key={choice.id}
                 className={className('choice-prompt__item', {

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

@@ -10,7 +10,7 @@ const NewTranslationDivider = ({ event }) => {
   const { enableTranslations, languages } = useTranslations()
 
   const languageName = useMemo(() => {
-    return languages?.find(lang => lang.locale === translationLocale)
+    return languages?.find((lang) => lang.locale === translationLocale)
       ?.nativeName
   }, [languages, translationLocale])
 
@@ -25,7 +25,7 @@ const NewTranslationDivider = ({ event }) => {
           translationEnabled
             ? 'translations.divider.startText'
             : 'translations.divider.stopText',
-          languageName,
+          { language: languageName },
         )}
       </p>
       {translationEnabled ? (

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

@@ -1,13 +1,11 @@
-import {
-  useSeamlyConfig,
-  useSeamlyParticipant,
-} from '../../../hooks/seamly-hooks'
+import { useSeamlyParticipant } from '../../../hooks/seamly-hooks'
 import { className } from '../../../../lib/css'
+import { useConfig } from '../../../../domains/config'
 
 const EventParticipant = ({ eventPayload }) => {
   const { fromClient, participant: participantId } = eventPayload
   const participant = useSeamlyParticipant(participantId) || {}
-  const { messages, defaults } = useSeamlyConfig()
+  const { messages, defaults } = useConfig()
 
   const participantName = participant && participant.name
   const { showAvatar, showName } = messages[fromClient ? 'user' : 'agent'] || {}

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

@@ -1,10 +1,10 @@
 import { actionTypes } from '../../../../utils/seamly-utils'
 import { useSeamlyCommands } from '../../../../hooks/seamly-hooks'
 
-const useEventLinkClickHandler = eventId => {
+const useEventLinkClickHandler = (eventId) => {
   const { sendAction } = useSeamlyCommands()
 
-  const eventClick = e => {
+  const eventClick = (e) => {
     if (e.target && e.target.dataset.linkId) {
       sendAction({
         type: actionTypes.navigate,

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

@@ -1,13 +1,13 @@
 import { useI18n } from '../../../../../domains/i18n'
-import { useSeamlyConfig } from '../../../../hooks/seamly-hooks'
 import { getRelativeDate } from '../../../../utils/general-utils'
+import { useConfig } from '../../../../../domains/config'
 
 const dateFormatOptions = { month: 'long', day: 'numeric', year: 'numeric' }
 const timeFormatOptions = { hour: 'numeric', minute: 'numeric' }
 
-export const useFormattedDate = date => {
+export const useFormattedDate = (date) => {
   const { t } = useI18n()
-  const config = useSeamlyConfig()
+  const config = useConfig()
   const locale = config?.context?.locale ?? []
   const eventDate = new Date(date)
   const currentDate = new Date()

package/src/javascripts/ui/components/conversation/event/hooks/use-text-rendering.js

@@ -1,11 +1,11 @@
 import { useMemo } from 'preact/hooks'
 import Mustache from 'mustache'
 
-Mustache.escape = function(escapeText) {
+Mustache.escape = function (escapeText) {
   return escapeText
 }
 
-const parseLinkVariable = variable => {
+const parseLinkVariable = (variable) => {
   return `<a href='${variable.url}' data-link-id='${variable.id}' ${
     variable.newTab ? 'target="_blank"' : ''
   }>${variable.name}</a>`
@@ -26,7 +26,7 @@ export function parseRichtText(text, variables = {}) {
 
   // Disable escaping as we'll be generating HTML
   const oldEscape = Mustache.escape
-  Mustache.escape = function(escapeText) {
+  Mustache.escape = function (escapeText) {
     return escapeText
   }
   const output = Mustache.render(text, view)

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

@@ -2,11 +2,11 @@ import { useMemo } from 'preact/hooks'
 import Mustache from 'mustache'
 import parseBody from '../../../../lib/parse-body'
 import EventDivider from '../event-divider'
-import { useSeamlyConfig } from '../../../hooks/seamly-hooks'
 import { useTranslatedEventData } from '../../../../domains/translations'
+import { useConfig } from '../../../../domains/config'
 
 const Participant = ({ event }) => {
-  const { agentIcon } = useSeamlyConfig().defaults || {}
+  const { agentIcon } = useConfig().defaults || {}
 
   const { participant } = event.payload
   const [introduction] = useTranslatedEventData(event)