@seamly/web-ui 20.4.0 → 20.5.0

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/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

@@ -103,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

@@ -173,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' &&
@@ -192,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) => {
@@ -613,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/javascripts/lib/parse-body.js

@@ -1,10 +0,0 @@
-import { marked } from 'marked'
-
-export default (body) => {
-  try {
-    return marked(body)
-  } catch (e) {
-    console.log('Could not parse message', body, e)
-    return ''
-  }
-}

package/src/javascripts/ui/components/conversation/event/hooks/use-text-rendering.js

@@ -1,35 +0,0 @@
-import Mustache from 'mustache'
-
-Mustache.escape = function (escapeText) {
-  return escapeText
-}
-
-const parseLinkVariable = (variable) => {
-  return `<a href='${variable.url}' data-link-id='${variable.id}' ${
-    variable.newTab ? 'target="_blank"' : ''
-  }>${variable.name}</a>`
-}
-
-export function parseRichText(text, variables = {}) {
-  const view = {}
-  Object.entries(variables).forEach(([key, variable]) => {
-    switch (variable.type) {
-      case 'link':
-        view[key] = parseLinkVariable(variable)
-        break
-      case 'text':
-        view[key] = variable.value
-        break
-    }
-  }, {})
-
-  // Disable escaping as we'll be generating HTML
-  const oldEscape = Mustache.escape
-  Mustache.escape = function (escapeText) {
-    return escapeText
-  }
-  const output = Mustache.render(text, view)
-  Mustache.escape = oldEscape
-
-  return output
-}