fix: use isolated root (BUG-771) (#112)

voiceflow · Feb 22, 2024 · 5926fe9 · 5926fe9
1 parent eaa1971
commit 5926fe9
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 20 deletions.
diff --git a/packages/react-chat/src/components/Image/Default.tsx b/packages/react-chat/src/components/Image/Default.tsx
@@ -17,7 +17,7 @@ export const DefaultImageBase = styled(tag('img'), {
         width: 248,
       },
       embedded: {
-        width: 512,
+        maxWidth: 512,
       },
     },
   },

diff --git a/packages/react-chat/src/constants.ts b/packages/react-chat/src/constants.ts
@@ -1,7 +1,3 @@
-export const GlobalOptions = {
-  SHADOW_ROOT: true,
-};
-
 export enum ClassName {
   ASSISTANT_INFO = 'vfrc-assistant-info',
   AVATAR = 'vfrc-avatar',

diff --git a/packages/react-chat/src/index.tsx b/packages/react-chat/src/index.tsx
@@ -3,23 +3,16 @@ import { createRoot, Root } from 'react-dom/client';
 import { RuntimeProvider } from './contexts';
 import { ChatConfig, LoadConfig } from './dtos/ChatConfig.dto';
 import { RenderMode } from './dtos/RenderOptions.dto';
+import { shadowRoot } from './styles/shadow';
 import { stitches } from './styles/theme';
 import { mergeAssistantOptions } from './utils/assistant';
 import { createPlaceholderMethods } from './utils/chat';
 import { ChatEmbed, ChatWidget } from './views';
 
-const BUBBLE_TARGET = 'voiceflow-chat';
-
 let reactRoot: Root;
 
-const initBubbleMode = () => {
-  const rootEl = document.createElement('div');
-  rootEl.id = BUBBLE_TARGET;
-  document.body.appendChild(rootEl);
-
-  const shadowRoot = rootEl.attachShadow({ mode: 'open' });
+const initOverlayMode = () => {
   reactRoot = createRoot(shadowRoot);
-  stitches.transplant(shadowRoot);
 
   return { shadowRoot, reactRoot };
 };
@@ -42,7 +35,7 @@ const createChatRoot = (config: ChatConfig) => {
     return initEmbeddedMode(config.render.target);
   }
 
-  return initBubbleMode();
+  return initOverlayMode();
 };
 
 const methods = createPlaceholderMethods((method: string) => `Method '${method}' will have no effect until 'load' has been called.`);

diff --git a/packages/react-chat/src/package.entry.ts b/packages/react-chat/src/package.entry.ts
@@ -1,8 +1,3 @@
-import { GlobalOptions } from './constants';
-
-// nothing else should reference package.entry.ts
-GlobalOptions.SHADOW_ROOT = false;
-
 export * from './common';
 export * from './components';
 export * from './contexts';

diff --git a/packages/react-chat/src/styles/shadow.ts b/packages/react-chat/src/styles/shadow.ts
@@ -0,0 +1,8 @@
+// create shadow dom
+export const VOICEFLOW_ID = 'voiceflow-chat';
+
+const rootEl = document.createElement('div');
+rootEl.id = VOICEFLOW_ID;
+
+document.body.appendChild(rootEl);
+export const shadowRoot = rootEl.attachShadow({ mode: 'open' });
diff --git a/packages/react-chat/src/styles/theme.ts b/packages/react-chat/src/styles/theme.ts
@@ -5,6 +5,7 @@ import type { StringKeyOf } from 'type-fest';
 
 import * as Color from './color';
 import * as Font from './font';
+import { shadowRoot } from './shadow';
 
 const ANIMATION_DURATION = 150;
 
@@ -22,6 +23,8 @@ export interface FontOptions {
 }
 
 export const getDefaultTheme = () => ({
+  ...(__USE_SHADOW_ROOT__ && { root: shadowRoot }),
+
   theme: {
     colors: Color.PALETTE,
     shadows: Color.SHADOWS,