@seamly/web-ui 19.0.0-beta.1 → 19.1.0

package/src/javascripts/domains/visibility/hooks.js

@@ -0,0 +1,24 @@
+import { useCallback } from 'preact/hooks'
+import { useConfig } from '../config'
+import { useSelector, useStoreDispatch } from '../redux'
+import * as Actions from './actions'
+import * as Selectors from './selectors'
+import { visibilityStates } from './constants'
+
+export const useVisibility = () => {
+  const dispatch = useStoreDispatch()
+  const visible = useSelector(Selectors.selectVisibility)
+  const isVisible = visible ? visible !== visibilityStates.hidden : false
+  const { layoutMode } = useConfig()
+  const isOpen =
+    visible && layoutMode
+      ? visible === visibilityStates.open ||
+        (layoutMode === 'inline' && visible !== visibilityStates.hidden)
+      : false
+  const setVisibility = useCallback(
+    (visibility) => dispatch(Actions.setVisibility(visibility)),
+    [dispatch],
+  )
+
+  return { isVisible, isOpen, visible, setVisibility }
+}

package/src/javascripts/domains/visibility/index.js

@@ -0,0 +1,8 @@
+import * as Actions from './actions'
+import * as Selectors from './selectors'
+
+export * from './hooks'
+export { visibilityStates } from './constants'
+export { default as Reducer } from './reducer'
+export { calculateVisibility } from './utils'
+export { Actions, Selectors }

package/src/javascripts/domains/visibility/reducer.js

@@ -0,0 +1,19 @@
+import { createReducer } from './utils'
+import * as Actions from './actions'
+import { visibilityStates } from './constants'
+
+const initialState = {
+  visibility: visibilityStates.initialize,
+}
+
+export default createReducer(
+  {
+    [Actions.setFromStorage]: (state, { visibility }) => ({
+      ...state,
+      visibility,
+    }),
+    [Actions.setVisibility.fulfilled]: (state, { payload: visibility }) =>
+      visibility ? { ...state, visibility } : state,
+  },
+  initialState,
+)

package/src/javascripts/domains/visibility/selectors.js

@@ -0,0 +1,9 @@
+import { createSelector } from 'reselect'
+import { selectState } from './utils'
+
+export const selectVisibility = createSelector(
+  selectState,
+  (state) => state.visibility,
+)
+
+export { selectState }

package/src/javascripts/domains/visibility/utils.js

@@ -0,0 +1,42 @@
+import { createDomain } from '../../lib/redux-helpers'
+import { visibilityStates } from './constants'
+
+export const {
+  createAction,
+  createActions,
+  createThunk,
+  createReducer,
+  selectState,
+} = createDomain('visibility')
+
+export const calculateVisibility = ({
+  hasResponded,
+  previousVisibility,
+  requestedVisibility,
+  config,
+}) => {
+  const { defaults, layoutMode, hideOnNoUserResponse } = config
+
+  const { visible: defaultVisibility } = defaults || {}
+
+  // Requesting open should override the responded check.
+  if (
+    layoutMode === 'window' &&
+    hideOnNoUserResponse &&
+    requestedVisibility !== visibilityStates.open
+  ) {
+    return hasResponded
+      ? requestedVisibility || previousVisibility || visibilityStates.open
+      : visibilityStates.hidden
+  }
+
+  const baseVisibility =
+    layoutMode === 'inline' ? visibilityStates.open : visibilityStates.minimized
+
+  return (
+    requestedVisibility ||
+    previousVisibility ||
+    defaultVisibility ||
+    baseVisibility
+  )
+}

package/src/javascripts/index.js

@@ -12,7 +12,7 @@ export { default as AgentInfo } from './ui/components/layout/agent-info'
 export { default as AppFrame } from './ui/components/layout/app-frame'
 
 // Used by: Client
-export { calculateVisibility } from './ui/utils/seamly-utils'
+export { calculateVisibility } from './domains/visibility'
 
 // Used by: Client
 export { default as ChatFrame } from './ui/components/layout/chat-frame'
@@ -114,7 +114,7 @@ export { useSeamlyMessageContainerClassNames } from './ui/hooks/seamly-hooks'
 export { useSeamlyOptions } from './ui/hooks/seamly-hooks'
 
 // Used by: Client
-export { useSeamlyVisibility } from './ui/hooks/seamly-hooks'
+export { useVisibility as useSeamlyVisibility } from './domains/visibility'
 
 // Used by: Client
 export {
@@ -135,7 +135,7 @@ export { default as View } from './ui/components/layout/view'
 
 // Used by: Client
 // Used by: StyleGuide
-export { visibilityStates } from './ui/utils/seamly-utils'
+export { visibilityStates } from './domains/visibility'
 
 // Used by: StyleGuide
 export { API } from './api'
@@ -143,14 +143,5 @@ export { API } from './api'
 // Used by: StyleGuide
 export { default as SeamlyGeneralError } from './api/errors/seamly-general-error'
 
-// Used by: StyleGuide
-export { default as SeamlyConfigurationError } from './api/errors/seamly-configuration-error'
-
-// Used by: StyleGuide
-export { default as SeamlySessionExpiredError } from './api/errors/seamly-session-expired-error'
-
 // Used by: StyleGuide
 export { default as SeamlyOfflineError } from './api/errors/seamly-offline-error'
-
-// Used by: StyleGuide
-export { default as SeamlyUnauthorizedError } from './api/errors/seamly-unauthorized-error'

package/src/javascripts/lib/engine/index.js

@@ -51,6 +51,7 @@ export default class Engine {
 
     const store = createStore({
       api: this.api,
+      eventBus: this.eventBus,
     })
 
     await store.dispatch(AppActions.initialize(renderConfig))

package/src/javascripts/lib/redux-helpers/index.js

@@ -1,3 +1,5 @@
+import { randomId } from '../id'
+
 export const SLICE_DELIMITER = '/'
 export const DOMAIN_DELIMITER = '//'
 
@@ -10,7 +12,8 @@ export function createAction(
   identityReducer = (payload) => ({ payload }),
 ) {
   const action = (...params) => ({ type, ...identityReducer(...params) })
-  action.toString = () => type.toString()
+  action.toString = () => String(type)
+  action.match = (obj) => obj?.type === String(type)
   return action
 }
 
@@ -32,22 +35,51 @@ export function createActions(baseType, ...args) {
   return handlers.map((handler) => create(...handler))
 }
 
-export function createThunk(type, thunkCreator) {
-  const fn = (...args) => {
-    const thunk = thunkCreator(...args)
-    thunk.type = type
-    return thunk
+export function createThunk(type, payloadCreator) {
+  const [pending, fulfilled, rejected] = createActions(type, {
+    pending: (arg, requestId) => ({
+      meta: { arg, requestId, status: 'pending' },
+    }),
+    fulfilled: (arg, payload, requestId) => ({
+      payload,
+      meta: { arg, requestId, status: 'fulfilled' },
+    }),
+    rejected: (arg, error, requestId) => ({
+      error,
+      meta: { arg, requestId, status: 'rejected', error: String(error) },
+    }),
+  })
+  const thunkCreator = (arg) => (dispatch, getState, extra) => {
+    const requestId = randomId()
+    const promise = (async () => {
+      let finalAction
+      try {
+        dispatch(pending(arg, requestId))
+        const prms = payloadCreator(arg, { dispatch, getState, extra })
+        const result = await prms
+        finalAction = fulfilled(arg, result, requestId)
+      } catch (error) {
+        finalAction = rejected(arg, error, requestId)
+      }
+      dispatch(finalAction)
+      return finalAction
+    })()
+    return Object.assign(promise, {
+      type,
+      arg,
+      requestId,
+    })
   }
-  fn.toString = () => type
-  return fn
+  return Object.assign(thunkCreator, {
+    type,
+    pending,
+    fulfilled,
+    rejected,
+  })
 }
 
 export function createReducer(domain, handlers = {}, defaultState) {
-  const reducer = (state, action) => {
-    if (state === undefined) {
-      // eslint-disable-next-line no-param-reassign
-      state = defaultState
-    }
+  const reducer = (state = defaultState, action) => {
     const typeReducer = handlers?.[action?.type]
     return typeReducer ? typeReducer(state, action) : state
   }

package/src/javascripts/lib/store/providers/session-storage.js

@@ -3,7 +3,12 @@ export default function store(key) {
 
   return {
     get() {
-      return JSON.parse(sessionStorage.getItem(KEY))
+      const candidates = [KEY, KEY.split('.').slice(0, -1).join('.')]
+      let val
+      do {
+        val = sessionStorage.getItem(candidates[0])
+      } while (candidates.shift() && !val)
+      return JSON.parse(val)
     },
 
     set(value) {

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

@@ -82,7 +82,7 @@ const StyleGuideApp = ({
         overlay.addEventListener('click', () => {
           setStaticState((s) => ({
             ...s,
-            visible: 'minimized',
+            visibility: { ...s.visibility, visible: 'minimized' },
           }))
         })
       }

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

@@ -6,6 +6,7 @@ import {
   StoreProvider,
   createReduxStore,
 } from '@seamly/web-ui'
+
 import stateReducer from '../../domains/store/state-reducer'
 import { Reducer as formReducer } from '../../domains/forms'
 import { Reducer as translationsReducer } from '../../domains/translations'
@@ -19,6 +20,7 @@ import {
   Reducer as configReducer,
   Actions as ConfigActions,
 } from '../../domains/config'
+import { Reducer as visibilityReducer } from '../../domains/visibility'
 
 const bareApi = {
   send: () => {},
@@ -37,6 +39,7 @@ const SeamlyTestCore = ({ state, translations, children }) => {
       translations: translationsSlice,
       interrupt: interruptSlice,
       config: configSlice,
+      visibility: visibilitySlice,
       ...restState
     } = state || {}
     const newStore = createReduxStore({
@@ -48,15 +51,17 @@ const SeamlyTestCore = ({ state, translations, children }) => {
         [String(translationsReducer)]: translationsReducer,
         [String(i18nReducer)]: i18nReducer,
         [String(interruptReducer)]: interruptReducer,
+        [String(visibilityReducer)]: visibilityReducer,
       },
       initialState: {
         state: restState,
         [String(translationsReducer)]: translationsSlice,
         [String(interruptReducer)]: interruptSlice,
+        [String(visibilityReducer)]: visibilitySlice,
       },
     })
     newStore.dispatch(ConfigActions.initialize(configSlice || {}))
-    newStore.dispatch(I18nActions.setLocaleResolve('en-GB', translations))
+    newStore.dispatch(I18nActions.setLocale.fulfilled('en-GB', translations))
     return newStore
   }, [state, translations])
 

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

@@ -3,7 +3,6 @@ import {
   randomId,
   SeamlyOfflineError,
   SeamlyGeneralError,
-  SeamlyConfigurationError,
 } from '@seamly/web-ui'
 import { addTranslationData } from './state-helpers'
 
@@ -21,7 +20,9 @@ const baseState = {
   isLoading: false,
   idleDetachCountdown: { hasCountdown: false, isActive: false },
   resumeConversationPrompt: false,
-  visible: visibilityStates.open,
+  visibility: {
+    visibility: visibilityStates.open,
+  },
   serviceInfo: {
     activeServiceSessionId: '',
   },
@@ -953,13 +954,37 @@ const standardState = {
     headingText: 'System messages',
     description: '',
     ...baseState,
+    config: {
+      overrideMessages: {
+        timeIndicator: {
+          enabled: true,
+          threshold: 3600000,
+        },
+      },
+    },
     participantInfo,
     events: [
+      {
+        type: 'message',
+        payload: {
+          ...shortTextMessage.payload,
+          occurredAt: (Date.now() - 86400000 * 5) * 1000,
+          id: randomId(),
+          body: {
+            text: 'Long ago when a dialog started',
+            type: 'text',
+            variables: {},
+          },
+        },
+      },
       participantMessage,
       participantMessageDefaultIcon,
       newTopicDivider,
-      infoMessage,
       transcriptInfoMessage,
+      ...[newTranslationDividerStart, newTranslationDividerStop].map(
+        addTranslationData,
+      ),
+      infoMessage,
     ],
   },
   choicePromptMessages: {
@@ -1142,34 +1167,24 @@ const standardState = {
       },
     ],
   },
-  disconnectedInterrupt: {
-    // Important: This cannot pick up the language files so the text is hard set here.
-    category: categoryKeys.errors,
-    headingText: 'Disconnected interrupt',
-    description: '',
-    ...baseState,
-    interrupt: {
-      error: new SeamlyOfflineError(),
-    },
-  },
-  generalErrorInterrupt: {
+  errorWithAction: {
     // Important: This cannot pick up the language files so the text is hard set here.
     category: categoryKeys.errors,
-    headingText: 'General error interrupt',
+    headingText: 'Error with a user action',
     description: '',
     ...baseState,
     interrupt: {
       error: new SeamlyGeneralError(),
     },
   },
-  configErrorInterrupt: {
+  errorWithoutAction: {
     // Important: This cannot pick up the language files so the text is hard set here.
     category: categoryKeys.errors,
-    headingText: 'Config error interrupt',
+    headingText: 'Error without a user action',
     description: '',
     ...baseState,
     interrupt: {
-      error: new SeamlyConfigurationError(),
+      error: new SeamlyOfflineError(),
     },
   },
   privacyDisclaimer: {
@@ -1694,6 +1709,7 @@ const standardState = {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
     },
     events: [
+      newTranslationDividerStart,
       infoMessage,
       shortTextMessage,
       {
@@ -1722,6 +1738,8 @@ const standardState = {
       textMesageWithBullets,
       choicePromptMessage,
       ctaMessage,
+      newTranslationDividerStop,
+      newTranslationDividerStart,
     ].map(addTranslationData),
     translations: {
       ...translationsSlice,
@@ -1786,7 +1804,10 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
           window: {
             ...baseState,
             config: { ...baseState.config, layoutMode: 'window' },
-            visible: visibilityStates.minimized,
+            visibility: {
+              ...baseState.visibility,
+              visibility: visibilityStates.minimized,
+            },
           },
         },
         minimizedStarted: {
@@ -1796,7 +1817,10 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
           window: {
             ...baseState,
             config: { ...baseState.config, layoutMode: 'window' },
-            visible: visibilityStates.minimized,
+            visibility: {
+              ...baseState.visibility,
+              visibility: visibilityStates.minimized,
+            },
             participantInfo,
             headerTitles,
           },
@@ -1808,7 +1832,10 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
           window: {
             ...baseState,
             config: { ...baseState.config, layoutMode: 'window' },
-            visible: visibilityStates.minimized,
+            visibility: {
+              ...baseState.visibility,
+              visibility: visibilityStates.minimized,
+            },
             participantInfo,
             headerTitles,
             unreadEvents: 12,

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

@@ -19,9 +19,11 @@ class SeamlyStyleGuideInstance extends Engine {
       config: this.config.api,
     })
     api.URLS = {
-      translations: '/client/wilson/translations/{version}/{locale}.json',
+      translations: `/client/${this.config.api.key}/translations/{version}/{locale}.json`,
     }
-    const translations = await api.getTranslations('en-GB')
+    const translations = await api.getTranslations(
+      this.config.context.locale || 'en-GB',
+    )
 
     const renderConfig = {
       ...this.config,

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

@@ -3,7 +3,6 @@ import { className } from '../../../lib/css'
 import { useI18n } from '../../../domains/i18n'
 import {
   useSeamlyIsLoading,
-  useSeamlyVisibility,
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from '../../hooks/seamly-hooks'
@@ -12,13 +11,14 @@ import Event from './event/event'
 import Loader from './loader'
 import ComponentFilter from './component-filter'
 import PrivacyDisclaimer from '../layout/privacy-disclaimer'
+import { useVisibility } from '../../../domains/visibility'
 
 const Conversation = () => {
   const { t } = useI18n()
   const appBodyContainer = useRef(null)
   const events = useEvents()
   const isLoading = useSeamlyIsLoading()
-  const { isOpen } = useSeamlyVisibility()
+  const { isOpen } = useVisibility()
   const skiplinkTargetId = useSkiplink()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
 

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

@@ -1,4 +1,3 @@
-import { useMemo } from 'preact/hooks'
 import Mustache from 'mustache'
 
 Mustache.escape = function (escapeText) {
@@ -11,7 +10,7 @@ const parseLinkVariable = (variable) => {
   }>${variable.name}</a>`
 }
 
-export function parseRichtText(text, variables = {}) {
+export function parseRichText(text, variables = {}) {
   const view = {}
   Object.entries(variables).forEach(([key, variable]) => {
     switch (variable.type) {
@@ -34,9 +33,3 @@ export function parseRichtText(text, variables = {}) {
 
   return output
 }
-
-const useTextRendering = ({ text, variables = {} }) => {
-  return useMemo(() => parseRichtText(text, variables), [text, variables])
-}
-
-export default useTextRendering

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

@@ -1,29 +1,35 @@
+import { useMemo } from 'preact/hooks'
 import parseBody from '../../../../lib/parse-body'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import useTextRendering from './hooks/use-text-rendering'
+import { parseRichText } from './hooks/use-text-rendering'
 import MessageContainer from '../message-container'
 import { useTranslatedEventData } from '../../../../domains/translations'
 
 const Text = ({ event, ...props }) => {
-  const { payload } = event
-
   const [body] = useTranslatedEventData(event)
-  const eventClick = useEventLinkClickHandler(payload.id)
-  const eventBody = useTextRendering({
-    text: parseBody(body.text),
-    variables: body.variables,
-  })
+  const eventClick = useEventLinkClickHandler(event.payload.id)
+
+  const containerProps = useMemo(() => {
+    if (!event.payload.fromClient) {
+      return {
+        bodyProps: {
+          dangerouslySetInnerHTML: {
+            __html: parseRichText(parseBody(body.text), body.variables),
+          },
+        },
+      }
+    }
+    return {
+      children: <p>{body.text}</p>,
+    }
+  }, [body, event])
   return (
     <MessageContainer
       type="text"
       event={event}
       onClick={eventClick}
       {...props}
-      bodyProps={{
-        dangerouslySetInnerHTML: {
-          __html: eventBody,
-        },
-      }}
+      {...containerProps}
     />
   )
 }

package/src/javascripts/ui/components/core/seamly-core.js

@@ -1,3 +1,4 @@
+import { useErrorBoundary } from 'preact/hooks'
 import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
 import SeamlyReadState from './seamly-read-state'
 import SeamlyNewNotifications from './seamly-new-notifications'
@@ -9,8 +10,10 @@ import SeamlyEventSubscriber from './seamly-event-subscriber'
 import SeamlyFileUpload from './seamly-file-upload'
 import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
 import { StoreProvider } from '../../../domains/redux'
+import { catchError } from '../../../domains/errors'
 
 const SeamlyCore = ({ store, children, config, eventBus, api }) => {
+  useErrorBoundary((error) => store.dispatch(catchError(error)))
   return (
     <StoreProvider store={store}>
       <SeamlyEventBusContext.Provider value={eventBus}>

package/src/javascripts/ui/components/core/seamly-event-subscriber.js

@@ -179,15 +179,15 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
               switch (payload.type) {
                 case 'find_conversation_erred':
                   dispatch(
-                    InterruptActions.set(new SeamlySessionExpiredError()),
+                    InterruptActions.set(new SeamlySessionExpiredError(event)),
                   )
                   break
                 case 'seamly_offline':
-                  dispatch(InterruptActions.set(new SeamlyOfflineError()))
+                  dispatch(InterruptActions.set(new SeamlyOfflineError(event)))
                   dispatch({ type: CLEAR_EVENTS })
                   break
                 default:
-                  dispatch(InterruptActions.set(new SeamlyGeneralError()))
+                  dispatch(InterruptActions.set(new SeamlyGeneralError(event)))
                   break
               }
               break

package/src/javascripts/ui/components/core/seamly-initializer.js

@@ -1,22 +1,18 @@
 import { useEffect, useRef } from 'preact/hooks'
-import { visibilityStates } from '../../utils/seamly-utils'
-import { useSeamlyOptions, useSeamlyVisibility } from '../../hooks/seamly-hooks'
+import { useSeamlyOptions } from '../../hooks/seamly-hooks'
 import { useConfig } from '../../../domains/config'
 
 const SeamlyInitializer = () => {
   const { initUserSelectedOptions } = useSeamlyOptions()
   const seamlyInitialized = useRef(false)
-  const { setVisibility } = useSeamlyVisibility()
   const config = useConfig()
 
   useEffect(() => {
     if (config.api && !seamlyInitialized.current) {
       seamlyInitialized.current = true
       initUserSelectedOptions()
-
-      setVisibility(visibilityStates.initialize)
     }
-  }, [initUserSelectedOptions, config, setVisibility])
+  }, [initUserSelectedOptions, config])
 
   return null
 }

package/src/javascripts/ui/components/core/seamly-instance-functions-loader.js

@@ -1,18 +1,17 @@
 import { useContext, useEffect, useRef } from 'preact/hooks'
 import {
   useSeamlyCommands,
-  useSeamlyVisibility,
   useSeamlyUnreadCount,
   useSeamlyLayoutMode,
   useSeamlyConversationUrl,
   useSeamlyActivityEventHandler,
   useSeamlyApiContext,
 } from '../../hooks/seamly-hooks'
-import { visibilityStates } from '../../utils/seamly-utils'
 import { SeamlyEventBusContext } from './seamly-api-context'
 import { useTranslations } from '../../../domains/translations'
 import { useInterrupt } from '../../../domains/interrupt'
 import { useConfig } from '../../../domains/config'
+import { visibilityStates, useVisibility } from '../../../domains/visibility'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {
   const eventBus = useContext(SeamlyEventBusContext)
@@ -34,7 +33,7 @@ function useSeamlyInstanceFunction(functionName, fn, deps = []) {
 const SeamlyInstanceFunctionsLoader = () => {
   const config = useConfig()
   const { sendMessage, sendContext, sendAction } = useSeamlyCommands()
-  const { setVisibility, visible } = useSeamlyVisibility()
+  const { setVisibility, visible } = useVisibility()
   const currentVisibility = useRef(visible)
   const eventBus = useContext(SeamlyEventBusContext)
   const api = useSeamlyApiContext()