@seamly/web-ui 20.1.0 → 20.2.0-alpha.3

package/src/javascripts/ui/components/core/seamly-core.js

@@ -1,6 +1,4 @@
 import { useErrorBoundary } from 'preact/hooks'
-import { StoreProvider } from 'domains/redux'
-import { catchError } from 'domains/errors'
 import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
 import SeamlyReadState from './seamly-read-state'
 import SeamlyNewNotifications from './seamly-new-notifications'
@@ -11,6 +9,8 @@ import SeamlyInitializer from './seamly-initializer'
 import SeamlyEventSubscriber from './seamly-event-subscriber'
 import SeamlyFileUpload from './seamly-file-upload'
 import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
+import { StoreProvider } from 'domains/redux'
+import { catchError } from 'domains/errors'
 import ComponentFilter from '../conversation/component-filter'
 
 const SeamlyCore = ({ store, children, config, eventBus, api }) => {

package/src/javascripts/ui/components/core/seamly-file-upload.js

@@ -1,3 +1,4 @@
+import SeamlyFileUploadContext from './seamly-file-upload-context'
 import { useI18n } from 'domains/i18n'
 import { randomId } from 'lib/id'
 import { seamlyActions } from 'ui/utils/seamly-utils'
@@ -6,7 +7,6 @@ import {
   useSeamlyApiContext,
   useSeamlyDispatchContext,
 } from 'ui/hooks/seamly-hooks'
-import SeamlyFileUploadContext from './seamly-file-upload-context'
 
 const {
   REGISTER_UPLOAD,

package/src/javascripts/ui/components/core/seamly-instance-functions-loader.js

@@ -7,11 +7,11 @@ import {
   useSeamlyActivityEventHandler,
   useSeamlyApiContext,
 } from 'ui/hooks/seamly-hooks'
+import { SeamlyEventBusContext } from './seamly-api-context'
 import { useTranslations } from 'domains/translations'
 import { useInterrupt } from 'domains/interrupt'
 import { useConfig } from 'domains/config'
 import { visibilityStates, useVisibility } from 'domains/visibility'
-import { SeamlyEventBusContext } from './seamly-api-context'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {
   const eventBus = useContext(SeamlyEventBusContext)

package/src/javascripts/ui/components/core/seamly-live-region.js

@@ -5,10 +5,10 @@ import {
   useCallback,
   useContext,
 } from 'preact/hooks'
-import { ariaLiveLevels } from 'ui/utils/seamly-utils'
-import { className } from 'lib/css'
 import { SeamlyLiveRegionContext } from './seamly-live-region-context'
 import { SeamlyEventBusContext } from './seamly-api-context'
+import { ariaLiveLevels } from 'ui/utils/seamly-utils'
+import { className } from 'lib/css'
 
 const SeamlyLiveRegion = ({ children }) => {
   const eventBus = useContext(SeamlyEventBusContext)

package/src/javascripts/ui/components/entry/entry-container.js

@@ -11,11 +11,11 @@ import { entryTypes } from 'ui/utils/seamly-utils'
 import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
 import IdleDetachWarning from 'ui/components/warnings/idle-detach-warning'
 import ResumeConversationPrompt from 'ui/components/warnings/resume-conversation-prompt'
-import { useConfig } from 'domains/config'
-import { useVisibility } from 'domains/visibility'
 import TextEntry from './text-entry'
 import UploadToggle from './upload-toggle'
 import Upload from './upload'
+import { useConfig } from 'domains/config'
+import { useVisibility } from 'domains/visibility'
 
 const EntryContainer = () => {
   const { isOpen } = useVisibility()

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

@@ -3,7 +3,10 @@ import { useI18n } from 'domains/i18n'
 import { useLiveRegion } from 'ui/hooks/live-region-hooks'
 import { useEntryTextLimit } from 'ui/hooks/seamly-state-hooks'
 import { debounce } from 'ui/utils/general-utils'
-import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
+import {
+  maxCharacterSrDebounceDelay,
+  maxCharacterWarningLimit,
+} from 'config'
 import { useFormControl } from 'domains/forms'
 
 export function useCharacterLimit(controlName) {

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

@@ -10,8 +10,8 @@ import Icon from 'ui/components/layout/icon'
 import { useFormControl } from 'domains/forms'
 import Form from 'ui/components/form-controls/form'
 import Input from 'ui/components/form-controls/input'
-import { useI18n } from 'domains/i18n'
 import { useCharacterLimit } from './hooks'
+import { useI18n } from 'domains/i18n'
 
 export default function TextEntryForm({ controlName, skipLinkId }) {
   const { t } = useI18n()

package/src/javascripts/ui/components/form-controls/select.js

@@ -1,5 +1,5 @@
-import { useFormContext, useFormControl } from 'domains/forms'
 import FormControlWrapper from './wrapper'
+import { useFormContext, useFormControl } from 'domains/forms'
 
 const Select = ({
   id,

package/src/javascripts/ui/components/layout/agent-info.js

@@ -1,3 +1,4 @@
+import Icon from './icon'
 import {
   useSeamlyHeaderData,
   useSeamlyUnreadCount,
@@ -8,7 +9,6 @@ import { useI18n } from 'domains/i18n'
 import { useInterrupt } from 'domains/interrupt'
 import { useStartChatIcon } from 'domains/config'
 import { useVisibility } from 'domains/visibility'
-import Icon from './icon'
 
 const AgentInfo = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/layout/header.js

@@ -1,8 +1,8 @@
 import { useRef } from 'preact/hooks'
 import { className } from 'lib/css'
+import Icon from './icon'
 import { useI18n } from 'domains/i18n'
 import { useSeamlyStateContext } from 'ui/hooks/seamly-hooks'
-import Icon from './icon'
 
 const Header = ({ children, onCloseChat }) => {
   const { headerCollapseButtonId } = useSeamlyStateContext()

package/src/javascripts/ui/components/options/options-button.js

@@ -4,11 +4,11 @@ import { className } from 'lib/css'
 import { useSeamlyOptions, useOptionButton } from 'ui/hooks/seamly-hooks'
 import { useI18n } from 'domains/i18n'
 import Icon from 'ui/components/layout/icon'
+import Options from './options'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
 import { getKey, keyNames, focusElement } from 'ui/utils/general-utils'
-import Options from './options'
 
 const OptionsButton = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/options/options.js

@@ -1,6 +1,6 @@
 import { useRef } from 'preact/hooks'
-import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
 import Transcript from './transcript'
+import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
 
 const mapper = {
   sendTranscript: Transcript,

package/src/javascripts/ui/components/options/transcript/index.js

@@ -10,9 +10,9 @@ import {
 } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
 import { FormProvider } from 'domains/forms'
+import TranscriptForm from './transcript-form'
 import { getValidator } from 'ui/utils/form-utils'
 import { isEmailString, isNotEmptyString } from 'ui/utils/validations'
-import TranscriptForm from './transcript-form'
 
 const formId = 'sendTranscript'
 const controlName = 'email'

package/src/javascripts/ui/components/warnings/resume-conversation-prompt.js

@@ -1,9 +1,9 @@
 import { className } from 'lib/css'
 import { useI18n } from 'domains/i18n'
+import Prompt from './prompt'
 import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
 import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
 import { useSeamlyCurrentAgent } from 'ui/hooks/seamly-state-hooks'
-import Prompt from './prompt'
 
 const ResumeConversationPrompt = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/widgets/lightbox.js

@@ -1,4 +1,5 @@
 import { useRef } from 'preact/hooks'
+import Modal from './modal'
 import { useI18n } from 'domains/i18n'
 import {
   useSeamlyActivityEventHandler,
@@ -7,7 +8,6 @@ import {
 import { className } from 'lib/css'
 import Icon from 'ui/components/layout/icon'
 import { useConfig } from 'domains/config'
-import Modal from './modal'
 
 const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
   const { zIndex, layoutMode, namespace } = useConfig()

package/src/javascripts/ui/hooks/file-upload-hooks.js

@@ -1,8 +1,9 @@
 import { useCallback, useContext } from 'preact/hooks'
-import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
-import { seamlyActions } from 'ui/utils/seamly-utils'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
+import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
+
+import { seamlyActions } from 'ui/utils/seamly-utils'
 
 const { CLEAR_ALL_UPLOADS } = seamlyActions
 

package/src/javascripts/ui/hooks/focus-helper-hooks.js

@@ -1,11 +1,11 @@
 import { useCallback, useRef } from 'preact/hooks'
+import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
 import {
   focusElement,
   runIfElementContainsOrHasFocus,
 } from 'ui/utils/general-utils'
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
+import { seamlyActions } from 'ui/utils/seamly-utils'
 
 const { SET_SEAMLY_CONTAINER_ELEMENT } = seamlyActions
 

package/src/javascripts/ui/hooks/seamly-entry-hooks.js

@@ -1,10 +1,10 @@
 import { useRef, useCallback, useEffect } from 'preact/hooks'
 import { seamlyActions, actionTypes } from 'ui/utils/seamly-utils'
-import { typingTimeout } from 'config'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyOptions } from './seamly-option-hooks'
 import useSeamlyCommands from './use-seamly-commands'
+import { typingTimeout } from 'config'
 
 const {
   SET_BLOCK_AUTO_ENTRY_SWITCH,

package/src/javascripts/ui/hooks/seamly-option-hooks.js

@@ -1,10 +1,10 @@
 import { useCallback } from 'preact/hooks'
 import { useI18n } from 'domains/i18n'
-import { seamlyActions } from 'ui/utils/seamly-utils'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyObjectStore } from './seamly-api-hooks'
 import { useElementFocusingById } from './focus-helper-hooks'
+import { seamlyActions } from 'ui/utils/seamly-utils'
 
 const {
   SET_USER_SELECTED_OPTION,

package/src/javascripts/ui/hooks/use-seamly-chat.js

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'preact/hooks'
 import { useI18n } from 'domains/i18n'
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import { useVisibility, visibilityStates } from 'domains/visibility'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useEvents } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useLiveRegion } from './live-region-hooks'
+import { seamlyActions } from 'ui/utils/seamly-utils'
+import { useVisibility, visibilityStates } from 'domains/visibility'
 import { useConfig } from '../../domains/config'
 
 const { SET_IS_LOADING } = seamlyActions

package/src/javascripts/ui/hooks/use-seamly-commands.js

@@ -1,20 +1,20 @@
 import { useCallback, useContext } from 'preact/hooks'
+import {
+  useSeamlyApiContext,
+  useSeamlyHasConversation,
+} from './seamly-api-hooks'
+import { useSeamlyUnreadCount } from './seamly-state-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
 import { randomId } from 'lib/id'
 import { userParticipantId } from 'config'
 import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
+import { useStableCallback } from './utility-hooks'
 import { Actions as InterruptActions } from 'domains/interrupt'
 import { useConfig } from 'domains/config'
 import * as AppActions from 'domains/app/actions'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useVisibility } from 'domains/visibility'
-import { useStableCallback } from './utility-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { useSeamlyUnreadCount } from './seamly-state-hooks'
-import {
-  useSeamlyApiContext,
-  useSeamlyHasConversation,
-} from './seamly-api-hooks'
 
 const { ADD_EVENT, SET_INITIAL_STATE } = seamlyActions
 

package/src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js

@@ -1,5 +1,9 @@
 import { useCallback, useRef } from 'preact/hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
+import { useSeamlyStateContext } from './seamly-state-hooks'
+import useSeamlyCommands from './use-seamly-commands'
 import { useI18n } from 'domains/i18n'
+import { useLiveRegion } from './live-region-hooks'
 import {
   getTimeFromSeconds,
   millisecondsToSeconds,
@@ -7,10 +11,6 @@ import {
 import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
 import { screenReaderDebounceDelaySeconds } from 'config'
 import { useVisibility } from 'domains/visibility'
-import { useLiveRegion } from './live-region-hooks'
-import useSeamlyCommands from './use-seamly-commands'
-import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
 
 const {
   CLEAR_IDLE_DETACH_COUNTDOWN,

package/src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js

@@ -1,9 +1,9 @@
-import { useI18n } from 'domains/i18n'
-import { actionTypes, dismissTypes, seamlyActions } from 'ui/utils/seamly-utils'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
+import { useI18n } from 'domains/i18n'
 import { useLiveRegion } from './live-region-hooks'
+import { actionTypes, dismissTypes, seamlyActions } from 'ui/utils/seamly-utils'
 
 const { CLEAR_RESUME_CONVERSATION_PROMPT } = seamlyActions
 

package/src/javascripts/ui/hooks/use-single-file-upload.js

@@ -1,6 +1,6 @@
+import { useFileUploads } from './seamly-hooks'
 import { Selectors } from 'domains/forms'
 import { useSelectorWithProps } from 'domains/redux'
-import { useFileUploads } from './seamly-hooks'
 
 const useSingleFileUpload = (formId, name) => {
   const fileList = useSelectorWithProps(

package/src/stylesheets/5-components/_chat-status.scss

@@ -15,6 +15,10 @@
   box-shadow: $boxshadow;
 }
 
+&.#{$n}-app--collapsed .#{$n}-chat-status {
+  display: none;
+}
+
 .#{$n}-chat--layout-window .#{$n}-chat-status {
   width: calc(100% - #{$spacer * 2.5 + $buttonsize});
 }

package/src/stylesheets/5-components/_message-translation-info.scss

@@ -2,6 +2,10 @@
   width: 100%;
 }
 
+&.#{$n}-app--collapsed .#{$n}-message__translation-info {
+  display: none;
+}
+
 .#{$n}-message__translation-label {
   margin-right: $spacer * 0.25;
   font-size: $fontsize-small;

package/src/stylesheets/7-deprecated/5-components/_message.scss

@@ -79,6 +79,10 @@ $avatar-size: $badge-touch-size;
   width: 100%;
 }
 
+&.#{$n}-app--collapsed .#{$n}-message__translation-info {
+  display: none;
+}
+
 .#{$n}-message__translation-label {
   margin-right: $spacer * 0.25;
   font-size: $fontsize-small;

package/src/stylesheets/7-deprecated/5-components/_suggestions.scss

@@ -0,0 +1,3 @@
+.#{$n}-suggestions {
+  display: none;
+}

package/src/stylesheets/deprecated-view.scss

@@ -54,6 +54,7 @@
   @import '7-deprecated/5-components/card';
   @import '7-deprecated/5-components/carousel';
   @import '7-deprecated/5-components/collapse-button';
+  @import '7-deprecated/5-components/suggestions';
 }
 
 .#{$n}-app--deprecated,

package/webpack/config.package.js

@@ -1,4 +1,5 @@
 /* eslint-disable */
+const webpackDefinePlugin = require('webpack').DefinePlugin
 const webpackMerge = require('webpack-merge').merge
 const glob = require('glob')
 const path = require('path')
@@ -43,6 +44,12 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
         (key) => new RegExp(`^${key}(\\/.*)`, 'i'),
       ),
     ],
+    plugins: [
+      new webpackDefinePlugin({
+        PACKAGE_NAME: JSON.stringify(pkg.name),
+        PACKAGE_VERSION: JSON.stringify(pkg.version),
+      }),
+    ],
     resolve: {
       modules: [path.resolve(__dirname, '../src/javascripts'), 'node_modules'],
     },