@seamly/web-ui 20.8.0-alpha.1 → 20.8.0-beta.2

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

@@ -1,15 +1,53 @@
-import { TranslationState } from 'domains/translations/translations.types'
-import { createSlice, nanoid } from '@reduxjs/toolkit'
+import {
+  TranslationEvent,
+  TranslationState,
+} from 'domains/translations/translations.types'
+import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit'
 import { initializeApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
+import { addEvent, orderHistory, setHistory } from 'domains/store/slice'
+import { ChannelEvent } from 'domains/store/store.types'
 
 export const translationsInitialState: TranslationState = {
   isActive: false,
   currentLocale: undefined,
   isAvailable: false,
   languages: [],
-  originalPayloadIds: [],
   containerId: nanoid(),
+  translatedEventGroups: {},
+}
+
+const getLastGroupId = (events: ChannelEvent[], id: string) => {
+  const eventGroup = [...events].reduce<Record<string, string[]>>(
+    (acc, { payload }, _index, arr) => {
+      if (acc[id]) {
+        // Splice to break early (make the reducer think we are done)
+        // This is needed to avoid events of other groups from being added to the array.
+        // @ts-ignore
+        if (payload?.type === 'divider' && payload?.body?.translationEnabled) {
+          arr.splice(0)
+          return acc
+        }
+
+        acc[id].push(payload.id)
+      }
+
+      if (payload.id === id) acc[id] = []
+
+      return acc
+    },
+    {},
+  )
+
+  const [[groupId, eventIds]] = Object.entries(eventGroup)
+
+  const lastGroupId = events
+    //@ts-ignore
+    .filter((event) => event.payload?.type === 'divider')
+    .map((event) => event.payload.id)
+    .at(-1)
+
+  return { lastGroupId, groupId, eventIds }
 }
 
 export const translationSlice = createSlice({
@@ -24,29 +62,31 @@ export const translationSlice = createSlice({
       state.isActive = false
       state.currentLocale = undefined
     },
-    enableEvent: (state, { payload }) => {
-      if (!state.originalPayloadIds.includes(payload)) {
-        return
-      }
-      state.originalPayloadIds = state.originalPayloadIds.filter(
-        (id) => id !== payload,
-      )
+    enableEventsTranslation: (
+      state,
+      {
+        payload: { events, id },
+      }: PayloadAction<{ events: ChannelEvent[]; id: string }>,
+    ) => {
+      delete state.translatedEventGroups[id]
+
+      const { lastGroupId } = getLastGroupId(events, id)
+      state.lastGroupId = lastGroupId
     },
-    disableEvent: (state, { payload }) => {
-      if (state.originalPayloadIds.includes(payload)) {
-        return
-      }
-      state.originalPayloadIds.push(payload)
+    disableEventsTranslation: (
+      state,
+      {
+        payload: { events, id },
+      }: PayloadAction<{ events: ChannelEvent[]; id: string }>,
+    ) => {
+      const { lastGroupId, groupId, eventIds } = getLastGroupId(events, id)
+
+      state.lastGroupId = lastGroupId
+      state.translatedEventGroups[groupId] = eventIds
     },
   },
   extraReducers: (builder) => {
     builder
-      .addCase(initializeApp.fulfilled, (state, { payload }) => {
-        if (!payload.config?.context?.translationLocale) return
-
-        state.isActive = true
-        state.currentLocale = payload.locale
-      })
       .addCase(initializeConfig.fulfilled, (state, { payload }) => {
         const feature = payload?.features?.translation
         if (!feature) return
@@ -54,14 +94,21 @@ export const translationSlice = createSlice({
         state.isAvailable = feature.enabled === true
         state.languages = feature.languages
       })
+      .addCase(addEvent, (state, { payload }) => {
+        if (state.translatedEventGroups[state.lastGroupId]) {
+          state.translatedEventGroups[state.lastGroupId].push(
+            payload.payload.id,
+          )
+        }
+      })
   },
 })
 
 export const {
   enableTranslation,
   disableTranslation,
-  enableEvent,
-  disableEvent,
+  enableEventsTranslation,
+  disableEventsTranslation,
 } = translationSlice.actions
 
 export default translationSlice.reducer

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

@@ -2,11 +2,18 @@ import { operations } from 'schema'
 
 export type Languages =
   operations['getAccountConfig']['responses']['201']['content']['application/json']['config']['features']['translation']['languages']
+
+export type TranslationEvent = {
+  id: string
+  items: string[]
+}
+
 export interface TranslationState {
   isActive: boolean
   currentLocale?: string
   isAvailable: boolean
   languages: Languages
-  originalPayloadIds: string[]
   containerId: string
+  translatedEventGroups: Record<string, string[]>
+  lastGroupId?: string
 }

package/src/javascripts/schema.ts

@@ -406,11 +406,7 @@ export interface components {
        * @example true
        */
       persist?: boolean
-      /**
-       * @description Name of the attached service
-       * @example bot
-       */
-      service?: string
+      service?: components['schemas']['Service']
       transactionId?: components['schemas']['TransactionId']
       /** @description In case a translations was active when this message originated, this object will contain the translated message in the translationLocale locale. */
       translatedBody?: {
@@ -713,11 +709,6 @@ export interface components {
        * @example image/jpeg
        */
       contentType?: string
-      /**
-       * @description Timestamp until when the file is available for download (in microseconds).
-       * @example 1661165549122131
-       */
-      deleteAt?: number
       /**
        * @description Filename of the upload
        * @example dog.jpg
@@ -1453,3 +1444,5 @@ export interface operations {
     }
   }
 }
+
+export interface external {}

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

@@ -50,8 +50,7 @@ const StyleGuideApp = ({
       const { headingText } = mainState[feature]
       setSelectedStateDescription(headingText)
       const bareState = mainState[feature][layoutMode]
-      const { overrideMessages, showFaq } = bareState.config
-
+      const { overrideMessages, showFaq, showSuggestions } = bareState.config
       const agent = participants.find(
         (participant) => participant.id === 'agent',
       )
@@ -66,6 +65,7 @@ const StyleGuideApp = ({
           layoutMode: bareState.config.layoutMode,
           ...(overrideMessages ? { messages: overrideMessages } : {}),
           showFaq,
+          showSuggestions,
         },
         headerTitles: {
           ...bareState.headerTitles,

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

@@ -14,6 +14,7 @@ const baseState = {
     hideOnNoUserResponse: false,
     showFaq: false,
     showDisclaimer: false,
+    showSuggestions: true,
   },
   initialState: {},
   unreadEvents: 0,
@@ -126,6 +127,32 @@ const newTranslationDividerStart = {
     type: 'divider',
   },
 }
+
+const newTranslationDividerStartTwo = {
+  type: 'info',
+  payload: {
+    body: {
+      language: 'Nederlands',
+      subtype: 'new_translation',
+      text: '[NL] Automatic translation to Dutch started. Please note that automatic translations may contain errors.',
+      translationEnabled: true,
+      translationLocale: 'nl',
+    },
+    fromClient: false,
+    fromHistory: true,
+    id: randomId(),
+    occurredAt: 1625658300534259,
+    participant: null,
+    service: {
+      meta: {},
+      name: null,
+      serviceSessionId: null,
+    },
+    transactionId: null,
+    translatedBody: null,
+    type: 'divider',
+  },
+}
 const newTranslationDividerStop = {
   type: 'info',
   payload: {
@@ -736,7 +763,7 @@ const translationsSlice = {
   currentLocale: undefined,
   isAvailable: false,
   languages: [],
-  originalPayloadIds: [],
+  translatedEventGroups: {},
   containerId: randomId(),
 }
 
@@ -1736,7 +1763,7 @@ const standardState = {
       userMessage,
       textMessageBoldItalicUnderline,
       newTopicDivider,
-      newTranslationDividerStart,
+      newTranslationDividerStartTwo,
       newTranslationDividerStop,
       imageMessage,
       fileDownloadAgentMessage,
@@ -1752,13 +1779,44 @@ const standardState = {
       choicePromptMessage,
       ctaMessage,
       newTranslationDividerStop,
-      newTranslationDividerStart,
     ].map(addTranslationData),
     translations: {
       ...translationsSlice,
       currentLocale: 'nl',
       isActive: true,
       isAvailable: true,
+      translatedEventGroups: {
+        [newTranslationDividerStart.payload.id]: [
+          infoMessage,
+          shortTextMessage,
+          {
+            ...choicePromptMessage,
+            payload: {
+              ...choicePromptMessage.payload,
+              id: `${choicePromptMessage.payload.id}XXX`,
+            },
+          },
+          longTextMessage,
+          userMessage,
+          textMessageBoldItalicUnderline,
+          newTopicDivider,
+        ].map((p) => p.payload.id),
+        [newTranslationDividerStartTwo.payload.id]: [
+          imageMessage,
+          fileDownloadAgentMessage,
+          deletedFileDownloadAgentMessage,
+          userMessageLong,
+          videoMessage,
+          textMessageWithLinks,
+          textMessageWithLongLink,
+          imageMessageWithLightbox,
+          fileDownloadUserMessage,
+          emptyUrlFileDownloadUserMessage,
+          textMesageWithBullets,
+          choicePromptMessage,
+          ctaMessage,
+        ].map((p) => p.payload.id),
+      },
       languages: [
         { locale: 'nl', nativeName: 'Dutch' },
         { locale: 'en', nativeName: 'English' },

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

@@ -1,8 +1,9 @@
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
-import { useEffect, useRef } from 'preact/hooks'
+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,
@@ -51,10 +52,13 @@ const Conversation = () => {
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
   const loadedImageEventIds = useLoadedImageEventIds()
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const containerElement = chatBodyContainer.current
     if (containerElement) {
-      containerElement.scrollTop = containerElement.scrollHeight
+      requestAnimationFrame(async () => {
+        await timeout(30) // Wait for next frame tick
+        containerElement.scrollTop = containerElement.scrollHeight
+      })
     }
   }, [events, isLoading, isOpen, loadedImageEventIds])
 

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

@@ -4,7 +4,7 @@ import { useTranslatedEventData } from 'domains/translations/hooks'
 import CardComponent from './card-component'
 
 const CardMessage = ({ event }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const descriptionId = useGeneratedId()
 
   return (

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

@@ -6,7 +6,7 @@ import CarouselMessageSlide from './components/slide'
 const getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`
 const getItemLabel = (item) => item.title
 const CarouselMessage = ({ event }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const slides = body.cards
 
   return (

package/src/javascripts/ui/components/conversation/event/choice-prompt.js

@@ -19,7 +19,7 @@ export const useChoicePrompt = (event) => {
   const { sendAction, addMessageBubble, addDivider } = useSeamlyCommands()
   const { activeServiceSessionId } = useSeamlyServiceInfo()
   const lastEventId = useLastMessageEventId()
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const { service } = payload
 
   const subEvent = useMemo(() => {

package/src/javascripts/ui/components/conversation/event/conversation-suggestions.js

@@ -1,5 +1,6 @@
 import { useUserHasResponded } from 'domains/app/hooks'
 import { setHasResponded } from 'domains/app/slice'
+import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { className } from 'lib/css'
@@ -12,7 +13,7 @@ import { actionTypes } from 'ui/utils/seamly-utils'
 
 export const useSuggestions = (event) => {
   const { payload } = event
-  const [suggestions] = useTranslatedEventData(event)
+  const { body: suggestions } = useTranslatedEventData(event)
 
   return {
     suggestions,
@@ -26,6 +27,7 @@ const ConversationSuggestions = ({ event, ...props }) => {
   const userHasResponded = useUserHasResponded()
   const { sendAction, addMessageBubble } = useSeamlyCommands()
   const { suggestions, payload } = useSuggestions(event)
+  const { showSuggestions } = useConfig()
   const events = useEvents()
 
   const { t } = useI18n()
@@ -63,7 +65,12 @@ const ConversationSuggestions = ({ event, ...props }) => {
     [dispatch, sendAction, payload.id, addMessageBubble],
   )
 
-  if (!isExpanded || userHasResponded || !hasLastTransactionEvent) {
+  if (
+    !isExpanded ||
+    userHasResponded ||
+    !hasLastTransactionEvent ||
+    !showSuggestions
+  ) {
     return null
   }
 

package/src/javascripts/ui/components/conversation/event/cta.js

@@ -7,7 +7,7 @@ import { useTranslatedEventData } from 'domains/translations/hooks'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
 
 const Cta = ({ event }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const eventClick = useEventLinkClickHandler(event.payload.id)
   const { emitEvent } = useSeamlyCommands()
 

package/src/javascripts/ui/components/conversation/event/divider/variants/new-translation.js

@@ -5,17 +5,40 @@ import {
   useTranslations,
   useLocaleNativeName,
 } from 'domains/translations/hooks'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  enableEventsTranslation,
+  disableEventsTranslation,
+} from 'domains/translations/slice'
+import { useCallback } from 'preact/hooks'
+import { useEvents } from 'ui/hooks/seamly-hooks'
 
 const NewTranslationDivider = ({ event }) => {
   const { t } = useI18n()
-  const { translationEnabled, translationLocale, text } = event.payload.body
+  const events = useEvents()
+  const {
+    body: { translationEnabled, translationLocale, text },
+    id,
+  } = event.payload
   const { enableTranslations } = useTranslations()
   const localeNativeName = useLocaleNativeName(translationLocale)
+  const translatedEventGroups = useSelector(
+    (state) => state.translations.translatedEventGroups,
+  )
+
+  const dispatch = useDispatch()
+  const toggleTranslations = useCallback(() => {
+    if (!translatedEventGroups[id]) {
+      dispatch(disableEventsTranslation({ events, id }))
+      return
+    }
+
+    dispatch(enableEventsTranslation({ events, id }))
+  }, [dispatch, events, id, translatedEventGroups])
 
   const handleRestartButtonclick = () => {
     enableTranslations(translationLocale)
   }
-
   return (
     <EventDivider iconName="newTranslation" dividerType="newtranslation">
       <p className={className('divider__title')}>
@@ -27,10 +50,23 @@ const NewTranslationDivider = ({ event }) => {
         )}
       </p>
       {translationEnabled ? (
-        <p>{text}</p>
+        <>
+          <p>{text}</p>
+          <button
+            className={className('button', 'button--secondary')}
+            onClick={toggleTranslations}
+          >
+            {t(
+              !translatedEventGroups[id]
+                ? 'translations.toggle.hideTranslationsButtonText'
+                : 'translations.toggle.showTranslationsButtonText',
+            )}
+          </button>
+        </>
       ) : (
         <button
           className={className('button', 'button--secondary')}
+          data-testid="restartTranslationButton"
           onClick={handleRestartButtonclick}
         >
           {t('translations.divider.restartButtonText')}

package/src/javascripts/ui/components/conversation/event/image.js

@@ -6,7 +6,7 @@ import MessageContainer from 'ui/components/conversation/message-container'
 import ImageLightbox from './image-lightbox'
 
 const Image = ({ event, descriptorId, ...props }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const { description, url, isZoomable } = body
   const [showLighbox, setShowLightbox] = useState(false)
   const dispatch = useDispatch()

package/src/javascripts/ui/components/conversation/event/participant.js

@@ -3,7 +3,7 @@ import { useTranslatedEventData } from 'domains/translations/hooks'
 
 const Participant = ({ event }) => {
   const { participant } = event.payload
-  const [introduction] = useTranslatedEventData(event)
+  const { body: introduction } = useTranslatedEventData(event)
 
   if (!introduction) {
     return null

package/src/javascripts/ui/components/conversation/event/splash.js

@@ -4,7 +4,7 @@ import MessageContainer from 'ui/components/conversation/message-container'
 
 const Splash = ({ event, ...props }) => {
   const { payload } = event
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const eventClick = useEventLinkClickHandler(payload.id)
 
   return (

package/src/javascripts/ui/components/conversation/event/text.js

@@ -4,7 +4,7 @@ import { useTranslatedEventData } from 'domains/translations/hooks'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
 
 const Text = ({ event, ...props }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const eventClick = useEventLinkClickHandler(event.payload.id)
 
   const containerProps = useMemo(() => {

package/src/javascripts/ui/components/conversation/event/translation.js

@@ -4,7 +4,7 @@ import { useTranslatedEventData } from 'domains/translations/hooks'
 
 const Translation = ({ event, ...props }) => {
   const { t } = useI18n()
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   return (
     <MessageContainer type="text" event={event} {...props}>
       {t(body.key.join('.'), body.variables)}

package/src/javascripts/ui/components/conversation/event/upload.js

@@ -21,7 +21,7 @@ const UploadContent = ({ children, url, target }) =>
 
 const Upload = ({ event, ...props }) => {
   const { t } = useI18n()
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const { fromClient } = event.payload
   const { filename, url } = body
 

package/src/javascripts/ui/components/conversation/event/video.js

@@ -4,7 +4,7 @@ import { useTranslatedEventData } from 'domains/translations/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
 
 const Video = ({ event, descriptorId, ...props }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const { description, url } = body
   const classNames = useSeamlyMessageContainerClassNames(event)
 

package/src/javascripts/ui/components/conversation/message-container.js

@@ -1,12 +1,10 @@
 import { className } from 'lib/css'
 import { useSeamlyMessageContainerClassNames } from 'ui/hooks/component-helper-hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
-import { useI18n } from 'domains/i18n/hooks'
 import EventParticipant from './event/event-participant'
 
 function MessageContainer({
   showParticipant = true,
-  showTranslationToggle = true,
   event,
   type,
   modifiers,
@@ -16,10 +14,8 @@ function MessageContainer({
   ...props
 }) {
   const classNames = useSeamlyMessageContainerClassNames(event)
-  const { t } = useI18n()
 
-  const [, { hasTranslation, isTranslated, toggleTranslation, locale }] =
-    useTranslatedEventData(event)
+  const { hasTranslation, isTranslated, locale } = useTranslatedEventData(event)
 
   if (type) {
     classNames.push(`message--type-${type}`)
@@ -60,24 +56,6 @@ function MessageContainer({
             {info}
           </div>
         )}
-        {showTranslationToggle && hasTranslation && (
-          <div className={className('message__translation-info')}>
-            <button
-              className={className(
-                'message__translation-toggle',
-                'button',
-                'button--secondary',
-              )}
-              onClick={toggleTranslation}
-            >
-              {t(
-                isTranslated
-                  ? 'translations.toggle.hideButtonText'
-                  : 'translations.toggle.showButtonText',
-              )}
-            </button>
-          </div>
-        )}
       </div>
     </>
   )

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

@@ -123,12 +123,13 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
             case 'system':
               if (payload.type === 'service_changed') {
                 const { serviceSettings, ...eventPayload } = payload
-                const { uploads, entry } = serviceSettings
+                const { entry } = serviceSettings
+                const { upload } = entry.options
 
                 dispatch(
                   setFeatureEnabledState({
                     key: featureKeys.uploads,
-                    enabled: !!(uploads && uploads.enabled),
+                    enabled: !!(upload && upload.enabled),
                   }),
                 )
 

package/src/javascripts/ui/components/faq/faq.js

@@ -32,7 +32,9 @@ const Faq = () => {
   const { hasPrompt, continueChat } = useSeamlyResumeConversationPrompt()
 
   const lastFaqEventPayload = useSeamlyServiceData('suggestion')
-  const [eventBody] = useTranslatedEventData({ payload: lastFaqEventPayload })
+  const { body: eventBody } = useTranslatedEventData({
+    payload: lastFaqEventPayload,
+  })
   const faqs = useMemo(() => {
     const newFaqs = lastFaqEventPayload && !hasInterrupt ? eventBody : []
     const itemBaseClass = `faqs__item`

package/src/javascripts/ui/components/options/options-button.js

@@ -43,10 +43,11 @@ const OptionsButton = () => {
   useEffect(() => {
     if (menuIsOpen && !prevMenuIsOpen.current) {
       requestAnimationFrame(async () => {
-        await timeout(180) // Wait for next 3 frame ticks
+        await timeout(60) // Wait for next frame tick
         const firstActiveOptionIndex = menuOptions.findIndex(
           (option) => option.available,
         )
+
         const focusIndex =
           firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex
         focusElement(menuItemButtons.current[focusIndex])
@@ -155,6 +156,7 @@ const OptionsButton = () => {
   if (!optionsLength) {
     return null
   }
+
   return (
     <div
       className={className('options__container')}