@seamly/web-ui 20.3.0 → 20.5.0

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

@@ -1,3 +1,4 @@
+import { forwardRef } from 'preact/compat'
 import { className } from '../../../lib/css'
 import {
   useSeamlyAppContainerClassNames,
@@ -9,54 +10,57 @@ import { useI18n } from '../../../domains/i18n'
 import { useVisibility, visibilityStates } from '../../../domains/visibility'
 import Suggestions from '../suggestions'
 
-const Chat = ({ children, className: givenClassName = '' }) => {
-  const { isOpen, isVisible, setVisibility } = useVisibility()
-  const { namespace, layoutMode } = useConfig()
-  const { isInline } = useSeamlyLayoutMode()
-  const appContainerClassNames = useSeamlyAppContainerClassNames()
-  const userResponded = useUserHasResponded()
-  const { t } = useI18n()
-
-  const defaultClassNames = [
-    'chat',
-    `chat--layout-${layoutMode}`,
-    `namespace--${namespace}`,
-  ]
-
-  const classNames = [
-    ...defaultClassNames,
-    ...appContainerClassNames,
-    givenClassName,
-  ]
-
-  if (!isOpen && layoutMode !== 'app') {
-    classNames.push('chat--collapsed')
-  }
-
-  if (userResponded) {
-    classNames.push('chat--user-responded')
-  }
-
-  const onKeyDownHandler = (e) => {
-    if ((e.code && e.code === 'Escape') || e.keyCode === 27)
-      if (!isInline && isOpen) {
-        setVisibility(visibilityStates.minimized)
-      }
-  }
-
-  return (
-    isVisible && (
-      <section
-        className={className(classNames)}
-        onKeyDown={onKeyDownHandler}
-        tabIndex="-1"
-        aria-label={t('chat.srLabel')}
-      >
-        <div className={className('chat-wrapper')}>{children}</div>
-        {layoutMode === 'inline' && isOpen && <Suggestions isAside={true} />}
-      </section>
+const Chat = forwardRef(
+  ({ children, className: givenClassName = '' }, forwardedRef) => {
+    const { isOpen, isVisible, setVisibility } = useVisibility()
+    const { namespace, layoutMode } = useConfig()
+    const { isInline } = useSeamlyLayoutMode()
+    const appContainerClassNames = useSeamlyAppContainerClassNames()
+    const userResponded = useUserHasResponded()
+    const { t } = useI18n()
+
+    const defaultClassNames = [
+      'chat',
+      `chat--layout-${layoutMode}`,
+      `namespace--${namespace}`,
+    ]
+
+    const classNames = [
+      ...defaultClassNames,
+      ...appContainerClassNames,
+      givenClassName,
+    ]
+
+    if (!isOpen && layoutMode !== 'app') {
+      classNames.push('chat--collapsed')
+    }
+
+    if (userResponded) {
+      classNames.push('chat--user-responded')
+    }
+
+    const onKeyDownHandler = (e) => {
+      if ((e.code && e.code === 'Escape') || e.keyCode === 27)
+        if (!isInline && isOpen) {
+          setVisibility(visibilityStates.minimized)
+        }
+    }
+
+    return (
+      isVisible && (
+        <section
+          className={className(classNames)}
+          onKeyDown={onKeyDownHandler}
+          tabIndex="-1"
+          ref={forwardedRef}
+          aria-label={t('chat.srLabel')}
+        >
+          <div className={className('chat-wrapper')}>{children}</div>
+          {layoutMode === 'inline' && isOpen && <Suggestions isAside={true} />}
+        </section>
+      )
     )
-  )
-}
+  },
+)
 
 export default Chat

package/src/javascripts/ui/components/suggestions/suggestions-list.js

@@ -6,19 +6,17 @@ const SuggestionsList = ({
   suggestions = [],
   onClickSuggestion,
   hasIcon = true,
-}) => {
-  return (
-    <ul className={className('suggestions__list', givenClassName)}>
-      {suggestions.map((suggestion) => (
-        <SuggestionsItem
-          hasIcon={hasIcon}
-          key={suggestion.id}
-          onClick={onClickSuggestion}
-          {...suggestion}
-        />
-      ))}
-    </ul>
-  )
-}
+}) => (
+  <ul className={className('suggestions__list', givenClassName)}>
+    {suggestions.map((suggestion) => (
+      <SuggestionsItem
+        hasIcon={hasIcon}
+        key={suggestion.id}
+        onClick={onClickSuggestion}
+        {...suggestion}
+      />
+    ))}
+  </ul>
+)
 
 export default SuggestionsList

package/src/javascripts/ui/components/view/deprecated-view.js

@@ -1,3 +1,4 @@
+import { useVisibility, useShowInlineView } from 'domains/visibility'
 import DeprecatedAppFrame from '../layout/deprecated-app-frame'
 import ChatFrame from '../layout/chat-frame'
 import AgentInfo from '../layout/agent-info'
@@ -6,25 +7,29 @@ import Conversation from '../conversation/conversation'
 import EntryContainer from '../entry/entry-container'
 import Interrupt from '../layout/interrupt'
 import { useSeamlyChat } from '../../hooks/seamly-hooks'
-import { useVisibility } from '../../../domains/visibility'
 import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 
 const DeprecatedView = () => {
   const { isVisible } = useVisibility()
   const { openChat, closeChat } = useSeamlyChat()
+  const { showInlineView, containerRef } = useShowInlineView()
 
   return (
     isVisible && (
-      <DeprecatedAppFrame>
-        <DeprecatedToggleButton onOpenChat={openChat} />
-        <Header onCloseChat={closeChat}>
-          <AgentInfo />
-        </Header>
-        <ChatFrame interruptComponent={Interrupt}>
-          <Conversation />
-          <EntryContainer />
-        </ChatFrame>
-      </DeprecatedAppFrame>
+      <div ref={containerRef}>
+        {showInlineView && (
+          <DeprecatedAppFrame>
+            <DeprecatedToggleButton onOpenChat={openChat} />
+            <Header onCloseChat={closeChat}>
+              <AgentInfo />
+            </Header>
+            <ChatFrame interruptComponent={Interrupt}>
+              <Conversation />
+              <EntryContainer />
+            </ChatFrame>
+          </DeprecatedAppFrame>
+        )}
+      </div>
     )
   )
 }

package/src/javascripts/ui/components/view/index.js

@@ -16,7 +16,7 @@ const ViewComponentsMap = {
   window: WindowView,
 }
 
-const View = () => {
+const View = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
   const { namespace, layoutMode, zIndex } = useConfig()
   const { isOpen, isVisible } = useVisibility()
@@ -74,7 +74,7 @@ const View = () => {
         style={{ zIndex }}
         ref={containerElementRef}
       >
-        <ViewComponent />
+        {children || <ViewComponent />}
       </div>
     )
   )

package/src/javascripts/ui/components/view/inline-view.js

@@ -1,20 +1,22 @@
-import { className } from '../../../lib/css'
+import { className } from 'lib/css'
+import { useVisibility, useShowInlineView } from 'domains/visibility'
+import { useInterrupt } from 'domains/interrupt'
 import Chat from '../layout/chat'
 import Interrupt from '../layout/interrupt'
 import Conversation from '../conversation/conversation'
 import EntryContainer from '../entry/entry-container'
 import ChatFrame from '../layout/chat-frame'
 import useSeamlyChat from '../../hooks/use-seamly-chat'
-import { useVisibility } from '../../../domains/visibility'
 import PreChatMessages from '../layout/pre-chat-messages'
 import Suggestions from '../suggestions'
 import InOutTransition, {
   transitionStartStates,
 } from '../widgets/in-out-transition'
-import { useInterrupt } from '../../../domains/interrupt'
 
 const InlineView = () => {
   useSeamlyChat()
+  const { showInlineView, containerRef } = useShowInlineView()
+
   const { isOpen } = useVisibility()
   const { hasInterrupt, meta } = useInterrupt()
 
@@ -29,6 +31,7 @@ const InlineView = () => {
         transitionStartState={transitionStartStates.rendered}
       >
         <div
+          ref={containerRef}
           className={className(
             'unstarted-wrapper',
             'unstarted-wrapper--inline',
@@ -42,11 +45,13 @@ const InlineView = () => {
         isActive={isOpen}
         transitionStartState={transitionStartStates.rendered}
       >
-        <Chat>
-          <ChatFrame interruptComponent={Interrupt}>
-            {isOpen && <Conversation />}
-            <EntryContainer />
-          </ChatFrame>
+        <Chat ref={containerRef}>
+          {showInlineView && (
+            <ChatFrame interruptComponent={Interrupt}>
+              {isOpen && <Conversation />}
+              <EntryContainer />
+            </ChatFrame>
+          )}
         </Chat>
       </InOutTransition>
     </>

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

@@ -80,12 +80,13 @@ export const useSeamlyEntry = () => {
     active,
     userSelected,
     options: entryOptions,
+    optionsOverride: entryOptionsOverride,
   } = useSeamlyStateContext().entryMeta
   const dispatch = useSeamlyDispatchContext()
 
   const activeEntry = userSelected || active || defaultEntry
-
-  const activeEntryOptions = entryOptions[activeEntry] || {}
+  const activeEntryOptions =
+    entryOptionsOverride[activeEntry] || entryOptions[activeEntry] || {}
 
   const setBlockAutoEntrySwitch = useCallback(
     (value) => {

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

@@ -71,6 +71,9 @@ export const useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles
 
 export const useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents
 
+export const useLoadedImageEventIds = () =>
+  useSeamlyStateContext().loadedImageEventIds
+
 export const useSkiplink = () => useSeamlyStateContext().skiplinkTargetId
 
 export const useSeamlyParticipant = (participantId) =>
@@ -100,14 +103,15 @@ export const useEntryTextLimit = () => {
   const {
     entryMeta: {
       options: { text },
+      optionsOverride: { text: overrideText },
     },
   } = useSeamlyStateContext()
 
-  const { limit } = text || {}
+  const { limit } = overrideText || text || { limit: null }
 
   return {
-    hasLimit: limit != null,
-    limit: limit != null ? limit : null,
+    hasLimit: limit !== null,
+    limit: limit !== null ? limit : null,
   }
 }
 

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

@@ -1,29 +1,31 @@
-import { useEffect, useRef } from 'preact/hooks'
+import { useCallback, 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 { useEvents, useSeamlyLayoutMode } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useLiveRegion } from './live-region-hooks'
-import { useConfig } from '../../domains/config'
+import { useSelector } from '../../domains/redux/hooks'
+import { selectShowInlineView } from '../../domains/visibility/selectors'
 
 const { SET_IS_LOADING } = seamlyActions
 
 const useSeamlyChat = () => {
   const { t } = useI18n()
-  const { layoutMode } = useConfig()
+  const { isInline, isWindow } = useSeamlyLayoutMode()
   const { isOpen, isVisible, setVisibility } = useVisibility()
+  const showInlineView = useSelector(selectShowInlineView)
   const dispatch = useSeamlyDispatchContext()
   const events = useEvents()
   const spinnerTimeout = useRef(null)
-  const { start, connect, apiConfigReady } = useSeamlyCommands()
+  const { start, connect, apiConfigReady, apiConnected } = useSeamlyCommands()
   const hasConversation = useSeamlyHasConversation()
   const prevIsOpen = useRef(null)
   const prevIsVisible = useRef(null)
+  const startCalled = useRef(false)
   const { sendAssertive } = useLiveRegion()
-  const connectCalled = useRef(false)
 
   const hasEvents = events.length > 0
 
@@ -76,28 +78,41 @@ const useSeamlyChat = () => {
   }, [hasEvents, dispatch])
 
   useEffect(() => {
-    // This is needed to reset the ref to allow connect to happen again.
+    // This is needed to reset the ref to allow connect and start to happen again.
     // Mostly due to Interrupt situations and a reset being called.
-    if (!hasConversation || !apiConfigReady) {
-      connectCalled.current = false
+    if (!apiConfigReady || !apiConnected) {
+      startCalled.current = false
     }
-  }, [hasConversation, apiConfigReady])
+  }, [apiConfigReady, apiConnected])
 
-  useEffect(() => {
-    // We don't connect minimised or hidden window interfaces unless
-    // they had been connected before.
-    // We also keep track of whether connect was called before to avoid
-    // multiple in-flight connection processes.
+  const connectAndStart = useCallback(async () => {
+    // We don't connect if we are already connected to the api to avoid multiple in-flight connection processes.
+    if (!apiConnected) {
+      await connect()
+    }
+
+    // We only start a conversation when the chat interface is either 'open' or if using the inline view if it's 'open' or 'minimized'.
+    if (isOpen || (isVisible && isInline)) {
+      start()
+      startCalled.current = true
+    }
+  }, [apiConnected, connect, isInline, isOpen, isVisible, start])
 
+  useEffect(() => {
+    // We dont't connect or start when the apiConfig is not ready yet.
+    // We also keep track of whether start has been called to avoid multiple in-flight connection processes.
+    // We check if the window view is not open and no conversation is started yet.
+    // Lastly we check if the inline view is not scrolled in to view.
     if (
-      (layoutMode === 'window' && !isOpen && !hasConversation) ||
-      connectCalled.current ||
-      !apiConfigReady
+      !apiConfigReady ||
+      startCalled.current ||
+      (isWindow && !isOpen && !hasConversation) ||
+      (isInline && !showInlineView)
     ) {
       return
     }
 
-    if (hasConversation) {
+    if (hasConversation && isOpen) {
       // We deactivate the extra startup loading spinner when a conversation is available
       // We also stop setting the loading indicator in the first place to avoid a flash.
       clearTimeout(spinnerTimeout.current)
@@ -106,19 +121,16 @@ const useSeamlyChat = () => {
         isLoading: false,
       })
     }
-    connect().then(() => {
-      start()
-    })
-
-    connectCalled.current = true
+    connectAndStart()
   }, [
-    isOpen,
-    hasConversation,
     apiConfigReady,
-    start,
-    connect,
+    connectAndStart,
     dispatch,
-    layoutMode,
+    hasConversation,
+    isInline,
+    isOpen,
+    isWindow,
+    showInlineView,
   ])
 
   const openChat = () => {

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

@@ -7,7 +7,7 @@ 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 { useVisibility, visibilityStates } from 'domains/visibility'
 import { useStableCallback } from './utility-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyUnreadCount } from './seamly-state-hooks'
@@ -26,7 +26,7 @@ const useSeamlyCommands = () => {
 
   const hasResponded = useUserHasResponded()
   const hasConversation = useSeamlyHasConversation()
-  const { visible: visibility } = useVisibility()
+  const { visible: visibility, setVisibility } = useVisibility()
   const unreadMessageCount = useSeamlyUnreadCount()
 
   const emitEvent = useCallback(
@@ -44,6 +44,7 @@ const useSeamlyCommands = () => {
       hasResponded,
       unreadMessageCount,
     })
+
     api.send('start')
     emitEvent('ui.start', {
       visibility,
@@ -107,7 +108,13 @@ const useSeamlyCommands = () => {
       emitEvent('message', message)
       dispatch({
         type: ADD_EVENT,
-        event: { type: 'message', payload: message },
+        event: {
+          type: 'message',
+          payload: {
+            ...message,
+            optimisticallyInjected: true,
+          },
+        },
       })
     },
     [api, dispatch, emitEvent, getTextMessageBase],
@@ -213,12 +220,16 @@ const useSeamlyCommands = () => {
       .then((initialState) => {
         if (initialState) {
           dispatch({ type: SET_INITIAL_STATE, initialState })
+          if (initialState.userResponded) {
+            dispatch(AppActions.setHasResponded(initialState.userResponded))
+            setVisibility(visibilityStates.open)
+          }
         }
       })
       .catch((error) => {
         dispatch(InterruptActions.set(error))
       })
-  }, [api, dispatch])
+  }, [api, dispatch, setVisibility])
 
   return {
     connect,
@@ -232,6 +243,7 @@ const useSeamlyCommands = () => {
     addMessageBubble,
     addUploadBubble,
     addDivider,
+    apiConnected: api.connected,
     apiConfigReady: api.configReady,
   }
 }

package/src/javascripts/ui/utils/seamly-utils.js

@@ -73,6 +73,7 @@ export const seamlyActions = {
   CLEAR_EVENTS: 'CLEAR_EVENTS',
   SET_HISTORY: 'SET_HISTORY',
   SET_EVENTS_READ: 'SET_EVENTS_READ',
+  SET_LOADED_IMAGE_EVENT_IDS: 'SET_LOADED_IMAGE_EVENT_IDS',
   ACK_EVENT: 'ACK_EVENT',
   SET_IS_LOADING: 'SET_IS_LOADING',
   CLEAR_PARTICIPANTS: 'CLEAR_PARTICIPANTS',
@@ -121,6 +122,7 @@ const {
   CLEAR_EVENTS,
   SET_HISTORY,
   SET_EVENTS_READ,
+  SET_LOADED_IMAGE_EVENT_IDS,
   ACK_EVENT,
   SET_IS_LOADING,
   CLEAR_PARTICIPANTS,
@@ -171,13 +173,18 @@ const orderHistory = (events) => {
 }
 
 export const mergeHistory = (stateEvents, historyEvents) => {
+  const newStateEvents = stateEvents.filter(
+    (stateEvent) =>
+      // Deduplicate the event streams, giving events in historyEvents
+      // precedence so the server is able to push changes to events.
+      !historyEvents.some(
+        (historyEvent) => historyEvent.payload.id === stateEvent.payload.id,
+      ),
+  )
+
   const newHistoryEvents = historyEvents
     .filter(
       (historyEvent) =>
-        // Deduplicate the event streams
-        !stateEvents.find(
-          (stateEvent) => stateEvent.payload.id === historyEvent.payload.id,
-        ) &&
         // Remove all non displayable participant messages
         !(
           historyEvent.type === 'participant' &&
@@ -190,7 +197,7 @@ export const mergeHistory = (stateEvents, historyEvents) => {
     // the normal merging logic there is no added effect.
     .reverse()
 
-  return orderHistory([...newHistoryEvents, ...stateEvents])
+  return orderHistory([...newHistoryEvents, ...newStateEvents])
 }
 
 const participantReducer = (state, action) => {
@@ -384,7 +391,7 @@ export const seamlyStateReducer = (state, action) => {
         : state
 
     case CLEAR_EVENTS:
-      return { ...state, unreadEvents: 0, events: [] }
+      return { ...state, unreadEvents: 0, loadedImageEventIds: [], events: [] }
     case SET_EVENTS_READ:
       return {
         ...state,
@@ -404,6 +411,11 @@ export const seamlyStateReducer = (state, action) => {
           return event
         }),
       }
+    case SET_LOADED_IMAGE_EVENT_IDS:
+      return {
+        ...state,
+        loadedImageEventIds: [...state.loadedImageEventIds, action.eventId],
+      }
     case SET_HISTORY:
       const {
         events: history,
@@ -606,7 +618,12 @@ export const seamlyStateReducer = (state, action) => {
         headerTitles: headerTitlesReducer(state.headerTitles, action),
       }
     case SET_INITIAL_STATE:
-      return { ...state, initialState: action.initialState }
+      const { initialState } = action
+      return {
+        ...state,
+        initialState,
+        unreadEvents: initialState.unreadMessageCount,
+      }
     case SET_SERVICE_DATA_ITEM:
       return {
         ...state,

package/src/stylesheets/5-components/_message-count.scss

@@ -10,8 +10,10 @@
   height: $messagecountsize;
   transform: scale(1);
   transform-origin: 50% 50%;
-  transition: transform 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: transform 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    opacity $transition;
   border-radius: 50%;
+  opacity: 1;
   background-color: $negative;
   color: $white;
   font-size: $fontsize-small;
@@ -20,6 +22,7 @@
 
   &:empty {
     transform: scale(0);
-    transition: transform $transition;
+    transition: transform $transition, opacity $transition;
+    opacity: 0;
   }
 }