@seamly/web-ui 21.0.7 → 22.0.0-beta.1

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

@@ -55,6 +55,7 @@ const baseState = {
     optionsOverride: {},
   },
   currentUploads: [],
+  processingFileUploads: [],
 }
 
 const avatar =
@@ -701,12 +702,28 @@ const fileDownloadAgentMessage = {
   },
 }
 
+const fileUploadAgentMessage = {
+  type: 'message',
+  payload: {
+    ...fileDownloadPayload,
+    fromClient: false,
+    participant: 'agent',
+    id: randomId(),
+  },
+}
+
+sessionStorage.setItem(
+  `image-${fileDownloadAgentMessage.payload.id}`,
+  fileDownloadAgentMessage.payload.body.url,
+)
+
 const deletedFileDownloadAgentMessage = {
   ...fileDownloadAgentMessage,
   payload: {
     ...fileDownloadAgentMessage.payload,
     body: {
       ...fileDownloadAgentMessage.payload.body,
+      url: undefined,
     },
     id: randomId(),
   },
@@ -722,6 +739,11 @@ const fileDownloadUserMessage = {
   },
 }
 
+sessionStorage.setItem(
+  `image-${fileDownloadUserMessage.payload.id}`,
+  fileDownloadUserMessage.payload.body.url,
+)
+
 const emptyUrlFileDownloadUserMessage = {
   ...fileDownloadUserMessage,
   payload: {
@@ -1143,6 +1165,7 @@ const standardState = {
       userMessageWithLinks,
       newTopicDivider,
       imageMessage,
+      fileUploadAgentMessage,
       fileDownloadAgentMessage,
       deletedFileDownloadAgentMessage,
       userMessageLong,
@@ -1219,7 +1242,9 @@ const standardState = {
       imageMessage,
       videoMessage,
       imageMessageWithLightbox,
+      fileUploadAgentMessage,
       fileDownloadAgentMessage,
+      fileDownloadUserMessage,
     ],
   },
   systemMessages: {
@@ -1495,6 +1520,46 @@ const standardState = {
       optionsOverride: {},
     },
   },
+  inputLabel: {
+    category: categoryKeys.features,
+    headingText: 'Input label',
+    ...baseState,
+    entryMeta: {
+      default: 'text',
+      active: 'text',
+      options: {
+        text: { limit: null },
+      },
+      optionsOverride: {
+        text: {
+          label: 'What is your name?',
+          limit: null,
+          placeholder: 'Please enter your name',
+        },
+      },
+    },
+  },
+  abortTransactional: {
+    category: categoryKeys.features,
+    headingText: 'Abort transaction',
+    ...baseState,
+    events: [shortTextMessage, userMessage],
+    entryMeta: {
+      default: 'text',
+      active: 'text',
+      options: {
+        text: { limit: null },
+      },
+      optionsOverride: {},
+      actions: {
+        abortTransaction: {
+          label: 'Ask for another question',
+          topicFallbackMessage: 'Oops...',
+          topicName: 'abort_transactional',
+        },
+      },
+    },
+  },
   fileUploadToggle: {
     category: categoryKeys.uploads,
     headingText: 'File upload toggle button',

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

@@ -1,8 +1,9 @@
+import { useSelector } from 'react-redux'
 import Icon from 'ui/components/layout/icon'
 import OptionsButton from 'ui/components/options/options-button'
 import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import TranslationsOptionsButton from 'domains/translations/components/options-button'
 import {
   useLocaleNativeName,
@@ -13,14 +14,14 @@ import { className } from 'lib/css'
 export default function AppOptions() {
   const { menuOptions, allowOptionSelection } = useSeamlyOptions()
   const { isAvailable: isTranslationsAvailable } = useTranslations()
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const { t, locale } = useI18n()
   const localeNativeName = useLocaleNativeName(locale)
 
   if (
     (!isTranslationsAvailable &&
       (!allowOptionSelection || !menuOptions.length)) ||
-    hasInterrupt
+    hasError
   ) {
     return null
   }

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

@@ -8,6 +8,7 @@ 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 AbortTransactionButton from '../entry/abort-transaction-button/abort-transaction-button'
 import ComponentFilter from './component-filter'
 import Event from './event/event'
 import Loader from './loader'
@@ -77,6 +78,7 @@ const Conversation = () => {
               <Events />
             </ComponentFilter>
             {isLoading && <Loader />}
+            <AbortTransactionButton />
           </ol>
         </div>
       </div>

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

@@ -11,6 +11,8 @@ const ChatScrollProvider = ({ children }) => {
   const eventRefs = useMemo(
     () =>
       events.reduce<Record<string, RefObject<HTMLElement>>>((acc, value) => {
+        if (!value.payload.id) return acc
+
         acc[value.payload.id] = createRef()
         return acc
       }, {}),

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

@@ -31,7 +31,7 @@ export const useChoicePrompt = (event) => {
         body: event.payload.body?.prompt,
         translatedBody: event.payload.translatedBody && {
           ...event.payload.translatedBody,
-          data: event.payload.translatedBody.data.prompt,
+          data: event.payload.translatedBody.prompt,
         },
       },
     }

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

@@ -17,7 +17,7 @@ const Text = ({ event, ...props }) => {
     return {
       bodyProps: {
         dangerouslySetInnerHTML: {
-          __html: body.text,
+          __html: body?.data?.text || body.text,
         },
       },
     }

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

@@ -1,16 +1,53 @@
 import { useMemo } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import MessageContainer from 'ui/components/conversation/message-container'
 import Icon from 'ui/components/layout/icon'
 import { useI18n } from 'domains/i18n/hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { className } from 'lib/css'
 
+const PROCESSING_IMAGE = 'PROCESSING_IMAGE'
+
+const useImageFromStorage = (currentFileId) => {
+  const { processingFileUploads } = useSelector(({ state }) => state)
+
+  return useMemo(() => {
+    const isProcessingImg = processingFileUploads.some(
+      (fileId) => fileId === currentFileId,
+    )
+
+    if (isProcessingImg) return PROCESSING_IMAGE
+
+    try {
+      return sessionStorage.getItem(`image-${currentFileId}`)
+    } catch (error) {
+      return undefined
+    }
+  }, [currentFileId, processingFileUploads])
+}
+
+const UploadedImage = ({ img, filename }) => {
+  const { t } = useI18n()
+  const srText = t('fileUpload.srFileUploadedText', { fileName: filename })
+
+  return (
+    <>
+      <span className={className(['download', 'download--preview'])}>
+        <img src={img} alt={srText} />
+        <span aria-hidden="true" className={className('file-download')}>
+          {filename}
+        </span>
+      </span>
+    </>
+  )
+}
+
 const UploadContent = ({ children, url, target }) =>
   url ? (
     <a
       href={url}
       download
-      target={target || undefined}
+      target={target}
       className={className(['download', 'download-link'])}
     >
       {children}
@@ -22,8 +59,9 @@ const UploadContent = ({ children, url, target }) =>
 const Upload = ({ event, ...props }) => {
   const { t } = useI18n()
   const { body } = useTranslatedEventData(event)
-  const { fromClient } = event.payload
+  const { fromClient, id } = event.payload
   const { filename, url } = body
+  const img = useImageFromStorage(id)
 
   const srText = useMemo(
     () =>
@@ -35,13 +73,16 @@ const Upload = ({ event, ...props }) => {
 
   return (
     <MessageContainer event={event} type="upload" {...props}>
-      <UploadContent url={url} target={!fromClient ? '_blank' : undefined}>
-        <Icon name="download" size="16" />
-        <span aria-hidden="true" className={className('file-download')}>
-          {filename}
-        </span>
-        <span className={className('visually-hidden')}>{srText}</span>
-      </UploadContent>
+      {img && img !== PROCESSING_IMAGE ? (
+        <UploadedImage img={img} filename={filename} />
+      ) : (
+        <UploadContent url={url} target={!fromClient ? '_blank' : undefined}>
+          <Icon name="download" size="16" alt={srText} />
+          <span aria-hidden="true" className={className('file-download')}>
+            {filename}
+          </span>
+        </UploadContent>
+      )}
     </MessageContainer>
   )
 }

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

@@ -37,8 +37,8 @@ const useChatScroll = (
   const isLoading = useSeamlyIsLoading()
   const { isOpen } = useVisibility()
   const loadedImageEventIds = useLoadedImageEventIds()
-  const isLastEventFromClient = useSelector(
-    (state: RootState) => state.state.isLastEventFromClient,
+  const { processingFileUploads, isLastEventFromClient } = useSelector(
+    ({ state }: RootState) => state,
   )
 
   useEffect(() => {
@@ -84,6 +84,7 @@ const useChatScroll = (
     isLoading,
     isOpen,
     loadedImageEventIds,
+    processingFileUploads,
     scrollToBottom,
   ])
 

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

@@ -24,6 +24,7 @@ import {
   setHistory,
   setIsLoading,
   setParticipant,
+  setProactiveMessages,
   setServiceDataItem,
   setServiceEntryMetadata,
 } from 'domains/store/slice'
@@ -73,7 +74,7 @@ const SeamlyEventSubscriber = () => {
         channel?.leave()
       }
     }
-    return () => {}
+    return () => undefined
   }, [api, api.connectionInfo, api.conversation])
 
   useEffect(() => {
@@ -201,7 +202,7 @@ const SeamlyEventSubscriber = () => {
             case 'system':
               if (payload.type === 'service_changed') {
                 const { serviceSettings, ...eventPayload } = payload
-                const { entry } = serviceSettings
+                const { entry, proactiveMessages } = serviceSettings
                 const { upload } = entry.options
 
                 dispatch(
@@ -211,6 +212,10 @@ const SeamlyEventSubscriber = () => {
                   }),
                 )
 
+                dispatch(
+                  setProactiveMessages(proactiveMessages.enabled || false),
+                )
+
                 dispatch(setServiceEntryMetadata(entry))
                 if (payload.serviceSessionId) {
                   dispatch(setActiveService(payload.serviceSessionId))
@@ -244,6 +249,7 @@ const SeamlyEventSubscriber = () => {
                   )
                   break
                 case 'conversation_erred':
+                case 'attach_channel_erred':
                   const seamlyGeneralError = new SeamlyGeneralError(event)
                   dispatch(
                     setInterrupt({
@@ -283,6 +289,10 @@ const SeamlyEventSubscriber = () => {
 
         const { channel } = api.conversation
 
+        if (messageChannelRef.current) {
+          channel?.off('message', messageChannelRef.current)
+        }
+
         messageChannelRef.current = channel.on('message', (payload) => {
           if (!EMITTABLE_MESSAGE_TYPES.includes(payload.type)) {
             return payload
@@ -301,13 +311,7 @@ const SeamlyEventSubscriber = () => {
 
         return true
       })
-
-      return () => {
-        api.conversation.channel?.off('message', messageChannelRef.current)
-      }
     }
-
-    return () => undefined
   }, [api, api.connectionInfo, api.conversation.channel, eventBus])
 
   useEffect(() => {
@@ -315,6 +319,10 @@ const SeamlyEventSubscriber = () => {
       api.conversation.onConnection(({ connected }) => {
         if (!connected) return false
 
+        if (syncChannelRef.current) {
+          api.conversation.channel?.off('sync', syncChannelRef.current)
+        }
+
         syncChannelRef.current = api.conversation.channel.on(
           'sync',
           (payload) => {
@@ -348,13 +356,7 @@ const SeamlyEventSubscriber = () => {
 
         return true
       })
-
-      return () => {
-        api.conversation.channel?.off('sync', syncChannelRef.current)
-      }
     }
-
-    return () => undefined
   }, [api, api.connectionInfo, api.conversation.channel, events, dispatch])
 
   return null

package/src/javascripts/ui/components/core/seamly-file-upload.tsx

@@ -0,0 +1,156 @@
+import { useCallback } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
+import { useSeamlyApiContext, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import {
+  doneProcessingImage,
+  registerUpload,
+  setUploadComplete,
+  setUploadError,
+  setUploadProgress,
+  startProcessingImage,
+} from 'domains/store/slice'
+import { MessageUpload } from 'domains/store/store.types'
+import { randomId } from 'lib/id'
+
+const calculateImgSize = (img) => {
+  const MAX_WIDTH = 600
+  const MAX_HEIGHT = 600
+
+  const { height, width } = img
+  if (width > height && width > MAX_WIDTH) {
+    return [MAX_WIDTH, (height * MAX_WIDTH) / width]
+  }
+
+  if (height > MAX_HEIGHT) {
+    return [(width * MAX_HEIGHT) / height, MAX_HEIGHT]
+  }
+
+  return [width, height]
+}
+
+const resizeImage = (img) => {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  const [width, height] = calculateImgSize(img)
+  canvas.width = width
+  canvas.height = height
+
+  ctx.drawImage(img, 0, 0, width, height)
+
+  return canvas.toDataURL()
+}
+
+const toBase64 = (file): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () =>
+      typeof reader.result === 'string' ? resolve(reader.result) : undefined
+    reader.onerror = (error) => reject(error)
+  })
+
+const SeamlyFileUpload = ({ children }) => {
+  const { t } = useI18n()
+  const dispatch = useDispatch()
+  const api = useSeamlyApiContext()
+  const { addUploadBubble } = useSeamlyCommands()
+
+  const addImageToSessionStorage = useCallback(
+    async (file, fileId) => {
+      dispatch(startProcessingImage(fileId))
+      const base64 = await toBase64(file)
+      const img = new Image()
+
+      img.src = base64
+
+      await img.decode()
+      const newDataUri = resizeImage(img)
+
+      try {
+        sessionStorage.setItem(`image-${fileId}`, newDataUri)
+      } catch (error) {
+        // Nothing to do!
+      } finally {
+        dispatch(doneProcessingImage(fileId))
+      }
+    },
+    [dispatch],
+  )
+
+  const onUploadFileHandler = useCallback(
+    (file) => {
+      const fileId = randomId()
+
+      const uploadHandle = api.uploadFile(
+        file,
+        (p) => {
+          dispatch(setUploadProgress({ fileId, progress: Math.ceil(p) }))
+        },
+        async (result: MessageUpload) => {
+          const {
+            id,
+            transactionId,
+            occurredAt,
+            body: { contentType, filename, filesize, url },
+          } = result
+
+          dispatch(setUploadComplete(fileId))
+          addUploadBubble(
+            id,
+            transactionId,
+            occurredAt,
+            contentType,
+            filename,
+            filesize,
+            url,
+          )
+
+          await addImageToSessionStorage(file, id)
+        },
+        (err) => {
+          const errorKey = err?.error || ''
+          let errorText
+
+          switch (errorKey) {
+            case 'file_uploads_are_disabled':
+              errorText = t('fileUpload.errors.unavailable')
+              break
+            case 'request_entity_too_large':
+              errorText = t('fileUpload.errors.tooLarge')
+              break
+            case 'file_has_invalid_mime_type':
+              errorText = t('fileUpload.errors.wrongType')
+              break
+            case 'virus_found':
+              errorText = t('fileUpload.errors.virusFound')
+              break
+            default:
+              errorText = t('fileUpload.errors.general')
+          }
+
+          dispatch(setUploadError({ fileId, errorText }))
+        },
+      )
+
+      dispatch(
+        registerUpload({
+          fileId,
+          fileName: file.name,
+          uploadHandle,
+        }),
+      )
+    },
+    [addImageToSessionStorage, addUploadBubble, api, dispatch, t],
+  )
+
+  return (
+    <SeamlyFileUploadContext.Provider value={onUploadFileHandler}>
+      {children}
+    </SeamlyFileUploadContext.Provider>
+  )
+}
+
+export default SeamlyFileUpload

package/src/javascripts/ui/components/core/seamly-instance-functions-loader.js

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useRef } from 'preact/hooks'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { userParticipantId } from 'config'
 import {
   useSeamlyActivityEventHandler,
@@ -12,7 +12,7 @@ import {
 import { actionTypes, sourceTypes } from 'ui/utils/seamly-utils'
 import { useConfig } from 'domains/config/hooks'
 import { updateConfig } from 'domains/config/slice'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import { useTranslations } from 'domains/translations/hooks'
 import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
@@ -47,7 +47,7 @@ const SeamlyInstanceFunctionsLoader = () => {
   const previousUnreadCount = useRef(null)
   const previousVisibilityState = useRef(null)
   const { isInline, isResolving } = useSeamlyLayoutMode()
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const currentConversationUrl = useSeamlyConversationUrl()
   const prevConversationUrl = useRef(null)
   const onActivityHandler = useSeamlyActivityEventHandler()
@@ -142,7 +142,7 @@ const SeamlyInstanceFunctionsLoader = () => {
   )
 
   useEffect(() => {
-    if (!isResolving && !hasInterrupt) {
+    if (!isResolving && !hasError) {
       // Check for app reset
       if (
         prevConversationUrl.current &&
@@ -178,7 +178,7 @@ const SeamlyInstanceFunctionsLoader = () => {
     eventBus,
     isInline,
     isResolving,
-    hasInterrupt,
+    hasError,
     currentConversationUrl,
   ])
 

package/src/javascripts/ui/components/entry/abort-transaction-button/abort-transaction-button.tsx

@@ -0,0 +1,45 @@
+import { useSeamlyApiContext } from 'ui/hooks/seamly-api-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import { className } from 'lib/css'
+import { useEntryAbortTransaction } from '../text-entry/hooks'
+
+export default function AbortTransactionButton() {
+  const { abortTransaction, clearEntryAbortTransaction } =
+    useEntryAbortTransaction()
+  const api = useSeamlyApiContext()
+
+  if (!abortTransaction) return null
+
+  const handleAbortTransaction = () => {
+    api.send('action', {
+      type: actionTypes.setTopic,
+      body: {
+        name: abortTransaction.topicName,
+        fallbackMessage: abortTransaction.topicFallbackMessage,
+      },
+    })
+
+    clearEntryAbortTransaction()
+  }
+
+  return (
+    <li
+      className={className([
+        'cvco-conversation__item',
+        'cvco-conversation__item--abort-transaction',
+      ])}
+    >
+      <button
+        className={className([
+          'button',
+          'button--secondary',
+          'abort-transaction__button',
+        ])}
+        type="button"
+        onClick={handleAbortTransaction}
+      >
+        {abortTransaction.label}
+      </button>
+    </li>
+  )
+}

package/src/javascripts/ui/components/entry/deprecated-toggle-button.js

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import {
   useFocusIfSeamlyContainedFocus,
   useGeneratedId,
@@ -8,7 +9,7 @@ import {
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 
@@ -24,10 +25,10 @@ const DeprecatedToggleButton = ({ onOpenChat }) => {
   const focusIfContained = useFocusIfSeamlyContainedFocus()
   const currentAgent = useSeamlyCurrentAgent()
   const agentSubtitle = useSeamlyHeaderData().subTitle
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
   const { headerCollapseButtonId } = useSeamlyStateContext()
 
-  const showAgentInfo = currentAgent && !hasInterrupt
+  const showAgentInfo = currentAgent && !hasError
 
   useLayoutEffect(() => {
     // Because we can close the app from the external API we