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

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

@@ -1,4 +1,5 @@
 import { useMemo } from 'preact/hooks'
+import Mustache from 'mustache'
 import parseBody from '../../../../lib/parse-body'
 import EventDivider from '../event-divider'
 import { useTranslatedEventData } from '../../../../domains/translations'
@@ -11,8 +12,10 @@ const Participant = ({ event }) => {
   const [introduction] = useTranslatedEventData(event)
 
   const intro = useMemo(() => {
-    return introduction ? parseBody(introduction) : undefined
-  }, [introduction])
+    return introduction
+      ? Mustache.render(parseBody(introduction), participant)
+      : undefined
+  }, [introduction, participant])
 
   if (!intro) {
     return null

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

@@ -1,5 +1,6 @@
 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'
 
@@ -16,7 +17,7 @@ const Splash = ({ event, ...props }) => {
       {...props}
       bodyProps={{
         dangerouslySetInnerHTML: {
-          __html: parseBody(body.text),
+          __html: parseRichText(parseBody(body.text), body.variables),
         },
       }}
     />

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

@@ -1,6 +1,7 @@
 import { useMemo } from 'preact/hooks'
 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'
 
@@ -13,7 +14,7 @@ const Text = ({ event, ...props }) => {
       return {
         bodyProps: {
           dangerouslySetInnerHTML: {
-            __html: parseBody(body.text),
+            __html: parseRichText(parseBody(body.text), body.variables),
           },
         },
       }

package/src/javascripts/ui/components/entry/entry-container.js

@@ -79,7 +79,7 @@ const EntryContainer = () => {
   const EntryComponent = entryComponents[renderEntry]
 
   return (
-    <div className={className('app__entry')} ref={entryContainer}>
+    <div className={className('chat__entry')} ref={entryContainer}>
       {showCountdown && <IdleDetachWarning />}
       {showResumeConversationPrompt && <ResumeConversationPrompt />}
       <div

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

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

package/src/javascripts/ui/components/layout/{app-frame.js → chat.js}

@@ -1,9 +1,7 @@
-import { useCallback, useMemo } from 'preact/hooks'
 import { className } from '../../../lib/css'
 import {
   useSeamlyAppContainerClassNames,
   useSeamlyLayoutMode,
-  useSeamlyContainerElement,
 } from '../../hooks/seamly-hooks'
 import { useConfig } from '../../../domains/config'
 import { useUserHasResponded } from '../../../domains/app'
@@ -11,57 +9,32 @@ import { useI18n } from '../../../domains/i18n'
 import { useVisibility, visibilityStates } from '../../../domains/visibility'
 import Suggestions from '../suggestions'
 
-const AppFrame = ({
-  children,
-  className: givenClassName = '',
-  isDeprecated,
-}) => {
-  const [, setSeamlyContainerElement] = useSeamlyContainerElement()
+const Chat = ({ children, className: givenClassName = '' }) => {
   const { isOpen, isVisible, setVisibility } = useVisibility()
-  const { zIndex, namespace, layoutMode } = useConfig()
+  const { namespace, layoutMode } = useConfig()
   const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const userResponded = useUserHasResponded()
-  const { locale, t } = useI18n()
+  const { t } = useI18n()
 
-  const containerElementRef = useCallback(
-    (container) => {
-      setSeamlyContainerElement(container)
-    },
-    [setSeamlyContainerElement],
-  )
-
-  const blockLang = useMemo(() => {
-    if (locale) {
-      const htmlElementLang = document
-        .querySelector('html')
-        .getAttribute('lang')
-      if (htmlElementLang !== locale) {
-        return locale
-      }
-    }
-    return undefined
-  }, [locale])
-
-  const baseClassName = isDeprecated ? 'app--deprecated' : 'app'
   const defaultClassNames = [
-    `app--layout-${layoutMode}`,
+    'chat',
+    `chat--layout-${layoutMode}`,
     `namespace--${namespace}`,
   ]
 
   const classNames = [
-    baseClassName,
     ...defaultClassNames,
     ...appContainerClassNames,
     givenClassName,
   ]
 
   if (!isOpen && layoutMode !== 'app') {
-    classNames.push('app--collapsed')
+    classNames.push('chat--collapsed')
   }
 
   if (userResponded) {
-    classNames.push('app--user-responded')
+    classNames.push('chat--user-responded')
   }
 
   const onKeyDownHandler = (e) => {
@@ -76,18 +49,14 @@ const AppFrame = ({
       <section
         className={className(classNames)}
         onKeyDown={onKeyDownHandler}
-        lang={blockLang}
         tabIndex="-1"
-        ref={containerElementRef}
-        style={{ zIndex }}
-        data-nosnippet
-        aria-label={t('app.srLabel')}
+        aria-label={t('chat.srLabel')}
       >
-        <div className={className('app-wrapper')}>{children}</div>
+        <div className={className('chat-wrapper')}>{children}</div>
         {layoutMode === 'inline' && isOpen && <Suggestions isAside={true} />}
       </section>
     )
   )
 }
 
-export default AppFrame
+export default Chat

package/src/javascripts/ui/components/layout/deprecated-app-frame.js

@@ -15,7 +15,7 @@ const DeprecatedAppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
   const { isOpen, isVisible, setVisibility } = useVisibility()
   const { zIndex, showFaq, layoutMode } = useConfig()
-  const { isModal, isInline } = useSeamlyLayoutMode()
+  const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const userResponded = useUserHasResponded()
   const { locale } = useI18n()
@@ -58,18 +58,11 @@ const DeprecatedAppFrame = ({ children }) => {
       }
   }
 
-  const onClickHandler = (e) => {
-    if (isModal) {
-      e.stopPropagation()
-    }
-  }
-
   return (
     isVisible && (
       <section
         className={className(classNames)}
         onKeyDown={onKeyDownHandler}
-        onClick={onClickHandler}
         lang={blockLang}
         tabIndex="-1"
         ref={containerElementRef}

package/src/javascripts/ui/components/layout/header.js

@@ -10,7 +10,7 @@ const Header = ({ children, onCloseChat }) => {
 
   const { t } = useI18n()
   return (
-    <header className={className('app__header')}>
+    <header className={className('chat__header')}>
       {children}
       <div className={className('header-controls')}>
         <button

package/src/javascripts/ui/components/options/options-button.js

@@ -223,9 +223,9 @@ const OptionsButton = () => {
         className={className([
           'button',
           'button--secondary',
-          'app__options__button',
+          'chat__options__button',
           ...(!multiMenu && firstOptionName
-            ? [`app__options__button--${firstOptionName}`]
+            ? [`chat__options__button--${firstOptionName}`]
             : []),
           ...(!multiMenu && !firstOption.available ? ['button--disabled'] : []),
         ])}

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

@@ -152,9 +152,9 @@ const Suggestions = ({ isAside }) => {
         ref={containerRef}
       >
         {headingText && (
-          <h2 id={sectionId} className={className('suggestions__heading')}>
+          <p id={sectionId} className={className('suggestions__heading')}>
             {headingText}
-          </h2>
+          </p>
         )}
         {!!renderedSuggestions.length && (
           <SuggestionsList

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

@@ -1,4 +1,4 @@
-import AppFrame from '../layout/app-frame'
+import Chat from '../layout/chat'
 import Interrupt from '../layout/interrupt'
 import Conversation from '../conversation/conversation'
 import EntryContainer from '../entry/entry-container'
@@ -9,12 +9,12 @@ const AppView = () => {
   useSeamlyChat()
 
   return (
-    <AppFrame>
+    <Chat>
       <ChatFrame interruptComponent={Interrupt}>
         <Conversation />
         <EntryContainer />
       </ChatFrame>
-    </AppFrame>
+    </Chat>
   )
 }
 

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

@@ -7,11 +7,11 @@ import EntryContainer from '../entry/entry-container'
 import Interrupt from '../layout/interrupt'
 import { useSeamlyChat } from '../../hooks/seamly-hooks'
 import { useVisibility } from '../../../domains/visibility'
-import DeprecatedToggleButton from '../entry/toggle-button'
+import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 
 const DeprecatedView = () => {
   const { isVisible } = useVisibility()
-  const { closeChat, openChat } = useSeamlyChat()
+  const { openChat, closeChat } = useSeamlyChat()
 
   return (
     isVisible && (

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

@@ -1,9 +1,14 @@
+import { useCallback, useMemo } from 'preact/hooks'
 import { useConfig } from '../../../domains/config'
 import AppView from './app-view'
 import InlineView from './inline-view'
 import WindowView from './window-view'
-import { useSeamlyStateContext } from '../../hooks/seamly-state-hooks'
-import { visibilityStates } from '../../../domains/visibility'
+import { useVisibility } from '../../../domains/visibility'
+import { className } from '../../../lib/css'
+import { useSeamlyAppContainerClassNames } from '../../hooks/component-helper-hooks'
+import { useUserHasResponded } from '../../../domains/app'
+import { useI18n } from '../../../domains/i18n'
+import { useSeamlyContainerElement } from '../../hooks/focus-helper-hooks'
 
 const ViewComponentsMap = {
   app: AppView,
@@ -12,16 +17,67 @@ const ViewComponentsMap = {
 }
 
 const View = () => {
-  const { layoutMode } = useConfig()
-  const { visible } = useSeamlyStateContext()
+  const [, setSeamlyContainerElement] = useSeamlyContainerElement()
+  const { namespace, layoutMode, zIndex } = useConfig()
+  const { isOpen, isVisible } = useVisibility()
+  const appContainerClassNames = useSeamlyAppContainerClassNames()
+  const userResponded = useUserHasResponded()
+  const { locale } = useI18n()
   const ViewComponent = ViewComponentsMap[layoutMode]
 
+  const containerElementRef = useCallback(
+    (container) => {
+      setSeamlyContainerElement(container)
+    },
+    [setSeamlyContainerElement],
+  )
+
+  const blockLang = useMemo(() => {
+    if (locale) {
+      const htmlElementLang = document
+        .querySelector('html')
+        .getAttribute('lang')
+      if (htmlElementLang !== locale) {
+        return locale
+      }
+    }
+    return undefined
+  }, [locale])
+
   if (!ViewComponent) {
     console.warn('"layoutMode" should be one of "app", "inline" or "window"')
     return null
   }
 
-  return visible !== visibilityStates.hidden && <ViewComponent />
+  const defaultClassNames = [
+    `app--layout-${layoutMode}`,
+    `namespace--${namespace}`,
+  ]
+
+  const classNames = ['app', ...defaultClassNames, ...appContainerClassNames]
+
+  if (!isOpen && layoutMode !== 'app') {
+    classNames.push('app--collapsed')
+  }
+
+  if (userResponded) {
+    classNames.push('app--user-responded')
+  }
+
+  return (
+    isVisible && (
+      <div
+        className={className(classNames)}
+        lang={blockLang}
+        tabIndex="-1"
+        data-nosnippet
+        style={{ zIndex }}
+        ref={containerElementRef}
+      >
+        <ViewComponent />
+      </div>
+    )
+  )
 }
 
 export default View

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

@@ -1,5 +1,5 @@
 import { className } from '../../../lib/css'
-import AppFrame from '../layout/app-frame'
+import Chat from '../layout/chat'
 import Interrupt from '../layout/interrupt'
 import Conversation from '../conversation/conversation'
 import EntryContainer from '../entry/entry-container'
@@ -11,10 +11,16 @@ import Suggestions from '../suggestions'
 import InOutTransition, {
   transitionStartStates,
 } from '../widgets/in-out-transition'
+import { useInterrupt } from '../../../domains/interrupt'
 
 const InlineView = () => {
   useSeamlyChat()
   const { isOpen } = useVisibility()
+  const { hasInterrupt, meta } = useInterrupt()
+
+  if (hasInterrupt && !isOpen) {
+    return <Interrupt {...meta} />
+  }
 
   return (
     <>
@@ -31,12 +37,12 @@ const InlineView = () => {
         isActive={isOpen}
         transitionStartState={transitionStartStates.rendered}
       >
-        <AppFrame>
+        <Chat>
           <ChatFrame interruptComponent={Interrupt}>
             {isOpen && <Conversation />}
             <EntryContainer />
           </ChatFrame>
-        </AppFrame>
+        </Chat>
       </InOutTransition>
     </>
   )

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'preact/hooks'
 import { useSeamlyChat } from '../../../hooks/seamly-hooks'
 import { useVisibility } from '../../../../domains/visibility'
-import AppFrame from '../../layout/app-frame'
+import Chat from '../../layout/chat'
 import ChatFrame from '../../layout/chat-frame'
 import Interrupt from '../../layout/interrupt'
 import Conversation from '../../conversation/conversation'
@@ -67,13 +67,13 @@ const WindowView = () => {
         isActive={isOpen}
         transitionStartState={transitionStartStates.notRendered}
       >
-        <AppFrame>
+        <Chat>
           {isOpen && <CollapseButton onClick={closeChat} />}
           <ChatFrame interruptComponent={Interrupt}>
             <Conversation />
             <EntryContainer />
           </ChatFrame>
-        </AppFrame>
+        </Chat>
       </InOutTransition>
     </>
   )

package/src/stylesheets/1-settings/_config.scss

@@ -37,7 +37,7 @@ $white: #fff !default;
 $black: #000 !default;
 
 // BACKGROUND COLORS
-$app-bg: $white !default;
+$chat-bg: $white !default;
 
 $threadlist-agent-text-bgcolor: $grey-a;
 $threadlist-user-text-bgcolor: $brand2;
@@ -70,13 +70,13 @@ $borderradius-small: $borderradius * 0.5 !default;
 $borderradius-large: $borderradius * 2 !default;
 
 // DIMENSIONS
-$app-window-width: $spacer * 18 !default;
-$app-window-height: $spacer * 36 !default;
+$chat-window-width: $spacer * 18 !default;
+$chat-window-height: $spacer * 36 !default;
 
-$app-inline-height: $spacer * 32 !default;
-$app-inline-maxheight: 90vh !default;
+$chat-inline-height: $spacer * 32 !default;
+$chat-inline-maxheight: 90vh !default;
 
-$app-suggestions-maxheight: $spacer * 16 !default;
+$chat-suggestions-maxheight: $spacer * 16 !default;
 
 $viewport-width: 100vw !default;
 $viewport-height: 100vh !default;

package/src/stylesheets/{3-app/_app.scss → 3-chat/_chat.scss}

@@ -1,4 +1,4 @@
-.#{$n}-app {
+.#{$n}-chat {
   @include boxSizing;
 
   display: flex;
@@ -7,12 +7,12 @@
   transition: margin $transition, height $transition, transform $transition,
     opacity $transition;
   outline: 0;
-  color: set-text-color($app-bg);
+  color: set-text-color($chat-bg);
   font-family: $fontfamily-default;
   font-size: $fontsize-small;
 }
 
-.#{$n}-app--layout-inline {
+&.#{$n}-app--layout-inline .#{$n}-chat {
   height: fit-content;
   background-color: initial;
   box-shadow: none;
@@ -22,19 +22,19 @@
   }
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--collapsed .#{$n}-app-wrapper {
+&.#{$n}-app--layout-inline .#{$n}-chat--collapsed .#{$n}-chat-wrapper {
   height: auto;
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--user-responded {
+&.#{$n}-app--layout-inline .#{$n}-chat--user-responded {
   transition: none;
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--user-responded .#{$n}-app-wrapper {
+&.#{$n}-app--layout-inline .#{$n}-chat--user-responded .#{$n}-chat-wrapper {
   transition: none;
 }
 
-.#{$n}-app--layout-window {
+&.#{$n}-app--layout-window .#{$n}-chat {
   @include responsiveAppSizing();
 
   display: none;
@@ -42,23 +42,23 @@
   z-index: $z-index;
   right: $spacer;
   bottom: $spacer;
-  width: $app-window-width;
+  width: $chat-window-width;
   max-width: calc(100% - #{$spacer * 2});
-  height: $app-window-height;
+  height: $chat-window-height;
   transform: scale(0);
   opacity: 0;
 }
 
-.#{$n}-app--layout-window.#{$n}-transition--visible {
+&.#{$n}-app--layout-window .#{$n}-chat.#{$n}-transition--visible {
   display: flex;
 }
 
-.#{$n}-app--layout-window.#{$n}-transition--in {
+&.#{$n}-app--layout-window .#{$n}-chat.#{$n}-transition--in {
   transform: scale(1);
   opacity: 1;
 }
 
-.#{$n}-app--layout-app {
+&.#{$n}-app--layout-app .#{$n}-chat {
   position: fixed;
   z-index: $z-index;
   top: 0;
@@ -71,7 +71,7 @@
   max-height: 100%;
 }
 
-.#{$n}-app-wrapper {
+.#{$n}-chat-wrapper {
   display: flex;
   position: relative;
   z-index: 1;
@@ -81,18 +81,18 @@
   overflow: hidden;
   transition: flex $transition, width $transition, height $transition,
     border-radius $transition;
-  border: $thin-border solid set-border-color($app-bg);
+  border: $thin-border solid set-border-color($chat-bg);
   border-radius: $borderradius;
-  background-color: $app-bg;
+  background-color: $chat-bg;
   box-shadow: $boxshadow-soft;
 }
 
-.#{$n}-app--layout-app .#{$n}-app-wrapper {
+&.#{$n}-app--layout-app .#{$n}-chat-wrapper {
   border: 0 none;
   border-radius: 0;
 }
 
-.#{$n}-app--layout-inline .#{$n}-app-wrapper {
+&.#{$n}-app--layout-inline .#{$n}-chat-wrapper {
   width: 100%;
   height: 0;
 
@@ -111,12 +111,14 @@
   }
 }
 
-.#{$n}-app--layout-inline.#{$n}-transition--in .#{$n}-app-wrapper {
-  height: $app-inline-height;
-  max-height: $app-inline-maxheight;
+&.#{$n}-app--layout-inline
+  .#{$n}-chat.#{$n}-transition--in
+  .#{$n}-chat-wrapper {
+  height: $chat-inline-height;
+  max-height: $chat-inline-maxheight;
 }
 
-.#{$n}-app__container {
+.#{$n}-chat__container {
   display: flex;
   position: relative;
   flex-direction: column;
@@ -124,7 +126,7 @@
   height: 100%;
 }
 
-.#{$n}-app__body {
+.#{$n}-chat__body {
   display: flex;
   position: relative;
   flex-grow: 4;
@@ -132,11 +134,11 @@
   overflow-y: auto;
 }
 
-.#{$n}-app--layout-window .#{$n}-app__body {
+&.#{$n}-app--layout-window .#{$n}-chat__body {
   overscroll-behavior: contain;
 }
 
-.#{$n}-app__entry {
+.#{$n}-chat__entry {
   position: relative;
   flex: 0 0 auto;
   padding: $spacer * 0.5;
@@ -147,7 +149,7 @@
   }
 }
 
-.#{$n}-app--layout-inline.#{$n}-app--collapsed .#{$n}-app__entry {
+&.#{$n}-app--layout-inline .#{$n}-chat.#{$n}-app--collapsed .#{$n}-chat__entry {
   border: 0 none;
 }
 

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

@@ -29,12 +29,12 @@
   }
 }
 
-.#{$n}-chat-status ~ .#{$n}-app__container .#{$n}-conversation {
+.#{$n}-chat-status ~ .#{$n}-chat__container .#{$n}-conversation {
   padding-top: $buttonsize + $spacer * 2;
 }
 
 .#{$n}-chat-status
-  ~ .#{$n}-app__container
+  ~ .#{$n}-chat__container
   .#{$n}-disclaimer
   + .#{$n}-conversation {
   padding-top: 0;

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

@@ -11,7 +11,7 @@
   padding-right: $buttonsize + $spacer * 2;
 }
 
-.#{$n}-chat-status ~ .#{$n}-app__container .#{$n}-disclaimer {
+.#{$n}-chat-status ~ .#{$n}-chat__container .#{$n}-disclaimer {
   margin-top: $buttonsize + $spacer * 2;
   padding: $spacer * 0.5 $spacer;
 }

package/src/stylesheets/5-components/_message-count.scss

@@ -1,6 +1,7 @@
 .#{$n}-message-count {
   display: flex;
   position: absolute;
+  z-index: 1;
   top: $spacer * -0.5;
   right: $spacer * -0.5;
   align-items: center;

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

@@ -17,7 +17,7 @@
   padding: $spacer;
   transform: scale(1);
   opacity: 1;
-  background-color: rgba($app-bg, 0.8);
+  background-color: rgba($chat-bg, 0.8);
 }
 
 .#{$n}-modal__float {
@@ -29,7 +29,7 @@
   border: $thin-border solid $grey-b;
   border-radius: $borderradius;
   outline: 0;
-  background-color: $app-bg;
+  background-color: $chat-bg;
   box-shadow: $boxshadow-soft;
 }