@seamly/web-ui 21.0.9 → 22.0.0

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

@@ -1,12 +1,24 @@
-import { useCallback, useMemo } from 'preact/hooks'
+import { useTranslatedEventData } from 'package/hooks'
+import { useCallback, useEffect, useMemo } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 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 {
+  useSeamlyCurrentAgent,
+  useSeamlyServiceInfo,
+  useSeamlyUnreadCount,
+} from 'ui/hooks/seamly-state-hooks'
+import useNotification from 'ui/hooks/use-notifications'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
+import {
+  selectLastUnreadEvent,
+  selectShowNotifications,
+} from 'domains/store/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 
@@ -16,17 +28,50 @@ const ViewComponentsMap = {
   window: WindowView,
 }
 
+function stripHtml(html) {
+  const tmp = document.createElement('div')
+  tmp.innerHTML = html
+  return tmp.textContent || tmp.innerText || ''
+}
+
 const View = ({ children }) => {
+  const { sendNotification } = useNotification()
+  const unreadMessageCount = useSeamlyUnreadCount()
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
   const { namespace, layoutMode, zIndex } = useConfig()
+  const currentAgent = useSeamlyCurrentAgent()
+  const { proactiveMessages } = useSeamlyServiceInfo()
   const { isOpen, isVisible } = useVisibility()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const userHasResponded = useUserHasResponded()
+  const lastUnreadEvent = useSelector(selectLastUnreadEvent)
+  const { body } = useTranslatedEventData(lastUnreadEvent)
+
+  const showNotifications = useSelector(selectShowNotifications)
   const { locale } = useI18n()
+
+  useEffect(() => {
+    if (unreadMessageCount === 0 || !proactiveMessages || !showNotifications)
+      return
+
+    sendNotification(currentAgent?.name, {
+      // @ts-ignore
+      body: stripHtml(body?.text || body.prompt?.text),
+      icon: currentAgent?.avatar,
+    })
+  }, [
+    sendNotification,
+    unreadMessageCount,
+    body,
+    currentAgent,
+    proactiveMessages,
+    showNotifications,
+  ])
   const ViewComponent = ViewComponentsMap[layoutMode]
 
   const containerElementRef = useCallback(
-    (container) => {
+    (container: HTMLElement) => {
+      if (typeof setSeamlyContainerElement !== 'function') return
       setSeamlyContainerElement(container)
     },
     [setSeamlyContainerElement],
@@ -54,7 +99,11 @@ const View = ({ children }) => {
     `namespace--${namespace}`,
   ]
 
-  const classNames = ['app', ...defaultClassNames, ...appContainerClassNames]
+  const classNames = ['app', ...defaultClassNames]
+
+  if (typeof appContainerClassNames !== 'function') {
+    classNames.push(...appContainerClassNames)
+  }
 
   if (!isOpen && layoutMode !== 'app') {
     classNames.push('app--collapsed')
@@ -69,7 +118,7 @@ const View = ({ children }) => {
       <div
         className={className(classNames)}
         lang={blockLang}
-        tabIndex="-1"
+        tabIndex={-1}
         data-nosnippet
         style={{ zIndex }}
         ref={containerElementRef}

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

@@ -8,14 +8,22 @@ 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 { 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 { continueChat, preChat } = useConfig()
   const { t } = useI18n()
   const continueChatText = t('window.chat.continue')
   const continueChatEvent = useMemo(
@@ -33,7 +41,9 @@ const WindowView = () => {
     <>
       <WindowOpenButton onClick={openChat} />
       <InOutTransition
-        isActive={!isOpen && !userHasResponded}
+        isActive={preChat && !isOpen && !userHasResponded}
+        exitAfter={getDelay(preChat, 'exitAfter')}
+        enterDelay={getDelay(preChat, 'enterDelay')}
         transitionStartState={transitionStartStates.rendered}
       >
         <div
@@ -46,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

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/{seamly-api-hooks.js → seamly-api-hooks.ts}

@@ -6,7 +6,7 @@ export const useSeamlyApiContext = () => useContext(SeamlyApiContext)
 export const useSeamlyObjectStore = () => {
   const api = useSeamlyApiContext()
 
-  return api.store || {}
+  return api.store
 }
 
 export const useSeamlyConversationUrl = () => {

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-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;