@seamly/web-ui 21.0.9 → 22.0.0

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'
@@ -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({

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/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/text-entry/hooks.ts

@@ -0,0 +1,108 @@
+import { useEffect, useMemo } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
+import { useLiveRegion } from 'ui/hooks/live-region-hooks'
+import {
+  useEntryTextLimit,
+  useSeamlyStateContext,
+} from 'ui/hooks/seamly-state-hooks'
+import { debounce } from 'ui/utils/general-utils'
+import { ControlState } from 'domains/forms/forms.types'
+import { useFormControl } from 'domains/forms/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { clearAbortTransaction } from 'domains/store/slice'
+
+export function useCharacterLimit(controlName) {
+  const { t } = useI18n()
+  const { sendAssertive } = useLiveRegion()
+  const { hasLimit, limit } = useEntryTextLimit()
+
+  const debouncedSendAssertive = useMemo(
+    () => debounce(sendAssertive, maxCharacterSrDebounceDelay),
+    [sendAssertive],
+  )
+  const validateLimit = useMemo(() => {
+    return debounce((_reachedCharacterWarning, _remainingChars) => {
+      if (_reachedCharacterWarning) {
+        debouncedSendAssertive(
+          t('input.srCharacterLimitText', { limit: _remainingChars }),
+        )
+      }
+    }, maxCharacterSrDebounceDelay)
+  }, [debouncedSendAssertive, t])
+
+  const [{ value }] = useFormControl(controlName)
+  const remainingChars = hasLimit && value ? limit - value.length : limit
+  const reachedCharacterWarning = hasLimit
+    ? remainingChars <= maxCharacterWarningLimit
+    : false
+  const reachedCharacterLimit = hasLimit ? remainingChars < 0 : false
+
+  useEffect(() => {
+    validateLimit(reachedCharacterWarning, remainingChars)
+  }, [reachedCharacterWarning, remainingChars, validateLimit])
+
+  return {
+    hasCharacterLimit: hasLimit,
+    characterLimit: limit,
+    reachedCharacterWarning,
+    reachedCharacterLimit,
+    remainingChars,
+  }
+}
+
+export const useEntryTextTranslation = (controlName: ControlState['name']) => {
+  const { hasCharacterLimit, characterLimit } = useCharacterLimit(controlName)
+
+  const {
+    entryMeta: {
+      optionsOverride: { text },
+    },
+  } = useSeamlyStateContext()
+
+  const { t } = useI18n()
+
+  const placeholder: string = useMemo(
+    () =>
+      t('input.inputPlaceholder', {
+        hasLimit: hasCharacterLimit,
+        text: text?.placeholder || t('input.inputPlaceholderText'),
+        limit: hasCharacterLimit ? characterLimit : null,
+      }),
+    [t, hasCharacterLimit, characterLimit, text?.placeholder],
+  )
+
+  const label: string = useMemo(
+    () =>
+      t('input.inputLabel', {
+        hasLimit: !text?.label ? hasCharacterLimit : false,
+        text: text?.label || t('input.inputLabelText'),
+        limit: !text?.label && hasCharacterLimit ? characterLimit : null,
+      }),
+    [t, hasCharacterLimit, characterLimit, text?.label],
+  )
+
+  const labelClass: string = useMemo(
+    () => (text?.label ? 'input__label' : 'visually-hidden'),
+    [text?.label],
+  )
+
+  return { placeholder, label, labelClass }
+}
+
+export const useEntryAbortTransaction = () => {
+  const dispatch = useDispatch()
+
+  const {
+    entryMeta: { actions },
+  } = useSeamlyStateContext()
+
+  const clearEntryAbortTransaction = () => {
+    dispatch(clearAbortTransaction())
+  }
+
+  return {
+    abortTransaction: actions?.abortTransaction,
+    clearEntryAbortTransaction,
+  }
+}

package/src/javascripts/ui/components/entry/text-entry/index.js

@@ -9,7 +9,7 @@ import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
 import TextEntryForm from './text-entry-form'
 
-const controlName = 'textMessageEntry'
+export const textEntryControlName = 'textMessageEntry'
 
 export default function TextEntry({ ...props }) {
   const { isOpen, setVisibility } = useVisibility()
@@ -18,8 +18,8 @@ export default function TextEntry({ ...props }) {
   const { sendMessage } = useSeamlyCommands()
   const handleSubmit = useCallback(
     (values, { updateControlValue }) => {
-      sendMessage({ body: values[controlName] })
-      updateControlValue(controlName, '')
+      sendMessage({ body: values[textEntryControlName] })
+      updateControlValue(textEntryControlName, '')
       focusSkipLinkTarget()
 
       if (!isOpen) {
@@ -36,7 +36,10 @@ export default function TextEntry({ ...props }) {
       persistData={true}
       onSubmit={handleSubmit}
     >
-      <TextEntryForm controlName={controlName} skipLinkId={skipLinkId} />
+      <TextEntryForm
+        controlName={textEntryControlName}
+        skipLinkId={skipLinkId}
+      />
     </FormProvider>
   )
 }

package/src/javascripts/ui/components/entry/text-entry/{text-entry-form.js → text-entry-form.tsx}

@@ -1,4 +1,4 @@
-import { useCallback, useLayoutEffect, useMemo } from 'preact/hooks'
+import { useCallback, useLayoutEffect } from 'preact/hooks'
 import Form from 'ui/components/form-controls/form'
 import Input from 'ui/components/form-controls/input'
 import Icon from 'ui/components/layout/icon'
@@ -7,7 +7,7 @@ import { useLiveRegion, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { useFormControl } from 'domains/forms/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
-import { useCharacterLimit } from './hooks'
+import { useCharacterLimit, useEntryTextTranslation } from './hooks'
 
 export default function TextEntryForm({ controlName, skipLinkId }) {
   const { t } = useI18n()
@@ -15,16 +15,17 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
   const { emitEvent } = useSeamlyCommands()
   const handleKeyUp = useSeamlyTyping()
   const { setBlockAutoEntrySwitch } = useSeamlyEntry()
-
+  const { placeholder, label, labelClass } =
+    useEntryTextTranslation(controlName)
   // TODO: Standardize the validation on form fields
   const {
     hasCharacterLimit,
-    characterLimit,
     reachedCharacterWarning,
     reachedCharacterLimit,
     remainingChars,
   } = useCharacterLimit(controlName)
   const [{ value }] = useFormControl(controlName)
+
   const hasValue = !!value
 
   const handleFocus = useCallback(() => {
@@ -34,22 +35,7 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
 
     emitEvent('ui.inputFocus')
   }, [t, sendAssertive, reachedCharacterWarning, remainingChars, emitEvent])
-  const placeholder = useMemo(
-    () =>
-      t('input.inputPlaceholder', {
-        hasLimit: hasCharacterLimit,
-        limit: hasCharacterLimit ? characterLimit : null,
-      }),
-    [t, hasCharacterLimit, characterLimit],
-  )
-  const labelText = useMemo(
-    () =>
-      t('input.inputLabel', {
-        hasLimit: hasCharacterLimit,
-        limit: hasCharacterLimit ? characterLimit : null,
-      }),
-    [t, hasCharacterLimit, characterLimit],
-  )
+
   // When the input holds a value, the component should be blocked from switching
   // to file upload form.
   useLayoutEffect(() => {
@@ -87,8 +73,8 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
           className={className('input__text')}
           autocomplete="off"
           placeholder={placeholder}
-          labelText={labelText}
-          labelClass={className('visually-hidden')}
+          labelText={label}
+          labelClass={className(labelClass)}
           aria-invalid={hasCharacterLimit ? reachedCharacterLimit : null}
           onKeyUp={handleKeyUp}
           onFocus={handleFocus}

package/src/javascripts/ui/components/form-controls/{input.js → input.tsx}

@@ -1,16 +1,27 @@
+import { HTMLAttributes } from 'preact/compat'
 import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import FormControlWrapper from './wrapper'
 
+type InputProps = HTMLAttributes<HTMLInputElement> & {
+  id: string
+  name: string
+  type: string
+  labelText: string
+  labelClass: string
+  contentHint?: string
+  'aria-describedby'?: string
+}
+
 function Input({
   id,
   name,
   type,
   labelText,
   labelClass,
-  contentHint,
+  contentHint = null,
   'aria-describedby': ariaDescribedBy,
   ...props
-}) {
+}: InputProps) {
   const { isSubmitted } = useFormContext()
   const [field, { error }] = useFormControl(name)
   const hasError = isSubmitted && error

package/src/javascripts/ui/components/form-controls/{wrapper.js → wrapper.tsx}

@@ -12,9 +12,6 @@ const FormControlWrapper = ({
 }) => {
   return (
     <>
-      <label htmlFor={id} className={labelClass}>
-        {labelText}
-      </label>
       {contentHint && (
         <span
           id={`${id}-content-hint`}
@@ -23,8 +20,15 @@ const FormControlWrapper = ({
           {contentHint}
         </span>
       )}
+
       <Error id={`${id}-error`} error={!validity && errorText} />
-      {children}
+
+      <div className={className('form-control__wrapper')}>
+        <label htmlFor={id} className={labelClass}>
+          {labelText}
+        </label>
+        {children}
+      </div>
     </>
   )
 }