feat: 增价crisp会话客服

apps/user/app/(main)/(content)/layout.tsx

@@ -1,3 +1,12 @@
+import dynamic from 'next/dynamic';
+
 export default async function MainLayout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>;
+  const CrispWithNoSSR = dynamic(() => import('@/components/Crisp/Crisp'));
+
+  return (
+    <>
+      <CrispWithNoSSR />
+      {children}
+    </>
+  );
 }

apps/user/components/Crisp/Crisp.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import useGlobalStore from '@/config/use-global';
+import { Crisp } from 'crisp-sdk-web';
+import { useEffect } from 'react';
+
+// Configuration object for Crisp
+const CRISP_CONFIG = {
+  websiteId: '47fcc1ac-9674-4ab1-9e3c-6b5666f59a38',
+  autoload: false,
+};
+
+/**
+ * Initializes and configures the Crisp chat widget.
+ * Sets user email if available and loads the widget.
+ */
+const CrispChat = () => {
+  const { user } = useGlobalStore();
+
+  useEffect(() => {
+    // Configure Crisp with the provided website ID
+    try {
+      Crisp.configure(CRISP_CONFIG.websiteId, {
+        autoload: CRISP_CONFIG.autoload,
+      });
+    } catch (error) {
+      console.error('Failed to configure Crisp:', error);
+    }
+
+    // Set user email and load Crisp if auth_identifier exists
+    if (user?.auth_methods?.[0]?.auth_identifier) {
+      try {
+        Crisp.setTokenId(`${user.auth_methods[0].auth_identifier}_${user.id}`);
+        Crisp.user.setEmail(user.auth_methods[0].auth_identifier);
+        Crisp.load();
+      } catch (error) {
+        console.error('Failed to set user email or load Crisp:', error);
+      }
+    }
+
+    // Cleanup function to reset Crisp on component unmount
+    return () => {
+      try {
+        Crisp.session.reset();
+      } catch (error) {
+        console.error('Failed to reset Crisp session:', error);
+      }
+    };
+  }, [user]); // Re-run effect if user changes
+
+  return null; // Component does not render anything
+};
+
+export default CrispChat;

apps/user/package.json

@@ -20,6 +20,7 @@
     "@workspace/airo-ui": "workspace:*",
     "ahooks": "^3.8.4",
     "axios": "^1.7.9",
+    "crisp-sdk-web": "^1.0.25",
     "framer-motion": "^11.16.1",
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.469.0",

apps/user/utils/common.ts

@@ -1,5 +1,6 @@
 import { locales, NEXT_PUBLIC_DEFAULT_LANGUAGE } from '@/config/constants';
 import { isBrowser } from '@workspace/airo-ui/utils';
+import { Crisp } from 'crisp-sdk-web';
 import { UAParser } from 'ua-parser-js';
 import Cookies from 'universal-cookie';
 
@@ -45,10 +46,11 @@ export function getRedirectUrl() {
   sessionStorage.removeItem('redirect-url');
   return url;
 }
-
 export function Logout() {
   if (!isBrowser()) return;
   cookies.remove('Authorization');
+  Crisp.setTokenId(); // 1. Clear the token value
+  Crisp.session.reset(); // 2. Unbind the current session
   const pathname = location.pathname;
   if (
     !['', '/', '/auth', '/tos', '/privacy-policy'].includes(pathname) &&

bun.lock

@@ -65,6 +65,7 @@
         "@workspace/airo-ui": "workspace:*",
         "ahooks": "^3.8.4",
         "axios": "^1.7.9",
+        "crisp-sdk-web": "^1.0.25",
         "framer-motion": "^11.16.1",
         "gray-matter": "^4.0.3",
         "lucide-react": "^0.469.0",
@@ -1333,6 +1334,8 @@
 
     "create-require": ["create-require@1.1.1", "", {}, "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="],
 
+    "crisp-sdk-web": ["crisp-sdk-web@1.0.25", "", {}, "sha512-CWTHFFeHRV0oqiXoPh/aIAKhFs6xcIM4NenGPnClAMCZUDQgQsF1OWmZWmnVNjJriXUmWRgDfeUxcxygS0dCRA=="],
+
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
     "crypto-random-string": ["crypto-random-string@4.0.0", "", { "dependencies": { "type-fest": "^1.0.1" } }, "sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA=="],