@seamly/web-ui 20.0.0-beta.3 → 20.0.0-beta.6

package/src/javascripts/style-guide/style-guide-engine.js

@@ -17,6 +17,7 @@ class SeamlyStyleGuideInstance extends Engine {
     const api = new API({
       namespace: this.config.namespace,
       config: this.config.api,
+      context: this.config.context,
     })
     api.URLS = {
       translations: `/client/${this.config.api.key}/translations/{version}/{locale}.json`,

package/src/javascripts/ui/components/app-options/index.js

@@ -17,17 +17,23 @@ export default function AppOptions() {
   }
 
   return (
-    <div className={className('app__options')}>
+    <div className={className('chat__options')}>
       {isTranslationsAvailable && (
         <div
-          className={className('app__options-item', 'app__options-item--left')}
+          className={className(
+            'chat__options-item',
+            'chat__options-item--left',
+          )}
         >
           <TranslationsOptionsButton />
         </div>
       )}
       {allowOptionSelection && (
         <div
-          className={className('app__options-item', 'app__options-item--right')}
+          className={className(
+            'chat__options-item',
+            'chat__options-item--right',
+          )}
         >
           <OptionsButton />
         </div>

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

@@ -72,7 +72,7 @@ const Conversation = () => {
           {t('skiplinkText')}
         </a>
       )}
-      <div className={className('app__body')} ref={appBodyContainer}>
+      <div className={className('chat__body')} ref={appBodyContainer}>
         <div className={className('conversation__container')}>
           <PrivacyDisclaimer />
           <ol className={className('conversation')}>

package/src/javascripts/ui/components/conversation/event/carousel-message/index.js

@@ -1,11 +1,13 @@
 import MessageContainer from '../../message-container'
 import CarouselComponent from '../carousel-component'
+import { useTranslatedEventData } from '../../../../../domains/translations'
 import CarouselMessageSlide from './components/slide'
 
 const getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`
 const getItemLabel = (item) => item.title
 const CarouselMessage = ({ event }) => {
-  const slides = event.payload.body.cards
+  const [body] = useTranslatedEventData(event)
+  const slides = body.cards
 
   return (
     <MessageContainer event={event} modifiers={'type-carousel'}>

package/src/javascripts/ui/components/conversation/event/conversation-suggestions.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'preact/hooks'
+import { useCallback, useState } from 'preact/hooks'
 import { className } from '../../../../lib/css'
 import { actionTypes } from '../../../utils/seamly-utils'
 import { useI18n } from '../../../../domains/i18n'
@@ -6,6 +6,7 @@ import { useTranslatedEventData } from '../../../../domains/translations'
 import MessageContainer from '../message-container'
 import { useSeamlyCommands } from '../../../hooks/seamly-hooks'
 import SuggestionsList from '../../suggestions/suggestions-list'
+import { useConfig } from '../../../../domains/config'
 
 export const useSuggestions = (event) => {
   const { payload } = event
@@ -18,6 +19,8 @@ export const useSuggestions = (event) => {
 }
 
 const ConversationSuggestions = ({ event, ...props }) => {
+  const { userResponded } = useConfig()
+  const [isExpanded, setIsExpanded] = useState(true)
   const { t } = useI18n()
   const headingText = t('suggestions.headingText')
   const footerText = t('suggestions.footerText')
@@ -26,6 +29,8 @@ const ConversationSuggestions = ({ event, ...props }) => {
   const handleClick = useCallback(
     ({ id, question }) => {
       // @todo Refactor to 'suggestionclick'
+      setIsExpanded(false)
+
       sendAction({
         type: actionTypes.custom,
         originMessage: payload.id,
@@ -40,13 +45,17 @@ const ConversationSuggestions = ({ event, ...props }) => {
 
       addMessageBubble(question)
     },
-    [payload, sendAction, addMessageBubble],
+    [payload, sendAction, addMessageBubble, setIsExpanded],
   )
 
+  if (!isExpanded || userResponded) {
+    return null
+  }
+
   return (
     <div className={className('suggestions', 'suggestions--conversation')}>
       {headingText && (
-        <h2 className={className('suggestions__heading')}>{headingText}</h2>
+        <p className={className('suggestions__heading')}>{headingText}</p>
       )}
       <MessageContainer
         type="suggestions"

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/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/{app-frame.js → chat.js}

@@ -1,9 +1,7 @@
-import { useCallback, useMemo } from 'preact/hooks'
 import { className } from '../../../lib/css'
 import {
   useSeamlyAppContainerClassNames,
   useSeamlyLayoutMode,
-  useSeamlyContainerElement,
 } from '../../hooks/seamly-hooks'
 import { useConfig } from '../../../domains/config'
 import { useUserHasResponded } from '../../../domains/app'
@@ -11,57 +9,32 @@ import { useI18n } from '../../../domains/i18n'
 import { useVisibility, visibilityStates } from '../../../domains/visibility'
 import Suggestions from '../suggestions'
 
-const AppFrame = ({
-  children,
-  className: givenClassName = '',
-  isDeprecated,
-}) => {
-  const [, setSeamlyContainerElement] = useSeamlyContainerElement()
+const Chat = ({ children, className: givenClassName = '' }) => {
   const { isOpen, isVisible, setVisibility } = useVisibility()
-  const { zIndex, namespace, layoutMode } = useConfig()
+  const { namespace, layoutMode } = useConfig()
   const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const userResponded = useUserHasResponded()
-  const { locale, t } = useI18n()
+  const { t } = useI18n()
 
-  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])
-
-  const baseClassName = isDeprecated ? 'app--deprecated' : 'app'
   const defaultClassNames = [
-    `app--layout-${layoutMode}`,
+    'chat',
+    `chat--layout-${layoutMode}`,
     `namespace--${namespace}`,
   ]
 
   const classNames = [
-    baseClassName,
     ...defaultClassNames,
     ...appContainerClassNames,
     givenClassName,
   ]
 
   if (!isOpen && layoutMode !== 'app') {
-    classNames.push('app--collapsed')
+    classNames.push('chat--collapsed')
   }
 
   if (userResponded) {
-    classNames.push('app--user-responded')
+    classNames.push('chat--user-responded')
   }
 
   const onKeyDownHandler = (e) => {
@@ -76,18 +49,14 @@ const AppFrame = ({
       <section
         className={className(classNames)}
         onKeyDown={onKeyDownHandler}
-        lang={blockLang}
         tabIndex="-1"
-        ref={containerElementRef}
-        style={{ zIndex }}
-        data-nosnippet
-        aria-label={t('app.srLabel')}
+        aria-label={t('chat.srLabel')}
       >
-        <div className={className('app-wrapper')}>{children}</div>
+        <div className={className('chat-wrapper')}>{children}</div>
         {layoutMode === 'inline' && isOpen && <Suggestions isAside={true} />}
       </section>
     )
   )
 }
 
-export default AppFrame
+export default Chat

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

@@ -15,7 +15,7 @@ const DeprecatedAppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
   const { isOpen, isVisible, setVisibility } = useVisibility()
   const { zIndex, showFaq, layoutMode } = useConfig()
-  const { isModal, isInline } = useSeamlyLayoutMode()
+  const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const userResponded = useUserHasResponded()
   const { locale } = useI18n()
@@ -58,18 +58,11 @@ const DeprecatedAppFrame = ({ children }) => {
       }
   }
 
-  const onClickHandler = (e) => {
-    if (isModal) {
-      e.stopPropagation()
-    }
-  }
-
   return (
     isVisible && (
       <section
         className={className(classNames)}
         onKeyDown={onKeyDownHandler}
-        onClick={onClickHandler}
         lang={blockLang}
         tabIndex="-1"
         ref={containerElementRef}

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/layout/pre-chat-messages.js

@@ -3,9 +3,6 @@ import { useInterrupt } from '../../../domains/interrupt'
 import { useConfig } from '../../../domains/config'
 import useEventComponentMapping from '../../hooks/use-event-component-mapping'
 import { useVisibility } from '../../../domains/visibility'
-import InOutTransition, {
-  transitionStartStates,
-} from '../widgets/in-out-transition'
 
 export default function PreChatMessages() {
   const { preChatEvents, layoutMode } = useConfig()
@@ -15,10 +12,7 @@ export default function PreChatMessages() {
   const isVisible = !(hasInterrupt || !preChatEvents.length || isOpen)
 
   return (
-    <InOutTransition
-      isActive={isVisible}
-      transitionStartState={transitionStartStates.notRendered}
-    >
+    isVisible && (
       <ul
         className={className(
           'pre-chat-messages',
@@ -35,7 +29,7 @@ export default function PreChatMessages() {
           </li>
         ))}
       </ul>
-    </InOutTransition>
+    )
   )
 }
 

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,13 +152,12 @@ 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
-            hasIcon={true}
             suggestions={renderedSuggestions}
             onClickSuggestion={handleClick}
           />

package/src/javascripts/ui/components/suggestions/suggestions-list.js

@@ -5,7 +5,7 @@ const SuggestionsList = ({
   className: givenClassName,
   suggestions = [],
   onClickSuggestion,
-  hasIcon,
+  hasIcon = true,
 }) => {
   return (
     <ul className={className('suggestions__list', givenClassName)}>

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

@@ -7,11 +7,11 @@ 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/toggle-button'
+import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 
 const DeprecatedView = () => {
   const { isVisible } = useVisibility()
-  const { closeChat, openChat } = useSeamlyChat()
+  const { openChat, closeChat } = useSeamlyChat()
 
   return (
     isVisible && (

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 (
     <>
@@ -22,7 +28,12 @@ const InlineView = () => {
         isActive={!isOpen}
         transitionStartState={transitionStartStates.rendered}
       >
-        <div className={className('unstarted-wrapper')}>
+        <div
+          className={className(
+            'unstarted-wrapper',
+            'unstarted-wrapper--inline',
+          )}
+        >
           <PreChatMessages />
           <Suggestions />
         </div>
@@ -31,12 +42,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'
@@ -14,7 +14,7 @@ import InOutTransition, {
 import PreChatMessages from '../../layout/pre-chat-messages'
 import { useUserHasResponded } from '../../../../domains/app'
 import { className } from '../../../../lib/css'
-import Splash from '../../conversation/event/splash'
+import Text from '../../conversation/event/text'
 import { useI18n } from '../../../../domains/i18n'
 
 const WindowView = () => {
@@ -60,20 +60,20 @@ const WindowView = () => {
             'unstarted-wrapper--continue',
           )}
         >
-          <Splash event={continueChatEvent} />
+          <Text event={continueChatEvent} />
         </div>
       </InOutTransition>
       <InOutTransition
         isActive={isOpen}
         transitionStartState={transitionStartStates.notRendered}
       >
-        <AppFrame>
+        <Chat>
           {isOpen && <CollapseButton onClick={closeChat} />}
           <ChatFrame interruptComponent={Interrupt}>
             <Conversation />
             <EntryContainer />
           </ChatFrame>
-        </AppFrame>
+        </Chat>
       </InOutTransition>
     </>
   )