Bot UI: Hide Intercom widget on Bot page

Author: bogdan-ts

ui/packages/platform/src/hooks/useHideIntercom.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+const INTERCOM_BUTTON_SELECTOR = `div[aria-label="Open Intercom Messenger"]`;
+const INTERCOM_IFRAME_SELECTOR = `iframe[name="intercom-launcher-frame"]`;
+
+export const useHideIntercom = () => {
+  useEffect(() => {
+    const intercomButton = document.querySelector(INTERCOM_BUTTON_SELECTOR);
+    const intercomIframe = document.querySelector(INTERCOM_IFRAME_SELECTOR);
+
+    const originalButtonDisplay = intercomButton ? (intercomButton as HTMLElement).style.display : '';
+    const originalIframeDisplay = intercomIframe ? (intercomIframe as HTMLElement).style.display : '';
+
+    const hideIntercom = () => {
+      if (intercomButton) {
+        (intercomButton as HTMLElement).style.display = 'none';
+      }
+      if (intercomIframe) {
+        (intercomIframe as HTMLElement).style.display = 'none';
+      }
+    };
+
+    const showIntercom = () => {
+      if (intercomButton) {
+        (intercomButton as HTMLElement).style.display = originalButtonDisplay || 'block';
+      }
+      if (intercomIframe) {
+        (intercomIframe as HTMLElement).style.display = originalIframeDisplay || 'inline';
+      }
+    };
+
+    hideIntercom();
+
+    return () => {
+      showIntercom();
+    };
+  }, []);
+};

ui/packages/platform/src/pages/Bot/BotWrapper.tsx

@@ -2,6 +2,7 @@ import { BotPage } from "./index";
 import {RouteComponentProps} from "react-router";
 import {AlertSnackbarProvider} from "@postgres.ai/shared/components/AlertSnackbar/useAlertSnackbar";
 import { AiBotProvider } from "./hooks";
+import { useHideIntercom } from "../../hooks/useHideIntercom";
 
 export interface BotWrapperProps {
   envData: {
@@ -24,6 +25,7 @@ export interface BotWrapperProps {
 
 
 export const BotWrapper = (props: BotWrapperProps) => {
+  useHideIntercom();
   return (
     <AlertSnackbarProvider>
       <AiBotProvider args={{ threadId: props.match.params.threadId, orgId: props.orgData.id }}>

ui/packages/platform/src/pages/Bot/Command/Command.tsx

@@ -194,11 +194,6 @@ export const Command = React.memo((props: Props) => {
     setValue('')
   }, [threadId]);
 
-  // Floating intercom.
-  const sendButtonRef = useRef<HTMLButtonElement | null>(null)
-
-  useFloatingIntercom(sendButtonRef)
-
   return (
     <div className={classes.root}>
       <TextField
@@ -222,7 +217,6 @@ export const Command = React.memo((props: Props) => {
         onClick={triggerSend}
         className={classes.iconButton}
         disabled={sendDisabled || value.length === 0}
-        ref={sendButtonRef}
       >
         <SendRoundedIcon />
       </IconButton>