@seamly/web-ui 20.2.0-alpha.3 → 20.3.0

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

@@ -53,12 +53,23 @@ class ExternalApi {
 
   setContext(action, args) {
     switch (action) {
+      case 'setTopic':
+        const { name } = args
+        if (name) {
+          this.context.topic = name
+        }
+        return true
       case 'setTranslation':
         const { enabled, locale } = args
         if (!!enabled && locale) {
           this.context.translationLocale = locale
         }
         return true
+      case 'setVariables':
+        if (Object.keys(args).length > 0) {
+          this.context.variables = { ...args }
+        }
+        return true
       default:
         return false
     }
@@ -145,19 +156,21 @@ class ExternalApi {
   }
 
   getCombinedConfig(userConfig) {
-    if (typeof this.appConfig === 'function') {
-      return this.appConfig(userConfig)
-    }
     const context = {
       ...(userConfig.context || this.appConfig.context),
       ...this.context,
     }
+    // Key `variables` should only be set if there are any variables
+    const variables = this.getMergedVariables(userConfig)
+    if (Object.keys(variables).length > 0) {
+      context.variables = variables
+    }
     const defaults = {
       ...this.appConfig.defaults,
       ...userConfig.defaults,
     }
 
-    return {
+    const combinedConfig = {
       ...this.appConfig,
       ...userConfig,
       api: {
@@ -167,6 +180,18 @@ class ExternalApi {
       context: Object.keys(context).length ? context : undefined,
       defaults: Object.keys(defaults).length ? defaults : undefined,
     }
+
+    return typeof this.appConfig === 'function'
+      ? this.appConfig(combinedConfig)
+      : combinedConfig
+  }
+
+  getMergedVariables(userConfig) {
+    return {
+      ...(this.appConfig.context?.variables || {}),
+      ...(userConfig.context?.variables || {}),
+      ...(this.context.variables || {}),
+    }
   }
 }
 

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 'style-guide/states'
 
 const StyleGuideApp = ({
   config,

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

@@ -12,10 +12,7 @@ import {
 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 i18nReducer, Actions as I18nActions } from 'domains/i18n'
 import { Reducer as interruptReducer } from 'domains/interrupt'
 import { Reducer as appReducer } from 'domains/app'
 import {

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

@@ -7,11 +7,11 @@ import {
   useSkiplinkTargetFocusing,
 } 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 'ui/components/layout/privacy-disclaimer'
-import { useVisibility } from 'domains/visibility'
 
 const Conversation = () => {
   const { t } = useI18n()

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

@@ -38,7 +38,10 @@ const CardComponent = ({
       sendMessage({ body: action.ask })
     } else if (action.type === cardTypes.topic) {
       const { topic: name, fallbackMessage } = action
-      sendAction({ type: 'set_topic', body: { name, fallbackMessage } })
+      sendAction({
+        type: actionTypes.setTopic,
+        body: { name, fallbackMessage },
+      })
     }
   }, [sendMessage, action, sendAction, emitCardEvent])
 

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

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

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

@@ -1,12 +1,16 @@
 import { useCallback, useState } from 'preact/hooks'
-import { className } from '../../../../lib/css'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import { useTranslatedEventData } from 'domains/translations'
+import { useUserHasResponded } from 'domains/app'
+import { setHasResponded } from 'domains/app/actions'
 import { actionTypes } from '../../../utils/seamly-utils'
-import { useI18n } from '../../../../domains/i18n'
-import { useTranslatedEventData } from '../../../../domains/translations'
 import MessageContainer from '../message-container'
-import { useSeamlyCommands } from '../../../hooks/seamly-hooks'
+import {
+  useSeamlyCommands,
+  useSeamlyDispatchContext,
+} from '../../../hooks/seamly-hooks'
 import SuggestionsList from '../../suggestions/suggestions-list'
-import { useConfig } from '../../../../domains/config'
 
 export const useSuggestions = (event) => {
   const { payload } = event
@@ -19,18 +23,22 @@ export const useSuggestions = (event) => {
 }
 
 const ConversationSuggestions = ({ event, ...props }) => {
-  const { userResponded } = useConfig()
   const [isExpanded, setIsExpanded] = useState(true)
+  const dispatch = useSeamlyDispatchContext()
+  const userResponded = useUserHasResponded()
+  const { sendAction, addMessageBubble } = useSeamlyCommands()
+  const { suggestions, payload } = useSuggestions(event)
+
   const { t } = useI18n()
   const headingText = t('suggestions.headingText')
   const footerText = t('suggestions.footerText')
-  const { sendAction, addMessageBubble } = useSeamlyCommands()
-  const { suggestions, payload } = useSuggestions(event)
+
   const handleClick = useCallback(
     ({ id, question }) => {
-      // @todo Refactor to 'suggestionclick'
       setIsExpanded(false)
+      dispatch(setHasResponded(true))
 
+      // @todo Refactor to 'suggestionclick'
       sendAction({
         type: actionTypes.custom,
         originMessage: payload.id,
@@ -45,7 +53,7 @@ const ConversationSuggestions = ({ event, ...props }) => {
 
       addMessageBubble(question)
     },
-    [payload, sendAction, addMessageBubble, setIsExpanded],
+    [dispatch, sendAction, payload.id, addMessageBubble],
   )
 
   if (!isExpanded || userResponded) {

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

@@ -2,10 +2,10 @@ import { useCallback } from 'preact/hooks'
 import { className } from 'lib/css'
 import parseBody from 'lib/parse-body'
 import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
-import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
 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'
 
 const Cta = ({ event }) => {
   const [body] = useTranslatedEventData(event)

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

@@ -1,18 +1,13 @@
-import { useMemo } from 'preact/hooks'
 import { useI18n } from 'domains/i18n'
 import EventDivider from 'ui/components/conversation/event-divider'
 import { className } from 'lib/css'
-import { useTranslations } from 'domains/translations'
+import { useTranslations, useLocaleNativeName } from 'domains/translations'
 
 const NewTranslationDivider = ({ event }) => {
   const { t } = useI18n()
   const { translationEnabled, translationLocale, text } = event.payload.body
-  const { enableTranslations, languages } = useTranslations()
-
-  const languageName = useMemo(() => {
-    return languages?.find((lang) => lang.locale === translationLocale)
-      ?.nativeName
-  }, [languages, translationLocale])
+  const { enableTranslations } = useTranslations()
+  const localeNativeName = useLocaleNativeName(translationLocale)
 
   const handleRestartButtonclick = () => {
     enableTranslations(translationLocale)
@@ -25,7 +20,7 @@ const NewTranslationDivider = ({ event }) => {
           translationEnabled
             ? 'translations.divider.startText'
             : 'translations.divider.stopText',
-          { language: languageName },
+          { language: localeNativeName },
         )}
       </p>
       {translationEnabled ? (

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

@@ -1,7 +1,7 @@
 import { useState } from 'preact/hooks'
-import ImageLightbox from './image-lightbox'
 import MessageContainer from 'ui/components/conversation/message-container'
 import { useTranslatedEventData } from 'domains/translations'
+import ImageLightbox from './image-lightbox'
 
 const Image = ({ event, descriptorId, ...props }) => {
   const [body] = useTranslatedEventData(event)

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

@@ -3,11 +3,8 @@ import Mustache from 'mustache'
 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()
-
   const { participant } = event.payload
   const [introduction] = useTranslatedEventData(event)
 
@@ -21,13 +18,11 @@ const Participant = ({ event }) => {
     return null
   }
 
-  const avatar = participant.avatar || agent?.avatar
-
   return (
     <EventDivider
-      graphicSrc={avatar}
-      graphicType={avatar ? 'avatar' : undefined}
-      iconName={!avatar ? 'balloon' : undefined}
+      graphicSrc={participant.avatar}
+      graphicType={participant.avatar ? 'avatar' : undefined}
+      iconName={!participant.avatar ? 'balloon' : undefined}
       childrenHTML={intro}
       dividerType="participant"
     />

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 useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import { parseRichText } from './hooks/use-text-rendering'
 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'
 
 const Text = ({ event, ...props }) => {
   const [body] = useTranslatedEventData(event)

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

@@ -1,6 +1,6 @@
-import EventParticipant from './event/event-participant'
 import { useSeamlyCurrentAgent } from 'ui/hooks/seamly-hooks'
 import { className } from 'lib/css'
+import EventParticipant from './event/event-participant'
 
 const Loader = () => {
   const { id } = useSeamlyCurrentAgent() || {}

package/src/javascripts/ui/components/conversation/message-container.js

@@ -1,8 +1,8 @@
 import { className } from 'lib/css'
-import EventParticipant from './event/event-participant'
 import { useSeamlyMessageContainerClassNames } from 'ui/hooks/component-helper-hooks'
 import { useTranslatedEventData } from 'domains/translations'
 import { useI18n } from 'domains/i18n'
+import EventParticipant from './event/event-participant'
 
 function MessageContainer({
   showParticipant = true,

package/src/javascripts/ui/components/core/seamly-activity-monitor.js

@@ -1,11 +1,11 @@
 import { useRef, useCallback } from 'preact/hooks'
-import SeamlyActivityEventContext from './seamly-activity-event-context'
 import {
   useSeamlyCommands,
   useSeamlyIdleDetachCountdown,
 } from 'ui/hooks/seamly-hooks'
 import { activitySendDelay } from 'config'
 import { className } from 'lib/css'
+import SeamlyActivityEventContext from './seamly-activity-event-context'
 
 const SeamlyActivityMonitor = ({ children }) => {
   const prevSendTimestamp = useRef(0)

package/src/javascripts/ui/components/core/seamly-core.js

@@ -1,4 +1,6 @@
 import { useErrorBoundary } from 'preact/hooks'
+import { StoreProvider } from 'domains/redux'
+import { catchError } from 'domains/errors'
 import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
 import SeamlyReadState from './seamly-read-state'
 import SeamlyNewNotifications from './seamly-new-notifications'
@@ -9,8 +11,6 @@ import SeamlyInitializer from './seamly-initializer'
 import SeamlyEventSubscriber from './seamly-event-subscriber'
 import SeamlyFileUpload from './seamly-file-upload'
 import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
-import { StoreProvider } from 'domains/redux'
-import { catchError } from 'domains/errors'
 import ComponentFilter from '../conversation/component-filter'
 
 const SeamlyCore = ({ store, children, config, eventBus, api }) => {

package/src/javascripts/ui/components/core/seamly-file-upload.js

@@ -1,4 +1,3 @@
-import SeamlyFileUploadContext from './seamly-file-upload-context'
 import { useI18n } from 'domains/i18n'
 import { randomId } from 'lib/id'
 import { seamlyActions } from 'ui/utils/seamly-utils'
@@ -7,6 +6,7 @@ import {
   useSeamlyApiContext,
   useSeamlyDispatchContext,
 } from 'ui/hooks/seamly-hooks'
+import SeamlyFileUploadContext from './seamly-file-upload-context'
 
 const {
   REGISTER_UPLOAD,

package/src/javascripts/ui/components/core/seamly-instance-functions-loader.js

@@ -7,11 +7,12 @@ import {
   useSeamlyActivityEventHandler,
   useSeamlyApiContext,
 } from 'ui/hooks/seamly-hooks'
-import { SeamlyEventBusContext } from './seamly-api-context'
+import { actionTypes } from 'ui/utils/seamly-utils'
 import { useTranslations } from 'domains/translations'
 import { useInterrupt } from 'domains/interrupt'
 import { useConfig } from 'domains/config'
 import { visibilityStates, useVisibility } from 'domains/visibility'
+import { SeamlyEventBusContext } from './seamly-api-context'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {
   const eventBus = useContext(SeamlyEventBusContext)
@@ -101,7 +102,10 @@ const SeamlyInstanceFunctionsLoader = () => {
     'setTopic',
     ({ name, fallbackMessage }) => {
       if (name && fallbackMessage) {
-        sendAction({ type: 'set_topic', body: { name, fallbackMessage } })
+        sendAction({
+          type: actionTypes.setTopic,
+          body: { name, fallbackMessage },
+        })
       } else {
         console.warn(
           'A name and a fallbackMessage are required for the setTopic action.',

package/src/javascripts/ui/components/core/seamly-live-region.js

@@ -5,10 +5,10 @@ import {
   useCallback,
   useContext,
 } from 'preact/hooks'
-import { SeamlyLiveRegionContext } from './seamly-live-region-context'
-import { SeamlyEventBusContext } from './seamly-api-context'
 import { ariaLiveLevels } from 'ui/utils/seamly-utils'
 import { className } from 'lib/css'
+import { SeamlyLiveRegionContext } from './seamly-live-region-context'
+import { SeamlyEventBusContext } from './seamly-api-context'
 
 const SeamlyLiveRegion = ({ children }) => {
   const eventBus = useContext(SeamlyEventBusContext)

package/src/javascripts/ui/components/entry/entry-container.js

@@ -11,11 +11,11 @@ import { entryTypes } from 'ui/utils/seamly-utils'
 import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
 import IdleDetachWarning from 'ui/components/warnings/idle-detach-warning'
 import ResumeConversationPrompt from 'ui/components/warnings/resume-conversation-prompt'
+import { useConfig } from 'domains/config'
+import { useVisibility } from 'domains/visibility'
 import TextEntry from './text-entry'
 import UploadToggle from './upload-toggle'
 import Upload from './upload'
-import { useConfig } from 'domains/config'
-import { useVisibility } from 'domains/visibility'
 
 const EntryContainer = () => {
   const { isOpen } = useVisibility()

package/src/javascripts/ui/components/entry/text-entry/hooks.js

@@ -3,10 +3,7 @@ import { useI18n } from 'domains/i18n'
 import { useLiveRegion } from 'ui/hooks/live-region-hooks'
 import { useEntryTextLimit } from 'ui/hooks/seamly-state-hooks'
 import { debounce } from 'ui/utils/general-utils'
-import {
-  maxCharacterSrDebounceDelay,
-  maxCharacterWarningLimit,
-} from 'config'
+import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
 import { useFormControl } from 'domains/forms'
 
 export function useCharacterLimit(controlName) {

package/src/javascripts/ui/components/entry/text-entry/text-entry-form.js

@@ -10,8 +10,8 @@ import Icon from 'ui/components/layout/icon'
 import { useFormControl } from 'domains/forms'
 import Form from 'ui/components/form-controls/form'
 import Input from 'ui/components/form-controls/input'
-import { useCharacterLimit } from './hooks'
 import { useI18n } from 'domains/i18n'
+import { useCharacterLimit } from './hooks'
 
 export default function TextEntryForm({ controlName, skipLinkId }) {
   const { t } = useI18n()

package/src/javascripts/ui/components/form-controls/select.js

@@ -1,5 +1,5 @@
-import FormControlWrapper from './wrapper'
 import { useFormContext, useFormControl } from 'domains/forms'
+import FormControlWrapper from './wrapper'
 
 const Select = ({
   id,

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

@@ -1,4 +1,3 @@
-import Icon from './icon'
 import {
   useSeamlyHeaderData,
   useSeamlyUnreadCount,
@@ -9,6 +8,7 @@ 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()

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

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

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

@@ -4,11 +4,11 @@ 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 Options from './options'
 import InOutTransition, {
   transitionStartStates,
 } 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()

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

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

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

@@ -10,9 +10,9 @@ import {
 } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
 import { FormProvider } from 'domains/forms'
-import TranscriptForm from './transcript-form'
 import { getValidator } from 'ui/utils/form-utils'
 import { isEmailString, isNotEmptyString } from 'ui/utils/validations'
+import TranscriptForm from './transcript-form'
 
 const formId = 'sendTranscript'
 const controlName = 'email'

package/src/javascripts/ui/components/suggestions/suggestions-item.js

@@ -15,7 +15,7 @@ const SuggestionsItem = ({
   hasIcon,
 }) => {
   const mappedClassNames = useMemo(() => {
-    return ['suggestions-item', ...categories.map(mapCategoryToClass)]
+    return ['suggestions__item', ...categories.map(mapCategoryToClass)]
   }, [categories])
 
   const handleClick = useCallback(() => {

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 Prompt from './prompt'
 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'
 
 const ResumeConversationPrompt = () => {
   const { t } = useI18n()

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

@@ -1,5 +1,4 @@
 import { useRef } from 'preact/hooks'
-import Modal from './modal'
 import { useI18n } from 'domains/i18n'
 import {
   useSeamlyActivityEventHandler,
@@ -8,6 +7,7 @@ import {
 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/hooks/file-upload-hooks.js

@@ -1,9 +1,8 @@
 import { useCallback, useContext } from 'preact/hooks'
-import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
 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'
 
 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 'ui/utils/general-utils'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { seamlyActions } from 'ui/utils/seamly-utils'
+import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
 
 const { SET_SEAMLY_CONTAINER_ELEMENT } = seamlyActions
 

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

@@ -1,10 +1,10 @@
 import { useRef, useCallback, useEffect } from 'preact/hooks'
 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 { 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 'ui/utils/seamly-utils'
 
 const {
   SET_USER_SELECTED_OPTION,

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 { 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 'ui/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 {
-  useSeamlyApiContext,
-  useSeamlyHasConversation,
-} from './seamly-api-hooks'
-import { useSeamlyUnreadCount } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
 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 { 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'
+import { useStableCallback } from './utility-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
+import { useSeamlyUnreadCount } from './seamly-state-hooks'
+import {
+  useSeamlyApiContext,
+  useSeamlyHasConversation,
+} from './seamly-api-hooks'
 
 const { ADD_EVENT, SET_INITIAL_STATE } = seamlyActions