feat: improve chatbot integration + css fixes

apps/backoffice-v2/src/common/env/schema.ts

@@ -39,4 +39,5 @@ export const EnvSchema = z.object({
     return new RegExp(value);
   }, z.custom<RegExp>(value => value instanceof RegExp).optional()),
   VITE_SAOLA_API_KEY: z.string().optional(),
+  VITE_BOTPRESS_CLIENT_ID: z.string().default('8f29c89d-ec0e-494d-b18d-6c3590b28be6'),
 });

apps/backoffice-v2/src/domains/chat/chatbot-opengpt.tsx

@@ -1,38 +1,93 @@
-import { getClient, Webchat, WebchatProvider } from '@botpress/webchat';
+import { getClient, Webchat, WebchatProvider, WebchatClient } from '@botpress/webchat';
 import { buildTheme } from '@botpress/webchat-generator';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useAuthenticatedUserQuery } from '../../domains/auth/hooks/queries/useAuthenticatedUserQuery/useAuthenticatedUserQuery';
+import { useCurrentCaseQuery } from '../../pages/Entity/hooks/useCurrentCaseQuery/useCurrentCaseQuery';
+import { useLocation } from 'react-router-dom';
 
 // declare const themeNames: readonly ["prism", "galaxy", "dusk", "eggplant", "dawn", "midnight"];
 const { theme, style } = buildTheme({
   themeName: 'galaxy',
   themeColor: 'blue',
 });
 
-const clientId = '8f29c89d-ec0e-494d-b18d-6c3590b28be6';
-
 const Chatbot = ({
   isWebchatOpen,
   toggleIsWebchatOpen,
+  client,
+  setClient,
+  chatbotClientId,
 }: {
   isWebchatOpen: boolean;
   toggleIsWebchatOpen: () => void;
+  client: WebchatClient | null;
+  setClient: (client: WebchatClient) => void;
+  chatbotClientId: string;
 }) => {
-  const client = getClient({ clientId });
   const { data: session } = useAuthenticatedUserQuery();
+  const { data: currentCase } = useCurrentCaseQuery();
+  const { pathname } = useLocation();
+
+  const sendCaseData = useCallback(
+    async (caseId: string, newClient?: WebchatClient) => {
+      if (!currentCase) return;
+
+      const clientToUse = newClient || client;
+
+      try {
+        const currentCaseData = {
+          ...currentCase.context,
+          caseId,
+        };
+        await clientToUse?.sendEvent({
+          type: 'case-data',
+          data: currentCaseData,
+        });
+      } catch (error) {
+        console.error('Failed to send case data:', error);
+      }
+    },
+    [currentCase, client],
+  );
 
   useEffect(() => {
-    if (session?.user) {
-      const { firstName, lastName, email } = session.user;
-      void client.updateUser({
+    if (client || !chatbotClientId || !session?.user) return;
+
+    const { firstName, lastName, email } = session.user;
+    const newClient = getClient({ clientId: chatbotClientId });
+    setClient(newClient);
+
+    // newClient.on('*', (ev: any) => {
+    //   console.log('Event: ', ev);
+    // });
+
+    newClient.on('conversation', (ev: any) => {
+      // new conversation created
+      void newClient.updateUser({
         data: {
           firstName,
           lastName,
           email,
         },
       });
-    }
-  }, [session, client]);
+      const caseId = pathname.split('/')[pathname.split('/').length - 1];
+      setTimeout(() => {
+        void sendCaseData(caseId || '', newClient);
+      }, 500);
+    });
+  }, [session, client, setClient, sendCaseData, pathname, chatbotClientId]);
+
+  useEffect(() => {
+    console.log('pathname changed to: ', pathname);
+
+    const caseId = pathname.split('/')[pathname.split('/').length - 1];
+
+    if (caseId) void sendCaseData(caseId);
+  }, [pathname, sendCaseData]);
+
+  if (!client) {
+    return null;
+  }
 
   return (
     <div>

apps/backoffice-v2/src/domains/customer/fetchers.ts

@@ -21,6 +21,7 @@ const CustomerSchema = z.object({
   language: z.union([z.string(), z.null()]).optional(),
   features: z
     .object({
+      chatbot: z.object({ isEnabled: z.boolean().default(false), clientId: z.string().optional() }),
       createBusinessReport: z
         .object({ enabled: z.boolean().default(false), options: createBusinessReportOptions })
         .optional(),

apps/backoffice-v2/src/pages/Root/Root.page.tsx

@@ -5,6 +5,10 @@ import { ServerDownLayout } from './ServerDown.layout';
 import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
 import { FullScreenLoader } from '@/common/components/molecules/FullScreenLoader/FullScreenLoader';
 import Chatbot from '@/domains/chat/chatbot-opengpt';
+import { WebchatClient } from '@botpress/webchat';
+import { RenderChildrenInIFrame } from '@/common/components/organisms/RenderChildrenInIFrame/RenderChildrenInIFrame';
+import { ctw } from '@/common/utils/ctw/ctw';
+import { env } from '@/common/env/env';
 
 const ReactQueryDevtools = lazy(() =>
   process.env.NODE_ENV !== 'production'
@@ -16,6 +20,7 @@ const ReactQueryDevtools = lazy(() =>
 
 const ChatbotLayout: FunctionComponent = () => {
   const { data: customer, isLoading: isLoadingCustomer } = useCustomerQuery();
+  const [client, setClient] = useState<WebchatClient | null>(null);
   const [isWebchatOpen, setIsWebchatOpen] = useState(false);
   const toggleIsWebchatOpen = () => {
     setIsWebchatOpen(prevState => !prevState);
@@ -25,11 +30,28 @@ const ChatbotLayout: FunctionComponent = () => {
     return <FullScreenLoader />;
   }
 
-  if (!customer?.config?.isChatbotEnabled) {
+  if (!customer?.features?.chatbot?.isEnabled) {
     return null;
   }
 
-  return <Chatbot isWebchatOpen={isWebchatOpen} toggleIsWebchatOpen={toggleIsWebchatOpen} />;
+  const chatbotClientId = customer?.features?.chatbot?.clientId || env.VITE_BOTPRESS_CLIENT_ID;
+
+  return (
+    <RenderChildrenInIFrame
+      className={ctw('fixed bottom-right-0', {
+        'h-[700px] w-[400px]': isWebchatOpen,
+        'd-[80px]': !isWebchatOpen,
+      })}
+    >
+      <Chatbot
+        isWebchatOpen={isWebchatOpen}
+        toggleIsWebchatOpen={toggleIsWebchatOpen}
+        client={client}
+        setClient={setClient}
+        chatbotClientId={chatbotClientId}
+      />
+    </RenderChildrenInIFrame>
+  );
 };
 
 export const Root: FunctionComponent = () => {