@seamly/web-ui 20.4.0 → 20.5.0

package/src/javascripts/domains/visibility/hooks.js

@@ -1,5 +1,6 @@
-import { useCallback } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { useSelector, useStoreDispatch } from 'domains/redux'
+import { useConfig } from 'domains/config'
 import * as Actions from './actions'
 import * as Selectors from './selectors'
 import { visibilityStates } from './constants'
@@ -24,3 +25,61 @@ export const useVisibility = () => {
     setVisibility,
   }
 }
+
+/**
+ * Custom hook which enables initializing of IntersectionObserver on any node ref.
+ * @param {object} options Hook options.
+ * @param {boolean=} options.freezeOnceVisible Stops observing when the root element is visible.
+ * @param {boolean=} options.enabled Determines if useIntersect is enabled.
+ */
+const useIntersect = ({ freezeOnceVisible = false, enabled = true }) => {
+  const [entry, setEntry] = useState(null)
+  const containerRef = useRef(null)
+
+  const isVisible = !!entry?.isIntersecting || !enabled
+  const frozen = isVisible && freezeOnceVisible
+
+  const observerCallback = ([updatedEntry]) => setEntry(updatedEntry)
+
+  useEffect(() => {
+    const node = containerRef?.current
+    const hasIOSupport = !!window.IntersectionObserver
+
+    if (!node && process.env.NODE_ENV === 'development') {
+      console.error(
+        'containerRef must be set on a DOM element. check the component where useIntersect is being used.',
+      )
+    }
+
+    // Return an arrow function to have a consistent return value
+    if (!hasIOSupport || frozen || !node || !enabled) return () => undefined
+
+    const observerOptions = { threshold: 0, root: null, rootMargin: '0%' }
+    const observer = new IntersectionObserver(observerCallback, observerOptions)
+
+    observer.observe(node)
+
+    return () => observer.disconnect()
+  }, [enabled, frozen])
+
+  return { isVisible, containerRef }
+}
+
+export const useShowInlineView = () => {
+  const dispatch = useStoreDispatch()
+  const { connectWhenInView } = useConfig()
+  const showInlineView = useSelector(Selectors.selectShowInlineView)
+
+  const { containerRef, isVisible } = useIntersect({
+    enabled: connectWhenInView,
+    freezeOnceVisible: true,
+  })
+
+  useEffect(() => {
+    if (!isVisible) return
+
+    dispatch(Actions.setShowInlineView())
+  }, [dispatch, isVisible])
+
+  return { containerRef, showInlineView }
+}

package/src/javascripts/domains/visibility/reducer.js

@@ -4,6 +4,7 @@ import { visibilityStates } from './constants'
 
 const initialState = {
   visibility: visibilityStates.initialize,
+  showInlineView: false,
 }
 
 export default createReducer(
@@ -14,6 +15,10 @@ export default createReducer(
     }),
     [Actions.setVisibility.fulfilled]: (state, { payload: visibility }) =>
       visibility ? { ...state, visibility } : state,
+    [Actions.setShowInlineView]: (state) => ({
+      ...state,
+      showInlineView: true,
+    }),
   },
   initialState,
 )

package/src/javascripts/domains/visibility/selectors.js

@@ -6,4 +6,9 @@ export const selectVisibility = createSelector(
   (state) => state.visibility,
 )
 
+export const selectShowInlineView = createSelector(
+  selectState,
+  (state) => state.showInlineView,
+)
+
 export { selectState }

package/src/javascripts/domains/visibility/utils.js

@@ -16,9 +16,13 @@ export const calculateVisibility = ({
   config,
 }) => {
   const { defaults, layoutMode, hideOnNoUserResponse } = config
-
   const { visible: defaultVisibility } = defaults || {}
 
+  // The app layout should always be open by default.
+  if (layoutMode === 'app' && !previousVisibility) {
+    return visibilityStates.open
+  }
+
   // Requesting open should override the responded check.
   if (
     layoutMode === 'window' &&

package/src/javascripts/style-guide/components/app.js

@@ -61,6 +61,8 @@ const StyleGuideApp = ({
         config: {
           ...bareState.config,
           ...config,
+          showDisclaimer:
+            bareState.config.showDisclaimer || config.showDisclaimer,
           layoutMode: bareState.config.layoutMode,
           ...(overrideMessages ? { messages: overrideMessages } : {}),
           showFaq,

package/src/javascripts/style-guide/states.js

@@ -156,7 +156,6 @@ const infoMessage = {
     body: {
       text: 'This is a system generated info message',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     id: randomId(),
@@ -199,7 +198,7 @@ const participantMessage = {
     participant: {
       avatar,
       id: 'agent',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: { map: {}, version: 2 },
@@ -223,7 +222,7 @@ const participantMessageDefaultIcon = {
     messageStatus: 'received',
     participant: {
       id: 'user',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: { map: {}, version: 2 },
@@ -245,7 +244,6 @@ const getCustomMessage = ({ type, data, text }) => ({
       type,
       text,
       data,
-      variables: {},
     },
     participant: 'agent',
     service: {
@@ -269,7 +267,6 @@ const shortTextMessage = {
     body: {
       text: 'What do you want to do?',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -304,7 +301,8 @@ const ctaMessage = {
   type: 'message',
   payload: {
     body: {
-      description: 'Thanks for chatting!\n\nMore info about our **products**?',
+      description:
+        'Thanks for chatting!\n\nMore info about our <strong>products</strong>?',
       buttonLink: 'https://seamly.ai',
       buttonText: 'View website',
       buttonNewTab: true,
@@ -331,7 +329,6 @@ const longTextMessage = {
     body: {
       text: 'What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am.',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -353,9 +350,8 @@ const textMessageBoldItalicUnderline = {
   type: 'message',
   payload: {
     body: {
-      text: 'Bubble with **bold** *italic* <u>underline</u>',
+      text: 'Bubble with <strong>bold</strong> <em>italic</em> <u>underline</u>',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -377,24 +373,8 @@ const textMessageWithLinks = {
   type: 'message',
   payload: {
     body: {
-      text: '{{link_1}} and {{link_2}} embedded in text',
+      text: '<a href="https://google.com" data-link-id="1">Link in same window</a> and <a href="https://google.com" data-link-id="2" target="_blank">link in new window</a> embedded in text',
       type: 'text',
-      variables: {
-        link_1: {
-          id: '1',
-          name: 'Link in same window',
-          newTab: false,
-          type: 'link',
-          url: 'https://google.com',
-        },
-        link_2: {
-          id: '2',
-          name: 'link in new window',
-          newTab: true,
-          type: 'link',
-          url: 'https://google.com',
-        },
-      },
     },
     fromClient: false,
     fromHistory: true,
@@ -416,17 +396,8 @@ const textMessageWithLongLink = {
   type: 'message',
   payload: {
     body: {
-      text: 'Here is a long link {{link_1}} embedded in text',
+      text: 'Here is a long link <a href="https://google.com" data-link-id="1">click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee</a> embedded in text',
       type: 'text',
-      variables: {
-        link_1: {
-          id: '1',
-          name: 'click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee',
-          newTab: false,
-          type: 'link',
-          url: 'https://google.com',
-        },
-      },
     },
     fromClient: false,
     fromHistory: true,
@@ -450,7 +421,6 @@ const textMesageWithBullets = {
     body: {
       text: '<ul>\n<li>Bullets</li>\n<li>bullets</li>\n<li>bullets</li>\n</ul>\n',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -605,7 +575,6 @@ const userMessage = {
     body: {
       text: 'This is what the user typed',
       type: 'text',
-      variables: {},
     },
     fromClient: true,
     fromHistory: true,
@@ -624,7 +593,23 @@ const userMessageLong = {
     body: {
       text: 'This is what the user typed. And sometimes the user has quite a lot to say and then we get longer lines that need to wrap well and not break the styling so here goes with just such a line right here!!',
       type: 'text',
-      variables: {},
+    },
+    fromClient: true,
+    fromHistory: true,
+    id: randomId(),
+    messageStatus: 'read',
+    participant: 'user',
+    transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
+    transactionLast: null,
+    type: 'text',
+  },
+}
+const userMessageWithLinks = {
+  type: 'message',
+  payload: {
+    body: {
+      text: '<a href="https://google.com" data-link-id="1">Link in same window</a> and <a href="https://google.com" data-link-id="2" target="_blank">link in new window</a> embedded in text',
+      type: 'text',
     },
     fromClient: true,
     fromHistory: true,
@@ -836,7 +821,7 @@ const cardAskText = {
       },
       buttonText: 'Ask about pizzas!',
       description:
-        'Pizza Margherita is a **typical Neapolitan pizza**.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
+        'Pizza Margherita is a <strong>typical Neapolitan pizza</strong>.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
       image:
         'https://developers.seamly.ai/clients/web-ui/static/photos/card-square.jpg',
       title: 'Pizza Margherita',
@@ -855,7 +840,8 @@ const cardNavigate = {
         type: 'navigate',
       },
       buttonText: 'Order now!',
-      description: 'Pizza Margherita is a **typical Neapolitan pizza**.',
+      description:
+        'Pizza Margherita is a <strong>typical Neapolitan pizza</strong>.',
       image:
         'https://developers.seamly.ai/clients/web-ui/static/photos/card-landscape.jpg',
       title: 'Pizza Margherita',
@@ -1093,6 +1079,7 @@ const standardState = {
       longTextMessage,
       userMessage,
       textMessageBoldItalicUnderline,
+      userMessageWithLinks,
       newTopicDivider,
       imageMessage,
       fileDownloadAgentMessage,
@@ -1120,6 +1107,7 @@ const standardState = {
       userMessageLong,
       fileDownloadUserMessage,
       emptyUrlFileDownloadUserMessage,
+      userMessageWithLinks,
     ],
   },
   withParticipants: {
@@ -1197,7 +1185,6 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1259,7 +1246,6 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1272,7 +1258,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing the full date',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1285,7 +1270,6 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1298,7 +1282,6 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1311,7 +1294,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing "yesterday"',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1324,7 +1306,6 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1337,7 +1318,6 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1350,7 +1330,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing me the dialog continues today',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1933,6 +1912,7 @@ const newInterface = {
     description: '',
     ...baseState,
     events: [
+      getCustomMessage(shortTextMessage.payload.body),
       {
         type: 'service_data',
         payload: {

package/src/javascripts/ui/components/conversation/event/card-component.js

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import { className } from 'lib/css'
-import parseBody from 'lib/parse-body'
 import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { cardTypes, actionTypes } from 'ui/utils/seamly-utils'
 
@@ -84,7 +83,7 @@ const CardComponent = ({
         {description && (
           <div
             className={className('card__description')}
-            dangerouslySetInnerHTML={{ __html: parseBody(description) }}
+            dangerouslySetInnerHTML={{ __html: description }}
           />
         )}
         <CardActionComponent

package/src/javascripts/ui/components/conversation/event/conversation-suggestions.js

@@ -1,16 +1,17 @@
-import { useCallback, useState } from 'preact/hooks'
+import { useCallback, useMemo, useState } from 'preact/hooks'
 import { className } from 'lib/css'
+import {
+  useEvents,
+  useSeamlyCommands,
+  useSeamlyDispatchContext,
+} from 'ui/hooks/seamly-hooks'
 import { useI18n } from 'domains/i18n'
 import { useTranslatedEventData } from 'domains/translations'
 import { useUserHasResponded } from 'domains/app'
 import { setHasResponded } from 'domains/app/actions'
-import { actionTypes } from '../../../utils/seamly-utils'
-import MessageContainer from '../message-container'
-import {
-  useSeamlyCommands,
-  useSeamlyDispatchContext,
-} from '../../../hooks/seamly-hooks'
-import SuggestionsList from '../../suggestions/suggestions-list'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import MessageContainer from 'ui/components/conversation/message-container'
+import SuggestionsList from 'ui/components/suggestions/suggestions-list'
 
 export const useSuggestions = (event) => {
   const { payload } = event
@@ -28,11 +29,20 @@ const ConversationSuggestions = ({ event, ...props }) => {
   const userResponded = useUserHasResponded()
   const { sendAction, addMessageBubble } = useSeamlyCommands()
   const { suggestions, payload } = useSuggestions(event)
+  const events = useEvents()
 
   const { t } = useI18n()
   const headingText = t('suggestions.headingText')
   const footerText = t('suggestions.footerText')
 
+  // We check if there is at least one last transaction
+  // to avoid rendering the suggestions before prior events are rendered.
+  const hasLastTransactionEvent = useMemo(
+    () =>
+      events.some(({ payload: eventPayload }) => eventPayload?.transactionLast),
+    [events],
+  )
+
   const handleClick = useCallback(
     ({ id, question }) => {
       setIsExpanded(false)
@@ -56,7 +66,7 @@ const ConversationSuggestions = ({ event, ...props }) => {
     [dispatch, sendAction, payload.id, addMessageBubble],
   )
 
-  if (!isExpanded || userResponded) {
+  if (!isExpanded || userResponded || !hasLastTransactionEvent) {
     return null
   }
 

package/src/javascripts/ui/components/conversation/event/cta.js

@@ -1,6 +1,5 @@
 import { useCallback } from 'preact/hooks'
 import { className } from 'lib/css'
-import parseBody from 'lib/parse-body'
 import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
 import MessageContainer from 'ui/components/conversation/message-container'
@@ -31,7 +30,7 @@ const Cta = ({ event }) => {
       <div
         className={className('cta__content')}
         id={descriptionId}
-        dangerouslySetInnerHTML={{ __html: parseBody(body.description) }}
+        dangerouslySetInnerHTML={{ __html: body.description }}
         onClick={eventClick}
       />
       <a

package/src/javascripts/ui/components/conversation/event/participant.js

@@ -1,6 +1,3 @@
-import { useMemo } from 'preact/hooks'
-import Mustache from 'mustache'
-import parseBody from 'lib/parse-body'
 import EventDivider from 'ui/components/conversation/event-divider'
 import { useTranslatedEventData } from 'domains/translations'
 
@@ -8,13 +5,7 @@ const Participant = ({ event }) => {
   const { participant } = event.payload
   const [introduction] = useTranslatedEventData(event)
 
-  const intro = useMemo(() => {
-    return introduction
-      ? Mustache.render(parseBody(introduction), participant)
-      : undefined
-  }, [introduction, participant])
-
-  if (!intro) {
+  if (!introduction) {
     return null
   }
 
@@ -23,7 +14,7 @@ const Participant = ({ event }) => {
       graphicSrc={participant.avatar}
       graphicType={participant.avatar ? 'avatar' : undefined}
       iconName={!participant.avatar ? 'balloon' : undefined}
-      childrenHTML={intro}
+      childrenHTML={introduction}
       dividerType="participant"
     />
   )

package/src/javascripts/ui/components/conversation/event/splash.js

@@ -1,6 +1,4 @@
-import parseBody from '../../../../lib/parse-body'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import { parseRichText } from './hooks/use-text-rendering'
 import MessageContainer from '../message-container'
 import { useTranslatedEventData } from '../../../../domains/translations'
 
@@ -17,7 +15,7 @@ const Splash = ({ event, ...props }) => {
       {...props}
       bodyProps={{
         dangerouslySetInnerHTML: {
-          __html: parseRichText(parseBody(body.text), body.variables),
+          __html: body.text,
         },
       }}
     />

package/src/javascripts/ui/components/conversation/event/text.js

@@ -1,28 +1,28 @@
 import { useMemo } from 'preact/hooks'
-import parseBody from 'lib/parse-body'
 import MessageContainer from 'ui/components/conversation/message-container'
 import { useTranslatedEventData } from 'domains/translations'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import { parseRichText } from './hooks/use-text-rendering'
 
 const Text = ({ event, ...props }) => {
   const [body] = useTranslatedEventData(event)
   const eventClick = useEventLinkClickHandler(event.payload.id)
 
   const containerProps = useMemo(() => {
-    if (!event.payload.fromClient) {
+    if (event.payload.optimisticallyInjected) {
       return {
-        bodyProps: {
-          dangerouslySetInnerHTML: {
-            __html: parseRichText(parseBody(body.text), body.variables),
-          },
-        },
+        children: <p>{body.text}</p>,
       }
     }
+
     return {
-      children: <p>{body.text}</p>,
+      bodyProps: {
+        dangerouslySetInnerHTML: {
+          __html: body.text,
+        },
+      },
     }
   }, [body, event])
+
   return (
     <MessageContainer
       type="text"

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