@seamly/web-ui 20.8.1 → 21.0.1-beta.1

package/src/javascripts/ui/components/translation-proposal/index.tsx

@@ -0,0 +1,36 @@
+import ChatStatus from 'ui/components/chat-status'
+import ChatStatusAction from 'ui/components/chat-status/chat-status-action'
+import {
+  useTranslationProposal,
+  useTranslationsContainer,
+} from 'domains/translations/hooks'
+
+export default function TranslationProposal() {
+  const {
+    showProposal,
+    translationProposal,
+    dismissTranslationProposal,
+    activateTranslationProposal,
+  } = useTranslationProposal()
+
+  const { id } = useTranslationsContainer()
+
+  if (!showProposal) {
+    return null
+  }
+
+  return (
+    <ChatStatus
+      handleClose={dismissTranslationProposal}
+      srCloseButtonText={translationProposal.srDismissButtonText}
+      id={id}
+      title={translationProposal.titleLabel}
+    >
+      <ChatStatusAction
+        handleClick={activateTranslationProposal}
+        icon="newTranslation"
+        title={translationProposal.buttonLabel}
+      />
+    </ChatStatus>
+  )
+}

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

@@ -1,18 +1,13 @@
-import Chat from '../layout/chat'
-import Interrupt from '../layout/interrupt'
 import Conversation from '../conversation/conversation'
-import EntryContainer from '../entry/entry-container'
+import Chat from '../layout/chat'
 import ChatFrame from '../layout/chat-frame'
-import useSeamlyChat from '../../hooks/use-seamly-chat'
+import Interrupt from '../layout/interrupt'
 
 const AppView = () => {
-  useSeamlyChat()
-
   return (
     <Chat>
       <ChatFrame interruptComponent={Interrupt}>
         <Conversation />
-        <EntryContainer />
       </ChatFrame>
     </Chat>
   )

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

@@ -1,13 +1,12 @@
-import { useVisibility, useShowInlineView } from 'domains/visibility/hooks'
-import DeprecatedAppFrame from '../layout/deprecated-app-frame'
-import ChatFrame from '../layout/chat-frame'
+import ChatFrame from 'ui/components/layout/deprecated-chat-frame'
+import { useShowInlineView, useVisibility } from 'domains/visibility/hooks'
+import { useSeamlyChat } from '../../hooks/seamly-hooks'
+import Conversation from '../conversation/conversation'
+import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 import AgentInfo from '../layout/agent-info'
+import DeprecatedAppFrame from '../layout/deprecated-app-frame'
 import Header from '../layout/header'
-import Conversation from '../conversation/conversation'
-import EntryContainer from '../entry/entry-container'
 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()
@@ -16,8 +15,8 @@ const ShowInlineView = ({ children }) => {
 }
 
 const DeprecatedView = () => {
-  const { isVisible } = useVisibility()
-  const { openChat, closeChat } = useSeamlyChat()
+  useSeamlyChat()
+  const { isVisible, openChat, closeChat } = useVisibility()
 
   return (
     isVisible && (
@@ -29,7 +28,6 @@ const DeprecatedView = () => {
           </Header>
           <ChatFrame interruptComponent={Interrupt}>
             <Conversation />
-            <EntryContainer />
           </ChatFrame>
         </DeprecatedAppFrame>
       </ShowInlineView>

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

@@ -1,13 +1,13 @@
-import { useUserHasResponded } from 'domains/app/hooks'
 import { useCallback, useMemo } from 'preact/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 { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
+import { useSeamlyContainerElement } from 'ui/hooks/focus-helper-hooks'
+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 { className } from 'lib/css'
 
 const ViewComponentsMap = {

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

@@ -1,12 +1,10 @@
-import { className } from 'lib/css'
-import { useVisibility, useShowInlineView } from 'domains/visibility/hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
-import Chat from '../layout/chat'
-import Interrupt from '../layout/interrupt'
+import { useShowInlineView, useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 import Conversation from '../conversation/conversation'
-import EntryContainer from '../entry/entry-container'
+import Chat from '../layout/chat'
 import ChatFrame from '../layout/chat-frame'
-import useSeamlyChat from '../../hooks/use-seamly-chat'
+import Interrupt from '../layout/interrupt'
 import PreChatMessages from '../layout/pre-chat-messages'
 import Suggestions from '../suggestions'
 import InOutTransition, {
@@ -14,7 +12,6 @@ import InOutTransition, {
 } from '../widgets/in-out-transition'
 
 const InlineView = () => {
-  useSeamlyChat()
   const { showInlineView, containerRef } = useShowInlineView()
 
   const { isOpen } = useVisibility()
@@ -49,7 +46,6 @@ const InlineView = () => {
           {showInlineView && (
             <ChatFrame interruptComponent={Interrupt}>
               {isOpen && <Conversation />}
-              <EntryContainer />
             </ChatFrame>
           )}
         </Chat>

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

@@ -1,7 +1,7 @@
+import { useCallback } from 'preact/hooks'
+import Icon from 'ui/components/layout/icon'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
-import Icon from 'ui/components/layout/icon'
-import { useCallback } from 'preact/hooks'
 
 const CollapseButton = ({ onClick }) => {
   const { t } = useI18n()

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

@@ -1,25 +1,21 @@
-import { useUserHasResponded } from 'domains/app/hooks'
 import { useMemo } from 'preact/hooks'
+import Conversation from 'ui/components/conversation/conversation'
+import Text from 'ui/components/conversation/event/text'
+import Chat from 'ui/components/layout/chat'
+import ChatFrame from 'ui/components/layout/chat-frame'
+import Interrupt from 'ui/components/layout/interrupt'
+import PreChatMessages from 'ui/components/layout/pre-chat-messages'
+import InOutTransition, {
+  transitionStartStates,
+} from 'ui/components/widgets/in-out-transition'
+import { useUserHasResponded } from 'domains/app/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
-import { useSeamlyChat } from '../../../hooks/seamly-hooks'
-import Conversation from '../../conversation/conversation'
-import Text from '../../conversation/event/text'
-import EntryContainer from '../../entry/entry-container'
-import Chat from '../../layout/chat'
-import ChatFrame from '../../layout/chat-frame'
-import Interrupt from '../../layout/interrupt'
-import PreChatMessages from '../../layout/pre-chat-messages'
-import InOutTransition, {
-  transitionStartStates,
-} from '../../widgets/in-out-transition'
-import CollapseButton from './collapse-button'
 import WindowOpenButton from './window-open-button'
 
 const WindowView = () => {
-  const { openChat, closeChat } = useSeamlyChat()
-  const { isOpen } = useVisibility()
+  const { isOpen, openChat } = useVisibility()
   const userHasResponded = useUserHasResponded()
   const { t } = useI18n()
   const continueChatText = t('window.chat.continue')
@@ -68,10 +64,8 @@ const WindowView = () => {
         transitionStartState={transitionStartStates.notRendered}
       >
         <Chat>
-          {isOpen && <CollapseButton onClick={closeChat} />}
           <ChatFrame interruptComponent={Interrupt}>
             <Conversation />
-            <EntryContainer />
           </ChatFrame>
         </Chat>
       </InOutTransition>

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

@@ -1,10 +1,5 @@
-import { useStartChatIcon } from 'domains/config/hooks'
-import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
-import { useVisibility } from 'domains/visibility/hooks'
-import { className } from 'lib/css'
-import Icon from 'ui/components/layout/icon'
 import { useCallback } from 'preact/hooks'
+import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
@@ -14,6 +9,11 @@ import {
   useSeamlyCurrentAgent,
   useSeamlyUnreadCount,
 } from 'ui/hooks/seamly-state-hooks'
+import { useStartChatIcon } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 
 const ButtonIcon = () => {
   const startChatIcon = useStartChatIcon()

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

@@ -1,9 +1,9 @@
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
-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 useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 import Prompt from './prompt'
 
 const IdleDetachWarning = () => {

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

@@ -1,5 +1,5 @@
+import { useGeneratedId, useSkiplink } from 'ui/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,8 +1,8 @@
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
-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 useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
+import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 import Prompt from './prompt'
 
 const ResumeConversationPrompt = () => {

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 { cloneElement, toChildArray } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+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'),
@@ -21,13 +21,13 @@ export const transitionStartStates = {
 const InOutTransition = ({
   children,
   isActive,
-  timeout,
+  timeout = defaultTransitionTimeMs,
   transitionStartState = transitionStartStates.notRendered,
-  onInTransitionComplete,
-  onOutTransitionComplete,
+  onInTransitionComplete = () => {},
+  onOutTransitionComplete = () => {},
 }) => {
   const prevIsActive = useRef(false)
-  const timeoutVal = timeout ? parseInt(timeout, 10) : defaultTransitionTimeMs
+  const timeoutVal = parseInt(timeout, 10)
 
   const onInTransitionCompleteHandler = useStableCallback(
     onInTransitionComplete,
@@ -98,17 +98,19 @@ const InOutTransition = ({
   ])
 
   return (
-    renderChildren &&
-    toChildArray(children).map((child) => {
-      const { className: childClassName = '' } = child.props
-      const cleanClasses = childClassName
-        .split(' ')
-        .filter((cl) => !transitionClassesArray.includes(cl))
-
-      return cloneElement(child, {
-        className: [...cleanClasses, ...activeTransitionClasses].join(' '),
-      })
-    })
+    <>
+      {renderChildren &&
+        toChildArray(children).map((child) => {
+          const { className: childClassName = '' } = child.props
+          const cleanClasses = childClassName
+            .split(' ')
+            .filter((cl) => !transitionClassesArray.includes(cl))
+
+          return cloneElement(child, {
+            className: [...cleanClasses, ...activeTransitionClasses].join(' '),
+          })
+        })}
+    </>
   )
 }
 

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-import { clearAllUploads } from 'domains/store/slice'
 import { useCallback, useContext } from 'preact/hooks'
 import { useDispatch } from 'react-redux'
 import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
+import { clearAllUploads } from 'domains/store/slice'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 
 const useSeamlyFileUploadContext = () => useContext(SeamlyFileUploadContext)

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

@@ -1,10 +1,10 @@
-import { setSeamlyContainerElement } from 'domains/store/slice'
 import { useCallback, useRef } from 'preact/hooks'
 import { useDispatch } from 'react-redux'
 import {
   focusElement,
   runIfElementContainsOrHasFocus,
 } from 'ui/utils/general-utils'
+import { setSeamlyContainerElement } from 'domains/store/slice'
 import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
 
 export const timeout = (ms = 0) =>

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

@@ -1,14 +1,14 @@
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 import { typingTimeout } from 'config'
+import { useSeamlyCommands, useSeamlyOptions } from 'ui/hooks/seamly-hooks'
+import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
 import {
-  setBlockAutoEntrySwitch,
   setActiveEntryType,
+  setBlockAutoEntrySwitch,
   setUserEntryType,
 } from 'domains/store/slice'
-import { useSeamlyCommands, useSeamlyOptions } from 'ui/hooks/seamly-hooks'
-import { useRef, useEffect, useCallback } from 'preact/hooks'
-import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
-import { useDispatch } from 'react-redux'
-import { actionTypes } from 'ui/utils/seamly-utils'
 
 export const useSeamlyTyping = () => {
   const { sendAction } = useSeamlyCommands()

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

@@ -1,6 +1,7 @@
 import { useEffect } from 'preact/hooks'
 // Import extracted hooks here for use inside this file
 import { useSeamlyApiContext } from './seamly-api-hooks'
+
 // Export extracted hooks here,
 // although this is a redundant, it prevents a bazillion code changes for now.
 // TODO: Remove exports and import them from the correct files
@@ -56,16 +57,16 @@ export const useSeamlyEventStream = (nextFn, filterFn) => {
   const api = useSeamlyApiContext()
 
   useEffect(() => {
-    if (api.stream) {
-      if (filterFn) {
-        api.stream().filter(filterFn).subscribe({
-          next: nextFn,
-        })
-      } else {
-        api.stream().subscribe({
-          next: nextFn,
-        })
+    if (api.connectionInfo && api.conversation?.channel) {
+      const { channel } = api.conversation
+
+      channel.onMessage = (type, payload) => {
+        if (!filterFn || filterFn({ type, payload })) {
+          nextFn({ type, payload })
+        }
+
+        return payload
       }
     }
-  }, [api, nextFn, filterFn])
+  }, [nextFn, filterFn, api.connectionInfo, api.conversation])
 }

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

@@ -1,15 +1,15 @@
+import { useCallback } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import { useElementFocusingById } from 'ui/hooks/focus-helper-hooks'
+import { useSeamlyObjectStore } from 'ui/hooks/seamly-api-hooks'
+import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import {
   hideOption as dispatchHideOption,
+  showOption as dispatchShowOption,
   setUserSelectedOption as dispatchUserSelectedOption,
   setUserSelectedOptions as dispatchUserSelectedOptions,
-  showOption as dispatchShowOption,
 } from 'domains/store/slice'
-import { useCallback } from 'preact/hooks'
-import { useDispatch } from 'react-redux'
-import { useElementFocusingById } from 'ui/hooks/focus-helper-hooks'
-import { useSeamlyObjectStore } from 'ui/hooks/seamly-api-hooks'
-import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
 
 export const useSeamlyOptions = () => {
   const { t } = useI18n()

package/src/javascripts/ui/hooks/{seamly-state-hooks.js → seamly-state-hooks.ts}

@@ -1,11 +1,13 @@
-import * as ConfigSelectors from 'domains/config/selectors'
-import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 import { createSelector } from '@reduxjs/toolkit'
+import { useSelector } from 'react-redux'
+import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 import { selectUserHasResponded } from 'domains/app/selectors'
 import { useConfig } from 'domains/config/hooks'
-import { useSelector } from 'react-redux'
+import * as ConfigSelectors from 'domains/config/selectors'
+import type { RootState } from 'domains/store'
+import type { ChannelEvent, ServiceDataEvent } from 'domains/store/store.types'
 
-export const selectState = ({ state }) => state
+export const selectState = ({ state }: RootState) => state
 export const useSeamlyStateContext = () => useSelector(selectState)
 
 export const selectEventsWithSuggestion = createSelector(
@@ -22,7 +24,7 @@ export const selectEventsWithSuggestion = createSelector(
       return events
     }
 
-    const suggestionsEvent = {
+    const suggestionsEvent: ServiceDataEvent = {
       type: 'service_data',
       payload: serviceData.suggestion,
     }
@@ -34,7 +36,7 @@ export const selectEventsWithSuggestion = createSelector(
 export const selectEvents = createSelector(
   selectEventsWithSuggestion,
   ConfigSelectors.selectConfig,
-  (events, config) => {
+  (events, config): ChannelEvent[] => {
     const { enabled, threshold } = config?.messages?.timeIndicator ?? {}
     if (!enabled) {
       return events
@@ -128,6 +130,7 @@ export const useSeamlyLayoutMode = () => {
   return {
     isInline: layoutMode === 'inline',
     isWindow: layoutMode === 'window',
+    isApp: layoutMode === 'app',
     isResolving: !layoutMode,
   }
 }

package/src/javascripts/ui/hooks/use-click-outside.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'preact/hooks'
+
+const useClickOutside = (callback: Function) => {
+  const ref = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const handler = ({ target }: TouchEvent | MouseEvent): void => {
+      if (
+        ref.current &&
+        target instanceof HTMLElement &&
+        !ref.current.contains(target)
+      ) {
+        callback()
+      }
+    }
+
+    document.addEventListener('click', handler, true)
+    document.addEventListener('touchstart', handler, true)
+
+    return () => {
+      document.removeEventListener('click', handler, true)
+      document.removeEventListener('touchstart', handler, true)
+    }
+  }, [callback, ref])
+
+  return ref
+}
+
+export default useClickOutside

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

@@ -4,22 +4,23 @@ import { payloadTypes } from 'ui/utils/seamly-utils'
 
 const useEventComponentMapping = (event) => {
   const components = useContext(ComponentContext)
-
+  const componentType = components[event.type]
+  let Component = componentType[event.payload.type]
   let SubComponent = null
 
   if (event.payload.type === payloadTypes.choicePrompt) {
-    SubComponent = components[event.type][event.payload.body.prompt.type]
+    SubComponent = componentType[event.payload.body.prompt.type]
+  }
+
+  if (event.type === 'participant') {
+    Component = componentType[event.type]
   }
 
-  const Component =
-    components[event.type][event.payload.type] || components.fallback
+  if (Component && typeof Component !== 'function') {
+    Component = Component[event.payload.body.type]
+  }
 
-  return [
-    Component && typeof Component !== 'function'
-      ? Component[event.payload.body.type] || components.fallback
-      : Component,
-    SubComponent,
-  ]
+  return [Component || components.fallback, SubComponent]
 }
 
 export default useEventComponentMapping

package/src/javascripts/ui/hooks/use-interval.js

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'preact/hooks'
+import { useEffect, useRef } from 'preact/hooks'
 
 const useInterval = (callback, delay) => {
   const savedCallback = useRef(callback)