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

package/src/javascripts/ui/components/layout/agent-info.js

@@ -1,14 +1,14 @@
-import Icon from './icon'
 import {
   useSeamlyHeaderData,
   useSeamlyUnreadCount,
   useSeamlyCurrentAgent,
-} from '../../hooks/seamly-hooks'
-import { className } from '../../../lib/css'
-import { useI18n } from '../../../domains/i18n'
-import { useInterrupt } from '../../../domains/interrupt'
-import { useConfig } from '../../../domains/config'
-import { useVisibility } from '../../../domains/visibility'
+} from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import { useInterrupt } from 'domains/interrupt'
+import { useStartChatIcon } from 'domains/config'
+import { useVisibility } from 'domains/visibility'
+import Icon from './icon'
 
 const AgentInfo = () => {
   const { t } = useI18n()
@@ -17,12 +17,8 @@ const AgentInfo = () => {
   const { isOpen } = useVisibility()
   const currentAgent = useSeamlyCurrentAgent()
   const { hasInterrupt } = useInterrupt()
-  const { defaults } = useConfig()
-
-  const { startChatIcon } = defaults || {}
-
-  const avatar = currentAgent && !hasInterrupt ? currentAgent.avatar : null
-
+  const startChatIcon = useStartChatIcon()
+  const src = currentAgent?.avatar ?? startChatIcon
   const displaySubtitle = hasInterrupt ? '' : subTitle
 
   const classNames = ['message-count']
@@ -36,13 +32,13 @@ const AgentInfo = () => {
   }
 
   return (
-    (avatar || displaySubtitle || !isOpen) && (
+    (displaySubtitle || !isOpen) && (
       <div className={className('agent-info')}>
         <div className={className('agent-info__graphic')}>
-          {avatar || startChatIcon ? (
+          {src ? (
             <img
-              className={className(avatar ? 'avatar' : 'icon')}
-              src={avatar || startChatIcon}
+              className={className(currentAgent?.avatar ? 'avatar' : 'icon')}
+              src={src}
               alt=""
             />
           ) : (

package/src/javascripts/ui/components/layout/chat-frame.js

@@ -1,8 +1,8 @@
-import { className } from '../../../lib/css'
-import AppOptions from '../app-options'
-import { ChatStatus as TranslationsChatStatus } from '../../../domains/translations'
-import { useInterrupt } from '../../../domains/interrupt'
-import { useVisibility } from '../../../domains/visibility'
+import { className } from 'lib/css'
+import AppOptions from 'ui/components/app-options'
+import { ChatStatus as TranslationsChatStatus } from 'domains/translations'
+import { useInterrupt } from 'domains/interrupt'
+import { useVisibility } from 'domains/visibility'
 
 function ChatFrame({ children, interruptComponent: InterruptComponent }) {
   const { hasInterrupt, meta } = useInterrupt()
@@ -22,7 +22,7 @@ function ChatFrame({ children, interruptComponent: InterruptComponent }) {
     <>
       <TranslationsChatStatus />
       <div className={className('chat__container')}>{getContent()}</div>
-      <AppOptions />
+      {isOpen && <AppOptions />}
     </>
   )
 }

package/src/javascripts/ui/components/layout/deprecated-app-frame.js

@@ -1,15 +1,15 @@
 import { useCallback, useMemo } from 'preact/hooks'
-import { className } from '../../../lib/css'
+import { className } from 'lib/css'
 import {
   useSeamlyAppContainerClassNames,
   useSeamlyLayoutMode,
   useSeamlyContainerElement,
-} from '../../hooks/seamly-hooks'
-import Faq from '../faq/faq'
-import { useConfig } from '../../../domains/config'
-import { useUserHasResponded } from '../../../domains/app'
-import { useI18n } from '../../../domains/i18n'
-import { useVisibility, visibilityStates } from '../../../domains/visibility'
+} from 'ui/hooks/seamly-hooks'
+import Faq from 'ui/components/faq/faq'
+import { useConfig } from 'domains/config'
+import { useUserHasResponded } from 'domains/app'
+import { useI18n } from 'domains/i18n'
+import { useVisibility, visibilityStates } from 'domains/visibility'
 
 const DeprecatedAppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()

package/src/javascripts/ui/components/layout/header.js

@@ -1,8 +1,8 @@
 import { useRef } from 'preact/hooks'
-import { className } from '../../../lib/css'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import { useSeamlyStateContext } from 'ui/hooks/seamly-hooks'
 import Icon from './icon'
-import { useI18n } from '../../../domains/i18n'
-import { useSeamlyStateContext } from '../../hooks/seamly-hooks'
 
 const Header = ({ children, onCloseChat }) => {
   const { headerCollapseButtonId } = useSeamlyStateContext()

package/src/javascripts/ui/components/layout/icon.js

@@ -1,4 +1,4 @@
-import { className as classNameFn } from '../../../lib/css'
+import { className as classNameFn } from 'lib/css'
 
 /* eslint-disable import/no-webpack-loader-syntax */
 // The eslint rules are disabled for this as otherwsise we'd need to include the loader rule in all implementations

package/src/javascripts/ui/components/layout/interrupt.js

@@ -1,12 +1,12 @@
 import { useEffect } from 'preact/hooks'
-import { className } from '../../../lib/css'
+import { className } from 'lib/css'
 import {
   useSeamlyCommands,
   useLiveRegion,
   useGeneratedId,
   useSkiplinkTargetFocusing,
-} from '../../hooks/seamly-hooks'
-import SeamlySessionExpiredError from '../../../api/errors/seamly-session-expired-error'
+} from 'ui/hooks/seamly-hooks'
+import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
 
 const Interrupt = ({
   originalError,

package/src/javascripts/ui/components/layout/privacy-disclaimer.js

@@ -1,6 +1,6 @@
-import { className } from '../../../lib/css'
-import { useI18n } from '../../../domains/i18n'
-import { useConfig } from '../../../domains/config'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import { useConfig } from 'domains/config'
 
 const PrivacyDisclaimer = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/options/options-button.js

@@ -1,14 +1,14 @@
 import { createRef } from 'preact'
 import { useState, useRef, useEffect, useMemo } from 'preact/hooks'
-import { className } from '../../../lib/css'
-import { useSeamlyOptions, useOptionButton } from '../../hooks/seamly-hooks'
-import { useI18n } from '../../../domains/i18n'
-import Icon from '../layout/icon'
-import Options from './options'
+import { className } from 'lib/css'
+import { useSeamlyOptions, useOptionButton } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n'
+import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
-} from '../widgets/in-out-transition'
-import { getKey, keyNames, focusElement } from '../../utils/general-utils'
+} from 'ui/components/widgets/in-out-transition'
+import { getKey, keyNames, focusElement } from 'ui/utils/general-utils'
+import Options from './options'
 
 const OptionsButton = () => {
   const { t } = useI18n()
@@ -193,11 +193,7 @@ const OptionsButton = () => {
                   ref={(item) => {
                     menuItemButtons.current[i] = item
                   }}
-                  className={className([
-                    'button',
-                    'button--secondary',
-                    ...(available ? [] : ['button--disabled']),
-                  ])}
+                  className={className(['button', 'button--secondary'])}
                   onKeyDown={(e) => onMenuItemKeyDownHandler(e, i)}
                   onKeyPress={(e) => onKeyPressHandler(e, i)}
                   onClick={() => onMenuItemClickHandler(name, available)}
@@ -227,7 +223,6 @@ const OptionsButton = () => {
           ...(!multiMenu && firstOptionName
             ? [`chat__options__button--${firstOptionName}`]
             : []),
-          ...(!multiMenu && !firstOption.available ? ['button--disabled'] : []),
         ])}
         id={id}
         onClick={onClickHandler}

package/src/javascripts/ui/components/options/options-frame.js

@@ -1,12 +1,12 @@
 import { useRef, useEffect } from 'preact/hooks'
-import Icon from '../layout/icon'
+import Icon from 'ui/components/layout/icon'
 import {
   useGeneratedId,
   useOptionButton,
   useSeamlyOptions,
-} from '../../hooks/seamly-hooks'
-import { className } from '../../../lib/css'
-import { focusElement } from '../../utils/general-utils'
+} from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+import { focusElement } from 'ui/utils/general-utils'
 
 const OptionsFrame = ({
   className: givenClassName,

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

@@ -1,6 +1,6 @@
 import { useRef } from 'preact/hooks'
+import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
 import Transcript from './transcript'
-import { useSeamlyOptions } from '../../hooks/seamly-hooks'
 
 const mapper = {
   sendTranscript: Transcript,

package/src/javascripts/ui/components/options/transcript/index.js

@@ -1,18 +1,18 @@
 import { useCallback, useMemo, useState } from 'preact/hooks'
-import { useI18n } from '../../../../domains/i18n'
-import OptionsFrame from '../options-frame'
-import { className } from '../../../../lib/css'
+import { useI18n } from 'domains/i18n'
+import OptionsFrame from 'ui/components/options/options-frame'
+import { className } from 'lib/css'
 import {
   useGeneratedId,
   useOptionButton,
   useSeamlyCommands,
   useSeamlyOptions,
-} from '../../../hooks/seamly-hooks'
-import { actionTypes } from '../../../utils/seamly-utils'
-import { FormProvider } from '../../../../domains/forms'
+} from 'ui/hooks/seamly-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import { FormProvider } from 'domains/forms'
+import { getValidator } from 'ui/utils/form-utils'
+import { isEmailString, isNotEmptyString } from 'ui/utils/validations'
 import TranscriptForm from './transcript-form'
-import { getValidator } from '../../../utils/form-utils'
-import { isEmailString, isNotEmptyString } from '../../../utils/validations'
 
 const formId = 'sendTranscript'
 const controlName = 'email'

package/src/javascripts/ui/components/options/transcript/transcript-form.js

@@ -1,7 +1,7 @@
-import { className } from '../../../../lib/css'
-import { useI18n } from '../../../../domains/i18n'
-import Form from '../../form-controls/form'
-import Input from '../../form-controls/input'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import Form from 'ui/components/form-controls/form'
+import Input from 'ui/components/form-controls/input'
 
 export default function TranscriptForm({ controlName, describedById }) {
   const { t } = useI18n()

package/src/javascripts/ui/components/view/window-view/window-open-button.js

@@ -6,7 +6,7 @@ import {
   useSkiplinkTargetFocusing,
 } from '../../../hooks/seamly-hooks'
 import { useI18n } from '../../../../domains/i18n'
-import { useConfig } from '../../../../domains/config'
+import { useStartChatIcon } from '../../../../domains/config'
 import { useVisibility } from '../../../../domains/visibility'
 import Icon from '../../layout/icon'
 import { useInterrupt } from '../../../../domains/interrupt'
@@ -16,15 +16,15 @@ import InOutTransition, {
 import { useSeamlyHasConversation } from '../../../hooks/seamly-api-hooks'
 
 const ButtonIcon = () => {
+  const startChatIcon = useStartChatIcon()
   const currentAgent = useSeamlyCurrentAgent()
   const { hasInterrupt } = useInterrupt()
-  const { defaults } = useConfig()
-  const startChatIcon = defaults?.startChatIcon
-  const avatar = currentAgent && !hasInterrupt ? currentAgent.avatar : undefined
-  return avatar || startChatIcon ? (
+  const isActiveConversation = currentAgent && !hasInterrupt
+  const src = isActiveConversation ? currentAgent.avatar : startChatIcon
+  return src ? (
     <img
-      className={className(avatar ? 'avatar' : 'icon')}
-      src={avatar || startChatIcon}
+      className={className(isActiveConversation ? 'avatar' : 'icon')}
+      src={src}
       alt=""
     />
   ) : (

package/src/javascripts/ui/components/warnings/idle-detach-warning.js

@@ -1,9 +1,9 @@
-import { className } from '../../../lib/css'
-import { useI18n } from '../../../domains/i18n'
-import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-countdown'
-import { useSkiplinkTargetFocusing } from '../../hooks/focus-helper-hooks'
-import useSeamlyActivityEventHandler from '../../hooks/use-seamly-activity-event-handler'
-import useSeamlyCommands from '../../hooks/use-seamly-commands'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
+import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
+import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
+import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
 import Prompt from './prompt'
 
 const IdleDetachWarning = () => {

package/src/javascripts/ui/components/warnings/prompt.js

@@ -1,5 +1,5 @@
-import { className } from '../../../lib/css'
-import { useSkiplink, useGeneratedId } from '../../hooks/seamly-hooks'
+import { className } from 'lib/css'
+import { useSkiplink, useGeneratedId } from 'ui/hooks/seamly-hooks'
 
 const Prompt = ({ baseClassName, children, title }) => {
   const skiplinkTargetId = useSkiplink()

package/src/javascripts/ui/components/warnings/resume-conversation-prompt.js

@@ -1,9 +1,9 @@
-import { className } from '../../../lib/css'
-import { useI18n } from '../../../domains/i18n'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
+import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
+import { useSeamlyCurrentAgent } from 'ui/hooks/seamly-state-hooks'
 import Prompt from './prompt'
-import useSeamlyResumeConversationPrompt from '../../hooks/use-seamly-resume-conversation-prompt'
-import useSeamlyActivityEventHandler from '../../hooks/use-seamly-activity-event-handler'
-import { useSeamlyCurrentAgent } from '../../hooks/seamly-state-hooks'
 
 const ResumeConversationPrompt = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/widgets/in-out-transition.js

@@ -1,8 +1,8 @@
 import { toChildArray, cloneElement } from 'preact'
 import { useRef, useState, useEffect } from 'preact/hooks'
-import { useStableCallback } from '../../hooks/seamly-hooks'
-import { className } from '../../../lib/css'
-import { defaultTransitionTimeMs } from '../../../config'
+import { useStableCallback } from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+import { defaultTransitionTimeMs } from 'config'
 
 const transitionClasses = {
   visible: className('transition--visible'),

package/src/javascripts/ui/components/widgets/lightbox.js

@@ -1,13 +1,13 @@
 import { useRef } from 'preact/hooks'
-import Modal from './modal'
-import { useI18n } from '../../../domains/i18n'
+import { useI18n } from 'domains/i18n'
 import {
   useSeamlyActivityEventHandler,
   useSeamlyAppContainerClassNames,
-} from '../../hooks/seamly-hooks'
-import { className } from '../../../lib/css'
-import Icon from '../layout/icon'
-import { useConfig } from '../../../domains/config'
+} from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
+import { useConfig } from 'domains/config'
+import Modal from './modal'
 
 const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
   const { zIndex, layoutMode, namespace } = useConfig()

package/src/javascripts/ui/components/widgets/modal.js

@@ -1,8 +1,8 @@
 import { render, toChildArray } from 'preact'
 import { createFocusTrap } from 'focus-trap'
 import { useLayoutEffect, useEffect, useRef, useState } from 'preact/hooks'
-import { createAriaHider } from '../../utils/general-utils'
-import { useGeneratedId } from '../../hooks/seamly-hooks'
+import { createAriaHider } from 'ui/utils/general-utils'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 
 const Modal = ({
   children,

package/src/javascripts/ui/components/widgets/upload-progress.js

@@ -1,7 +1,7 @@
-import { className } from '../../../lib/css'
-import { useFileUploads } from '../../hooks/seamly-hooks'
-import { useI18n } from '../../../domains/i18n'
-import Error from '../form-controls/error'
+import { className } from 'lib/css'
+import { useFileUploads } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n'
+import Error from 'ui/components/form-controls/error'
 
 const UploadProgress = () => {
   const { t } = useI18n()

package/src/javascripts/ui/hooks/component-helper-hooks.js

@@ -1,4 +1,4 @@
-import { useConfig } from '../../domains/config'
+import { useConfig } from 'domains/config'
 
 export const useSeamlyAppContainerClassNames = () => {
   return useConfig().appContainerClassNames

package/src/javascripts/ui/hooks/file-upload-hooks.js

@@ -1,9 +1,8 @@
 import { useCallback, useContext } from 'preact/hooks'
+import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
+import { seamlyActions } from 'ui/utils/seamly-utils'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
-import SeamlyFileUploadContext from '../components/core/seamly-file-upload-context'
-
-import { seamlyActions } from '../utils/seamly-utils'
 
 const { CLEAR_ALL_UPLOADS } = seamlyActions
 

package/src/javascripts/ui/hooks/focus-helper-hooks.js

@@ -1,11 +1,11 @@
 import { useCallback, useRef } from 'preact/hooks'
-import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
 import {
   focusElement,
   runIfElementContainsOrHasFocus,
-} from '../utils/general-utils'
+} from 'ui/utils/general-utils'
+import { seamlyActions } from 'ui/utils/seamly-utils'
+import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { seamlyActions } from '../utils/seamly-utils'
 
 const { SET_SEAMLY_CONTAINER_ELEMENT } = seamlyActions
 

package/src/javascripts/ui/hooks/live-region-hooks.js

@@ -1,6 +1,6 @@
 import { useCallback, useContext } from 'preact/hooks'
-import { SeamlyLiveRegionContext } from '../components/core/seamly-live-region-context'
-import { ariaLiveLevels } from '../utils/seamly-utils'
+import { SeamlyLiveRegionContext } from 'ui/components/core/seamly-live-region-context'
+import { ariaLiveLevels } from 'ui/utils/seamly-utils'
 
 export const useSeamlyLiveRegionContext = () =>
   useContext(SeamlyLiveRegionContext)

package/src/javascripts/ui/hooks/seamly-api-hooks.js

@@ -1,5 +1,5 @@
 import { useContext } from 'preact/hooks'
-import { SeamlyApiContext } from '../components/core/seamly-api-context'
+import { SeamlyApiContext } from 'ui/components/core/seamly-api-context'
 
 export const useSeamlyApiContext = () => useContext(SeamlyApiContext)
 

package/src/javascripts/ui/hooks/seamly-entry-hooks.js

@@ -1,10 +1,10 @@
 import { useRef, useCallback, useEffect } from 'preact/hooks'
-import { seamlyActions, actionTypes } from '../utils/seamly-utils'
+import { seamlyActions, actionTypes } from 'ui/utils/seamly-utils'
+import { typingTimeout } from 'config'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyOptions } from './seamly-option-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { typingTimeout } from '../../config'
 
 const {
   SET_BLOCK_AUTO_ENTRY_SWITCH,

package/src/javascripts/ui/hooks/seamly-option-hooks.js

@@ -1,10 +1,10 @@
 import { useCallback } from 'preact/hooks'
-import { useI18n } from '../../domains/i18n'
+import { useI18n } from 'domains/i18n'
+import { seamlyActions } from 'ui/utils/seamly-utils'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyObjectStore } from './seamly-api-hooks'
 import { useElementFocusingById } from './focus-helper-hooks'
-import { seamlyActions } from '../utils/seamly-utils'
 
 const {
   SET_USER_SELECTED_OPTION,

package/src/javascripts/ui/hooks/seamly-state-hooks.js

@@ -1,9 +1,9 @@
 import { createSelector } from 'reselect'
-import { useSelector } from '../../domains/redux'
-import { microsecondsToMilliseconds } from '../utils/general-utils'
-import * as ConfigSelectors from '../../domains/config/selectors'
-import * as AppSelectors from '../../domains/app/selectors'
-import { useConfig } from '../../domains/config/hooks'
+import { useSelector } from 'domains/redux'
+import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
+import * as ConfigSelectors from 'domains/config/selectors'
+import * as AppSelectors from 'domains/app/selectors'
+import { useConfig } from 'domains/config/hooks'
 
 export const selectState = (state) => state.state
 export const useSeamlyStateContext = () => useSelector(selectState)

package/src/javascripts/ui/hooks/use-event-component-mapping.js

@@ -1,6 +1,6 @@
 import { useContext } from 'preact/hooks'
-import ComponentContext from '../components/conversation/component-context'
-import { payloadTypes } from '../utils/seamly-utils'
+import ComponentContext from 'ui/components/conversation/component-context'
+import { payloadTypes } from 'ui/utils/seamly-utils'
 
 const useEventComponentMapping = (event) => {
   const components = useContext(ComponentContext)

package/src/javascripts/ui/hooks/use-seamly-activity-event-handler.js

@@ -1,5 +1,5 @@
 import { useContext } from 'preact/hooks'
-import SeamlyActivityEventContext from '../components/core/seamly-activity-event-context'
+import SeamlyActivityEventContext from 'ui/components/core/seamly-activity-event-context'
 
 const useSeamlyActivityEventHandler = () =>
   useContext(SeamlyActivityEventContext)

package/src/javascripts/ui/hooks/use-seamly-chat.js

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'preact/hooks'
-import { useI18n } from '../../domains/i18n'
+import { useI18n } from 'domains/i18n'
+import { seamlyActions } from 'ui/utils/seamly-utils'
+import { useVisibility, visibilityStates } from 'domains/visibility'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useEvents } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useLiveRegion } from './live-region-hooks'
-import { seamlyActions } from '../utils/seamly-utils'
-import { useVisibility, visibilityStates } from '../../domains/visibility'
 import { useConfig } from '../../domains/config'
 
 const { SET_IS_LOADING } = seamlyActions

package/src/javascripts/ui/hooks/use-seamly-commands.js

@@ -1,20 +1,20 @@
 import { useCallback, useContext } from 'preact/hooks'
+import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
+import { randomId } from 'lib/id'
+import { userParticipantId } from 'config'
+import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
+import { Actions as InterruptActions } from 'domains/interrupt'
+import { useConfig } from 'domains/config'
+import * as AppActions from 'domains/app/actions'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useVisibility } from 'domains/visibility'
+import { useStableCallback } from './utility-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
+import { useSeamlyUnreadCount } from './seamly-state-hooks'
 import {
   useSeamlyApiContext,
   useSeamlyHasConversation,
 } from './seamly-api-hooks'
-import { useSeamlyUnreadCount } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { SeamlyEventBusContext } from '../components/core/seamly-api-context'
-import { randomId } from '../../lib/id'
-import { userParticipantId } from '../../config'
-import { actionTypes, seamlyActions } from '../utils/seamly-utils'
-import { useStableCallback } from './utility-hooks'
-import { Actions as InterruptActions } from '../../domains/interrupt'
-import { useConfig } from '../../domains/config'
-import * as AppActions from '../../domains/app/actions'
-import { useUserHasResponded } from '../../domains/app/hooks'
-import { useVisibility } from '../../domains/visibility'
 
 const { ADD_EVENT, SET_INITIAL_STATE } = seamlyActions
 

package/src/javascripts/ui/hooks/use-seamly-dispatch.js

@@ -1,3 +1,3 @@
-import { useStoreDispatch } from '../../domains/redux'
+import { useStoreDispatch } from 'domains/redux'
 
 export default useStoreDispatch

package/src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js

@@ -1,16 +1,16 @@
 import { useCallback, useRef } from 'preact/hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyCommands from './use-seamly-commands'
-import { useI18n } from '../../domains/i18n'
-import { useLiveRegion } from './live-region-hooks'
+import { useI18n } from 'domains/i18n'
 import {
   getTimeFromSeconds,
   millisecondsToSeconds,
-} from '../utils/general-utils'
-import { actionTypes, seamlyActions } from '../utils/seamly-utils'
-import { screenReaderDebounceDelaySeconds } from '../../config'
-import { useVisibility } from '../../domains/visibility'
+} from 'ui/utils/general-utils'
+import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
+import { screenReaderDebounceDelaySeconds } from 'config'
+import { useVisibility } from 'domains/visibility'
+import { useLiveRegion } from './live-region-hooks'
+import useSeamlyCommands from './use-seamly-commands'
+import { useSeamlyStateContext } from './seamly-state-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
 
 const {
   CLEAR_IDLE_DETACH_COUNTDOWN,

package/src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js

@@ -1,9 +1,9 @@
+import { useI18n } from 'domains/i18n'
+import { actionTypes, dismissTypes, seamlyActions } from 'ui/utils/seamly-utils'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { useI18n } from '../../domains/i18n'
 import { useLiveRegion } from './live-region-hooks'
-import { actionTypes, dismissTypes, seamlyActions } from '../utils/seamly-utils'
 
 const { CLEAR_RESUME_CONVERSATION_PROMPT } = seamlyActions
 

package/src/javascripts/ui/hooks/use-single-file-upload.js

@@ -1,6 +1,6 @@
+import { Selectors } from 'domains/forms'
+import { useSelectorWithProps } from 'domains/redux'
 import { useFileUploads } from './seamly-hooks'
-import { useSelectorWithProps } from '../../domains/redux'
-import { Selectors } from '../../domains/forms'
 
 const useSingleFileUpload = (formId, name) => {
   const fileList = useSelectorWithProps(