@seamly/web-ui 22.0.0-beta.1 → 22.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "22.0.0-beta.1",
+  "version": "22.0.1",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",
@@ -22,29 +22,29 @@
     "webpack/*"
   ],
   "dependencies": {
-    "@reduxjs/toolkit": "^1.9.3",
+    "@reduxjs/toolkit": "^1.9.5",
     "@ultraq/icu-message-formatter": "^0.12.0",
-    "core-js": "^3.30.0",
+    "core-js": "^3.30.2",
     "deep-keys": "^0.5.0",
-    "focus-trap": "^7.4.0",
+    "focus-trap": "^7.4.1",
     "include-media": "^2.0.0",
-    "js-cookie": "^3.0.1",
+    "js-cookie": "^3.0.5",
     "minivents": "^2.2.1",
     "phoenix": "^1.7.2",
     "react-redux": "^8.0.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
+    "@babel/core": "^7.21.8",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-classes": "^7.21.0",
-    "@babel/plugin-transform-react-jsx": "^7.21.0",
+    "@babel/plugin-transform-react-jsx": "^7.21.5",
     "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.4",
-    "@babel/runtime-corejs3": "^7.21.0",
-    "@playwright/test": "^1.32.2",
+    "@babel/preset-typescript": "^7.21.5",
+    "@babel/runtime-corejs3": "^7.21.5",
+    "@playwright/test": "^1.33.0",
     "@seamly/doc-site": "^2.0.0",
     "@seamly/eslint-config": "^2.3.0",
     "@seamly/prettier-config": "^2.2.0",
@@ -53,17 +53,17 @@
     "@testing-library/preact": "^3.2.3",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/core-js": "^2.5.5",
-    "@types/jest": "^29.5.0",
-    "@types/phoenix": "^1.5.5",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
+    "@types/jest": "^29.5.1",
+    "@types/phoenix": "^1.5.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "copy-webpack-plugin": "^11.0.0",
     "debug": "^4.3.4",
-    "eslint": "^8.37.0",
+    "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^3.5.5",
@@ -75,7 +75,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "glob": "^9.3.4",
+    "glob": "^10.2.4",
     "husky": "^8.0.3",
     "ignore-loader": "^0.1.2",
     "isomorphic-unfetch": "^4.0.2",
@@ -85,24 +85,27 @@
     "mini-css-extract-plugin": "^2.7.5",
     "nyc": "^15.1.0",
     "playwright-test-coverage": "^1.2.12",
-    "postcss": "^8.4.21",
-    "preact": "^10.13.2",
-    "preact-render-to-string": "^6.0.2",
-    "prettier": "^2.8.7",
+    "postcss": "^8.4.23",
+    "preact": "^10.14.0",
+    "preact-render-to-string": "^6.0.3",
+    "prettier": "^2.8.8",
     "raw-loader": "^4.0.2",
-    "rimraf": "^4.4.1",
+    "rimraf": "^5.0.0",
     "start-server-and-test": "^2.0.0",
     "style-loader": "^3.3.2",
-    "stylelint": "^15.4.0",
+    "stylelint": "^15.6.1",
     "ts-loader": "^9.4.2",
-    "typescript": "^5.0.3",
+    "typescript": "^5.0.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.78.0",
+    "webpack": "^5.82.1",
     "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.2",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
     "webpack-merge": "^5.8.0"
   },
+  "resolutions": {
+    "string-width": "^4.2.3"
+  },
   "peerDependencies": {
     "preact": "^10.13.2"
   },

package/src/javascripts/api/conversation-connector.ts

@@ -147,10 +147,12 @@ export default class ConversationConnector {
   }
 
   disconnect() {
-    this.channel?.leave()
-    this.socket?.remove(this.channel)
-    this.socket?.disconnect()
-    this.#connectionListeners = []
+    this.channel?.leave().receive('ok', () => {
+      log('[CHANNEL][LEAVE] OK')
+      this.socket?.remove(this.channel)
+      this.socket?.disconnect()
+      this.#connectionListeners = []
+    })
   }
 
   #listenTo(...types: string[]) {

package/src/javascripts/domains/forms/provider.tsx

@@ -88,7 +88,7 @@ export default function FormProvider({
     (e) => {
       e.preventDefault()
       // If the submitter is set to being aria-disabled, block the submit action
-      const ariaDisabled = e.submitter?.ariaDisabled === 'true'
+      const ariaDisabled = e.submitter.getAttribute('aria-disabled') === 'true'
       setIsSubmitted(!ariaDisabled)
       if (!ariaDisabled && validationIsValid) {
         dispatch(setHasResponded(true))

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

@@ -41,6 +41,8 @@ export const mergeHistory = (
 ) => {
   const newStateEvents = stateEvents.filter(
     (stateEvent) =>
+      stateEvent.type === 'message' &&
+      !stateEvent.payload.optimisticallyInjected &&
       // Deduplicate the event streams, giving events in historyEvents
       // precedence so the server is able to push changes to events.
       !historyEvents.some(
@@ -638,6 +640,9 @@ export const storeSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(resetApp.pending, () => initialStoreState)
+      .addCase(initializeApp.pending, (state) => {
+        state.isLoading = true
+      })
       .addCase(initializeConfig.fulfilled, (state, { payload }) => {
         state.headerTitles.subTitle = payload.agentParticipant?.name
 
@@ -647,6 +652,7 @@ export const storeSlice = createSlice({
       })
       .addCase(initializeApp.fulfilled, (state, { payload }) => {
         if (!payload.initialState) return
+        state.isLoading = false
         state.initialState = payload.initialState
       })
       .addMatcher(

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

@@ -48,7 +48,10 @@ export type MessageUpload = components['schemas']['MessageMessage'] & {
 
 export interface MessageEvent {
   type: 'message'
-  payload: MessageMessage & DefaultEventProps
+  payload: MessageMessage &
+    DefaultEventProps & {
+      optimisticallyInjected?: boolean
+    }
 }
 
 export type MessageParticipant = components['schemas']['MessageParticipant'] & {
@@ -181,6 +184,8 @@ export interface StoreState {
       webNotifications: {
         enabled: boolean
       }
+      cobrowsing?: { enabled: boolean }
+      sendTranscript?: { enabled: boolean }
     }
     panelActive: boolean
     optionActive: string

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

@@ -13,6 +13,7 @@ const baseState = {
     showFaq: false,
     showDisclaimer: false,
     showSuggestions: true,
+    preChat: true,
   },
   initialState: {},
   unreadEvents: 0,
@@ -2258,6 +2259,49 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => {
               headerTitles,
             },
           },
+          minimizedWindowPrechatDelayed: {
+            category: categoryKeys.minimizedWindow,
+            headingText: 'Minimized with delayed pre-chat messages',
+            description: '',
+            window: {
+              ...baseState,
+              config: {
+                ...baseState.config,
+                layoutMode: 'window',
+                preChatEvents: [splashMessage],
+                preChat: {
+                  enterDelay: 1000,
+                  exitAfter: 3000,
+                },
+              },
+              visibility: {
+                ...baseState.visibility,
+                visibility: visibilityStates.minimized,
+              },
+              participantInfo,
+              headerTitles,
+            },
+          },
+          minimizedWindowPrechatDisabled: {
+            category: categoryKeys.minimizedWindow,
+            headingText: 'Minimized with disabled pre-chat messages',
+            description: '',
+            window: {
+              ...baseState,
+              config: {
+                ...baseState.config,
+                layoutMode: 'window',
+                preChatEvents: [splashMessage],
+                preChat: false,
+              },
+              visibility: {
+                ...baseState.visibility,
+                visibility: visibilityStates.minimized,
+              },
+              participantInfo,
+              headerTitles,
+            },
+          },
         }
       : {}),
     ...inlineInterface,

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

@@ -5,6 +5,7 @@ import {
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
 import { useEvents } from 'ui/hooks/seamly-state-hooks'
+import useDebounce from 'ui/hooks/use-debounce'
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
@@ -49,6 +50,7 @@ const Events = () => {
 const Conversation = () => {
   const { t } = useI18n()
   const isLoading = useSeamlyIsLoading()
+  const debouncedIsLoading = useDebounce(isLoading, isLoading ? 0 : 20)
   const { isOpen } = useVisibility()
   const skiplinkTargetId = useSkiplink()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
@@ -77,7 +79,7 @@ const Conversation = () => {
             <ComponentFilter>
               <Events />
             </ComponentFilter>
-            {isLoading && <Loader />}
+            {debouncedIsLoading ? <Loader /> : null}
             <AbortTransactionButton />
           </ol>
         </div>

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

@@ -28,7 +28,11 @@ import {
   setServiceDataItem,
   setServiceEntryMetadata,
 } from 'domains/store/slice'
-import type { AckEvent, ChannelEvent } from 'domains/store/store.types'
+import type {
+  AckEvent,
+  ChannelEvent,
+  ParticipantEvent,
+} from 'domains/store/store.types'
 import { setTranslationProposalPrompt } from 'domains/translations/slice'
 
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video']
@@ -67,16 +71,6 @@ const SeamlyEventSubscriber = () => {
     }
   }, [api, api.connectionInfo, api.conversation.socket, dispatch])
 
-  useEffect(() => {
-    if (api.connectionInfo && api.conversation.channel) {
-      const { channel } = api.conversation
-      return () => {
-        channel?.leave()
-      }
-    }
-    return () => undefined
-  }, [api, api.connectionInfo, api.conversation])
-
   useEffect(() => {
     api.conversation.onConnection(({ currentState }) => {
       if (currentState === 'join_channel_erred') {
@@ -93,51 +87,46 @@ const SeamlyEventSubscriber = () => {
         )
       }
     })
-  }, [api.conversation, dispatch])
+  }, [api, api.connectionInfo, api.conversation.channel, dispatch])
 
   useEffect(() => {
     if (api.connectionInfo) {
-      api.conversation.onConnection(({ connected }) => {
-        if (!connected) return false
-
-        const { channel } = api.conversation
+      const updateParticipant = (event: ParticipantEvent) => {
+        if (event.type !== 'participant') {
+          return
+        }
+        const { payload } = event
 
-        const updateParticipant = (event) => {
-          const { payload } = event
+        if (!payload || !payload.participant) {
+          return
+        }
 
-          if (!payload || !payload.participant) {
-            return
-          }
+        const { fromClient, participant } = payload
 
-          const { fromClient, participant } = payload
+        if (
+          !fromClient &&
+          typeof participant !== 'string' &&
+          participant?.name
+        ) {
+          dispatch(setHeaderSubTitle(participant.name))
+        }
 
-          if (
-            !fromClient &&
-            typeof participant !== 'string' &&
-            participant?.name
-          ) {
-            dispatch(setHeaderSubTitle(participant.name))
-          }
+        dispatch(
+          setParticipant({
+            participant,
+            fromClient,
+          }),
+        )
 
-          dispatch(
-            setParticipant({
-              participant,
-              fromClient,
-            }),
-          )
-
-          if (typeof participant !== 'string' && participant.introduction) {
-            dispatch(
-              addEvent({
-                ...event,
-                payload: {
-                  ...payload,
-                  type: 'participant',
-                },
-              }),
-            )
-          }
+        if (typeof participant !== 'string' && participant.introduction) {
+          dispatch(addEvent(event))
         }
+      }
+
+      api.conversation.onConnection(({ connected }) => {
+        if (!connected) return false
+
+        const { channel } = api.conversation
 
         channel.onMessage = (type, payload) => {
           const event = { type, payload }
@@ -189,7 +178,7 @@ const SeamlyEventSubscriber = () => {
               }
               break
             case 'participant':
-              updateParticipant(event)
+              updateParticipant(event as ParticipantEvent)
               break
             case 'service_data':
               if (payload.persist) {
@@ -268,7 +257,7 @@ const SeamlyEventSubscriber = () => {
           return payload
         }
 
-        return true
+        return false
       })
     }
   }, [

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

@@ -31,7 +31,7 @@ const SeamlyLiveRegion = ({ children }) => {
       timeOutHandler = setTimeout(() => {
         messageSetter({})
         clearTimeout(timeOutHandler)
-      }, 500) // To get it to work in VoiceOver in MacOS
+      }, 600) // To get it to work in VoiceOver in MacOS
     }
 
     return () => {

package/src/javascripts/ui/hooks/{seamly-api-hooks.js → seamly-api-hooks.ts}

@@ -6,7 +6,7 @@ export const useSeamlyApiContext = () => useContext(SeamlyApiContext)
 export const useSeamlyObjectStore = () => {
   const api = useSeamlyApiContext()
 
-  return api.store || {}
+  return api.store
 }
 
 export const useSeamlyConversationUrl = () => {

package/src/javascripts/ui/hooks/use-debounce.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef, useState } from 'preact/hooks'
+
+const useDebounce = <T extends unknown>(value: T, delay = 20): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
+
+  useEffect(() => {
+    timeoutRef.current = setTimeout(() => setDebouncedValue(value), delay)
+
+    return () => {
+      clearTimeout(timeoutRef.current)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}
+
+export default useDebounce

package/src/javascripts/ui/hooks/use-seamly-chat.ts

@@ -1,25 +1,19 @@
 import { useCallback, useEffect, useRef } from 'preact/hooks'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
 import { useI18n } from 'domains/i18n/hooks'
-import { setIsLoading } from 'domains/store/slice'
 import { useVisibility } from 'domains/visibility/hooks'
 import { selectShowInlineView } from '../../domains/visibility/selectors'
 import { useLiveRegion } from './live-region-hooks'
-import { useSeamlyHasConversation } from './seamly-api-hooks'
-import { useEvents, useSeamlyLayoutMode } from './seamly-state-hooks'
+import { useSeamlyLayoutMode } from './seamly-state-hooks'
 import useSessionExpiredCommand from './use-session-expired-command'
 
 const useSeamlyChat = () => {
-  const events = useEvents()
   const { t } = useI18n()
   const { isInline, isWindow, isApp } = useSeamlyLayoutMode()
   const { isOpen, isVisible } = useVisibility()
   const showInlineView = useSelector(selectShowInlineView)
-  const dispatch = useDispatch()
-  const spinnerTimeout = useRef(null)
   const { start, connect, apiConfigReady, apiConnected } = useSeamlyCommands()
-  const hasConversation = useSeamlyHasConversation()
   const connectCalled = useRef(false)
   const { sendAssertive } = useLiveRegion()
 
@@ -48,30 +42,6 @@ const useSeamlyChat = () => {
     }
   }, [isOpen, isVisible, sendAssertive, t])
 
-  useEffect(() => {
-    // This delays the start of the loading inidicator we set when we initialise
-    // the application. This is done to only avoid BSOD on initial load if DCX is slow.
-    spinnerTimeout.current = setTimeout(() => {
-      dispatch(setIsLoading(true))
-    }, 500)
-
-    return () => {
-      clearTimeout(spinnerTimeout.current)
-    }
-  }, [dispatch])
-
-  useEffect(() => {
-    if (events.length) {
-      spinnerTimeout.current = setTimeout(() => {
-        dispatch(setIsLoading(false))
-      }, 5000)
-    }
-
-    return () => {
-      clearTimeout(spinnerTimeout.current)
-    }
-  }, [events, dispatch])
-
   useEffect(() => {
     // This is needed to reset the ref to allow connect and start to happen again.
     // Mostly due to Interrupt situations and a reset being called.
@@ -107,23 +77,14 @@ const useSeamlyChat = () => {
       return
     }
 
-    if (hasConversation() && isOpen) {
-      // We deactivate the extra startup loading spinner when a conversation is available
-      // We also stop setting the loading indicator in the first place to avoid a flash.
-      clearTimeout(spinnerTimeout.current)
-      dispatch(setIsLoading(false))
-    }
-
     connectAndStart()
   }, [
     apiConfigReady,
     connectAndStart,
-    dispatch,
-    hasConversation,
     isInline,
     isOpen,
-    isWindow,
     isVisible,
+    isWindow,
     showInlineView,
   ])
 }