Wrap up Front chat (#1085)

* Wrap up Front chat

* Wrap up Front chat

front/src/modules/auth/queries/update.ts

@@ -40,6 +40,7 @@ export const VERIFY = gql`
         firstName
         lastName
         canImpersonate
+        supportUserHash
         workspaceMember {
           id
           allowImpersonation
@@ -99,6 +100,7 @@ export const IMPERSONATE = gql`
         firstName
         lastName
         canImpersonate
+        supportUserHash
         workspaceMember {
           id
           allowImpersonation

front/src/modules/client-config/components/ClientConfigProvider.tsx

@@ -33,7 +33,7 @@ export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
       setDebugMode(data?.clientConfig.debugMode);
       setSignInPrefilled(data?.clientConfig.signInPrefilled);
       setTelemetry(data?.clientConfig.telemetry);
-      setSupportChat(data?.clientConfig.supportChat);
+      setSupportChat(data?.clientConfig.support);
     }
   }, [
     data,

front/src/modules/client-config/queries/index.tsx

@@ -13,9 +13,9 @@ export const GET_CLIENT_CONFIG = gql`
         enabled
         anonymizationEnabled
       }
-      supportChat {
+      support {
         supportDriver
-        supportFrontendKey
+        supportFrontChatId
       }
     }
   }

front/src/modules/client-config/states/supportChatState.ts

@@ -1,11 +1,11 @@
 import { atom } from 'recoil';
 
-import { SupportChat } from '~/generated/graphql';
+import { Support } from '~/generated/graphql';
 
-export const supportChatState = atom<SupportChat>({
+export const supportChatState = atom<Support>({
   key: 'supportChatState',
   default: {
-    supportDriver: 'front',
-    supportFrontendKey: null,
+    supportDriver: 'none',
+    supportFrontChatId: null,
   },
 });

front/src/modules/ui/button/components/Button.tsx

@@ -129,7 +129,7 @@ const StyledButton = styled.button<
         return theme.font.weight.medium;
     }
   }};
-  gap: ${({ theme }) => theme.spacing(2)};
+  gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
   justify-content: flex-start;
   padding: ${({ theme, title }) => {

front/src/modules/ui/icon/index.ts

@@ -52,3 +52,4 @@ export { IconCalendar } from '@tabler/icons-react';
 export { IconPencil } from '@tabler/icons-react';
 export { IconCircleDot } from '@tabler/icons-react';
 export { IconTag } from '@tabler/icons-react';
+export { IconHelpCircle } from '@tabler/icons-react';

front/src/modules/ui/navbar/components/SupportChat.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
@@ -9,24 +10,12 @@ import {
   ButtonSize,
   ButtonVariant,
 } from '@/ui/button/components/Button';
+import { IconHelpCircle } from '@/ui/icon';
 
 const StyledButtonContainer = styled.div`
   display: flex;
 `;
 
-const StyledQuestionMark = styled.div`
-  align-items: center;
-  border-radius: 50%;
-  border-style: solid;
-  border-width: ${({ theme }) => theme.spacing(0.25)};
-  display: flex;
-  height: ${({ theme }) => theme.spacing(3.5)};
-  justify-content: center;
-  margin-right: ${({ theme }) => theme.spacing(1)};
-  width: ${({ theme }) => theme.spacing(3.5)};
-`;
-
-// insert a script tag into the DOM right before the closing body tag
 function insertScript({
   src,
   innerHTML,
@@ -63,41 +52,39 @@ function configureFront(chatId: string) {
 }
 
 export default function SupportChat() {
+  const theme = useTheme();
   const user = useRecoilValue(currentUserState);
   const supportChatConfig = useRecoilValue(supportChatState);
   const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false);
-  const [isChatShowing, setIsChatShowing] = useState(false);
 
   useEffect(() => {
     if (
       supportChatConfig?.supportDriver === 'front' &&
-      supportChatConfig.supportFrontendKey &&
+      supportChatConfig.supportFrontChatId &&
       !isFrontChatLoaded
     ) {
-      configureFront(supportChatConfig.supportFrontendKey);
+      configureFront(supportChatConfig.supportFrontChatId);
       setIsFrontChatLoaded(true);
     }
     if (user?.email && isFrontChatLoaded) {
       window.FrontChat?.('identity', {
         email: user.email,
         name: user.displayName,
-        userHash: user?.supportHMACKey,
+        userHash: user?.supportUserHash,
       });
     }
   }, [
     isFrontChatLoaded,
     supportChatConfig?.supportDriver,
-    supportChatConfig.supportFrontendKey,
+    supportChatConfig.supportFrontChatId,
     user?.displayName,
     user?.email,
-    user?.supportHMACKey,
+    user?.supportUserHash,
   ]);
 
   function handleSupportClick() {
     if (supportChatConfig?.supportDriver === 'front') {
-      const action = isChatShowing ? 'hide' : 'show';
-      setIsChatShowing(!isChatShowing);
-      window.FrontChat?.(action);
+      window.FrontChat?.('show');
     }
   }
 
@@ -107,7 +94,7 @@ export default function SupportChat() {
         variant={ButtonVariant.Tertiary}
         size={ButtonSize.Small}
         title="Support"
-        icon={<StyledQuestionMark>?</StyledQuestionMark>}
+        icon={<IconHelpCircle size={theme.icon.size.md} />}
         onClick={handleSupportClick}
       />
     </StyledButtonContainer>

front/src/modules/users/queries/index.ts

@@ -27,7 +27,7 @@ export const GET_CURRENT_USER = gql`
         locale
         colorScheme
       }
-      supportHMACKey
+      supportUserHash
     }
   }
 `;