Skip to content

Commit 56bc155

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

File tree

8 files changed

+283
-1
lines changed

8 files changed

+283
-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(".pagedetails > h2");
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" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Essayez une version bêta de Réponses IA”>
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="Essayez une version bêta de 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" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Try a beta test of AI Answers”>
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" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Try a beta test of AI Answers”>
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" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Try a beta test of AI Answers”>
63+
Try a beta test of AI Answers</a></p>
64+
</div>
65+
</section>`
66+
}
67+
};
68+
69+
dateModifiedElm.insertAdjacentHTML("afterend", 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+
aiAnswersAvailabilityCheck();
83+
})();
84+
85+
// Check if chat service is available
86+
async function aiAnswersAvailabilityCheck() {
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: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
- aia-rescue
12+
- aia-close
13+
jsFunctions:
14+
- aiAnswersAvailabilityCheck
15+
a11yStatement: >
16+
These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum). After validation using WebAIM online contrast checker, I certify that the colours used in this thematic are meeting a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and also a contrast ratio of at least 3:1 for graphics and user interface components. Furthermore, the meaningful sequence is respected, meeting WCAG 2.1 AA Success Criterion 1.3.2. I did my due diligence and, to the best of my knowledge and understanding, all elements of this thematic are meeting WCAG 2.1 AA standards.
17+
Tested by Marc-André Garneau, marcandre.garneau@servicecanada.gc.ca. 2025-12-01.
18+
pages:
19+
examples:
20+
- title: AI answers thematic
21+
language: en
22+
path: index-en.html
23+
- title: Thématique réponses IA
24+
language: fr
25+
path: index-fr.html
26+
sponsor: Marc-André Garneau, Principal Publisher on behalf of Digital Transformation Office (DTO)
27+
28+
changes:
29+
- date: 2025-12-01
30+
description: This thematic provides a top banner to invite users to the beta testing of AI Answers. The banner includes a close button to dismiss the banner. The thematic also includes a rescue link at the bottom of the page for users who missed the banner or dismissed it by mistake. The intent of this thematic is to inform users about the AI Answers beta testing and to provide them with a way to access the beta testing page. It is meant to be temporary and used on around 100 pages (EN and FR) during the testing period.
31+
departmentImpact: This banner is necessary in order to provide our partner departments (TBS, ESDC EI, HC) with a link and message to try a beta test of AI Answers. The vision for AI Answers is that in 2026, it will be displayed on more and more pages on Canada.ca to provide help to visitors. The beta test this December provides DTO and our partner departments with a consistent method of offering access to AI Answers across a set of pages. By January, we hope that partner departments like IRCC and ESDC can offer access on larger sets of pages, rather than adding one by one.
32+
publicImpact: Previous DTO trials in summer and fall were displayed on a very limited set of pages through the PP inviter. Inviters are unwelcome interruptions to many users – some click them away without reading them, and were a temporary stage. We now seek to deploy a familiar sticky banner style invitation to use AI Answers. The impact on the public for those who wish to get help with their questions is positive – they can see the offer of AI Answers immediately. For those not seeking help, the impact is negligible. It does make their view of the page slightly shorter – but they can still click the X to remove the banner.
33+
34+
output: false
35+
---

‎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: 1rem 0;
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)