feat: add chatbot

InseeFr · Jan 13, 2025 · 0691d65 · 0691d65
1 parent 4050954
commit 0691d65
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -24,6 +24,45 @@
         />
         <link rel="preload" href="/dsfr/fonts/Marianne-Medium.woff2" as="font" crossorigin="anonymous" />
         <link rel="preload" href="/dsfr/fonts/Marianne-Bold.woff2" as="font" crossorigin="anonymous" />
+
+        <link rel="stylesheet" href="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/themes/df-messenger-default.css">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+        <link rel="stylesheet" href="https://contact.eloquant.cloud/insee/file/acd/chatbot/dialogflow-common.css" />
+
+        <script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
+        <script src="https://contact.eloquant.cloud/insee/file/acd/chatbot/jquery-3.3.1.min.js" type="text/javascript"></script>
+        <script type="text/javascript">
+            window.addEventListener('df-session-ended', () => {
+                const messenger = document.querySelector('df-messenger');
+                messenger.renderCustomText(`*Merci pour votre note de satisfaction*`, /* isBot= */ true);
+                messenger.startNewSession({ retainHistory: false });
+            });
+
+            function forceBorderRadius(){
+                const bubble = document.querySelector('df-messenger-chat-bubble');
+                if( bubble ){
+                var chat = bubble.shadowRoot.querySelector('df-messenger-chat');
+                if(chat){
+                    var messageList = chat.shadowRoot.querySelector('df-messenger-message-list');
+                    if(messageList){
+                    var messageListWrapper = messageList.shadowRoot.querySelector('.message-list-wrapper');
+                    if( !$( messageListWrapper ).find( '> style' ).length )
+                        $( messageListWrapper ).prepend( $( '<style>' ).text( '.message-list-wrapper { border-radius : 0 !important;}' ) );
+                    }
+                }
+                }
+            }
+
+            $(document).ready(function(){
+                const dfMessenger = document.querySelector( 'df-messenger' );
+                if( dfMessenger ){
+                forceBorderRadius()
+                dfMessenger.addEventListener( 'df-chat-open-changed', function( event ){
+                    forceBorderRadius();
+                });
+                }
+            });
+        </script>
     </head>
 
     <body>

diff --git a/src/components/Chatbox.tsx b/src/components/Chatbox.tsx
@@ -0,0 +1,32 @@
+export const Chatbot = () => {
+  return (
+    <>
+      <df-messenger
+        location="europe-west1"
+        project-id="insee-allcxagents"
+        agent-id="4c3b1ceb-466c-444d-ac67-c24f44da2f98"
+        language-code="fr"
+        max-query-length="-1"
+      >
+        <df-messenger-chat-bubble
+          chat-title-icon="https://entreprises.stat-publique.fr/img/favicon.ico"
+          chat-title="Insee - Platine"
+          chat-icon="https://contact.eloquant.cloud/insee/file/acd/chatbot/chat.svg"
+        ></df-messenger-chat-bubble>
+      </df-messenger>
+      <style>
+        {`
+        df-messenger {
+          --df-messenger-chat-window-width : 550px;
+        }
+
+        @media (max-width:570px){ 
+          df-messenger {
+            --df-messenger-chat-window-width : calc(100vw - 20px) !important;
+          }
+        }
+      `}
+      </style>
+    </>
+  );
+};
diff --git a/src/custom.d.ts b/src/custom.d.ts
@@ -0,0 +1,6 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    "df-messenger": Record<string, never, never>;
+    "df-messenger-chat-bubble": Record<string, never>;
+  }
+}
diff --git a/src/routes/$survey.tsx b/src/routes/$survey.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from "i18n";
 import { Helmet } from "react-helmet-async";
 import content from "resources/content.json";
 import { getPageTitle } from "functions/getPageTitle";
+import { Chatbot } from "components/Chatbox";
 
 export const Route = createFileRoute("/$survey")({
   component: Index,
@@ -40,6 +41,7 @@ function Index() {
         <title>{`${t(sectionTitle)} - ${surveyData?.titleShort} - ${headerTranslation("service tagline")}`}</title>
       </Helmet>
       <SurveyHomepage survey={surveyData} />
+      {surveyData.isSurveyOnline && <Chatbot />}
     </div>
   );
 }
diff --git a/src/routes/$survey/assistance.tsx b/src/routes/$survey/assistance.tsx
@@ -1,4 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { Chatbot } from "components/Chatbox";
 import { ForgotPassword } from "components/forgotPassword/ForgotPassword";
 import { useTranslation } from "i18n";
 import { Helmet } from "react-helmet-async";
@@ -18,6 +19,7 @@ function ForgotPasswordPage() {
         <title>{`${t("pageTitleForgotPassword")} - ${headerTranslation("service tagline")}`}</title>
       </Helmet>
       <ForgotPassword surveyId={survey} />
+      <Chatbot />
     </div>
   );
 }