re-aligned add bin button and closing crisp chat when chat drawer is opened

src/chat/ChatDrawer.tsx

@@ -1,5 +1,5 @@
 import { ChevronRight } from "@mui/icons-material";
-import { Avatar, Box, Divider, Drawer, IconButton, Theme, Tooltip, Typography } from "@mui/material";
+import { Avatar, Box, Drawer, IconButton, Theme, Tooltip, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { useMobile } from "hooks";
 import { Team } from "models";
@@ -7,7 +7,7 @@ import Chat from "./Chat";
 import { pond } from "protobuf-ts/pond";
 import { useEffect, useState } from "react";
 import { useTeamAPI } from "providers";
-import { openCrispChat } from './CrispChat';
+import { closeCrispChat, openCrispChat } from './CrispChat';
 import RobotIcon from "products/CommonIcons/robotIcon";
 
 const useStyles = makeStyles<Theme>((theme: Theme) => ({
@@ -67,6 +67,12 @@ export function ChatDrawer(props: Props) {
     onClose()
   }
 
+  useEffect(() => {
+    if (open) {
+      closeCrispChat()
+    }
+  }, [open])
+
   return (
     <Drawer
       open={open}