fix embed

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx

@@ -11,6 +11,7 @@ import {
   CreditCardIcon,
   LogOutIcon,
   MessageCircle,
+  MessageSquareIcon,
   MousePointerClick,
   PanelLeftCloseIcon,
   PanelLeftOpenIcon,
@@ -25,6 +26,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
 
 import { cn } from "@formbricks/lib/cn";
 import { getAccessFlags } from "@formbricks/lib/membership/utils";
@@ -50,6 +52,7 @@ import {
   DropdownMenuTrigger,
 } from "@formbricks/ui/DropdownMenu";
 
+import { SaturnChat } from "../components/SaturnSupport";
 import AddProductModal from "./AddProductModal";
 
 interface NavigationProps {
@@ -80,6 +83,7 @@ export const MainNavigation = ({
   const [showCreateTeamModal, setShowCreateTeamModal] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(localStorage.getItem("isMainNavCollapsed") === "true");
   const [isTextVisible, setIsTextVisible] = useState(true);
+  const [openSaturn, setOpenSaturn] = useState(false);
 
   const product = products.find((product) => product.id === environment.productId);
   const { isAdmin, isOwner, isViewer } = getAccessFlags(membershipRole);
@@ -181,6 +185,19 @@ export const MainNavigation = ({
       hidden: !isFormbricksCloud || isPricingDisabled,
       icon: CreditCardIcon,
     },
+    {
+      icon: MessageSquareIcon,
+      label: "Chat with us",
+      href: pathname,
+      onClick: () => {
+        console.log("this is a testsssss");
+        if (openSaturn) {
+          toast.success("Chat is already open on the bottom right corner.");
+          return;
+        }
+        setOpenSaturn(true);
+      },
+    },
     {
       label: "Documentation",
       href: "https://formbricks.com/docs",
@@ -375,6 +392,7 @@ export const MainNavigation = ({
                           href={link.href}
                           target={link.target}
                           key={link.label}
+                          onClick={link.onClick}
                           className="flex items-center">
                           <DropdownMenuItem
                             className="w-full gap-x-2 rounded-lg font-normal"
@@ -444,6 +462,15 @@ export const MainNavigation = ({
         setOpen={(val) => setShowAddProductModal(val)}
         environmentId={environment.id}
       />
+      {openSaturn && (
+        <SaturnChat
+          userId={session.user.id}
+          email={session.user.email}
+          name={session.user.name}
+          teamId={team.id}
+          teamName={team.name}
+        />
+      )}
     </>
   );
 };

apps/web/app/(app)/environments/[environmentId]/components/SaturnSupport.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect } from "react";
+
+declare global {
+  interface Window {
+    saturnSDK: any;
+    $saturn: any;
+  }
+}
+
+interface SaturnChatProps {
+  userId: string;
+  email: string;
+  name: string | null;
+  teamId: string;
+  teamName: string;
+}
+
+export function SaturnChat({ userId, email, name, teamId, teamName }: SaturnChatProps) {
+  useEffect(() => {
+    const scriptElem = document.createElement("script");
+    const BASE_URL = "https://app.saturnhq.io";
+    scriptElem.src = `${BASE_URL}/assets/sdk.js`;
+    scriptElem.defer = true;
+    scriptElem.async = true;
+    document.body.appendChild(scriptElem);
+
+    scriptElem.onload = () => {
+      window.saturnSDK.run({
+        integrationId: "formbricks",
+      });
+    };
+    return () => {
+      document.body.removeChild(scriptElem);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      const saturnChatbox = document.getElementsByClassName("saturn-chat-holder")[0];
+      const inbuiltCloseIcon = document.getElementsByClassName("icon-container")[0];
+      if (
+        saturnChatbox &&
+        inbuiltCloseIcon &&
+        !saturnChatbox.contains(event.target as Node) &&
+        !inbuiltCloseIcon.contains(event.target as Node)
+      ) {
+        window.$saturn.close();
+      }
+    };
+
+    const setUser = () => {
+      window.$saturn.setUser(
+        userId,
+        { email: email, name: name },
+        { groups: { team: { id: teamId, name: teamName } } }
+      );
+    };
+
+    if (window?.$saturn && window?.$saturn?.isLoaded) {
+      setUser();
+      window.$saturn.open();
+    } else {
+      window.addEventListener(
+        "saturn:ready",
+        function () {
+          setUser();
+          window.$saturn.open();
+        },
+        { once: true }
+      );
+    }
+    document.addEventListener("mousedown", handleOutsideClick);
+  }, [userId, email, name, teamId, teamName]);
+
+  return <></>;
+}