@seamly/web-ui 20.0.0-beta.1 → 20.0.0-beta.4

package/src/javascripts/ui/components/conversation/event/hooks/use-text-rendering.js

@@ -0,0 +1,35 @@
+import Mustache from 'mustache'
+
+Mustache.escape = function (escapeText) {
+  return escapeText
+}
+
+const parseLinkVariable = (variable) => {
+  return `<a href='${variable.url}' data-link-id='${variable.id}' ${
+    variable.newTab ? 'target="_blank"' : ''
+  }>${variable.name}</a>`
+}
+
+export function parseRichText(text, variables = {}) {
+  const view = {}
+  Object.entries(variables).forEach(([key, variable]) => {
+    switch (variable.type) {
+      case 'link':
+        view[key] = parseLinkVariable(variable)
+        break
+      case 'text':
+        view[key] = variable.value
+        break
+    }
+  }, {})
+
+  // Disable escaping as we'll be generating HTML
+  const oldEscape = Mustache.escape
+  Mustache.escape = function (escapeText) {
+    return escapeText
+  }
+  const output = Mustache.render(text, view)
+  Mustache.escape = oldEscape
+
+  return output
+}

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

@@ -1,4 +1,5 @@
 import { useMemo } from 'preact/hooks'
+import Mustache from 'mustache'
 import parseBody from '../../../../lib/parse-body'
 import EventDivider from '../event-divider'
 import { useTranslatedEventData } from '../../../../domains/translations'
@@ -11,8 +12,10 @@ const Participant = ({ event }) => {
   const [introduction] = useTranslatedEventData(event)
 
   const intro = useMemo(() => {
-    return introduction ? parseBody(introduction) : undefined
-  }, [introduction])
+    return introduction
+      ? Mustache.render(parseBody(introduction), participant)
+      : undefined
+  }, [introduction, participant])
 
   if (!intro) {
     return null

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

@@ -1,5 +1,6 @@
 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 '../message-container'
 import { useTranslatedEventData } from '../../../../domains/translations'
 
@@ -16,7 +17,7 @@ const Splash = ({ event, ...props }) => {
       {...props}
       bodyProps={{
         dangerouslySetInnerHTML: {
-          __html: parseBody(body.text),
+          __html: parseRichText(parseBody(body.text), body.variables),
         },
       }}
     />

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

@@ -1,6 +1,7 @@
 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 '../message-container'
 import { useTranslatedEventData } from '../../../../domains/translations'
 
@@ -13,7 +14,7 @@ const Text = ({ event, ...props }) => {
       return {
         bodyProps: {
           dangerouslySetInnerHTML: {
-            __html: parseBody(body.text),
+            __html: parseRichText(parseBody(body.text), body.variables),
           },
         },
       }

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

@@ -79,7 +79,7 @@ const EntryContainer = () => {
   const EntryComponent = entryComponents[renderEntry]
 
   return (
-    <div className={className('app__entry')} ref={entryContainer}>
+    <div className={className('chat__entry')} ref={entryContainer}>
       {showCountdown && <IdleDetachWarning />}
       {showResumeConversationPrompt && <ResumeConversationPrompt />}
       <div

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

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useMemo } from 'preact/hooks'
+import { className } from '../../../lib/css'
+import Icon from '../layout/icon'
+import { actionTypes } from '../../utils/seamly-utils'
+import { runIfElementContainsOrHasFocus } from '../../utils/general-utils'
+import useSeamlyCommands from '../../hooks/use-seamly-commands'
+import {
+  useSeamlyServiceData,
+  useSeamlyLayoutMode,
+} from '../../hooks/seamly-state-hooks'
+import { useGeneratedId } from '../../hooks/utility-hooks'
+import { useSkiplinkTargetFocusing } from '../../hooks/focus-helper-hooks'
+import { useLiveRegion } from '../../hooks/live-region-hooks'
+import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-countdown'
+import useSeamlyResumeConversationPrompt from '../../hooks/use-seamly-resume-conversation-prompt'
+import { useI18n } from '../../../domains/i18n'
+import InOutTransition, {
+  transitionStartStates,
+} from '../widgets/in-out-transition'
+import { useTranslatedEventData } from '../../../domains/translations'
+import { useInterrupt } from '../../../domains/interrupt'
+import { useUserHasResponded } from '../../../domains/app'
+
+const Faq = () => {
+  const { t } = useI18n()
+  const { sendAction, addMessageBubble } = useSeamlyCommands()
+  const sectionId = useGeneratedId()
+  const focusSkiplinkTarget = useSkiplinkTargetFocusing()
+  const { sendPolite } = useLiveRegion()
+  const { hasInterrupt } = useInterrupt()
+  const { hasCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
+  const { hasPrompt, continueChat } = useSeamlyResumeConversationPrompt()
+
+  const lastFaqEventPayload = useSeamlyServiceData('suggestion')
+  const [eventBody] = useTranslatedEventData({ payload: lastFaqEventPayload })
+  const faqs = useMemo(() => {
+    const newFaqs = lastFaqEventPayload && !hasInterrupt ? eventBody : []
+    const itemBaseClass = `faqs__item`
+    return newFaqs.map(({ categories = [], ...faqRest }) => ({
+      ...faqRest,
+      categories,
+      classNames: [
+        itemBaseClass,
+        ...categories.map(
+          (cat) =>
+            `faqs__item--${String(cat)
+              .toLowerCase()
+              .replace(/[^a-z0-9_\\-]/, '')}`,
+        ),
+      ],
+    }))
+  }, [lastFaqEventPayload, hasInterrupt, eventBody])
+
+  const prevFaqs = useRef(null)
+  const prevHasFaqs = useRef(false)
+
+  const { isInline } = useSeamlyLayoutMode()
+  const hasResponded = useUserHasResponded()
+  const hideForWindow = !isInline && hasResponded
+  const prevHideForWindow = useRef(hideForWindow)
+
+  const hasFaqs = !!faqs.length
+  const showFaqContainer = hasFaqs && !hideForWindow
+  const previousRenderedFaqList = useRef([])
+  const renderedFaqList = hasFaqs ? faqs : previousRenderedFaqList.current
+  previousRenderedFaqList.current = renderedFaqList
+
+  const containerRef = useRef(null)
+
+  useEffect(() => {
+    if (prevFaqs.current !== faqs && !hideForWindow) {
+      if (hasFaqs) {
+        const politeText = prevHasFaqs.current
+          ? t('faq.srUpdatedText')
+          : t('faq.srAvailableText')
+        setTimeout(() => {
+          sendPolite(politeText)
+        }, 30)
+      } else if (prevHasFaqs.current) {
+        sendPolite(t('faq.srUnavailableText'))
+      }
+      prevFaqs.current = faqs
+    }
+
+    if (!prevHideForWindow.current && hideForWindow) {
+      runIfElementContainsOrHasFocus(containerRef.current, focusSkiplinkTarget)
+      sendPolite(t('faq.srUnavailableText'))
+    } else if (!hasFaqs && prevHasFaqs.current) {
+      runIfElementContainsOrHasFocus(containerRef.current, focusSkiplinkTarget)
+    }
+
+    prevHasFaqs.current = hasFaqs
+    prevHideForWindow.current = hideForWindow
+  }, [hasFaqs, faqs, hideForWindow, focusSkiplinkTarget, sendPolite, t])
+
+  const onFaqClickHandler = ({ id, question }) => {
+    if (hasCountdown) {
+      endCountdown(true)
+    }
+
+    if (hasPrompt) {
+      continueChat()
+    }
+
+    sendAction({
+      type: actionTypes.custom,
+      originMessage: lastFaqEventPayload.id,
+      body: {
+        type: 'faqclick',
+        body: {
+          faqId: id,
+          faqQuestion: question,
+        },
+      },
+    })
+
+    addMessageBubble(question)
+    focusSkiplinkTarget()
+  }
+
+  const headingText = t('faq.headingText')
+  const ContainerElement = headingText ? 'section' : 'div'
+
+  return (
+    <InOutTransition
+      isActive={showFaqContainer}
+      transitionStartState={transitionStartStates.notRendered}
+    >
+      <ContainerElement
+        className={className('faqs')}
+        aria-labelledby={headingText ? sectionId : null}
+        ref={containerRef}
+      >
+        {headingText && (
+          <h2 id={sectionId} className={className('faqs__heading')}>
+            {headingText}
+          </h2>
+        )}
+        {!!renderedFaqList.length && (
+          <ul className={className('faqs__list')}>
+            {renderedFaqList.map((faq) => (
+              <li key={faq.id.toString()} className={className(faq.classNames)}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    onFaqClickHandler(faq)
+                  }}
+                  className={className('button', 'button--secondary')}
+                >
+                  <Icon name="chevronRight" size="8" />
+                  {faq.question}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </ContainerElement>
+    </InOutTransition>
+  )
+}
+
+export default Faq

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

@@ -21,7 +21,7 @@ function ChatFrame({ children, interruptComponent: InterruptComponent }) {
   return (
     <>
       <TranslationsChatStatus />
-      <div className={className('app__container')}>{getContent()}</div>
+      <div className={className('chat__container')}>{getContent()}</div>
       <AppOptions />
     </>
   )

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

@@ -0,0 +1,62 @@
+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'
+
+const Chat = ({ children, className: givenClassName = '' }) => {
+  const { isOpen, isVisible, setVisibility } = useVisibility()
+  const { namespace, layoutMode } = useConfig()
+  const { isInline } = useSeamlyLayoutMode()
+  const appContainerClassNames = useSeamlyAppContainerClassNames()
+  const userResponded = useUserHasResponded()
+  const { t } = useI18n()
+
+  const defaultClassNames = [
+    'chat',
+    `chat--layout-${layoutMode}`,
+    `namespace--${namespace}`,
+  ]
+
+  const classNames = [
+    ...defaultClassNames,
+    ...appContainerClassNames,
+    givenClassName,
+  ]
+
+  if (!isOpen && layoutMode !== 'app') {
+    classNames.push('chat--collapsed')
+  }
+
+  if (userResponded) {
+    classNames.push('chat--user-responded')
+  }
+
+  const onKeyDownHandler = (e) => {
+    if ((e.code && e.code === 'Escape') || e.keyCode === 27)
+      if (!isInline && isOpen) {
+        setVisibility(visibilityStates.minimized)
+      }
+  }
+
+  return (
+    isVisible && (
+      <section
+        className={className(classNames)}
+        onKeyDown={onKeyDownHandler}
+        tabIndex="-1"
+        aria-label={t('chat.srLabel')}
+      >
+        <div className={className('chat-wrapper')}>{children}</div>
+        {layoutMode === 'inline' && isOpen && <Suggestions isAside={true} />}
+      </section>
+    )
+  )
+}
+
+export default Chat

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

@@ -5,24 +5,20 @@ import {
   useSeamlyLayoutMode,
   useSeamlyContainerElement,
 } from '../../hooks/seamly-hooks'
+import Faq from '../faq/faq'
 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'
 
-const AppFrame = ({
-  children,
-  className: givenClassName = '',
-  isDeprecated,
-}) => {
+const DeprecatedAppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
   const { isOpen, isVisible, setVisibility } = useVisibility()
-  const { zIndex, namespace, layoutMode } = useConfig()
+  const { zIndex, showFaq, layoutMode } = useConfig()
   const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const userResponded = useUserHasResponded()
-  const { locale, t } = useI18n()
+  const { locale } = useI18n()
 
   const containerElementRef = useCallback(
     (container) => {
@@ -43,20 +39,9 @@ const AppFrame = ({
     return undefined
   }, [locale])
 
-  const baseClassName = isDeprecated ? 'app--deprecated' : 'app'
-  const defaultClassNames = [
-    `app--layout-${layoutMode}`,
-    `namespace--${namespace}`,
-  ]
+  const classNames = ['app', 'app--deprecated', ...appContainerClassNames]
 
-  const classNames = [
-    baseClassName,
-    ...defaultClassNames,
-    ...appContainerClassNames,
-    givenClassName,
-  ]
-
-  if (!isOpen && layoutMode !== 'app') {
+  if (!isOpen && layoutMode === 'window') {
     classNames.push('app--collapsed')
   }
 
@@ -64,6 +49,8 @@ const AppFrame = ({
     classNames.push('app--user-responded')
   }
 
+  classNames.push(`app--layout-${layoutMode}`)
+
   const onKeyDownHandler = (e) => {
     if ((e.code && e.code === 'Escape') || e.keyCode === 27)
       if (!isInline && isOpen) {
@@ -81,13 +68,12 @@ const AppFrame = ({
         ref={containerElementRef}
         style={{ zIndex }}
         data-nosnippet
-        aria-label={t('app.srLabel')}
       >
         <div className={className('app-wrapper')}>{children}</div>
-        {layoutMode === 'inline' && isOpen && <Suggestions isAside={true} />}
+        {showFaq && <Faq />}
       </section>
     )
   )
 }
 
-export default AppFrame
+export default DeprecatedAppFrame

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

@@ -10,7 +10,7 @@ const Header = ({ children, onCloseChat }) => {
 
   const { t } = useI18n()
   return (
-    <header className={className('app__header')}>
+    <header className={className('chat__header')}>
       {children}
       <div className={className('header-controls')}>
         <button

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

@@ -223,9 +223,9 @@ const OptionsButton = () => {
         className={className([
           'button',
           'button--secondary',
-          'app__options__button',
+          'chat__options__button',
           ...(!multiMenu && firstOptionName
-            ? [`app__options__button--${firstOptionName}`]
+            ? [`chat__options__button--${firstOptionName}`]
             : []),
           ...(!multiMenu && !firstOption.available ? ['button--disabled'] : []),
         ])}

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

@@ -152,9 +152,9 @@ const Suggestions = ({ isAside }) => {
         ref={containerRef}
       >
         {headingText && (
-          <h2 id={sectionId} className={className('suggestions__heading')}>
+          <p id={sectionId} className={className('suggestions__heading')}>
             {headingText}
-          </h2>
+          </p>
         )}
         {!!renderedSuggestions.length && (
           <SuggestionsList

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

@@ -1,4 +1,4 @@
-import AppFrame from '../layout/app-frame'
+import Chat from '../layout/chat'
 import Interrupt from '../layout/interrupt'
 import Conversation from '../conversation/conversation'
 import EntryContainer from '../entry/entry-container'
@@ -9,12 +9,12 @@ const AppView = () => {
   useSeamlyChat()
 
   return (
-    <AppFrame>
+    <Chat>
       <ChatFrame interruptComponent={Interrupt}>
         <Conversation />
         <EntryContainer />
       </ChatFrame>
-    </AppFrame>
+    </Chat>
   )
 }
 

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

@@ -1,4 +1,4 @@
-import AppFrame from '../layout/app-frame'
+import DeprecatedAppFrame from '../layout/deprecated-app-frame'
 import ChatFrame from '../layout/chat-frame'
 import AgentInfo from '../layout/agent-info'
 import Header from '../layout/header'
@@ -7,14 +7,16 @@ import EntryContainer from '../entry/entry-container'
 import Interrupt from '../layout/interrupt'
 import { useSeamlyChat } from '../../hooks/seamly-hooks'
 import { useVisibility } from '../../../domains/visibility'
+import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 
 const DeprecatedView = () => {
   const { isVisible } = useVisibility()
-  const { closeChat } = useSeamlyChat()
+  const { openChat, closeChat } = useSeamlyChat()
 
   return (
     isVisible && (
-      <AppFrame isDeprecated={true}>
+      <DeprecatedAppFrame>
+        <DeprecatedToggleButton onOpenChat={openChat} />
         <Header onCloseChat={closeChat}>
           <AgentInfo />
         </Header>
@@ -22,7 +24,7 @@ const DeprecatedView = () => {
           <Conversation />
           <EntryContainer />
         </ChatFrame>
-      </AppFrame>
+      </DeprecatedAppFrame>
     )
   )
 }

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

@@ -1,9 +1,14 @@
+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 { useSeamlyStateContext } from '../../hooks/seamly-state-hooks'
-import { visibilityStates } from '../../../domains/visibility'
+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'
 
 const ViewComponentsMap = {
   app: AppView,
@@ -12,16 +17,67 @@ const ViewComponentsMap = {
 }
 
 const View = () => {
-  const { layoutMode } = useConfig()
-  const { visible } = useSeamlyStateContext()
+  const [, setSeamlyContainerElement] = useSeamlyContainerElement()
+  const { namespace, layoutMode, zIndex } = useConfig()
+  const { isOpen, isVisible } = useVisibility()
+  const appContainerClassNames = useSeamlyAppContainerClassNames()
+  const userResponded = useUserHasResponded()
+  const { locale } = useI18n()
   const ViewComponent = ViewComponentsMap[layoutMode]
 
+  const containerElementRef = useCallback(
+    (container) => {
+      setSeamlyContainerElement(container)
+    },
+    [setSeamlyContainerElement],
+  )
+
+  const blockLang = useMemo(() => {
+    if (locale) {
+      const htmlElementLang = document
+        .querySelector('html')
+        .getAttribute('lang')
+      if (htmlElementLang !== locale) {
+        return locale
+      }
+    }
+    return undefined
+  }, [locale])
+
   if (!ViewComponent) {
     console.warn('"layoutMode" should be one of "app", "inline" or "window"')
     return null
   }
 
-  return visible !== visibilityStates.hidden && <ViewComponent />
+  const defaultClassNames = [
+    `app--layout-${layoutMode}`,
+    `namespace--${namespace}`,
+  ]
+
+  const classNames = ['app', ...defaultClassNames, ...appContainerClassNames]
+
+  if (!isOpen && layoutMode !== 'app') {
+    classNames.push('app--collapsed')
+  }
+
+  if (userResponded) {
+    classNames.push('app--user-responded')
+  }
+
+  return (
+    isVisible && (
+      <div
+        className={className(classNames)}
+        lang={blockLang}
+        tabIndex="-1"
+        data-nosnippet
+        style={{ zIndex }}
+        ref={containerElementRef}
+      >
+        <ViewComponent />
+      </div>
+    )
+  )
 }
 
 export default View

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

@@ -1,5 +1,5 @@
 import { className } from '../../../lib/css'
-import AppFrame from '../layout/app-frame'
+import Chat from '../layout/chat'
 import Interrupt from '../layout/interrupt'
 import Conversation from '../conversation/conversation'
 import EntryContainer from '../entry/entry-container'
@@ -11,10 +11,16 @@ import Suggestions from '../suggestions'
 import InOutTransition, {
   transitionStartStates,
 } from '../widgets/in-out-transition'
+import { useInterrupt } from '../../../domains/interrupt'
 
 const InlineView = () => {
   useSeamlyChat()
   const { isOpen } = useVisibility()
+  const { hasInterrupt, meta } = useInterrupt()
+
+  if (hasInterrupt && !isOpen) {
+    return <Interrupt {...meta} />
+  }
 
   return (
     <>
@@ -31,12 +37,12 @@ const InlineView = () => {
         isActive={isOpen}
         transitionStartState={transitionStartStates.rendered}
       >
-        <AppFrame>
+        <Chat>
           <ChatFrame interruptComponent={Interrupt}>
             {isOpen && <Conversation />}
             <EntryContainer />
           </ChatFrame>
-        </AppFrame>
+        </Chat>
       </InOutTransition>
     </>
   )

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'preact/hooks'
 import { useSeamlyChat } from '../../../hooks/seamly-hooks'
 import { useVisibility } from '../../../../domains/visibility'
-import AppFrame from '../../layout/app-frame'
+import Chat from '../../layout/chat'
 import ChatFrame from '../../layout/chat-frame'
 import Interrupt from '../../layout/interrupt'
 import Conversation from '../../conversation/conversation'
@@ -67,13 +67,13 @@ const WindowView = () => {
         isActive={isOpen}
         transitionStartState={transitionStartStates.notRendered}
       >
-        <AppFrame>
+        <Chat>
           {isOpen && <CollapseButton onClick={closeChat} />}
           <ChatFrame interruptComponent={Interrupt}>
             <Conversation />
             <EntryContainer />
           </ChatFrame>
-        </AppFrame>
+        </Chat>
       </InOutTransition>
     </>
   )