@seamly/web-ui 20.8.1 → 21.0.0

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

@@ -1,25 +1,24 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { PayloadAction, createSlice, isAnyOf } from '@reduxjs/toolkit'
+import { ConversationHistoryResponse } from 'api'
+import { getTimeFromSeconds } from 'ui/utils/general-utils'
+import {
+  entryTypes,
+  eventTypes,
+  featureKeys,
+  payloadTypes,
+  readStates,
+} from 'ui/utils/seamly-utils'
 import { initializeApp, resetApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
-import {
+import type {
+  AckEvent,
   ChannelEvent,
   EntryMeta,
-  HistoryEvents,
-  HistoryResponse,
   MessageParticipant,
-  ParticipantInfo,
   ServiceInfo,
   StoreState,
 } from 'domains/store/store.types'
 import { randomId } from 'lib/id'
-import { getTimeFromSeconds } from 'ui/utils/general-utils'
-import {
-  entryTypes,
-  eventTypes,
-  featureKeys,
-  payloadTypes,
-  readStates,
-} from 'ui/utils/seamly-utils'
 
 export const isUnreadMessage = ({ type, payload }: ChannelEvent) =>
   (type === eventTypes.message && !payload.fromClient) ||
@@ -36,7 +35,7 @@ export const orderHistory = (events: ChannelEvent[]) => {
 
 export const mergeHistory = (
   stateEvents: ChannelEvent[],
-  historyEvents: HistoryEvents,
+  historyEvents: ConversationHistoryResponse['events'],
 ) => {
   const newStateEvents = stateEvents.filter(
     (stateEvent) =>
@@ -102,10 +101,10 @@ const participantReducer = (participantInfo, action) => {
 
 const calculateNewEntryMeta = (
   entryMeta: EntryMeta,
-  channelEvent: ChannelEvent,
+  channelEvent?: ChannelEvent,
 ) => {
   const entry =
-    channelEvent.type === 'message' ? channelEvent?.payload.entry : {}
+    channelEvent?.type === 'message' ? channelEvent?.payload.entry : {}
 
   const { blockAutoEntrySwitch } = entryMeta
 
@@ -133,6 +132,7 @@ const calculateNewEntryMeta = (
 
 export const initialStoreState: StoreState = {
   events: [],
+  isLastEventFromClient: false,
   initialState: {
     userResponded: false,
   },
@@ -243,15 +243,19 @@ export const storeSlice = createSlice({
 
       if (incrementUnread) {
         state.unreadEvents += 1
-        action.payload.payload.messageStatus = payload.fromClient
-          ? readStates.read
-          : readStates.received
+        if (eventType !== 'service_data') {
+          action.payload.payload.messageStatus = payload.fromClient
+            ? readStates.read
+            : readStates.received
+        }
       }
 
       action.payload.payload.key = randomId()
       state.events.push(action.payload)
+
+      state.isLastEventFromClient = payload.fromClient
     },
-    ackEvent: (state, { payload }) => {
+    ackEvent: (state, { payload: { payload } }: PayloadAction<AckEvent>) => {
       // If any ACKs are sent without transactionID the conversation crashes.
       // Ensure that this edge case is handled gracefully.
       if (!payload.transactionId) {
@@ -260,22 +264,17 @@ export const storeSlice = createSlice({
       }
 
       const matchedEvent = state.events.find(
-        (m) => m.payload.transactionId === payload.transactionId,
+        (m) =>
+          m.payload.transactionId === payload.transactionId &&
+          (!payload.type || m.type === payload.type),
       )
 
       const { id, occurredAt } = payload
       if (matchedEvent) {
-        state.events = orderHistory(
-          //@ts-ignore
-          state.events.map((m) =>
-            m.payload.id === matchedEvent.payload.id
-              ? {
-                  ...m,
-                  payload: { ...m.payload, id, occurredAt },
-                }
-              : m,
-          ),
-        )
+        matchedEvent.payload.id = id
+        matchedEvent.payload.occurredAt = occurredAt
+
+        state.events = orderHistory(state.events)
       }
     },
     clearEvents: (state) => {
@@ -283,15 +282,16 @@ export const storeSlice = createSlice({
       state.loadedImageEventIds = []
       state.events = []
     },
-    setEventsRead: (state, { payload }) => {
+    setEventsRead: (state, { payload }: PayloadAction<string[]>) => {
       state.unreadEvents = 0
       state.events.forEach((event) => {
         if (payload.indexOf(event.payload.id) !== -1) {
           event.payload = {
             ...event.payload,
-            ...(event.payload.messageStatus === readStates.received && {
-              messageStatus: readStates.read,
-            }),
+            ...(event.type !== 'service_data' &&
+              event.payload.messageStatus === readStates.received && {
+                messageStatus: readStates.read,
+              }),
           }
         }
         return event
@@ -311,7 +311,7 @@ export const storeSlice = createSlice({
           serviceData,
           resumeConversationPrompt,
         },
-      }: PayloadAction<HistoryResponse>,
+      }: PayloadAction<ConversationHistoryResponse>,
     ) => {
       const events = mergeHistory(state.events, history)
 
@@ -341,14 +341,14 @@ export const storeSlice = createSlice({
       }
 
       const { entry } = activeServiceSettings
-      const { upload } = entry.options
+      const upload = entry?.options?.upload
 
       const historyNewEntryMeta = calculateNewEntryMeta(
         {
           ...state.entryMeta,
           ...entry,
-          active: entry.default || payloadTypes.text,
-          options: { ...(entry && entry.options ? entry.options : {}) },
+          active: entry?.default || payloadTypes.text,
+          options: { ...(entry?.options ? entry.options : {}) },
         },
         events[events.length - 1],
       )
@@ -366,7 +366,7 @@ export const storeSlice = createSlice({
         newFeatures = {
           ...newFeatures,
           uploads: {
-            enabled: !!(upload && upload.enabled),
+            enabled: !!(upload && upload?.enabled),
             enabledFromEntry: entryType === entryTypes.upload,
           },
         }
@@ -601,6 +601,12 @@ export const storeSlice = createSlice({
         if (!payload.initialState) return
         state.initialState = payload.initialState
       })
+      .addMatcher(
+        isAnyOf(initIdleDetachCountdown, initResumeConversationPrompt),
+        (state) => {
+          state.isLastEventFromClient = false
+        },
+      )
   },
 })
 

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

@@ -1,18 +1,32 @@
 import type { Config } from 'config.types'
+import { components } from 'schema'
+import { entryTypes } from 'ui/utils/seamly-utils'
 import type { AppState } from 'domains/app/app.types'
 import type { FormState } from 'domains/forms/forms.types'
 import type { I18nState } from 'domains/i18n/i18n.types'
 import type { TranslationState } from 'domains/translations/translations.types'
 import type { VisibilityState } from 'domains/visibility/visibility.types'
-import { components } from 'schema'
-import { entryTypes } from 'ui/utils/seamly-utils'
 
-export type MessageInfo = components['schemas']['MessageInfo'] & {
+export type AckEvent = {
+  type: 'ack'
+  payload: {
+    id: string
+    occurredAt: number
+    transactionId?: string
+    type?: string
+  }
+}
+
+type DefaultEventProps = {
+  timeIndicator?: number
   key?: string
 }
+
+export type MessageInfo = components['schemas']['MessageInfo'] &
+  DefaultEventProps
 export interface InfoEvent {
   type: 'info'
-  payload: MessageInfo
+  payload: MessageInfo & DefaultEventProps
 }
 
 export type MessageMessage = components['schemas']['MessageMessage'] & {
@@ -20,7 +34,7 @@ export type MessageMessage = components['schemas']['MessageMessage'] & {
 }
 export interface MessageEvent {
   type: 'message'
-  payload: MessageMessage
+  payload: MessageMessage & DefaultEventProps
 }
 
 export type MessageParticipant = components['schemas']['MessageParticipant'] & {
@@ -28,10 +42,19 @@ export type MessageParticipant = components['schemas']['MessageParticipant'] & {
 }
 export interface ParticipantEvent {
   type: 'participant'
-  payload: MessageParticipant
+  payload: MessageParticipant & DefaultEventProps
 }
 
-export type ChannelEvent = MessageEvent | ParticipantEvent | InfoEvent
+export interface ServiceDataEvent {
+  type: 'service_data'
+  payload: components['schemas']['ServiceDataMessage'] & DefaultEventProps
+}
+
+export type ChannelEvent =
+  | MessageEvent
+  | ParticipantEvent
+  | InfoEvent
+  | ServiceDataEvent
 
 type History = components['schemas']['ConversationHistoryResponse']['history']
 export type HistoryResponse = {
@@ -41,18 +64,22 @@ export type HistoryResponse = {
   activeServiceSettings: History['activeServiceSettings']
   serviceData: History['serviceData']
   resumeConversationPrompt: History['ui']['resumeConversationPrompt']
+  translationProposal: History['ui']['translationProposal']
   translation: History['translation']
 }
 
 export type HistoryEvents = HistoryResponse['events']
 
+export type EntryMetaOptions =
+  History['activeServiceSettings']['entry']['options']
+
 export type EntryMeta = {
   default: typeof entryTypes.text
   active: typeof entryTypes.text
   userSelected: null
   blockAutoEntrySwitch: boolean
-  options: Record<string, unknown>
-  optionsOverride: Record<string, unknown>
+  options: EntryMetaOptions
+  optionsOverride: EntryMetaOptions
 }
 
 export type ParticipantInfo = {
@@ -75,6 +102,7 @@ export type ServiceInfo = {
 
 export interface StoreState {
   events: ChannelEvent[]
+  isLastEventFromClient: boolean
   initialState: Partial<
     Omit<
       StoreState,
@@ -109,7 +137,7 @@ export interface StoreState {
   skiplinkTargetId: string
   optionsButtonId: string
   headerCollapseButtonId: string
-  serviceData: Record<string, unknown>
+  serviceData: Record<string, components['schemas']['ServiceDataMessage']>
   options: {
     features: {
       uploads?: {

package/src/javascripts/domains/translations/components/{options-button.js → options-button.tsx}

@@ -1,23 +1,33 @@
+import { ComponentChildren } from 'preact'
 import { useRef, useState } from 'preact/hooks'
-import { className } from 'lib/css'
-import { focusElement, getKey, keyNames } from 'ui/utils/general-utils'
-import Icon from 'ui/components/layout/icon'
-import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import type { FramePosition } from 'ui/components/options/options-frame'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
-import { useLocaleNativeName } from 'domains/translations/hooks'
-import { useI18n } from 'domains/i18n/hooks'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import { focusElement, getKey, keyNames } from 'ui/utils/general-utils'
+import { className } from 'lib/css'
 import TranslationsOptionsDialog from './options-dialog'
 
-export default function TranslationsOptionButton() {
-  const { t, locale } = useI18n()
+type TranslationsOptionsButtonProps = {
+  children: ComponentChildren
+  position: FramePosition
+  classNames?: string[]
+}
+
+export default function TranslationsOptionsButton({
+  children,
+  position = {
+    horizontal: 'left',
+    vertical: 'top',
+  },
+  classNames,
+}: TranslationsOptionsButtonProps) {
   const [menuIsOpen, setMenuIsOpen] = useState(false)
   const toggleButton = useRef(null)
   const toggleButtonId = useGeneratedId()
-  const localeNativeName = useLocaleNativeName(locale)
 
-  const onMainKeyDownHandler = (e) => {
+  const onMainKeyDownHandler = (e: KeyboardEvent) => {
     if (!menuIsOpen) {
       return
     }
@@ -35,7 +45,7 @@ export default function TranslationsOptionButton() {
   const handleToggleClick = () => {
     setMenuIsOpen((o) => !o)
   }
-  const handleToggleKeyDown = (e) => {
+  const handleToggleKeyDown = (e: KeyboardEvent) => {
     if (getKey(e) === keyNames.ArrowDown) {
       setMenuIsOpen(true)
       e.preventDefault()
@@ -47,19 +57,25 @@ export default function TranslationsOptionButton() {
       onKeyDown={onMainKeyDownHandler}
     >
       <InOutTransition
+        onOutTransitionComplete={() => undefined}
+        onInTransitionComplete={() => undefined}
+        timeout={0}
         transitionStartState={transitionStartStates.notRendered}
         isActive={menuIsOpen}
       >
         <div className={className('options__dialog')} role="dialog">
-          <TranslationsOptionsDialog onClose={handleDialogClose} />
+          <TranslationsOptionsDialog
+            onClose={handleDialogClose}
+            position={position}
+          />
         </div>
       </InOutTransition>
       <button
         type="button"
         className={className([
           'button',
-          'button--secondary',
           'chat__options__button',
+          ...classNames,
         ])}
         id={toggleButtonId}
         onClick={handleToggleClick}
@@ -68,13 +84,7 @@ export default function TranslationsOptionButton() {
         aria-haspopup="dialog"
         aria-expanded={menuIsOpen.toString()}
       >
-        <Icon name="newTranslation" size="16" />
-        <span className={className('button__text')}>
-          {t('translations.settings.openButtonText', {
-            hasLanguage: !!localeNativeName,
-            language: localeNativeName,
-          })}
-        </span>
+        {children}
       </button>
     </div>
   )

package/src/javascripts/domains/translations/components/options-dialog/index.tsx

@@ -0,0 +1,33 @@
+import type { FramePosition } from 'ui/components/options/options-frame'
+import OptionsFrame from 'ui/components/options/options-frame'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import TranslationOptions from 'domains/translations/components/options-dialog/translation-options'
+
+type TranslationsOptionsDialogProps = {
+  onClose: () => void
+  position: FramePosition
+}
+
+function TranslationsOptionsDialog({
+  onClose,
+  position,
+}: TranslationsOptionsDialogProps) {
+  const { t } = useI18n()
+  const descriptionId = useGeneratedId()
+  return (
+    <OptionsFrame
+      onCancel={onClose}
+      headingText={t('translations.menu.title')}
+      cancelButtonText={t('translations.settings.cancelButtonText')}
+      description={t('translations.menu.description')}
+      descriptionId={descriptionId}
+      position={position}
+      disableButtonFocusing
+    >
+      <TranslationOptions describedById={descriptionId} onChange={onClose} />
+    </OptionsFrame>
+  )
+}
+
+export default TranslationsOptionsDialog

package/src/javascripts/domains/translations/components/options-dialog/translation-option.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'preact/compat'
+import Icon from 'ui/components/layout/icon'
+import { className } from 'lib/css'
+
+type TranslationOptionProps = {
+  label: string
+  checked: boolean
+  onChange: () => void
+  id: string
+}
+
+const TranslationOption: FC<TranslationOptionProps> = ({
+  label,
+  checked,
+  onChange,
+  id,
+}) => (
+  <li className={className('translation-options--item')}>
+    <label>
+      <input
+        id={id}
+        type="checkbox"
+        value={label}
+        checked={checked}
+        className={className('visually-hidden')}
+        onChange={onChange}
+        name="language"
+      />
+      <span className={className('translation-options--icon-container')}>
+        {checked ? <Icon alt={label} name="check" size="16" /> : null}
+      </span>
+      {label}
+    </label>
+  </li>
+)
+
+export default TranslationOption

package/src/javascripts/domains/translations/components/options-dialog/translation-options.tsx

@@ -0,0 +1,85 @@
+import { FC } from 'preact/compat'
+import { useMemo } from 'preact/hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import TranslationOption from 'domains/translations/components/options-dialog/translation-option'
+import {
+  useTranslations,
+  useTranslationsContainer,
+} from 'domains/translations/hooks'
+import type { Language } from 'domains/translations/translations.types'
+import { className } from 'lib/css'
+
+type TranslationOptionsProps = {
+  onChange: () => void
+  describedById?: string
+}
+
+const TranslationOptions: FC<TranslationOptionsProps> = ({
+  onChange,
+  describedById,
+}) => {
+  const {
+    context: { locale: defaultLocale },
+  } = useConfig()
+
+  const { t } = useI18n()
+  const { focusContainer } = useTranslationsContainer()
+  const { languages, currentLocale, enableTranslations, disableTranslations } =
+    useTranslations()
+
+  const handleChange =
+    ({ locale }: Language) =>
+    () => {
+      if (locale === currentLocale || defaultLocale === locale) {
+        disableTranslations()
+      } else {
+        enableTranslations(locale)
+      }
+
+      onChange()
+      focusContainer()
+    }
+
+  const sortedLanguages = useMemo(() => {
+    return [...languages].sort((a, b) => {
+      if (a.locale === defaultLocale) return -1
+      if (b.locale === defaultLocale) return 1
+
+      return a.nativeName.localeCompare(b.nativeName, undefined, {
+        sensitivity: 'base',
+      })
+    })
+  }, [languages, defaultLocale])
+
+  return (
+    <ul
+      aria-describedby={describedById}
+      className={className('translation-options')}
+    >
+      {sortedLanguages.map((language, idx) => {
+        const isOriginal = idx === 0
+
+        const originalLabel = isOriginal
+          ? ` (${t('translations.settings.original')})`
+          : ''
+        const label = `${language.nativeName}${originalLabel}`
+
+        const checked =
+          currentLocale === language.locale || (!currentLocale && isOriginal)
+
+        return (
+          <TranslationOption
+            key={language.locale}
+            id={language.locale}
+            label={label}
+            checked={checked}
+            onChange={handleChange(language)}
+          />
+        )
+      })}
+    </ul>
+  )
+}
+
+export default TranslationOptions

package/src/javascripts/domains/translations/components/translation-status.tsx

@@ -0,0 +1,15 @@
+import TranslationChatStatus from 'ui/components/translation-chat-status'
+import TranslationProposal from 'ui/components/translation-proposal'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useTranslations } from 'domains/translations/hooks'
+
+export default function TranslationStatus() {
+  const { hasInterrupt } = useInterrupt()
+
+  const { isActive } = useTranslations()
+  if (hasInterrupt) {
+    return null
+  }
+
+  return !isActive ? <TranslationProposal /> : <TranslationChatStatus />
+}