55 lines
1.4 KiB
TypeScript

'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;