✨(frontend) add crisp chatbot

Add crisp chatbot to allow users for interaction.
Create a new crisp chatbot component for this and populate with user info.

src/frontend/apps/impress/.env

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_API_ORIGIN=
 NEXT_PUBLIC_Y_PROVIDER_URL=
 NEXT_PUBLIC_MEDIA_URL=
-NEXT_PUBLIC_THEME=dsfr
+NEXT_PUBLIC_THEME=dsfr
+NEXT_PUBLIC_CRISP_WEBSITE_ID=

src/frontend/apps/impress/package.json

@@ -22,6 +22,7 @@
  "@hocuspocus/provider": "2.13.5",
  "@openfun/cunningham-react": "2.9.4",
  "@tanstack/react-query": "5.56.2",
+ "crisp-sdk-web": "*",
  "i18next": "23.15.1",
  "idb": "8.0.0",
  "lodash": "4.17.21",

src/frontend/apps/impress/src/components/CrispChat.tsx

@@ -0,0 +1,26 @@
+import { Crisp } from 'crisp-sdk-web';
+import { useEffect } from 'react';
+
+import { useAuthStore } from '@/core/auth';
+
+const CrispChat = () => {
+ const { userData } = useAuthStore();
+
+ useEffect(() => {
+ const CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID;
+ if (CRISP_WEBSITE_ID) {
+ Crisp.configure(CRISP_WEBSITE_ID);
+
+ // Identify user if available
+ if (userData) {
+ Crisp.user.setEmail(userData.email);
+ }
+ } else {
+ console.warn('Crisp Website ID is not set');
+ }
+ }, [userData]);
+
+ return null;
+};
+
+export default CrispChat;

src/frontend/apps/impress/src/crisp-sdk-web.d.ts

@@ -0,0 +1,8 @@
+declare module 'crisp-sdk-web' {
+ export const Crisp: {
+ configure: (websiteId: string) => void;
+ user: {
+ setEmail: (email: string) => void;
+ };
+ };
+}

src/frontend/apps/impress/src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import type { AppProps } from 'next/app';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useTranslation } from 'react-i18next';
 
@@ -12,6 +13,10 @@ type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
 };
 
+const CrispChat = dynamic(() => import('../components/CrispChat'), {
+ ssr: false,
+});
+
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
  useSWRegister();
  const getLayout = Component.getLayout ?? ((page) => page);
@@ -29,7 +34,10 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
  />
  <link rel="icon" href="/favicon.ico" sizes="any" />
  </Head>
- <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
+ <AppProvider>
+ {getLayout(<Component {...pageProps} />)}
+ <CrispChat />
+ </AppProvider>
  </>
  );
 }

src/frontend/apps/impress/tsconfig.json

@@ -24,6 +24,7 @@
  },
  "include": [
  "src/custom-next.d.ts",
+ "src/crisp-sdk-web.d.ts",
  "next-env.d.ts",
  "**/*.ts",
  "**/*.tsx",