✨(frontend) add user support feature using Crisp

Implement a chat feature that allows users to communicate directly with an
engineer for assistance with issues. We use Crisp for consistency, as it’s
already utilized in all other LaSuite products. Additionally, we need to
configure an environment variable in the frontend for better flexibility.

This is the initial implementation, and session handling will be refined
in future updates.

src/frontend/src/App.tsx

@@ -14,6 +14,7 @@ import './i18n/init'
 import { silenceLiveKitLogs } from '@/utils/livekit.ts'
 import { queryClient } from '@/api/queryClient'
 import { useAnalytics } from '@/features/analytics/hooks/useAnalytics'
+import { useSupport } from '@/features/support/hooks/useSupport'
 
 function App() {
   const { i18n } = useTranslation()
@@ -23,6 +24,7 @@ function App() {
   silenceLiveKitLogs(isProduction)
 
   useAnalytics()
+  useSupport()
 
   return (
     <QueryClientProvider client={queryClient}>

src/frontend/src/features/auth/api/useUser.tsx

@@ -4,6 +4,7 @@ import { fetchUser } from './fetchUser'
 import { type ApiUser } from './ApiUser'
 import { useEffect } from 'react'
 import { startAnalyticsSession } from '@/features/analytics/hooks/useAnalytics'
+import { initializeSupportSession } from '@/features/support/hooks/useSupport'
 
 /**
  * returns info about currently logged-in user
@@ -20,6 +21,7 @@ export const useUser = () => {
   useEffect(() => {
     if (query?.data) {
       startAnalyticsSession(query.data)
+      initializeSupportSession(query.data)
     }
   }, [query.data])
 

src/frontend/src/features/support/hooks/useSupport.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+import { Crisp } from 'crisp-sdk-web'
+import { ApiUser } from '@/features/auth/api/ApiUser'
+
+const SUPPORT_ID = '58ea6697-8eba-4492-bc59-ad6562585041'
+
+export const initializeSupportSession = (user: ApiUser) => {
+  if (!Crisp.isCrispInjected()) return
+  const { id, email } = user
+  Crisp.setTokenId(`meet-${id}`)
+  Crisp.user.setEmail(email)
+}
+
+export const terminateSupportSession = () => {
+  if (!Crisp.isCrispInjected()) return
+  Crisp.setTokenId()
+  Crisp.session.reset()
+}
+
+// Configure Crisp chat for real-time support across all pages.
+export const useSupport = () => {
+  useEffect(() => {
+    if (!SUPPORT_ID) {
+      console.warn('Crisp Website ID is not set')
+      return
+    }
+    if (Crisp.isCrispInjected()) return
+    Crisp.configure(SUPPORT_ID)
+    Crisp.setHideOnMobile(true)
+  }, [])
+
+  return null
+}

src/frontend/src/layout/Header.tsx

@@ -11,6 +11,7 @@ import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
 import { ProConnectButton } from '@/components/ProConnectButton'
 import { terminateAnalyticsSession } from '@/features/analytics/hooks/useAnalytics'
+import { terminateSupportSession } from '@/features/support/hooks/useSupport'
 
 export const Header = () => {
   const { t } = useTranslation()
@@ -82,6 +83,7 @@ export const Header = () => {
                   onAction={(value) => {
                     if (value === 'logout') {
                       terminateAnalyticsSession()
+                      terminateSupportSession()
                       window.location.href = logoutUrl()
                     }
                   }}