feat(frontend): add a chatbot for users (#2144)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/App.tsx

@@ -19,6 +19,7 @@ import { ChatsProvider } from "@/lib/context/ChatsProvider";
 import { MenuProvider } from "@/lib/context/MenuProvider/Menu-provider";
 import { SearchModalProvider } from "@/lib/context/SearchModalProvider/search-modal-provider";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
+import { IntercomProvider } from "@/lib/helpers/intercom/IntercomProvider";
 import { UpdateMetadata } from "@/lib/helpers/updateMetadata";
 import { usePageTracking } from "@/services/analytics/june/usePageTracking";
 import "../lib/config/LocaleConfig/i18n";
@@ -55,19 +56,21 @@ const App = ({ children }: PropsWithChildren): JSX.Element => {
 
   return (
     <PostHogProvider client={posthog}>
-      <div className="flex flex-1 flex-col overflow-auto">
-        <SearchModalProvider>
-          <SearchModal />
-          <NotificationBanner />
-          <div className="relative h-full w-full flex justify-stretch items-stretch overflow-auto">
-            <Menu />
-            <div onClick={onClickOutside} className="flex-1">
-              {children}
+      <IntercomProvider>
+        <div className="flex flex-1 flex-col overflow-auto">
+          <SearchModalProvider>
+            <SearchModal />
+            <NotificationBanner />
+            <div className="relative h-full w-full flex justify-stretch items-stretch overflow-auto">
+              <Menu />
+              <div onClick={onClickOutside} className="flex-1">
+                {children}
+              </div>
+              <UpdateMetadata />
             </div>
-            <UpdateMetadata />
-          </div>
-        </SearchModalProvider>
-      </div>
+          </SearchModalProvider>
+        </div>
+      </IntercomProvider>
     </PostHogProvider>
   );
 };

frontend/lib/helpers/intercom/IntercomProvider.ts

@@ -0,0 +1,35 @@
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+import { useUserData } from "@/lib/hooks/useUserData";
+
+import {
+  boot as bootIntercom,
+  load as loadIntercom,
+  update as updateIntercom,
+} from "./intercom";
+
+export const IntercomProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactNode => {
+  const pathname = usePathname();
+  const { userData } = useUserData();
+
+  if (
+    typeof window !== "undefined" &&
+    process.env.NEXT_PUBLIC_INTERCOM_APP_ID
+  ) {
+    loadIntercom();
+    bootIntercom(userData?.email ?? "");
+  }
+
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_INTERCOM_APP_ID) {
+      updateIntercom();
+    }
+  }, [pathname]);
+
+  return children;
+};

frontend/lib/helpers/intercom/intercom.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+export const APP_ID = process.env.NEXT_PUBLIC_INTERCOM_APP_ID;
+
+// prettier-ignore
+export const load = (): void => {
+    (function(){const w=window;const ic=(w as any).Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',(w as any).intercomSettings);}else{const d=document;const i=function(){i.c(arguments);};i.q=[] as any[];i.c=function(args: any){i.q.push(args);};(w as any).Intercom=i;const l=function(){const s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;const x=d.getElementsByTagName('script')[0];x.parentNode?.insertBefore(s, x);};if(document.readyState==='complete'){l();}else if((w as any).attachEvent){(window as any).attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
+}
+
+// Initializes Intercom
+export const boot = (email: string): void => {
+  (window as any).Intercom &&
+    (window as any).Intercom("boot", { app_id: APP_ID, email });
+};
+
+export const update = (): void => {
+  window && (window as any).Intercom && (window as any).Intercom("update");
+};

frontend/next.config.js

@@ -50,6 +50,8 @@ const ContentSecurityPolicy = {
     "https://api.june.so",
     "https://us.posthog.com",
     "https://preview.quivr.app",
+    "*.intercom.io",
+    "*.intercomcdn.com",
     "https://*.vercel.app",
     process.env.NEXT_PUBLIC_FRONTEND_URL,
   ],
@@ -58,6 +60,8 @@ const ContentSecurityPolicy = {
     process.env.NEXT_PUBLIC_SUPABASE_URL,
     process.env.NEXT_PUBLIC_BACKEND_URL,
     process.env.NEXT_PUBLIC_CMS_URL,
+    "*.intercom.io",
+    "*.intercomcdn.com",
     "https://api.june.so",
     "https://api.openai.com",
     "https://cdn.growthbook.io",
@@ -67,6 +71,8 @@ const ContentSecurityPolicy = {
   "img-src": [
     "'self'",
     "https://www.gravatar.com",
+    "*.intercom.io",
+    "*.intercomcdn.com",
     "https://quivr-cms.s3.eu-west-3.amazonaws.com",
     "data:",
     "*",
@@ -83,6 +89,8 @@ const ContentSecurityPolicy = {
     "'unsafe-inline'",
     "'unsafe-eval'",
     "https://va.vercel-scripts.com/",
+    "*.intercom.io",
+    "*.intercomcdn.com",
     process.env.NEXT_PUBLIC_FRONTEND_URL,
     "https://preview.quivr.app",
     "https://*.vercel.app",