Skip to content

Commit dc2f497

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

File tree

8 files changed

+276
-1
lines changed

8 files changed

+276
-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: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
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; // early exit
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+
17+
// Banner and rescue HTML grouped by language
18+
const banners = {
19+
main: {
20+
fr: `
21+
<aside class="aia-banner">
22+
<h2 class="wb-inv">Bannière Réponses IA</h2>
23+
<div class="container">
24+
<div class="d-flex align-items-center">
25+
<img src="https://canada.ca/content/dam/canada/ai-stars.png">
26+
<p><strong>Besoin d'aide?</strong>
27+
<a href="https://reponses-ia.alpha.canada.ca" referrerpolicy="unsafe-url" alt="">
28+
Essayez une version bêta de Réponses IA</a></p>
29+
</div>
30+
</div>
31+
<button class="aia-close" type="button" aria-label="Fermer la bannière Réponses IA">×</button>
32+
</aside>`,
33+
en: `
34+
<aside class="aia-banner">
35+
<h2 class="wb-inv">AI answers banner</h2>
36+
<div class="container">
37+
<div class="d-flex align-items-center">
38+
<img src="https://canada.ca/content/dam/canada/ai-stars.png" alt="">
39+
<p><strong>Need help?</strong>
40+
<a href="https://ai-answers.alpha.canada.ca" referrerpolicy="unsafe-url">
41+
Try a beta test of AI Answers</a></p>
42+
</div>
43+
</div>
44+
<button class="aia-close" type="button" aria-label="Close AI answers banner">×</button>
45+
</aside>`
46+
},
47+
rescue: {
48+
fr: `
49+
<div class="aia-rescue">
50+
<h3 class="wb-inv">Bannière Réponses IA</h3>
51+
<div class="d-flex align-items-center">
52+
<img src="https://canada.ca/content/dam/canada/ai-stars-blue.png" alt="">
53+
<p><strong>Besoin d'aide?</strong>
54+
<a href="https://reponses-ia.alpha.canada.ca" referrerpolicy="unsafe-url">
55+
Essayez une version bêta de Réponses IA</a></p>
56+
</div>
57+
</div>`,
58+
en: `
59+
<div class="aia-rescue">
60+
<h3 class="wb-inv">AI answers banner</h3>
61+
<div class="d-flex align-items-center">
62+
<img src="https://canada.ca/content/dam/canada/ai-stars-blue.png" alt="">
63+
<p><strong>Need help?</strong>
64+
<a href="https://ai-answers.alpha.canada.ca" referrerpolicy="unsafe-url">
65+
Try a beta test of AI Answers</a></p>
66+
</div>
67+
</div>`
68+
}
69+
};
70+
71+
// Insert rescue version if previously closed else insert the top banner
72+
if (closed) {
73+
dateModifiedElm.insertAdjacentHTML("beforebegin", banners.rescue[lang]);
74+
} else {
75+
// Insert main banner above header
76+
pageHeader.insertAdjacentHTML("beforebegin", banners.main[lang]);
77+
78+
const closeBtn = document.querySelector(".aia-close");
79+
80+
// Listen for close button click
81+
closeBtn.addEventListener("click", () => {
82+
closeBtn.parentElement.remove();
83+
sessionStorage.setItem("aiaClosed", "true");
84+
85+
// Insert the rescue snippet
86+
dateModifiedElm.insertAdjacentHTML("beforebegin", banners.rescue[lang]);
87+
});
88+
}
89+
90+
availabilityCheck();
91+
})();
92+
93+
// Availability check: hide banner if siteStatus === false OR sessionAvailable === false
94+
async function availabilityCheck() {
95+
const banner = document.querySelector(".aia-banner, .aia-rescue");
96+
const hideBanner = () => banner.remove();
97+
const AVAILABILITY_ENDPOINT = "https://ai-answers.alpha.canada.ca/api/chat/chat-session-availability";
98+
99+
try {
100+
const res = await fetch(AVAILABILITY_ENDPOINT);
101+
102+
if (!res?.ok) {
103+
hideBanner();
104+
return;
105+
}
106+
107+
const data = await res.json();
108+
109+
// If the required flags are absent or false → hide the banner
110+
if (!data?.siteStatus || !data?.sessionAvailable) {
111+
hideBanner();
112+
}
113+
} catch {
114+
// Any error (network, parse, CORS)
115+
hideBanner();
116+
}
117+
}

‎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-24
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-24
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 30th, 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: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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 p {
56+
margin: 0;
57+
padding: .5rem 0 .5rem .75rem;
58+
}
59+
60+
@media screen and (max-width: 767px) {
61+
.aia-banner p {
62+
font-size: 1rem;
63+
padding-left: .5rem;
64+
}
65+
66+
.aia-banner p a {
67+
display: block;
68+
}
69+
}

0 commit comments

Comments
 (0)