@seamly/web-ui 20.7.0 → 20.8.0-alpha.1

package/build/dist/lib/style-guide.min.js.LICENSE.txt

@@ -0,0 +1,38 @@
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/build/dist/lib/utils.js

@@ -46,8 +46,7 @@ __webpack_require__.d(__webpack_exports__, {
   "eventTypes": () => (/* reexport */ web_ui_namespaceObject.eventTypes),
   "getUrlParams": () => (/* reexport */ web_ui_namespaceObject.getUrlParams),
   "getUrlSearchString": () => (/* reexport */ web_ui_namespaceObject.getUrlSearchString),
-  "randomId": () => (/* reexport */ web_ui_namespaceObject.randomId),
-  "seamlyActions": () => (/* reexport */ web_ui_namespaceObject.seamlyActions)
+  "randomId": () => (/* reexport */ web_ui_namespaceObject.randomId)
 });
 
 ;// CONCATENATED MODULE: external "@seamly/web-ui"

package/build/dist/lib/utils.min.js

@@ -1 +1 @@
-(()=>{"use strict";var e={d:(t,r)=>{for(var a in r)e.o(r,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:r[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{Engine:()=>r.Engine,ExternalApi:()=>r.ExternalApi,calculateVisibility:()=>r.calculateVisibility,className:()=>r.className,eventTypes:()=>r.eventTypes,getUrlParams:()=>r.getUrlParams,getUrlSearchString:()=>r.getUrlSearchString,randomId:()=>r.randomId,seamlyActions:()=>r.seamlyActions});const r=require("@seamly/web-ui");module.exports=t})();
+(()=>{"use strict";var e={d:(r,t)=>{for(var a in t)e.o(t,a)&&!e.o(r,a)&&Object.defineProperty(r,a,{enumerable:!0,get:t[a]})},o:(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},r={};e.r(r),e.d(r,{Engine:()=>t.Engine,ExternalApi:()=>t.ExternalApi,calculateVisibility:()=>t.calculateVisibility,className:()=>t.className,eventTypes:()=>t.eventTypes,getUrlParams:()=>t.getUrlParams,getUrlSearchString:()=>t.getUrlSearchString,randomId:()=>t.randomId});const t=require("@seamly/web-ui");module.exports=r})();

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@seamly/web-ui",
-  "version": "20.7.0",
+  "version": "20.8.0-alpha.1",
   "main": "build/dist/lib/index.js",
+  "types": "build/src/javascripts/index.d.ts",
   "module": "",
   "exports": {
     ".": "./build/dist/lib/index.js",
@@ -21,6 +22,7 @@
     "webpack/*"
   ],
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.5",
     "@ultraq/icu-message-formatter": "^0.12.0",
     "deep-keys": "^0.5.0",
     "focus-trap": "^6.7.1",
@@ -28,9 +30,7 @@
     "js-cookie": "^3.0.1",
     "minivents": "^2.2.0",
     "phoenix": "1.6.11",
-    "redux": "^4.1.1",
-    "redux-thunk": "^2.3.0",
-    "reselect": "^4.0.0",
+    "react-redux": "^8.0.2",
     "superagent": "^7.1.2",
     "xstream": "^11.14.0"
   },
@@ -42,14 +42,18 @@
     "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@babel/plugin-transform-runtime": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime-corejs3": "^7.18.3",
     "@seamly/doc-site": "^1.0",
     "@seamly/eslint-config": "^2.2.0",
     "@seamly/prettier-config": "^2.1.0",
     "@seamly/stylelint-config": "^2.0.0",
-    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/preact": "^2.0.1",
-    "babel-jest": "^27.3.1",
+    "@types/jest": "^27.1.7",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
     "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^10.2.4",
     "cypress": "^10.0.3",
@@ -58,22 +62,27 @@
     "debug": "^4.3.2",
     "eslint": "^8.17.0",
     "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-typescript": "^3.5.0",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.5.3",
     "file-loader": "^6.2.0",
     "glob": "^8.0.3",
     "husky": "^7.0.2",
+    "ignore-loader": "^0.1.2",
     "jest": "^27.5.1",
     "mini-css-extract-plugin": "^2.4.2",
     "postcss": "8",
-    "preact": "10.7.3",
+    "preact": "^10.10.6",
     "prettier": "^2.4.1",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "sneakpeek-cli": "^0.2.1",
     "start-server-and-test": "^1.14.0",
     "style-loader": "^3.3.0",
-    "stylelint": "^14.9.0",
+    "stylelint": "14.9.0",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.58.2",
     "webpack-bundle-analyzer": "^4.5.0",
@@ -82,7 +91,7 @@
     "webpack-merge": "^5.8.0"
   },
   "peerDependencies": {
-    "preact": "10.7.3"
+    "preact": "10.10.6"
   },
   "scripts": {
     "build:clean": "rimraf build; mkdir -p build",
@@ -105,6 +114,7 @@
     "check:webpack": "prettier --check \"webpack/**/*.{js,scss,html}\"",
     "check:prettier": "yarn run check:code && yarn run check:tests && yarn run check:public && yarn run check:webpack",
     "test": "jest",
+    "types:generate": "npx openapi-typescript schema.yaml --output src/javascripts/schema.ts",
     "test:coverage": "yarn run test --coverage",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",

package/src/icons/avatar_agent-32.svg

@@ -0,0 +1,7 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
+<path fill="#4A48C1" d="M10.1,14.9c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S11.2,14.9,10.1,14.9z M21.9,10.9c-1.1,0-2,0.9-2,2
+	s0.9,2,2,2s2-0.9,2-2S23,10.9,21.9,10.9z M21.4,18.2H10.8C11.8,24,20.3,24,21.4,18.2z M17.2,25.3h-2.4c-0.6,0-1.2,0.4-1.4,1
+	c-5.1-0.2-9.2-4.4-9.4-9.6c0.1,0,0.2,0.1,0.4,0.1h0.1c0.8,0,1.4-0.6,1.4-1.4v-4.7c0-0.8-0.6-1.4-1.4-1.4h0c-0.8,0-1.4,0.6-1.4,1.4
+	v2.7v2v1.1c0,5.9,4.7,10.6,10.5,10.8c0.2,0.5,0.7,0.8,1.2,0.8h2.4c0.8,0,1.4-0.6,1.4-1.4S18,25.3,17.2,25.3z"/>
+</svg>

package/src/icons/avatar_bot-32.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" x="0px" y="0px" viewBox="0 0 32 32"><defs/><path fill="#003A5D" d="M0,4.717C0,2.112,2.112,0,4.717,0h22.566C29.888,0,32,2.112,32,4.717v22.566C32,29.887,29.888,32,27.283,32 H4.717C2.113,32,0,29.887,0,27.283V4.717z"/><path fill="#FFF" d="M10.103,14.901c-1.107,0-2.004-0.897-2.004-2.004s0.897-2.005,2.004-2.005c1.107,0,2.005,0.897,2.005,2.005 C12.108,14.004,11.211,14.901,10.103,14.901z M16,14.901c1.107,0,2.005-0.897,2.005-2.004S17.108,10.892,16,10.892 c-1.108,0-2.005,0.897-2.005,2.005C13.995,14.004,14.892,14.901,16,14.901z M21.896,10.892c-1.106,0-2.004,0.897-2.004,2.005 c0,1.107,0.896,2.004,2.004,2.004c1.109,0,2.005-0.897,2.005-2.004C23.901,11.789,23.005,10.892,21.896,10.892z M21.408,18.207 H10.783C11.83,23.973,20.361,23.973,21.408,18.207z"/></svg>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
+<path fill="#4A48C1" d="M10,14.8c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S11.1,14.8,10,14.8z M15.9,14.8c1.1,0,2-0.9,2-2s-0.9-2-2-2
+	s-2,0.9-2,2S14.8,14.8,15.9,14.8z M21.8,10.8c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S22.9,10.8,21.8,10.8z M21.3,18.1H10.7
+	C11.7,23.9,20.2,23.9,21.3,18.1z"/>
+</svg>

package/src/javascripts/api/index.js

@@ -88,7 +88,7 @@ export class API {
    */
   constructor({ layoutMode, namespace, config = {}, context = {} }) {
     this.store = objectStore(
-      `${namespace}.connection${context.locale ? '.' + context.locale : ''}`,
+      `${namespace}.connection${context.locale ? `.${context.locale}` : ''}`,
       config.storageProvider || sessionStorageProvider,
     )
 

package/src/javascripts/{config.js → config.ts}

@@ -1,3 +1,5 @@
+import type { Config } from 'config.types'
+
 export const CSS_NAME = 'cvco'
 
 export const apiVersion = '2'
@@ -23,7 +25,7 @@ export const defaultTransitionTimeMs = 300
 // How long to wait before we decide the user isn't typing
 export const typingTimeout = 2000
 
-export const defaultConfig = {
+export const defaultConfig: Partial<Config> = {
   namespace: 'default',
   layoutMode: 'window', // "window", "inline" ("sidebar")
   messages: {

package/src/javascripts/config.types.ts

@@ -0,0 +1,95 @@
+import type { ChannelEvent } from 'domains/store/store.types'
+import { FunctionComponent } from 'preact'
+
+export type ApiConfig = {
+  key: string
+  domain: string
+  secure: boolean
+  sendEnvironment?: boolean
+  storageProvider?: unknown
+  externalId?: string
+}
+
+export type LayoutMode = 'inline' | 'window' | 'app' | null
+
+export type VisibilityOptions = 'open' | 'minimized' | 'hidden' | null
+
+export type ErrorCallbackMeta = {
+  namespace: string
+  api: ApiConfig
+  layoutMode: LayoutMode
+  conversationUrl: string
+}
+export type ErrorCallback = (error: Error, meta: ErrorCallbackMeta) => void
+
+export type Message = {
+  showName?: boolean
+  showAvatar?: boolean
+}
+
+export type Messages = {
+  agent?: Message
+  user?: Message
+  timeIndicator?: {
+    enabled: boolean
+    threshold: number
+  }
+  custom?: Record<string, unknown>
+}
+
+export type Context = {
+  channelName?: string
+  locale?: string
+  topic?: string
+  translationLocale?: string
+  variables?: Record<string, unknown>
+}
+
+export type AgentParticipant = {
+  name: string
+  avatar: string
+}
+export type UserParticipant = {
+  avatar: string
+}
+
+export type VisibilityCallbackOptions = {
+  hasConversation: boolean
+  hasResponded: boolean
+  previousVisibility: VisibilityOptions
+  requestedVisibility: VisibilityOptions
+  config: Config
+}
+
+export type VisibilityCallback = (
+  options: VisibilityCallbackOptions,
+) => VisibilityOptions
+
+export type Config = {
+  parentElement?: HTMLElement
+  namespace?: string
+  customComponents?: {
+    view?: FunctionComponent
+    message?: Messages
+  }
+  showDisclaimer?: boolean
+  hideOnNoUserResponse?: boolean
+  layoutMode?: LayoutMode
+  connectWhenInView?: boolean
+  visibilityCallback?: VisibilityCallback
+  errorCallback?: ErrorCallback
+  api: ApiConfig
+  appContainerClassNames?: string[] | ((config: Config) => string[])
+  zIndex?: number
+  showFaq?: boolean
+  context?: Context
+  messages?: Messages
+  defaults?: {
+    visible: VisibilityOptions
+  }
+  preChatEvents?: ChannelEvent[]
+  agentParticipant?: AgentParticipant
+  userParticipant?: UserParticipant
+  startChatIcon?: string
+  visible?: VisibilityOptions
+}

package/src/javascripts/domains/app/actions.ts

@@ -0,0 +1,83 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
+import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
+import { Config } from 'config.types'
+import { initializeConfig, resetConfig } from 'domains/config/actions'
+import { ThunkAPI } from 'domains/redux/redux.types'
+import type { RootState } from 'domains/store'
+import { initializeVisibility } from 'domains/visibility/actions'
+import { actionTypes } from 'ui/utils/seamly-utils'
+
+export const initializeApp = createAsyncThunk<
+  {
+    initialState: RootState['state']['initialState']
+    locale: string
+    config: Config
+  },
+  void,
+  ThunkAPI
+>('initializeApp', async (_, { extra: { api, config }, rejectWithValue }) => {
+  let locale = config?.context?.locale
+  try {
+    if (api.hasConversation()) {
+      const initialState = await api.getConversationIntitialState()
+
+      locale = initialState.translation?.locale || locale
+
+      return { initialState, locale, config }
+    } else {
+      if (config?.context?.topic) {
+        api.send('action', {
+          type: actionTypes.setTopic,
+          body: {
+            name: config.context.topic,
+            // Separate fallback message is not needed here. Only an attached service will use this, but none will
+            // be attached before the conversation has started (meaning the fallback message will never be shown).
+            fallbackMessage: config.context.topic,
+          },
+        })
+      }
+      if (config?.context?.translationLocale) {
+        locale = config.context.translationLocale
+        api.send('action', {
+          type: actionTypes.setTranslation,
+          body: { enabled: true, locale },
+        })
+      }
+
+      return { initialState: undefined, locale, config }
+    }
+  } catch (e) {
+    if (e instanceof SeamlySessionExpiredError) {
+      const err = new SeamlySessionExpiredError()
+
+      return rejectWithValue({
+        name: err.name,
+        message: err.message,
+        originalEvent: err.originalEvent,
+        originalError: err.originalError,
+        action: err.action,
+      })
+    }
+
+    const err = new SeamlyUnavailableError()
+    return rejectWithValue({
+      name: err.name,
+      message: err.message,
+      langKey: err.langKey,
+    })
+  }
+})
+
+export const resetApp = createAsyncThunk<unknown, void, ThunkAPI>(
+  'resetApp',
+  async (_, { dispatch, extra: { api } }) => {
+    await api.disconnect()
+    await api.clearStore()
+
+    dispatch(resetConfig())
+    await dispatch(initializeConfig())
+    await dispatch(initializeApp())
+    dispatch(initializeVisibility())
+  },
+)

package/src/javascripts/domains/app/app.types.ts

@@ -0,0 +1,3 @@
+export interface AppState {
+  userHasResponded: boolean
+}

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

@@ -1,6 +1,4 @@
-import { useSelector } from 'domains/redux'
-import * as Selectors from './selectors'
+import { selectUserHasResponded } from 'domains/app/selectors'
+import { useSelector } from 'react-redux'
 
-export function useUserHasResponded() {
-  return useSelector(Selectors.selectUserHasResponded)
-}
+export const useUserHasResponded = () => useSelector(selectUserHasResponded)

package/src/javascripts/domains/app/selectors.ts

@@ -0,0 +1,6 @@
+import { createSelector } from '@reduxjs/toolkit'
+
+export const selectUserHasResponded = createSelector(
+  ({ app }) => app,
+  ({ userHasResponded }) => userHasResponded,
+)

package/src/javascripts/domains/app/slice.ts

@@ -0,0 +1,30 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { initializeApp, resetApp } from 'domains/app/actions'
+import { AppState } from 'domains/app/app.types'
+
+const initialState: AppState = {
+  userHasResponded: false,
+}
+
+export const appSlice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    setHasResponded: (state, { payload }) => {
+      state.userHasResponded = payload
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(resetApp.pending, () => initialState)
+      .addCase(initializeApp.fulfilled, (state, { payload }) => {
+        if (payload.initialState && 'userResponded' in payload.initialState) {
+          state.userHasResponded = payload.initialState?.userResponded
+        }
+      })
+  },
+})
+
+export const { setHasResponded } = appSlice.actions
+
+export default appSlice.reducer

package/src/javascripts/domains/config/actions.ts

@@ -0,0 +1,45 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
+import { ThunkAPI } from 'domains/redux/redux.types'
+
+export const initializeConfig = createAsyncThunk<any, void, ThunkAPI>(
+  'initializeConfig',
+  async (_, { extra: { api, config }, rejectWithValue }) => {
+    try {
+      const {
+        features,
+        defaultLocale,
+        preChat,
+        agentParticipant,
+        userParticipant,
+        startChatIcon,
+      } = await api.getConfig()
+
+      const locale = config?.context?.locale || defaultLocale
+
+      return {
+        features,
+        defaultLocale,
+        preChat,
+        agentParticipant,
+        userParticipant,
+        startChatIcon,
+        locale,
+      }
+    } catch (e) {
+      const err = new SeamlyUnavailableError()
+      return rejectWithValue({
+        name: err.name,
+        langKey: err.langKey,
+        message: err.message,
+      })
+    }
+  },
+)
+
+export const resetConfig = createAsyncThunk<unknown, void, ThunkAPI>(
+  'resetConfig',
+  async (_, { extra: { config } }) => {
+    return config
+  },
+)

package/src/javascripts/domains/config/hooks.ts

@@ -0,0 +1,19 @@
+import { selectConfig } from 'domains/config/selectors'
+import { useSelector } from 'react-redux'
+
+export const useConfig = () => useSelector(selectConfig)
+
+export function useParticipants() {
+  const { agentParticipant, userParticipant } = useConfig()
+
+  return {
+    agent: agentParticipant,
+    user: userParticipant,
+  }
+}
+
+export function useStartChatIcon() {
+  const { startChatIcon } = useConfig()
+
+  return startChatIcon
+}

package/src/javascripts/domains/config/selectors.ts

@@ -0,0 +1,24 @@
+import { createSelector } from '@reduxjs/toolkit'
+import { Config } from 'config.types'
+import { visibilityStates } from 'domains/visibility/constants'
+
+export const selectConfig = createSelector(
+  ({ config }): Config => config,
+  (config) => {
+    let newConfig = {
+      visible:
+        config?.layoutMode === 'inline'
+          ? visibilityStates.open
+          : visibilityStates.minimized,
+      appContainerClassNames: config.appContainerClassNames || [],
+      ...config,
+    }
+    if (typeof newConfig.appContainerClassNames === 'function') {
+      newConfig = {
+        ...newConfig,
+        appContainerClassNames: newConfig.appContainerClassNames(newConfig),
+      }
+    }
+    return newConfig
+  },
+)

package/src/javascripts/domains/config/slice.ts

@@ -0,0 +1,111 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { defaultConfig } from 'config'
+import { Config } from 'config.types'
+import { initializeConfig, resetConfig } from 'domains/config/actions'
+import { pick } from 'ui/utils/general-utils'
+
+export const initialConfigState: Config = {
+  ...defaultConfig,
+  api: {
+    domain: '',
+    key: '',
+    secure: true,
+  },
+  hideOnNoUserResponse: false,
+  connectWhenInView: true,
+  showDisclaimer: false,
+  showFaq: false,
+  customComponents: {},
+  defaults: {
+    visible: null,
+  },
+  preChatEvents: [],
+}
+
+const configKeys: (keyof Config)[] = [
+  'hideOnNoUserResponse',
+  'connectWhenInView',
+  'showDisclaimer',
+  'showFaq',
+  'namespace',
+  'customComponents',
+  'defaults',
+  'layoutMode',
+  'api',
+  'zIndex',
+  'context',
+  'appContainerClassNames',
+  'messages',
+  'visible',
+  'visibilityCallback',
+  'errorCallback',
+  'agentParticipant',
+  'userParticipant',
+  'startChatIcon',
+]
+
+const updateState = (state, config: Config): Config => {
+  const { messages, ...partialConfig } = pick(config, configKeys)
+  let newState = state
+  if (Object.keys(partialConfig).length > 0) {
+    newState = {
+      ...newState,
+      ...partialConfig,
+    }
+  }
+  if (messages) {
+    newState = {
+      ...newState,
+      messages: {
+        ...newState.messages,
+        ...messages,
+      },
+    }
+  }
+  return newState
+}
+
+export const configSlice = createSlice({
+  name: 'config',
+  initialState: initialConfigState,
+  reducers: {
+    setConfig: (state, { payload }: PayloadAction<Config>) =>
+      updateState(state, payload),
+    updateConfig: (state, { payload }: PayloadAction<Config>) =>
+      updateState(state, payload),
+    setPreChatEvents: (state, { payload: { events } }) => {
+      state.preChatEvents = events
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(resetConfig.fulfilled, (config) => config)
+      .addCase(
+        initializeConfig.fulfilled,
+        (
+          state,
+          {
+            payload: {
+              preChat,
+              agentParticipant,
+              userParticipant,
+              startChatIcon,
+            },
+          },
+        ) => {
+          state.preChatEvents = preChat.map((payload) => ({
+            type: 'message',
+            payload,
+          }))
+
+          state.agentParticipant = agentParticipant
+          state.userParticipant = userParticipant
+          state.startChatIcon = startChatIcon
+        },
+      )
+  },
+})
+
+export const { setConfig, updateConfig, setPreChatEvents } = configSlice.actions
+
+export default configSlice.reducer

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

@@ -1,15 +1,15 @@
-import { createDomain } from 'lib/redux-helpers'
-import { Selectors as ConfigSelectors } from 'domains/config'
-
-const { createAction } = createDomain('errors')
+import { createAction } from '@reduxjs/toolkit'
+import { selectConfig } from 'domains/config/selectors'
 
 export const catchError = createAction('catch-error', (error) => ({ error }))
 
-export function createMiddleware({ api: seamlyApi }) {
+export function createErrorsMiddleware({ api: seamlyApi }) {
   return ({ getState }) => {
     const handleError = (action) => {
-      const { errorCallback, namespace, api, layoutMode } =
-        ConfigSelectors.selectConfig(getState())
+      const { errorCallback, namespace, api, layoutMode } = selectConfig(
+        getState(),
+      )
+
       errorCallback?.(action.error, {
         namespace,
         api,
@@ -18,10 +18,14 @@ export function createMiddleware({ api: seamlyApi }) {
         action: action.type ? action : undefined,
       })
     }
+
     return (next) => (action) => {
       try {
-        if (action.error) {
-          handleError(action)
+        if (action.payload?.originalEvent?.payload) {
+          handleError({
+            error: action.payload,
+            type: action.payload?.originalEvent?.payload?.type,
+          })
         }
         return next(action)
       } catch (error) {