@seamly/web-ui 25.4.1-beta → 25.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "25.4.1-beta",
+  "version": "25.5.1",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "exports": {
@@ -21,22 +21,22 @@
     "webpack/*"
   ],
   "dependencies": {
-    "@reduxjs/toolkit": "^2.11.2",
+    "@reduxjs/toolkit": "^2.12.0",
     "@ultraq/icu-message-formatter": "^0.15.2",
     "core-js": "^3.49.0",
-    "focus-trap": "^7.8.0",
+    "focus-trap": "^8.2.2",
     "include-media": "^2.0.0",
-    "js-cookie": "^3.0.5",
+    "js-cookie": "^3.0.8",
     "minivents": "^2.2.1",
-    "react-redux": "^9.2.0",
+    "react-redux": "^9.3.0",
     "reconnecting-websocket": "^4.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5",
-    "@playwright/test": "^1.58.2",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-react": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
+    "@playwright/test": "^1.61.1",
     "@seamly/doc-site": "^4.1.1",
     "@seamly/eslint-config": "^4.0.0",
     "@seamly/prettier-config": "^3.2.0",
@@ -45,30 +45,30 @@
     "@testing-library/preact": "^3.2.4",
     "@types/core-js": "^2.5.8",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.5.0",
-    "babel-jest": "30.3.0",
+    "@types/node": "^25.9.4",
+    "babel-jest": "30.4.1",
     "babel-loader": "^10.1.1",
     "copy-webpack-plugin": "^14.0.0",
     "eslint": "^9.39.4",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.1.0",
     "husky": "^9.1.7",
-    "jest": "^30.3.0",
-    "jest-environment-jsdom": "^30.3.0",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
     "jest-watch-typeahead": "^3.0.1",
     "nyc": "^18.0.0",
     "openapi-typescript": "6.7.6",
     "playwright-test-coverage": "^1.2.12",
-    "postcss": "^8.5.8",
-    "preact": "^10.29.0",
-    "prettier": "^3.8.1",
+    "postcss": "^8.5.16",
+    "preact": "^10.29.3",
+    "prettier": "^3.9.3",
     "rimraf": "^6.1.3",
     "style-loader": "^4.0.0",
-    "stylelint": "^17.6.0",
-    "typescript": "^6.0.2",
-    "webpack": "^5.105.4",
-    "webpack-cli": "^7.0.2",
-    "webpack-dev-server": "^5.2.3",
+    "stylelint": "^17.14.0",
+    "typescript": "^6.0.3",
+    "webpack": "^5.108.2",
+    "webpack-cli": "^7.1.0",
+    "webpack-dev-server": "^5.2.5",
     "webpack-merge": "^6.0.1"
   },
   "resolutions": {
@@ -77,7 +77,7 @@
     "undici": "^7.22.0"
   },
   "peerDependencies": {
-    "preact": "^10.29.0"
+    "preact": "^10.29.1"
   },
   "scripts": {
     "build:clean": "rimraf build; mkdir -p build",
@@ -108,5 +108,5 @@
     "test:e2e:coverage": "yarn nyc report --reporter cobertura --reporter html",
     "prepare": "husky"
   },
-  "packageManager": "yarn@4.13.0"
+  "packageManager": "yarn@4.14.1"
 }

package/src/javascripts/core/api/asyncapi.types.ts

@@ -305,8 +305,7 @@ export interface components {
         service: components['schemas']['Service']
         transactionId: components['schemas']['TransactionId']
         translatedBody:
-          | components['schemas']['ServiceDataBodySuggestion']
-          | null
+          components['schemas']['ServiceDataBodySuggestion'] | null
         translation: components['schemas']['Translation']
         /**
          * @description Type of the message body

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

@@ -146,10 +146,7 @@ export type ServiceDataEvent = {
 }
 
 export type ChannelEvent =
-  | MessageEvent
-  | ParticipantEvent
-  | ServiceDataEvent
-  | InfoEvent
+  MessageEvent | ParticipantEvent | ServiceDataEvent | InfoEvent
 
 type EntryOptions = NonNullable<
   AsyncAPIComponents['schemas']['MessageIncoming']['payload']['entry']

package/src/javascripts/core/domains/translations/components/options-button.tsx

@@ -43,7 +43,7 @@ export default function TranslationsOptionsButton({
   }
 
   const handleToggleClick = () => {
-    setMenuIsOpen(!menuIsOpen)
+    setMenuIsOpen((isOpen) => !isOpen)
   }
 
   const handleToggleKeyDown = (e: KeyboardEvent) => {
@@ -63,6 +63,7 @@ export default function TranslationsOptionsButton({
       >
         <div className={className('options__dialog')} role="dialog">
           <TranslationsOptionsDialog
+            clickOutsideEnabled={menuIsOpen}
             onClose={handleDialogClose}
             position={position}
           />

package/src/javascripts/core/domains/translations/components/options-dialog/index.tsx

@@ -5,11 +5,13 @@ import type { FramePosition } from 'ui/components/options/options-frame'
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 
 type TranslationsOptionsDialogProps = {
+  clickOutsideEnabled: boolean
   onClose: () => void
   position: FramePosition
 }
 
 function TranslationsOptionsDialog({
+  clickOutsideEnabled,
   onClose,
   position,
 }: TranslationsOptionsDialogProps) {
@@ -23,6 +25,7 @@ function TranslationsOptionsDialog({
       description={t('translations.menu.description')}
       descriptionId={descriptionId}
       position={position}
+      clickOutsideEnabled={clickOutsideEnabled}
       disableButtonFocusing
     >
       <TranslationOptions describedById={descriptionId} onChange={onClose} />

package/src/javascripts/core/domains/visibility/actions.ts

@@ -55,7 +55,19 @@ export const setVisibility = createAsyncThunk<
     }
   }
 
+  const visibility = (api.store.get(StoreKey) || {}) as Record<
+    string,
+    VisibilityOptions | boolean | null | undefined
+  >
+
   if (previousVisibility === calculatedVisibility) {
+    api.store.set(StoreKey, {
+      ...visibility,
+      [layoutMode]: requestedVisibility,
+      ...(typeof showPreChat !== 'undefined' ? { showPreChat } : {}),
+      ...(typeof showContinueChat !== 'undefined' ? { showContinueChat } : {}),
+    })
+
     return {
       visibility: null,
       setInputFocus: args.setInputFocus,
@@ -64,12 +76,12 @@ export const setVisibility = createAsyncThunk<
     }
   }
 
-  const visibility = api.store.get(StoreKey) as object | undefined
-
   // Store the user-requested visibility in order to reinitialize after refresh
   api.store.set(StoreKey, {
-    ...(visibility || {}),
+    ...visibility,
     [layoutMode]: requestedVisibility,
+    ...(typeof showPreChat !== 'undefined' ? { showPreChat } : {}),
+    ...(typeof showContinueChat !== 'undefined' ? { showContinueChat } : {}),
   })
   if (requestedVisibility) {
     eventBus.emit('ui.visible', requestedVisibility, {
@@ -94,10 +106,39 @@ export const initializeVisibility = createAsyncThunk<any, void, ThunkAPI>(
     // initialize stored visibility
     const { layoutMode } = ConfigSelectors.selectConfig(getState())
 
-    const storedVisibility =
-      api.store.get(StoreKey)?.[layoutMode] || visibilityStates.initialize
+    const storedVisibilitySettings = (api.store.get(StoreKey) || {}) as Record<
+      string,
+      VisibilityOptions | boolean | null | undefined
+    >
+    const storedVisibilityValue = storedVisibilitySettings[layoutMode]
 
-    dispatch(setVisibility({ visibility: storedVisibility }))
+    const storedVisibility = isPersistedVisibilityState(storedVisibilityValue)
+      ? storedVisibilityValue
+      : visibilityStates.initialize
+
+    const storedShowPreChat = storedVisibilitySettings.showPreChat
+    const storedShowContinueChat = storedVisibilitySettings.showContinueChat
+
+    dispatch(
+      setVisibility({
+        visibility: storedVisibility,
+        showPreChat:
+          typeof storedShowPreChat === 'boolean'
+            ? storedShowPreChat
+            : undefined,
+        showContinueChat:
+          typeof storedShowContinueChat === 'boolean'
+            ? storedShowContinueChat
+            : undefined,
+      }),
+    )
     return storedVisibility
   },
 )
+
+const isPersistedVisibilityState = (
+  value: VisibilityOptions | boolean | undefined,
+): value is (typeof validVisibilityStates)[number] =>
+  value === visibilityStates.open ||
+  value === visibilityStates.minimized ||
+  value === visibilityStates.hidden

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

@@ -19,8 +19,7 @@ import Loader from './loader'
 const Events = () => {
   const events = useEvents()
   let prevParticipant:
-    | MessageInfo['participant']
-    | MessageMessage['participant']
+    MessageInfo['participant'] | MessageMessage['participant']
   return (
     <>
       {events.map((event) => {

package/src/javascripts/core/ui/components/options/options-frame.tsx

@@ -23,6 +23,7 @@ type OptionsFrameProps = {
   descriptionId?: string
   cancelButtonText?: string
   cancelButtonRef?: MutableRef<HTMLButtonElement | null>
+  clickOutsideEnabled?: boolean
   disableButtonFocusing?: boolean
   position: FramePosition
 }
@@ -36,6 +37,7 @@ const OptionsFrame: FC<OptionsFrameProps> = ({
   descriptionId,
   cancelButtonText,
   cancelButtonRef,
+  clickOutsideEnabled = true,
   disableButtonFocusing,
   position = {
     horizontal: 'left',
@@ -62,7 +64,7 @@ const OptionsFrame: FC<OptionsFrameProps> = ({
     closePanel()
   }, [closePanel, onCancel])
 
-  const container = useClickOutside(onCancelHandler)
+  const container = useClickOutside(onCancelHandler, clickOutsideEnabled)
 
   useEffect(() => {
     focusElement(container.current)

package/src/javascripts/core/ui/hooks/use-click-outside.ts

@@ -1,9 +1,13 @@
 import { useEffect, useRef } from 'preact/hooks'
 
-const useClickOutside = (callback: Function) => {
+const useClickOutside = (callback: Function, enabled = true) => {
   const ref = useRef<HTMLElement>(null)
 
   useEffect(() => {
+    if (!enabled) {
+      return undefined
+    }
+
     const handler = (el: TouchEvent | MouseEvent): void => {
       if (
         ref.current &&
@@ -23,7 +27,7 @@ const useClickOutside = (callback: Function) => {
       document.removeEventListener('click', handler, true)
       document.removeEventListener('touchstart', handler, true)
     }
-  }, [callback, ref])
+  }, [callback, enabled, ref])
 
   return ref
 }

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

@@ -801,7 +801,7 @@ const deletedFileDownloadAgentMessage = {
   },
 }
 
-const fileDownloadUserMessageImage = {
+const userImageMessage = {
   type: 'message',
   payload: {
     ...messageBodyUploadImage,
@@ -812,19 +812,30 @@ const fileDownloadUserMessageImage = {
 }
 
 sessionStorage.setItem(
-  `image-${fileDownloadUserMessageImage.payload.id}`,
-  fileDownloadUserMessageImage.payload.body.url,
+  `image-${userImageMessage.payload.id}`,
+  userImageMessage.payload.body.url,
 )
 
-const emptyUrlFileDownloadUserMessage = {
-  ...fileDownloadUserMessageImage,
+const fileDownloadUserMessage = {
+  type: 'message',
   payload: {
-    ...fileDownloadUserMessageImage.payload,
+    ...messageBodyUploadUrl,
+    fromClient: true,
+    participant: 'client',
     id: randomId(),
+  },
+}
+
+const deletedFileDownloadUserMessage = {
+  ...fileDownloadUserMessage,
+  payload: {
+    ...fileDownloadUserMessage.payload,
     body: {
-      ...fileDownloadUserMessageImage.payload.body,
-      url: null,
+      ...fileDownloadUserMessage.payload.body,
+      isDeleted: true,
+      url: undefined,
     },
+    id: randomId(),
   },
 }
 
@@ -1075,8 +1086,9 @@ const standardState = {
       textMessageWithLinks,
       textMessageWithLongLink,
       imageMessageWithLightbox,
-      fileDownloadUserMessageImage,
-      emptyUrlFileDownloadUserMessage,
+      userImageMessage,
+      fileDownloadUserMessage,
+      deletedFileDownloadUserMessage,
       textMesageWithBullets,
       textMesageWithOrderedList,
       choicePromptMessage,
@@ -1091,8 +1103,9 @@ const standardState = {
     events: [
       userMessage,
       userMessageLong,
-      fileDownloadUserMessageImage,
-      emptyUrlFileDownloadUserMessage,
+      userImageMessage,
+      fileDownloadUserMessage,
+      deletedFileDownloadUserMessage,
       userMessageWithLinks,
     ],
   },
@@ -1141,8 +1154,9 @@ const standardState = {
       fileDownloadAgentMessageByUrl,
       fileDownloadAgentMessageImage,
       deletedFileDownloadAgentMessage,
-      fileDownloadUserMessageImage,
-      emptyUrlFileDownloadUserMessage,
+      userImageMessage,
+      fileDownloadUserMessage,
+      deletedFileDownloadUserMessage,
     ],
   },
   systemMessages: {
@@ -1922,8 +1936,8 @@ const standardState = {
       textMessageWithLinks,
       textMessageWithLongLink,
       imageMessageWithLightbox,
-      fileDownloadUserMessageImage,
-      emptyUrlFileDownloadUserMessage,
+      userImageMessage,
+      fileDownloadUserMessage,
       textMesageWithBullets,
       textMesageWithOrderedList,
       choicePromptMessage,
@@ -1961,8 +1975,8 @@ const standardState = {
           textMessageWithLinks,
           textMessageWithLongLink,
           imageMessageWithLightbox,
-          fileDownloadUserMessageImage,
-          emptyUrlFileDownloadUserMessage,
+          userImageMessage,
+          fileDownloadUserMessage,
           textMesageWithBullets,
           textMesageWithOrderedList,
           choicePromptMessage,