@seamly/web-ui 21.0.8 → 22.0.0-beta.1

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

@@ -1,10 +1,8 @@
-import { useInterrupt } from 'domains/interrupt/hooks'
 import { useShowInlineView, useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 import Conversation from '../conversation/conversation'
 import Chat from '../layout/chat'
 import ChatFrame from '../layout/chat-frame'
-import Interrupt from '../layout/interrupt'
 import PreChatMessages from '../layout/pre-chat-messages'
 import Suggestions from '../suggestions'
 import InOutTransition, {
@@ -15,12 +13,6 @@ const InlineView = () => {
   const { showInlineView, containerRef } = useShowInlineView()
 
   const { isOpen } = useVisibility()
-  const { hasInterrupt, meta } = useInterrupt()
-
-  if (hasInterrupt && !isOpen) {
-    return <Interrupt {...meta} />
-  }
-
   return (
     <>
       <InOutTransition
@@ -44,9 +36,7 @@ const InlineView = () => {
       >
         <Chat ref={containerRef}>
           {showInlineView && (
-            <ChatFrame interruptComponent={Interrupt}>
-              {isOpen && <Conversation />}
-            </ChatFrame>
+            <ChatFrame>{isOpen && <Conversation />}</ChatFrame>
           )}
         </Chat>
       </InOutTransition>

package/src/javascripts/ui/components/view/window-view/{index.js → index.tsx}

@@ -3,23 +3,27 @@ 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 { useConfig } 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 WindowOpenButton from './window-open-button'
 
+const getDelay = <T extends string>(
+  prop: Record<T, number> | boolean,
+  val: T,
+  init?: number,
+) => (typeof prop === 'object' ? prop[val] : init)
+
 const WindowView = () => {
   const { isOpen, openChat } = useVisibility()
   const userHasResponded = useUserHasResponded()
-  const { hasInterrupt, meta } = useInterrupt()
-
+  const { continueChat, preChat } = useConfig()
   const { t } = useI18n()
   const continueChatText = t('window.chat.continue')
   const continueChatEvent = useMemo(
@@ -33,15 +37,13 @@ const WindowView = () => {
     [continueChatText],
   )
 
-  if (hasInterrupt && !isOpen) {
-    return <Interrupt {...meta} />
-  }
-
   return (
     <>
       <WindowOpenButton onClick={openChat} />
       <InOutTransition
-        isActive={!isOpen && !userHasResponded}
+        isActive={preChat && !isOpen && !userHasResponded}
+        exitAfter={getDelay(preChat, 'exitAfter')}
+        enterDelay={getDelay(preChat, 'enterDelay')}
         transitionStartState={transitionStartStates.rendered}
       >
         <div
@@ -54,7 +56,9 @@ const WindowView = () => {
         </div>
       </InOutTransition>
       <InOutTransition
-        isActive={!isOpen && userHasResponded}
+        isActive={continueChat && !isOpen && userHasResponded}
+        exitAfter={getDelay(continueChat, 'exitAfter')}
+        enterDelay={getDelay(continueChat, 'enterDelay')}
         transitionStartState={transitionStartStates.notRendered}
       >
         <div
@@ -72,7 +76,7 @@ const WindowView = () => {
         transitionStartState={transitionStartStates.notRendered}
       >
         <Chat>
-          <ChatFrame interruptComponent={Interrupt}>
+          <ChatFrame>
             <Conversation />
           </ChatFrame>
         </Chat>

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

@@ -1,4 +1,5 @@
 import { useCallback } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
@@ -11,15 +12,15 @@ import {
 } 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 { selectHasError } from 'domains/interrupt/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 
 const ButtonIcon = () => {
   const startChatIcon = useStartChatIcon()
   const currentAgent = useSeamlyCurrentAgent()
-  const { hasInterrupt } = useInterrupt()
-  const isActiveConversation = currentAgent && !hasInterrupt
+  const hasError = useSelector(selectHasError)
+  const isActiveConversation = currentAgent && !hasError
   const src = isActiveConversation ? currentAgent.avatar : startChatIcon
   return src ? (
     <img

package/src/javascripts/ui/components/widgets/{in-out-transition.js → in-out-transition.tsx}

@@ -1,9 +1,19 @@
-import { cloneElement, toChildArray } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { VNode, cloneElement, toChildArray } from 'preact'
+import { FC } from 'preact/compat'
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { defaultTransitionTimeMs } from 'config'
 import { useStableCallback } from 'ui/hooks/seamly-hooks'
+import useTimeout from 'ui/hooks/use-timeout'
 import { className } from 'lib/css'
 
+type VDOMChild = string | number | VNode
+type ValueOf<T> = T[keyof T]
+function childIsVNode(
+  child: VDOMChild,
+): child is VNode<{ className?: string }> {
+  return typeof child === 'object'
+}
+
 const transitionClasses = {
   visible: className('transition--visible'),
   in: className('transition--in'),
@@ -16,33 +26,57 @@ export const transitionStartStates = {
   notRendered: 'notRendered',
   rendered: 'rendered',
   visuallyHidden: 'visuallyHidden',
+} as const
+
+type InOutTransitionProps = {
+  isActive: boolean
+  timeout?: number
+  transitionStartState?: keyof typeof transitionStartStates
+  onInTransitionComplete?: Function
+  onOutTransitionComplete?: Function
+  exitAfter?: number
+  enterDelay?: number
 }
 
-const InOutTransition = ({
+const InOutTransition: FC<InOutTransitionProps> = ({
   children,
   isActive,
   timeout = defaultTransitionTimeMs,
   transitionStartState = transitionStartStates.notRendered,
   onInTransitionComplete = () => {},
   onOutTransitionComplete = () => {},
+  exitAfter,
+  enterDelay = 0,
 }) => {
   const prevIsActive = useRef(false)
-  const timeoutVal = parseInt(timeout, 10)
+
+  const isVisuallyHidden =
+    transitionStartState === transitionStartStates.visuallyHidden
+
+  const [activeTransitionClasses, setActiveTransitionClasses] = useState<
+    ValueOf<typeof transitionClasses>[]
+  >(() => (isVisuallyHidden ? [transitionClasses.visuallyHidden] : []))
+
+  const [inState, setInState] = useState(() => enterDelay === 0)
+
+  const transitionOutAfter = useMemo(
+    () => (exitAfter ? exitAfter + enterDelay : exitAfter),
+    [enterDelay, exitAfter],
+  )
+
+  useTimeout(() => setInState(false), isActive ? transitionOutAfter : undefined)
+  useTimeout(() => setInState(true), isActive ? enterDelay : undefined)
+
+  const transitionIn = useMemo(() => inState && isActive, [isActive, inState])
 
   const onInTransitionCompleteHandler = useStableCallback(
     onInTransitionComplete,
   )
+
   const onOutTransitionCompleteHandler = useStableCallback(
     onOutTransitionComplete,
   )
 
-  const isVisuallyHidden =
-    transitionStartState === transitionStartStates.visuallyHidden
-
-  const [activeTransitionClasses, setActiveTransitionClasses] = useState(() =>
-    isVisuallyHidden ? [transitionClasses.visuallyHidden] : [],
-  )
-
   const renderChildren =
     transitionStartState !== 'notRendered' || activeTransitionClasses.length > 0
 
@@ -50,21 +84,22 @@ const InOutTransition = ({
     let activeTimeout = null
     let activeRaf = null
 
-    if (prevIsActive.current && !isActive) {
+    if (prevIsActive.current && !transitionIn) {
       setActiveTransitionClasses([transitionClasses.visible])
       activeTimeout = setTimeout(() => {
         setActiveTransitionClasses([
           ...(isVisuallyHidden ? [transitionClasses.visuallyHidden] : []),
         ])
+
         if (onOutTransitionCompleteHandler) {
           activeRaf = requestAnimationFrame(() => {
             onOutTransitionCompleteHandler()
           })
         }
-      }, timeoutVal)
+      }, timeout)
     }
 
-    if (!prevIsActive.current && isActive) {
+    if (!prevIsActive.current && transitionIn) {
       setActiveTransitionClasses([transitionClasses.visible])
       // Doubling up on rAF as a single rAF can be too slow for the
       // animation transition to be resolved.
@@ -77,39 +112,43 @@ const InOutTransition = ({
           if (onInTransitionCompleteHandler) {
             activeTimeout = setTimeout(() => {
               onInTransitionCompleteHandler()
-            }, timeoutVal)
+            }, timeout)
           }
         })
       })
     }
 
-    prevIsActive.current = isActive
+    prevIsActive.current = transitionIn
 
     return () => {
       clearTimeout(activeTimeout)
       cancelAnimationFrame(activeRaf)
     }
   }, [
-    isActive,
     isVisuallyHidden,
-    timeoutVal,
     onInTransitionCompleteHandler,
     onOutTransitionCompleteHandler,
+    timeout,
+    transitionIn,
   ])
 
   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(' '),
-          })
-        })}
+        toChildArray(children)
+          .filter(childIsVNode)
+          .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/hooks/use-click-outside.ts

@@ -4,12 +4,14 @@ const useClickOutside = (callback: Function) => {
   const ref = useRef<HTMLElement>(null)
 
   useEffect(() => {
-    const handler = ({ target }: TouchEvent | MouseEvent): void => {
+    const handler = (el: TouchEvent | MouseEvent): void => {
       if (
         ref.current &&
-        target instanceof HTMLElement &&
-        !ref.current.contains(target)
+        el.target instanceof HTMLElement &&
+        !ref.current.contains(el.target)
       ) {
+        el.preventDefault()
+        el.stopPropagation()
         callback()
       }
     }

package/src/javascripts/ui/hooks/use-notifications.ts

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
+import { useSelector } from 'react-redux'
+import { textEntryControlName } from 'ui/components/entry/text-entry'
+import { useConfig } from 'domains/config/hooks'
+import { selectShowNotifications } from 'domains/store/selectors'
+import { useSeamlyServiceInfo } from './seamly-state-hooks'
+import beep from './sounds/beep.mp3'
+
+const hasNotificationSupport = !!window.Notification
+
+const useNotification = () => {
+  const { proactiveMessages } = useSeamlyServiceInfo()
+
+  const { notificationAudioURL } = useConfig()
+  const [permission, setPermission] = useState(
+    hasNotificationSupport ? Notification.permission : 'default',
+  )
+  const [visibilityState, setVisibilityState] = useState(
+    document.visibilityState,
+  )
+
+  const AudioPlay = useMemo(
+    () => new Audio(notificationAudioURL || beep),
+    [notificationAudioURL],
+  )
+
+  const showNotifications = useSelector(selectShowNotifications)
+
+  const requestPermission = useCallback(async () => {
+    if (Notification && permission !== 'granted') {
+      const notificationPermission = await Notification.requestPermission()
+      setPermission(notificationPermission)
+    }
+  }, [permission])
+
+  useEffect(() => {
+    if (permission === 'default' && proactiveMessages) {
+      requestPermission()
+    }
+  }, [permission, proactiveMessages, requestPermission])
+
+  const sendNotification = useCallback(
+    // eslint-disable-next-line no-undef
+    async (title: string, options?: NotificationOptions) => {
+      if (!showNotifications || !hasNotificationSupport) return
+
+      if (permission === 'default') {
+        requestPermission()
+      }
+
+      if (
+        notificationAudioURL !== false &&
+        (permission === 'denied' || permission === 'default') &&
+        (visibilityState === 'hidden' || !document.hasFocus())
+      ) {
+        try {
+          await AudioPlay.play()
+        } catch (error) {
+          // Autoplay was prevented. See link for more details
+          // https://developer.chrome.com/blog/autoplay/#audiovideo-elements
+          console.warn(error)
+        }
+      }
+
+      if (
+        permission === 'granted' &&
+        (visibilityState === 'hidden' || !document.hasFocus())
+      ) {
+        const notification = new Notification(title, options)
+
+        notification.onclick = function () {
+          window.parent.focus()
+          window.focus()
+          notification.close()
+
+          const entry = document.querySelector<HTMLInputElement>(
+            `input[name=${textEntryControlName}]`,
+          )
+          if (entry) entry.focus()
+        }
+      }
+    },
+    [
+      AudioPlay,
+      notificationAudioURL,
+      permission,
+      requestPermission,
+      showNotifications,
+      visibilityState,
+    ],
+  )
+
+  useEffect(() => {
+    if (!showNotifications) return () => {}
+
+    function handleVisibilityChange() {
+      setVisibilityState(document.visibilityState)
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange, false)
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  }, [showNotifications])
+
+  return {
+    permission,
+    requestPermission,
+    sendNotification,
+  }
+}
+
+export default useNotification

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

@@ -8,6 +8,7 @@ import { selectShowInlineView } from '../../domains/visibility/selectors'
 import { useLiveRegion } from './live-region-hooks'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useEvents, useSeamlyLayoutMode } from './seamly-state-hooks'
+import useSessionExpiredCommand from './use-session-expired-command'
 
 const useSeamlyChat = () => {
   const events = useEvents()
@@ -22,6 +23,9 @@ const useSeamlyChat = () => {
   const connectCalled = useRef(false)
   const { sendAssertive } = useLiveRegion()
 
+  // Automatically reset conversation if the session has expired
+  useSessionExpiredCommand()
+
   useEffect(() => {
     if (isVisible) {
       // Wait for the live containers to stabilise in the DOM before injecting
@@ -97,7 +101,7 @@ const useSeamlyChat = () => {
     if (
       !apiConfigReady ||
       connectCalled.current ||
-      (isWindow && !isOpen && !hasConversation()) ||
+      (isWindow && !isOpen) ||
       (isInline && (!isVisible || !showInlineView))
     ) {
       return

package/src/javascripts/ui/hooks/use-session-expired-command.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'preact/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import useSeamlyCommands from './use-seamly-commands'
+
+export default function useSessionExpiredCommand() {
+  const {
+    meta: { originalError, action },
+  } = useInterrupt()
+  const seamlyCommands = useSeamlyCommands()
+  const isExpiredError = originalError?.name === 'SeamlySessionExpiredError'
+
+  useEffect(() => {
+    if (isExpiredError && seamlyCommands[action]) {
+      seamlyCommands[action]()
+    }
+  }, [action, seamlyCommands, isExpiredError])
+}

package/src/javascripts/ui/hooks/use-timeout.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'preact/hooks'
+
+export default function useTimeout(callback: Function, delay?: number) {
+  const timeoutRef = useRef<number | null>(null)
+  const savedCallback = useRef(callback)
+
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  useEffect(() => {
+    if (typeof delay !== 'number') return () => undefined
+
+    timeoutRef.current = setTimeout(savedCallback.current, delay)
+
+    return () => clearTimeout(timeoutRef.current)
+  }, [delay])
+
+  return timeoutRef
+}

package/src/stylesheets/3-chat/_chat.scss

@@ -53,10 +53,7 @@
 .#{$n}-chat--layout-app {
   position: fixed;
   z-index: $z-index;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   max-width: 100%;
   height: 100%;
@@ -155,5 +152,6 @@
 
 .#{$n}-entry__body {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
+  gap: $spacer * 0.25;
 }

package/src/stylesheets/4-base/_formelements.scss

@@ -3,45 +3,9 @@
 
 // PARTS
 // ----
-.#{$n}-input__checkbox {
-  margin-right: $spacer * 0.5;
-
-  &[aria-disabled='true'] {
-    opacity: 0.5;
-  }
-}
-
 .#{$n}-label {
   display: block;
-  margin-bottom: $spacer * 0.25;
   color: $brand3;
   font-size: $fontsize-medium;
   font-weight: $fontweight-bold;
 }
-
-.#{$n}-input__checkbox[aria-disabled='true'] + .#{$n}-label {
-  opacity: 0.5;
-}
-
-.#{$n}-input__select {
-  appearance: none;
-  width: 100%;
-  min-height: $buttonsize;
-  padding: $spacer * 0.5;
-  border: $thin-border solid $grey-b;
-  border-radius: $borderradius-small;
-  background-color: $white;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
-  background-repeat: no-repeat;
-  background-position: right $spacer * 0.5 top 50%;
-  background-size: $spacer * 0.75 auto;
-  color: $grey-e;
-  font-size: $fontsize-default;
-  resize: none;
-
-  &[aria-disabled='true'] {
-    border: $thin-border solid $grey-c;
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjYTNiNGJmIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
-    color: $grey-c;
-  }
-}

package/src/stylesheets/5-components/_abort-transaction.scss

@@ -0,0 +1,10 @@
+.#{$n}-conversation__item--abort-transaction {
+  padding-top: $spacer * 0.5;
+
+  .#{$n}-abort-transaction__button {
+    padding: $spacer * 0.25 $spacer * 0.5;
+    border: 1px solid currentcolor;
+    border-radius: $borderradius;
+    background-color: $white;
+  }
+}

package/src/stylesheets/5-components/_buttons.scss

@@ -1,5 +1,20 @@
+a,
+input,
+button {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 1px dotted #212121;
+    outline: 1px auto -webkit-focus-ring-color;
+  }
+}
+
 .#{$n}-button {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacer * 0.5;
   margin: 0;
   padding: 0;
   border: 0;
@@ -47,8 +62,8 @@
 
 .#{$n}-button__state {
   display: inline-block;
-  margin: $spacer * -0.15 $spacer * -0.15 $spacer * -0.15 $spacer * 0.15;
-  padding: $spacer * 0.15 $spacer * 0.25;
+  margin: 0;
+  padding: $spacer * 0.1 $spacer * 0.5;
   border-radius: $borderradius-small;
   background-color: $grey-a;
   color: inherit;

package/src/stylesheets/5-components/_character-limit.scss

@@ -1,11 +1,11 @@
 .#{$n}-character-count {
   display: flex;
   position: absolute;
-  top: 0;
   right: 0;
+  bottom: 0;
   align-items: center;
   justify-content: right;
-  height: 100%;
+  height: $buttonsize;
   padding: 0 $spacer * 0.5;
   transform: translateX(100%);
   transition: transform $transition, opacity 0.2s 0.2s ease;