fix(1002): make embed chat icon less weird in iframe (#5640)

* fix(1002): make embed chat icon less weird in iframe * chore(clean): clean up a bit
botpress · Nov 1, 2021 · 99b1a9b · 99b1a9b
1 parent 9be7367
commit 99b1a9b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/modules/channel-web/assets/inject.js b/modules/channel-web/assets/inject.js
@@ -2,6 +2,7 @@
 const DEFAULT_CHAT_ID = 'bp-web-widget'
 const DEFAULT_IFRAME_ID = 'bp-widget'
 const DEFAULT_IFRAME_CLASS = 'bp-widget-web'
+const DEFAULT_IFRAME_HIDDEN = 'bp-widget-hidden'
 
 function _getContainerId(chatId) {
   return chatId ? chatId + '-container' : DEFAULT_CHAT_ID
@@ -41,6 +42,8 @@ function _generateIFrameHTML(host, config) {
     iframeSrc +
     '" class="' +
     DEFAULT_IFRAME_CLASS +
+    ' ' +
+    DEFAULT_IFRAME_HIDDEN +
     '"/>'
   )
 }

diff --git a/modules/channel-web/src/views/lite/main.tsx b/modules/channel-web/src/views/lite/main.tsx
@@ -25,6 +25,7 @@ class Web extends React.Component<MainProps> {
   private hasBeenInitialized: boolean = false
   private audio: HTMLAudioElement
   private lastMessageId: uuid
+  private hasFontCss: boolean = false
 
   constructor(props) {
     super(props)
@@ -62,6 +63,22 @@ class Web extends React.Component<MainProps> {
   }
 
   componentDidUpdate() {
+    const app = document.querySelector('#app')
+    const div = app?.firstChild?.firstChild
+    if (div) {
+      div.childNodes.forEach(child => {
+        const href = child['attributes']?.href
+        if (href) {
+          const value = href?.value
+          if (value && typeof value === 'string') {
+            const foundFontCss = value.match(/font-roboto.css/)?.length > 0
+            setTimeout(() => {
+              this.hasFontCss = foundFontCss
+            }, 500)
+          }
+        }
+      })
+    }
     if (this.config) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.initializeIfChatDisplayed()
@@ -335,9 +352,9 @@ class Web extends React.Component<MainProps> {
     const { isEmulator, stylesheet, extraStylesheet } = this.props.config
     return (
       <React.Fragment>
+        {!isIE && <Stylesheet href={'assets/studio/ui/public/external/font-roboto.css'} />}
         {!!stylesheet?.length && <Stylesheet href={stylesheet} />}
         {!stylesheet && <Stylesheet href={`assets/modules/channel-web/default${isEmulator ? '-emulator' : ''}.css`} />}
-        {!isIE && <Stylesheet href={'assets/modules/channel-web/font.css'} />}
         {!!extraStylesheet?.length && <Stylesheet href={extraStylesheet} />}
       </React.Fragment>
     )
@@ -347,16 +364,19 @@ class Web extends React.Component<MainProps> {
     if (!this.props.isWebchatReady) {
       return null
     }
-
     return (
       <div onFocus={this.handleResetUnreadCount}>
         {this.applyAndRenderStyle()}
-        <h1 id="tchat-label" className="sr-only" tabIndex={-1}>
-          {this.props.intl.formatMessage({
-            id: 'widget.title',
-            defaultMessage: 'Chat window'
-          })}
-        </h1>
+
+        {this.hasFontCss && (
+          <h1 id="tchat-label" className="sr-only" tabIndex={-1}>
+            {this.props.intl.formatMessage({
+              id: 'widget.title',
+              defaultMessage: 'Chat window'
+            })}
+          </h1>
+        )}
+
         {this.props.displayWidgetView ? this.renderWidget() : <Container />}
       </div>
     )