Skip to content

Commit 3775b82

Browse files
GarneaumaGarneauma
committed
Thematic AI answers: adding thematic
1 parent c98381d commit 3775b82

File tree

8 files changed

+272
-1
lines changed

8 files changed

+272
-1
lines changed

‎_data/méli-mélo.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"th-winterlude",
3030
"th-zev",
3131
"th-empathy",
32-
"th-choose-canada"
32+
"th-choose-canada",
33+
"th-ai-answers"
3334
]
3435
}
3536
],
@@ -104,6 +105,10 @@
104105
"nom": "2024-10-datatable-utilities",
105106
"mainpage": "index-en.html"
106107
},
108+
{
109+
"nom": "th-ai-answers",
110+
"mainpage": "index-en.html"
111+
},
107112
{
108113
"nom": "th-choose-canada",
109114
"mainpage": "index.html"

‎docs/méta-détails/th-ai-answers-en.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: th-ai-answers - Méli-mélo details
3+
componentName: th-ai-answers
4+
layout: thématique-en
5+
altLangPage: détails-fr.html
6+
lang: en
7+
breadcrumbs: [
8+
{ "title": "Thematic", "link": "thématique/gc-thématique-en.html" }
9+
]
10+
permalink: /méli-mélo/th-ai-answers/détails-en.html
11+
---

‎docs/méta-détails/th-ai-answers-fr.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: th-ai-answers - Détails du méli-mélo
3+
componentName: th-ai-answers
4+
layout: thématique-fr
5+
altLangPage: détails-en.html
6+
lang: fr
7+
breadcrumbs: [
8+
{ "title": "Thématique", "link": "thématique/gc-thématique-fr.html" }
9+
]
10+
permalink: /méli-mélo/th-ai-answers/détails-fr.html
11+
---

‎méli-mélo/th-ai-answers/ai-answers.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/**
2+
* @title WET-BOEW GC AI answers thematic
3+
* @overview AI answers thematic
4+
* @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
5+
* @author @garneauma
6+
*/
7+
8+
(function () {
9+
const trigger = document.querySelector(".ai-answers-trigger");
10+
if (!trigger) return; // exit if no trigger
11+
12+
const lang = document.documentElement.lang;
13+
const pageHeader = document.querySelector("header");
14+
const dateModifiedElm = document.querySelector("#wb-dtmd");
15+
const closed = sessionStorage.getItem("aiaClosed") === "true";
16+
const banners = {
17+
main: {
18+
fr: `
19+
<aside class="aia-banner">
20+
<h2 class="wb-inv">Bannière Réponses IA</h2>
21+
<div class="container">
22+
<div class="d-flex align-items-center">
23+
<img src="https://canada.ca/content/dam/canada/ai-stars.png" alt="">
24+
<p><strong>Besoin d'aide?</strong>
25+
<a href="https://reponses-ia.alpha.canada.ca" referrerpolicy="unsafe-url">
26+
Essayez une version bêta de Réponses IA</a></p>
27+
</div>
28+
</div>
29+
<button class="aia-close" type="button" aria-label="Fermer la bannière Réponses IA">×</button>
30+
</aside>`,
31+
en: `
32+
<aside class="aia-banner">
33+
<h2 class="wb-inv">AI answers banner</h2>
34+
<div class="container">
35+
<div class="d-flex align-items-center">
36+
<img src="https://canada.ca/content/dam/canada/ai-stars.png" alt="">
37+
<p><strong>Need help?</strong>
38+
<a href="https://ai-answers.alpha.canada.ca" referrerpolicy="unsafe-url">
39+
Try a beta test of AI Answers</a></p>
40+
</div>
41+
</div>
42+
<button class="aia-close" type="button" aria-label="Close AI answers banner">×</button>
43+
</aside>`
44+
},
45+
rescue: {
46+
fr: `
47+
<section class="aia-rescue">
48+
<h3 class="wb-inv">Bannière Réponses IA</h3>
49+
<div class="d-flex align-items-center">
50+
<img src="https://canada.ca/content/dam/canada/ai-stars-blue.png" alt="">
51+
<p><strong>Besoin d'aide?</strong>
52+
<a href="https://reponses-ia.alpha.canada.ca" referrerpolicy="unsafe-url">
53+
Essayez une version bêta de Réponses IA</a></p>
54+
</div>
55+
</section>`,
56+
en: `
57+
<section class="aia-rescue">
58+
<h3 class="wb-inv">AI answers banner</h3>
59+
<div class="d-flex align-items-center">
60+
<img src="https://canada.ca/content/dam/canada/ai-stars-blue.png" alt="">
61+
<p><strong>Need help?</strong>
62+
<a href="https://ai-answers.alpha.canada.ca" referrerpolicy="unsafe-url">
63+
Try a beta test of AI Answers</a></p>
64+
</div>
65+
</section>`
66+
}
67+
};
68+
69+
dateModifiedElm.insertAdjacentHTML("beforebegin", banners.rescue[lang]);
70+
71+
if (!closed) {
72+
pageHeader.insertAdjacentHTML("beforebegin", banners.main[lang]);
73+
74+
const closeBtn = document.querySelector(".aia-close");
75+
76+
closeBtn.addEventListener("click", () => {
77+
closeBtn.parentElement.remove();
78+
sessionStorage.setItem("aiaClosed", "true");
79+
});
80+
}
81+
82+
availabilityCheck();
83+
})();
84+
85+
// Check if chat service is available
86+
async function availabilityCheck() {
87+
const banners = document.querySelectorAll(".aia-banner, .aia-rescue");
88+
const hideBanner = () => banners.forEach(el => el.remove());
89+
const AVAILABILITY_ENDPOINT = "https://ai-answers.alpha.canada.ca/api/chat/chat-session-availability";
90+
91+
try {
92+
const res = await fetch(AVAILABILITY_ENDPOINT);
93+
94+
if (!res?.ok) {
95+
hideBanner();
96+
return;
97+
}
98+
99+
const data = await res.json();
100+
101+
// If the required flags are absent or false → hide the banner
102+
if (!data?.siteStatus || !data?.sessionAvailable) {
103+
hideBanner();
104+
}
105+
} catch {
106+
// Any error (network, parse, CORS)
107+
hideBanner();
108+
}
109+
}

‎méli-mélo/th-ai-answers/index-en.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: AI answers thematic
3+
dateModified: "2025-11-27"
4+
description: AI answers thematic documentation and working example
5+
lang: en
6+
altLangPage: index-fr.html
7+
css:
8+
- style.css
9+
script:
10+
- ai-answers.js
11+
---
12+
13+
<p>This page serves as an example of for AI answers beta testing top banner.</p>
14+
15+
<div class="ai-answers-trigger"></div>
16+
17+
<h2>Instructions</h2>
18+
<p>Insert the following code snippet in your page to activate the AI Answers banner.</p>
19+
<pre><code>&lt;div class="ai-answers-trigger">&lt;/div></code></pre>

‎méli-mélo/th-ai-answers/index-fr.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: Thématique Réponses IA
3+
dateModified: "2025-11-27"
4+
description: Documentation et exemple pratique de Réponses IA
5+
lang: fr
6+
altLangPage: index-en.html
7+
css:
8+
- style.css
9+
script:
10+
- ai-answers.js
11+
---
12+
13+
<p>Cette page sert d'exemple pour la bannière supérieure du test bêta de Réponses IA.</p>
14+
15+
<div class="ai-answers-trigger"></div>
16+
17+
<h2>Instructions</h2>
18+
<p>Insérez le bout de code suivant dans votre page pour activer la bannière Réponses IA.</p>
19+
<pre><code>&lt;div class="ai-answers-trigger">&lt;/div></code></pre>

‎méli-mélo/th-ai-answers/meta.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
feature: thématique
3+
lang: en
4+
title: AI Answers theme
5+
description: Top banner for AI answers beta testing
6+
componentName: th-ai-answers
7+
expiry: February 28th, 2026
8+
mainPage: index-en.html
9+
cssClass:
10+
- aia-banner
11+
jsFunctions:
12+
- anonymous function
13+
pages:
14+
examples:
15+
- title: AI answers thematic
16+
language: en
17+
path: index-en.html
18+
- title: Thématique réponses IA
19+
language: fr
20+
path: index-fr.html
21+
sponsor: Marc-André Garneau on behalf of Principal Publisher - ESDC
22+
23+
output: false
24+
---

‎méli-mélo/th-ai-answers/style.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/* AI answers components styles */
2+
.aia-banner {
3+
background: #1a2838;
4+
color: #fff;
5+
position: sticky;
6+
top: 0;
7+
z-index: 2;
8+
}
9+
10+
.aia-banner p {
11+
font-size: 1.125rem;
12+
margin: 0;
13+
padding: .875rem 2rem .875rem .75rem;
14+
}
15+
16+
.aia-banner p a {
17+
color: #fff;
18+
}
19+
20+
.aia-banner p a:hover, .aia-banner p a:focus {
21+
color: #b3ffff;
22+
}
23+
24+
.aia-banner .aia-close {
25+
background: none;
26+
border: none;
27+
border-radius: 50%;
28+
color: white;
29+
cursor: pointer;
30+
font-family: Arial, sans-serif;
31+
font-size: 2rem;
32+
font-weight: normal;
33+
height: 45px;
34+
line-height: 1;
35+
padding: 0;
36+
position: absolute;
37+
right: 2px;
38+
top: 50%;
39+
transform: translateY(-50%);
40+
transition: background-color 0.2s ease;
41+
width: 45px;
42+
}
43+
44+
.aia-banner .aia-close:hover {
45+
background-color: rgb(255, 255, 255, 0.1);
46+
}
47+
48+
.aia-banner .aia-close:focus {
49+
background-color: rgb(255, 255, 255, 0.1);
50+
box-shadow: 0 0 0 2px white;
51+
outline: none;
52+
}
53+
54+
/* Rescue link */
55+
.aia-rescue {
56+
margin-top: 1rem;
57+
}
58+
59+
.aia-rescue p {
60+
margin: 0;
61+
padding: .5rem 0 .5rem .75rem;
62+
}
63+
64+
@media screen and (max-width: 767px) {
65+
.aia-banner p {
66+
font-size: 1rem;
67+
padding-left: .5rem;
68+
}
69+
70+
.aia-banner p a {
71+
display: block;
72+
}
73+
}

0 commit comments

Comments
 (0)