@seamly/web-ui 20.6.0 → 20.8.0-alpha.1

package/src/javascripts/ui/components/entry/upload/index.js

@@ -1,20 +1,20 @@
-import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
+import FormProvider from 'domains/forms/provider'
+import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
+import UploadProgress from 'ui/components/widgets/upload-progress'
 import {
-  useSkiplink,
   useFileUploadMeta,
   useFileUploads,
-  useSkiplinkTargetFocusing,
-  useLiveRegion,
   useGeneratedId,
-  useSeamlyEntry,
+  useLiveRegion,
+  useSkiplink,
+  useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
+import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
 import useSingleFileUpload from 'ui/hooks/use-single-file-upload'
-import { useI18n } from 'domains/i18n'
-import { formatBytes } from 'ui/utils/general-utils'
-import UploadProgress from 'ui/components/widgets/upload-progress'
-import { FormProvider } from 'domains/forms'
 import { getValidator } from 'ui/utils/form-utils'
+import { formatBytes } from 'ui/utils/general-utils'
 import {
   fileListObjectIsNotEmpty,
   validateFileSize,
@@ -186,6 +186,7 @@ const Upload = () => {
             onClickCancel={handleOnClickCancel}
           />
         )}
+
         {!canUpload.current && (
           <>
             <span className={className('notification')} id={notificationId}>

package/src/javascripts/ui/components/entry/upload-toggle.js

@@ -7,11 +7,11 @@ import InOutTransition, {
 import {
   useFileUploadMeta,
   useSkiplinkTargetFocusing,
-  useSeamlyEntry,
   useLiveRegion,
   useSeamlyCurrentAgent,
 } from 'ui/hooks/seamly-hooks'
-import { useI18n } from 'domains/i18n'
+import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
+import { useI18n } from 'domains/i18n/hooks'
 import { entryTypes } from 'ui/utils/seamly-utils'
 import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
 

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

@@ -13,13 +13,13 @@ import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
 import { useLiveRegion } from 'ui/hooks/live-region-hooks'
 import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
 import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
-import { useTranslatedEventData } from 'domains/translations'
-import { useInterrupt } from 'domains/interrupt'
-import { useUserHasResponded } from 'domains/app'
+import { useTranslatedEventData } from 'domains/translations/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useUserHasResponded } from 'domains/app/hooks'
 
 const Faq = () => {
   const { t } = useI18n()
@@ -55,8 +55,8 @@ const Faq = () => {
   const prevHasFaqs = useRef(false)
 
   const { isInline } = useSeamlyLayoutMode()
-  const hasResponded = useUserHasResponded()
-  const hideForWindow = !isInline && hasResponded
+  const userHasResponded = useUserHasResponded()
+  const hideForWindow = !isInline && userHasResponded
   const prevHideForWindow = useRef(hideForWindow)
 
   const hasFaqs = !!faqs.length

package/src/javascripts/ui/components/form-controls/file-input.js

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'preact/hooks'
 import { className } from 'lib/css'
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
-import { useFormControl, useFormContext } from 'domains/forms'
+import { useFormControl, useFormContext } from 'domains/forms/hooks'
 import Icon from 'ui/components/layout/icon'
 import Error from './error'
 

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

@@ -1,4 +1,4 @@
-import { useForm } from 'domains/forms'
+import { useForm } from 'domains/forms/hooks'
 import { className } from 'lib/css'
 
 function Form({

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

@@ -1,4 +1,4 @@
-import { useFormContext, useFormControl } from 'domains/forms'
+import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import FormControlWrapper from './wrapper'
 
 function Input({

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

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

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

@@ -4,10 +4,10 @@ import {
   useSeamlyCurrentAgent,
 } 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 { useI18n } from 'domains/i18n/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useStartChatIcon } from 'domains/config/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
 import Icon from './icon'
 
 const AgentInfo = () => {

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

@@ -1,8 +1,8 @@
 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'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import TranslationsChatStatus from 'domains/translations/components/chat-status'
 
 function ChatFrame({ children, interruptComponent: InterruptComponent }) {
   const { hasInterrupt, meta } = useInterrupt()

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

@@ -1,14 +1,13 @@
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
 import { forwardRef } from 'preact/compat'
-import { className } from '../../../lib/css'
-import {
-  useSeamlyAppContainerClassNames,
-  useSeamlyLayoutMode,
-} from '../../hooks/seamly-hooks'
-import { useConfig } from '../../../domains/config'
-import { useUserHasResponded } from '../../../domains/app'
-import { useI18n } from '../../../domains/i18n'
-import { useVisibility, visibilityStates } from '../../../domains/visibility'
-import Suggestions from '../suggestions'
+import { className } from 'lib/css'
+import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'
+import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
+import { visibilityStates } from 'domains/visibility/constants'
+import Suggestions from 'ui/components/suggestions'
 
 const Chat = forwardRef(
   ({ children, className: givenClassName = '' }, forwardedRef) => {
@@ -16,7 +15,7 @@ const Chat = forwardRef(
     const { namespace, layoutMode } = useConfig()
     const { isInline } = useSeamlyLayoutMode()
     const appContainerClassNames = useSeamlyAppContainerClassNames()
-    const userResponded = useUserHasResponded()
+    const userHasResponded = useUserHasResponded()
     const { t } = useI18n()
 
     const defaultClassNames = [
@@ -35,7 +34,7 @@ const Chat = forwardRef(
       classNames.push('chat--collapsed')
     }
 
-    if (userResponded) {
+    if (userHasResponded) {
       classNames.push('chat--user-responded')
     }
 

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

@@ -1,15 +1,16 @@
-import { useCallback, useMemo } from 'preact/hooks'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useCallback, useMemo } from 'preact/hooks'
+import Faq from 'ui/components/faq/faq'
 import {
   useSeamlyAppContainerClassNames,
-  useSeamlyLayoutMode,
   useSeamlyContainerElement,
+  useSeamlyLayoutMode,
 } 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()
@@ -17,7 +18,7 @@ const DeprecatedAppFrame = ({ children }) => {
   const { zIndex, showFaq, layoutMode } = useConfig()
   const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
-  const userResponded = useUserHasResponded()
+  const userHasResponded = useUserHasResponded()
   const { locale } = useI18n()
 
   const containerElementRef = useCallback(
@@ -45,7 +46,7 @@ const DeprecatedAppFrame = ({ children }) => {
     classNames.push('app--collapsed')
   }
 
-  if (userResponded) {
+  if (userHasResponded) {
     classNames.push('app--user-responded')
   }
 

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

@@ -1,6 +1,6 @@
 import { useRef } from 'preact/hooks'
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import { useSeamlyStateContext } from 'ui/hooks/seamly-hooks'
 import Icon from './icon'
 

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

@@ -6,7 +6,6 @@ import {
   useGeneratedId,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
-import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
 
 const Interrupt = ({
   originalError,
@@ -20,7 +19,7 @@ const Interrupt = ({
   const headingId = useGeneratedId()
   const { sendPolite } = useLiveRegion()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
-  const isExpiredError = originalError instanceof SeamlySessionExpiredError
+  const isExpiredError = originalError.name === 'SeamlySessionExpiredError'
 
   useEffect(() => {
     if (isExpiredError) {
@@ -43,28 +42,28 @@ const Interrupt = ({
     focusSkiplinkTarget()
   }
 
-  return (
-    !isExpiredError && (
-      <section className={className('interrupt')} aria-labelledby={headingId}>
-        <div className={className('interrupt__body')}>
-          <h2 id={headingId} className={className('interrupt__title')}>
-            {title}
-          </h2>
-          <p className={className('interrupt__message')}>{message}</p>
-          {buttonText && action && (
-            <div className={className('interrupt__actions')}>
-              <button
-                type="button"
-                className={className('button', 'button--primary')}
-                onClick={onClickHandler}
-              >
-                {buttonText}
-              </button>
-            </div>
-          )}
-        </div>
-      </section>
-    )
+  return !isExpiredError ? (
+    <section className={className('interrupt')} aria-labelledby={headingId}>
+      <div className={className('interrupt__body')}>
+        <h2 id={headingId} className={className('interrupt__title')}>
+          {title}
+        </h2>
+        <p className={className('interrupt__message')}>{message}</p>
+        {buttonText && action && (
+          <div className={className('interrupt__actions')}>
+            <button
+              type="button"
+              className={className('button', 'button--primary')}
+              onClick={onClickHandler}
+            >
+              {buttonText}
+            </button>
+          </div>
+        )}
+      </div>
+    </section>
+  ) : (
+    <></>
   )
 }
 

package/src/javascripts/ui/components/layout/pre-chat-messages.js

@@ -1,15 +1,20 @@
-import { className } from '../../../lib/css'
-import { useInterrupt } from '../../../domains/interrupt'
-import { useConfig } from '../../../domains/config'
-import useEventComponentMapping from '../../hooks/use-event-component-mapping'
-import { useVisibility } from '../../../domains/visibility'
+import { useConfig } from 'domains/config/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
+import useEventComponentMapping from 'ui/hooks/use-event-component-mapping'
+
+export function PreChatMessageEvent({ event }) {
+  const [Component] = useEventComponentMapping(event)
+  return <Component event={event} />
+}
 
 export default function PreChatMessages() {
   const { preChatEvents, layoutMode } = useConfig()
   const { hasInterrupt } = useInterrupt()
   const { isOpen } = useVisibility()
 
-  const isVisible = !(hasInterrupt || !preChatEvents.length || isOpen)
+  const isVisible = !(hasInterrupt || !preChatEvents?.length || isOpen)
 
   return (
     isVisible && (
@@ -32,8 +37,3 @@ export default function PreChatMessages() {
     )
   )
 }
-
-export function PreChatMessageEvent({ event }) {
-  const [Component] = useEventComponentMapping(event)
-  return <Component event={event} />
-}

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 { useI18n } from 'domains/i18n/hooks'
+import { useConfig } from 'domains/config/hooks'
 
 const PrivacyDisclaimer = () => {
   const { t } = useI18n()

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

@@ -2,12 +2,13 @@ import { createRef } from 'preact'
 import { useState, useRef, useEffect, useMemo } from 'preact/hooks'
 import { className } from 'lib/css'
 import { useSeamlyOptions, useOptionButton } from 'ui/hooks/seamly-hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
 import { getKey, keyNames, focusElement } from 'ui/utils/general-utils'
+import { timeout } from 'ui/hooks/focus-helper-hooks'
 import Options from './options'
 
 const OptionsButton = () => {
@@ -41,15 +42,14 @@ const OptionsButton = () => {
 
   useEffect(() => {
     if (menuIsOpen && !prevMenuIsOpen.current) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          const firstActiveOptionIndex = menuOptions.findIndex(
-            (option) => option.available,
-          )
-          const focusIndex =
-            firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex
-          focusElement(menuItemButtons.current[focusIndex])
-        })
+      requestAnimationFrame(async () => {
+        await timeout(180) // Wait for next 3 frame ticks
+        const firstActiveOptionIndex = menuOptions.findIndex(
+          (option) => option.available,
+        )
+        const focusIndex =
+          firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex
+        focusElement(menuItemButtons.current[focusIndex])
       })
     }
     prevMenuIsOpen.current = menuIsOpen
@@ -159,7 +159,9 @@ const OptionsButton = () => {
     <div
       className={className('options__container')}
       onKeyDown={onMainKeyDownHandler}
+      // eslint-disable-next-line react/no-unknown-property
       onfocusout={onFocusOutHandler}
+      // eslint-disable-next-line react/no-unknown-property
       onfocusin={onFocusInHandler}
     >
       <InOutTransition

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

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import OptionsFrame from 'ui/components/options/options-frame'
 import { className } from 'lib/css'
 import {
@@ -9,7 +9,7 @@ import {
   useSeamlyOptions,
 } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
-import { FormProvider } from 'domains/forms'
+import FormProvider from 'domains/forms/provider'
 import { getValidator } from 'ui/utils/form-utils'
 import { isEmailString, isNotEmptyString } from 'ui/utils/validations'
 import TranscriptForm from './transcript-form'

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

@@ -1,5 +1,5 @@
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import Form from 'ui/components/form-controls/form'
 import Input from 'ui/components/form-controls/input'
 

package/src/javascripts/ui/components/suggestions/index.js

@@ -1,28 +1,31 @@
-import { useEffect, useRef, useCallback, useMemo } from 'preact/hooks'
-import { className } from '../../../lib/css'
-import { useI18n } from '../../../domains/i18n'
-import { useSeamlyServiceData } from '../../hooks/seamly-state-hooks'
-import { useTranslatedEventData } from '../../../domains/translations'
-import { useInterrupt } from '../../../domains/interrupt'
-import { useGeneratedId } from '../../hooks/utility-hooks'
-import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-countdown'
-import useSeamlyResumeConversationPrompt from '../../hooks/use-seamly-resume-conversation-prompt'
-import useSeamlyCommands from '../../hooks/use-seamly-commands'
-import { useSkiplinkTargetFocusing } from '../../hooks/focus-helper-hooks'
-import { actionTypes } from '../../utils/seamly-utils'
-import { useUserHasResponded } from '../../../domains/app'
-import { useVisibility, visibilityStates } from '../../../domains/visibility'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useTranslatedEventData } from 'domains/translations/hooks'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
+import SuggestionsList from 'ui/components/suggestions/suggestions-list'
 import InOutTransition, {
   transitionStartStates,
-} from '../widgets/in-out-transition'
-import { useLiveRegion } from '../../hooks/live-region-hooks'
-import { runIfElementContainsOrHasFocus } from '../../utils/general-utils'
-import SuggestionsList from './suggestions-list'
-import { useConfig } from '../../../domains/config'
+} from 'ui/components/widgets/in-out-transition'
+import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
+import { useLiveRegion } from 'ui/hooks/live-region-hooks'
+import {
+  useSeamlyLayoutMode,
+  useSeamlyServiceData,
+} from 'ui/hooks/seamly-state-hooks'
+import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
+import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
+import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
+import { useGeneratedId } from 'ui/hooks/utility-hooks'
+import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
+import { actionTypes } from 'ui/utils/seamly-utils'
 
-const Suggestions = ({ isAside }) => {
+const Suggestions = ({ isAside = false }) => {
   // generic hooks
-  const { layoutMode } = useConfig()
+  const { isInline } = useSeamlyLayoutMode()
   const { t } = useI18n()
   const { sendAction, addMessageBubble } = useSeamlyCommands()
   const { isOpen, setVisibility } = useVisibility()
@@ -36,7 +39,7 @@ const Suggestions = ({ isAside }) => {
   const { hasCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
   const { hasPrompt, continueChat } = useSeamlyResumeConversationPrompt()
   // data hooks
-  const hasResponded = useUserHasResponded()
+  const userHasResponded = useUserHasResponded()
   const payload = useSeamlyServiceData('suggestion')
   const [eventBody] = useTranslatedEventData({ payload })
   const suggestions = useMemo(
@@ -49,10 +52,9 @@ const Suggestions = ({ isAside }) => {
 
   const previousRenderedSuggestions = useRef([])
   const hasSuggestions = !!suggestions.length
-  const hideSuggestions =
-    layoutMode === 'inline'
-      ? (hasResponded || isOpen) && !isAside
-      : hasResponded
+  const hideSuggestions = isInline
+    ? (userHasResponded || isOpen) && !isAside
+    : userHasResponded
   const prevHideSuggestions = useRef(hideSuggestions)
   const showSuggestionsContainer = hasSuggestions && !hideSuggestions
   const renderedSuggestions = hasSuggestions
@@ -60,6 +62,16 @@ const Suggestions = ({ isAside }) => {
     : previousRenderedSuggestions.current
   previousRenderedSuggestions.current = renderedSuggestions
 
+  const suggestionsClassNames = useMemo(() => {
+    const classNames = ['suggestions']
+
+    if (isAside) {
+      classNames.push('suggestions--aside')
+    }
+
+    return className(classNames)
+  }, [isAside])
+
   // click handler
   const handleClick = useCallback(
     ({ id, question }) => {
@@ -147,7 +159,7 @@ const Suggestions = ({ isAside }) => {
       transitionStartState={transitionStartStates.notRendered}
     >
       <ContainerElement
-        className={className('suggestions')}
+        className={suggestionsClassNames}
         aria-labelledby={headingText ? sectionId : null}
         ref={containerRef}
       >

package/src/javascripts/ui/components/view/deprecated-view.js

@@ -1,4 +1,4 @@
-import { useVisibility, useShowInlineView } from 'domains/visibility'
+import { useVisibility, useShowInlineView } from 'domains/visibility/hooks'
 import DeprecatedAppFrame from '../layout/deprecated-app-frame'
 import ChatFrame from '../layout/chat-frame'
 import AgentInfo from '../layout/agent-info'
@@ -9,27 +9,30 @@ import Interrupt from '../layout/interrupt'
 import { useSeamlyChat } from '../../hooks/seamly-hooks'
 import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 
+const ShowInlineView = ({ children }) => {
+  const { showInlineView, containerRef } = useShowInlineView()
+
+  return <div ref={containerRef}>{showInlineView && children}</div>
+}
+
 const DeprecatedView = () => {
   const { isVisible } = useVisibility()
   const { openChat, closeChat } = useSeamlyChat()
-  const { showInlineView, containerRef } = useShowInlineView()
 
   return (
     isVisible && (
-      <div ref={containerRef}>
-        {showInlineView && (
-          <DeprecatedAppFrame>
-            <DeprecatedToggleButton onOpenChat={openChat} />
-            <Header onCloseChat={closeChat}>
-              <AgentInfo />
-            </Header>
-            <ChatFrame interruptComponent={Interrupt}>
-              <Conversation />
-              <EntryContainer />
-            </ChatFrame>
-          </DeprecatedAppFrame>
-        )}
-      </div>
+      <ShowInlineView>
+        <DeprecatedAppFrame>
+          <DeprecatedToggleButton onOpenChat={openChat} />
+          <Header onCloseChat={closeChat}>
+            <AgentInfo />
+          </Header>
+          <ChatFrame interruptComponent={Interrupt}>
+            <Conversation />
+            <EntryContainer />
+          </ChatFrame>
+        </DeprecatedAppFrame>
+      </ShowInlineView>
     )
   )
 }

package/src/javascripts/ui/components/view/index.js

@@ -1,14 +1,14 @@
+import { useUserHasResponded } from 'domains/app/hooks'
 import { useCallback, useMemo } from 'preact/hooks'
-import { useConfig } from '../../../domains/config'
-import AppView from './app-view'
-import InlineView from './inline-view'
-import WindowView from './window-view'
-import { useVisibility } from '../../../domains/visibility'
-import { className } from '../../../lib/css'
-import { useSeamlyAppContainerClassNames } from '../../hooks/component-helper-hooks'
-import { useUserHasResponded } from '../../../domains/app'
-import { useI18n } from '../../../domains/i18n'
-import { useSeamlyContainerElement } from '../../hooks/focus-helper-hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { useSeamlyContainerElement } from 'ui/hooks/focus-helper-hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import AppView from 'ui/components/view/app-view'
+import InlineView from 'ui/components/view/inline-view'
+import WindowView from 'ui/components/view/window-view'
+import { className } from 'lib/css'
 
 const ViewComponentsMap = {
   app: AppView,
@@ -21,7 +21,7 @@ const View = ({ children }) => {
   const { namespace, layoutMode, zIndex } = useConfig()
   const { isOpen, isVisible } = useVisibility()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
-  const userResponded = useUserHasResponded()
+  const userHasResponded = useUserHasResponded()
   const { locale } = useI18n()
   const ViewComponent = ViewComponentsMap[layoutMode]
 
@@ -60,7 +60,7 @@ const View = ({ children }) => {
     classNames.push('app--collapsed')
   }
 
-  if (userResponded) {
+  if (userHasResponded) {
     classNames.push('app--user-responded')
   }
 

package/src/javascripts/ui/components/view/inline-view.js

@@ -1,6 +1,6 @@
 import { className } from 'lib/css'
-import { useVisibility, useShowInlineView } from 'domains/visibility'
-import { useInterrupt } from 'domains/interrupt'
+import { useVisibility, useShowInlineView } from 'domains/visibility/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
 import Chat from '../layout/chat'
 import Interrupt from '../layout/interrupt'
 import Conversation from '../conversation/conversation'