[FEATURE] Ajout d'un chatbot sur la page de support

.github/workflows/docker-deployment.yml

@@ -5,20 +5,21 @@ on:
     # Pattern matched against refs/tags
     tags:
       - '*' # Push events to every tag not containing / ( prevents tags like v1.2.3/beta )
-
+    branches:
+      - 'poc-support-bot' # Push events to every tag not containing / ( prevents tags like v1.2.3/beta )
+
 jobs:
-  get-last-tag: 
+  get-last-tag:
     runs-on: ubuntu-latest
     outputs:
       last_tag: ${{ steps.last-release.outputs.tag }}
     steps:
-    - uses: actions/checkout@v4
-    - name: Get latest release
-      id: last-release
-      uses: actions-ecosystem/action-get-latest-tag@v1
-      with:
-        semver_only: true
-
+      - uses: actions/checkout@v4
+      - name: Get latest release
+        id: last-release
+        uses: actions-ecosystem/action-get-latest-tag@v1
+        with:
+          semver_only: true
 
   build-and-push-image:
     strategy:
@@ -28,60 +29,35 @@ jobs:
             domain-url-fr: ${{ vars.PIX_SITE_DOMAIN_FR }}
             domain-url-org: ${{ vars.PIX_SITE_DOMAIN_ORG }}
             matomo-container: ${{ vars.PIX_SITE_MATOMO_CONTAINER }}
+            analytics_script_url: https://plausible.io/js/script.file-downloads.hash.outbound-links.pageview-props.tagged-events.js
           - site: pix-pro
             domain-url-fr: ${{ vars.PIX_PRO_DOMAIN_FR }}
             domain-url-org: ${{ vars.PIX_PRO_DOMAIN_ORG }}
             matomo-container: ${{ vars.PIX_PRO_MATOMO_CONTAINER }}
+            analytics_script_url: https://plausible.io/js/script.file-downloads.hash.outbound-links.pageview-props.tagged-events.js
     runs-on: ubuntu-latest
     needs: get-last-tag
     env:
       build_site: ${{ matrix.site }}
       last_tag: ${{ needs.get-last-tag.outputs.last_tag }}
     steps:
-    - uses: actions/checkout@v4
-    - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v3
-    - name: Login to Docker Hub
-      uses: docker/login-action@v3
-      with:
-        username: nologin
-        password: ${{ secrets.SCW_PRODUCTION_SECRET_KEY }}
-        registry: ${{ secrets.CONTAINER_REGISTRY_PRODUCTION_ENDPOINT }}
-    - name: Build and push ${{ matrix.site }}
-      uses: docker/build-push-action@v5
-      with:
-        push: true
-        tags: ${{ secrets.CONTAINER_REGISTRY_PRODUCTION_ENDPOINT }}/${{ env.build_site }}:latest,${{ secrets.CONTAINER_REGISTRY_PRODUCTION_ENDPOINT }}/${{ env.build_site }}:${{ env.last_tag }}
-        context: .
-        build-args: |
-          SITE=${{ matrix.site }}
-          DOMAIN_FR=${{ matrix.domain-url-fr }}
-          DOMAIN_ORG=${{ matrix.domain-url-org }}
-          MATOMO_CONTAINER=${{ matrix.matomo-container }}
-          EASIWARE_SCRIPT_URL=${{ vars.EASIWARE_SCRIPT_URL }}
-
-  deploy-containers:
-    needs: [get-last-tag, build-and-push-image]
-    runs-on: ubuntu-latest
-    env:
-      last_tag: ${{ needs.get-last-tag.outputs.last_tag }}
-      custom-args: environment-variables.NGINX_GEOAPI_UPSTREAM_HOST=${{ secrets.NGINX_GEOAPI_UPSTREAM_HOST }}
-    steps:
-    - name: Use CLI
-      uses: scaleway/action-scw@v0
-      with:
-        save-config: true
-        export-config: true
-        version: v2.30.0
-        access-key: ${{ secrets.SCW_PRODUCTION_ACCESS_KEY }}
-        secret-key: ${{ secrets.SCW_PRODUCTION_SECRET_KEY }}
-        default-project-id: ${{ secrets.SCW_DEFAULT_PROJECT_ID }}
-        default-organization-id: ${{ secrets.SCW_DEFAULT_ORGANIZATION_ID }}
-    - uses: scaleway/action-scw@v0
-      name: update pix-site container tag
-      with:
-        args: container container update "${{ secrets.SCW_PRODUCTION_PIX_SITE_CONTAINER_ID }}" registry-image=${{ secrets.CONTAINER_REGISTRY_PRODUCTION_ENDPOINT }}/pix-site:${{ needs.get-last-tag.outputs.last_tag }} "${{ env.custom-args}}"
-    - uses: scaleway/action-scw@v0
-      name: update pix-pro container tag
-      with:
-        args: container container update "${{ secrets.SCW_PRODUCTION_PIX_PRO_CONTAINER_ID }}" registry-image=${{ secrets.CONTAINER_REGISTRY_PRODUCTION_ENDPOINT }}/pix-pro:${{ needs.get-last-tag.outputs.last_tag }} "${{ env.custom-args}}"
+      - uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: nologin
+          password: ${{ secrets.SCW_PRODUCTION_SECRET_KEY }}
+          registry: ${{ secrets.CONTAINER_REGISTRY_PRODUCTION_ENDPOINT }}
+      - name: Build and push ${{ matrix.site }}
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          # Tag image with short sha
+          tags: ${{ secrets.CONTAINER_REGISTRY_PRODUCTION_ENDPOINT }}/${{ env.build_site }}:dev-${{ github.ref_name }}-${{ github.run_number }}
+          context: .
+          build-args: |
+            SITE=${{ matrix.site }}
+            DOMAIN_FR=${{ matrix.domain-url-fr }}
+            DOMAIN_ORG=${{ matrix.domain-url-org }}

Dockerfile

@@ -22,9 +22,8 @@ FROM install-stage AS build-stage
 # Mandatory build args 
 ARG DOMAIN_FR=localhost
 ARG DOMAIN_ORG=localhost
-ARG MATOMO_CONTAINER
-ARG EASIWARE_SCRIPT_URL
 ARG FORM_KEYS_TO_MAP={"masteryPercentage":"control1808388","stage":"control1808389"}
+ARG analytics_script_url="https://plausible.io/js/script.file-downloads.hash.outbound-links.pageview-props.tagged-events.js"
 
 # Copy du code
 COPY shared /code/shared
@@ -33,7 +32,7 @@ COPY ${SITE}/ /code/${SITE}
 # Build de l'application 
 RUN npm run build
 
-FROM nginx:1.27.1-alpine AS run-stage
+FROM nginx:1.29-alpine AS run-stage
 ARG SITE
 
 ENV NGINX_GEOAPI_UPSTREAM_HOST=localhost

pix-site/nginx/templates/default.conf.template

@@ -74,15 +74,14 @@ server {
 
   # Plausible config
   location = /analytics/script.js {
-      proxy_pass ${ANALYTICS_SCRIPT_URL};
+      proxy_pass https://plausible.io/js/script.file-downloads.hash.outbound-links.pageview-props.tagged-events.js;
       proxy_set_header Host plausible.io;
 
 
       # Tiny, negligible performance improvement. Very optional.
       proxy_buffering on;
 
       # Cache the script for 6 hours, as long as plausible.io returns a valid response
-      proxy_cache jscache;
       proxy_cache_valid 200 6h;
       proxy_cache_use_stale updating error timeout invalid_header http_500;
 

shared/pages/support/index.vue

@@ -15,10 +15,13 @@
         <support-persona-card :content="persona" />
       </li>
     </ul>
+    <div id="hb-chat-widget"></div>
   </div>
 </template>
 
 <script setup>
+import { onMounted } from 'vue';
+
 const { client } = usePrismic();
 const { locale: i18nLocale, t } = useI18n();
 
@@ -36,8 +39,36 @@ defineI18nRoute({
 useHead({
   title: t('support.meta.title'),
   meta: [{ name: 'description', content: t('support.meta.description') }],
+  script: [{ crossorigin: '', src: 'https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js' },
+    { crossorigin: '', src: 'https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js' },
+    { src: 'https://cdn.jsdelivr.net/npm/hexabot-chat-widget@2/dist/hexabot-widget.umd.js' }],
 });
 
+onMounted(() => {
+  const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
+  const shadowContainer = createElement('div');
+  console.log(shadowContainer);
+  document
+    .getElementById('hb-chat-widget')
+    .attachShadow({ mode: 'open' })
+    .append(
+      shadowContainer,
+      createElement('link', {
+        rel: 'stylesheet',
+        href: 'https://cdn.jsdelivr.net/npm/hexabot-chat-widget@2/dist/style.css',
+      }),
+    );
+
+  // Render the widget inside the shadow root
+  ReactDOM.render(
+    React.createElement(HexabotWidget, {
+      apiUrl: 'https://chatbot-support.pocllm.pix.digital/api',
+      channel: 'web-channel',
+      language: i18nLocale?.value?.substr(0, 2) || 'fr',
+    }),
+    shadowContainer,
+  );
+});
 /* Fetch personas list */
 const { data } = await useAsyncData(async () => {
   try {