@seamly/web-ui 18.1.1 → 18.3.1

package/src/javascripts/style-guide/components/app.js

@@ -1,10 +1,5 @@
 import { useCallback, useEffect, useState } from 'preact/hooks'
-import {
-  getSeamlyConfig,
-  getUrlParams,
-  getUrlSearchString,
-  randomId,
-} from '@seamly/web-ui'
+import { getUrlParams, getUrlSearchString, randomId } from '@seamly/web-ui'
 import StyleGuideView from './view'
 import StyleGuideLinks from './links'
 import { getStateObj } from '../states'
@@ -34,7 +29,7 @@ const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
   })
 
   const updateState = useCallback(
-    state => {
+    (state) => {
       if (stateUpdateCallback) {
         setStaticState(stateUpdateCallback(state))
       } else {
@@ -46,7 +41,7 @@ const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
 
   const getState = useCallback(
     (layoutMode, feature) => {
-      const { showDisclaimer, defaults } = config
+      const { defaults } = config
       const { headingText } = mainState[feature]
       setSelectedStateDescription(headingText)
       const bareState = mainState[feature][layoutMode]
@@ -57,13 +52,11 @@ const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
         ...bareState,
         config: {
           ...bareState.config,
-          ...getSeamlyConfig(config),
+          ...config,
           layoutMode: bareState.config.layoutMode,
           ...(overrideMessages ? { messages: overrideMessages } : {}),
           showFaq,
         },
-        showDisclaimer:
-          showDisclaimer != null ? showDisclaimer : bareState.showDisclaimer,
         headerTitles: {
           ...bareState.headerTitles,
           subTitle: agentName || bareState.headerTitles.subTitle,
@@ -82,7 +75,7 @@ const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
       const overlay = document.querySelector('[aria-modal="true"]')
       if (overlay) {
         overlay.addEventListener('click', () => {
-          setStaticState(s => ({
+          setStaticState((s) => ({
             ...s,
             visible: 'minimized',
           }))

package/src/javascripts/style-guide/components/links.js

@@ -4,7 +4,7 @@ import { categories } from '../states'
 const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
   const CategoryHeading = `h${headingLevel.toString()}`
   const FeatureHeading = `h${(parseInt(headingLevel, 10) + 1).toString()}`
-  const onClickHandler = actionObj => {
+  const onClickHandler = (actionObj) => {
     window.history.pushState(
       null,
       null,
@@ -18,9 +18,9 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
   return (
     <nav aria-label="Style guide navigation" className="nav--styleguide">
       <ol className="list--styleguidestates">
-        {Object.keys(categories).map(category => {
+        {Object.keys(categories).map((category) => {
           const { heading, description } = categories[category]
-          const features = Object.keys(states).filter(feature => {
+          const features = Object.keys(states).filter((feature) => {
             const { category: featureCategory } = states[feature]
             return featureCategory === category
           })
@@ -30,7 +30,7 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                 <CategoryHeading>{heading}</CategoryHeading>
                 <span className="category__description">{description}</span>
                 <ol>
-                  {features.map(feature => {
+                  {features.map((feature) => {
                     const featureState = { ...states[feature] }
                     delete featureState.category
                     const {
@@ -50,7 +50,7 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                           </span>
                         )}
                         <ul className="list--styleguidelayouts">
-                          {Object.keys(rest).map(layoutMode => (
+                          {Object.keys(rest).map((layoutMode) => (
                             <li
                               key={layoutMode}
                               className={
@@ -74,7 +74,7 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                                     ? 'page'
                                     : null
                                 }
-                                onClick={e => {
+                                onClick={(e) => {
                                   e.preventDefault()
                                   if (layoutMode === 'inline') {
                                     setTimeout(() => {

package/src/javascripts/style-guide/components/static-core.js

@@ -6,10 +6,15 @@ import {
   StoreProvider,
   createReduxStore,
 } from '@seamly/web-ui'
-import stateReducer from '../../ui/store/state-reducer'
+import stateReducer from '../../domains/store/state-reducer'
 import { Reducer as formReducer } from '../../domains/forms'
 import { Reducer as translationsReducer } from '../../domains/translations'
 import { Reducer as i18nReducer } from '../../domains/i18n'
+import { Reducer as interruptReducer } from '../../domains/interrupt'
+import {
+  Reducer as configReducer,
+  Actions as ConfigActions,
+} from '../../domains/config'
 
 const bareApi = {
   send: () => {},
@@ -22,20 +27,31 @@ const bareApi = {
 const SeamlyTestCore = ({ state, children }) => {
   const liveMsgRef = useRef(() => {})
   const eventBusRef = useRef({ emit: () => {} })
+
   const store = useMemo(() => {
-    const { translations: translationsSlice, ...restState } = state || {}
-    return createReduxStore(
-      {
+    const {
+      translations: translationsSlice,
+      interrupt: interruptSlice,
+      config: configSlice,
+      ...restState
+    } = state || {}
+    const newStore = createReduxStore({
+      reducers: {
         state: stateReducer,
+        [String(configReducer)]: configReducer,
         [String(formReducer)]: formReducer,
         [String(translationsReducer)]: translationsReducer,
         [String(i18nReducer)]: i18nReducer,
+        [String(interruptReducer)]: interruptReducer,
       },
-      {
+      initialState: {
         state: restState,
-        translations: translationsSlice,
+        [String(translationsReducer)]: translationsSlice,
+        [String(interruptReducer)]: interruptSlice,
       },
-    )
+    })
+    newStore.dispatch(ConfigActions.initialize(configSlice || {}))
+    return newStore
   }, [state])
 
   return (

package/src/javascripts/style-guide/state-helpers/index.js

@@ -42,7 +42,7 @@ export function addTranslationData(event) {
                 ? 'NL - ' + event.payload.body.buttonText
                 : undefined,
               choices: event.payload.body.choices
-                ? event.payload.body.choices.map(choice => ({
+                ? event.payload.body.choices.map((choice) => ({
                     ...choice,
                     text: 'NL - ' + choice.text,
                   }))

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

@@ -1,4 +1,10 @@
-import { visibilityStates, randomId } from '@seamly/web-ui'
+import {
+  visibilityStates,
+  randomId,
+  SeamlyOfflineError,
+  SeamlyGeneralError,
+  SeamlyConfigurationError,
+} from '@seamly/web-ui'
 import { addTranslationData } from './state-helpers'
 
 const baseState = {
@@ -8,6 +14,7 @@ const baseState = {
     accountConfig: {},
     hideOnNoUserResponse: false,
     showFaq: false,
+    showDisclaimer: false,
   },
   initialState: {},
   unreadEvents: 0,
@@ -27,14 +34,12 @@ const baseState = {
     subTitle: 'Test subtitle',
   },
   interrupt: {
-    hasInterrupt: false,
-    meta: {},
+    error: undefined,
   },
   historyLoaded: false,
   skiplinkTargetId: randomId(),
   optionsButtonId: randomId(),
   cobrowseContainerId: randomId(),
-  showDisclaimer: false,
   serviceData: {},
   options: {
     features: {},
@@ -117,8 +122,7 @@ const newTranslationDividerStart = {
     body: {
       language: 'Nederlands',
       subtype: 'new_translation',
-      text:
-        '[NL] Automatic translation to Dutch started. Please note that automatic translations may contain errors.',
+      text: '[NL] Automatic translation to Dutch started. Please note that automatic translations may contain errors.',
       translationEnabled: true,
       translationLocale: 'nl',
     },
@@ -304,7 +308,7 @@ const ctaMessage = {
   type: 'message',
   payload: {
     body: {
-      description: 'More info about our products?',
+      description: 'Thanks for chatting!\n\nMore info about our **products**?',
       buttonLink: 'https://seamly.ai',
       buttonText: 'View website',
       buttonNewTab: true,
@@ -329,8 +333,7 @@ const longTextMessage = {
   type: 'message',
   payload: {
     body: {
-      text:
-        'What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am.',
+      text: 'What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am.',
       type: 'text',
       variables: {},
     },
@@ -422,8 +425,7 @@ const textMessageWithLongLink = {
       variables: {
         link_1: {
           id: '1',
-          name:
-            'click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee',
+          name: 'click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee',
           newTab: false,
           type: 'link',
           url: 'https://google.com',
@@ -450,8 +452,7 @@ const textMesageWithBullets = {
   type: 'message',
   payload: {
     body: {
-      text:
-        '<ul>\n<li>Bullets</li>\n<li>bullets</li>\n<li>bullets</li>\n</ul>\n',
+      text: '<ul>\n<li>Bullets</li>\n<li>bullets</li>\n<li>bullets</li>\n</ul>\n',
       type: 'text',
       variables: {},
     },
@@ -553,8 +554,7 @@ const choicePromptMessage = {
       choices: [
         {
           id: '703db9b3-2157-4d4a-9f9b-c382c6a10531',
-          text:
-            'Dialog (this is intentionally made longer for testing purposes)',
+          text: 'Dialog (this is intentionally made longer for testing purposes)',
           type: 'choice',
         },
         {
@@ -579,7 +579,8 @@ const choicePromptMessage = {
         },
         {
           id: '9fd9a28f-462d-4f07-9661-606dbe3b9466',
-          text: 'Content',
+          category: 'secondary',
+          text: 'Something else',
           type: 'choice',
         },
       ],
@@ -630,8 +631,7 @@ const userMessageLong = {
   type: 'message',
   payload: {
     body: {
-      text:
-        'This is what the user typed. And sometimes the user has quite a lot to say and then we get longer lines that need to wrap well and not break the styling so here goes with just such a line right here!!',
+      text: 'This is what the user typed. And sometimes the user has quite a lot to say and then we get longer lines that need to wrap well and not break the styling so here goes with just such a line right here!!',
       type: 'text',
       variables: {},
     },
@@ -652,7 +652,6 @@ const fileDownloadPayload = {
   meta: {},
   body: {
     contentType: 'image/jpg',
-    deleteAt: 1000 * (Date.now() + 3600000),
     filename: 'placeholder.jpg',
     filesize: 991078,
     url: 'https://via.placeholder.com/150',
@@ -675,7 +674,6 @@ const deletedFileDownloadAgentMessage = {
     ...fileDownloadAgentMessage.payload,
     body: {
       ...fileDownloadAgentMessage.payload.body,
-      deleteAt: 1000 * (Date.now() - 3600000),
     },
     id: randomId(),
   },
@@ -691,18 +689,6 @@ const fileDownloadUserMessage = {
   },
 }
 
-const deletedFileDownloadUserMessage = {
-  ...fileDownloadUserMessage,
-  payload: {
-    id: randomId(),
-    ...fileDownloadUserMessage.payload,
-    body: {
-      ...fileDownloadUserMessage.payload.body,
-      deleteAt: 1000 * (Date.now() - 3600000),
-    },
-  },
-}
-
 const emptyUrlFileDownloadUserMessage = {
   ...fileDownloadUserMessage,
   payload: {
@@ -807,7 +793,8 @@ const cardAskText = {
         type: 'ask',
       },
       buttonText: 'Ask about pizzas!',
-      description: 'Pizza Margherita is a typical Neapolitan pizza.',
+      description:
+        'Pizza Margherita is a **typical Neapolitan pizza**.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
       image:
         'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
       title: 'Pizza Margherita',
@@ -826,7 +813,7 @@ const cardNavigate = {
         type: 'navigate',
       },
       buttonText: 'Order now!',
-      description: 'Pizza Margherita is a typical Neapolitan pizza.',
+      description: 'Pizza Margherita is a **typical Neapolitan pizza**.',
       image:
         'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
       title: 'Pizza Margherita',
@@ -891,7 +878,6 @@ const standardState = {
       textMessageWithLongLink,
       imageMessageWithLightbox,
       fileDownloadUserMessage,
-      deletedFileDownloadUserMessage,
       emptyUrlFileDownloadUserMessage,
       textMesageWithBullets,
       choicePromptMessage,
@@ -908,7 +894,6 @@ const standardState = {
       userMessage,
       userMessageLong,
       fileDownloadUserMessage,
-      deletedFileDownloadUserMessage,
       emptyUrlFileDownloadUserMessage,
     ],
   },
@@ -1114,8 +1099,7 @@ const standardState = {
           occurredAt: Date.now() * 1000,
           id: randomId(),
           body: {
-            text:
-              'Above me should be a time indicator showing me the dialog continues today',
+            text: 'Above me should be a time indicator showing me the dialog continues today',
             type: 'text',
             variables: {},
           },
@@ -1165,14 +1149,7 @@ const standardState = {
     description: '',
     ...baseState,
     interrupt: {
-      hasInterrupt: true,
-      meta: {
-        title: 'Connection issues',
-        message:
-          'There might be a problem with your or our network connection. The chat session should resume as soon the connection is available again.',
-        srText:
-          'The chat has connection issues. There might be a problem with your or our network connection. The chat session should resume as soon as the connection is available again.',
-      },
+      error: new SeamlyOfflineError(),
     },
   },
   generalErrorInterrupt: {
@@ -1182,15 +1159,7 @@ const standardState = {
     description: '',
     ...baseState,
     interrupt: {
-      hasInterrupt: true,
-      meta: {
-        title: 'Something went wrong',
-        message: 'Do you want to start a new chat session?',
-        buttonText: 'Restart chat',
-        action: 'reset',
-        srText:
-          'Something went wrong with the chat session. You can restart the chat.',
-      },
+      error: new SeamlyGeneralError(),
     },
   },
   configErrorInterrupt: {
@@ -1200,13 +1169,7 @@ const standardState = {
     description: '',
     ...baseState,
     interrupt: {
-      hasInterrupt: true,
-      meta: {
-        title: 'Chat configuration error.',
-        message: 'We are sorry this happened, please retry at a later time.',
-        srText:
-          'A chat configuration error occurred. Our apologies, please retry at a later time.',
-      },
+      error: new SeamlyConfigurationError(),
     },
   },
   privacyDisclaimer: {
@@ -1218,7 +1181,6 @@ const standardState = {
       ...baseState.config,
       showDisclaimer: true,
     },
-    showDisclaimer: true,
   },
   cobrowserBar: {
     category: categoryKeys.features,
@@ -1756,7 +1718,6 @@ const standardState = {
       textMessageWithLongLink,
       imageMessageWithLightbox,
       fileDownloadUserMessage,
-      deletedFileDownloadUserMessage,
       emptyUrlFileDownloadUserMessage,
       textMesageWithBullets,
       choicePromptMessage,
@@ -1794,9 +1755,8 @@ const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
     }, {}),
   }
   return Object.keys(intermediateState).reduce((acc, key) => {
-    const { headingText, category, description, ...rest } = intermediateState[
-      key
-    ]
+    const { headingText, category, description, ...rest } =
+      intermediateState[key]
     return {
       ...acc,
       [key]: {

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

@@ -11,7 +11,7 @@ class SeamlyStyleGuideInstance extends Engine {
 
   render() {
     const restComponents = {
-      ...(this.customComponents || {}),
+      ...(this.config.customComponents || {}),
       view: undefined,
     }
 

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

@@ -1,9 +1,9 @@
 import View from './layout/view'
 import SeamlyCore from './core/seamly-core'
 
-const ChatApp = ({ config, eventBus }) => {
+const ChatApp = (props) => {
   return (
-    <SeamlyCore config={config} eventBus={eventBus}>
+    <SeamlyCore {...props}>
       <View />
     </SeamlyCore>
   )

package/src/javascripts/ui/components/conversation/component-filter.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'preact/hooks'
-import { useSeamlyConfig } from '../../hooks/seamly-hooks'
+import { useConfig } from '../../../domains/config'
 import ComponentContext from './component-context'
 import ChoicePrompt from './event/choice-prompt'
 import Text from './event/text'
@@ -37,7 +37,7 @@ const eventTypeMapping = {
 }
 
 const ComponentFilter = ({ children }) => {
-  const { customComponents } = useSeamlyConfig()
+  const { customComponents } = useConfig()
 
   const resolvedComponents = useMemo(() => {
     // Calculates a combined component mapping object based on the defaults with

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

@@ -33,7 +33,7 @@ const Conversation = () => {
 
   const renderEvents = () => {
     let prevParticipant = null
-    return events.map(event => {
+    return events.map((event) => {
       const { type, payload } = event
       const { participant, fromClient } = payload
       let participantChanged = false
@@ -56,7 +56,7 @@ const Conversation = () => {
     })
   }
 
-  const onClickHandler = e => {
+  const onClickHandler = (e) => {
     e.preventDefault()
     focusSkiplinkTarget()
   }

package/src/javascripts/ui/components/conversation/event/card-component.js

@@ -1,5 +1,6 @@
-import { useCallback, useMemo } from 'preact/hooks'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import { className } from '../../../../lib/css'
+import parseBody from '../../../../lib/parse-body'
 import { useGeneratedId, useSeamlyCommands } from '../../../hooks/seamly-hooks'
 import { cardTypes, actionTypes } from '../../../utils/seamly-utils'
 
@@ -8,11 +9,15 @@ const CardComponent = ({
   action,
   buttonText,
   description,
+  hasFocus,
   image,
   title,
+  isCarouselItem,
 }) => {
+  const cardRef = useRef(null)
   const { sendMessage, sendAction, emitEvent } = useSeamlyCommands()
   const descriptionId = useGeneratedId()
+  const isMounted = useRef()
 
   const CardActionComponent =
     action.type === cardTypes.navigate ? 'a' : 'button'
@@ -52,15 +57,35 @@ const CardComponent = ({
     [action, handleClick, emitCardEvent],
   )
 
+  useEffect(() => {
+    if (isCarouselItem) {
+      if (hasFocus && isMounted.current) {
+        window.requestAnimationFrame(() => cardRef.current.focus())
+      } else {
+        cardRef.current.blur()
+      }
+    }
+    isMounted.current = true
+  }, [hasFocus, isCarouselItem])
+
   return (
-    <div className={className('card__wrapper')} id={id}>
-      <img className={className('card__image')} src={image} alt={description} />
+    <div
+      className={className('card__wrapper')}
+      id={id}
+      tabIndex="-1" // set tabIndex of -1 so card can be focussed
+      ref={cardRef}
+    >
+      <img className={className('card__image')} src={image} alt="" />
       <div className={className('card__content')} id={id}>
         {title && <h2 className={className('card__title')}>{title}</h2>}
         {description && (
-          <p className={className('card__description')}>{description}</p>
+          <div
+            className={className('card__description')}
+            dangerouslySetInnerHTML={{ __html: parseBody(description) }}
+          />
         )}
         <CardActionComponent
+          tabIndex={isCarouselItem && !hasFocus ? '-1' : undefined} // disable to prevent tabbing through cards
           className={className('button', 'button--primary')}
           aria-describedby={descriptionId}
           {...actionProps}

package/src/javascripts/ui/components/conversation/event/carousel-component/components/pagination.js

@@ -10,7 +10,7 @@ export default function CarouselPagination({
 }) {
   const itemCount = items.length
   const handlePaginate = useCallback(
-    event => {
+    (event) => {
       const slideIndex = Number(event.target.dataset.item || '0')
       const nextIndex = Math.min(itemCount - 1, Math.max(0, slideIndex))
       if (nextIndex !== currentIndex) {
@@ -27,7 +27,7 @@ export default function CarouselPagination({
           const isActive = currentIndex === idx
           return (
             <li
-              key={getItemKey(item, idx)}
+              key={getItemKey(item, idx, 'pagination-item-')}
               className={className(
                 'carousel-pagination__item',
                 isActive ? 'is-active' : undefined,

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

@@ -6,8 +6,8 @@ import CarouselPagination from './components/pagination'
 import CarouselControls from './components/controls'
 import CarouselMessageSlide from '../carousel-message/components/slide'
 
-const defaultGetItemKey = (item, idx) => idx
-const defaultGetItemLabel = item => item.label
+const defaultGetItemKey = (item, idx, prefix) => `${prefix}${idx}`
+const defaultGetItemLabel = (item) => item.label
 
 export default function CarouselComponent({
   currentIndex: originalIndex,
@@ -66,7 +66,7 @@ export default function CarouselComponent({
             const isActive = currentIndex === idx
             return (
               <div
-                key={idx}
+                key={getItemKey(item, idx, 'item-')}
                 ref={slideRefs.current[idx]}
                 className={className(
                   'carousel__slide',
@@ -78,6 +78,7 @@ export default function CarouselComponent({
                   item={item}
                   items={items}
                   currentIndex={currentIndex}
+                  isActive={isActive}
                 />
               </div>
             )

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

@@ -6,6 +6,7 @@ export default function CarouselMessageSlide({
   item: slide,
   items,
   currentIndex,
+  isActive,
 }) {
   const { t } = useI18n()
 
@@ -19,7 +20,7 @@ export default function CarouselMessageSlide({
         total: items.length,
       })}
     >
-      <CardComponent {...slide} />
+      <CardComponent {...slide} isCarouselItem={true} hasFocus={isActive} />
     </div>
   )
 }

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

@@ -2,8 +2,8 @@ import MessageContainer from '../../message-container'
 import CarouselComponent from '../carousel-component'
 import CarouselMessageSlide from './components/slide'
 
-const getItemKey = item => item.title
-const getItemLabel = item => item.title
+const getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`
+const getItemLabel = (item) => item.title
 const CarouselMessage = ({ event }) => {
   const slides = event.payload.body.cards