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

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')}

package/src/javascripts/ui/components/suggestions/index.js

@@ -1,4 +1,5 @@
 import { useUserHasResponded } from 'domains/app/hooks'
+import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
@@ -29,6 +30,7 @@ const Suggestions = ({ isAside = false }) => {
   const { t } = useI18n()
   const { sendAction, addMessageBubble } = useSeamlyCommands()
   const { isOpen, setVisibility } = useVisibility()
+  const { showSuggestions } = useConfig()
   // a11y hooks
   const sectionId = useGeneratedId()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
@@ -41,7 +43,7 @@ const Suggestions = ({ isAside = false }) => {
   // data hooks
   const userHasResponded = useUserHasResponded()
   const payload = useSeamlyServiceData('suggestion')
-  const [eventBody] = useTranslatedEventData({ payload })
+  const { body: eventBody } = useTranslatedEventData({ payload })
   const suggestions = useMemo(
     () => (payload && !hasInterrupt ? eventBody : []),
     [payload, hasInterrupt, eventBody],
@@ -56,7 +58,8 @@ const Suggestions = ({ isAside = false }) => {
     ? (userHasResponded || isOpen) && !isAside
     : userHasResponded
   const prevHideSuggestions = useRef(hideSuggestions)
-  const showSuggestionsContainer = hasSuggestions && !hideSuggestions
+  const showSuggestionsContainer =
+    hasSuggestions && !hideSuggestions && showSuggestions
   const renderedSuggestions = hasSuggestions
     ? suggestions
     : previousRenderedSuggestions.current

package/src/javascripts/ui/hooks/seamly-state-hooks.js

@@ -65,6 +65,12 @@ export const selectEvents = createSelector(
 )
 export const useEvents = () => useSelector(selectEvents)
 
+export const selectEventIds = createSelector(selectEvents, (events) => {
+  return events.map((event) => event.payload.id)
+})
+
+export const useEventsIds = () => useSelector(selectEventIds)
+
 export const useSeamlyIsLoading = () => useSeamlyStateContext().isLoading
 
 export const useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles

package/src/stylesheets/5-components/_message-carousel.scss

@@ -41,6 +41,7 @@
 .#{$n}-carousel-controls {
   display: flex;
   position: relative;
+  align-items: center;
   justify-content: space-between;
   width: 100%;
   height: fit-content;
@@ -51,6 +52,7 @@
 /* stylelint-disable no-descending-specificity */
 .#{$n}-carousel-controls .#{$n}-button {
   display: flex;
+  flex: 0 0 $buttonsize;
   align-items: center;
   justify-content: center;
   width: $buttonsize;
@@ -89,21 +91,21 @@
   padding: 0 $spacer * 0.5;
 }
 
-.#{$n}-carousel-pagination {
+.#{$n}-carousel-pagination__wrapper {
   display: flex;
   position: relative;
   flex-direction: row;
   justify-content: center;
-  width: 100%;
-  margin: 0 auto;
-  padding: 0;
 }
 
-.#{$n}-carousel-pagination__wrapper {
+.#{$n}-carousel-pagination {
   display: flex;
   position: relative;
-  flex-direction: row;
+  flex-flow: row wrap;
   justify-content: center;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
 }
 
 .#{$n}-carousel-pagination__item {
@@ -114,8 +116,8 @@
 .#{$n}-carousel-pagination__button {
   display: block;
   position: relative;
-  width: $buttonsize-small;
-  height: $buttonsize-small;
+  width: $buttonsize-small * 0.75;
+  height: $buttonsize-small * 0.75;
   padding: 0;
   border: 0;
   border-radius: 0;