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

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

@@ -62,11 +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',
+    agent: {
+      id: 'agent',
       service: {
         expose: { map: {}, version: 2 },
         meta: {},
@@ -75,23 +72,8 @@ const participantInfo = {
         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',
-      service: {
-        expose: { map: {}, version: 2 },
-        meta: {},
-        name: null,
-        service_session_id: null,
-        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(),
   },
 }
@@ -1851,6 +1833,25 @@ const inlineInterface = {
       },
     },
   },
+  minimizedInlineWithError: {
+    category: categoryKeys.minimizedInline,
+    headingText: 'Inline minimized with error',
+    description: '',
+    inline: {
+      ...baseState,
+      config: {
+        ...baseState.config,
+        layoutMode: 'inline',
+      },
+      visibility: {
+        ...baseState.visibility,
+        visibility: visibilityStates.minimized,
+      },
+      interrupt: {
+        error: new SeamlyOfflineError(),
+      },
+    },
+  },
 }
 
 const standardWindowStates = {

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

@@ -17,6 +17,7 @@ class SeamlyStyleGuideInstance extends Engine {
     const api = new API({
       namespace: this.config.namespace,
       config: this.config.api,
+      context: this.config.context,
     })
     api.URLS = {
       translations: `/client/${this.config.api.key}/translations/{version}/{locale}.json`,
@@ -24,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
@@ -37,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/layout/pre-chat-messages.js

@@ -3,9 +3,6 @@ import { useInterrupt } from '../../../domains/interrupt'
 import { useConfig } from '../../../domains/config'
 import useEventComponentMapping from '../../hooks/use-event-component-mapping'
 import { useVisibility } from '../../../domains/visibility'
-import InOutTransition, {
-  transitionStartStates,
-} from '../widgets/in-out-transition'
 
 export default function PreChatMessages() {
   const { preChatEvents, layoutMode } = useConfig()
@@ -15,10 +12,7 @@ export default function PreChatMessages() {
   const isVisible = !(hasInterrupt || !preChatEvents.length || isOpen)
 
   return (
-    <InOutTransition
-      isActive={isVisible}
-      transitionStartState={transitionStartStates.notRendered}
-    >
+    isVisible && (
       <ul
         className={className(
           'pre-chat-messages',
@@ -35,7 +29,7 @@ export default function PreChatMessages() {
           </li>
         ))}
       </ul>
-    </InOutTransition>
+    )
   )
 }
 

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

@@ -158,7 +158,6 @@ const Suggestions = ({ isAside }) => {
         )}
         {!!renderedSuggestions.length && (
           <SuggestionsList
-            hasIcon={true}
             suggestions={renderedSuggestions}
             onClickSuggestion={handleClick}
           />

package/src/javascripts/ui/components/suggestions/suggestions-list.js

@@ -5,7 +5,7 @@ const SuggestionsList = ({
   className: givenClassName,
   suggestions = [],
   onClickSuggestion,
-  hasIcon,
+  hasIcon = true,
 }) => {
   return (
     <ul className={className('suggestions__list', givenClassName)}>

package/src/javascripts/ui/components/view/inline-view.js

@@ -28,7 +28,12 @@ const InlineView = () => {
         isActive={!isOpen}
         transitionStartState={transitionStartStates.rendered}
       >
-        <div className={className('unstarted-wrapper')}>
+        <div
+          className={className(
+            'unstarted-wrapper',
+            'unstarted-wrapper--inline',
+          )}
+        >
           <PreChatMessages />
           <Suggestions />
         </div>

package/src/javascripts/ui/components/view/window-view/index.js

@@ -14,7 +14,7 @@ import InOutTransition, {
 import PreChatMessages from '../../layout/pre-chat-messages'
 import { useUserHasResponded } from '../../../../domains/app'
 import { className } from '../../../../lib/css'
-import Splash from '../../conversation/event/splash'
+import Text from '../../conversation/event/text'
 import { useI18n } from '../../../../domains/i18n'
 
 const WindowView = () => {
@@ -60,7 +60,7 @@ const WindowView = () => {
             'unstarted-wrapper--continue',
           )}
         >
-          <Splash event={continueChatEvent} />
+          <Text event={continueChatEvent} />
         </div>
       </InOutTransition>
       <InOutTransition

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/stylesheets/3-chat/_chat.scss

@@ -12,7 +12,7 @@
   font-size: $fontsize-small;
 }
 
-&.#{$n}-app--layout-inline .#{$n}-chat {
+.#{$n}-chat--layout-inline {
   height: fit-content;
   background-color: initial;
   box-shadow: none;
@@ -22,19 +22,11 @@
   }
 }
 
-&.#{$n}-app--layout-inline .#{$n}-chat--collapsed .#{$n}-chat-wrapper {
+.#{$n}-chat--layout-inline.#{$n}-chat--collapsed .#{$n}-chat-wrapper {
   height: auto;
 }
 
-&.#{$n}-app--layout-inline .#{$n}-chat--user-responded {
-  transition: none;
-}
-
-&.#{$n}-app--layout-inline .#{$n}-chat--user-responded .#{$n}-chat-wrapper {
-  transition: none;
-}
-
-&.#{$n}-app--layout-window .#{$n}-chat {
+.#{$n}-chat--layout-window {
   @include responsiveAppSizing();
 
   display: none;
@@ -49,16 +41,16 @@
   opacity: 0;
 }
 
-&.#{$n}-app--layout-window .#{$n}-chat.#{$n}-transition--visible {
+.#{$n}-chat--layout-window.#{$n}-transition--visible {
   display: flex;
 }
 
-&.#{$n}-app--layout-window .#{$n}-chat.#{$n}-transition--in {
+.#{$n}-chat--layout-window.#{$n}-transition--in {
   transform: scale(1);
   opacity: 1;
 }
 
-&.#{$n}-app--layout-app .#{$n}-chat {
+.#{$n}-chat--layout-app {
   position: fixed;
   z-index: $z-index;
   top: 0;
@@ -87,12 +79,7 @@
   box-shadow: $boxshadow-soft;
 }
 
-&.#{$n}-app--layout-app .#{$n}-chat-wrapper {
-  border: 0 none;
-  border-radius: 0;
-}
-
-&.#{$n}-app--layout-inline .#{$n}-chat-wrapper {
+.#{$n}-chat--layout-inline .#{$n}-chat-wrapper {
   width: 100%;
   height: 0;
 
@@ -111,9 +98,7 @@
   }
 }
 
-&.#{$n}-app--layout-inline
-  .#{$n}-chat.#{$n}-transition--in
-  .#{$n}-chat-wrapper {
+.#{$n}-chat--layout-inline.#{$n}-transition--in .#{$n}-chat-wrapper {
   height: $chat-inline-height;
   max-height: $chat-inline-maxheight;
 }
@@ -134,7 +119,7 @@
   overflow-y: auto;
 }
 
-&.#{$n}-app--layout-window .#{$n}-chat__body {
+.#{$n}-chat--layout-window .#{$n}-chat__body {
   overscroll-behavior: contain;
 }
 
@@ -149,7 +134,7 @@
   }
 }
 
-&.#{$n}-app--layout-inline .#{$n}-chat.#{$n}-app--collapsed .#{$n}-chat__entry {
+.#{$n}-chat--layout-inline.#{$n}-chat--collapsed .#{$n}-chat__entry {
   border: 0 none;
 }
 

package/src/stylesheets/5-components/_chat-status.scss

@@ -15,14 +15,10 @@
   box-shadow: $boxshadow;
 }
 
-&.#{$n}-app--layout-window .#{$n}-chat-status {
+.#{$n}-chat--layout-window .#{$n}-chat-status {
   width: calc(100% - #{$spacer * 2.5 + $buttonsize});
 }
 
-&.#{$n}-app--collapsed .#{$n}-chat-status {
-  display: none;
-}
-
 .#{$n}-chat-status__title {
   display: flex;
   flex: 1;

package/src/stylesheets/5-components/_conversation.scss

@@ -40,7 +40,7 @@
   padding-top: 0;
 }
 
-&.#{$n}-app--layout-inline .#{$n}-conversation {
+.#{$n}-chat--layout-inline .#{$n}-conversation {
   position: relative;
 }
 

package/src/stylesheets/5-components/_disclaimer.scss

@@ -7,7 +7,7 @@
   background-color: $grey-a;
 }
 
-&.#{$n}-app--layout-window .#{$n}-disclaimer {
+.#{$n}-chat--layout-window .#{$n}-disclaimer {
   padding-right: $buttonsize + $spacer * 2;
 }
 
@@ -16,10 +16,6 @@
   padding: $spacer * 0.5 $spacer;
 }
 
-&.#{$n}-app--collapsed .#{$n}-disclaimer {
-  display: none;
-}
-
 .#{$n}-disclaimer__title {
   margin: 0 0 $spacer * 0.25;
   padding-right: $spacer;