feat(web): support chat

apps/web/package.json

@@ -26,6 +26,7 @@
     "@tabler/icons": "^2.40.0",
     "@tabler/icons-react": "^2.40.0",
     "@tanstack/react-query": "^5.22.2",
+    "crisp-sdk-web": "^1.0.25",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "echarts": "^5.5.0",

apps/web/src/components/navbar/navbar-user.tsx

@@ -12,6 +12,7 @@ import {
   IconSpeakerphone,
   IconBuilding,
   IconBook2,
+  IconLifebuoy,
 } from "@tabler/icons-react";
 import { FC } from "react";
 import { logout } from "../../providers/auth.provider";
@@ -20,13 +21,15 @@ import { WorkspaceSwitcher } from "../workspace-switcher";
 import { AvatarUser } from "../avatar-user";
 import classes from "./navbar-user.module.css";
 import { useAppStore } from "../../providers/app.provider";
+import { useSupportChat } from "./use-support-chat";
 
 interface NavbarUserProps {
   onNavigate: () => void;
 }
 
 export const NavbarUser: FC<NavbarUserProps> = () => {
   const { authenticatedUser: user, availableWorkspaces } = useAppStore();
+  const { openChat } = useSupportChat();
 
   const handleLogout = () => {
     logout();
@@ -60,16 +63,14 @@ export const NavbarUser: FC<NavbarUserProps> = () => {
             </Stack>
           </Group>
 
-          <Menu.Divider />
+          <Menu.Divider mx={-4} />
 
           <Menu.Label>Switch workspace</Menu.Label>
           <Box m="sm" mt={0}>
             <WorkspaceSwitcher workspaces={availableWorkspaces} />
           </Box>
+          <Menu.Divider mx={-4} />
 
-          <Menu.Divider />
-
-          <Menu.Label>Options</Menu.Label>
           <Menu.Item
             leftSection={<IconBuilding size={14} stroke={1.5} />}
             component="a"
@@ -78,6 +79,9 @@ export const NavbarUser: FC<NavbarUserProps> = () => {
           >
             Connect new organization
           </Menu.Item>
+          <Menu.Divider mx={-4} />
+
+          <Menu.Label>Options</Menu.Label>
           <Menu.Item
             leftSection={<IconBook2 size={14} stroke={1.5} />}
             component="a"
@@ -87,6 +91,15 @@ export const NavbarUser: FC<NavbarUserProps> = () => {
             Documentation
           </Menu.Item>
 
+          <Menu.Item
+            leftSection={<IconLifebuoy size={14} stroke={1.5} />}
+            onClick={() => {
+              openChat();
+            }}
+          >
+            Chat with support
+          </Menu.Item>
+
           <Menu.Item
             leftSection={<IconSpeakerphone size={14} stroke={1.5} />}
             component="a"
@@ -97,7 +110,7 @@ export const NavbarUser: FC<NavbarUserProps> = () => {
             Give feedback
           </Menu.Item>
 
-          <Menu.Divider />
+          <Menu.Divider mx={-4} />
 
           <Menu.Item
             component="a"

apps/web/src/components/navbar/use-support-chat.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Crisp } from "crisp-sdk-web";
+
+export const useSupportChat = () => {
+  const [isOpen, setOpen] = useState(false);
+
+  useEffect(() => {
+    Crisp.configure("41518479-f2b4-481b-8841-c3a8c3a9ba34");
+    Crisp.chat.hide();
+
+    Crisp.chat.onChatClosed(() => {
+      Crisp.chat.hide();
+      setOpen(false);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      Crisp.chat.show();
+      Crisp.chat.open();
+    }
+  }, [isOpen]);
+
+  return {
+    openChat: () => setOpen(true),
+  };
+};