@seamly/web-ui 20.8.1 → 21.0.1-beta.1

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,42 @@
+import { FC } from 'preact/compat'
+import Icon from 'ui/components/layout/icon'
+import { className } from 'lib/css'
+
+type TranslationOptionProps = {
+  label: string
+  checked: boolean
+  description?: string
+  onChange: () => void
+  id: string
+}
+
+const TranslationOption: FC<TranslationOptionProps> = ({
+  label,
+  checked,
+  description,
+  onChange,
+  id,
+}) => (
+  <li
+    className={className('translation-options__item', {
+      'translation-options__item--checked': checked,
+    })}
+  >
+    <input
+      id={id}
+      type="radio"
+      value={label}
+      checked={checked}
+      className={className('visually-hidden')}
+      onChange={onChange}
+      name="language"
+    />
+
+    <label htmlFor={id}>
+      <Icon alt="" name="check" size="16" />
+      {label} {description && <span>({description})</span>}
+    </label>
+  </li>
+)
+
+export default TranslationOption

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

@@ -0,0 +1,81 @@
+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 checked =
+          currentLocale === language.locale || (!currentLocale && isOriginal)
+
+        return (
+          <TranslationOption
+            key={language.locale}
+            id={language.locale}
+            label={language.nativeName}
+            checked={checked}
+            description={isOriginal && t('translations.settings.original')}
+            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 />
+}

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

@@ -1,33 +1,47 @@
-import { RootState } from 'domains/store'
+import { useCallback, useMemo } from 'preact/hooks'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  useElementFocusingById,
+  useSeamlyCommands,
+} from 'ui/hooks/seamly-hooks'
+import {
+  TRANSLATION_PROPOSAL,
+  actionTypes,
+  sourceTypes,
+} from 'ui/utils/seamly-utils'
+import { ValueOf } from 'ui/utils/seamly-utils.types'
+import { useI18n } from 'domains/i18n/hooks'
+import type { RootState } from 'domains/store'
 import {
   ChannelEvent,
   InfoEvent,
   MessageEvent,
   ParticipantEvent,
+  ServiceDataEvent,
 } from 'domains/store/store.types'
 import { selectIsTranslated } from 'domains/translations/selectors'
 import {
   disableTranslation,
+  disableTranslationProposalPrompt,
   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'
+import type { Language } from 'domains/translations/translations.types'
+import { useVisibility } from 'domains/visibility/hooks'
 
 export function useTranslations() {
   const { sendAction } = useSeamlyCommands()
   const dispatch = useDispatch()
   const enableTranslations = useCallback(
-    (locale) => {
+    (
+      locale: Language['locale'],
+      source: ValueOf<typeof sourceTypes> = sourceTypes.translationChoice,
+    ) => {
       sendAction({
         type: actionTypes.setTranslation,
-        body: { enabled: true, locale },
+        body: { enabled: true, locale, source },
       })
       dispatch(enableTranslation(locale))
+      dispatch(disableTranslationProposalPrompt())
     },
     [sendAction, dispatch],
   )
@@ -37,7 +51,7 @@ export function useTranslations() {
   }, [sendAction, dispatch])
 
   const { languages, isActive, isAvailable, currentLocale } = useSelector(
-    ({ translations }) => translations,
+    ({ translations }: RootState) => translations,
   )
 
   return {
@@ -54,11 +68,13 @@ type EventDataBody =
   | ParticipantEvent['payload']['participant']['introduction']
   | MessageEvent['payload']['body']
   | InfoEvent['payload']['body']
+  | ServiceDataEvent['payload']['body']
 
 type TranslatedEventDataBody =
   | ParticipantEvent['payload']['participant']['translatedIntroduction']
   | MessageEvent['payload']['translatedBody']
   | InfoEvent['payload']['translatedBody']
+  | ServiceDataEvent['payload']['translatedBody']
 
 export function useTranslatedEventData(channelEvent: ChannelEvent): {
   body: EventDataBody
@@ -112,3 +128,53 @@ export function useLocaleNativeName(locale: string) {
     [locale, languages],
   )
 }
+
+export const useTranslationProposal = () => {
+  const { isActive, languages } = useTranslations()
+
+  const dispatch = useDispatch()
+  const { sendAction } = useSeamlyCommands()
+
+  const { translationProposal } = useSelector(
+    (state: RootState) => state.translations,
+  )
+  const { enableTranslations } = useTranslations()
+  const { isOpen } = useVisibility()
+  const { locale } = useI18n()
+  const proposedLocale = translationProposal?.proposedLocale
+  const proposedLocaleNativeName = useLocaleNativeName(proposedLocale)
+
+  const showProposal = useMemo(
+    () =>
+      translationProposal !== null &&
+      !isActive &&
+      isOpen &&
+      locale !== proposedLocale &&
+      languages.some((language) => language.locale === proposedLocale),
+    [translationProposal, isActive, isOpen, locale, proposedLocale, languages],
+  )
+
+  const dismissTranslationProposal = () => {
+    sendAction({
+      type: actionTypes.dismiss,
+      body: { type: TRANSLATION_PROPOSAL },
+    })
+    dispatch(disableTranslationProposalPrompt())
+  }
+
+  const activateTranslationProposal = () => {
+    enableTranslations(
+      translationProposal?.proposedLocale,
+      sourceTypes.translationProposal,
+    )
+  }
+
+  return {
+    activateTranslationProposal,
+    dismissTranslationProposal,
+    proposedLocale,
+    proposedLocaleNativeName,
+    showProposal,
+    translationProposal,
+  }
+}

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

@@ -1,12 +1,8 @@
-import {
-  TranslationEvent,
-  TranslationState,
-} from 'domains/translations/translations.types'
-import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit'
-import { initializeApp } from 'domains/app/actions'
+import { PayloadAction, createSlice, nanoid } from '@reduxjs/toolkit'
 import { initializeConfig } from 'domains/config/actions'
-import { addEvent, orderHistory, setHistory } from 'domains/store/slice'
-import { ChannelEvent } from 'domains/store/store.types'
+import { addEvent, setHistory } from 'domains/store/slice'
+import type { ChannelEvent, HistoryResponse } from 'domains/store/store.types'
+import type { TranslationState } from 'domains/translations/translations.types'
 
 export const translationsInitialState: TranslationState = {
   isActive: false,
@@ -15,6 +11,7 @@ export const translationsInitialState: TranslationState = {
   languages: [],
   containerId: nanoid(),
   translatedEventGroups: {},
+  translationProposal: null,
 }
 
 const getLastGroupId = (events: ChannelEvent[], id: string) => {
@@ -42,7 +39,7 @@ const getLastGroupId = (events: ChannelEvent[], id: string) => {
   const [[groupId, eventIds]] = Object.entries(eventGroup)
 
   const lastGroupId = events
-    //@ts-ignore
+    // @ts-ignore
     .filter((event) => event.payload?.type === 'divider')
     .map((event) => event.payload.id)
     .at(-1)
@@ -84,6 +81,15 @@ export const translationSlice = createSlice({
       state.lastGroupId = lastGroupId
       state.translatedEventGroups[groupId] = eventIds
     },
+    disableTranslationProposalPrompt: (state) => {
+      state.translationProposal = null
+    },
+    setTranslationProposalPrompt: (
+      state,
+      { payload }: PayloadAction<HistoryResponse['translationProposal']>,
+    ) => {
+      state.translationProposal = payload
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -94,6 +100,9 @@ export const translationSlice = createSlice({
         state.isAvailable = feature.enabled === true
         state.languages = feature.languages
       })
+      .addCase(setHistory, (state, { payload }) => {
+        state.translationProposal = payload.translationProposal
+      })
       .addCase(addEvent, (state, { payload }) => {
         if (state.translatedEventGroups[state.lastGroupId]) {
           state.translatedEventGroups[state.lastGroupId].push(
@@ -109,6 +118,8 @@ export const {
   disableTranslation,
   enableEventsTranslation,
   disableEventsTranslation,
+  setTranslationProposalPrompt,
+  disableTranslationProposalPrompt,
 } = translationSlice.actions
 
 export default translationSlice.reducer

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

@@ -1,5 +1,7 @@
-import { operations } from 'schema'
+import type { components, operations } from 'schema'
+import { HistoryResponse } from 'domains/store/store.types'
 
+export type Language = components['schemas']['Translation']
 export type Languages =
   operations['getAccountConfig']['responses']['201']['content']['application/json']['config']['features']['translation']['languages']
 
@@ -7,7 +9,6 @@ export type TranslationEvent = {
   id: string
   items: string[]
 }
-
 export interface TranslationState {
   isActive: boolean
   currentLocale?: string
@@ -16,4 +17,5 @@ export interface TranslationState {
   containerId: string
   translatedEventGroups: Record<string, string[]>
   lastGroupId?: string
+  translationProposal?: HistoryResponse['translationProposal'] | null
 }

package/src/javascripts/domains/visibility/actions.ts

@@ -1,12 +1,10 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
-import { VisibilityOptions } from 'config.types'
+import type { VisibilityOptions } from 'config.types'
+import { selectState } from 'ui/hooks/seamly-state-hooks'
 import { selectUserHasResponded } from 'domains/app/selectors'
 import * as ConfigSelectors from 'domains/config/selectors'
-import { ThunkAPI } from 'domains/redux/redux.types'
-import { setFromStorage } from 'domains/visibility/slice'
+import type { ThunkAPI } from 'domains/redux/redux.types'
 import { calculateVisibility } from 'domains/visibility/utils'
-import { VisibilityState } from 'domains/visibility/visibility.types'
-import { selectState } from 'ui/hooks/seamly-state-hooks'
 import { StoreKey, visibilityStates } from './constants'
 import * as Selectors from './selectors'
 
@@ -17,7 +15,7 @@ const validVisibilityStates = [
 ]
 export const setVisibility = createAsyncThunk<
   VisibilityOptions,
-  VisibilityState,
+  VisibilityOptions,
   ThunkAPI
 >(
   'setVisibility',
@@ -70,10 +68,8 @@ export const initializeVisibility = createAsyncThunk<unknown, void, ThunkAPI>(
     // initialize stored visibility
     const { layoutMode } = ConfigSelectors.selectConfig(getState())
 
-    const storedVisibility = api.store.get(StoreKey)?.[layoutMode]
-    if (storedVisibility) {
-      dispatch(setFromStorage(storedVisibility))
-    }
+    const storedVisibility =
+      api.store.get(StoreKey)?.[layoutMode] || visibilityStates.initialize
 
     dispatch(setVisibility(storedVisibility))
     return storedVisibility