From a2c051b253d19b40b37753236b8667f4bf87f6d9 Mon Sep 17 00:00:00 2001
From: Walter Galvao <walterbgneto@gmail.com>
Date: Sun, 30 Jun 2024 19:42:50 -0300
Subject: [PATCH] feat(web): support chat

---
 apps/web/package.json                         |  1 +
 .../web/src/components/navbar/navbar-user.tsx | 23 +++++++++++----
 .../components/navbar/use-support-chat.tsx    | 29 +++++++++++++++++++
 package-lock.json                             |  4 ++-
 4 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/src/components/navbar/use-support-chat.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index 02d309c..dd359cd 100644
--- a/apps/web/package.json
+++ b/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",
diff --git a/apps/web/src/components/navbar/navbar-user.tsx b/apps/web/src/components/navbar/navbar-user.tsx
index 3dfe805..4c97e14 100644
--- a/apps/web/src/components/navbar/navbar-user.tsx
+++ b/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,6 +21,7 @@ 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;
@@ -27,6 +29,7 @@ interface NavbarUserProps {
 
 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"
diff --git a/apps/web/src/components/navbar/use-support-chat.tsx b/apps/web/src/components/navbar/use-support-chat.tsx
new file mode 100644
index 0000000..d1c76c3
--- /dev/null
+++ b/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),
+  };
+};
diff --git a/package-lock.json b/package-lock.json
index bec288b..c9d4571 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -343,6 +343,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",
@@ -7522,7 +7523,8 @@
     },
     "node_modules/crisp-sdk-web": {
       "version": "1.0.25",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/crisp-sdk-web/-/crisp-sdk-web-1.0.25.tgz",
+      "integrity": "sha512-CWTHFFeHRV0oqiXoPh/aIAKhFs6xcIM4NenGPnClAMCZUDQgQsF1OWmZWmnVNjJriXUmWRgDfeUxcxygS0dCRA=="
     },
     "node_modules/cron-parser": {
       "version": "4.8.1",