@seamly/web-ui 20.0.0-beta.6 → 20.1.0

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

@@ -62,23 +62,8 @@ const avatar =
 
 const participantInfo = {
   participants: {
-    'e65fa8dc-97ab-4711-8fec-82bae6461aa2': {
-      avatar,
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to {{name}} gimme a minit",
-      name: 'Mrs. Bot',
-      service: {
-        expose: { map: {}, version: 2 },
-        meta: {},
-        name: null,
-        service_session_id: null,
-        settings: {},
-      },
-    },
-    'e65fa8dc-97ab-4711-8fec-82bae6461aa3': {
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to {{name}} gimme a minit",
-      name: 'Mrs. Bot',
+    agent: {
+      id: 'agent',
       service: {
         expose: { map: {}, version: 2 },
         meta: {},
@@ -87,11 +72,8 @@ const participantInfo = {
         settings: {},
       },
     },
-    'seamly-client-participant': {
-      avatar,
-      id: 'seamly-client-participant',
-      introduction: null,
-      name: 'User',
+    user: {
+      id: 'user',
       service: {
         expose: { map: {}, version: 2 },
         meta: {},
@@ -101,7 +83,7 @@ const participantInfo = {
       },
     },
   },
-  currentAgent: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+  currentAgent: 'agent',
 }
 
 const newTopicDivider = {
@@ -215,7 +197,7 @@ const participantMessage = {
     messageStatus: 'received',
     participant: {
       avatar,
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+      id: 'agent',
       introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
@@ -239,7 +221,7 @@ const participantMessageDefaultIcon = {
     id: randomId(),
     messageStatus: 'received',
     participant: {
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
+      id: 'user',
       introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
@@ -264,7 +246,7 @@ const getCustomMessage = ({ type, data, text }) => ({
       data,
       variables: {},
     },
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: {} },
       name: 'bot',
@@ -292,7 +274,7 @@ const shortTextMessage = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: {} },
       name: 'bot',
@@ -331,7 +313,7 @@ const ctaMessage = {
     fromHistory: true,
     id: 'f5351010-0def-452d-818f-ca22ac61792z',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -354,7 +336,7 @@ const longTextMessage = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: {} },
       name: 'bot',
@@ -378,7 +360,7 @@ const textMessageBoldItalicUnderline = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -417,7 +399,7 @@ const textMessageWithLinks = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -449,7 +431,7 @@ const textMessageWithLongLink = {
     fromHistory: true,
     id: 'a964e54e-ea98-46ff-a952-979a47f162c0',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -473,7 +455,7 @@ const textMesageWithBullets = {
     fromHistory: true,
     id: 'f5351010-0def-452d-818f-ca22ac61792a',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -498,7 +480,7 @@ const imageMessage = {
     fromHistory: true,
     id: 'b44ef42c-880c-43ff-b067-499e7f2e81f7',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -523,7 +505,7 @@ const imageMessageWithLightbox = {
     fromHistory: true,
     id: 'b44ef42c-880c-43ff-b067-499e7f2e81f8',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -548,7 +530,7 @@ const videoMessage = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -604,7 +586,7 @@ const choicePromptMessage = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: {} },
       name: 'bot',
@@ -628,7 +610,7 @@ const userMessage = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'seamly-client-participant',
+    participant: 'user',
     transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
     transactionLast: null,
     type: 'text',
@@ -647,7 +629,7 @@ const userMessageLong = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'seamly-client-participant',
+    participant: 'user',
     transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
     transactionLast: null,
     type: 'text',
@@ -671,7 +653,7 @@ const fileDownloadAgentMessage = {
   payload: {
     ...fileDownloadPayload,
     fromClient: false,
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     id: randomId(),
   },
 }
@@ -692,7 +674,7 @@ const fileDownloadUserMessage = {
   payload: {
     ...fileDownloadPayload,
     fromClient: true,
-    participant: 'seamly-client-participant',
+    participant: 'user',
     id: randomId(),
   },
 }

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

@@ -25,7 +25,18 @@ class SeamlyStyleGuideInstance extends Engine {
     const translations = await api.getTranslations(
       this.config.context.locale || 'en-GB',
     )
-
+    const { agentParticipant, userParticipant } = await api.getConfig()
+    const participants = [
+      {
+        id: 'user',
+        ...userParticipant,
+      },
+      {
+        id: 'agent',
+        introduction: 'I am {{name}}',
+        ...agentParticipant,
+      },
+    ]
     const renderConfig = {
       ...this.config,
       customComponents: Object.keys(restComponents).length
@@ -38,6 +49,7 @@ class SeamlyStyleGuideInstance extends Engine {
         config={renderConfig}
         styleGuideConfig={this.styleGuideConfig}
         translations={translations}
+        participants={participants}
       />,
       this.parentElement,
     )

package/src/javascripts/style-guide.js

@@ -1,3 +1,5 @@
 import initializeStyleGuideExternalApi from './style-guide/register-style-guide-api'
 
 export default initializeStyleGuideExternalApi
+
+export { default as SeamlyStaticCore } from './style-guide/components/static-core'

package/src/javascripts/ui/components/app-options/index.js

@@ -1,10 +1,10 @@
-import { useSeamlyOptions } from '../../hooks/seamly-hooks'
-import { className } from '../../../lib/css'
-import OptionsButton from '../options/options-button'
+import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+import OptionsButton from 'ui/components/options/options-button'
 import {
   useTranslations,
   OptionsButton as TranslationsOptionsButton,
-} from '../../../domains/translations'
+} from 'domains/translations'
 
 export default function AppOptions() {
   const { menuOptions, allowOptionSelection } = useSeamlyOptions()

package/src/javascripts/ui/components/chat-status/index.js

@@ -1,5 +1,5 @@
-import { className } from '../../../lib/css'
-import { useGeneratedId } from '../../hooks/seamly-hooks'
+import { className } from 'lib/css'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 
 export default function ChatStatus({
   id,

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'preact/hooks'
-import { useConfig } from '../../../domains/config'
+import { useConfig } from 'domains/config'
 import ComponentContext from './component-context'
 import ChoicePrompt from './event/choice-prompt'
 import Text from './event/text'

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

@@ -1,17 +1,17 @@
 import { useRef, useEffect } from 'preact/hooks'
-import { className } from '../../../lib/css'
-import { useI18n } from '../../../domains/i18n'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
 import {
   useSeamlyIsLoading,
   useSkiplink,
   useSkiplinkTargetFocusing,
-} from '../../hooks/seamly-hooks'
-import { useEvents } from '../../hooks/seamly-state-hooks'
+} from 'ui/hooks/seamly-hooks'
+import { useEvents } from 'ui/hooks/seamly-state-hooks'
+import PrivacyDisclaimer from 'ui/components/layout/privacy-disclaimer'
+import { useVisibility } from 'domains/visibility'
 import Event from './event/event'
 import Loader from './loader'
 import ComponentFilter from './component-filter'
-import PrivacyDisclaimer from '../layout/privacy-disclaimer'
-import { useVisibility } from '../../../domains/visibility'
 
 const Conversation = () => {
   const { t } = useI18n()

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

@@ -1,8 +1,8 @@
 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'
-import { cardTypes, actionTypes } from '../../../utils/seamly-utils'
+import { className } from 'lib/css'
+import parseBody from 'lib/parse-body'
+import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
+import { cardTypes, actionTypes } from 'ui/utils/seamly-utils'
 
 const CardComponent = ({
   id,

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

@@ -1,6 +1,6 @@
-import { useGeneratedId } from '../../../hooks/seamly-hooks'
-import MessageContainer from '../message-container'
-import { useTranslatedEventData } from '../../../../domains/translations'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import MessageContainer from 'ui/components/conversation/message-container'
+import { useTranslatedEventData } from 'domains/translations'
 import CardComponent from './card-component'
 
 const CardMessage = ({ event }) => {

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'
-import Icon from '../../../../layout/icon'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import Icon from 'ui/components/layout/icon'
 
 export default function CarouselControls({
   items,

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

@@ -1,5 +1,5 @@
 import { useCallback } from 'preact/hooks'
-import { className } from '../../../../../../lib/css'
+import { className } from 'lib/css'
 
 export default function CarouselPagination({
   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 '../../../../hooks/utility-hooks'
+import { className } from 'lib/css'
+import { useGeneratedId } from 'ui/hooks/utility-hooks'
+import CarouselMessageSlide from 'ui/components/conversation/event/carousel-message/components/slide'
 import CarouselPagination from './components/pagination'
 import CarouselControls from './components/controls'
-import CarouselMessageSlide from '../carousel-message/components/slide'
 
 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'
-import CardComponent from '../../card-component'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import CardComponent from 'ui/components/conversation/event/card-component'
 
 export default function CarouselMessageSlide({
   item: slide,

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

@@ -1,6 +1,6 @@
-import MessageContainer from '../../message-container'
-import CarouselComponent from '../carousel-component'
-import { useTranslatedEventData } from '../../../../../domains/translations'
+import MessageContainer from 'ui/components/conversation/message-container'
+import CarouselComponent from 'ui/components/conversation/event/carousel-component'
+import { useTranslatedEventData } from 'domains/translations'
 import CarouselMessageSlide from './components/slide'
 
 const getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`

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

@@ -5,13 +5,13 @@ import {
   useSeamlyServiceInfo,
   useLastMessageEventId,
   useGeneratedId,
-} from '../../../hooks/seamly-hooks'
-import { className } from '../../../../lib/css'
-import { actionTypes } from '../../../utils/seamly-utils'
-import Icon from '../../layout/icon'
-import { useI18n } from '../../../../domains/i18n'
-import { useTranslatedEventData } from '../../../../domains/translations'
-import MessageContainer from '../message-container'
+} 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'
+import { useTranslatedEventData } from 'domains/translations'
+import MessageContainer from 'ui/components/conversation/message-container'
 
 export const useChoicePrompt = (event) => {
   const { payload } = event

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

@@ -1,11 +1,11 @@
 import { useCallback } from 'preact/hooks'
-import { className } from '../../../../lib/css'
-import parseBody from '../../../../lib/parse-body'
-import { useGeneratedId, useSeamlyCommands } from '../../../hooks/seamly-hooks'
+import { className } from 'lib/css'
+import parseBody from 'lib/parse-body'
+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'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import { actionTypes } from '../../../utils/seamly-utils'
-import MessageContainer from '../message-container'
-import { useTranslatedEventData } from '../../../../domains/translations'
 
 const Cta = ({ event }) => {
   const [body] = useTranslatedEventData(event)

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

@@ -1,4 +1,4 @@
-import { dividerKeys } from '../../../../utils/seamly-utils'
+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 { dividerKeys } from '../../../../../utils/seamly-utils'
-import { useI18n } from '../../../../../../domains/i18n'
-import EventDivider from '../../../event-divider'
+import { dividerKeys } from 'ui/utils/seamly-utils'
+import { useI18n } from 'domains/i18n'
+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,8 +1,8 @@
 import { useMemo } from 'preact/hooks'
-import { useI18n } from '../../../../../../domains/i18n'
-import EventDivider from '../../../event-divider'
-import { className } from '../../../../../../lib/css'
-import { useTranslations } from '../../../../../../domains/translations'
+import { useI18n } from 'domains/i18n'
+import EventDivider from 'ui/components/conversation/event-divider'
+import { className } from 'lib/css'
+import { useTranslations } from 'domains/translations'
 
 const NewTranslationDivider = ({ event }) => {
   const { t } = useI18n()

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

@@ -1,9 +1,9 @@
 import { useEffect } from 'preact/hooks'
-import EventDivider from '../../../event-divider'
-import { className } from '../../../../../../lib/css'
-import { microsecondsToMilliseconds } from '../../../../../utils/general-utils'
-import { useFormattedDate } from '../../hooks/use-formatted-date'
-import { useForceUpdate } from '../../../../../hooks/utility-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'
 
 const TimeIndicator = ({ event }) => {
   const forceUpdate = useForceUpdate()

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

@@ -1,15 +1,18 @@
-import { useSeamlyParticipant } from '../../../hooks/seamly-hooks'
-import { className } from '../../../../lib/css'
-import { useConfig } from '../../../../domains/config'
+import { useSeamlyParticipant } from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+import { useConfig } from 'domains/config'
+import { useI18n } from 'domains/i18n'
 
 const EventParticipant = ({ eventPayload }) => {
+  const { t } = useI18n()
   const { fromClient, participant: participantId } = eventPayload
   const participant = useSeamlyParticipant(participantId) || {}
-  const { messages, defaults } = useConfig()
+  const { messages } = useConfig()
 
-  const participantName = participant && participant.name
+  const participantName = fromClient
+    ? t('participants.user.name')
+    : participant && participant.name
   const { showAvatar, showName } = messages[fromClient ? 'user' : 'agent'] || {}
-  const { userName } = defaults || {}
 
   if (!showAvatar && !showName) {
     return null
@@ -25,11 +28,11 @@ const EventParticipant = ({ eventPayload }) => {
     )
   }
 
-  const authorName = fromClient ? userName || participantName : participantName
-
-  if (showName && authorName) {
+  if (showName) {
     authorInfo.push(
-      <span className={className('message__author-name')}>{authorName}</span>,
+      <span className={className('message__author-name')}>
+        {participantName}
+      </span>,
     )
   }
 

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

@@ -1,5 +1,5 @@
-import { className } from '../../../../lib/css'
-import useEventComponentMapping from '../../../hooks/use-event-component-mapping'
+import { className } from 'lib/css'
+import useEventComponentMapping from 'ui/hooks/use-event-component-mapping'
 import TimeIndicator from './divider/variants/time-indicator'
 
 const Event = ({ event, newParticipant }) => {

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

@@ -1,5 +1,5 @@
-import { actionTypes } from '../../../../utils/seamly-utils'
-import { useSeamlyCommands } from '../../../../hooks/seamly-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import { useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 
 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'
-import { getRelativeDate } from '../../../../utils/general-utils'
-import { useConfig } from '../../../../../domains/config'
+import { useI18n } from 'domains/i18n'
+import { getRelativeDate } from 'ui/utils/general-utils'
+import { useConfig } from 'domains/config'
 
 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 Lightbox from '../../widgets/lightbox'
-import { useI18n } from '../../../../domains/i18n'
-import { className } from '../../../../lib/css'
-import Icon from '../../layout/icon'
+import Lightbox from 'ui/components/widgets/lightbox'
+import { useI18n } from 'domains/i18n'
+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,7 +1,7 @@
 import { useState } from 'preact/hooks'
+import MessageContainer from 'ui/components/conversation/message-container'
+import { useTranslatedEventData } from 'domains/translations'
 import ImageLightbox from './image-lightbox'
-import MessageContainer from '../message-container'
-import { useTranslatedEventData } from '../../../../domains/translations'
 
 const Image = ({ event, descriptorId, ...props }) => {
   const [body] = useTranslatedEventData(event)

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

@@ -1,12 +1,12 @@
 import { useMemo } from 'preact/hooks'
 import Mustache from 'mustache'
-import parseBody from '../../../../lib/parse-body'
-import EventDivider from '../event-divider'
-import { useTranslatedEventData } from '../../../../domains/translations'
-import { useConfig } from '../../../../domains/config'
+import parseBody from 'lib/parse-body'
+import EventDivider from 'ui/components/conversation/event-divider'
+import { useTranslatedEventData } from 'domains/translations'
+import { useParticipants } from 'domains/config'
 
 const Participant = ({ event }) => {
-  const { agentIcon } = useConfig().defaults || {}
+  const { agent } = useParticipants()
 
   const { participant } = event.payload
   const [introduction] = useTranslatedEventData(event)
@@ -21,7 +21,7 @@ const Participant = ({ event }) => {
     return null
   }
 
-  const avatar = participant.avatar || agentIcon
+  const avatar = participant.avatar || agent?.avatar
 
   return (
     <EventDivider

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

@@ -1,9 +1,9 @@
 import { useMemo } from 'preact/hooks'
-import parseBody from '../../../../lib/parse-body'
+import parseBody from 'lib/parse-body'
+import MessageContainer from 'ui/components/conversation/message-container'
+import { useTranslatedEventData } from 'domains/translations'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
 import { parseRichText } from './hooks/use-text-rendering'
-import MessageContainer from '../message-container'
-import { useTranslatedEventData } from '../../../../domains/translations'
 
 const Text = ({ event, ...props }) => {
   const [body] = useTranslatedEventData(event)

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

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