@seamly/web-ui 24.5.0 → 25.1.0-beta.1

package/src/javascripts/core/ui/components/entry/text-entry/hooks.ts

@@ -1,10 +1,10 @@
-import { useEffect, useMemo } from 'preact/hooks'
 import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
 import { useConfig } from 'domains/config/hooks'
 import { useFormControl } from 'domains/forms/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useAppDispatch } from 'domains/store'
 import { clearAbortTransaction } from 'domains/store/slice'
+import { useEffect, useMemo } from 'preact/hooks'
 import { useLiveRegion } from 'ui/hooks/live-region-hooks'
 import {
   useEntryTextLimit,
@@ -60,9 +60,20 @@ export const useEntryTextTranslation = (controlName: 'textMessageEntry') => {
   const { hasCharacterLimit, characterLimit } = useCharacterLimit(controlName)
 
   const {
-    entryMeta: { optionsOverride },
+    entryMeta: { active: entryType, optionsOverride },
   } = useSeamlyStateContext()
 
+  let labelOverride: string | null = null
+  let placeholderOverride: string | null = null
+  if (
+    entryType &&
+    optionsOverride &&
+    typeof optionsOverride[entryType] === 'object'
+  ) {
+    labelOverride = optionsOverride[entryType].label
+    placeholderOverride = optionsOverride[entryType].placeholder
+  }
+
   const { alwaysShowEntryLabel } = useConfig()
   const { t } = useI18n()
 
@@ -70,32 +81,28 @@ export const useEntryTextTranslation = (controlName: 'textMessageEntry') => {
     () =>
       t('input.inputPlaceholder', {
         hasLimit: hasCharacterLimit,
-        text:
-          optionsOverride?.text?.placeholder || t('input.inputPlaceholderText'),
+        text: placeholderOverride || t('input.inputPlaceholderText'),
         limit: hasCharacterLimit ? characterLimit : null,
       }),
-    [t, hasCharacterLimit, characterLimit, optionsOverride?.text?.placeholder],
+    [t, hasCharacterLimit, characterLimit, placeholderOverride],
   )
 
   const label: string = useMemo(
     () =>
       t('input.inputLabel', {
-        hasLimit: !optionsOverride?.text?.label ? hasCharacterLimit : false,
-        text: optionsOverride?.text?.label || t('input.inputLabelText'),
-        limit:
-          !optionsOverride?.text?.label && hasCharacterLimit
-            ? characterLimit
-            : null,
+        hasLimit: !labelOverride ? hasCharacterLimit : false,
+        text: labelOverride || t('input.inputLabelText'),
+        limit: !labelOverride && hasCharacterLimit ? characterLimit : null,
       }),
-    [t, hasCharacterLimit, characterLimit, optionsOverride?.text?.label],
+    [t, hasCharacterLimit, characterLimit, labelOverride],
   )
 
   const labelClass = useMemo(
     () =>
-      alwaysShowEntryLabel === true || optionsOverride?.text?.label
+      alwaysShowEntryLabel === true || labelOverride
         ? 'label'
         : 'visually-hidden',
-    [alwaysShowEntryLabel, optionsOverride?.text?.label],
+    [alwaysShowEntryLabel, labelOverride],
   )
 
   return { placeholder, label, labelClass }

package/src/javascripts/core/ui/components/entry/text-entry/index.tsx

@@ -1,7 +1,7 @@
-import { useCallback } from 'preact/hooks'
 import FormProvider from 'domains/forms/provider'
 import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
+import { useCallback } from 'preact/hooks'
 import {
   useSeamlyCommands,
   useSkiplink,

package/src/javascripts/core/ui/components/entry/text-entry/text-entry-form.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useLayoutEffect } from 'preact/hooks'
 import { useFormControl } from 'domains/forms/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+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'

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

@@ -1,8 +1,8 @@
-import { FC } from 'preact/compat'
 import { FormControlName } from 'domains/forms/forms.types'
 import { useFormControl } from 'domains/forms/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { FC } from 'preact/compat'
 import FileInput from 'ui/components/form-controls/file-input'
 import Form from 'ui/components/form-controls/form'
 

package/src/javascripts/core/ui/components/entry/upload/index.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import FormProvider from 'domains/forms/provider'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import UploadProgress from 'ui/components/widgets/upload-progress'
 import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
 import {

package/src/javascripts/core/ui/components/entry/upload-toggle.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useEffect, useRef, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
@@ -80,6 +80,7 @@ const UploadToggle = () => {
             aria-disabled={!showUploadButton}
             type="button"
             onClick={showUploadButton ? onClickHandler : undefined}
+            tabIndex={!showUploadButton ? -1 : undefined}
           >
             <Icon
               name="file"

package/src/javascripts/core/ui/components/form-controls/error.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'preact/hooks'
 import { className } from 'lib/css'
+import { useEffect, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 
 export default function Error({ id, error }) {

package/src/javascripts/core/ui/components/form-controls/file-input.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useState } from 'preact/hooks'
 import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import { className } from 'lib/css'
+import { useCallback, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import Error from './error'

package/src/javascripts/core/ui/components/form-controls/input.tsx

@@ -1,6 +1,6 @@
+import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import { InputHTMLAttributes } from 'preact/compat'
 import { useRef, useLayoutEffect } from 'preact/hooks'
-import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import FormControlWrapper from './wrapper'
 
 type InputProps = InputHTMLAttributes<HTMLInputElement> & {

package/src/javascripts/core/ui/components/form-controls/wrapper.tsx

@@ -1,5 +1,5 @@
-import { FC, HTMLAttributes } from 'preact/compat'
 import { className } from 'lib/css'
+import { FC, HTMLAttributes } from 'preact/compat'
 import Error from './error'
 
 type FormControlWrapperProps = {

package/src/javascripts/core/ui/components/layout/agent-info.tsx

@@ -1,9 +1,9 @@
-import { useSelector } from 'react-redux'
 import { useStartChatIcon } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { selectHasError } from 'domains/interrupt/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useSelector } from 'react-redux'
 import {
   useSeamlyCurrentAgent,
   useSeamlyHeaderData,

package/src/javascripts/core/ui/components/layout/chat-frame.tsx

@@ -1,8 +1,8 @@
-import { useSelector } from 'react-redux'
 import { selectHasError } from 'domains/interrupt/selectors'
 import TranslationStatus from 'domains/translations/components/translation-status'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useSelector } from 'react-redux'
 import AppOptions from 'ui/components/app-options'
 import ChatScrollProvider from 'ui/components/conversation/event/chat-scroll/chat-scroll-provider'
 import EntryContainer from 'ui/components/entry/entry-container'

package/src/javascripts/core/ui/components/layout/chat.tsx

@@ -1,13 +1,13 @@
-import { ComponentChildren } from 'preact'
-import { forwardRef } from 'preact/compat'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { ComponentChildren } from 'preact'
+import { forwardRef } from 'preact/compat'
 import Suggestions from 'ui/components/suggestions'
 import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
+import { useWindowOpenButtonFocusing } from 'ui/hooks/focus-helper-hooks'
 import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'
 import { useGeneratedId } from 'ui/hooks/utility-hooks'
 
@@ -15,7 +15,8 @@ const Chat = forwardRef<
   HTMLElement,
   { children: ComponentChildren; className?: string }
 >(({ children, className: givenClassName = '' }, forwardedRef) => {
-  const { isOpen, isVisible, setVisibility } = useVisibility()
+  const { closeChat, isOpen, isVisible } = useVisibility()
+  const focusWindowOpenButton = useWindowOpenButtonFocusing()
   const { namespace, layoutMode } = useConfig()
   const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
@@ -46,7 +47,8 @@ const Chat = forwardRef<
   const onKeyDownHandler = (e) => {
     if ((e.code && e.code === 'Escape') || e.keyCode === 27)
       if (!isInline && isOpen) {
-        setVisibility({ visibility: visibilityStates.minimized })
+        closeChat()
+        focusWindowOpenButton()
       }
   }
 
@@ -64,7 +66,7 @@ const Chat = forwardRef<
           className={className('chat__title', 'visually-hidden')}
           id={headingId}
         >
-          {t('chat.srLabel')}
+          {t('window.srModalLayoutLabel')}
         </h2>
         <div className={className('chat-wrapper')}>{children}</div>
         {layoutMode === 'inline' && isOpen && <Suggestions isAside={true} />}

package/src/javascripts/core/ui/components/layout/continue-chat-messages.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { ChannelEvent } from 'domains/store/store.types'
+import { useMemo } from 'preact/hooks'
 import { CollapsedChatMessages } from './collapsed-chat-messages'
 
 export default function ContinueChatMessages() {

package/src/javascripts/core/ui/components/layout/header.tsx

@@ -1,6 +1,6 @@
-import { useRef } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useRef } from 'preact/hooks'
 import { useSeamlyStateContext } from 'ui/hooks/seamly-hooks'
 import Icon from './icon'
 

package/src/javascripts/core/ui/components/layout/interrupt.tsx

@@ -1,6 +1,6 @@
-import { useEffect } from 'preact/hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
 import { className } from 'lib/css'
+import { useEffect } from 'preact/hooks'
 import CollapseButton from 'ui/components/view/window-view/collapse-button'
 import {
   useGeneratedId,

package/src/javascripts/core/ui/components/layout/pre-chat-messages.tsx

@@ -1,7 +1,7 @@
-import { useSelector } from 'react-redux'
 import { useConfig } from 'domains/config/hooks'
 import { selectHasError } from 'domains/interrupt/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
+import { useSelector } from 'react-redux'
 import { CollapsedChatMessages } from './collapsed-chat-messages'
 
 export default function PreChatMessages() {

package/src/javascripts/core/ui/components/options/options-button.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
@@ -167,9 +167,7 @@ const OptionsButton = () => {
     <div
       className={className('options__container')}
       onKeyDown={onMainKeyDownHandler}
-      // eslint-disable-next-line react/no-unknown-property
       onFocusOut={onFocusOutHandler}
-      // eslint-disable-next-line react/no-unknown-property
       onFocusIn={onFocusInHandler}
     >
       <InOutTransition

package/src/javascripts/core/ui/components/options/options-frame.tsx

@@ -1,6 +1,6 @@
+import { className } from 'lib/css'
 import { FC } from 'preact/compat'
 import { MutableRef, useCallback, useEffect } from 'preact/hooks'
-import { className } from 'lib/css'
 import Icon from 'ui/components/layout/icon'
 import {
   useGeneratedId,

package/src/javascripts/core/ui/components/options/transcript/index.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useMemo, useState } from 'preact/hooks'
 import FormProvider from 'domains/forms/provider'
 import { useI18n } from 'domains/i18n/hooks'
+import { useCallback, useMemo, useState } from 'preact/hooks'
 import OptionsFrame from 'ui/components/options/options-frame'
 import {
   useGeneratedId,

package/src/javascripts/core/ui/components/suggestions/index.tsx

@@ -1,5 +1,3 @@
-import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
@@ -10,6 +8,8 @@ import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 import { randomId } from 'lib/id'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import SuggestionsList from 'ui/components/suggestions/suggestions-list'
 import InOutTransition, {
   transitionStartStates,

package/src/javascripts/core/ui/components/suggestions/suggestions-list.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'preact/compat'
 import { ServiceDataEvent } from 'domains/store/store.types'
+import { FC } from 'preact/compat'
 import { className } from '../../../lib/css'
 import SuggestionsItem from './suggestions-item'
 

package/src/javascripts/core/ui/components/view/index.tsx

@@ -1,6 +1,3 @@
-import { RefCallback } from 'preact'
-import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
@@ -8,6 +5,9 @@ import { selectLastUnreadEvent } from 'domains/store/selectors'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { RefCallback } from 'preact'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import AppView from 'ui/components/view/app-view'
 import InlineView from 'ui/components/view/inline-view'
 import WindowView from 'ui/components/view/window-view'

package/src/javascripts/core/ui/components/view/window-view/collapse-button.tsx

@@ -1,18 +1,27 @@
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useCallback } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
+import { useWindowOpenButtonFocusing } from 'ui/hooks/focus-helper-hooks'
 import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'
 
 const CollapseButton = () => {
   const { t } = useI18n()
   const { isOpen, closeChat } = useVisibility()
   const { isWindow } = useSeamlyLayoutMode()
+  const focusWindowOpenButton = useWindowOpenButtonFocusing()
+
+  const handleClick = useCallback(() => {
+    closeChat()
+    focusWindowOpenButton()
+  }, [closeChat, focusWindowOpenButton])
+
   return isOpen && isWindow ? (
     <button
       type="button"
       className={className('button', 'collapse-button')}
-      onClick={closeChat}
+      onClick={handleClick}
     >
       <Icon name="chevronDown" size="32" alt={t('window.srCollapseButton')} />
     </button>

package/src/javascripts/core/ui/components/view/window-view/window-open-button.tsx

@@ -1,16 +1,17 @@
-import { useCallback } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useStartChatIcon } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { selectHasError } from 'domains/interrupt/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useCallback } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
 import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
 import { useSeamlyHasConversation } from 'ui/hooks/seamly-api-hooks'
+import { useSeamlyStateContext } from 'ui/hooks/seamly-hooks'
 import {
   useSeamlyCurrentAgent,
   useSeamlyUnreadCount,
@@ -41,21 +42,26 @@ const WindowOpenButton = ({ onClick }) => {
     : t('window.openButton.srStart')
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
   const { isOpen } = useVisibility()
+  const { windowOpenButtonId } = useSeamlyStateContext()
   const count = useSeamlyUnreadCount()
+
   const handleClick = useCallback(() => {
     onClick()
     focusSkiplinkTarget()
   }, [focusSkiplinkTarget, onClick])
+
   return (
     <InOutTransition
       isActive={!isOpen}
       transitionStartState={transitionStartStates.rendered}
     >
       <button
+        type="button"
         className={className('window-open-button')}
         aria-label={ariaLabel}
-        aria-hidden={isOpen}
         onClick={handleClick}
+        inert={isOpen || undefined}
+        id={windowOpenButtonId}
       >
         <InOutTransition
           isActive={!!count}

package/src/javascripts/core/ui/components/widgets/in-out-transition.tsx

@@ -1,8 +1,8 @@
+import { defaultTransitionTimeMs } from 'config'
+import { className } from 'lib/css'
 import { cloneElement, toChildArray } from 'preact'
 import { FC } from 'preact/compat'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
-import { defaultTransitionTimeMs } from 'config'
-import { className } from 'lib/css'
 import useTimeout from 'ui/hooks/use-timeout'
 import { ValueOf, childIsVNode } from 'ui/utils/general-utils'
 

package/src/javascripts/core/ui/components/widgets/lightbox.tsx

@@ -1,7 +1,7 @@
-import { useRef } from 'preact/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useRef } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import {
   useSeamlyActivityEventHandler,

package/src/javascripts/core/ui/hooks/file-upload-hooks.ts

@@ -1,6 +1,6 @@
-import { useCallback, useContext } from 'preact/hooks'
 import { useAppDispatch } from 'domains/store'
 import { clearAllUploads } from 'domains/store/slice'
+import { useCallback, useContext } from 'preact/hooks'
 import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 

package/src/javascripts/core/ui/hooks/focus-helper-hooks.ts

@@ -1,6 +1,6 @@
-import { useCallback, useRef } from 'preact/hooks'
 import { useAppDispatch } from 'domains/store'
 import { setSeamlyContainerElement } from 'domains/store/slice'
+import { useCallback, useRef } from 'preact/hooks'
 import {
   focusElement,
   runIfElementContainsOrHasFocus,
@@ -45,6 +45,11 @@ export const useSkiplinkTargetFocusing = () => {
   return useElementFocusingById(skiplinkTargetId)
 }
 
+export const useWindowOpenButtonFocusing = () => {
+  const { windowOpenButtonId } = useSeamlyStateContext()
+  return useElementFocusingById(windowOpenButtonId)
+}
+
 export const useFocusIfSeamlyContainedFocus = () => {
   const containerElementRef = useRef<
     HTMLElement | ((_element: any) => void) | null

package/src/javascripts/core/ui/hooks/seamly-entry-hooks.ts

@@ -1,4 +1,3 @@
-import { useCallback, useEffect, useRef } from 'preact/hooks'
 import { typingTimeout } from 'config'
 import { useAppDispatch } from 'domains/store'
 import {
@@ -6,6 +5,7 @@ import {
   setBlockAutoEntrySwitch,
   setUserEntryType,
 } from 'domains/store/slice'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
 import { useSeamlyCommands, useSeamlyOptions } from 'ui/hooks/seamly-hooks'
 import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'

package/src/javascripts/core/ui/hooks/seamly-option-hooks.ts

@@ -1,4 +1,3 @@
-import { useCallback } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useAppDispatch } from 'domains/store'
 import {
@@ -7,6 +6,7 @@ import {
   setUserSelectedOption as dispatchUserSelectedOption,
   setUserSelectedOptions as dispatchUserSelectedOptions,
 } from 'domains/store/slice'
+import { useCallback } from 'preact/hooks'
 import { useElementFocusingById } from 'ui/hooks/focus-helper-hooks'
 import { useSeamlyObjectStore } from 'ui/hooks/seamly-api-hooks'
 import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'

package/src/javascripts/core/ui/hooks/seamly-state-hooks.ts

@@ -1,11 +1,11 @@
 import { createSelector } from '@reduxjs/toolkit'
-import { useSelector } from 'react-redux'
 import { selectUserHasResponded } from 'domains/app/selectors'
 import { useConfig } from 'domains/config/hooks'
 import * as ConfigSelectors from 'domains/config/selectors'
-import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 import type { RootState } from 'domains/store'
 import type { ChannelEvent, ServiceDataEvent } from 'domains/store/store.types'
+import { useSelector } from 'react-redux'
+import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 
 export const selectState = ({ state }: RootState) => state
 export const useSeamlyStateContext = () => useSelector(selectState)
@@ -131,10 +131,15 @@ export const useSeamlyServiceData = (key: string) => {
 
 export const useEntryTextLimit = () => {
   const {
-    entryMeta: { options, optionsOverride },
+    entryMeta: { active: entryType, options, optionsOverride },
   } = useSeamlyStateContext()
 
-  const { limit } = optionsOverride?.text || options?.text || { limit: null }
+  let limit: number | null = null
+  if (entryType && typeof optionsOverride[entryType]?.limit === 'number') {
+    limit = optionsOverride[entryType].limit
+  } else if (entryType && typeof options[entryType]?.limit === 'number') {
+    limit = options[entryType].limit
+  }
 
   return {
     hasLimit: limit !== null,

package/src/javascripts/core/ui/hooks/use-debounce.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'preact/hooks'
 
-const useDebounce = <T extends unknown>(value: T, delay = 20): T => {
+const useDebounce = <T>(value: T, delay = 20): T => {
   const [debouncedValue, setDebouncedValue] = useState<T>(value)
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 

package/src/javascripts/core/ui/hooks/use-interval.ts

@@ -7,7 +7,6 @@ const useInterval = (callback, delay) => {
     savedCallback.current = callback
   }, [callback])
 
-  /* eslint-disable-next-line consistent-return */
   useEffect(() => {
     function tick() {
       savedCallback.current()

package/src/javascripts/core/ui/hooks/use-notifications.ts

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useConfig } from 'domains/config/hooks'
 import { selectShowNotifications } from 'domains/store/selectors'
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import { textEntryControlName } from 'ui/components/entry/text-entry'
 import { useSeamlyServiceInfo } from './seamly-state-hooks'
 import beep from './sounds/beep.mp3'
@@ -45,7 +45,6 @@ const useNotification = () => {
   }, [permission, proactiveMessages, requestPermission])
 
   const sendNotification = useCallback(
-    // eslint-disable-next-line no-undef
     async (title: string, options?: NotificationOptions) => {
       if (!showNotifications || !hasNotificationSupport) return
 

package/src/javascripts/core/ui/hooks/use-seamly-chat.ts

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
 import { selectShowInlineView } from '../../domains/visibility/selectors'
 import { useLiveRegion } from './live-region-hooks'

package/src/javascripts/core/ui/hooks/use-seamly-commands.ts

@@ -1,20 +1,20 @@
-import { useCallback } from 'preact/hooks'
 import { resetApp } from 'domains/app/actions'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { setHasResponded } from 'domains/app/slice'
 import { setInterrupt } from 'domains/interrupt/slice'
 import { useAppDispatch } from 'domains/store'
 import { addEvent, setEvents, setInitialState } from 'domains/store/slice'
+import type { MessageUpload } from 'domains/store/store.types'
 import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
 import { randomId } from 'lib/id'
+import { useCallback } from 'preact/hooks'
 import useSeamlyEventBusContext from './event-bus-hooks'
 import {
   useSeamlyApiContext,
   useSeamlyHasConversation,
 } from './seamly-api-hooks'
 import { useSeamlyUnreadCount } from './seamly-state-hooks'
-import type { MessageUpload } from 'domains/store/store.types'
 
 const useSeamlyCommands = () => {
   const api = useSeamlyApiContext()

package/src/javascripts/core/ui/hooks/use-seamly-conversation.ts

@@ -1,5 +1,5 @@
-import { useSyncExternalStore } from 'preact/compat'
 import ConversationConnector from 'api/conversation-connector'
+import { useSyncExternalStore } from 'preact/compat'
 import { useSeamlyApiContext } from './seamly-api-hooks'
 
 const useSeamlyConversation = () => {