fix: feedback diglog position (#158)

src/components/ChatAiWidget.tsx

@@ -7,7 +7,7 @@ import ProviderContainer, {
 } from './ProviderContainer';
 import WidgetToggleButton from './WidgetToggleButton';
 import WidgetWindow from './WidgetWindow';
-import { MAX_Z_INDEX } from '../const';
+import { MAX_Z_INDEX, elementIds } from '../const';
 import { useWidgetOpen } from '../context/WidgetOpenContext';
 import useMobileView from '../hooks/useMobileView';
 import { isMobile } from '../utils';
@@ -44,7 +44,7 @@ const MobileComponent = () => {
       <MobileContainer
         style={{ display: isOpen ? 'block' : 'none' }}
         width={mobileContainerWidth}
-        id="aichatbot-widget-window"
+        id={elementIds.widgetWindow}
       >
         <Chat />
       </MobileContainer>

src/components/CustomChannelHeader.tsx

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 
 import BetaLogo from './BetaLogo';
 import BotProfileImage from './BotProfileImage';
+import { elementIds } from '../const';
 import { useConstantState } from '../context/ConstantContext';
 import { useWidgetOpen } from '../context/WidgetOpenContext';
 import { ReactComponent as CloseButton } from '../icons/ic-widget-close.svg';
@@ -114,7 +115,7 @@ export default function CustomChannelHeader({
           }}
         >
           <customRefreshComponent.icon
-            id="aichatbot-widget-refresh-icon"
+            id={elementIds.refreshIcon}
             width={customRefreshComponent.width}
             height={customRefreshComponent.height}
             style={

src/components/ProviderContainer.tsx

@@ -12,6 +12,7 @@ import {
 import { WidgetOpenProvider } from '../context/WidgetOpenContext';
 import { useChannelStyle } from '../hooks/useChannelStyle';
 // import useDatadogRum from '../hooks/useDatadog';
+import useDynamicAttachModal from '../hooks/useDynamicAttachModal';
 import useWidgetLocalStorage from '../hooks/useWidgetLocalStorage';
 import { getTheme } from '../theme';
 import { isMobile } from '../utils';
@@ -29,6 +30,8 @@ const SBComponent = ({ children }: { children: React.ReactElement }) => {
     stringSet,
     ...restConstantProps
   } = useConstantState();
+  useDynamicAttachModal();
+
   // useDatadogRum();
 
   const userAgentCustomParams = useRef({

src/components/WidgetToggleButton.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { getColorBasedOnSaturation } from '../colors';
-import { MAX_Z_INDEX } from '../const';
+import { MAX_Z_INDEX, elementIds } from '../const';
 import { useConstantState } from '../context/ConstantContext';
 import { useWidgetOpen } from '../context/WidgetOpenContext';
 import { useChannelStyle } from '../hooks/useChannelStyle';
@@ -97,7 +97,7 @@ interface ToggleButtonProps {
 const StyledButton = ({ onClick, accentColor, isOpen }: ToggleButtonProps) => {
   return (
     <StyledWidgetButtonWrapper
-      id="aichatbot-widget-button"
+      id={elementIds.widgetToggleButton}
       onClick={onClick}
       accentColor={accentColor}
     >

src/components/WidgetWindow.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import { MAX_Z_INDEX } from '../const';
+import { MAX_Z_INDEX, elementIds } from '../const';
 import { useWidgetOpen } from '../context/WidgetOpenContext';
 import { ReactComponent as CloseIcon } from '../icons/ic-widget-close.svg';
 import { ReactComponent as CollapseIcon } from '../icons/icon-collapse.svg';
@@ -95,17 +95,17 @@ const WidgetWindow = ({ children }: { children: React.ReactNode }) => {
     <StyledWidgetWindowWrapper
       isOpen={isOpen}
       isExpanded={isExpanded}
-      id="aichatbot-widget-window"
+      id={elementIds.widgetWindow}
     >
       <StyledExpandButton onClick={() => setIsExpanded((prev) => !prev)}>
         {isExpanded ? (
-          <CollapseIcon id="aichatbot-widget-collapse-icon" />
+          <CollapseIcon id={elementIds.collapseIcon} />
         ) : (
-          <ExpandIcon id="aichatbot-widget-expand-icon" />
+          <ExpandIcon id={elementIds.expandIcon} />
         )}
       </StyledExpandButton>
       <StyledCloseButton onClick={() => setIsOpen(false)}>
-        <CloseIcon id="aichatbot-widget-close-icon" />
+        <CloseIcon id={elementIds.closeIcon} />
       </StyledCloseButton>
       {children}
     </StyledWidgetWindowWrapper>

src/const.ts

@@ -150,3 +150,13 @@ export interface CustomRefreshComponent {
   onClick?: () => void;
   style?: React.CSSProperties;
 }
+
+export const elementIds = {
+  widgetWindow: 'aichatbot-widget-window',
+  widgetToggleButton: 'aichatbot-widget-button',
+  collapseIcon: 'aichatbot-widget-collapse-icon',
+  expandIcon: 'aichatbot-widget-expand-icon',
+  closeIcon: 'aichatbot-widget-close-icon',
+  refreshIcon: 'aichatbot-widget-refresh-icon',
+  uikitModal: 'sendbird-modal-root',
+};

src/hooks/useDynamicAttachModal.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+import { elementIds } from '../const';
+
+const parentId = elementIds.widgetWindow;
+const childId = elementIds.uikitModal;
+
+function useDynamicAttachModal() {
+  useEffect(() => {
+    // Set up a MutationObserver to monitor changes in the parent element
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.addedNodes.length) {
+          // Check if the added nodes include the one with parentId
+          Array.from(mutation.addedNodes).forEach((node) => {
+            if (node?.id === parentId) {
+              const parent = document.getElementById(parentId);
+              const child = document.getElementById(childId);
+              if (parent && child) {
+                parent.appendChild(child);
+                // Disconnect the observer once the child is attached
+                observer.disconnect();
+              }
+            }
+          });
+        }
+      });
+    });
+
+    // Set the observer to monitor the entire document
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    return () => {
+      observer?.disconnect();
+    };
+  }, []);
+}
+
+export default useDynamicAttachModal;