@seamly/web-ui 20.1.0-alpha.1 → 20.1.0

package/src/javascripts/domains/translations/components/options-button.js

@@ -1,12 +1,12 @@
 import { useRef, useState } from 'preact/hooks'
-import { className } from '../../../lib/css'
-import { focusElement, getKey, keyNames } from '../../../ui/utils/general-utils'
-import Icon from '../../../ui/components/layout/icon'
-import { useGeneratedId } from '../../../ui/hooks/seamly-hooks'
-import { useI18n } from '../../i18n'
+import { className } from 'lib/css'
+import { focusElement, getKey, keyNames } from 'ui/utils/general-utils'
+import Icon from 'ui/components/layout/icon'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n'
 import InOutTransition, {
   transitionStartStates,
-} from '../../../ui/components/widgets/in-out-transition'
+} from 'ui/components/widgets/in-out-transition'
 import TranslationsOptionsDialog from './options-dialog'
 
 export default function TranslationsOptionButton() {

package/src/javascripts/domains/translations/components/options-dialog/form.js

@@ -1,9 +1,9 @@
 import { useMemo } from 'preact/hooks'
-import Form from '../../../../ui/components/form-controls/form'
-import { className } from '../../../../lib/css'
-import { useI18n } from '../../../i18n'
-import { useTranslations } from '../../hooks'
-import Select from '../../../../ui/components/form-controls/select'
+import Form from 'ui/components/form-controls/form'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import { useTranslations } from 'domains/translations/hooks'
+import Select from 'ui/components/form-controls/select'
 
 function TranslationsOptionsDialogForm({ controlName, descriptionId }) {
   const { t } = useI18n()

package/src/javascripts/domains/translations/components/options-dialog/index.js

@@ -1,12 +1,15 @@
 import { useCallback, useMemo, useRef, useState } from 'preact/hooks'
-import OptionsFrame from '../../../../ui/components/options/options-frame'
-import { FormProvider } from '../../../forms'
+import OptionsFrame from 'ui/components/options/options-frame'
+import { FormProvider } from 'domains/forms'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import { getValidator } from 'ui/utils/form-utils'
+import { isNotEmptyString } from 'ui/utils/validations'
+import {
+  useTranslations,
+  useTranslationsContainer,
+} from 'domains/translations/hooks'
+import { useI18n } from 'domains/i18n'
 import TranslationsOptionsDialogForm from './form'
-import { useGeneratedId } from '../../../../ui/hooks/seamly-hooks'
-import { getValidator } from '../../../../ui/utils/form-utils'
-import { isNotEmptyString } from '../../../../ui/utils/validations'
-import { useTranslations, useTranslationsContainer } from '../../hooks'
-import { useI18n } from '../../../i18n'
 
 export const formName = 'translation-settings'
 export const inputName = 'locale'

package/src/javascripts/domains/translations/hooks.js

@@ -2,9 +2,13 @@ import {
   useElementFocusingById,
   useSeamlyCommands,
   useStableCallback,
-} from '../../ui/hooks/seamly-hooks'
-import { actionTypes } from '../../ui/utils/seamly-utils'
-import { useSelector, useSelectorWithProps, useStoreDispatch } from '../redux'
+} from 'ui/hooks/seamly-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import {
+  useSelector,
+  useSelectorWithProps,
+  useStoreDispatch,
+} from 'domains/redux'
 import * as Selectors from './selectors'
 import * as Actions from './actions'
 

package/src/javascripts/domains/translations/middleware.js

@@ -1,6 +1,9 @@
+import { seamlyActions } from 'ui/utils/seamly-utils'
+import {
+  Actions as I18nActions,
+  Selectors as I18nSelectors,
+} from 'domains/i18n'
 import * as Actions from './actions'
-import { seamlyActions } from '../../ui/utils/seamly-utils'
-import { Actions as I18nActions, Selectors as I18nSelectors } from '../i18n'
 
 export default function createMiddleware() {
   return ({ dispatch, getState }) =>

package/src/javascripts/domains/translations/reducer.js

@@ -1,8 +1,8 @@
-import { createReducer } from './utils'
-import { seamlyActions } from '../../ui/utils/seamly-utils'
-import { randomId } from '../../lib/id'
+import { seamlyActions } from 'ui/utils/seamly-utils'
+import { randomId } from 'lib/id'
+import * as AppActions from 'domains/app/actions'
 import * as Actions from './actions'
-import * as AppActions from '../app/actions'
+import { createReducer } from './utils'
 
 const initialState = {
   isActive: false,

package/src/javascripts/domains/translations/selectors.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect'
-import { getPropSelector } from '../redux/utils'
+import { getPropSelector } from 'domains/redux/utils'
 import { selectState } from './utils'
 
 export const getState = selectState

package/src/javascripts/domains/translations/utils.js

@@ -1,4 +1,4 @@
-import { createDomain } from '../../lib/redux-helpers'
+import { createDomain } from 'lib/redux-helpers'
 
 export const { createActions, createReducer, selectState } =
   createDomain('translations')

package/src/javascripts/domains/visibility/actions.js

@@ -1,10 +1,10 @@
-import * as ConfigSelectors from '../config/selectors'
-import * as AppSelectors from '../app/selectors'
+import * as ConfigSelectors from 'domains/config/selectors'
+import * as AppSelectors from 'domains/app/selectors'
 
+import { selectState } from 'ui/hooks/seamly-state-hooks'
 import { visibilityStates, StoreKey } from './constants'
 import { createAction, createThunk, calculateVisibility } from './utils'
 import * as Selectors from './selectors'
-import { selectState } from '../../ui/hooks/seamly-state-hooks'
 
 export const setFromStorage = createAction('setFromStorage', (visibility) => ({
   visibility,

package/src/javascripts/domains/visibility/hooks.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'preact/hooks'
-import { useSelector, useStoreDispatch } from '../redux'
+import { useSelector, useStoreDispatch } from 'domains/redux'
 import * as Actions from './actions'
 import * as Selectors from './selectors'
 import { visibilityStates } from './constants'

package/src/javascripts/domains/visibility/utils.js

@@ -1,4 +1,4 @@
-import { createDomain } from '../../lib/redux-helpers'
+import { createDomain } from 'lib/redux-helpers'
 import { visibilityStates } from './constants'
 
 export const {

package/src/javascripts/lib/css.js

@@ -1,4 +1,4 @@
-import { CSS_NAME } from '../config'
+import { CSS_NAME } from 'config'
 
 /**
  * Generate a className with all classes prefixed with the CSS_NAME

package/src/javascripts/lib/engine/index.js

@@ -1,10 +1,10 @@
 import { render, h } from 'preact'
 import Events from 'minivents'
-import ChatApp from '../../ui/components/chat-app'
-import SeamlyCore from '../../ui/components/core/seamly-core'
-import { API } from '../../api'
-import { createStore } from '../../domains/store'
-import * as AppActions from '../../domains/app/actions'
+import ChatApp from 'ui/components/chat-app'
+import SeamlyCore from 'ui/components/core/seamly-core'
+import { API } from 'api'
+import { createStore } from 'domains/store'
+import * as AppActions from 'domains/app/actions'
 
 export default class Engine {
   constructor(config, externalApi) {
@@ -20,6 +20,7 @@ export default class Engine {
     this.externalApi = externalApi
 
     this.api = new API({
+      layoutMode: config.layoutMode,
       namespace: config.namespace,
       config: config.api,
       context: config.context,

package/src/javascripts/lib/external-api/index.js

@@ -1,4 +1,4 @@
-import Engine from '../engine'
+import Engine from 'lib/engine'
 
 const isActionObject = (actionObj) =>
   typeof actionObj === 'object' && 'action' in actionObj

package/src/javascripts/lib/redux-helpers/index.js

@@ -1,4 +1,4 @@
-import { randomId } from '../id'
+import { randomId } from 'lib/id'
 
 export const SLICE_DELIMITER = '/'
 export const DOMAIN_DELIMITER = '//'

package/src/javascripts/style-guide/components/app.js

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from 'preact/hooks'
 import { getUrlParams, getUrlSearchString, randomId } from '@seamly/web-ui'
+import { getStateObj, getDeprecatedStateObj } from 'style-guide/states'
 import StyleGuideView from './view'
 import StyleGuideLinks from './links'
-import { getStateObj, getDeprecatedStateObj } from '../states'
 
 const StyleGuideApp = ({
   config,

package/src/javascripts/style-guide/components/links.js

@@ -1,5 +1,5 @@
 import { getUrlSearchString, getUrlParams } from '@seamly/web-ui'
-import { categories } from '../states'
+import { categories } from 'style-guide/states'
 
 const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
   const CategoryHeading = `h${headingLevel.toString()}`

package/src/javascripts/style-guide/components/static-core.js

@@ -9,20 +9,17 @@ import {
   ComponentFilter,
   createReduxStore,
 } from '@seamly/web-ui'
-import stateReducer from '../../domains/store/state-reducer'
-import { Reducer as formReducer } from '../../domains/forms'
-import { Reducer as translationsReducer } from '../../domains/translations'
-import {
-  Reducer as i18nReducer,
-  Actions as I18nActions,
-} from '../../domains/i18n'
-import { Reducer as interruptReducer } from '../../domains/interrupt'
-import { Reducer as appReducer } from '../../domains/app'
+import stateReducer from 'domains/store/state-reducer'
+import { Reducer as formReducer } from 'domains/forms'
+import { Reducer as translationsReducer } from 'domains/translations'
+import { Reducer as i18nReducer, Actions as I18nActions } from 'domains/i18n'
+import { Reducer as interruptReducer } from 'domains/interrupt'
+import { Reducer as appReducer } from 'domains/app'
 import {
   Reducer as configReducer,
   Actions as ConfigActions,
-} from '../../domains/config'
-import { Reducer as visibilityReducer } from '../../domains/visibility'
+} from 'domains/config'
+import { Reducer as visibilityReducer } from 'domains/visibility'
 import { seamlyActions } from '../../ui/utils/seamly-utils'
 
 const { SET_PARTICIPANT } = seamlyActions

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,7 +1,7 @@
-import { useSeamlyParticipant } from '../../../hooks/seamly-hooks'
-import { className } from '../../../../lib/css'
-import { useConfig } from '../../../../domains/config'
-import { useI18n } from '../../../../domains/i18n'
+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()

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,9 +1,9 @@
 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 { useParticipants } 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 { agent } = useParticipants()

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()

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

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