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

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

@@ -0,0 +1,146 @@
+import type { Config } from 'config.types'
+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'] & {
+  key?: string
+}
+export interface InfoEvent {
+  type: 'info'
+  payload: MessageInfo
+}
+
+export type MessageMessage = components['schemas']['MessageMessage'] & {
+  key?: string
+}
+export interface MessageEvent {
+  type: 'message'
+  payload: MessageMessage
+}
+
+export type MessageParticipant = components['schemas']['MessageParticipant'] & {
+  key?: string
+}
+export interface ParticipantEvent {
+  type: 'participant'
+  payload: MessageParticipant
+}
+
+export type ChannelEvent = MessageEvent | ParticipantEvent | InfoEvent
+
+type History = components['schemas']['ConversationHistoryResponse']['history']
+export type HistoryResponse = {
+  events: ChannelEvent[]
+  participants: History['participants']
+  activeServiceSessionId: History['activeServiceSessionId']
+  activeServiceSettings: History['activeServiceSettings']
+  serviceData: History['serviceData']
+  resumeConversationPrompt: History['ui']['resumeConversationPrompt']
+  translation: History['translation']
+}
+
+export type HistoryEvents = HistoryResponse['events']
+
+export type EntryMeta = {
+  default: typeof entryTypes.text
+  active: typeof entryTypes.text
+  userSelected: null
+  blockAutoEntrySwitch: boolean
+  options: Record<string, unknown>
+  optionsOverride: Record<string, unknown>
+}
+
+export type ParticipantInfo = {
+  participants: Record<string, MessageParticipant['participant']>
+  currentAgent: string
+}
+export interface CurrentUpload {
+  id: string
+  progress: number
+  name: string
+  uploading: boolean
+  uploadHandle: null | { abort: () => void }
+  error: string
+  complete: boolean
+}
+
+export type ServiceInfo = {
+  activeServiceSessionId: string
+}
+
+export interface StoreState {
+  events: ChannelEvent[]
+  initialState: Partial<
+    Omit<
+      StoreState,
+      'initialState' | 'userHasResponded' | 'seamlyContainerElement'
+    >
+  > & {
+    userResponded: boolean
+  }
+  unreadEvents: number
+  userHasResponded: boolean
+  loadedImageEventIds: string[]
+  isLoading: boolean
+  idleDetachCountdown: {
+    hasCountdown: boolean
+    isActive: boolean
+    remaining?: number
+    wasStopped?: boolean
+    count?: number
+    timer?: {
+      minutes: number
+      seconds: number
+    }
+  }
+  resumeConversationPrompt: boolean
+  serviceInfo: ServiceInfo
+  participantInfo: ParticipantInfo
+  headerTitles: {
+    title: null
+    subTitle: string
+  }
+  historyLoaded: boolean
+  skiplinkTargetId: string
+  optionsButtonId: string
+  headerCollapseButtonId: string
+  serviceData: Record<string, unknown>
+  options: {
+    features: {
+      uploads?: {
+        enabledFromEntry: boolean
+        enabled: boolean
+      }
+    }
+    panelActive: boolean
+    optionActive: string
+    userSelectedOptions: Record<string, unknown>
+  }
+  showFileUpload: boolean
+  currentUploads: CurrentUpload[]
+  entryMeta: EntryMeta
+  seamlyContainerElement: null | HTMLElement
+}
+
+export type CreateStore = {
+  initialState: Partial<StoreState>
+  api: Record<string, unknown>
+  eventBus: Record<string, unknown>
+  config: Config
+}
+
+export interface ReduxStore {
+  state: StoreState
+  app: AppState
+  config: Config
+  forms: FormState
+  translations: TranslationState
+  i18n: I18nState
+  interrupt: {}
+  visibility: VisibilityState
+}

package/src/javascripts/domains/translations/components/chat-status.js

@@ -1,13 +1,13 @@
 import { useCallback } from 'preact/hooks'
 import ChatStatus from 'ui/components/chat-status'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import { useSkiplinkTargetFocusing } from 'ui/hooks/seamly-hooks'
 import {
   useTranslationsContainer,
   useTranslations,
   useLocaleNativeName,
 } from 'domains/translations/hooks'
-import { useInterrupt } from 'domains/interrupt'
+import { useInterrupt } from 'domains/interrupt/hooks'
 
 export default function TranslationsChatStatus() {
   const { t } = useI18n()

package/src/javascripts/domains/translations/components/options-button.js

@@ -7,7 +7,7 @@ import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
 import { useLocaleNativeName } from 'domains/translations/hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import TranslationsOptionsDialog from './options-dialog'
 
 export default function TranslationsOptionButton() {

package/src/javascripts/domains/translations/components/options-dialog/form.js

@@ -1,11 +1,11 @@
-import { useMemo } from 'preact/hooks'
-import Form from 'ui/components/form-controls/form'
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import {
-  useTranslations,
   useLocaleNativeName,
+  useTranslations,
 } from 'domains/translations/hooks'
+import { className } from 'lib/css'
+import { useMemo } from 'preact/hooks'
+import Form from 'ui/components/form-controls/form'
 import Select from 'ui/components/form-controls/select'
 
 function TranslationsOptionsDialogForm({ controlName, descriptionId }) {

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

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef, useState } from 'preact/hooks'
 import OptionsFrame from 'ui/components/options/options-frame'
-import { FormProvider } from 'domains/forms'
+import FormProvider from 'domains/forms/provider'
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import { getValidator } from 'ui/utils/form-utils'
 import { isNotEmptyString } from 'ui/utils/validations'
@@ -8,7 +8,7 @@ import {
   useTranslations,
   useTranslationsContainer,
 } from 'domains/translations/hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import TranslationsOptionsDialogForm from './form'
 
 export const formName = 'translation-settings'

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

@@ -0,0 +1,114 @@
+import { RootState } from 'domains/store'
+import {
+  ChannelEvent,
+  InfoEvent,
+  MessageEvent,
+  ParticipantEvent,
+} from 'domains/store/store.types'
+import { selectIsTranslated } from 'domains/translations/selectors'
+import {
+  disableTranslation,
+  enableTranslation,
+} from 'domains/translations/slice'
+import { useCallback, useMemo } from 'preact/hooks'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  useElementFocusingById,
+  useSeamlyCommands,
+} from 'ui/hooks/seamly-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
+
+export function useTranslations() {
+  const { sendAction } = useSeamlyCommands()
+  const dispatch = useDispatch()
+  const enableTranslations = useCallback(
+    (locale) => {
+      sendAction({
+        type: actionTypes.setTranslation,
+        body: { enabled: true, locale },
+      })
+      dispatch(enableTranslation(locale))
+    },
+    [sendAction, dispatch],
+  )
+  const disableTranslations = useCallback(() => {
+    sendAction({ type: actionTypes.setTranslation, body: { enabled: false } })
+    dispatch(disableTranslation())
+  }, [sendAction, dispatch])
+
+  const { languages, isActive, isAvailable, currentLocale } = useSelector(
+    ({ translations }) => translations,
+  )
+
+  return {
+    languages,
+    isActive,
+    isAvailable,
+    currentLocale,
+    enableTranslations,
+    disableTranslations,
+  }
+}
+
+type EventDataBody =
+  | ParticipantEvent['payload']['participant']['introduction']
+  | MessageEvent['payload']['body']
+  | InfoEvent['payload']['body']
+
+type TranslatedEventDataBody =
+  | ParticipantEvent['payload']['participant']['translatedIntroduction']
+  | MessageEvent['payload']['translatedBody']
+  | InfoEvent['payload']['translatedBody']
+
+export function useTranslatedEventData(channelEvent: ChannelEvent): {
+  body: EventDataBody
+  hasTranslation: boolean
+  isTranslated: boolean
+  locale: string
+} {
+  const getTranslations = (): {
+    body: EventDataBody
+    translatedBody: TranslatedEventDataBody
+  } => {
+    if (!channelEvent.payload)
+      return { body: undefined, translatedBody: undefined }
+    if (channelEvent.type === 'participant') {
+      return {
+        body: channelEvent.payload?.participant.introduction,
+        translatedBody:
+          channelEvent.payload?.participant?.translatedIntroduction,
+      }
+    }
+
+    return {
+      body: channelEvent.payload.body,
+      translatedBody: channelEvent.payload.translatedBody,
+    }
+  }
+
+  const { translatedBody, body } = getTranslations()
+  const hasTranslation = !!translatedBody
+  const isTranslated = useSelector(selectIsTranslated(channelEvent))
+
+  return {
+    body: hasTranslation && isTranslated ? translatedBody?.data : body,
+    hasTranslation,
+    isTranslated: isTranslated && hasTranslation,
+    locale: translatedBody?.locale,
+  }
+}
+
+export function useTranslationsContainer() {
+  const id = useSelector(({ translations }) => translations.containerId)
+  const focusContainer = useElementFocusingById(id)
+  return { id, focusContainer }
+}
+
+export function useLocaleNativeName(locale: string) {
+  const { languages } = useTranslations()
+
+  return useMemo(
+    () => languages?.find((lang) => lang.locale === locale)?.nativeName,
+    [locale, languages],
+  )
+}

package/src/javascripts/domains/translations/middleware.js

@@ -1,44 +1,46 @@
+import { initializeConfig } from 'domains/config/actions'
+import { setLocale } from 'domains/i18n/actions'
+import { selectInitialLocale } from 'domains/i18n/selectors'
+import { addEvent, setHistory, setInitialState } from 'domains/store/slice'
 import {
-  Actions as I18nActions,
-  Selectors as I18nSelectors,
-} from 'domains/i18n'
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import * as Actions from './actions'
+  disableTranslation,
+  enableTranslation,
+} from 'domains/translations/slice'
 
-export default function createMiddleware({ dispatch, getState }) {
+export default function createI18nMiddleware({ dispatch, getState }) {
   return (next) => {
     return (action) => {
       const result = next(action)
-
+      const { payload } = action
       switch (action.type) {
-        case String(seamlyActions.SET_HISTORY):
-          if (action.history?.translation?.enabled) {
-            dispatch(Actions.enable(action.history.translation.locale))
-            dispatch(I18nActions.setLocale(action.history.translation.locale))
+        case setHistory.type:
+          if (payload?.translation?.enabled) {
+            dispatch(enableTranslation(payload.translation.locale))
+            dispatch(setLocale(payload.translation.locale))
+          }
+          break
+        case initializeConfig.fulfilled.type:
+          if (payload.locale) {
+            dispatch(setLocale(payload.locale))
           }
           break
-        case String(seamlyActions.SET_INITIAL_STATE):
-          if (action.initialState?.translation?.enabled) {
-            dispatch(Actions.enable(action.initialState.translation.locale))
-            dispatch(I18nActions.setLocale(action.locale))
+        case setInitialState.type:
+          if (payload?.translation?.enabled) {
+            dispatch(enableTranslation(payload.translation.locale))
           }
           break
-        case String(seamlyActions.ADD_EVENT):
+        case addEvent.type:
           if (
-            action.event.type === 'info' &&
-            action.event?.payload?.body?.subtype === 'new_translation' &&
-            action.event.payload.body.translationEnabled
+            payload.type === 'info' &&
+            payload?.payload?.body?.subtype === 'new_translation' &&
+            payload.payload.body.translationEnabled
           ) {
-            dispatch(
-              I18nActions.setLocale(
-                action.event.payload.body.translationLocale,
-              ),
-            )
+            dispatch(setLocale(payload.payload.body.translationLocale))
           }
           break
-        case String(Actions.disable):
-          const initialLocale = I18nSelectors.selectInitialLocale(getState())
-          dispatch(I18nActions.setLocale(initialLocale))
+        case disableTranslation.type:
+          const initialLocale = selectInitialLocale(getState())
+          dispatch(setLocale(initialLocale))
           break
       }
       return result

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

@@ -0,0 +1,12 @@
+import { createSelector } from '@reduxjs/toolkit'
+import { RootState } from 'domains/store'
+import { ChannelEvent } from 'domains/store/store.types'
+
+export const selectIsTranslated = (channelEvent: ChannelEvent) =>
+  createSelector(
+    (store: RootState) => store.translations.translatedEventGroups,
+    (translatedEventGroups: Record<string, string[]>) =>
+      Object.values(translatedEventGroups).every(
+        (value) => !value.includes(channelEvent?.payload?.id),
+      ),
+  )

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

@@ -0,0 +1,120 @@
+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: [],
+  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({
+  name: 'translation',
+  initialState: translationsInitialState,
+  reducers: {
+    enableTranslation: (state, { payload }) => {
+      state.isActive = true
+      state.currentLocale = payload
+    },
+    disableTranslation: (state) => {
+      state.isActive = false
+      state.currentLocale = undefined
+    },
+    enableEventsTranslation: (
+      state,
+      {
+        payload: { events, id },
+      }: PayloadAction<{ events: ChannelEvent[]; id: string }>,
+    ) => {
+      delete state.translatedEventGroups[id]
+
+      const { lastGroupId } = getLastGroupId(events, id)
+      state.lastGroupId = lastGroupId
+    },
+    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
+
+        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,
+  enableEventsTranslation,
+  disableEventsTranslation,
+} = translationSlice.actions
+
+export default translationSlice.reducer

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

@@ -0,0 +1,19 @@
+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
+  containerId: string
+  translatedEventGroups: Record<string, string[]>
+  lastGroupId?: string
+}

package/src/javascripts/domains/visibility/{actions.js → actions.ts}

@@ -1,36 +1,38 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import { VisibilityOptions } from 'config.types'
+import { selectUserHasResponded } from 'domains/app/selectors'
 import * as ConfigSelectors from 'domains/config/selectors'
-import * as AppSelectors from 'domains/app/selectors'
-
+import { ThunkAPI } from 'domains/redux/redux.types'
+import { setFromStorage } from 'domains/visibility/slice'
+import { calculateVisibility } from 'domains/visibility/utils'
+import { VisibilityState } from 'domains/visibility/visibility.types'
 import { selectState } from 'ui/hooks/seamly-state-hooks'
-import { visibilityStates, StoreKey } from './constants'
-import { createAction, createThunk, calculateVisibility } from './utils'
+import { StoreKey, visibilityStates } from './constants'
 import * as Selectors from './selectors'
 
-export const setFromStorage = createAction('setFromStorage', (visibility) => ({
-  visibility,
-}))
-
-export const setShowInlineView = createAction('setShowInlineView')
-
 const validVisibilityStates = [
   visibilityStates.open,
   visibilityStates.minimized,
   visibilityStates.hidden,
 ]
-export const setVisibility = createThunk(
-  'set',
+export const setVisibility = createAsyncThunk<
+  VisibilityOptions,
+  VisibilityState,
+  ThunkAPI
+>(
+  'setVisibility',
   (requestedVisibility, { getState, extra: { api, eventBus } }) => {
     const state = getState()
     const previousVisibility = Selectors.selectVisibility(state)
-    const hasResponded = AppSelectors.selectUserHasResponded(state)
+    const userHasResponded = selectUserHasResponded(state)
     const hasConversation = api.hasConversation()
     const config = ConfigSelectors.selectConfig(state)
+
     const { visibilityCallback = calculateVisibility, layoutMode } = config
     const { unreadEvents: unreadMessageCount } = selectState(state)
 
     const calculatedVisibility = visibilityCallback({
-      hasConversation,
-      hasResponded,
+      hasResponded: userHasResponded,
       previousVisibility,
       requestedVisibility,
       config,
@@ -53,23 +55,27 @@ export const setVisibility = createThunk(
       eventBus.emit('ui.visible', requestedVisibility, {
         visibility: requestedVisibility,
         hasConversation,
-        hasResponded,
+        hasResponded: userHasResponded,
         unreadMessageCount,
       })
     }
+
     return calculatedVisibility
   },
 )
 
-export const initialize = createThunk(
+export const initializeVisibility = createAsyncThunk<unknown, void, ThunkAPI>(
   'initialize',
-  async (locale, { dispatch, getState, extra: { api } }) => {
+  async (_, { dispatch, getState, extra: { api } }) => {
     // initialize stored visibility
     const { layoutMode } = ConfigSelectors.selectConfig(getState())
+
     const storedVisibility = api.store.get(StoreKey)?.[layoutMode]
     if (storedVisibility) {
       dispatch(setFromStorage(storedVisibility))
     }
-    dispatch(setVisibility(visibilityStates.initialize))
+
+    dispatch(setVisibility(storedVisibility))
+    return storedVisibility
   },
 )