@seamly/web-ui 20.8.1 → 21.0.0

package/src/javascripts/schema.ts

@@ -185,6 +185,29 @@ export interface components {
            * @example false
            */
           resumeConversationPrompt?: boolean
+          /** @description Additional information to be able to show a translation proposal element. */
+          translationProposal?: {
+            /**
+             * @description Title of the activate button
+             * @example Activate
+             */
+            buttonLabel?: string
+            /**
+             * @description Proposed locale for translation
+             * @example en-GB
+             */
+            proposedLocale?: string
+            /**
+             * @description Screen reader text for dismiss button
+             * @example Dismiss translation proposal
+             */
+            srDismissButtonText?: string
+            /**
+             * @description Title of the shown translation proposal element
+             * @example Do you want to chat in English?
+             */
+            titleLabel?: string
+          } | null
         }
       }
       _links?: {
@@ -1084,6 +1107,11 @@ export interface operations {
                * @example https://seamly.ai/en/contact-us/
                */
               currentUrl?: string
+              /**
+               * @description The preferred locale of the user, for example the language of the browser UI.
+               * @example en-US
+               */
+              preferredLocale?: string
               /**
                * @description The screen resolution of the user.
                * @example 2560x1440

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

@@ -1,5 +1,6 @@
-import { getUrlParams, getUrlSearchString, randomId } from '@seamly/web-ui'
+import { randomId } from '@seamly/web-ui'
 import { useCallback, useEffect, useState } from 'preact/hooks'
+import { getSearchParamsByKeys, getUrlSearchParams } from 'lib/url-helpers'
 import StyleGuideLinks from 'style-guide/components/links'
 import StyleGuideView from 'style-guide/components/view'
 import { getDeprecatedStateObj, getStateObj } from 'style-guide/states'
@@ -22,6 +23,7 @@ const StyleGuideApp = ({
       styleGuideConfig.showLayoutModes || ['inline', 'window'],
       customMessageEventBodies,
     )
+
     return Object.keys(mainStateObj).reduce(
       (acc, key) => ({
         ...acc,
@@ -47,6 +49,13 @@ const StyleGuideApp = ({
 
   const getState = useCallback(
     (layoutMode, feature) => {
+      const keys = getSearchParamsByKeys('apiKey', 'locale')
+      const combinedParams = new URLSearchParams({
+        ...keys,
+        layoutMode,
+        feature,
+      })
+      window.history.replaceState(null, null, `?${combinedParams}`)
       const { headingText } = mainState[feature]
       setSelectedStateDescription(headingText)
       const bareState = mainState[feature][layoutMode]
@@ -62,6 +71,10 @@ const StyleGuideApp = ({
           ...config,
           showDisclaimer:
             bareState.config.showDisclaimer || config.showDisclaimer,
+          context: {
+            ...config.context,
+            ...bareState.config?.context,
+          },
           layoutMode: bareState.config.layoutMode,
           ...(overrideMessages ? { messages: overrideMessages } : {}),
           showFaq,
@@ -95,17 +108,8 @@ const StyleGuideApp = ({
   }, [staticState, setStaticState, showStyleGuide])
 
   const loadFromUrl = useCallback(() => {
-    const params = getUrlParams()
-    if (Object.keys(params).length !== 2) {
-      window.history.pushState(
-        null,
-        null,
-        `${window.location.pathname}?${getUrlSearchString({
-          layoutMode: 'inline',
-          feature: 'base',
-        })}`,
-      )
-    }
+    const params = getUrlSearchParams()
+
     const { layoutMode = 'inline', feature = 'base' } = params
     updateState(getState(layoutMode, feature))
     window.title = `Style`

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

@@ -1,4 +1,4 @@
-import { getUrlSearchString, getUrlParams } from '@seamly/web-ui'
+import { getUrlSearchParams, getUrlSearchString } from 'lib/url-helpers'
 import { categories } from 'style-guide/states'
 
 const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
@@ -13,7 +13,7 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
     setSelectedState(actionObj)
   }
 
-  const currentSearch = getUrlParams(window.location.search)
+  const currentSearch = getUrlSearchParams()
 
   return (
     <nav aria-label="Style guide navigation" className="nav--styleguide">
@@ -54,8 +54,8 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                             <li
                               key={layoutMode}
                               className={
-                                layoutMode === currentSearch.layoutMode &&
-                                feature === currentSearch.feature
+                                layoutMode === currentSearch?.layoutMode &&
+                                feature === currentSearch?.feature
                                   ? 'state__selected'
                                   : null
                               }
@@ -69,8 +69,8 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                                   feature,
                                 })}`}
                                 aria-current={
-                                  layoutMode === currentSearch.layoutMode &&
-                                  feature === currentSearch.feature
+                                  layoutMode === currentSearch?.layoutMode &&
+                                  feature === currentSearch?.feature
                                     ? 'page'
                                     : null
                                 }

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

@@ -6,10 +6,12 @@ import {
   SeamlyLiveRegionContext,
   SeamlyStoreProvider,
 } from '@seamly/web-ui'
+import { useMemo, useRef } from 'preact/hooks'
+import SeamlyChat from 'ui/components/core/seamly-chat'
 import appReducer from 'domains/app/slice'
 import configReducer, {
-  setPreChatEvents,
   setConfig,
+  setPreChatEvents,
 } from 'domains/config/slice'
 import formsReducer from 'domains/forms/slice'
 import i18nReducer, {
@@ -20,7 +22,6 @@ import interruptReducer from 'domains/interrupt/slice'
 import stateReducer, { setParticipant } from 'domains/store/slice'
 import translationReducer from 'domains/translations/slice'
 import visibilityReducer from 'domains/visibility/slice'
-import { useMemo, useRef } from 'preact/hooks'
 
 const bareApi = {
   send: () => {
@@ -121,7 +122,9 @@ const SeamlyStaticCore = ({
         <SeamlyEventBusContext.Provider value={eventBusRef.current}>
           <SeamlyLiveRegionContext.Provider value={liveMsgRef.current}>
             <SeamlyApiContext.Provider value={bareApi}>
-              <ComponentFilter>{children}</ComponentFilter>
+              <SeamlyChat>
+                <ComponentFilter>{children}</ComponentFilter>
+              </SeamlyChat>
             </SeamlyApiContext.Provider>
           </SeamlyLiveRegionContext.Provider>
         </SeamlyEventBusContext.Provider>

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

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'preact/hooks'
 import { View } from '@seamly/web-ui'
+import { useEffect, useState } from 'preact/hooks'
 import { timeout } from 'ui/hooks/focus-helper-hooks'
 import StyleGuideStaticCore from './static-core'
 

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

@@ -1,7 +1,7 @@
 import {
-  randomId,
   SeamlyGeneralError,
   SeamlyOfflineError,
+  randomId,
   visibilityStates,
 } from '@seamly/web-ui'
 import { addTranslationData } from './state-helpers'
@@ -107,8 +107,10 @@ const newTranslationDividerStart = {
   payload: {
     body: {
       language: 'Nederlands',
+      restartButtonText: null,
       subtype: 'new_translation',
       text: '[NL] Automatic translation to Dutch started. Please note that automatic translations may contain errors.',
+      title: '[NL] Translating to Dutch',
       translationEnabled: true,
       translationLocale: 'nl',
     },
@@ -158,8 +160,10 @@ const newTranslationDividerStop = {
   payload: {
     body: {
       language: 'Nederlands',
+      restartButtonText: '[NL] Start again',
       subtype: 'new_translation',
-      text: '[NL] Automatic translation to Dutch ended.',
+      text: null,
+      title: '[NL] Automatic translation to Dutch ended',
       translationEnabled: false,
       translationLocale: 'nl',
     },
@@ -762,6 +766,7 @@ const translationsSlice = {
   isActive: false,
   currentLocale: undefined,
   isAvailable: false,
+  showTranslationProposal: false,
   languages: [],
   translatedEventGroups: {},
   containerId: randomId(),
@@ -1720,6 +1725,30 @@ const standardState = {
       languages: [
         { locale: 'nl', nativeName: 'Dutch' },
         { locale: 'en', nativeName: 'English' },
+        { locale: 'ar', nativeName: 'Arabic' },
+        { locale: 'bg', nativeName: 'Bulgarian' },
+        { locale: 'zh', nativeName: 'Chinese' },
+        { locale: 'cs', nativeName: 'Czech' },
+        { locale: 'da', nativeName: 'Danish' },
+        { locale: 'et', nativeName: 'Estonian' },
+        { locale: 'fi', nativeName: 'Finnish' },
+        { locale: 'fr', nativeName: 'French' },
+        { locale: 'de-informal', nativeName: 'German' },
+        { locale: 'el', nativeName: 'Greek' },
+        { locale: 'hu', nativeName: 'Hungarian' },
+        { locale: 'it', nativeName: 'Italian' },
+        { locale: 'ja', nativeName: 'Japanese' },
+        { locale: 'lv', nativeName: 'Latvian' },
+        { locale: 'pl', nativeName: 'Polish' },
+        { locale: 'ro', nativeName: 'Romanian' },
+        { locale: 'ru', nativeName: 'Russian' },
+        { locale: 'sk', nativeName: 'Slovak' },
+        { locale: 'sl', nativeName: 'Slovenian' },
+        { locale: 'es-informal', nativeName: 'Spanish' },
+        { locale: 'sv', nativeName: 'Swedish' },
+        { locale: 'ti', nativeName: 'Tigrinya' },
+        { locale: 'tr', nativeName: 'Turkish' },
+        { locale: 'uk', nativeName: 'Ukrainian' },
       ],
     },
   },
@@ -1823,6 +1852,63 @@ const standardState = {
       ],
     },
   },
+  translationProposal: {
+    category: categoryKeys.translations,
+    headingText: 'Show translation proposal',
+    description: '',
+    ...baseState,
+    events: [shortTextMessage, userMessage, userMessageLong],
+    config: {
+      ...baseState.config,
+      showDisclaimer: true,
+      context: {
+        locale: 'nl-informal',
+      },
+    },
+    translations: {
+      ...translationsSlice,
+      translationProposal: {
+        buttonLabel: 'Activate',
+        proposedLocale: 'en-GB',
+        srDismissButtonText: 'Dismiss translation proposal',
+        titleLabel: 'Do you want to chat in English?',
+      },
+      isAvailable: true,
+      isActive: false,
+      languages: [
+        { locale: 'nl-informal', nativeName: 'Dutch' },
+        { locale: 'en-GB', nativeName: 'English' },
+      ],
+    },
+  },
+  translationProposalWithoutTitle: {
+    category: categoryKeys.translations,
+    headingText: 'Show translation proposal without title',
+    description: '',
+    ...baseState,
+    events: [shortTextMessage, userMessage, userMessageLong],
+    config: {
+      ...baseState.config,
+      showDisclaimer: true,
+      context: {
+        locale: 'nl-informal',
+      },
+    },
+    translations: {
+      ...translationsSlice,
+      translationProposal: {
+        buttonLabel: 'Activate',
+        proposedLocale: 'en-GB',
+        srDismissButtonText: 'Dismiss translation proposal',
+      },
+      isAvailable: true,
+      isActive: false,
+      languages: [
+        { locale: 'nl-informal', nativeName: 'Dutch' },
+        { locale: 'en-GB', nativeName: 'English' },
+      ],
+    },
+  },
 }
 
 const inlineInterface = {
@@ -1955,7 +2041,10 @@ const standardWindowStates = {
     description: '',
     window: {
       ...baseState,
-      config: { ...baseState.config, layoutMode: 'window' },
+      config: {
+        ...baseState.config,
+        layoutMode: 'window',
+      },
       visibility: {
         ...baseState.visibility,
         visibility: visibilityStates.minimized,
@@ -1968,7 +2057,10 @@ const standardWindowStates = {
     description: '',
     window: {
       ...baseState,
-      config: { ...baseState.config, layoutMode: 'window' },
+      config: {
+        ...baseState.config,
+        layoutMode: 'window',
+      },
       visibility: {
         ...baseState.visibility,
         visibility: visibilityStates.minimized,
@@ -2048,6 +2140,7 @@ const buildStandardState = (
   return Object.keys(intermediateState).reduce((acc, key) => {
     const { headingText, category, description, ...rest } =
       intermediateState[key]
+
     return {
       ...acc,
       [key]: {
@@ -2057,7 +2150,10 @@ const buildStandardState = (
         ...layoutModes.reduce(
           (comb, layoutMode) => ({
             ...comb,
-            [layoutMode]: { ...rest, config: { ...rest.config, layoutMode } },
+            [layoutMode]: {
+              ...rest,
+              config: { ...rest.config, layoutMode },
+            },
           }),
           {},
         ),
@@ -2074,31 +2170,33 @@ export const getDeprecatedStateObj = (
   ...(layoutModes.indexOf('window') !== -1 ? standardWindowStates : {}),
 })
 
-export const getStateObj = (layoutModes, customComponentEventBodies) => ({
-  ...buildStandardState(layoutModes, customComponentEventBodies, true),
-  ...(layoutModes.indexOf('window') !== -1
-    ? {
-        ...standardWindowStates,
-        minimizedWindowPrechat: {
-          category: categoryKeys.minimizedWindow,
-          headingText: 'Minimized with pre-chat messages',
-          description: '',
-          window: {
-            ...baseState,
-            config: {
-              ...baseState.config,
-              layoutMode: 'window',
-              preChatEvents: [splashMessage],
-            },
-            visibility: {
-              ...baseState.visibility,
-              visibility: visibilityStates.minimized,
+export const getStateObj = (layoutModes, customComponentEventBodies) => {
+  return {
+    ...buildStandardState(layoutModes, customComponentEventBodies, true),
+    ...(layoutModes.indexOf('window') !== -1
+      ? {
+          ...standardWindowStates,
+          minimizedWindowPrechat: {
+            category: categoryKeys.minimizedWindow,
+            headingText: 'Minimized with pre-chat messages',
+            description: '',
+            window: {
+              ...baseState,
+              config: {
+                ...baseState.config,
+                layoutMode: 'window',
+                preChatEvents: [splashMessage],
+              },
+              visibility: {
+                ...baseState.visibility,
+                visibility: visibilityStates.minimized,
+              },
+              participantInfo,
+              headerTitles,
             },
-            participantInfo,
-            headerTitles,
           },
-        },
-      }
-    : {}),
-  ...inlineInterface,
-})
+        }
+      : {}),
+    ...inlineInterface,
+  }
+}

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

@@ -1,5 +1,5 @@
-import { render } from 'preact'
 import { API, Engine } from '@seamly/web-ui'
+import { render } from 'preact'
 import StyleGuideApp from './components/app'
 
 class SeamlyStyleGuideInstance extends Engine {

package/src/javascripts/ui/components/app-options/index.js

@@ -1,19 +1,35 @@
-import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
-import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
 import OptionsButton from 'ui/components/options/options-button'
-import { useTranslations } from 'domains/translations/hooks'
+import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
 import TranslationsOptionsButton from 'domains/translations/components/options-button'
+import {
+  useLocaleNativeName,
+  useTranslations,
+} from 'domains/translations/hooks'
+import { className } from 'lib/css'
 
 export default function AppOptions() {
   const { menuOptions, allowOptionSelection } = useSeamlyOptions()
   const { isAvailable: isTranslationsAvailable } = useTranslations()
+  const { hasInterrupt } = useInterrupt()
+  const { t, locale } = useI18n()
+  const localeNativeName = useLocaleNativeName(locale)
+
   if (
-    !isTranslationsAvailable &&
-    (!allowOptionSelection || !menuOptions.length)
+    (!isTranslationsAvailable &&
+      (!allowOptionSelection || !menuOptions.length)) ||
+    hasInterrupt
   ) {
     return null
   }
 
+  const openButtonText = t('translations.settings.openButtonText', {
+    hasLanguage: !!localeNativeName,
+    language: localeNativeName,
+  })
+
   return (
     <div className={className('chat__options')}>
       {isTranslationsAvailable && (
@@ -23,7 +39,10 @@ export default function AppOptions() {
             'chat__options-item--left',
           )}
         >
-          <TranslationsOptionsButton />
+          <TranslationsOptionsButton classNames={['button--secondary']}>
+            <Icon alt={openButtonText} name="newTranslation" size="16" />
+            <span className={className('button__text')}>{openButtonText}</span>
+          </TranslationsOptionsButton>
         </div>
       )}
       {allowOptionSelection && (

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

@@ -1,5 +1,5 @@
-import View from './view'
 import SeamlyCore from './core/seamly-core'
+import View from './view'
 
 const ChatApp = (props) => {
   return (

package/src/javascripts/ui/components/chat-status/chat-status-action.tsx

@@ -0,0 +1,30 @@
+import Icon from 'ui/components/layout/icon'
+import { className } from 'lib/css'
+
+type ChatStatusActionProps = {
+  handleClick: () => void
+  icon: string
+  title: string
+  srButtonText?: string
+}
+
+const ChatStatusAction = ({
+  handleClick,
+  icon,
+  title,
+  srButtonText,
+}: ChatStatusActionProps) => (
+  <button
+    type="button"
+    onClick={handleClick}
+    className={className('button', 'button--primary', 'chat-status__button')}
+  >
+    <Icon name={icon} size="16" alt="" />
+    {title}
+    {srButtonText && (
+      <span className={className('visually-hidden')}>{srButtonText}</span>
+    )}
+  </button>
+)
+
+export default ChatStatusAction

package/src/javascripts/ui/components/chat-status/index.tsx

@@ -0,0 +1,61 @@
+import { FC } from 'preact/compat'
+import Icon from 'ui/components/layout/icon'
+import { useGeneratedId } from 'ui/hooks/utility-hooks'
+import { className } from 'lib/css'
+
+type ChatStatusProps = {
+  handleClose: () => void
+  title: string
+  closeButtonText?: string
+  srCloseButtonText?: string
+  id: string
+}
+
+const ChatStatus: FC<ChatStatusProps> = ({
+  children,
+  handleClose,
+  title,
+  closeButtonText,
+  srCloseButtonText,
+  id,
+}) => {
+  const headingId = useGeneratedId()
+
+  return (
+    <section
+      tabIndex={-1}
+      id={id}
+      aria-labelledby={title ? headingId : undefined}
+      className={className('chat-status', !title && 'chat-status--condensed')}
+    >
+      <div className={className('chat-status__body')}>
+        {title ? (
+          <h2 className={className('chat-status__title')} id={headingId}>
+            {title}
+          </h2>
+        ) : null}
+        {children}
+      </div>
+      {typeof handleClose === 'function' && (
+        <button
+          type="button"
+          onClick={handleClose}
+          className={className(
+            'button',
+            'button--tertiary',
+            'chat-status__close',
+          )}
+        >
+          {closeButtonText || <Icon name="close" size="16" alt="" />}
+          {srCloseButtonText && (
+            <span className={className('visually-hidden')}>
+              {srCloseButtonText}
+            </span>
+          )}
+        </button>
+      )}
+    </section>
+  )
+}
+
+export default ChatStatus

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

@@ -1,20 +1,20 @@
 import { useMemo } from 'preact/hooks'
 import { useConfig } from 'domains/config/hooks'
 import ComponentContext from './component-context'
+import CardMessage from './event/card-message'
+import CarouselMessage from './event/carousel-message'
 import ChoicePrompt from './event/choice-prompt'
-import Text from './event/text'
-import Image from './event/image'
-import Video from './event/video'
+import ConversationSuggestions from './event/conversation-suggestions'
+import Cta from './event/cta'
 import Divider from './event/divider'
-import Translation from './event/translation'
+import TimeIndicator from './event/divider/variants/time-indicator'
+import Image from './event/image'
 import Participant from './event/participant'
 import Splash from './event/splash'
+import Text from './event/text'
+import Translation from './event/translation'
 import Upload from './event/upload'
-import Cta from './event/cta'
-import TimeIndicator from './event/divider/variants/time-indicator'
-import CarouselMessage from './event/carousel-message'
-import CardMessage from './event/card-message'
-import ConversationSuggestions from './event/conversation-suggestions'
+import Video from './event/video'
 
 const eventTypeMapping = {
   message: {