@seamly/web-ui 20.3.1 → 20.6.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,
@@ -58,7 +59,9 @@ const baseState = {
 }
 
 const avatar =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzLz48cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMCAwSDMyVjMySDB6Ii8+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTExLjE3NSwxMi4yMjJjMC0zLjc5MywyLjE2LTUuNTY1LDQuODI1LTUuNTY1YzIuNjY0LDAsNC44MjYsMS43NzIsNC44MjYsNS41NjUJYzAsMy43OTQtMi4xNjIsNi45MDQtNC44MjYsNi45MDRDMTMuMzM1LDE5LjEyNiwxMS4xNzUsMTYuMDE2LDExLjE3NSwxMi4yMjJ6IE0yNi42NjYsMjMuMDg0Yy0wLjgzNC0xLjU4My00LjIxNi0yLjYyNS01Ljg0MS0yLjY2NwlzLTMuNTM0LDMtNC44MjUsM2MtMS4yOTMsMC0zLjIwMS0zLjA0Mi00LjgyNS0zYy0xLjYyNSwwLjA0Mi01LjAwOCwxLjA4NC01Ljg0MSwyLjY2N0M0LjAwNSwyNS42MDYsNC41ODMsMzIsNC41ODMsMzJIMTZoMTEuNDE2CUMyNy40MTYsMzIsMjcuOTk0LDI1LjYwNiwyNi42NjYsMjMuMDg0eiIvPjwvc3ZnPg=='
+  'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMTAsMTQuOGMtMS4xLDAtMi0wLjktMi0yczAuOS0yLDItMnMyLDAuOSwyLDJTMTEuMSwxNC44LDEwLDE0Ljh6IE0xNS45LDE0LjhjMS4xLDAsMi0wLjksMi0ycy0wLjktMi0yLTIKCXMtMiwwLjktMiwyUzE0LjgsMTQuOCwxNS45LDE0Ljh6IE0yMS44LDEwLjhjLTEuMSwwLTIsMC45LTIsMnMwLjksMiwyLDJzMi0wLjksMi0yUzIyLjksMTAuOCwyMS44LDEwLjh6IE0yMS4zLDE4LjFIMTAuNwoJQzExLjcsMjMuOSwyMC4yLDIzLjksMjEuMywxOC4xeiIvPgo8L3N2Zz4K'
+const transferAvatar =
+  'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMTAuMSwxNC45Yy0xLjEsMC0yLTAuOS0yLTJzMC45LTIsMi0yczIsMC45LDIsMlMxMS4yLDE0LjksMTAuMSwxNC45eiBNMjEuOSwxMC45Yy0xLjEsMC0yLDAuOS0yLDIKCXMwLjksMiwyLDJzMi0wLjksMi0yUzIzLDEwLjksMjEuOSwxMC45eiBNMjEuNCwxOC4ySDEwLjhDMTEuOCwyNCwyMC4zLDI0LDIxLjQsMTguMnogTTE3LjIsMjUuM2gtMi40Yy0wLjYsMC0xLjIsMC40LTEuNCwxCgljLTUuMS0wLjItOS4yLTQuNC05LjQtOS42YzAuMSwwLDAuMiwwLjEsMC40LDAuMWgwLjFjMC44LDAsMS40LTAuNiwxLjQtMS40di00LjdjMC0wLjgtMC42LTEuNC0xLjQtMS40aDBjLTAuOCwwLTEuNCwwLjYtMS40LDEuNAoJdjIuN3YydjEuMWMwLDUuOSw0LjcsMTAuNiwxMC41LDEwLjhjMC4yLDAuNSwwLjcsMC44LDEuMiwwLjhoMi40YzAuOCwwLDEuNC0wLjYsMS40LTEuNFMxOCwyNS4zLDE3LjIsMjUuM3oiLz4KPC9zdmc+Cg=='
 
 const participantInfo = {
   participants: {
@@ -155,7 +158,6 @@ const infoMessage = {
     body: {
       text: 'This is a system generated info message',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     id: randomId(),
@@ -198,7 +200,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 },
@@ -213,6 +215,32 @@ const participantMessage = {
   },
 }
 
+const participantTransferMessage = {
+  type: 'participant',
+  payload: {
+    fromClient: false,
+    fromHistory: true,
+    id: randomId(),
+    messageStatus: 'received',
+    participant: {
+      introduction:
+        'Welcome, you are now chatting with Mrs. Bot 2, give me a minit to read back the chat history.',
+      id: 'agent',
+      avatar: transferAvatar,
+      name: 'Two',
+      service: {
+        expose: { map: {}, version: 3 },
+        meta: {},
+        name: 'new service',
+        serviceSessionId: randomId(),
+        settings: {},
+      },
+    },
+    transactionId: randomId(),
+    type: 'participant',
+  },
+}
+
 const participantMessageDefaultIcon = {
   type: 'participant',
   payload: {
@@ -222,7 +250,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 +272,6 @@ const getCustomMessage = ({ type, data, text }) => ({
       type,
       text,
       data,
-      variables: {},
     },
     participant: 'agent',
     service: {
@@ -268,7 +295,6 @@ const shortTextMessage = {
     body: {
       text: 'What do you want to do?',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -303,7 +329,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 +357,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 +378,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 +401,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 +424,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 +449,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 +603,6 @@ const userMessage = {
     body: {
       text: 'This is what the user typed',
       type: 'text',
-      variables: {},
     },
     fromClient: true,
     fromHistory: true,
@@ -623,7 +621,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 +849,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 +868,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',
@@ -1090,8 +1105,10 @@ const standardState = {
         },
       },
       longTextMessage,
+      participantTransferMessage,
       userMessage,
       textMessageBoldItalicUnderline,
+      userMessageWithLinks,
       newTopicDivider,
       imageMessage,
       fileDownloadAgentMessage,
@@ -1119,6 +1136,7 @@ const standardState = {
       userMessageLong,
       fileDownloadUserMessage,
       emptyUrlFileDownloadUserMessage,
+      userMessageWithLinks,
     ],
   },
   withParticipants: {
@@ -1196,12 +1214,12 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
-            variables: {},
           },
         },
       },
       participantMessage,
       participantMessageDefaultIcon,
+      participantTransferMessage,
       newTopicDivider,
       transcriptInfoMessage,
       ...[newTranslationDividerStart, newTranslationDividerStop].map(
@@ -1258,7 +1276,6 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1271,7 +1288,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing the full date',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1284,7 +1300,6 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1297,7 +1312,6 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1310,7 +1324,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing "yesterday"',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1323,7 +1336,6 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1336,7 +1348,6 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1349,7 +1360,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing me the dialog continues today',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1772,6 +1782,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 +1942,7 @@ const newInterface = {
     description: '',
     ...baseState,
     events: [
+      getCustomMessage(shortTextMessage.payload.body),
       {
         type: 'service_data',
         payload: {

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

@@ -6,55 +6,57 @@ 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'
 import Loader from './loader'
 import ComponentFilter from './component-filter'
 
+const Events = () => {
+  const events = useEvents()
+
+  let prevParticipant = null
+  return events.map((event) => {
+    const { type, payload } = event
+    const { participant, fromClient } = payload
+    let participantChanged = false
+    if (type !== 'participant') {
+      const currentParticipant = fromClient
+        ? 'seamly-client-participant'
+        : participant
+      if (event.type !== 'info' && prevParticipant !== currentParticipant) {
+        participantChanged = true
+      }
+      prevParticipant = currentParticipant
+    }
+
+    return (
+      <Event
+        key={event.payload.key || event.payload.id}
+        event={event}
+        newParticipant={participantChanged}
+      />
+    )
+  })
+}
+
 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 renderEvents = () => {
-    let prevParticipant = null
-    return events.map((event) => {
-      const { type, payload } = event
-      const { participant, fromClient } = payload
-      let participantChanged = false
-      if (type !== 'participant') {
-        const currentParticipant = fromClient
-          ? 'seamly-client-participant'
-          : participant
-        if (event.type !== 'info' && prevParticipant !== currentParticipant) {
-          participantChanged = true
-        }
-        prevParticipant = currentParticipant
-      }
-      return (
-        <Event
-          key={event.payload.id}
-          event={event}
-          newParticipant={participantChanged}
-        />
-      )
-    })
-  }
+    const containerElement = chatBodyContainer.current
+    if (containerElement) {
+      containerElement.scrollTop = containerElement.scrollHeight
+    }
+  }, [events, isLoading, isOpen, loadedImageEventIds])
 
   const onClickHandler = (e) => {
     e.preventDefault()
@@ -72,11 +74,13 @@ 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')}>
-            <ComponentFilter>{renderEvents()}</ComponentFilter>
+            <ComponentFilter>
+              <Events />
+            </ComponentFilter>
             {isLoading && <Loader />}
           </ol>
         </div>

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"