@seamly/web-ui 20.8.1 → 21.0.1-beta.1

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

@@ -1,9 +1,7 @@
-import {
-  randomId,
-  SeamlyGeneralError,
-  SeamlyOfflineError,
-  visibilityStates,
-} from '@seamly/web-ui'
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
+import SeamlyOfflineError from 'api/errors/seamly-offline-error'
+import { visibilityStates } from 'domains/visibility/constants'
+import { randomId } from 'lib/id'
 import { addTranslationData } from './state-helpers'
 
 const baseState = {
@@ -107,8 +105,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 +158,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 +764,7 @@ const translationsSlice = {
   isActive: false,
   currentLocale: undefined,
   isAvailable: false,
+  showTranslationProposal: false,
   languages: [],
   translatedEventGroups: {},
   containerId: randomId(),
@@ -1720,6 +1723,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 +1850,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 +2039,10 @@ const standardWindowStates = {
     description: '',
     window: {
       ...baseState,
-      config: { ...baseState.config, layoutMode: 'window' },
+      config: {
+        ...baseState.config,
+        layoutMode: 'window',
+      },
       visibility: {
         ...baseState.visibility,
         visibility: visibilityStates.minimized,
@@ -1968,7 +2055,10 @@ const standardWindowStates = {
     description: '',
     window: {
       ...baseState,
-      config: { ...baseState.config, layoutMode: 'window' },
+      config: {
+        ...baseState.config,
+        layoutMode: 'window',
+      },
       visibility: {
         ...baseState.visibility,
         visibility: visibilityStates.minimized,
@@ -2048,6 +2138,7 @@ const buildStandardState = (
   return Object.keys(intermediateState).reduce((acc, key) => {
     const { headingText, category, description, ...rest } =
       intermediateState[key]
+
     return {
       ...acc,
       [key]: {
@@ -2057,7 +2148,10 @@ const buildStandardState = (
         ...layoutModes.reduce(
           (comb, layoutMode) => ({
             ...comb,
-            [layoutMode]: { ...rest, config: { ...rest.config, layoutMode } },
+            [layoutMode]: {
+              ...rest,
+              config: { ...rest.config, layoutMode },
+            },
           }),
           {},
         ),
@@ -2074,31 +2168,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,6 @@
+import { API } from 'api'
 import { render } from 'preact'
-import { API, Engine } from '@seamly/web-ui'
+import Engine from 'lib/engine'
 import StyleGuideApp from './components/app'
 
 class SeamlyStyleGuideInstance extends Engine {

package/src/javascripts/style-guide/style-guide-external-api.js

@@ -1,4 +1,4 @@
-import { ExternalApi } from '@seamly/web-ui'
+import ExternalApi from 'lib/external-api'
 import StyleGuideEngine from './style-guide-engine'
 
 class StyleGuideExternalApi extends ExternalApi {

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: {

package/src/javascripts/ui/components/conversation/{conversation.js → conversation.tsx}

@@ -1,15 +1,13 @@
-import { useI18n } from 'domains/i18n/hooks'
-import { useVisibility } from 'domains/visibility/hooks'
-import { className } from 'lib/css'
-import { useLayoutEffect, useRef } from 'preact/hooks'
 import PrivacyDisclaimer from 'ui/components/layout/privacy-disclaimer'
-import { timeout } from 'ui/hooks/focus-helper-hooks'
 import {
   useSeamlyIsLoading,
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
-import { useEvents, useLoadedImageEventIds } from 'ui/hooks/seamly-state-hooks'
+import { useEvents } from 'ui/hooks/seamly-state-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 import ComponentFilter from './component-filter'
 import Event from './event/event'
 import Loader from './loader'
@@ -18,49 +16,41 @@ const Events = () => {
   const events = useEvents()
 
   let prevParticipant = null
-  return events.map((event) => {
-    const { type, payload } = event
-    const { participant, fromClient } = payload
-    let participantChanged = false
-    if (type !== 'participant') {
-      const currentParticipant = fromClient
-        ? 'seamly-client-participant'
-        : participant
-      if (event.type !== 'info' && prevParticipant !== currentParticipant) {
-        participantChanged = true
-      }
-      prevParticipant = currentParticipant
-    }
+  return (
+    <>
+      {events.map((event) => {
+        const { type, payload } = event
+
+        let participantChanged = false
+        if (type !== 'participant' && type !== 'service_data') {
+          const { participant, fromClient } = payload
+          const currentParticipant = fromClient
+            ? 'seamly-client-participant'
+            : participant
+          if (event.type !== 'info' && prevParticipant !== currentParticipant) {
+            participantChanged = true
+          }
+          prevParticipant = currentParticipant
+        }
 
-    return (
-      <Event
-        key={event.payload.key || event.payload.id}
-        event={event}
-        newParticipant={participantChanged}
-      />
-    )
-  })
+        return (
+          <Event
+            key={event.payload.key || event.payload.id}
+            event={event}
+            newParticipant={participantChanged}
+          />
+        )
+      })}
+    </>
+  )
 }
 
 const Conversation = () => {
   const { t } = useI18n()
-  const chatBodyContainer = useRef(null)
-  const events = useEvents()
   const isLoading = useSeamlyIsLoading()
   const { isOpen } = useVisibility()
   const skiplinkTargetId = useSkiplink()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
-  const loadedImageEventIds = useLoadedImageEventIds()
-
-  useLayoutEffect(() => {
-    const containerElement = chatBodyContainer.current
-    if (containerElement) {
-      requestAnimationFrame(async () => {
-        await timeout(30) // Wait for next frame tick
-        containerElement.scrollTop = containerElement.scrollHeight
-      })
-    }
-  }, [events, isLoading, isOpen, loadedImageEventIds])
 
   const onClickHandler = (e) => {
     e.preventDefault()
@@ -78,7 +68,8 @@ const Conversation = () => {
           {t('skiplinkText')}
         </a>
       )}
-      <div className={className('chat__body')} ref={chatBodyContainer}>
+
+      <div className={className('chat__body')}>
         <div className={className('conversation__container')}>
           <PrivacyDisclaimer />
           <ol className={className('conversation')}>

package/src/javascripts/ui/components/conversation/event/card-component.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
-import { className } from 'lib/css'
 import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
-import { cardTypes, actionTypes } from 'ui/utils/seamly-utils'
+import { actionTypes, cardTypes } from 'ui/utils/seamly-utils'
+import { className } from 'lib/css'
 
 const CardComponent = ({
   id,

package/src/javascripts/ui/components/conversation/event/card-message.js

@@ -1,5 +1,5 @@
-import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import CardComponent from './card-component'
 

package/src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js

@@ -1,6 +1,6 @@
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
 import Icon from 'ui/components/layout/icon'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 
 export default function CarouselControls({
   items,

package/src/javascripts/ui/components/conversation/event/carousel-component/index.js

@@ -1,10 +1,10 @@
 import { createRef } from 'preact'
-import { useState, useEffect, useRef, useMemo } from 'preact/hooks'
-import { className } from 'lib/css'
-import { useGeneratedId } from 'ui/hooks/utility-hooks'
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import CarouselMessageSlide from 'ui/components/conversation/event/carousel-message/components/slide'
-import CarouselPagination from './components/pagination'
+import { useGeneratedId } from 'ui/hooks/utility-hooks'
+import { className } from 'lib/css'
 import CarouselControls from './components/controls'
+import CarouselPagination from './components/pagination'
 
 const defaultGetItemKey = (item, idx, prefix) => `${prefix}${idx}`
 const defaultGetItemLabel = (item) => item.label

package/src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js

@@ -1,6 +1,6 @@
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
 import CardComponent from 'ui/components/conversation/event/card-component'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 
 export default function CarouselMessageSlide({
   item: slide,

package/src/javascripts/ui/components/conversation/event/carousel-message/index.js

@@ -1,5 +1,5 @@
-import MessageContainer from 'ui/components/conversation/message-container'
 import CarouselComponent from 'ui/components/conversation/event/carousel-component'
+import MessageContainer from 'ui/components/conversation/message-container'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import CarouselMessageSlide from './components/slide'
 

package/src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-context.ts

@@ -0,0 +1,12 @@
+import { RefObject, createContext } from 'preact'
+import { MutableRef } from 'preact/hooks'
+
+const ChatScrollContext = createContext<{
+  eventRefs: Record<string, RefObject<HTMLElement>>
+  unreadIds: string[]
+  scrollToRef: () => void
+  scrollToBottom: () => void
+  containerRef: MutableRef<HTMLDivElement>
+}>(null)
+
+export default ChatScrollContext

package/src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-provider.tsx

@@ -0,0 +1,46 @@
+import { RefObject, createRef } from 'preact'
+import { useMemo } from 'preact/hooks'
+import ChatScrollContext from 'ui/components/conversation/event/chat-scroll/chat-scroll-context'
+import UnreadMessagesButton from 'ui/components/conversation/event/chat-scroll/unread-messages-button'
+import useChatScroll from 'ui/components/conversation/use-chat-scroll'
+import { useEvents } from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+
+const ChatScrollProvider = ({ children }) => {
+  const events = useEvents()
+  const eventRefs = useMemo(
+    () =>
+      events.reduce<Record<string, RefObject<HTMLElement>>>((acc, value) => {
+        acc[value.payload.id] = createRef()
+        return acc
+      }, {}),
+    [events],
+  )
+
+  const { scrollToRef, scrollToBottom, containerRef, unreadIds } =
+    useChatScroll(eventRefs)
+
+  return (
+    <ChatScrollContext.Provider
+      value={{
+        eventRefs,
+        unreadIds,
+        scrollToRef,
+        scrollToBottom,
+        containerRef,
+      }}
+    >
+      <div className={className('chat__container')}>
+        <div
+          className={className('chat__container__scroll-area')}
+          ref={containerRef}
+        >
+          {children}
+        </div>
+        <UnreadMessagesButton />
+      </div>
+    </ChatScrollContext.Provider>
+  )
+}
+
+export default ChatScrollProvider