@seamly/web-ui 20.0.0-beta.6 → 20.0.0

package/src/javascripts/style-guide/components/static-core.js

@@ -23,6 +23,9 @@ import {
   Actions as ConfigActions,
 } from '../../domains/config'
 import { Reducer as visibilityReducer } from '../../domains/visibility'
+import { seamlyActions } from '../../ui/utils/seamly-utils'
+
+const { SET_PARTICIPANT } = seamlyActions
 
 const bareApi = {
   send: () => {},
@@ -33,7 +36,12 @@ const bareApi = {
   hasConversation: () => false,
 }
 
-const SeamlyTestCore = ({ state, translations, children }) => {
+const SeamlyTestCore = ({
+  state,
+  translations,
+  participants = [],
+  children,
+}) => {
   const liveMsgRef = useRef(() => {})
   const eventBusRef = useRef({ emit: () => {} })
 
@@ -76,8 +84,17 @@ const SeamlyTestCore = ({ state, translations, children }) => {
       )
     }
     newStore.dispatch(I18nActions.setLocale.fulfilled('en-GB', translations))
+
+    participants.forEach((participant) => {
+      newStore.dispatch({
+        type: SET_PARTICIPANT,
+        participant,
+        fromClient: participant.id === 'user',
+      })
+    })
+
     return newStore
-  }, [state, translations])
+  }, [state, translations, participants])
 
   return (
     state && (

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

@@ -2,7 +2,12 @@ import { useState, useEffect } from 'preact/hooks'
 import { View } from '@seamly/web-ui'
 import StyleGuideStaticCore from './static-core'
 
-const StyleGuideView = ({ state, customComponents = {}, translations }) => {
+const StyleGuideView = ({
+  state,
+  customComponents = {},
+  translations,
+  participants,
+}) => {
   const [renderView, setRenderView] = useState(true)
   const { config } = state || {}
   const { layoutMode } = config || {}
@@ -25,11 +30,19 @@ const StyleGuideView = ({ state, customComponents = {}, translations }) => {
   }
 
   return CustomView ? (
-    <StyleGuideStaticCore state={state} translations={translations}>
+    <StyleGuideStaticCore
+      state={state}
+      translations={translations}
+      participants={participants}
+    >
       <CustomView />
     </StyleGuideStaticCore>
   ) : (
-    <StyleGuideStaticCore state={state} translations={translations}>
+    <StyleGuideStaticCore
+      state={state}
+      translations={translations}
+      participants={participants}
+    >
       <View />
     </StyleGuideStaticCore>
   )

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

@@ -62,23 +62,8 @@ const avatar =
 
 const participantInfo = {
   participants: {
-    'e65fa8dc-97ab-4711-8fec-82bae6461aa2': {
-      avatar,
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to {{name}} gimme a minit",
-      name: 'Mrs. Bot',
-      service: {
-        expose: { map: {}, version: 2 },
-        meta: {},
-        name: null,
-        service_session_id: null,
-        settings: {},
-      },
-    },
-    'e65fa8dc-97ab-4711-8fec-82bae6461aa3': {
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to {{name}} gimme a minit",
-      name: 'Mrs. Bot',
+    agent: {
+      id: 'agent',
       service: {
         expose: { map: {}, version: 2 },
         meta: {},
@@ -87,11 +72,8 @@ const participantInfo = {
         settings: {},
       },
     },
-    'seamly-client-participant': {
-      avatar,
-      id: 'seamly-client-participant',
-      introduction: null,
-      name: 'User',
+    user: {
+      id: 'user',
       service: {
         expose: { map: {}, version: 2 },
         meta: {},
@@ -101,7 +83,7 @@ const participantInfo = {
       },
     },
   },
-  currentAgent: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+  currentAgent: 'agent',
 }
 
 const newTopicDivider = {
@@ -215,7 +197,7 @@ const participantMessage = {
     messageStatus: 'received',
     participant: {
       avatar,
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+      id: 'agent',
       introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
@@ -239,7 +221,7 @@ const participantMessageDefaultIcon = {
     id: randomId(),
     messageStatus: 'received',
     participant: {
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
+      id: 'user',
       introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
@@ -264,7 +246,7 @@ const getCustomMessage = ({ type, data, text }) => ({
       data,
       variables: {},
     },
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: {} },
       name: 'bot',
@@ -292,7 +274,7 @@ const shortTextMessage = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: {} },
       name: 'bot',
@@ -331,7 +313,7 @@ const ctaMessage = {
     fromHistory: true,
     id: 'f5351010-0def-452d-818f-ca22ac61792z',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -354,7 +336,7 @@ const longTextMessage = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: {} },
       name: 'bot',
@@ -378,7 +360,7 @@ const textMessageBoldItalicUnderline = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -417,7 +399,7 @@ const textMessageWithLinks = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -449,7 +431,7 @@ const textMessageWithLongLink = {
     fromHistory: true,
     id: 'a964e54e-ea98-46ff-a952-979a47f162c0',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -473,7 +455,7 @@ const textMesageWithBullets = {
     fromHistory: true,
     id: 'f5351010-0def-452d-818f-ca22ac61792a',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -498,7 +480,7 @@ const imageMessage = {
     fromHistory: true,
     id: 'b44ef42c-880c-43ff-b067-499e7f2e81f7',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -523,7 +505,7 @@ const imageMessageWithLightbox = {
     fromHistory: true,
     id: 'b44ef42c-880c-43ff-b067-499e7f2e81f8',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -548,7 +530,7 @@ const videoMessage = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: { hideFeedback: 'true' } },
       name: 'bot',
@@ -604,7 +586,7 @@ const choicePromptMessage = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: { additions: {} },
       name: 'bot',
@@ -628,7 +610,7 @@ const userMessage = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'seamly-client-participant',
+    participant: 'user',
     transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
     transactionLast: null,
     type: 'text',
@@ -647,7 +629,7 @@ const userMessageLong = {
     fromHistory: true,
     id: randomId(),
     messageStatus: 'read',
-    participant: 'seamly-client-participant',
+    participant: 'user',
     transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
     transactionLast: null,
     type: 'text',
@@ -671,7 +653,7 @@ const fileDownloadAgentMessage = {
   payload: {
     ...fileDownloadPayload,
     fromClient: false,
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     id: randomId(),
   },
 }
@@ -692,7 +674,7 @@ const fileDownloadUserMessage = {
   payload: {
     ...fileDownloadPayload,
     fromClient: true,
-    participant: 'seamly-client-participant',
+    participant: 'user',
     id: randomId(),
   },
 }

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

@@ -25,7 +25,18 @@ class SeamlyStyleGuideInstance extends Engine {
     const translations = await api.getTranslations(
       this.config.context.locale || 'en-GB',
     )
-
+    const { agentParticipant, userParticipant } = await api.getConfig()
+    const participants = [
+      {
+        id: 'user',
+        ...userParticipant,
+      },
+      {
+        id: 'agent',
+        introduction: 'I am {{name}}',
+        ...agentParticipant,
+      },
+    ]
     const renderConfig = {
       ...this.config,
       customComponents: Object.keys(restComponents).length
@@ -38,6 +49,7 @@ class SeamlyStyleGuideInstance extends Engine {
         config={renderConfig}
         styleGuideConfig={this.styleGuideConfig}
         translations={translations}
+        participants={participants}
       />,
       this.parentElement,
     )

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

@@ -1,15 +1,18 @@
 import { useSeamlyParticipant } from '../../../hooks/seamly-hooks'
 import { className } from '../../../../lib/css'
 import { useConfig } from '../../../../domains/config'
+import { useI18n } from '../../../../domains/i18n'
 
 const EventParticipant = ({ eventPayload }) => {
+  const { t } = useI18n()
   const { fromClient, participant: participantId } = eventPayload
   const participant = useSeamlyParticipant(participantId) || {}
-  const { messages, defaults } = useConfig()
+  const { messages } = useConfig()
 
-  const participantName = participant && participant.name
+  const participantName = fromClient
+    ? t('participants.user.name')
+    : participant && participant.name
   const { showAvatar, showName } = messages[fromClient ? 'user' : 'agent'] || {}
-  const { userName } = defaults || {}
 
   if (!showAvatar && !showName) {
     return null
@@ -25,11 +28,11 @@ const EventParticipant = ({ eventPayload }) => {
     )
   }
 
-  const authorName = fromClient ? userName || participantName : participantName
-
-  if (showName && authorName) {
+  if (showName) {
     authorInfo.push(
-      <span className={className('message__author-name')}>{authorName}</span>,
+      <span className={className('message__author-name')}>
+        {participantName}
+      </span>,
     )
   }
 

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

@@ -3,10 +3,10 @@ import Mustache from 'mustache'
 import parseBody from '../../../../lib/parse-body'
 import EventDivider from '../event-divider'
 import { useTranslatedEventData } from '../../../../domains/translations'
-import { useConfig } from '../../../../domains/config'
+import { useParticipants } from '../../../../domains/config'
 
 const Participant = ({ event }) => {
-  const { agentIcon } = useConfig().defaults || {}
+  const { agent } = useParticipants()
 
   const { participant } = event.payload
   const [introduction] = useTranslatedEventData(event)
@@ -21,7 +21,7 @@ const Participant = ({ event }) => {
     return null
   }
 
-  const avatar = participant.avatar || agentIcon
+  const avatar = participant.avatar || agent?.avatar
 
   return (
     <EventDivider

package/src/javascripts/ui/components/layout/agent-info.js

@@ -7,7 +7,7 @@ import {
 import { className } from '../../../lib/css'
 import { useI18n } from '../../../domains/i18n'
 import { useInterrupt } from '../../../domains/interrupt'
-import { useConfig } from '../../../domains/config'
+import { useStartChatIcon } from '../../../domains/config'
 import { useVisibility } from '../../../domains/visibility'
 
 const AgentInfo = () => {
@@ -17,12 +17,8 @@ const AgentInfo = () => {
   const { isOpen } = useVisibility()
   const currentAgent = useSeamlyCurrentAgent()
   const { hasInterrupt } = useInterrupt()
-  const { defaults } = useConfig()
-
-  const { startChatIcon } = defaults || {}
-
-  const avatar = currentAgent && !hasInterrupt ? currentAgent.avatar : null
-
+  const startChatIcon = useStartChatIcon()
+  const src = currentAgent?.avatar ?? startChatIcon
   const displaySubtitle = hasInterrupt ? '' : subTitle
 
   const classNames = ['message-count']
@@ -36,13 +32,13 @@ const AgentInfo = () => {
   }
 
   return (
-    (avatar || displaySubtitle || !isOpen) && (
+    (displaySubtitle || !isOpen) && (
       <div className={className('agent-info')}>
         <div className={className('agent-info__graphic')}>
-          {avatar || startChatIcon ? (
+          {src ? (
             <img
-              className={className(avatar ? 'avatar' : 'icon')}
-              src={avatar || startChatIcon}
+              className={className(currentAgent?.avatar ? 'avatar' : 'icon')}
+              src={src}
               alt=""
             />
           ) : (

package/src/javascripts/ui/components/layout/chat-frame.js

@@ -22,7 +22,7 @@ function ChatFrame({ children, interruptComponent: InterruptComponent }) {
     <>
       <TranslationsChatStatus />
       <div className={className('chat__container')}>{getContent()}</div>
-      <AppOptions />
+      {isOpen && <AppOptions />}
     </>
   )
 }

package/src/javascripts/ui/components/view/window-view/window-open-button.js

@@ -6,7 +6,7 @@ import {
   useSkiplinkTargetFocusing,
 } from '../../../hooks/seamly-hooks'
 import { useI18n } from '../../../../domains/i18n'
-import { useConfig } from '../../../../domains/config'
+import { useStartChatIcon } from '../../../../domains/config'
 import { useVisibility } from '../../../../domains/visibility'
 import Icon from '../../layout/icon'
 import { useInterrupt } from '../../../../domains/interrupt'
@@ -16,15 +16,15 @@ import InOutTransition, {
 import { useSeamlyHasConversation } from '../../../hooks/seamly-api-hooks'
 
 const ButtonIcon = () => {
+  const startChatIcon = useStartChatIcon()
   const currentAgent = useSeamlyCurrentAgent()
   const { hasInterrupt } = useInterrupt()
-  const { defaults } = useConfig()
-  const startChatIcon = defaults?.startChatIcon
-  const avatar = currentAgent && !hasInterrupt ? currentAgent.avatar : undefined
-  return avatar || startChatIcon ? (
+  const isActiveConversation = currentAgent && !hasInterrupt
+  const src = isActiveConversation ? currentAgent.avatar : startChatIcon
+  return src ? (
     <img
-      className={className(avatar ? 'avatar' : 'icon')}
-      src={avatar || startChatIcon}
+      className={className(isActiveConversation ? 'avatar' : 'icon')}
+      src={src}
       alt=""
     />
   ) : (

package/src/javascripts/ui/utils/seamly-utils.js

@@ -200,9 +200,16 @@ const participantReducer = (state, action) => {
         currentAgent: '',
       }
     case SET_PARTICIPANT:
-      const { participants } = state
-      const { id, avatar, name, introduction } = action.participant
+      // TODO: a) Styleguide only! b) Should be removed after styleguide overhaul.
+      if (!state) {
+        return {
+          participants: {},
+          currentAgent: '',
+        }
+      }
 
+      const { participants } = state || { participants: {} }
+      const { id, avatar, name, introduction } = action.participant
       const oldParticipant = participants[id]
 
       const newParticipants = {

package/src/javascripts/domains/config/middleware.js

@@ -1,22 +0,0 @@
-import * as Actions from './actions'
-import { seamlyActions } from '../../ui/utils/seamly-utils'
-
-export default function createMiddleware() {
-  return ({ dispatch }) =>
-    (next) =>
-    (action) => {
-      const result = next(action)
-
-      switch (action.type) {
-        case String(Actions.initialize):
-        case String(Actions.update):
-          if (action?.config?.defaults?.agentName) {
-            dispatch({
-              type: seamlyActions.SET_HEADER_SUB_TITLE,
-              title: action?.config?.defaults?.agentName,
-            })
-          }
-      }
-      return result
-    }
-}