@seamly/web-ui 20.3.0 → 20.5.0

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

@@ -17,6 +17,7 @@ const baseState = {
   },
   initialState: {},
   unreadEvents: 0,
+  loadedImageEventIds: [],
   isLoading: false,
   idleDetachCountdown: { hasCountdown: false, isActive: false },
   resumeConversationPrompt: false,
@@ -155,7 +156,6 @@ const infoMessage = {
     body: {
       text: 'This is a system generated info message',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     id: randomId(),
@@ -198,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 },
@@ -222,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 },
@@ -244,7 +244,6 @@ const getCustomMessage = ({ type, data, text }) => ({
       type,
       text,
       data,
-      variables: {},
     },
     participant: 'agent',
     service: {
@@ -268,7 +267,6 @@ const shortTextMessage = {
     body: {
       text: 'What do you want to do?',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -303,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,
@@ -330,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,
@@ -352,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,
@@ -376,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,
@@ -415,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,
@@ -449,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,
@@ -604,7 +575,6 @@ const userMessage = {
     body: {
       text: 'This is what the user typed',
       type: 'text',
-      variables: {},
     },
     fromClient: true,
     fromHistory: true,
@@ -623,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,
@@ -835,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',
@@ -854,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',
@@ -1092,6 +1079,7 @@ const standardState = {
       longTextMessage,
       userMessage,
       textMessageBoldItalicUnderline,
+      userMessageWithLinks,
       newTopicDivider,
       imageMessage,
       fileDownloadAgentMessage,
@@ -1119,6 +1107,7 @@ const standardState = {
       userMessageLong,
       fileDownloadUserMessage,
       emptyUrlFileDownloadUserMessage,
+      userMessageWithLinks,
     ],
   },
   withParticipants: {
@@ -1196,7 +1185,6 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1258,7 +1246,6 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1271,7 +1258,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing the full date',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1284,7 +1270,6 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1297,7 +1282,6 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1310,7 +1294,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing "yesterday"',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1323,7 +1306,6 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1336,7 +1318,6 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1349,7 +1330,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing me the dialog continues today',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1772,6 +1752,30 @@ const inlineInterface = {
       },
     },
   },
+  minimizedInlineCharacterLimit: {
+    category: categoryKeys.minimizedInline,
+    headingText: 'Inline minimized with limited characters',
+    description: '',
+    inline: {
+      ...baseState,
+      config: {
+        ...baseState.config,
+        layoutMode: 'inline',
+      },
+      visibility: {
+        ...baseState.visibility,
+        visibility: visibilityStates.minimized,
+      },
+      entryMeta: {
+        ...baseState.entryMeta,
+        options: {
+          text: {
+            limit: 120,
+          },
+        },
+      },
+    },
+  },
   minimizedInlinePrechat: {
     category: categoryKeys.minimizedInline,
     headingText: 'Inline minimized with pre-chat messages',
@@ -1908,6 +1912,7 @@ const newInterface = {
     description: '',
     ...baseState,
     events: [
+      getCustomMessage(shortTextMessage.payload.body),
       {
         type: 'service_data',
         payload: {

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

@@ -6,7 +6,7 @@ import {
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
-import { useEvents } from 'ui/hooks/seamly-state-hooks'
+import { useEvents, useLoadedImageEventIds } from 'ui/hooks/seamly-state-hooks'
 import PrivacyDisclaimer from 'ui/components/layout/privacy-disclaimer'
 import { useVisibility } from 'domains/visibility'
 import Event from './event/event'
@@ -15,21 +15,20 @@ import ComponentFilter from './component-filter'
 
 const Conversation = () => {
   const { t } = useI18n()
-  const appBodyContainer = useRef(null)
+  const chatBodyContainer = useRef(null)
   const events = useEvents()
   const isLoading = useSeamlyIsLoading()
   const { isOpen } = useVisibility()
   const skiplinkTargetId = useSkiplink()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
+  const loadedImageEventIds = useLoadedImageEventIds()
 
   useEffect(() => {
-    window.requestAnimationFrame(() => {
-      if (appBodyContainer.current) {
-        appBodyContainer.current.scrollTop =
-          appBodyContainer.current.scrollHeight
-      }
-    })
-  }, [events, isLoading, isOpen])
+    const containerElement = chatBodyContainer.current
+    if (containerElement) {
+      containerElement.scrollTop = containerElement.scrollHeight
+    }
+  }, [events, isLoading, isOpen, loadedImageEventIds])
 
   const renderEvents = () => {
     let prevParticipant = null
@@ -72,7 +71,7 @@ const Conversation = () => {
           {t('skiplinkText')}
         </a>
       )}
-      <div className={className('chat__body')} ref={appBodyContainer}>
+      <div className={className('chat__body')} ref={chatBodyContainer}>
         <div className={className('conversation__container')}>
           <PrivacyDisclaimer />
           <ol className={className('conversation')}>

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/image.js

@@ -1,12 +1,22 @@
 import { useState } from 'preact/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
 import { useTranslatedEventData } from 'domains/translations'
+import { useStoreDispatch } from 'domains/redux'
 import ImageLightbox from './image-lightbox'
+import { seamlyActions } from '../../../utils/seamly-utils'
+
+const { SET_LOADED_IMAGE_EVENT_IDS } = seamlyActions
 
 const Image = ({ event, descriptorId, ...props }) => {
   const [body] = useTranslatedEventData(event)
   const { description, url, isZoomable } = body
   const [showLighbox, setShowLightbox] = useState(false)
+  const dispatch = useStoreDispatch()
+
+  const handleOnLoad = () => {
+    dispatch({ type: SET_LOADED_IMAGE_EVENT_IDS, eventId: event.payload.id })
+    setShowLightbox(true)
+  }
 
   return (
     <MessageContainer event={event} type="image" {...props}>
@@ -14,9 +24,7 @@ const Image = ({ event, descriptorId, ...props }) => {
         src={url}
         id={descriptorId}
         alt={description}
-        onLoad={() => {
-          setShowLightbox(true)
-        }}
+        onLoad={handleOnLoad}
       />
       {isZoomable && showLighbox && (
         <ImageLightbox description={description} url={url} />

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/entry/text-entry/text-entry-form.js

@@ -64,6 +64,11 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
     }
   }, [setBlockAutoEntrySwitch, hasValue])
 
+  const handlePointerDown = (event) => {
+    // When a message is submitted, the keyboard should be prevented from closing on mobile devices
+    event.preventDefault()
+  }
+
   return (
     <Form
       className={className('entry-form')}
@@ -99,6 +104,7 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
       <button
         className={className('button', 'input__submit')}
         type="submit"
+        onPointerDown={handlePointerDown}
         aria-disabled={!hasValue || reachedCharacterLimit ? 'true' : null}
       >
         <Icon name="send" size="32" alt={t('input.sendMessage')} />