@seamly/web-ui 20.8.0-alpha.1 → 20.8.0-beta.2

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

@@ -1,4 +1,5 @@
 import { useUserHasResponded } from 'domains/app/hooks'
+import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
 import { useTranslatedEventData } from 'domains/translations/hooks'
@@ -29,6 +30,7 @@ const Suggestions = ({ isAside = false }) => {
   const { t } = useI18n()
   const { sendAction, addMessageBubble } = useSeamlyCommands()
   const { isOpen, setVisibility } = useVisibility()
+  const { showSuggestions } = useConfig()
   // a11y hooks
   const sectionId = useGeneratedId()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
@@ -41,7 +43,7 @@ const Suggestions = ({ isAside = false }) => {
   // data hooks
   const userHasResponded = useUserHasResponded()
   const payload = useSeamlyServiceData('suggestion')
-  const [eventBody] = useTranslatedEventData({ payload })
+  const { body: eventBody } = useTranslatedEventData({ payload })
   const suggestions = useMemo(
     () => (payload && !hasInterrupt ? eventBody : []),
     [payload, hasInterrupt, eventBody],
@@ -56,7 +58,8 @@ const Suggestions = ({ isAside = false }) => {
     ? (userHasResponded || isOpen) && !isAside
     : userHasResponded
   const prevHideSuggestions = useRef(hideSuggestions)
-  const showSuggestionsContainer = hasSuggestions && !hideSuggestions
+  const showSuggestionsContainer =
+    hasSuggestions && !hideSuggestions && showSuggestions
   const renderedSuggestions = hasSuggestions
     ? suggestions
     : previousRenderedSuggestions.current

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

@@ -65,6 +65,12 @@ export const selectEvents = createSelector(
 )
 export const useEvents = () => useSelector(selectEvents)
 
+export const selectEventIds = createSelector(selectEvents, (events) => {
+  return events.map((event) => event.payload.id)
+})
+
+export const useEventsIds = () => useSelector(selectEventIds)
+
 export const useSeamlyIsLoading = () => useSeamlyStateContext().isLoading
 
 export const useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles

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

@@ -7,7 +7,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { selectShowInlineView } from '../../domains/visibility/selectors'
 import { useLiveRegion } from './live-region-hooks'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
-import { useEvents, useSeamlyLayoutMode } from './seamly-state-hooks'
+import { useSeamlyLayoutMode } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
 
 const useSeamlyChat = () => {
@@ -16,7 +16,6 @@ const useSeamlyChat = () => {
   const { isOpen, isVisible, setVisibility } = useVisibility()
   const showInlineView = useSelector(selectShowInlineView)
   const dispatch = useDispatch()
-  const events = useEvents()
   const spinnerTimeout = useRef(null)
   const { start, connect, apiConfigReady, apiConnected } = useSeamlyCommands()
   const hasConversation = useSeamlyHasConversation()
@@ -25,8 +24,6 @@ const useSeamlyChat = () => {
   const startCalled = useRef(false)
   const { sendAssertive } = useLiveRegion()
 
-  const hasEvents = events.length > 0
-
   useEffect(() => {
     if (isVisible) {
       // Wait for the live containers to stabilise in the DOM before injecting
@@ -60,14 +57,11 @@ const useSeamlyChat = () => {
     spinnerTimeout.current = setTimeout(() => {
       dispatch(setIsLoading(true))
     }, 500)
-  }, [dispatch])
 
-  useEffect(() => {
-    if (hasEvents) {
+    return () => {
       clearTimeout(spinnerTimeout.current)
-      dispatch(setIsLoading(false))
     }
-  }, [hasEvents, dispatch])
+  }, [dispatch])
 
   useEffect(() => {
     // This is needed to reset the ref to allow connect and start to happen again.

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

@@ -41,6 +41,7 @@
 .#{$n}-carousel-controls {
   display: flex;
   position: relative;
+  align-items: center;
   justify-content: space-between;
   width: 100%;
   height: fit-content;
@@ -51,6 +52,7 @@
 /* stylelint-disable no-descending-specificity */
 .#{$n}-carousel-controls .#{$n}-button {
   display: flex;
+  flex: 0 0 $buttonsize;
   align-items: center;
   justify-content: center;
   width: $buttonsize;
@@ -89,21 +91,21 @@
   padding: 0 $spacer * 0.5;
 }
 
-.#{$n}-carousel-pagination {
+.#{$n}-carousel-pagination__wrapper {
   display: flex;
   position: relative;
   flex-direction: row;
   justify-content: center;
-  width: 100%;
-  margin: 0 auto;
-  padding: 0;
 }
 
-.#{$n}-carousel-pagination__wrapper {
+.#{$n}-carousel-pagination {
   display: flex;
   position: relative;
-  flex-direction: row;
+  flex-flow: row wrap;
   justify-content: center;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
 }
 
 .#{$n}-carousel-pagination__item {
@@ -114,8 +116,8 @@
 .#{$n}-carousel-pagination__button {
   display: block;
   position: relative;
-  width: $buttonsize-small;
-  height: $buttonsize-small;
+  width: $buttonsize-small * 0.75;
+  height: $buttonsize-small * 0.75;
   padding: 0;
   border: 0;
   border-radius: 0;